Merge pull request #248 from fabrixxm/tmcefilebrowser

TinyMCE file browser

js/main.js

@@ -17,6 +17,7 @@
   }
 
 
+
 	var src = null;
 	var prev = null;
 	var livetime = null;
@@ -558,12 +559,36 @@ 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",
 		mode : "specific_textareas",
 		editor_selector: "fieldRichtext",
-		plugins : "bbcode,paste",
+		plugins : "bbcode,paste, inlinepopups",
 		theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,image,forecolor,formatselect,code",
 		theme_advanced_buttons2 : "",
 		theme_advanced_buttons3 : "",
@@ -580,6 +605,7 @@ function setupFieldRichtext(){
 		convert_urls: false,
 		content_css: baseurl+"/view/custom_tinymce.css",
 		theme_advanced_path : false,
+		file_browser_callback : "fcFileBrowser",
 	});
 }
 

mod/fbrowser.php

@@ -0,0 +1,99 @@
+<?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":
+			$path = array( array($a->get_baseurl()."/fbrowser/image/", t("Photos")));
+			$albums = false;
+			$sql_extra = "";
+			$sql_extra2 = " ORDER BY created DESC LIMIT 0, 10";
+			
+			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);
+				
+			}
+			
+			$album = "";
+			if ($a->argc==3){
+				$album = hex2bin($a->argv[2]);
+				$sql_extra = sprintf("AND `album` = '%s' ",dbesc($album));
+				$sql_extra2 = "";
+				$path[]=array($a->get_baseurl()."/fbrowser/image/".$a->argv[2]."/", $album);
+			}
+				
+			$r = q("SELECT `resource-id`, `id`, `filename`, min(`scale`) AS `hiq`,max(`scale`) AS `loq`, `desc`  
+					FROM `photo` WHERE `uid` = %d $sql_extra
+					GROUP BY `resource-id` $sql_extra2",
+				intval(local_user())					
+			);
+			
+			
+			function files1($rr){ global $a; return array( $a->get_baseurl() . '/photo/' . $rr['resource-id'] . '-' . $rr['hiq'] . '.jpg', template_escape($rr['filename']), $a->get_baseurl() . '/photo/' . $rr['resource-id'] . '-' . $rr['loq'] . '.jpg');  }
+			$files = array_map("files1", $r);
+			
+			$tpl = get_markup_template("filebrowser.tpl");
+			echo replace_macros($tpl, array(
+				'$type' => 'image',
+				'$baseurl' => $a->get_baseurl(),
+				'$path' => $path,
+				'$folders' => $albums,
+				'$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();
+	
+}

view/filebrowser.tpl

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	<script type="text/javascript" src="$baseurl/library/tinymce/jscripts/tiny_mce/tiny_mce_popup.js"></script>
+	<style>
+		.panel_wrapper div.current{.overflow: auto; height: auto!important; }
+		.filebrowser.path { font-family: fixed; font-size: 10px; background-color: #f0f0ee; height:auto; overflow:auto;}
+		.filebrowser.path a { border-left: 1px solid #C0C0AA; background-color: #E0E0DD; display: block; float:left; padding: 0.3em 1em;}
+		.filebrowser ul{ list-style-type: none; padding:0px; }
+		.filebrowser.folders a { display: block; padding: 0.3em }
+		.filebrowser.folders a:hover { background-color: #f0f0ee; }
+		.filebrowser.files.image { overflow: auto; height: auto; }
+		.filebrowser.files.image 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; vertical-align: bottom;}
+		.filebrowser.files a { display: block;  padding: 0.3em}
+		.filebrowser.files a:hover { background-color: #f0f0ee; }
+		.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="tabs">
+		<ul >
+			<li class="current"><span>FileBrowser</span></li>
+		</ul>
+	</div>
+	<div class="panel_wrapper">
+
+		<div id="general_panel" class="panel current">
+			<div class="filebrowser path">
+				{{ 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>
+			<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>
+		</div>
+	</div>
+	<div class="mceActionPanel">
+		<input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" />
+	</div>	
+	</body>
+	
+</html>

view/jot-header.tpl

@@ -26,7 +26,7 @@ function initEditor(cb){
 			mode : "specific_textareas",
 			editor_selector: $editselect,
 			auto_focus: "profile-jot-text",
-			plugins : "bbcode,paste,autoresize",
+			plugins : "bbcode,paste,autoresize, inlinepopups",
 			theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,image,forecolor,formatselect,code",
 			theme_advanced_buttons2 : "",
 			theme_advanced_buttons3 : "",
@@ -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) {