tinymce: add filebrowser for photos and attached files

4 files changed, 192 insertions, 0 deletions

diff --git a/js/main.js b/js/main.js
index 7a90fa910..8cb522743 100644
--- 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
index 000000000..44e21cbfa
--- /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
index 000000000..beff8866f
--- /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 67e5eb681..3d134fb01 100644
--- 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) {