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
This commit is contained in:
fabrixxm 2015-11-08 12:01:19 +01:00
parent e4b2ef84b1
commit 0363bab040
3 changed files with 193 additions and 129 deletions

View file

@ -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,14 +13,14 @@
*
* 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
*
@ -29,17 +29,18 @@
*
* 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:
*
* // 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'})
* Dialog.doImageBrowser("example", id);
*
* // setup event handler to get user selection
* $("body").on("fbrowser.image.example", function(event, filename, bbcode, id) {

View file

@ -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'})
Dialog.doImageBrowser("comment", id);
return;
}
insertFormatting(comment, bbcode, id);
});
@ -614,7 +613,6 @@
$("#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; });
}
@ -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
};
}
}

View file

@ -152,11 +152,11 @@ function enableOnUser(){
});
$('#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");
});
/**