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 * 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 * 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 * it under the terms of the GNU Affero General Public License as published by
@ -13,14 +13,14 @@
* *
* To load filebrowser in colorbox, call * 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 * eventname: event name to catch return value
* id: id returned to event handler * id: id returned to event handler
* *
@ -29,17 +29,18 @@
* *
* fbrowser.<type>.[<eventname>] * 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 * filemane: filename of item choosed by user
* embed: bbcode to embed element into posts * 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" * // open dialog for select an image for a textarea with id "myeditor"
* var 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 * // setup event handler to get user selection
* $("body").on("fbrowser.image.example", function(event, filename, bbcode, id) { * $("body").on("fbrowser.image.example", function(event, filename, bbcode, id) {

View file

@ -65,10 +65,9 @@
var bbcode = o.data('bbcode'); var bbcode = o.data('bbcode');
var id = o.data('id'); var id = o.data('id');
if (bbcode=="img") { if (bbcode=="img") {
$.colorbox({href: baseurl + "/fbrowser/image/?mode=minimal#comment-"+id, iframe:true,innerWidth:'500px',innerHeight:'400px'}) Dialog.doImageBrowser("comment", id);
return; return;
} }
insertFormatting(comment, bbcode, id); insertFormatting(comment, bbcode, id);
}); });
@ -614,7 +613,6 @@
$("#comment-edit-form-" + id).serialize(), $("#comment-edit-form-" + id).serialize(),
function(data) { function(data) {
if(data.preview) { if(data.preview) {
$("#comment-edit-preview-" + id).html(data.preview); $("#comment-edit-preview-" + id).html(data.preview);
$("#comment-edit-preview-" + id + " a").click(function() { return false; }); $("#comment-edit-preview-" + id + " a").click(function() { return false; });
} }
@ -826,3 +824,68 @@ function getNotificationPermission() {
return Notification.permission; 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(){ $('#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(){ $('#wall-file-upload').on('click', function(){
$.colorbox({href: baseurl + "/fbrowser/file/?mode=minimal#main", iframe:true,innerWidth:'500px',innerHeight:'400px'}) Dialog.doFileBrowser("main");
}); });
/** /**