From 0363bab040804fcc9e9cc812d6bcc94db1c19d06 Mon Sep 17 00:00:00 2001
From: fabrixxm <fabrix.xm@gmail.com>
Date: Sun, 8 Nov 2015 12:01:19 +0100
Subject: [PATCH 1/2] js: add new Dialog object
The Dialog is used by code to show urls in colorbox.
Templates can overwrite `show()` function to change its behaviour
---
js/filebrowser.js | 29 ++--
js/main.js | 249 +++++++++++++++++++++-------------
view/templates/jot-header.tpl | 44 +++---
3 files changed, 193 insertions(+), 129 deletions(-)
diff --git a/js/filebrowser.js b/js/filebrowser.js
index 66db2833c3..78cee0e77e 100644
--- a/js/filebrowser.js
+++ b/js/filebrowser.js
@@ -1,7 +1,7 @@
/**
* Filebrowser - Friendica Communications Server
*
- * Copyright (c) 2010-2013 the Friendica Project
+ * Copyright (c) 2010-2015 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
@@ -13,33 +13,34 @@
*
* To load filebrowser in colorbox, call
*
- * $.colorbox({href: ulr, iframe:true,innerWidth:'500px',innerHeight:'400px'})
+ * Dialog.doImageBrowser(eventname, id);
*
- * where url is:
+ * or
*
- * <baseurl>/fbrowser/<type>/?mode=minimal[#<eventname>-<id>]
+ * Dialog.doFileBrowser(eventname, id);
+ *
+ * where:
*
- * 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
+ * When user select an item, an event in fired in parent page, on body element
+ * The event is named
*
* fbrowser.<type>.[<eventname>]
*
- * with params:
+ * <type> will be one of "image" or "file", and the event handler will
+ * get the following params:
*
* filemane: filename of item choosed by user
* embed: bbcode to embed element into posts
- * id: id from url
+ * id: id from caller code
*
- * example:
+ * 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'})
+ * // open dialog for select an image for a textarea with id "myeditor"
+ * var id="myeditor";
+ * Dialog.doImageBrowser("example", id);
*
* // setup event handler to get user selection
* $("body").on("fbrowser.image.example", function(event, filename, bbcode, id) {
diff --git a/js/main.js b/js/main.js
index e1e852cbaf..d28133f03f 100644
--- a/js/main.js
+++ b/js/main.js
@@ -4,20 +4,20 @@
}
function openClose(theID) {
- if(document.getElementById(theID).style.display == "block") {
- document.getElementById(theID).style.display = "none"
+ if(document.getElementById(theID).style.display == "block") {
+ document.getElementById(theID).style.display = "none"
+ }
+ else {
+ document.getElementById(theID).style.display = "block"
}
- else {
- document.getElementById(theID).style.display = "block"
- }
}
function openMenu(theID) {
- document.getElementById(theID).style.display = "block"
+ document.getElementById(theID).style.display = "block"
}
function closeMenu(theID) {
- document.getElementById(theID).style.display = "none"
+ document.getElementById(theID).style.display = "none"
}
@@ -50,14 +50,14 @@
if (e.hasClass("ttright")) pos="right";
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);
@@ -65,10 +65,9 @@
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;
+ Dialog.doImageBrowser("comment", id);
+ return;
}
-
insertFormatting(comment, bbcode, id);
});
@@ -82,18 +81,18 @@
var end = textarea.selectionEnd;
textarea.value = textarea.value.substring(0, start) + bbcode + textarea.value.substring(end, textarea.value.length);
});
-
-
-
+
+
+
/* setup onoff widgets */
$(".onoff input").each(function(){
val = $(this).val();
id = $(this).attr("id");
$("#"+id+"_onoff ."+ (val==0?"on":"off")).addClass("hidden");
-
+
});
$(".onoff > a").click(function(event){
- event.preventDefault();
+ event.preventDefault();
var input = $(this).siblings("input");
var val = 1-input.val();
var id = input.attr("id");
@@ -102,7 +101,7 @@
input.val(val);
//console.log(id);
});
-
+
/* setup field_richtext */
setupFieldRichtext();
@@ -139,20 +138,20 @@
$('html').click(function() {
close_last_popup_menu();
});
-
+
// fancyboxes
$("a.popupbox").colorbox({
'inline' : true,
'transition' : 'elastic'
});
-
+
/* notifications template */
var notifications_tpl= unescape($("#nav-notifications-template[rel=template]").html());
var notifications_all = unescape($('<div>').append( $("#nav-notifications-see-all").clone() ).html()); //outerHtml hack
var notifications_mark = unescape($('<div>').append( $("#nav-notifications-mark-all").clone() ).html()); //outerHtml hack
var notifications_empty = unescape($("#nav-notifications-menu").html());
-
+
/* nav update event */
$('nav').bind('nav-update', function(e,data){;
var invalid = $(data).find('invalid').text();
@@ -165,7 +164,7 @@
var home = $(data).find('home').text();
if(home == 0) { home = ''; $('#home-update').removeClass('show') } else { $('#home-update').addClass('show') }
$('#home-update').html(home);
-
+
var intro = $(data).find('intro').text();
if(intro == 0) { intro = ''; $('#intro-update').removeClass('show') } else { $('#intro-update').addClass('show') }
$('#intro-update').html(intro);
@@ -173,7 +172,7 @@
var mail = $(data).find('mail').text();
if(mail == 0) { mail = ''; $('#mail-update').removeClass('show') } else { $('#mail-update').addClass('show') }
$('#mail-update').html(mail);
-
+
var intro = $(data).find('intro').text();
if(intro == 0) { intro = ''; $('#intro-update-li').removeClass('show') } else { $('#intro-update-li').addClass('show') }
$('#intro-update-li').html(intro);
@@ -206,7 +205,7 @@
var eNotif = $(data).find('notif')
-
+
if (eNotif.children("note").length==0){
$("#nav-notifications-menu").html(notifications_empty);
} else {
@@ -244,7 +243,7 @@
});
}
}
-
+
});
notification_lastitem = notification_id;
localStorage.setItem("notification-lastitem", notification_lastitem)
@@ -267,7 +266,7 @@
}
if(notif == 0) { notif = ''; $('#notify-update').removeClass('show') } else { $('#notify-update').addClass('show') }
$('#notify-update').html(notif);
-
+
var eSysmsg = $(data).find('sysmsgs');
eSysmsg.children("notice").each(function(){
text = $(this).text();
@@ -277,10 +276,10 @@
text = $(this).text();
$.jGrowl(text, { sticky: false, theme: 'info', life: 5000 });
});
-
+
});
- NavUpdate();
+ NavUpdate();
// Allow folks to stop the ajax page updates with the pause/break key
$(document).keydown(function(event) {
if(event.keyCode == '8') {
@@ -306,8 +305,8 @@
}
}
});
-
-
+
+
});
function NavUpdate() {
@@ -318,8 +317,8 @@
$(data).find('result').each(function() {
// send nav-update event
$('nav').trigger('nav-update', this);
-
-
+
+
// start live update
if($('#live-network').length) { src = 'network'; liveUpdate(); }
@@ -330,19 +329,19 @@
/* if($('#live-display').length) {
if(liking) {
liking = 0;
- window.location.href=window.location.href
+ window.location.href=window.location.href
}
}*/
- if($('#live-photos').length) {
+ if($('#live-photos').length) {
if(liking) {
liking = 0;
- window.location.href=window.location.href
+ window.location.href=window.location.href
}
}
-
-
-
+
+
+
});
}) ;
}
@@ -432,8 +431,8 @@
});
$('#' + prev).after($(this));
}
- else {
- $('#' + ident + ' ' + '.wall-item-ago').replaceWith($(this).find('.wall-item-ago'));
+ else {
+ $('#' + ident + ' ' + '.wall-item-ago').replaceWith($(this).find('.wall-item-ago'));
if($('#' + ident + ' ' + '.comment-edit-text-empty').length)
$('#' + ident + ' ' + '.wall-item-comment-wrapper').replaceWith($(this).find('.wall-item-comment-wrapper'));
$('#' + ident + ' ' + '.hide-comments-total').replaceWith($(this).find('.hide-comments-total'));
@@ -443,7 +442,7 @@
$(this).attr('src',$(this).attr('dst'));
});
}
- prev = ident;
+ prev = ident;
});
*/
$('.like-rotator').hide();
@@ -467,10 +466,10 @@
$(node).removeClass("drop").addClass("drophide");
}
- // Since our ajax calls are asynchronous, we will give a few
- // seconds for the first ajax call (setting like/dislike), then
+ // Since our ajax calls are asynchronous, we will give a few
+ // seconds for the first ajax call (setting like/dislike), then
// run the updater to pick up any changes and display on the page.
- // The updater will turn any rotators off when it's done.
+ // The updater will turn any rotators off when it's done.
// This function will have returned long before any of these
// events have completed and therefore there won't be any
// visible feedback that anything changed without all this
@@ -582,14 +581,14 @@
commentBusy = true;
$('body').css('cursor', 'wait');
$("#comment-preview-inp-" + id).val("0");
- $.post(
- "item",
- $("#comment-edit-form-" + id).serialize(),
+ $.post(
+ "item",
+ $("#comment-edit-form-" + id).serialize(),
function(data) {
if(data.success) {
$("#comment-edit-wrapper-" + id).hide();
$("#comment-edit-text-" + id).val('');
- var tarea = document.getElementById("comment-edit-text-" + id);
+ var tarea = document.getElementById("comment-edit-text-" + id);
if(tarea)
commentClose(tarea,id);
if(timer) clearTimeout(timer);
@@ -600,28 +599,27 @@
window.location.href=data.reload;
}
},
- "json"
- );
- return false;
+ "json"
+ );
+ return false;
}
function preview_comment(id) {
$("#comment-preview-inp-" + id).val("1");
$("#comment-edit-preview-" + id).show();
- $.post(
- "item",
- $("#comment-edit-form-" + id).serialize(),
+ $.post(
+ "item",
+ $("#comment-edit-form-" + id).serialize(),
function(data) {
if(data.preview) {
-
$("#comment-edit-preview-" + id).html(data.preview);
$("#comment-edit-preview-" + id + " a").click(function() { return false; });
}
},
- "json"
- );
- return true;
+ "json"
+ );
+ return true;
}
@@ -643,19 +641,19 @@
$("#jot-preview").val("1");
$("#jot-preview-content").show();
tinyMCE.triggerSave();
- $.post(
- "item",
+ $.post(
+ "item",
$("#profile-jot-form").serialize(),
function(data) {
- if(data.preview) {
+ if(data.preview) {
$("#jot-preview-content").html(data.preview);
$("#jot-preview-content" + " a").click(function() { return false; });
}
},
- "json"
- );
+ "json"
+ );
$("#jot-preview").val("0");
- return true;
+ return true;
}
@@ -663,38 +661,38 @@
// unpause auto reloads if they are currently stopped
totStopped = false;
stopped = false;
- $('#pause').html('');
+ $('#pause').html('');
}
-
- function bin2hex(s){
- // Converts the binary representation of data to hex
- //
- // version: 812.316
- // discuss at: http://phpjs.org/functions/bin2hex
- // + original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
- // + bugfixed by: Onno Marsman
- // + bugfixed by: Linuxworld
- // * example 1: bin2hex('Kev');
- // * returns 1: '4b6576'
- // * example 2: bin2hex(String.fromCharCode(0x00));
- // * returns 2: '00'
- var v,i, f = 0, a = [];
- s += '';
- f = s.length;
-
- for (i = 0; i<f; i++) {
- a[i] = s.charCodeAt(i).toString(16).replace(/^([\da-f])$/,"0$1");
- }
-
- return a.join('');
- }
+
+ function bin2hex(s){
+ // Converts the binary representation of data to hex
+ //
+ // version: 812.316
+ // discuss at: http://phpjs.org/functions/bin2hex
+ // + original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+ // + bugfixed by: Onno Marsman
+ // + bugfixed by: Linuxworld
+ // * example 1: bin2hex('Kev');
+ // * returns 1: '4b6576'
+ // * example 2: bin2hex(String.fromCharCode(0x00));
+ // * returns 2: '00'
+ var v,i, f = 0, a = [];
+ s += '';
+ f = s.length;
+
+ for (i = 0; i<f; i++) {
+ a[i] = s.charCodeAt(i).toString(16).replace(/^([\da-f])$/,"0$1");
+ }
+
+ return a.join('');
+ }
function groupChangeMember(gid, cid, sec_token) {
$('body .fakelink').css('cursor', 'wait');
$.get('group/' + gid + '/' + cid + "?t=" + sec_token, function(data) {
$('#group-update-wrapper').html(data);
- $('body .fakelink').css('cursor', 'auto');
+ $('body .fakelink').css('cursor', 'auto');
});
}
@@ -702,7 +700,7 @@
$('body .fakelink').css('cursor', 'wait');
$.get('profperm/' + gid + '/' + cid, function(data) {
$('#prof-update-wrapper').html(data);
- $('body .fakelink').css('cursor', 'auto');
+ $('body .fakelink').css('cursor', 'auto');
});
}
@@ -784,9 +782,9 @@ function setupFieldRichtext(){
}
-/**
- * sprintf in javascript
- * "{0} and {1}".format('zero','uno');
+/**
+ * sprintf in javascript
+ * "{0} and {1}".format('zero','uno');
**/
String.prototype.format = function() {
var formatted = this;
@@ -826,3 +824,68 @@ function getNotificationPermission() {
return Notification.permission;
}
}
+
+/**
+ * Show a dialog loaded from an url
+ * By defaults this load the url in an iframe in colorbox
+ * Themes can overwrite `show()` function to personalize it
+ */
+var Dialog = {
+ /**
+ * Show the dialog
+ *
+ * @param string url
+ * @return object colorbox
+ */
+ show : function (url) {
+ var size = Dialog._get_size();
+ return $.colorbox({href: url, iframe:true,innerWidth: size.width+'px',innerHeight: size.height+'px'})
+ },
+
+ /**
+ * Show the Image browser dialog
+ *
+ * @param string name
+ * @param string id (optional)
+ * @return object
+ *
+ * The name will be used to build the event name
+ * fired by image browser dialog when the user select
+ * an image. The optional id will be passed as argument
+ * to the event handler
+ */
+ doImageBrowser : function (name, id) {
+ var url = Dialog._get_url("image",name,id);
+ return Dialog.show(url);
+ },
+
+ /**
+ * Show the File browser dialog
+ *
+ * @param string name
+ * @param string id (optional)
+ * @return object
+ *
+ * The name will be used to build the event name
+ * fired by file browser dialog when the user select
+ * a file. The optional id will be passed as argument
+ * to the event handler
+ */
+ doFileBrowser : function (name, id) {
+ var url = Dialog._get_url("image",name,id);
+ return Dialog.show(url);
+ },
+
+ _get_url : function(type, name, id) {
+ var hash = name;
+ if (id !== undefined) hash = hash + "-" + id;
+ return baseurl + "/fbrowser/"+type+"/?mode=minimal#"+hash;
+ },
+
+ _get_size: function() {
+ return {
+ width: window.innerWidth-50,
+ height: window.innerHeight-100
+ };
+ }
+}
diff --git a/view/templates/jot-header.tpl b/view/templates/jot-header.tpl
index cb841c314d..647f261c45 100644
--- a/view/templates/jot-header.tpl
+++ b/view/templates/jot-header.tpl
@@ -74,7 +74,7 @@ function initEditor(cb){
}
else {
$('#profile-jot-desc').html(' ');
- }
+ }
//Character count
@@ -110,7 +110,7 @@ function initEditor(cb){
$("a#jot-perms-icon").colorbox({
'inline' : true,
'transition' : 'elastic'
- });
+ });
} else {
if (typeof cb!="undefined") cb();
}
@@ -127,20 +127,20 @@ 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();
@@ -150,16 +150,16 @@ function enableOnUser(){
$.colorbox.close();
addeditortext(embedcode);
});
-
+
$('#wall-image-upload').on('click', function(){
- $.colorbox({href: baseurl + "/fbrowser/image/?mode=minimal#main", iframe:true,innerWidth:'500px',innerHeight:'400px'})
+ Dialog.doImageBrowser("main");
});
-
+
$('#wall-file-upload').on('click', function(){
- $.colorbox({href: baseurl + "/fbrowser/file/?mode=minimal#main", iframe:true,innerWidth:'500px',innerHeight:'400px'})
+ Dialog.doFileBrowser("main");
});
-
- /**
+
+ /**
var uploader = new window.AjaxUpload(
'wall-image-upload',
{ action: 'wall_upload/{{$nickname}}',
@@ -168,7 +168,7 @@ function enableOnUser(){
onComplete: function(file,response) {
addeditortext(response);
$('#profile-rotator').hide();
- }
+ }
}
);
var file_uploader = new window.AjaxUpload(
@@ -179,10 +179,10 @@ function enableOnUser(){
onComplete: function(file,response) {
addeditortext(response);
$('#profile-rotator').hide();
- }
+ }
}
);
-
+
}
**/
});
@@ -301,9 +301,9 @@ function enableOnUser(){
}
function itemFiler(id) {
-
+
var bordercolor = $("input").css("border-color");
-
+
$.get('filer/', function(data){
$.colorbox({html:data});
$("#id_term").keypress(function(){
@@ -312,7 +312,7 @@ function enableOnUser(){
$("#select_term").change(function(){
$("#id_term").css("border-color",bordercolor);
})
-
+
$("#filer_save").click(function(e){
e.preventDefault();
reply = $("#id_term").val();
@@ -345,7 +345,7 @@ function enableOnUser(){
}
else
tinyMCE.execCommand('mceInsertRawHTML',false,data);
- }
+ }
{{$geotag}}
From 24d807221be7fb47d37cf262e4e87d6869bdf369 Mon Sep 17 00:00:00 2001
From: fabrixxm <fabrix.xm@gmail.com>
Date: Sun, 8 Nov 2015 12:05:23 +0100
Subject: [PATCH 2/2] Image filebrowser dialog links images to image page
fix #1991
---
js/main.js | 2 +-
mod/fbrowser.php | 17 ++++++++---------
2 files changed, 9 insertions(+), 10 deletions(-)
diff --git a/js/main.js b/js/main.js
index d28133f03f..572a6ebfe1 100644
--- a/js/main.js
+++ b/js/main.js
@@ -872,7 +872,7 @@ var Dialog = {
* to the event handler
*/
doFileBrowser : function (name, id) {
- var url = Dialog._get_url("image",name,id);
+ var url = Dialog._get_url("file",name,id);
return Dialog.show(url);
},
diff --git a/mod/fbrowser.php b/mod/fbrowser.php
index c4c62afa7b..0a2a7dead5 100644
--- a/mod/fbrowser.php
+++ b/mod/fbrowser.php
@@ -40,9 +40,9 @@ function fbrowser_content($a){
dbesc('Contact Photos'),
dbesc( t('Contact Photos'))
);
- // anon functions only from 5.3.0... meglio tardi che mai..
- $folder1 = function($el) use ($mode) {return array(bin2hex($el['album']),$el['album']);};
- $albums = array_map( $folder1 , $albums);
+
+ function _map_folder1($el){return array(bin2hex($el['album']),$el['album']);};
+ $albums = array_map( "_map_folder1" , $albums);
}
@@ -62,7 +62,7 @@ function fbrowser_content($a){
dbesc( t('Contact Photos'))
);
- function files1($rr){
+ function _map_files1($rr){
global $a;
$types = Photo::supportedTypes();
$ext = $types[$rr['type']];
@@ -75,12 +75,12 @@ function fbrowser_content($a){
}
return array(
- $a->get_baseurl() . '/photo/' . $rr['resource-id'] . '.' .$ext,
+ $a->get_baseurl() . '/photos/' . $a->user['nickname'] . '/image/' . $rr['resource-id'],
$filename_e,
$a->get_baseurl() . '/photo/' . $rr['resource-id'] . '-' . $rr['loq'] . '.'. $ext
);
}
- $files = array_map("files1", $r);
+ $files = array_map("_map_files1", $r);
$tpl = get_markup_template($template_file);
@@ -102,7 +102,7 @@ function fbrowser_content($a){
intval(local_user())
);
- function files2($rr){ global $a;
+ function _map_files2($rr){ global $a;
list($m1,$m2) = explode("/",$rr['filetype']);
$filetype = ( (file_exists("images/icons/$m1.png"))?$m1:"zip");
@@ -115,8 +115,7 @@ function fbrowser_content($a){
return array( $a->get_baseurl() . '/attach/' . $rr['id'], $filename_e, $a->get_baseurl() . '/images/icons/16/' . $filetype . '.png');
}
- $files = array_map("files2", $files);
- //echo "<pre>"; var_dump($files); killme();
+ $files = array_map("_map_files2", $files);
$tpl = get_markup_template($template_file);