tinymce: add filebrowser for photos and attached files

diff --git a/js/main.js b/js/main.js
index 7a90fa91063581a40057c3562837ec18fc6d154a..8cb522743a7f7e7febdfea20d4b278f9c79c8ea7 100644 (file)
--- a/js/main.js
+++ b/js/main.js
@@ -17,6 +17,7 @@
   }
 
 
+
        var src = null;
        var prev = null;
        var livetime = null;
@@ -558,6 +559,30 @@ function notifyMarkAll() {
 }
 
 
+// code from http://www.tinymce.com/wiki.php/How-to_implement_a_custom_file_browser
+function fcFileBrowser (field_name, url, type, win) {
+    /* TODO: If you work with sessions in PHP and your client doesn't accept cookies you might need to carry
+       the session name and session ID in the request string (can look like this: "?PHPSESSID=88p0n70s9dsknra96qhuk6etm5").
+       These lines of code extract the necessary parameters and add them back to the filebrowser URL again. */
+
+
+    var cmsURL = baseurl+"/fbrowser/"+type+"/";
+
+    tinyMCE.activeEditor.windowManager.open({
+        file : cmsURL,
+        title : 'File Browser',
+        width : 420,  // Your dimensions may differ - toy around with them!
+        height : 400,
+        resizable : "yes",
+        inline : "yes",  // This parameter only has an effect if you use the inlinepopups plugin!
+        close_previous : "no"
+    }, {
+        window : win,
+        input : field_name
+    });
+    return false;
+  }
+
 function setupFieldRichtext(){
        tinyMCE.init({
                theme : "advanced",
@@ -580,6 +605,7 @@ function setupFieldRichtext(){
                convert_urls: false,
                content_css: baseurl+"/view/custom_tinymce.css",
                theme_advanced_path : false,
+               file_browser_callback : "fcFileBrowser",
        });
 }
 

diff --git a/mod/fbrowser.php b/mod/fbrowser.php
new file mode 100644 (file)
index 0000000..44e21cb
--- /dev/null
+++ b/mod/fbrowser.php
@@ -0,0 +1,100 @@
+<?php
+/**
+ * @package            Friendica\modules
+ * @subpackage FileBrowser
+ * @author             Fabio Comuni <fabrixxm@kirgroup.com>
+ */
+ 
+/**
+ * @param App $a
+ */
+function fbrowser_content($a){
+       
+       if (!local_user())
+               killme();
+
+       if ($a->argc==1)
+               killme();
+       
+       //echo "<pre>"; var_dump($a->argv); killme();   
+       
+       switch($a->argv[1]){
+               case "image":
+                       if ($a->argc==2){
+                               $albums = q("SELECT distinct(`album`) AS `album` FROM `photo` WHERE `uid` = %d ",
+                                       intval(local_user())
+                               );
+                               // anon functions only from 5.3.0... meglio tardi che mai..
+                               function folder1($el){return array(bin2hex($el['album']),$el['album']);}        
+                               $albums = array_map( "folder1" , $albums);
+                               
+                               $tpl = get_markup_template("filebrowser.tpl");
+                               echo replace_macros($tpl, array(
+                                       '$type' => 'image',
+                                       '$baseurl' => $a->get_baseurl(),
+                                       '$path' => array( array($a->get_baseurl()."/fbrowser/image/", t("Photos"))),
+                                       '$folders' => $albums,
+                                       '$files' =>false,                                       
+                               ));
+                               
+                       }
+                       
+                       if ($a->argc==3){
+                               $album = hex2bin($a->argv[2]);
+                               $r = q("SELECT `resource-id`, `id`, `filename`, min(`scale`) AS `scale`, `desc`  FROM `photo` WHERE `uid` = %d AND `album` = '%s' 
+                                       AND `scale` <= 4 $sql_extra GROUP BY `resource-id`",
+                                       intval(local_user()),
+                                       dbesc($album)
+                               );
+                               
+                               
+                               function files1($rr){ global $a; return array( $a->get_baseurl() . '/photo/' . $rr['resource-id'] . '-' . $rr['scale'] . '.jpg', template_escape($rr['filename']), $a->get_baseurl() . '/photo/' . $rr['resource-id'] . '-' . $rr['scale'] . '.jpg');  }
+                               $files = array_map("files1", $r);
+                               
+                               $tpl = get_markup_template("filebrowser.tpl");
+                               echo replace_macros($tpl, array(
+                                       '$type' => 'image',
+                                       '$baseurl' => $a->get_baseurl(),
+                                       '$path' => array( array($a->get_baseurl()."/fbrowser/image/", t("Photos")),
+                                                                       array($a->get_baseurl()."/fbrowser/image/".$a->argv[2]."/", $album)),
+                                       '$folders' => false,
+                                       '$files' =>$files,
+                               ));
+                               
+                               
+                               
+                       }
+                       break;
+               case "file":
+                       if ($a->argc==2){
+                               $files = q("SELECT id, filename, filetype FROM `attach` WHERE `uid` = %d ",
+                                       intval(local_user())
+                               );
+                               
+                               function files2($rr){ global $a; 
+                                       list($m1,$m2) = explode("/",$rr['filetype']);
+                                       $filetype = ( (file_exists("images/icons/$m1.png"))?$m1:"zip");
+                                       return array( $a->get_baseurl() . '/attach/' . $rr['id'], template_escape($rr['filename']), $a->get_baseurl() . '/images/icons/16/' . $filetype . '.png'); 
+                               }
+                               $files = array_map("files2", $files);
+                               //echo "<pre>"; var_dump($files); killme();
+                       
+                                                       
+                               $tpl = get_markup_template("filebrowser.tpl");
+                               echo replace_macros($tpl, array(
+                                       '$type' => 'file',
+                                       '$baseurl' => $a->get_baseurl(),
+                                       '$path' => array( array($a->get_baseurl()."/fbrowser/image/", t("Files")) ),
+                                       '$folders' => false,
+                                       '$files' =>$files,
+                               ));
+                               
+                       }
+               
+                       break;
+       }
+       
+
+       killme();
+       
+}

diff --git a/view/filebrowser.tpl b/view/filebrowser.tpl
new file mode 100644 (file)
index 0000000..beff886
--- /dev/null
+++ b/view/filebrowser.tpl
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+       <head>
+       <script type="text/javascript" src="$baseurl/library/tinymce/jscripts/tiny_mce/tiny_mce_popup.js"></script>
+       <style>
+               .filebrowser.path { font-family: fixed; font-size: 10px;}
+               .filebrowser ul{ list-style-type: none; padding:0px; }
+               .filebrowser.files img { height:50px;}
+               .filebrowser.files.image li { display: block; padding: 5px; float: left; }
+               .filebrowser.files.image span { display: none;}
+               .filebrowser.files.file img { height:16px;}
+               .filebrowser a { text-decoration: none; }
+       </style>
+       <script>
+               var FileBrowserDialogue = {
+                       init : function () {
+                               // Here goes your code for setting your custom things onLoad.
+                       },
+                       mySubmit : function (URL) {
+                               //var URL = document.my_form.my_field.value;
+                               var win = tinyMCEPopup.getWindowArg("window");
+
+                               // insert information now
+                               win.document.getElementById(tinyMCEPopup.getWindowArg("input")).value = URL;
+
+                               // are we an image browser
+                               if (typeof(win.ImageDialog) != "undefined") {
+                                       // we are, so update image dimensions...
+                                       if (win.ImageDialog.getImageData)
+                                               win.ImageDialog.getImageData();
+
+                                       // ... and preview if necessary
+                                       if (win.ImageDialog.showPreviewImage)
+                                               win.ImageDialog.showPreviewImage(URL);
+                               }
+
+                               // close popup window
+                               tinyMCEPopup.close();
+                       }
+               }
+
+               tinyMCEPopup.onInit.add(FileBrowserDialogue.init, FileBrowserDialogue);
+       </script>
+       </head>
+       <body>
+       <div class="filebrowser path">
+               &gt; {{ for $path as $p }}<a href="$p.0">$p.1</a> / {{ endfor }}
+       </div>
+       <div class="filebrowser folders">
+               <ul>
+                       {{ for $folders as $f }}<li><a href="$f.0/">$f.1</a></li>{{ endfor }}
+               </ul>
+       </div>
+       <form>
+               <div class="filebrowser files $type">
+                       <ul>
+                       {{ for $files as $f }}
+                               <li><a href="#" onclick="FileBrowserDialogue.mySubmit('$f.0'); return false;"><img src="$f.2"><span>$f.1</span></a></li>
+                       {{ endfor }}
+                       </ul>
+               </div>
+       </form>
+       </body>
+       
+</html>

diff --git a/view/jot-header.tpl b/view/jot-header.tpl
index 67e5eb6810748d4d3fe842f9c8872e8448f0ed29..3d134fb0102d81cc6275e3e86c1a48c759b355dd 100644 (file)
--- a/view/jot-header.tpl
+++ b/view/jot-header.tpl
@@ -44,6 +44,7 @@ function initEditor(cb){
                        convert_urls: false,
                        content_css: "$baseurl/view/custom_tinymce.css",
                        theme_advanced_path : false,
+                       file_browser_callback : "fcFileBrowser",
                        setup : function(ed) {
                                cPopup = null;
                                ed.onKeyDown.add(function(ed,e) {