Merge pull request #1795 from fabrixxm/upload_or_browse_dialog

Upload or browse dialog

js/filebrowser.js

@@ -0,0 +1,123 @@
+/**
+ * Filebrowser - Friendica Communications Server
+ * 
+ * Copyright (c) 2010-2013 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
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This code handle user interaction for image/file upload/browser dialog.
+ * Is loaded from filebrowser_plain.tpl
+ *
+ * To load filebrowser in colorbox, call
+ *
+ *     $.colorbox({href: ulr, iframe:true,innerWidth:'500px',innerHeight:'400px'})
+ *
+ * where url is:
+ *
+ * 		<baseurl>/fbrowser/<type>/?mode=minimal[#<eventname>-<id>]
+ *
+ * 		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
+ * 	The event is named
+ *
+ * 		fbrowser.<type>.[<eventname>]
+ * 		
+ * 	with params:
+ *
+ * 		filemane: filename of item choosed by user
+ * 		embed: bbcode to embed element into posts
+ * 		id: id from url
+ *
+ *  example:
+ *
+ *  	// open dialog for select an image for a textarea with id "myeditor"
+ *		var id="myeditor";
+ *		$.colorbox({href: baseurl + "/fbrowser/image/?mode=minimal#example-"+id, iframe:true,innerWidth:'500px',innerHeight:'400px'})
+ *
+ *		// setup event handler to get user selection
+ *		$("body").on("fbrowser.image.example", function(event, filename, bbcode, id) {
+ *			// close colorbox
+ *			$.colorbox.close();
+ *			// replace textxarea text with bbcode
+ *			$(id).value = bbcode;
+ *		});
+ **/
+ 
+var FileBrowser = {
+	nickname : "",
+	type : "",
+	event: "",
+	id : null,
+	
+	init: function(nickname, type) {
+		FileBrowser.nickname = nickname;
+		FileBrowser.type = type;
+		FileBrowser.event = "fbrowser."+type;
+		if (location['hash']!=="") {
+			var h = location['hash'].replace("#","");
+			FileBrowser.event = FileBrowser.event + "." + h.split("-")[0];
+			FileBrowser.id = h.split("-")[1];
+		}
+		
+		console.log("FileBrowser:", nickname, type,FileBrowser.event, FileBrowser.id );
+		
+		$(".folders a, .path a").on("click", function(e){
+			e.preventDefault();
+			var url = baseurl + "/fbrowser/" + FileBrowser.type + "/" + this.dataset.folder + "?mode=minimal" + location['hash'];
+			location.href = url;
+		});
+		
+		$(".photo-album-photo-link").on('click', function(e){
+			e.preventDefault();
+			
+			var embed = "";
+			if (FileBrowser.type == "image") {
+				embed = "[url="+this.dataset.link+"][img]"+this.dataset.img+"[/img][/url]";
+			}
+			if (FileBrowser.type=="file") {
+				// attachment links are "baseurl/attach/id"; we need id
+				embed = "[attachment]"+this.dataset.link.split("/").pop()+"[/attachment]";
+			}
+			console.log(FileBrowser.event, this.dataset.filename, embed, FileBrowser.id);
+			parent.$("body").trigger(FileBrowser.event, [
+				this.dataset.filename,
+				embed,
+				FileBrowser.id
+			]);
+			
+		});
+		
+		if ($("#upload-image").length)
+			var image_uploader = new window.AjaxUpload(
+				'upload-image',
+				{ action: 'wall_upload/'+FileBrowser.nickname,
+					name: 'userfile',
+					onSubmit: function(file,ext) { $('#profile-rotator').show(); },
+					onComplete: function(file,response) {
+						location = baseurl + "/fbrowser/image/?mode=minimal"+location['hash'];
+						location.reload(true);
+					}				 
+				}
+			);
+
+		if ($("#upload-file").length)
+			var file_uploader = new window.AjaxUpload(
+				'upload-file',
+				{ action: 'wall_attach/'+FileBrowser.nickname,
+					name: 'userfile',
+					onSubmit: function(file,ext) { $('#profile-rotator').show(); },
+					onComplete: function(file,response) {
+						location = baseurl + "/fbrowser/file/?mode=minimal"+location['hash'];
+						location.reload(true);				}				 
+				}
+		);
+	}
+};
+

js/main.js

@@ -51,6 +51,38 @@
 			e.tipTip({defaultPosition: pos, edgeOffset: 8});
 		});*/
 		
+		/* setup comment textarea buttons */
+		/* comment textarea buttons needs some "data-*" attributes to work:
+		 * 		data-role="insert-formatting" : to mark the element as a formatting button
+		 * 		data-comment="<string>" : string for "Comment", used by insertFormatting() function
+		 * 		data-bbcode="<string>" : name of the bbcode element to insert. insertFormatting() will insert it as "[name][/name]"
+		 * 		data-id="<string>" : id of the comment, used to find other comment-related element, like the textarea
+		 * */		
+		$('body').on('click','[data-role="insert-formatting"]', function(e) {
+			e.preventDefault();
+			var o = $(this);
+			var comment = o.data('comment');
+			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'})
+				return;	
+			}
+			
+			insertFormatting(comment, bbcode, id);
+		});
+
+		/* event from comment textarea button popups */
+		/* insert returned bbcode at cursor position or replace selected text */
+		$("body").on("fbrowser.image.comment", function(e, filename, bbcode, id) {
+			console.log("on", id);
+			$.colorbox.close();
+			var textarea = document.getElementById("comment-edit-text-" +id);
+			var start = textarea.selectionStart;
+			var end = textarea.selectionEnd;
+			textarea.value = textarea.value.substring(0, start) + bbcode + textarea.value.substring(end, textarea.value.length);
+		});
+	
 		
 		
 		/* setup onoff widgets */

mod/fbrowser.php

@@ -18,11 +18,18 @@ function fbrowser_content($a){
 	if ($a->argc==1)
 		killme();
 	
+	$template_file = "filebrowser.tpl";
+	$mode = "";
+	if (x($_GET,'mode')) {
+		$template_file = "filebrowser_plain.tpl";
+		$mode  = "?mode=".$_GET['mode'];
+	}
+	
 	//echo "<pre>"; var_dump($a->argv); killme();	
 	
 	switch($a->argv[1]){
 		case "image":
-			$path = array( array($a->get_baseurl()."/fbrowser/image/", t("Photos")));
+			$path = array( array("", t("Photos")));
 			$albums = false;
 			$sql_extra = "";
 			$sql_extra2 = " ORDER BY created DESC LIMIT 0, 10";
@@ -32,8 +39,8 @@ function fbrowser_content($a){
 					intval(local_user())
 				);
 				// anon functions only from 5.3.0... meglio tardi che mai..
-				function folder1($el){return array(bin2hex($el['album']),$el['album']);}	
+				$folder1 = function($el) use ($mode) {return array(bin2hex($el['album']),$el['album']);};
-				$albums = array_map( "folder1" , $albums);
+				$albums = array_map( $folder1 , $albums);
 				
 			}
 			
@@ -42,7 +49,7 @@ function fbrowser_content($a){
 				$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);
+				$path[]=array($a->argv[2], $album);
 			}
 				
 			$r = q("SELECT `resource-id`, `id`, `filename`, type, min(`scale`) AS `hiq`,max(`scale`) AS `loq`, `desc`  
@@ -71,14 +78,16 @@ function fbrowser_content($a){
 			}
 			$files = array_map("files1", $r);
 			
-			$tpl = get_markup_template("filebrowser.tpl");
+			$tpl = get_markup_template($template_file);
-			echo replace_macros($tpl, array(
+			
+			$o =  replace_macros($tpl, array(
 				'$type' => 'image',
 				'$baseurl' => $a->get_baseurl(),
 				'$path' => $path,
 				'$folders' => $albums,
 				'$files' =>$files,
 				'$cancel' => t('Cancel'),
+				'$nickname' => $a->user['nickname'],
 			));
 				
 				
@@ -106,14 +115,15 @@ function fbrowser_content($a){
 				//echo "<pre>"; var_dump($files); killme();
 			
 							
-				$tpl = get_markup_template("filebrowser.tpl");
+				$tpl = get_markup_template($template_file);
-				echo replace_macros($tpl, array(
+				$o = replace_macros($tpl, array(
 					'$type' => 'file',
 					'$baseurl' => $a->get_baseurl(),
-					'$path' => array( array($a->get_baseurl()."/fbrowser/image/", t("Files")) ),
+					'$path' => array( array( "", t("Files")) ),
 					'$folders' => false,
 					'$files' =>$files,
 					'$cancel' => t('Cancel'),
+					'$nickname' => $a->user['nickname'],
 				));
 				
 			}
@@ -121,7 +131,12 @@ function fbrowser_content($a){
 			break;
 	}
 	
-
+	if (x($_GET,'mode')) {
+		return $o;
+	} else {
+		echo $o;
 		killme();
+	}
+	
 	
 }

view/global.css

@@ -177,3 +177,18 @@ span.oembed, h4 {
 
 /* notifications unseen */
 .notify-unseen { background-color: #cceeFF; }
+
+
+/* plain text editor upload/select popup */
+
+.fbrowser .path a { padding: 5px; }
+.fbrowser .path a:before { content: "/"; padding-right: 5px;}
+.fbrowser .folders ul { list-style-type: none; padding-left: 10px;}
+.fbrowser .list { height: auto; overflow-y: hidden; margin: 10px 0px; }
+.fbrowser.image .photo-album-image-wrapper { float: left; }
+.fbrowser.image a img { height: 48px; }
+.fbrowser.image a p { display: none;}
+.fbrowser.file .photo-album-image-wrapper { float:none;  white-space: nowrap; }
+.fbrowser.file img { display: inline; }
+.fbrowser.file p  { display: inline; white-space: nowrap; }
+.fbrowser .upload { clear: both; padding-top: 1em;}

view/templates/filebrowser.tpl

@@ -1,6 +1,9 @@
-
 <!DOCTYPE html>
 <html>
+	<!--
+		This is the template used by mod/fbrowser.php when is called from TinyMCE rich editor.
+		See also 'filebrowser_plain.tpl'
+	-->
 	<head>
 	<script type="text/javascript" src="{{$baseurl}}/library/tinymce/jscripts/tiny_mce/tiny_mce_popup.js"></script>
 	<style>
@@ -65,7 +68,7 @@
 			</div>
 			<div class="filebrowser folders">
 				<ul>
-					{{foreach $folders as $f}}<li><a href="{{$f.0}}/">{{$f.1}}</a></li>{{/foreach}}
+					{{foreach $folders as $f}}<li><a href="{{$baseurl}}/fbrowser/{{$type}}/{{$f.0}}/">{{$f.1}}</a></li>{{/foreach}}
 				</ul>
 			</div>
 			<div class="filebrowser files {{$type}}">

view/templates/filebrowser_plain.tpl

@@ -0,0 +1,48 @@
+	<!--
+		This is the template used by mod/fbrowser.php when is called from plain text editor.
+		See also 'filebrowser.tpl'
+	-->
+<style>
+	#buglink_wrapper{display:none;} /* hide buglink. only in this page */
+</style>
+<script type="text/javascript" src="{{$baseurl}}/js/ajaxupload.js" ></script>
+<script type="text/javascript" src="{{$baseurl}}/js/filebrowser.js"></script>
+<script>
+	$(function() {
+		FileBrowser.init("{{$nickname}}", "{{$type}}");
+	});
+</script>
+<div class="fbrowser {{$type}}">
+
+	<div class="path">
+		{{foreach $path as $p}}<a href="#" data-folder="{{$p.0}}">{{$p.1}}</a>{{/foreach}}
+	</div>
+	
+	{{if $folders }}
+	<div class="folders">
+		<ul>
+			{{foreach $folders as $f}}<li><a href="#" data-folder="{{$f.0}}">{{$f.1}}</a></li>{{/foreach}}
+		</ul>
+	</div>
+	{{/if}}
+		
+	<div class="list">
+		{{foreach $files as $f}}
+		<div class="photo-album-image-wrapper">
+			<a href="#" class="photo-album-photo-link" data-link="{{$f.0}}" data-filename="{{$f.1}}" data-img="{{$f.2}}">
+				<img src="{{$f.2}}">
+				<p>{{$f.1}}</p>
+			</a>
+		</div>
+		{{/foreach}}
+	</div>
+
+	<div class="upload">
+		<button id="upload-{{$type}}"><img id="profile-rotator" src="images/rotator.gif" alt="{{$wait}}" title="{{$wait|escape:'html'}}" style="display: none;" /> {{"Upload"|t}}</button> 
+	</dksiv>
+</div>
+
+
+	</body>
+	
+</html>

view/templates/jot-header.tpl

@@ -127,12 +127,39 @@ function enableOnUser(){
 <script>
 	var ispublic = '{{$ispublic}}';
 
+	
 	$(document).ready(function() {
 		
 		/* enable tinymce on focus and click */
 		$("#profile-jot-text").focus(enableOnUser);
 		$("#profile-jot-text").click(enableOnUser);
 
+		
+		
+		
+		/* show images / file browser window
+		 * 
+		 **/
+	
+		/* callback */
+		$('body').on('fbrowser.image.main', function(e, filename, embedcode, id) {
+			$.colorbox.close();
+			addeditortext(embedcode);
+		});
+		$('body').on('fbrowser.file.main', function(e, filename, embedcode, id) {
+			$.colorbox.close();
+			addeditortext(embedcode);
+		});
+	
+		$('#wall-image-upload').on('click', function(){
+			$.colorbox({href: baseurl + "/fbrowser/image/?mode=minimal#main", iframe:true,innerWidth:'500px',innerHeight:'400px'})
+		});
+		
+		$('#wall-file-upload').on('click', function(){
+			$.colorbox({href: baseurl + "/fbrowser/file/?mode=minimal#main", iframe:true,innerWidth:'500px',innerHeight:'400px'})
+		});
+		
+		/**	
 			var uploader = new window.AjaxUpload(
 				'wall-image-upload',
 				{ action: 'wall_upload/{{$nickname}}',
@@ -156,9 +183,11 @@ function enableOnUser(){
 				}
 			);
 		
-
+		}
+		**/
 	});
 
+
 	function deleteCheckedItems() {
 		if(confirm('{{$delitems}}')) {
 			var checkedstr = '';

view/theme/dispy/templates/comment_item.tpl

@@ -16,28 +16,28 @@
 				<ul class="comment-edit-bb-{{$id}}">
 					<li><a class="editicon boldbb shadow"
 						style="cursor: pointer;"
-						onclick="insertFormatting('{{$comment}}','b', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="b" data-id="{{$id}}"></a></li>
 					<li><a class="editicon italicbb shadow"
 						style="cursor: pointer;"
-						onclick="insertFormatting('{{$comment}}','i', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="i" data-id="{{$id}}"></a></li>
 					<li><a class="editicon underlinebb shadow"
 						style="cursor: pointer;"
-						onclick="insertFormatting('{{$comment}}','u', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="u" data-id="{{$id}}"></a></li>
 					<li><a class="editicon quotebb shadow"
 						style="cursor: pointer;"
-						onclick="insertFormatting('{{$comment}}','quote', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="quote" data-id="{{$id}}"></a></li>
 					<li><a class="editicon codebb shadow"
 						style="cursor: pointer;"
-						onclick="insertFormatting('{{$comment}}','code', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="code" data-id="{{$id}}"></a></li>
 					<li><a class="editicon imagebb shadow"
 						style="cursor: pointer;"
-						onclick="insertFormatting('{{$comment}}','img', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="img" data-id="{{$id}}"></a></li>
 					<li><a class="editicon urlbb shadow"
 						style="cursor: pointer;"
-						onclick="insertFormatting('{{$comment}}','url', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="url" data-id="{{$id}}"></a></li>
 					<li><a class="editicon videobb shadow"
 						style="cursor: pointer;"
-						onclick="insertFormatting('{{$comment}}','video', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="video" data-id="{{$id}}"></a></li>
 				</ul>
 				<div class="comment-edit-bb-end"></div>
 				<textarea id="comment-edit-text-{{$id}}"

view/theme/duepuntozero/style.css

@@ -1469,6 +1469,7 @@ blockquote.shared_content {
   padding: 10px;
   text-align: center;
   font-size: 1.0em;
+  clear:left;
 }
 
 
@@ -3468,3 +3469,5 @@ ul.menu-popup {
 .videos .video-top-wrapper:hover .video-delete {
   opacity: 1;
 }
+
+

view/theme/duepuntozero/templates/comment_item.tpl

@@ -20,28 +20,28 @@
 				<ul class="comment-edit-bb-{{$id}}">
 					<li><a class="editicon boldbb shadow"
 						style="cursor: pointer;" title="{{$edbold}}"
-						onclick="insertFormatting('{{$comment}}','b', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="b" data-id="{{$id}}"></a></li>
 					<li><a class="editicon italicbb shadow"
 						style="cursor: pointer;" title="{{$editalic}}"
-						onclick="insertFormatting('{{$comment}}','i', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="i" data-id="{{$id}}"></a></li>
 					<li><a class="editicon underlinebb shadow"
 						style="cursor: pointer;" title="{{$eduline}}"
-						onclick="insertFormatting('{{$comment}}','u', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="u" data-id="{{$id}}"></a></li>
 					<li><a class="editicon quotebb shadow"
 						style="cursor: pointer;" title="{{$edquote}}"
-						onclick="insertFormatting('{{$comment}}','quote', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="quote" data-id="{{$id}}"></a></li>
 					<li><a class="editicon codebb shadow"
 						style="cursor: pointer;" title="{{$edcode}}"
-						onclick="insertFormatting('{{$comment}}','code', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="code" data-id="{{$id}}"></a></li>
 					<li><a class="editicon imagebb shadow"
 						style="cursor: pointer;" title="{{$edimg}}"
-						onclick="insertFormatting('{{$comment}}','img', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="img" data-id="{{$id}}"></a></li>
 					<li><a class="editicon urlbb shadow"
 						style="cursor: pointer;" title="{{$edurl}}"
-						onclick="insertFormatting('{{$comment}}','url', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="url" data-id="{{$id}}"></a></li>
 					<li><a class="editicon videobb shadow"
 						style="cursor: pointer;" title="{{$edvideo}}"
-						onclick="insertFormatting('{{$comment}}','video', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="video" data-id="{{$id}}"></a></li>
 				</ul>	
 				<div class="comment-edit-bb-end"></div>
 				<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text-empty" name="body" onFocus="commentOpen(this,{{$id}});cmtBbOpen(this, {{$id}});" onBlur="commentClose(this,{{$id}});cmtBbClose(this,{{$id}});" >{{$comment}}</textarea>			

view/theme/frost-mobile/templates/comment_item.tpl

@@ -31,28 +31,28 @@
 				<ul class="comment-edit-bb-{{$id}}">
 					<li><a class="editicon boldbb shadow"
 						style="cursor: pointer;" title="{{$edbold}}"
-						onclick="insertFormatting('{{$comment}}','b', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="b" data-id="{{$id}}"></a></li>
 					<li><a class="editicon italicbb shadow"
 						style="cursor: pointer;" title="{{$editalic}}"
-						onclick="insertFormatting('{{$comment}}','i', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="i" data-id="{{$id}}"></a></li>
 					<li><a class="editicon underlinebb shadow"
 						style="cursor: pointer;" title="{{$eduline}}"
-						onclick="insertFormatting('{{$comment}}','u', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="u" data-id="{{$id}}"></a></li>
 					<li><a class="editicon quotebb shadow"
 						style="cursor: pointer;" title="{{$edquote}}"
-						onclick="insertFormatting('{{$comment}}','quote', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="quote" data-id="{{$id}}"></a></li>
 					<li><a class="editicon codebb shadow"
 						style="cursor: pointer;" title="{{$edcode}}"
-						onclick="insertFormatting('{{$comment}}','code', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="code" data-id="{{$id}}"></a></li>
 {{*<!--					<li><a class="editicon imagebb shadow"
 						style="cursor: pointer;" title="{{$edimg}}"
-						onclick="insertFormatting('{{$comment}}','img', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="img" data-id="{{$id}}"></a></li>
 					<li><a class="editicon urlbb shadow"
 						style="cursor: pointer;" title="{{$edurl}}"
-						onclick="insertFormatting('{{$comment}}','url', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="url" data-id="{{$id}}"></a></li>
 					<li><a class="editicon videobb shadow"
 						style="cursor: pointer;" title="{{$edvideo}}"
-						onclick="insertFormatting('{{$comment}}','video', {{$id}});"></a></li>-->*}}
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="video" data-id="{{$id}}"></a></li>-->*}}
 				</ul>	
 				{{*<!--<div class="comment-edit-bb-end"></div>-->*}}
 {{*<!--				<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text-empty" name="body" onFocus="commentOpen(this,{{$id}});cmtBbOpen({{$id}});" onBlur="commentClose(this,{{$id}});cmtBbClose({{$id}});" >{{$comment}}</textarea>-->*}}

view/theme/frost/templates/comment_item.tpl

@@ -30,28 +30,28 @@
 				<ul class="comment-edit-bb" id="comment-edit-bb-{{$id}}">
 					<li><a class="editicon boldbb shadow"
 						style="cursor: pointer;" title="{{$edbold}}"
-						onclick="insertFormatting('{{$comment}}','b', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="b" data-id="{{$id}}"></a></li>
 					<li><a class="editicon italicbb shadow"
 						style="cursor: pointer;" title="{{$editalic}}"
-						onclick="insertFormatting('{{$comment}}','i', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="i" data-id="{{$id}}"></a></li>
 					<li><a class="editicon underlinebb shadow"
 						style="cursor: pointer;" title="{{$eduline}}"
-						onclick="insertFormatting('{{$comment}}','u', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="u" data-id="{{$id}}"></a></li>
 					<li><a class="editicon quotebb shadow"
 						style="cursor: pointer;" title="{{$edquote}}"
-						onclick="insertFormatting('{{$comment}}','quote', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="quote" data-id="{{$id}}"></a></li>
 					<li><a class="editicon codebb shadow"
 						style="cursor: pointer;" title="{{$edcode}}"
-						onclick="insertFormatting('{{$comment}}','code', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="code" data-id="{{$id}}"></a></li>
 					<li><a class="editicon imagebb shadow"
 						style="cursor: pointer;" title="{{$edimg}}"
-						onclick="insertFormatting('{{$comment}}','img', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="img" data-id="{{$id}}"></a></li>
 					<li><a class="editicon urlbb shadow"
 						style="cursor: pointer;" title="{{$edurl}}"
-						onclick="insertFormatting('{{$comment}}','url', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="url" data-id="{{$id}}"></a></li>
 					<li><a class="editicon videobb shadow"
 						style="cursor: pointer;" title="{{$edvideo}}"
-						onclick="insertFormatting('{{$comment}}','video', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="video" data-id="{{$id}}"></a></li>
 				</ul>	
 {{*<!--				<div class="comment-edit-bb-end"></div>-->*}}
 {{*<!--				<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text-empty" name="body" onFocus="commentOpen(this,{{$id}});cmtBbOpen({{$id}});" onBlur="commentClose(this,{{$id}});cmtBbClose({{$id}});" >{{$comment}}</textarea>-->*}}

view/theme/quattro/dark/style.css

@@ -544,6 +544,7 @@ header {
   margin: 0px;
   padding: 0px;
   /*width: 100%; height: 12px; */
+
   z-index: 110;
   color: #ffffff;
 }
@@ -876,6 +877,7 @@ aside .posted-date-selector-months {
   overflow: auto;
   height: auto;
   /*.contact-block-div { width:60px; height: 60px; }*/
+
 }
 #contact-block .contact-block-h4 {
   float: left;
@@ -957,6 +959,7 @@ aside .posted-date-selector-months {
   margin-bottom: 2em;
   /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
 	.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
+
 }
 .widget h3 {
   padding: 0px;
@@ -1238,6 +1241,7 @@ section {
   height: 32px;
   margin-left: 16px;
   /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
+
 }
 .comment-edit-preview .contact-photo-menu-button {
   top: 15px !important;
@@ -2107,6 +2111,7 @@ ul.tabs li .active {
   min-height: 22px;
   padding-top: 6px;
   /* a { display: block;}*/
+
 }
 #photo-caption {
   display: block;
@@ -2480,3 +2485,65 @@ footer {
   float: left;
   margin-left: 2px;
 }
+/* upload/select popup */
+.fbrowser {
+  overflow: auto;
+  position: absolute;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+}
+.fbrowser .path {
+  background-color: #0e232e;
+}
+.fbrowser .path a {
+  padding: 5px;
+  margin: 0px 2px;
+  display: inline-block;
+}
+.fbrowser .path a,
+.fbrowser .path a:active,
+.fbrowser .path a:visited,
+.fbrowser .path a:link,
+.fbrowser .path a:hover {
+  color: #ffffff;
+  text-decoration: none;
+  outline: none;
+}
+.fbrowser .folders ul {
+  list-style: url("icons/folder.png");
+  padding-left: 22px;
+}
+.fbrowser .list {
+  padding: 10px;
+}
+.fbrowser.image .photo-album-image-wrapper {
+  width: 48px;
+  height: 48px;
+}
+.fbrowser.image a img {
+  width: auto;
+  height: 48px;
+}
+.fbrowser.image a p {
+  display: none;
+}
+.fbrowser.file .photo-album-image-wrapper {
+  float: none;
+  white-space: nowrap;
+  width: 100%;
+  height: auto;
+}
+.fbrowser.file img {
+  display: inline;
+  width: 16px;
+  height: 16px;
+}
+.fbrowser.file p {
+  display: inline;
+  white-space: nowrap;
+}
+.fbrowser .upload {
+  clear: both;
+  padding-top: 1em;
+}

view/theme/quattro/green/style.css

@@ -544,6 +544,7 @@ header {
   margin: 0px;
   padding: 0px;
   /*width: 100%; height: 12px; */
+
   z-index: 110;
   color: #ffffff;
 }
@@ -876,6 +877,7 @@ aside .posted-date-selector-months {
   overflow: auto;
   height: auto;
   /*.contact-block-div { width:60px; height: 60px; }*/
+
 }
 #contact-block .contact-block-h4 {
   float: left;
@@ -957,6 +959,7 @@ aside .posted-date-selector-months {
   margin-bottom: 2em;
   /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
 	.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
+
 }
 .widget h3 {
   padding: 0px;
@@ -1238,6 +1241,7 @@ section {
   height: 32px;
   margin-left: 16px;
   /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
+
 }
 .comment-edit-preview .contact-photo-menu-button {
   top: 15px !important;
@@ -2107,6 +2111,7 @@ ul.tabs li .active {
   min-height: 22px;
   padding-top: 6px;
   /* a { display: block;}*/
+
 }
 #photo-caption {
   display: block;
@@ -2480,3 +2485,65 @@ footer {
   float: left;
   margin-left: 2px;
 }
+/* upload/select popup */
+.fbrowser {
+  overflow: auto;
+  position: absolute;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+}
+.fbrowser .path {
+  background-color: #009100;
+}
+.fbrowser .path a {
+  padding: 5px;
+  margin: 0px 2px;
+  display: inline-block;
+}
+.fbrowser .path a,
+.fbrowser .path a:active,
+.fbrowser .path a:visited,
+.fbrowser .path a:link,
+.fbrowser .path a:hover {
+  color: #ffffff;
+  text-decoration: none;
+  outline: none;
+}
+.fbrowser .folders ul {
+  list-style: url("icons/folder.png");
+  padding-left: 22px;
+}
+.fbrowser .list {
+  padding: 10px;
+}
+.fbrowser.image .photo-album-image-wrapper {
+  width: 48px;
+  height: 48px;
+}
+.fbrowser.image a img {
+  width: auto;
+  height: 48px;
+}
+.fbrowser.image a p {
+  display: none;
+}
+.fbrowser.file .photo-album-image-wrapper {
+  float: none;
+  white-space: nowrap;
+  width: 100%;
+  height: auto;
+}
+.fbrowser.file img {
+  display: inline;
+  width: 16px;
+  height: 16px;
+}
+.fbrowser.file p {
+  display: inline;
+  white-space: nowrap;
+}
+.fbrowser .upload {
+  clear: both;
+  padding-top: 1em;
+}

view/theme/quattro/lilac/style.css

@@ -544,6 +544,7 @@ header {
   margin: 0px;
   padding: 0px;
   /*width: 100%; height: 12px; */
+
   z-index: 110;
   color: #ffffff;
 }
@@ -876,6 +877,7 @@ aside .posted-date-selector-months {
   overflow: auto;
   height: auto;
   /*.contact-block-div { width:60px; height: 60px; }*/
+
 }
 #contact-block .contact-block-h4 {
   float: left;
@@ -957,6 +959,7 @@ aside .posted-date-selector-months {
   margin-bottom: 2em;
   /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
 	.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
+
 }
 .widget h3 {
   padding: 0px;
@@ -1238,6 +1241,7 @@ section {
   height: 32px;
   margin-left: 16px;
   /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
+
 }
 .comment-edit-preview .contact-photo-menu-button {
   top: 15px !important;
@@ -2107,6 +2111,7 @@ ul.tabs li .active {
   min-height: 22px;
   padding-top: 6px;
   /* a { display: block;}*/
+
 }
 #photo-caption {
   display: block;
@@ -2480,3 +2485,65 @@ footer {
   float: left;
   margin-left: 2px;
 }
+/* upload/select popup */
+.fbrowser {
+  overflow: auto;
+  position: absolute;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+}
+.fbrowser .path {
+  background-color: #521f5c;
+}
+.fbrowser .path a {
+  padding: 5px;
+  margin: 0px 2px;
+  display: inline-block;
+}
+.fbrowser .path a,
+.fbrowser .path a:active,
+.fbrowser .path a:visited,
+.fbrowser .path a:link,
+.fbrowser .path a:hover {
+  color: #ffffff;
+  text-decoration: none;
+  outline: none;
+}
+.fbrowser .folders ul {
+  list-style: url("icons/folder.png");
+  padding-left: 22px;
+}
+.fbrowser .list {
+  padding: 10px;
+}
+.fbrowser.image .photo-album-image-wrapper {
+  width: 48px;
+  height: 48px;
+}
+.fbrowser.image a img {
+  width: auto;
+  height: 48px;
+}
+.fbrowser.image a p {
+  display: none;
+}
+.fbrowser.file .photo-album-image-wrapper {
+  float: none;
+  white-space: nowrap;
+  width: 100%;
+  height: auto;
+}
+.fbrowser.file img {
+  display: inline;
+  width: 16px;
+  height: 16px;
+}
+.fbrowser.file p {
+  display: inline;
+  white-space: nowrap;
+}
+.fbrowser .upload {
+  clear: both;
+  padding-top: 1em;
+}

view/theme/quattro/quattro.less

@@ -1705,3 +1705,28 @@ footer { height: 100px; display: table-row; }
 	float: left;
 	margin-left: 2px;
 }
+
+/* upload/select popup */
+.fbrowser {
+	overflow: auto;
+	position: absolute;
+	top: 0px;
+	width: 100%;
+	height: 100%;
+}
+.fbrowser .path {
+	background-color: @NavbarBackground;
+	a {	padding: 5px; margin: 0px 2px; display: inline-block; }
+	a, a:active, a:visited, a:link, a:hover { color: @Banner; text-decoration: none; outline: none;  }
+}
+.fbrowser .folders ul { list-style: url("icons/folder.png"); padding-left: 22px;}
+.fbrowser .list { padding: 10px; }
+.fbrowser.image .photo-album-image-wrapper { width: 48px; height: 48px; }
+.fbrowser.image a img { width: auto; height: 48px; }
+.fbrowser.image a p { display: none;}
+.fbrowser.file .photo-album-image-wrapper { float:none;  white-space: nowrap; width: 100%; height: auto; }
+.fbrowser.file img { display: inline; width: 16px; height: 16px}
+.fbrowser.file p  { display: inline; white-space: nowrap; }
+
+.fbrowser .upload { clear: both; padding-top: 1em;}
+

view/theme/quattro/templates/comment_item.tpl

@@ -15,34 +15,33 @@
 					class="comment-edit-bb">
 					<li><a class="editicon boldbb shadow"
 						style="cursor: pointer;" title="{{$edbold}}"
-						onclick="insertFormatting('{{$comment}}','b', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="b" data-id="{{$id}}"></a></li>
 					<li><a class="editicon italicbb shadow"
 						style="cursor: pointer;" title="{{$editalic}}"
-						onclick="insertFormatting('{{$comment}}','i', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="i" data-id="{{$id}}"></a></li>
 					<li><a class="editicon underlinebb shadow"
 						style="cursor: pointer;" title="{{$eduline}}"
-						onclick="insertFormatting('{{$comment}}','u', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="u" data-id="{{$id}}"></a></li>
 					<li><a class="editicon quotebb shadow"
 						style="cursor: pointer;" title="{{$edquote}}"
-						onclick="insertFormatting('{{$comment}}','quote', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="quote" data-id="{{$id}}"></a></li>
 					<li><a class="editicon codebb shadow"
 						style="cursor: pointer;" title="{{$edcode}}"
-						onclick="insertFormatting('{{$comment}}','code', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="code" data-id="{{$id}}"></a></li>
 					<li><a class="editicon imagebb shadow"
 						style="cursor: pointer;" title="{{$edimg}}"
-						onclick="insertFormatting('{{$comment}}','img', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="img" data-id="{{$id}}"></a></li>
 					<li><a class="editicon urlbb shadow"
 						style="cursor: pointer;" title="{{$edurl}}"
-						onclick="insertFormatting('{{$comment}}','url', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="url" data-id="{{$id}}"></a></li>
 					<li><a class="editicon videobb shadow"
 						style="cursor: pointer;" title="{{$edvideo}}"
-						onclick="insertFormatting('{{$comment}}','video', {{$id}});"></a></li>
+						data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="video" data-id="{{$id}}"></a></li>
 				</ul>	
 				<textarea id="comment-edit-text-{{$id}}" 
 					class="comment-edit-text-empty" 
 					name="body" 
-					onFocus="commentOpen(this,{{$id}}) && cmtBbOpen({{$id}});" 
+					onFocus="commentOpen(this,{{$id}}) && cmtBbOpen({{$id}});" >{{$comment}}</textarea>
-					onBlur="commentClose(this,{{$id}}) && cmtBbClose({{$id}});" >{{$comment}}</textarea>
 				{{if $qcomment}}
 					<select id="qcomment-select-{{$id}}" name="qcomment-{{$id}}" class="qcomment" onchange="qCommentInsert(this,{{$id}});" >
 					<option value=""></option>

view/theme/vier/style.css

@@ -1109,6 +1109,9 @@ section {
 section.minimal {
   top: 0px;
   left: 0px;
+  position: absolute;
+  width: 100%;
+  height: 100%;
 }
 
 /* wall item */
@@ -2929,3 +2932,6 @@ a.mail-list-link {
 .videos .video-top-wrapper:hover .video-delete {
   opacity: 1;
 }
+
+/* upload/select popup */
+.fbrowser.image .photo-album-image-wrapper { margin-left: 10px; }

view/theme/vier/templates/comment_item.tpl

@@ -31,14 +31,14 @@
 				<div class="comment-edit-submit-wrapper" id="comment-edit-submit-wrapper-{{$id}}" style="display: none;" >
 
 				<div class="comment-edit-bb">
-	                                <a title="{{$edimg}}" onclick="insertFormatting('{{$comment}}','img',{{$id}});"><i class="icon-picture"></i></a>      
+	                                <a title="{{$edimg}}" data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="img" data-id="{{$id}}"><i class="icon-picture"></i></a>      
-	                                <a title="{{$edurl}}" onclick="insertFormatting('{{$comment}}','url',{{$id}});"><i class="icon-link"></i></a>
+	                                <a title="{{$edurl}}" data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="url" data-id="{{$id}}"><i class="icon-link"></i></a>
-	                                <a title="{{$edvideo}}" onclick="insertFormatting('{{$comment}}','video',{{$id}});"><i class="icon-film"></i></a>
+	                                <a title="{{$edvideo}}" data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="video" data-id="{{$id}}"><i class="icon-film"></i></a>
                                                                                 
-	                                <a title="{{$eduline}}" onclick="insertFormatting('{{$comment}}','u',{{$id}});"><i class="icon-underline"></i></a>
+	                                <a title="{{$eduline}}" data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="u" data-id="{{$id}}"><i class="icon-underline"></i></a>
-	                                <a title="{{$editalic}}" onclick="insertFormatting('{{$comment}}','i',{{$id}});"><i class="icon-italic"></i></a>
+	                                <a title="{{$editalic}}" data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="i" data-id="{{$id}}"><i class="icon-italic"></i></a>
-	                                <a title="{{$edbold}}" onclick="insertFormatting('{{$comment}}','b',{{$id}});"><i class="icon-bold"></i></a>
+	                                <a title="{{$edbold}}" data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="b" data-id="{{$id}}"><i class="icon-bold"></i></a>
-	                                <a title="{{$edquote}}" onclick="insertFormatting('{{$comment}}','quote',{{$id}});"><i class="icon-quote-left"></i></a>
+	                                <a title="{{$edquote}}" data-role="insert-formatting" data-comment="{{$comment}}" data-bbcode="quote" data-id="{{$id}}"><i class="icon-quote-left"></i></a>
 
                                 </div>
 					<input type="submit" onclick="post_comment({{$id}}); return false;" id="comment-edit-submit-{{$id}}" class="comment-edit-submit" name="submit" value="{{$submit}}" />