MrPetovan/friendica
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

filebrowser: massive improvements (fix https://github.com/rabuzarus/frio/issues/3 , integrate fbrowser into jot)

Browse source
This commit is contained in:
rabuzarus 2016-05-09 21:08:11 +02:00
parent dceee050e7
commit dab12f0b93
7 changed files with 246 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
js/filebrowser.js
View file

@ -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);});
});
}
}
);
}
},
};

141
js/modal.js
View file

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

19
js/textedit.js
View file

@ -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 = '';

63
js/theme.js
View file

@ -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) {

4
templates/filebrowser_plain.tpl
View file

@ -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}}" />

48
templates/jot-header.tpl
View file

@ -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>

32
templates/jot.tpl
View file

@ -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>
$('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>