From dab12f0b932fbc54df6ffb89d18ebbd78a6e0efd Mon Sep 17 00:00:00 2001
From: rabuzarus <>
Date: Mon, 9 May 2016 21:08:11 +0200
Subject: [PATCH] filebrowser: massive improvements (fix
 https://github.com/rabuzarus/frio/issues/3 , integrate fbrowser into jot)

---
 js/filebrowser.js               |  64 +++++++++++----
 js/modal.js                     | 141 ++++++++++++++++++++++++++++----
 js/textedit.js                  |  19 ++++-
 js/theme.js                     |  63 --------------
 templates/filebrowser_plain.tpl |   4 +-
 templates/jot-header.tpl        |  48 +++++++----
 templates/jot.tpl               |  32 +++++---
 7 files changed, 246 insertions(+), 125 deletions(-)

diff --git a/js/filebrowser.js b/js/filebrowser.js
index a2b1702a87..648090677c 100644
--- a/js/filebrowser.js
+++ b/js/filebrowser.js
@@ -77,8 +77,13 @@ var FileBrowser = {
 
 		if (hash!=="") {
 			var h = hash.replace("#","");
-			FileBrowser.event = FileBrowser.event + "." + h.split("-")[0];
+			var destination = h.split("-")[0];
 			FileBrowser.id = h.split("-")[1];
+			FileBrowser.event = FileBrowser.event + "." + destination;
+			if (destination == "comment") {
+				// get the comment textimput field
+				var commentElm = document.getElementById("comment-edit-text-" + FileBrowser.id);
+			}
 		};
 
 		console.log("FileBrowser:", nickname, type,FileBrowser.event, FileBrowser.id );
@@ -90,16 +95,15 @@ var FileBrowser = {
 
 		$(".folders a, .path a").on("click", function(e){
 			e.preventDefault();
-			var url = baseurl + "/fbrowser/" + FileBrowser.type + "/" + this.dataset.folder + "?mode=modal"+ location['hash'];
+			var url = baseurl + "/fbrowser/" + FileBrowser.type + "/" + this.dataset.folder + "?mode=modal";
 
-			// load new content to modal
-			$('.modal-body').load(url,function(){
-				$(function() {
-						FileBrowser.init(nickname, type, hash);
-					});
+			// load new content to fbrowser window
+			$(".fbrowser").load(url,function(){
+				$(function() {FileBrowser.init(nickname, type, hash);});
 			});
 		});
 
+		//embed on click
 		$(".photo-album-photo-link").on('click', function(e){
 			e.preventDefault();
 
@@ -111,6 +115,21 @@ var FileBrowser = {
 				// attachment links are "baseurl/attach/id"; we need id
 				embed = "[attachment]"+this.dataset.link.split("/").pop()+"[/attachment]";
 			}
+
+			// Delete prefilled Text of the comment input
+			// Note: not the best solution but function commentOpenUI don't
+			// work as expected (we need a way to wait until commentOpenUI would be finished).
+			// As for now we insert pieces of this function here
+			if ((commentElm !== null) && (typeof commentElm !== "undefined")) {
+				if (commentElm.value == aStr.comment){
+					commentElm.value = "";
+					$("#comment-edit-text-" + FileBrowser.id).addClass("comment-edit-text-full").removeClass("comment-edit-text-empty");
+					$("#comment-edit-submit-wrapper-" + FileBrowser.id).show();
+					$("#comment-edit-text-" + FileBrowser.id).attr('tabindex','9');
+					$("#comment-edit-submit-" + FileBrowser.id).attr('tabindex','10');
+				}
+
+			}
 			console.log(FileBrowser.event, this.dataset.filename, embed, FileBrowser.id);
 			parent.$("body").trigger(FileBrowser.event, [
 				this.dataset.filename,
@@ -120,11 +139,10 @@ var FileBrowser = {
 
 			// close model
 			$('#modal').modal('hide');
-			if (id!=="") {
-				$("#comment-edit-text-" + FileBrowser.id).empty();
-				commentExpand(FileBrowser.id);
-				//$("#comment-edit-text-558").empty();
-			};
+//			if (id!=="") {
+//				commentExpand(FileBrowser.id);
+//				//$("#comment-edit-text-558").empty();
+//			};
 
 		});
 
@@ -142,8 +160,14 @@ var FileBrowser = {
 							$('#profile-rotator').hide();
 							return;
 						}
-						location = baseurl + "/fbrowser/image/?mode=minimal"+location['hash'];
-						location.reload(true);
+//						location = baseurl + "/fbrowser/image/?mode=modal"+location['hash'];
+//						location.reload(true);
+
+						var url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=modal"
+						// load new content to fbrowser window
+						$(".fbrowser").load(url,function(){
+							$(function() {FileBrowser.init(nickname, type, hash);});
+						});
 					}
 				}
 			);
@@ -161,11 +185,17 @@ var FileBrowser = {
 							$('#profile-rotator').hide();
 							return;
 						}
-						location = baseurl + "/fbrowser/file/?mode=minimal"+location['hash'];
-						location.reload(true);
+//						location = baseurl + "/fbrowser/file/?mode=modal"+location['hash'];
+//						location.reload(true);
+
+						var url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=modal"
+						// load new content to fbrowser window
+						$(".fbrowser").load(url,function(){
+							$(function() {FileBrowser.init(nickname, type, hash);});
+						});
 					}
 				}
 		);
-	}
+	},
 };
 
diff --git a/js/modal.js b/js/modal.js
index 888893e833..a296c9ba9c 100644
--- a/js/modal.js
+++ b/js/modal.js
@@ -1,15 +1,113 @@
 /* 
  * @brief contains functions for bootstrap modal handling
  */
+$(document).ready(function(){
+	// Clear bs modal on close
+	// We need this to prevent that the modal displays old content
+	$('body, footer').on('hidden.bs.modal', '.modal', function () {
+		$(this).removeData('bs.modal');
+		$("#modal-title").empty();
+		$('#modal-body').empty();
+		// remove the file browser from jot (else we would have problems
+		// with ajaxupload
+		$(".fbrowser").remove();
+	});
+
+		// Add Colorbox for viewing Network page images
+	//var cBoxClasses = new Array();
+	$(".wall-item-body a img").each(function(){
+		var aElem = $(this).parent();
+		var imgHref = aElem.attr("href");
+
+		// We need to make sure we only put a Colorbox on links to Friendica images
+		// We'll try to do this by looking for links of the form
+		// .../photo/ab803d8eg08daf85023adfec08 (with nothing more following), in hopes
+		// that that will be unique enough
+		if(imgHref.match(/\/photo\/[a-fA-F0-9]+(-[0-9]\.[\w]+?)?$/)) {
+
+			// Add a unique class to all the images of a certain post, to allow scrolling through
+			var cBoxClass = $(this).closest(".wall-item-body").attr("id") + "-lightbox";
+			$(this).addClass(cBoxClass);
+
+//			if( $.inArray(cBoxClass, cBoxClasses) < 0 ) {
+//				cBoxClasses.push(cBoxClass);
+//			}
+
+			aElem.colorbox({
+				maxHeight: '90%',
+				photo: true, // Colorbox doesn't recognize a URL that don't end in .jpg, etc. as a photo
+				rel: cBoxClass //$(this).attr("class").match(/wall-item-body-[\d]+-lightbox/)[0]
+			});
+		}
+	});
 
-// Clear bs modal on close
-// We need this to prevent that the modal displays old content
-$('body').on('hidden.bs.modal', '.modal', function () {
-	$(this).removeData('bs.modal');
-	$("#modal-title").empty();
-	$('#modal-body').empty();
+
+
+	// Jot nav menu.
+	$("body").on("click", "#jot-modal .jot-nav li a", function(e){
+		e.preventDefault();
+		toggleJotNav(this);
+	});
 });
 
+// overwrite Dialog.show from main js to load the filebrowser into a bs modal
+Dialog.show = function(url) {
+	var modal = $('#modal').modal();
+	modal
+		.find('#modal-body')
+		.load(url, function (responseText, textStatus) {
+			if ( textStatus === 'success' || 
+				textStatus === 'notmodified') 
+			{
+				modal.show();
+
+				$(function() {Dialog._load(url);});
+			}
+		});
+};
+
+// overwrite the function _get_url from main.js
+Dialog._get_url = function(type, name, id) {
+	var hash = name;
+	if (id !== undefined) hash = hash + "-" + id;
+	return "fbrowser/"+type+"/?mode=modal#"+hash;
+};
+
+// does load the filebrowser into the jot modal
+Dialog.showJot = function() {
+	var type = "image";
+	var name = "main";
+
+	var url = Dialog._get_url(type, name);
+	if(($(".modal-body #jot-fbrowser-wrapper .fbrowser").length) < 1 ) {
+		// load new content to fbrowser window
+		$("#jot-fbrowser-wrapper").load(url,function(responseText, textStatus){
+			if ( textStatus === 'success' || 
+				textStatus === 'notmodified') 
+			{
+				$(function() {Dialog._load(url);});
+			}
+		});
+	}
+};
+
+// init the filebrowser after page load
+Dialog._load = function(url) {
+	// get nickname & filebrowser type from the modal content
+	var nickname = $("#fb-nickname").attr("value");
+	var type = $("#fb-type").attr("value");
+
+	// try to fetch the hash form the url
+	var match = url.match(/fbrowser\/[a-z]+\/\?mode=modal(.*)/);
+	var hash = match[1];
+
+	// initialize the filebrowser
+	var jsbrowser = function() {
+		FileBrowser.init(nickname, type, hash);
+	}
+	loadScript("view/theme/frio/js/filebrowser.js", jsbrowser);
+};
+
 /**
  * @brief Add first h3 element as modal title
  * 
@@ -33,7 +131,8 @@ function loadModalTitle() {
 	}
 }
 
-
+// This function loads html content from a friendica page
+// into a modal
 function addToModal(url) {
 	var char = qOrAmp(url);
 
@@ -54,11 +153,13 @@ function addToModal(url) {
 		});
 };
 
+// function to load the html from the edit post page into
+// the jot modal
 function editpost(url) {
 	var modal = $('#jot-modal').modal();
 	var url = url + " #profile-jot-form";
 	//var rand_num = random_digits(12);
-	$("#jot-perms-lnk").hide();
+	$(".jot-nav #jot-perms-lnk").parent("li").hide();
 
 	// rename the the original div jot-preview-content because the edit function
 	// does load the content for the modal from another source and preview won't work
@@ -97,22 +198,23 @@ function editpost(url) {
 		});
 }
 
+// remove content from the jot modal
 function jotreset() {
 	// Clear bs modal on close
 	// We need this to prevent that the modal displays old content
 	$('body').on('hidden.bs.modal', '#jot-modal', function () {
 		$(this).removeData('bs.modal');
-		$("#jot-perms-lnk").show();
+		$(".jot-nav #jot-perms-lnk").parent("li").show();
 		$("#profile-jot-form #jot-title-wrap").show();
 		$("#profile-jot-form #jot-category-wrap").show();
 
 		// the following was commented out because it is needed anymore
 		// because we changed the behavior at an other place
-//		var rand_num = random_digits(12);
-//		$('#jot-title, #jot-category, #profile-jot-text').val("");
-//		$( "#profile-jot-form input[name='type']" ).val("wall");
-//		$( "#profile-jot-form input[name='post_id']" ).val("");
-//		$( "#profile-jot-form input[name='post_id_random']" ).val(rand_num);
+	//		var rand_num = random_digits(12);
+	//		$('#jot-title, #jot-category, #profile-jot-text').val("");
+	//		$( "#profile-jot-form input[name='type']" ).val("wall");
+	//		$( "#profile-jot-form input[name='post_id']" ).val("");
+	//		$( "#profile-jot-form input[name='post_id_random']" ).val(rand_num);
 		$("#jot-modal-body").empty();
 
 		// rename the div #jot-preview-content-renamed back to it's original
@@ -123,5 +225,14 @@ function jotreset() {
 		// Move the original jot back to it's old place in the html structure
 		// For explaination have a look at function editpost()
 		$("footer #cache-container #profile-jot-form").appendTo("section #jot-content");
-	});
+		});
 }
+
+// Give the active "jot-nav" list element the class "active"
+function toggleJotNav (elm) {
+	// select all li of jot-nav and remove the active class
+	$(elm).closest(".jot-nav").children("li").removeClass("active");
+	// add the active class to the parent of the link which was selected
+	$(elm).parent("li").addClass("active");
+}
+
diff --git a/js/textedit.js b/js/textedit.js
index be4cd770a8..f9944d5ff7 100644
--- a/js/textedit.js
+++ b/js/textedit.js
@@ -43,7 +43,6 @@ function hideThread(id) {
 	$("#collapsed-comments-" + id + " .collapsed-comments").hide()
 }
 
-
 function cmtBbOpen(id) {
 	$("#comment-edit-bb-" + id).show();
 }
@@ -115,6 +114,24 @@ function commentCloseUI(obj, id) {
 
 	$(document).bind( "click.commentClose", handler );
 }
+
+// test if there is default content in the jot text box and remove it
+function jotTextOpenUI(obj) {
+	if(obj.value == aStr.share) {
+		obj.value = '';
+		$(".modal-body #profile-jot-text").addClass("profile-jot-text-full").removeClass("profile-jot-text-empty");
+	}
+}
+
+// insert default content into the jot text box
+// if it's empty
+function jotTextCloseUI(obj) {
+	if(obj.value === '') {
+	obj.value = aStr.share;
+		$(".modal-body #profile-jot-text").removeClass("profile-jot-text-full").addClass("profile-jot-text-empty");
+	}
+}
+
 function commentOpen(obj,id) {
 	if(obj.value == aStr.comment) {
 		obj.value = '';
diff --git a/js/theme.js b/js/theme.js
index c0eed6b409..1fa89c00b9 100644
--- a/js/theme.js
+++ b/js/theme.js
@@ -89,69 +89,6 @@ $(document).ready(function(){
 		}
 	});
 
-	// Add Colorbox for viewing Network page images
-	//var cBoxClasses = new Array();
-	$(".wall-item-body a img").each(function(){
-		var aElem = $(this).parent();
-		var imgHref = aElem.attr("href");
-
-		// We need to make sure we only put a Colorbox on links to Friendica images
-		// We'll try to do this by looking for links of the form
-		// .../photo/ab803d8eg08daf85023adfec08 (with nothing more following), in hopes
-		// that that will be unique enough
-		if(imgHref.match(/\/photo\/[a-fA-F0-9]+(-[0-9]\.[\w]+?)?$/)) {
-
-			// Add a unique class to all the images of a certain post, to allow scrolling through
-			var cBoxClass = $(this).closest(".wall-item-body").attr("id") + "-lightbox";
-			$(this).addClass(cBoxClass);
-
-//			if( $.inArray(cBoxClass, cBoxClasses) < 0 ) {
-//				cBoxClasses.push(cBoxClass);
-//			}
-
-			aElem.colorbox({
-				maxHeight: '90%',
-				photo: true, // Colorbox doesn't recognize a URL that don't end in .jpg, etc. as a photo
-				rel: cBoxClass //$(this).attr("class").match(/wall-item-body-[\d]+-lightbox/)[0]
-			});
-		}
-	});
-
-	// overwrite Dialog.show from main js to load the filebrowser into a bs modal
-	Dialog.show = function(url) {
-		var modal = $('#modal').modal();
-		modal
-			.find('#modal-body')
-			.load(url, function (responseText, textStatus) {
-				if ( textStatus === 'success' || 
-					textStatus === 'notmodified') 
-				{
-					modal.show();
-
-					// get nickname & filebrowser type from the modal content
-					var nickname = $("#fb-nickname").attr("value");
-					var type = $("#fb-type").attr("value");
-
-					// try to fetch the hash form the url
-					var match = url.match(/fbrowser\/[a-z]+\/\?mode=modal(.*)/);
-					var hash = match[1];
-
-					// initialize the filebrowser
-					var jsbrowser = function() {
-						FileBrowser.init(nickname, type, hash);
-					}
-					loadScript("view/theme/frio/js/filebrowser.js", jsbrowser);
-				}
-			});
-	};
-
-	// overwrite the function _get_url from main.js
-	Dialog._get_url = function(type, name, id) {
-		var hash = name;
-		if (id !== undefined) hash = hash + "-" + id;
-		return "fbrowser/"+type+"/?mode=modal#"+hash;
-	};
-
 
 });
 //function commentOpenUI(obj, id) {
diff --git a/templates/filebrowser_plain.tpl b/templates/filebrowser_plain.tpl
index 4322b63880..b1127c8a35 100644
--- a/templates/filebrowser_plain.tpl
+++ b/templates/filebrowser_plain.tpl
@@ -5,8 +5,8 @@
 <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="view/theme/frio/js/filebrowser.js"></script>*}}
+{{*<script type="text/javascript" src="{{$baseurl}}/js/ajaxupload.js" ></script>*}}
+{{*<script type="text/javascript" src="view/theme/frio/js/filebrowser.js"></script>*}}
 
 <div class="fbrowser {{$type}}">
 	<input id="fb-nickname" type="hidden" name="type" value="{{$nickname}}" />
diff --git a/templates/jot-header.tpl b/templates/jot-header.tpl
index a09e4db216..f5b50b5595 100644
--- a/templates/jot-header.tpl
+++ b/templates/jot-header.tpl
@@ -1,7 +1,9 @@
 
 
-<script language="javascript" type="text/javascript">
+{{*<script language="javascript" type="text/javascript">*}}
 
+
+<script>
 var editor=false;
 var textlen = 0;
 var plaintext = '{{$editselect}}';
@@ -11,7 +13,7 @@ function initEditor(cb){
 		$("#profile-jot-text-loading").show();
 		if(plaintext == 'none') {
 			$("#profile-jot-text-loading").hide();
-			$("#profile-jot-text").addClass("profile-jot-text-full").removeClass("profile-jot-text-empty");
+			//$("#profile-jot-text").addClass("profile-jot-text-full").removeClass("profile-jot-text-empty");
 			$("#jot-category").show();
 			$("#jot-category").addClass("jot-category-ex");
 			$("#jot-profile-jot-wrapper").show();
@@ -108,13 +110,16 @@ function initEditor(cb){
 				});
 
 			}
+
 		});
 		editor = true;
+
 		// setup acl popup
 		$("a#jot-perms-icon").colorbox({
 			'inline' : true,
 			'transition' : 'elastic'
 		}); 
+
 	} else {
 		if (typeof cb!="undefined") cb();
 	}
@@ -150,20 +155,25 @@ function enableOnUser(){
 
 		/* callback */
 		$('body').on('fbrowser.image.main', function(e, filename, embedcode, id) {
-			$.colorbox.close();
+			///@todo this part isn't ideal and need to be done in a better way
+			jotTextOpenUI(document.getElementById("profile-jot-text"));
+			jotActive();
 			addeditortext(embedcode);
 		});
 		$('body').on('fbrowser.file.main', function(e, filename, embedcode, id) {
-			$.colorbox.close();
+			jotTextOpenUI(document.getElementById("profile-jot-text"));
+			jotActive();
 			addeditortext(embedcode);
 		});
 
 		$('#wall-image-upload').on('click', function(){
 			Dialog.doImageBrowser("main");
+			jotActive();
 		});
 
 		$('#wall-file-upload').on('click', function(){
 			Dialog.doFileBrowser("main");
+			jotActive();
 		});
 
 		/**
@@ -388,24 +398,32 @@ function enableOnUser(){
 	// the following functions show/hide the specific jot content 
 	// in dependence of the selected nav
 	function aclActive() {
-		$(".modal-body #profile-jot-wrapper, .modal-body #jot-preview-content").hide();
+		$(".modal-body #profile-jot-wrapper, .modal-body #jot-preview-content, .modal-body #jot-fbrowser-wrapper").hide();
 		$(".modal-body #profile-jot-acl-wrapper").show();
-		$("#jot-text-lnk, #jot-preview-lnk").parent("li").removeClass("active");
-		$("#jot-perms-lnk").parent("li").addClass("active");
+	}
+
+
+	function previewActive() {
+		$(".modal-body #profile-jot-wrapper, .modal-body #profile-jot-acl-wrapper,.modal-body #jot-fbrowser-wrapper").hide();
+		preview_post();
 	}
 
 	function jotActive() {
-		$(".modal-body #profile-jot-acl-wrapper, .modal-body #jot-preview-content").hide();
+		$(".modal-body #profile-jot-acl-wrapper, .modal-body #jot-preview-content, .modal-body #jot-fbrowser-wrapper").hide();
 		$(".modal-body #profile-jot-wrapper").show();
-		$("#jot-perms-lnk, #jot-preview-lnk").parent("li").removeClass("active");
-		$("#jot-text-lnk").parent("li").addClass("active");
+
+		//make sure jot text does have really the active class (we do this because there are some
+		// other events which trigger jot text
+		toggleJotNav($("#jot-modal .jot-nav #jot-text-lnk"));
 	}
 
-	function previewActive() {
-		$(".modal-body #profile-jot-wrapper, .modal-body #profile-jot-acl-wrapper").hide();
-		$("#jot-text-lnk, #jot-perms-lnk").parent("li").removeClass("active");
-		$("#jot-preview-lnk").parent("li").addClass("active");
-		preview_post();
+	function fbrowserActive() {
+		$(".modal-body #profile-jot-wrapper, .modal-body #jot-preview-content, .modal-body #profile-jot-acl-wrapper").hide();
+
+		$(".modal-body #jot-fbrowser-wrapper").show();
+
+		$(function() {Dialog.showJot();});
 	}
+
 </script>
 
diff --git a/templates/jot.tpl b/templates/jot.tpl
index 42215950d6..b65c0859ac 100644
--- a/templates/jot.tpl
+++ b/templates/jot.tpl
@@ -3,9 +3,6 @@
 <button class="btn btn-sm btn-main pull-right" id="jotOpen" onclick="jotShow(); return false;"><i class="fa fa-pencil-square-o fa-2x"></i></button>
 
 
-
-
-
 <div id="jot-content">
 	<form id="profile-jot-form" action="{{$action}}" method="post">
 		<div id="profile-jot-wrapper">
@@ -35,16 +32,18 @@
 
 			{{* The jot text field in which the post text is inserted *}}
 			<div id="jot-text-wrap">
-			<textarea rows="2" cols="64" class="profile-jot-text form-control" id="profile-jot-text" name="body" style="min-width:100%; max-width:100%;">{{if $content}}{{$content}}{{else}}{{$share}}{{/if}}</textarea>
+			<textarea rows="2" cols="64" class="profile-jot-text form-control" id="profile-jot-text" name="body" onFocus="jotTextOpenUI(this);" onBlur="jotTextCloseUI(this);" style="min-width:100%; max-width:100%;">{{if $content}}{{$content}}{{else}}{{$share}}{{/if}}</textarea>
 			</div>
 
 			<ul id="profile-jot-submit-wrapper" class="jothidden nav nav-pills">
-				<li><a id="profile-location" onclick="jotGetLocation();return false;" title="{{$setloc}}"><i class="fa fa-map-marker"></i></a></li>
-				<li><a href="#" id="wall-image-upload" title="{{$upload}}" data-toggle="modal" data-target="#PhotoModal"><i class="fa fa-picture-o"></i></a></li>
+				{{* uncomment the button for "wall-immage-upload" because we have integrated it directly in the jot modal
+				<li><a href="#" id="wall-image-upload" title="{{$upload}}"><i class="fa fa-picture-o"></i></a></li>
+				*}}
 				<li><a href="#" onclick="return false;" id="wall-file-upload"  title="{{$attach}}"><i class="fa fa-paperclip"></i></a></li>
 				<li><a id="profile-link"  ondragenter="return linkdropper(event);" ondragover="return linkdropper(event);" ondrop="linkdrop(event);" onclick="jotGetLink(); return false;" title="{{$weblink}}"><i class="fa fa-link"></i></a></li>
 				<li><a id="profile-video" onclick="jotVideoURL();return false;" title="{{$video}}"><i class="fa fa-film"></i></a></li>
 				<li><a id="profile-audio" onclick="jotAudioURL();return false;" title="{{$audio}}"><i class="fa fa-music"></i></a></li>
+				<li><a id="profile-location" onclick="jotGetLocation();return false;" title="{{$setloc}}"><i class="fa fa-map-marker"></i></a></li>
 				<!-- TODO: waiting for a better placement 
 				<li><a id="profile-nolocation" onclick="jotClearLocation();return false;" title="{{$noloc}}">{{$shortnoloc}}</a></li>
 				-->
@@ -65,6 +64,8 @@
 
 		<div id="jot-preview-content" style="display:none;"></div>
 
+		<div id="jot-fbrowser-wrapper" style="display: none"></div>
+
 		{{if $content}}<script>initEditor();</script>{{/if}}
 	</form>
 </div>
@@ -78,12 +79,14 @@
 			<div class="modal-header">
 				<button type="button" class="close" data-dismiss="modal">&times;</button>
 				<!--<h4 class="modal-title">Modal Header</h4>-->
-				<ul class="nav nav-tabs hidden-xs" role="menubar" data-tabs="tabs">
-					{{* mark the first list entry as active because it is the first which is active after opening
+				{{* The Jot navigation menu (text input, permissions, preview, filebrowser) *}}
+				<ul class="nav nav-tabs hidden-xs jot-nav" role="menubar" data-tabs="tabs">
+					{{* Mark the first list entry as active because it is the first which is active after opening
 						the modal. Changing of the activity status is done by js in jot.tpl-header *}}
 					<li class="active" role="menuitem"><a id="jot-text-lnk" onclick="jotActive(); return false;">Text</a></li>
 					{{if $acl}}<li role="menuitem"><a id="jot-perms-lnk" onclick="aclActive();return false;">Permissions</a></li>{{/if}}
 					<li role="menuitem"><a id="jot-preview-lnk" onclick="previewActive();return false;">{{$preview}}</a></li>
+					<li role="menuitem"><a id="jot-preview-link" onclick="fbrowserActive(); return false;"> Browser </a></li>
 				</ul>
 				
 				<div class="dropdown  hidden-lg hidden-md hidden-sm" role="menubar" data-tabs="tabs">
@@ -111,7 +114,12 @@
 
 
 <script>
-        $('iframe').load(function() {
-            this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
-        });
-</script>
\ No newline at end of file
+	$('iframe').load(function() {
+		this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
+	});
+
+	// insert new object with value to aStr
+	// function jotTextOpenUI does make use of it
+	aStr.share = "{{$share}}";
+</script>
+
-- 
2.39.5