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 a2b1702a8..648090677 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 888893e83..a296c9ba9 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(); + }); -// 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(); + // 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] + }); + } + }); + + + + // 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 be4cd770a..f9944d5ff 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 c0eed6b40..1fa89c00b 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 4322b6388..b1127c8a3 100644 --- a/templates/filebrowser_plain.tpl +++ b/templates/filebrowser_plain.tpl @@ -5,8 +5,8 @@ - -{{***}} +{{**}} +{{**}}
diff --git a/templates/jot-header.tpl b/templates/jot-header.tpl index a09e4db21..f5b50b559 100644 --- a/templates/jot-header.tpl +++ b/templates/jot-header.tpl @@ -1,7 +1,9 @@ - diff --git a/templates/jot.tpl b/templates/jot.tpl index 42215950d..b65c0859a 100644 --- a/templates/jot.tpl +++ b/templates/jot.tpl @@ -3,9 +3,6 @@ - - -
@@ -35,16 +32,18 @@ {{* The jot text field in which the post text is inserted *}}
- +
@@ -78,12 +79,14 @@
-