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:
parent
e4b2ef84b1
commit
0363bab040
3 changed files with 193 additions and 129 deletions
|
@ -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) {
|
||||
|
|
89
js/main.js
89
js/main.js
|
@ -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);
|
||||
});
|
||||
|
||||
|
@ -583,13 +582,13 @@
|
|||
$('body').css('cursor', 'wait');
|
||||
$("#comment-preview-inp-" + id).val("0");
|
||||
$.post(
|
||||
"item",
|
||||
$("#comment-edit-form-" + id).serialize(),
|
||||
"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);
|
||||
|
@ -601,8 +600,8 @@
|
|||
}
|
||||
},
|
||||
"json"
|
||||
);
|
||||
return false;
|
||||
);
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
|
@ -610,18 +609,17 @@
|
|||
$("#comment-preview-inp-" + id).val("1");
|
||||
$("#comment-edit-preview-" + id).show();
|
||||
$.post(
|
||||
"item",
|
||||
$("#comment-edit-form-" + id).serialize(),
|
||||
"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;
|
||||
);
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
|
@ -663,7 +661,7 @@
|
|||
// unpause auto reloads if they are currently stopped
|
||||
totStopped = false;
|
||||
stopped = false;
|
||||
$('#pause').html('');
|
||||
$('#pause').html('');
|
||||
}
|
||||
|
||||
|
||||
|
@ -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
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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");
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in a new issue