Merge pull request #2041 from fabrixxm/issue_1991

File and Image dialog fixes

js/filebrowser.js

@@ -1,7 +1,7 @@
 /**
  * Filebrowser - Friendica Communications Server
  *
- * Copyright (c) 2010-2013 the Friendica Project
+ * Copyright (c) 2010-2015 the Friendica Project
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -13,33 +13,34 @@
  *
  * To load filebrowser in colorbox, call
  *
- *     $.colorbox({href: ulr, iframe:true,innerWidth:'500px',innerHeight:'400px'})
+ *      Dialog.doImageBrowser(eventname, id);
  *
- * where url is:
+ * or
  *
- * 		<baseurl>/fbrowser/<type>/?mode=minimal[#<eventname>-<id>]
+ *      Dialog.doFileBrowser(eventname, id);
+ *
+ * where:
  *
- * 		baseurl: baseurl from friendica
- * 		type: one of "image", "file"
  * 		eventname: event name to catch return value
  * 		id: id returned to event handler
  *
- * 	When user select an item, an event in fired in parent page, on body element
+ * When user select an item, an event in fired in parent page, on body element
- * 	The event is named
+ * The event is named
  *
  * 		fbrowser.<type>.[<eventname>]
  *
- * 	with params:
+ * <type> will be one of "image" or "file", and the event handler will
+ * get the following params:
  *
  * 		filemane: filename of item choosed by user
  * 		embed: bbcode to embed element into posts
- * 		id: id from url
+ * 		id: id from caller code
  *
- *  example:
+ * example:
  *
- *  	// open dialog for select an image for a textarea with id "myeditor"
+ * 		// open dialog for select an image for a textarea with id "myeditor"
- *		var id="myeditor";
+ * 		var id="myeditor";
- *		$.colorbox({href: baseurl + "/fbrowser/image/?mode=minimal#example-"+id, iframe:true,innerWidth:'500px',innerHeight:'400px'})
+ * 		Dialog.doImageBrowser("example", id);
  *
  *		// setup event handler to get user selection
  *		$("body").on("fbrowser.image.example", function(event, filename, bbcode, id) {

js/main.js

@@ -65,10 +65,9 @@
 			var bbcode  = o.data('bbcode');
 			var id = o.data('id');
 			if (bbcode=="img") {
-				$.colorbox({href: baseurl + "/fbrowser/image/?mode=minimal#comment-"+id, iframe:true,innerWidth:'500px',innerHeight:'400px'})
+				Dialog.doImageBrowser("comment", id);
 				return;
 			}
-			
 			insertFormatting(comment, bbcode, id);
 		});
 
@@ -583,13 +582,13 @@
 		$('body').css('cursor', 'wait');
 		$("#comment-preview-inp-" + id).val("0");
 		$.post(
-             "item",  
+			"item",
-             $("#comment-edit-form-" + id).serialize(),
+			$("#comment-edit-form-" + id).serialize(),
 			function(data) {
 				if(data.success) {
 					$("#comment-edit-wrapper-" + id).hide();
 					$("#comment-edit-text-" + id).val('');
-    	  			var tarea = document.getElementById("comment-edit-text-" + id);
+					var tarea = document.getElementById("comment-edit-text-" + id);
 					if(tarea)
 						commentClose(tarea,id);
 					if(timer) clearTimeout(timer);
@@ -601,8 +600,8 @@
 				}
 			},
 			"json"
-         );  
+		);
-         return false;  
+		return false;
 	}
 
 
@@ -610,18 +609,17 @@
 		$("#comment-preview-inp-" + id).val("1");
 		$("#comment-edit-preview-" + id).show();
 		$.post(
-             "item",  
+			"item",
-             $("#comment-edit-form-" + id).serialize(),
+			$("#comment-edit-form-" + id).serialize(),
 			function(data) {
 				if(data.preview) {
-						
 					$("#comment-edit-preview-" + id).html(data.preview);
 					$("#comment-edit-preview-" + id + " a").click(function() { return false; });
 				}
 			},
 			"json"
-         );  
+		);
-         return true;  
+		return true;
 	}
 
 
@@ -663,7 +661,7 @@
 		// unpause auto reloads if they are currently stopped
 		totStopped = false;
 		stopped = false;
-	    $('#pause').html('');
+		$('#pause').html('');
 	}
 
 
@@ -826,3 +824,68 @@ function getNotificationPermission() {
         return Notification.permission;
     }
 }
+
+/**
+ * Show a dialog loaded from an url
+ * By defaults this load the url in an iframe in colorbox
+ * Themes can overwrite `show()` function to personalize it
+ */
+var Dialog = {
+	/**
+	 * Show the dialog
+	 *
+	 * @param string url
+	 * @return object colorbox
+	 */
+	show : function (url) {
+		var size = Dialog._get_size();
+		return $.colorbox({href: url, iframe:true,innerWidth: size.width+'px',innerHeight: size.height+'px'})
+	},
+
+	/**
+	 * Show the Image browser dialog
+	 *
+	 * @param string name
+	 * @param string id (optional)
+	 * @return object
+	 *
+	 * The name will be used to build the event name
+	 * fired by image browser dialog when the user select
+	 * an image. The optional id will be passed as argument
+	 * to the event handler
+	 */
+	doImageBrowser : function (name, id) {
+		var url = Dialog._get_url("image",name,id);
+		return Dialog.show(url);
+	},
+
+	/**
+	 * Show the File browser dialog
+	 *
+	 * @param string name
+	 * @param string id (optional)
+	 * @return object
+	 *
+	 * The name will be used to build the event name
+	 * fired by file browser dialog when the user select
+	 * a file. The optional id will be passed as argument
+	 * to the event handler
+	 */
+	doFileBrowser : function (name, id) {
+		var url = Dialog._get_url("file",name,id);
+		return Dialog.show(url);
+	},
+
+	_get_url : function(type, name, id) {
+		var hash = name;
+		if (id !== undefined) hash = hash + "-" + id;
+		return baseurl + "/fbrowser/"+type+"/?mode=minimal#"+hash;
+	},
+
+	_get_size: function() {
+		return {
+			width: window.innerWidth-50,
+			height: window.innerHeight-100
+		};
+	}
+}

mod/fbrowser.php

@@ -40,9 +40,9 @@ function fbrowser_content($a){
 					dbesc('Contact Photos'),
 					dbesc( t('Contact Photos'))
 				);
-				// anon functions only from 5.3.0... meglio tardi che mai..
+
-				$folder1 = function($el) use ($mode) {return array(bin2hex($el['album']),$el['album']);};
+				function _map_folder1($el){return array(bin2hex($el['album']),$el['album']);};
-				$albums = array_map( $folder1 , $albums);
+				$albums = array_map( "_map_folder1" , $albums);
 
 			}
 
@@ -62,7 +62,7 @@ function fbrowser_content($a){
 				dbesc( t('Contact Photos'))
 			);
 
-			function files1($rr){
+			function _map_files1($rr){
 				global $a;
 				$types = Photo::supportedTypes();
 				$ext = $types[$rr['type']];
@@ -75,12 +75,12 @@ function fbrowser_content($a){
 				}
 
 				return array(
-					$a->get_baseurl() . '/photo/' . $rr['resource-id'] . '.' .$ext,
+					$a->get_baseurl() . '/photos/' . $a->user['nickname'] . '/image/' . $rr['resource-id'],
 					$filename_e,
 					$a->get_baseurl() . '/photo/' . $rr['resource-id'] . '-' . $rr['loq'] . '.'. $ext
 				);
 			}
-			$files = array_map("files1", $r);
+			$files = array_map("_map_files1", $r);
 
 			$tpl = get_markup_template($template_file);
 
@@ -102,7 +102,7 @@ function fbrowser_content($a){
 					intval(local_user())
 				);
 
-				function files2($rr){ global $a;
+				function _map_files2($rr){ global $a;
 					list($m1,$m2) = explode("/",$rr['filetype']);
 					$filetype = ( (file_exists("images/icons/$m1.png"))?$m1:"zip");
 
@@ -115,8 +115,7 @@ function fbrowser_content($a){
 
 					return array( $a->get_baseurl() . '/attach/' . $rr['id'], $filename_e, $a->get_baseurl() . '/images/icons/16/' . $filetype . '.png');
 				}
-				$files = array_map("files2", $files);
+				$files = array_map("_map_files2", $files);
-				//echo "<pre>"; var_dump($files); killme();
 
 
 				$tpl = get_markup_template($template_file);

view/templates/jot-header.tpl

@@ -152,11 +152,11 @@ function enableOnUser(){
 		});
 
 		$('#wall-image-upload').on('click', function(){
-			$.colorbox({href: baseurl + "/fbrowser/image/?mode=minimal#main", iframe:true,innerWidth:'500px',innerHeight:'400px'})
+			Dialog.doImageBrowser("main");
 		});
 
 		$('#wall-file-upload').on('click', function(){
-			$.colorbox({href: baseurl + "/fbrowser/file/?mode=minimal#main", iframe:true,innerWidth:'500px',innerHeight:'400px'})
+			Dialog.doFileBrowser("main");
 		});
 
 		/**