js: add new Dialog object

The Dialog is used by code to show urls in colorbox.
Templates can overwrite `show()` function to change its behaviour

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("image",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
+		};
+	}
+}

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");
 		});
 
 		/**