diff --git a/js/filebrowser.js b/js/filebrowser.js new file mode 100644 index 0000000000..c203151e14 --- /dev/null +++ b/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: + * + * /fbrowser//?mode=minimal[#-] + * + * 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..[] + * + * 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); } + } + ); + } +}; + diff --git a/js/main.js b/js/main.js index 239a875cb4..e1e852cbaf 100644 --- a/js/main.js +++ b/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 for "Comment", used by insertFormatting() function + * data-bbcode="" : name of the bbcode element to insert. insertFormatting() will insert it as "[name][/name]" + * data-id="" : 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 */ diff --git a/mod/fbrowser.php b/mod/fbrowser.php index 075846e506..b2bda82879 100644 --- a/mod/fbrowser.php +++ b/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 "
"; 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']);}	
-				$albums = array_map( "folder1" , $albums);
+				$folder1 = function($el) use ($mode) {return array(bin2hex($el['album']),$el['album']);};
+				$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");
-			echo replace_macros($tpl, array(
+			$tpl = get_markup_template($template_file);
+			
+			$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 "
"; var_dump($files); killme();
 			
 							
-				$tpl = get_markup_template("filebrowser.tpl");
-				echo replace_macros($tpl, array(
+				$tpl = get_markup_template($template_file);
+				$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;
 	}
 	
-
-	killme();
+	if (x($_GET,'mode')) {
+		return $o;
+	} else {
+		echo $o;
+		killme();
+	}
+	
 	
 }
diff --git a/view/global.css b/view/global.css
index 9bcd302296..0033418b86 100644
--- a/view/global.css
+++ b/view/global.css
@@ -176,4 +176,19 @@ span.oembed, h4 {
 }
 
 /* notifications unseen */
-.notify-unseen { background-color: #cceeFF; }
\ No newline at end of file
+.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;}
diff --git a/view/templates/filebrowser.tpl b/view/templates/filebrowser.tpl
index b207277a7b..2122e27fc9 100644
--- a/view/templates/filebrowser.tpl
+++ b/view/templates/filebrowser.tpl
@@ -1,6 +1,9 @@
-
 
 
+	
 	
 	
 	
+
+
+
+

+
+	

+		{{foreach $path as $p}}{{$p.1}}{{/foreach}}
+	

+	
+	{{if $folders }}
+	

+		
    
+			{{foreach $folders as $f}}
  • {{$f.1}}
    • {{/foreach}}
+		

+	

+	{{/if}}
+		
+	

+		{{foreach $files as $f}}
+		

+			
+				
+				
{{$f.1}}

+			
+		

+		{{/foreach}}
+	

+
+	

+		 
+	
+

+
+
+	
+	
+
diff --git a/view/templates/jot-header.tpl b/view/templates/jot-header.tpl
index 3a67e8bcc4..8d009fd40c 100644
--- a/view/templates/jot-header.tpl
+++ b/view/templates/jot-header.tpl
@@ -127,38 +127,67 @@ function enableOnUser(){