Port OC.dialogs to use octemplate except for prompt() and form().
Also load octemplate per default.
This commit is contained in:
Thomas Tanghus
parent
fdef2a373a
commit
f355d797ff
|
|
@ -385,10 +385,13 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin
|
|||
#dirup {width:4%;}
|
||||
#dirtree {width:92%;}
|
||||
#filelist {height:270px; overflow-y:auto; background-color:white; width:100%;}
|
||||
#filelist img { margin: 2px 1em 0 4px; }
|
||||
#filelist .date { float:right;margin-right:1em; }
|
||||
.filepicker_element_selected { background-color:lightblue;}
|
||||
.filepicker_loader {height:170px; width:100%; background-color:#333; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter:alpha(opacity=30); opacity:.3; visibility:visible; position:absolute; top:0; left:0; text-align:center; padding-top:150px;}
|
||||
.ui-dialog {position:fixed !important;}
|
||||
span.ui-icon {float: left; margin: 3px 7px 30px 0;}
|
||||
.loading { background: url('../img/loading.gif') no-repeat center; cursor: wait; }
|
||||
|
||||
/* ---- CATEGORIES ---- */
|
||||
#categoryform .scrollarea { position:absolute; left:10px; top:10px; right:10px; bottom:50px; overflow:auto; border:1px solid #ddd; background:#f8f8f8; }
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/**
|
||||
* ownCloud
|
||||
*
|
||||
* @author Bartek Przybylski
|
||||
* @author Bartek Przybylski,Christopher Schäpers, Thomas Tanghus
|
||||
* @copyright 2012 Bartek Przybylski bartek@alefzero.eu
|
||||
*
|
||||
* This library is free software; you can redistribute it and/or
|
||||
|
|
@ -31,8 +31,7 @@ var OCdialogs = {
|
|||
* @param modal make the dialog modal
|
||||
*/
|
||||
alert:function(text, title, callback, modal) {
|
||||
var content = '<p><span class="ui-icon ui-icon-alert"></span>' + escapeHTML(text) + '</p>';
|
||||
OCdialogs.message(content, title, OCdialogs.ALERT_DIALOG, OCdialogs.OK_BUTTON, callback, modal);
|
||||
OCdialogs.message(text, title, 'alert', OCdialogs.OK_BUTTON, callback, modal);
|
||||
},
|
||||
/**
|
||||
* displays info dialog
|
||||
|
|
@ -42,8 +41,7 @@ var OCdialogs = {
|
|||
* @param modal make the dialog modal
|
||||
*/
|
||||
info:function(text, title, callback, modal) {
|
||||
var content = '<p><span class="ui-icon ui-icon-info"></span>' + escapeHTML(text) + '</p>';
|
||||
OCdialogs.message(content, title, OCdialogs.ALERT_DIALOG, OCdialogs.OK_BUTTON, callback, modal);
|
||||
OCdialogs.message(text, title, 'info', OCdialogs.OK_BUTTON, callback, modal);
|
||||
},
|
||||
/**
|
||||
* displays confirmation dialog
|
||||
|
|
@ -53,8 +51,7 @@ var OCdialogs = {
|
|||
* @param modal make the dialog modal
|
||||
*/
|
||||
confirm:function(text, title, callback, modal) {
|
||||
var content = '<p><span class="ui-icon ui-icon-notice"></span>' + escapeHTML(text) + '</p>';
|
||||
OCdialogs.message(content, title, OCdialogs.ALERT_DIALOG, OCdialogs.YES_NO_BUTTONS, callback, modal);
|
||||
OCdialogs.message(text, title, 'notice', OCdialogs.YES_NO_BUTTONS, callback, modal);
|
||||
},
|
||||
/**
|
||||
* prompt for user input
|
||||
|
|
@ -66,7 +63,7 @@ var OCdialogs = {
|
|||
prompt:function(text, title, default_value, callback, modal) {
|
||||
var input = '<input type="text" id="oc-dialog-prompt-input" value="' + escapeHTML(default_value) + '" style="width:90%">';
|
||||
var content = '<p><span class="ui-icon ui-icon-pencil"></span>' + escapeHTML(text) + ':<br/>' + input + '</p>';
|
||||
OCdialogs.message(content, title, OCdialogs.PROMPT_DIALOG, OCdialogs.OK_BUTTON, callback, modal);
|
||||
OCdialogs.message(content, title, 'prompt', OCdialogs.OK_BUTTON, callback, modal);
|
||||
},
|
||||
/**
|
||||
* prompt user for input with custom form
|
||||
|
|
@ -130,6 +127,39 @@ var OCdialogs = {
|
|||
});
|
||||
OCdialogs.dialogs_counter++;
|
||||
},
|
||||
_getFilePickerTemplate: function() {
|
||||
var defer = $.Deferred();
|
||||
if(!this.$filePickerTemplate) {
|
||||
var self = this;
|
||||
$.get(OC.filePath('core', 'templates', 'filepicker.html'), function(tmpl) {
|
||||
self.$filePickerTemplate = $(tmpl);
|
||||
self.$listTmpl = self.$filePickerTemplate.find('#filelist li:first-child').detach();
|
||||
defer.resolve(self.$filePickerTemplate);
|
||||
})
|
||||
.fail(function() {
|
||||
defer.reject();
|
||||
});
|
||||
} else {
|
||||
defer.resolve(this.$filePickerTemplate);
|
||||
}
|
||||
return defer.promise();
|
||||
},
|
||||
_getMessageTemplate: function() {
|
||||
var defer = $.Deferred();
|
||||
if(!this.$messageTemplate) {
|
||||
var self = this;
|
||||
$.get(OC.filePath('core', 'templates', 'message.html'), function(tmpl) {
|
||||
self.$messageTemplate = $(tmpl);
|
||||
defer.resolve(self.$messageTemplate);
|
||||
})
|
||||
.fail(function() {
|
||||
defer.reject();
|
||||
});
|
||||
} else {
|
||||
defer.resolve(this.$messageTemplate);
|
||||
}
|
||||
return defer.promise();
|
||||
},
|
||||
/**
|
||||
* show a file picker to pick a file from
|
||||
* @param title dialog title
|
||||
|
|
@ -139,28 +169,34 @@ var OCdialogs = {
|
|||
* @param modal make the dialog modal
|
||||
*/
|
||||
filepicker:function(title, callback, multiselect, mimetype_filter, modal) {
|
||||
$.when(this._getFilePickerTemplate()).then(function($tmpl) {
|
||||
var dialog_name = 'oc-dialog-' + OCdialogs.dialogs_counter + '-content';
|
||||
var dialog_id = '#' + dialog_name;
|
||||
var dialog_content = '<button id="dirup">↑</button><select id="dirtree"></select><div id="filelist"></div>';
|
||||
var dialog_loader = '<div class="filepicker_loader"><img src="' + OC.filePath('gallery','img','loading.gif') + '"></div>';
|
||||
var dialog_div = '<div id="' + dialog_name + '" title="' + escapeHTML(title) + '">' + dialog_content + dialog_loader + '</div>';
|
||||
var $dlg = $tmpl.octemplate({
|
||||
dialog_name: dialog_name,
|
||||
title: title
|
||||
}).data('path', '/');
|
||||
|
||||
if (modal === undefined) { modal = false };
|
||||
if (multiselect === undefined) { multiselect = false };
|
||||
if (mimetype_filter === undefined) { mimetype_filter = '' };
|
||||
|
||||
$('body').append(dialog_div);
|
||||
$('body').append($dlg);
|
||||
|
||||
$(dialog_id).data('path', '/');
|
||||
$dlg.find('#dirtree').focus().change( {dcid: dialog_id}, OCdialogs.handleTreeListSelect );
|
||||
$dlg.find('#dirup').click( {dcid: dialog_id}, OCdialogs.filepickerDirUp );
|
||||
|
||||
$(dialog_id + ' #dirtree').focus().change( {dcid: dialog_id}, OCdialogs.handleTreeListSelect );
|
||||
$(dialog_id + ' #dirup').click( {dcid: dialog_id}, OCdialogs.filepickerDirUp );
|
||||
|
||||
$(dialog_id).ready(function(){
|
||||
$.getJSON(OC.filePath('files', 'ajax', 'rawlist.php'), { mimetype: mimetype_filter } ,function(request) {
|
||||
OCdialogs.fillFilePicker(request, dialog_id);
|
||||
$dlg.find('#filelist').empty().addClass('loading');
|
||||
$dlg.ready(function(){
|
||||
$.getJSON(OC.filePath('files', 'ajax', 'rawlist.php'),
|
||||
{mimetype: mimetype_filter},
|
||||
function(response) {
|
||||
OCdialogs.fillFilePicker(response, dialog_id);
|
||||
});
|
||||
$.getJSON(OC.filePath('files', 'ajax', 'rawlist.php'), { mimetype: "httpd/unix-directory" }, function(request) {
|
||||
OCdialogs.fillTreeList(request, dialog_id);
|
||||
$.getJSON(OC.filePath('files', 'ajax', 'rawlist.php'),
|
||||
{mimetype: 'httpd/unix-directory'},
|
||||
function(response) {
|
||||
OCdialogs.fillTreeList(response, dialog_id);
|
||||
});
|
||||
}).data('multiselect', multiselect).data('mimetype',mimetype_filter);
|
||||
|
||||
|
|
@ -197,17 +233,27 @@ var OCdialogs = {
|
|||
buttons: buttonlist
|
||||
});
|
||||
OCdialogs.dialogs_counter++;
|
||||
})
|
||||
.fail(function() {
|
||||
alert(t('core', 'Error loading file picker template'));
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Displays raw dialog
|
||||
* You better use a wrapper instead ...
|
||||
*/
|
||||
message:function(content, title, dialog_type, buttons, callback, modal) {
|
||||
$.when(this._getMessageTemplate()).then(function($tmpl) {
|
||||
var dialog_name = 'oc-dialog-' + OCdialogs.dialogs_counter + '-content';
|
||||
var dialog_id = '#' + dialog_name;
|
||||
var dialog_div = '<div id="' + dialog_name + '" title="' + escapeHTML(title) + '">' + content + '</div>';
|
||||
var $dlg = $tmpl.octemplate({
|
||||
dialog_name: dialog_name,
|
||||
title: title,
|
||||
message: content,
|
||||
type: dialog_type
|
||||
});
|
||||
if (modal === undefined) { modal = false };
|
||||
$('body').append(dialog_div);
|
||||
$('body').append($dlg);
|
||||
var buttonlist = [];
|
||||
switch (buttons) {
|
||||
case OCdialogs.YES_NO_BUTTONS:
|
||||
|
|
@ -229,19 +275,19 @@ var OCdialogs = {
|
|||
case OCdialogs.OK_BUTTON:
|
||||
var functionToCall;
|
||||
switch(dialog_type) {
|
||||
case OCdialogs.ALERT_DIALOG:
|
||||
functionToCall = function() {
|
||||
$(dialog_id).dialog('close');
|
||||
if(callback !== undefined) { callback() };
|
||||
};
|
||||
break;
|
||||
case OCdialogs.PROMPT_DIALOG:
|
||||
case 'prompt':
|
||||
buttonlist[1] = {
|
||||
text: t('core', 'Cancel'),
|
||||
click: function() { $(dialog_id).dialog('close'); }
|
||||
};
|
||||
functionToCall = function() { OCdialogs.prompt_ok_handler(callback, dialog_id); };
|
||||
break;
|
||||
default:
|
||||
functionToCall = function() {
|
||||
$(dialog_id).dialog('close');
|
||||
if(callback !== undefined) { callback() };
|
||||
};
|
||||
break;
|
||||
}
|
||||
buttonlist[0] = {
|
||||
text: t('core', 'Ok'),
|
||||
|
|
@ -251,20 +297,18 @@ var OCdialogs = {
|
|||
};
|
||||
|
||||
$(dialog_id).dialog({
|
||||
width: (4/9) * $(document).width(),
|
||||
height: 180,
|
||||
modal: modal,
|
||||
buttons: buttonlist
|
||||
});
|
||||
OCdialogs.dialogs_counter++;
|
||||
})
|
||||
.fail(function() {
|
||||
alert(t('core', 'Error loading file picker template'));
|
||||
});
|
||||
},
|
||||
// dialog button types
|
||||
YES_NO_BUTTONS: 70,
|
||||
OK_BUTTONS: 71,
|
||||
// dialogs types
|
||||
ALERT_DIALOG: 80,
|
||||
INFO_DIALOG: 81,
|
||||
FORM_DIALOG: 82,
|
||||
// used to name each dialog
|
||||
dialogs_counter: 0,
|
||||
|
||||
|
|
@ -278,7 +322,7 @@ var OCdialogs = {
|
|||
|
||||
prompt_ok_handler: function(callback, dialog_id) {
|
||||
$(dialog_id).dialog('close');
|
||||
if (callback !== undefined) { callback($(dialog_id + " input#oc-dialog-prompt-input").val()) };
|
||||
if (callback !== undefined) { callback($(dialog_id + ' input#oc-dialog-prompt-input').val()) };
|
||||
},
|
||||
|
||||
form_ok_handler: function(callback, dialog_id) {
|
||||
|
|
@ -297,8 +341,7 @@ var OCdialogs = {
|
|||
* fills the filepicker with files
|
||||
*/
|
||||
fillFilePicker:function(request, dialog_content_id) {
|
||||
var template_content = '<img src="*MIMETYPEICON*" style="margin: 2px 1em 0 4px;"><span class="filename">*NAME*</span><div style="float:right;margin-right:1em;">*LASTMODDATE*</div>';
|
||||
var template = '<div data-entryname="*ENTRYNAME*" data-dcid="' + escapeHTML(dialog_content_id) + '" data="*ENTRYTYPE*">*CONTENT*</div>';
|
||||
var $filelist = $(dialog_content_id + ' #filelist').empty();
|
||||
var files = '';
|
||||
var dirs = [];
|
||||
var others = [];
|
||||
|
|
@ -309,14 +352,24 @@ var OCdialogs = {
|
|||
others.push(file);
|
||||
}
|
||||
});
|
||||
var sorted = dirs.concat(others);
|
||||
for (var i = 0; i < sorted.length; i++) {
|
||||
files_content = template_content.replace('*LASTMODDATE*', OC.mtime2date(sorted[i].mtime)).replace('*NAME*', escapeHTML(sorted[i].name)).replace('*MIMETYPEICON*', sorted[i].mimetype_icon);
|
||||
files += template.replace('*ENTRYNAME*', escapeHTML(sorted[i].name)).replace('*ENTRYTYPE*', escapeHTML(sorted[i].type)).replace('*CONTENT*', files_content);
|
||||
}
|
||||
|
||||
$(dialog_content_id + ' #filelist').html(files);
|
||||
$('#filelist div').click(function() {
|
||||
var sorted = dirs.concat(others);
|
||||
|
||||
var self = this;
|
||||
$.each(sorted, function(idx, entry) {
|
||||
$li = self.$listTmpl.octemplate({
|
||||
type: entry.type,
|
||||
dcid: dialog_content_id,
|
||||
imgsrc: entry.mimetype_icon,
|
||||
filename: entry.name,
|
||||
date: OC.mtime2date(entry.mtime)
|
||||
});
|
||||
$filelist.append($li);
|
||||
});
|
||||
|
||||
$filelist.removeClass('loading');
|
||||
|
||||
$filelist.on('click', 'li', function() {
|
||||
OCdialogs.handlePickerClick($(this), $(this).data('entryname'), dialog_content_id);
|
||||
});
|
||||
|
||||
|
|
@ -326,24 +379,29 @@ var OCdialogs = {
|
|||
* fills the tree list with directories
|
||||
*/
|
||||
fillTreeList: function(request, dialog_id) {
|
||||
var template = '<option value="*COUNT*">*NAME*</option>';
|
||||
var paths = '<option value="0">' + escapeHTML($(dialog_id).data('path')) + '</option>';
|
||||
var $dirtree = $(dialog_id + ' #dirtree').empty();
|
||||
var $template = $('<option value="{count}">{name}</option>');
|
||||
$dirtree.append($template.octemplate({
|
||||
count: 0,
|
||||
name: $(dialog_id).data('path')
|
||||
}));
|
||||
$.each(request.data, function(index, file) {
|
||||
paths += template.replace('*COUNT*', index).replace('*NAME*', escapeHTML(file.name));
|
||||
$dirtree.append($template.octemplate({
|
||||
count: index,
|
||||
name: file.name
|
||||
}));
|
||||
});
|
||||
|
||||
$(dialog_id + ' #dirtree').html(paths);
|
||||
},
|
||||
/**
|
||||
* handle selection made in the tree list
|
||||
*/
|
||||
handleTreeListSelect:function(event) {
|
||||
if ($("option:selected", this).html().indexOf('/') !== -1) { // if there's a slash in the selected path, don't append it
|
||||
$(event.data.dcid).data('path', $("option:selected", this).html());
|
||||
if ($('option:selected', this).html().indexOf('/') !== -1) { // if there's a slash in the selected path, don't append it
|
||||
$(event.data.dcid).data('path', $('option:selected', this).html());
|
||||
} else {
|
||||
$(event.data.dcid).data('path', $(event.data.dcid).data('path') + $("option:selected", this).html() + '/');
|
||||
$(event.data.dcid).data('path', $(event.data.dcid).data('path') + $('option:selected', this).html() + '/');
|
||||
}
|
||||
$(event.data.dcid + ' .filepicker_loader').css('visibility', 'visible');
|
||||
$(event.data.dcid).find('#filelist').addClass('loading');
|
||||
$.getJSON(
|
||||
OC.filePath('files', 'ajax', 'rawlist.php'),
|
||||
{
|
||||
|
|
@ -356,7 +414,7 @@ var OCdialogs = {
|
|||
OC.filePath('files', 'ajax', 'rawlist.php'),
|
||||
{
|
||||
dir: $(event.data.dcid).data('path'),
|
||||
mimetype: "httpd/unix-directory"
|
||||
mimetype: 'httpd/unix-directory'
|
||||
},
|
||||
function(request) { OCdialogs.fillTreeList(request, event.data.dcid) }
|
||||
);
|
||||
|
|
@ -366,13 +424,13 @@ var OCdialogs = {
|
|||
*/
|
||||
filepickerDirUp:function(event) {
|
||||
var old_path = $(event.data.dcid).data('path');
|
||||
if ( old_path !== "/") {
|
||||
if ( old_path !== '/') {
|
||||
var splitted_path = old_path.split("/");
|
||||
var new_path = ""
|
||||
for (var i = 0; i < splitted_path.length - 2; i++) {
|
||||
new_path += splitted_path[i] + "/"
|
||||
new_path += splitted_path[i] + '/'
|
||||
}
|
||||
$(event.data.dcid).data('path', new_path);
|
||||
$(event.data.dcid).data('path', new_path).find('#filelist').empty().addClass('loading');;
|
||||
$.getJSON(
|
||||
OC.filePath('files', 'ajax', 'rawlist.php'),
|
||||
{
|
||||
|
|
@ -385,7 +443,7 @@ var OCdialogs = {
|
|||
OC.filePath('files', 'ajax', 'rawlist.php'),
|
||||
{
|
||||
dir: $(event.data.dcid).data('path'),
|
||||
mimetype: "httpd/unix-directory"
|
||||
mimetype: 'httpd/unix-directory'
|
||||
},
|
||||
function(request) { OCdialogs.fillTreeList(request, event.data.dcid) }
|
||||
);
|
||||
|
|
@ -395,16 +453,16 @@ var OCdialogs = {
|
|||
* handle clicks made in the filepicker
|
||||
*/
|
||||
handlePickerClick:function(element, name, dialog_content_id) {
|
||||
if ( $(element).attr('data') === 'file' ){
|
||||
if ( $(element).data('type') === 'file' ){
|
||||
if ( $(dialog_content_id).data('multiselect') !== true) {
|
||||
$(dialog_content_id + ' .filepicker_element_selected').removeClass('filepicker_element_selected');
|
||||
}
|
||||
$(element).toggleClass('filepicker_element_selected');
|
||||
return;
|
||||
} else if ( $(element).attr('data') === 'dir' ) {
|
||||
} else if ( $(element).data('type') === 'dir' ) {
|
||||
var datapath = escapeHTML( $(dialog_content_id).data('path') + name + '/' );
|
||||
$(dialog_content_id).data('path', datapath);
|
||||
$(dialog_content_id + ' .filepicker_loader').css('visibility', 'visible');
|
||||
$(dialog_content_id).find('#filelist').empty().addClass('loading');
|
||||
$.getJSON(
|
||||
OC.filePath('files', 'ajax', 'rawlist.php'),
|
||||
{
|
||||
|
|
@ -417,7 +475,7 @@ var OCdialogs = {
|
|||
OC.filePath('files', 'ajax', 'rawlist.php'),
|
||||
{
|
||||
dir: datapath,
|
||||
mimetype: "httpd/unix-directory"
|
||||
mimetype: 'httpd/unix-directory'
|
||||
},
|
||||
function(request) { OCdialogs.fillTreeList(request, dialog_content_id) }
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
<div id="{dialog_name}" title="{title}">
|
||||
<button id="dirup">↑</button>
|
||||
<select id="dirtree"></select>
|
||||
<ul id="filelist">
|
||||
<li data-entryname="{filename}" data-type="{type}" data-dcid="{dcid}">
|
||||
<img src="{imgsrc}" />
|
||||
<span class="filename">{filename}</span>
|
||||
<span class="date">{date}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<div id="{dialog_name}" title="{title}">
|
||||
<p><span class="ui-icon ui-icon-{type}"></span>{message}</p>
|
||||
</div>
|
||||
|
|
@ -260,6 +260,7 @@ class OC {
|
|||
OC_Util::addScript("jquery-tipsy");
|
||||
OC_Util::addScript("compatibility");
|
||||
OC_Util::addScript("oc-dialogs");
|
||||
OC_Util::addScript("octemplate");
|
||||
OC_Util::addScript("js");
|
||||
OC_Util::addScript("eventsource");
|
||||
OC_Util::addScript("config");
|
||||
|
|
|
|||
Loading…
Reference in New Issue