From 0be80abe70d761331fa1c1caf3b45b804689d8a8 Mon Sep 17 00:00:00 2001 From: kondou Date: Sat, 6 Apr 2013 10:07:12 +0200 Subject: [PATCH] Refactor OCdialogs. Fix #2557 and make the whole code more usable. --- core/css/styles.css | 8 +- core/js/oc-dialogs.js | 454 +++++++++++++++++++++++++++--------------- 2 files changed, 299 insertions(+), 163 deletions(-) diff --git a/core/css/styles.css b/core/css/styles.css index 839f25cef4..9111cc7b64 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -327,11 +327,13 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin .ui-datepicker-prev,.ui-datepicker-next{ border:1px solid #ddd; background:#ffffff; } /* ---- DIALOGS ---- */ -#dirtree {width:100%;} +#dirup {width:4%;} +#dirtree {width:93%;} #filelist {height:270px; overflow:scroll; background-color:white; width:100%;} .filepicker_element_selected { background-color:lightblue;} -.filepicker_loader {height:120px; 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;} - +.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;} /* ---- CATEGORIES ---- */ #categoryform .scrollarea { position:absolute; left:10px; top:10px; right:10px; bottom:50px; overflow:auto; border:1px solid #ddd; background:#f8f8f8; } diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js index cfbca2833c..423602d777 100644 --- a/core/js/oc-dialogs.js +++ b/core/js/oc-dialogs.js @@ -27,75 +27,78 @@ var OCdialogs = { * displays alert dialog * @param text content of dialog * @param title dialog title - * @param callback which will be triggered when user press OK + * @param callback which will be triggered when user presses OK + * @param modal make the dialog modal */ alert:function(text, title, callback, modal) { - var content = '

'+text+'

'; + var content = '

' + text + '

'; OCdialogs.message(content, title, OCdialogs.ALERT_DIALOG, OCdialogs.OK_BUTTON, callback, modal); }, /** * displays info dialog * @param text content of dialog * @param title dialog title - * @param callback which will be triggered when user press OK + * @param callback which will be triggered when user presses OK + * @param modal make the dialog modal */ info:function(text, title, callback, modal) { - var content = '

'+text+'

'; + var content = '

' + text + '

'; OCdialogs.message(content, title, OCdialogs.ALERT_DIALOG, OCdialogs.OK_BUTTON, callback, modal); }, /** * displays confirmation dialog * @param text content of dialog * @param title dialog title - * @param callback which will be triggered when user press YES or NO (true or false would be passed to callback respectively) + * @param callback which will be triggered when user presses YES or NO (true or false would be passed to callback respectively) + * @param modal make the dialog modal */ confirm:function(text, title, callback, modal) { - var content = '

'+text+'

'; + var content = '

' + text + '

'; OCdialogs.message(content, title, OCdialogs.ALERT_DIALOG, OCdialogs.YES_NO_BUTTONS, callback, modal); }, /** * prompt for user input * @param text content of dialog * @param title dialog title - * @param callback which will be triggered when user press OK (input text will be passed to callback) + * @param callback which will be triggered when user presses OK (input text will be passed to callback) + * @param modal make the dialog modal */ prompt:function(text, title, default_value, callback, modal) { - var content = '

'+text+':

'; - OCdialogs.message(content, title, OCdialogs.PROMPT_DIALOG, OCdialogs.OK_CANCEL_BUTTONS, callback, modal); + var content = '

' + text + ':

'; + OCdialogs.message(content, title, OCdialogs.PROMPT_DIALOG, OCdialogs.OK_BUTTON, callback, modal); }, /** * prompt user for input with custom form - * fields should be passed in following format: [{text:'prompt text', name:'return name', type:'input type', value: 'dafault value'},...] - * select example var fields=[{text:'Test', name:'test', type:'select', options:[{text:'hallo',value:1},{text:'hallo1',value:2}] }]; + * fields should be passed in following format: [{text:'prompt text', name:'return name', type:'input type', value: 'default value'},...] + * example: + * var fields=[{text:'Test', name:'test', type:'select', options:[{text:'hello1',value:1},{text:'hello2',value:2}] }]; * @param fields to display * @param title dialog title - * @param callback which will be triggered when user press OK (user answers will be passed to callback in following format: [{name:'return name', value: 'user value'},...]) + * @param callback which will be triggered when user presses OK (user answers will be passed to callback in following format: [{name:'return name', value: 'user value'},...]) + * @param modal make the dialog modal */ form:function(fields, title, callback, modal) { var content = ''; - $.each(fields, function(index, val){ - content += '
'+val.text+''; - var type=val.type; + $.each(fields, function(index, field){ + content += '
' + field.text + ''; + var type = field.type; - if (type == 'text' || type == 'checkbox' || type == 'password') { - content += ''; - } - } else if (type == 'select') { - content += '' + field_option.text + ''; }); content += ''; } @@ -103,168 +106,299 @@ var OCdialogs = { }); content += '
'; - OCdialogs.message(content, title, OCdialogs.FORM_DIALOG, OCdialogs.OK_CANCEL_BUTTONS, callback, modal); - }, - filepicker:function(title, callback, multiselect, mimetype_filter, modal) { - var c_name = 'oc-dialog-'+OCdialogs.dialogs_counter+'-content'; - var c_id = '#'+c_name; - var d = '
'; - if (!modal) modal = false; // Huh.. - if (!multiselect) multiselect = false; - $('body').append(d); - $(c_id + ' #dirtree').focus(function() { - var t = $(this); - t.data('oldval', t.val()) - }).change({dcid: c_id}, OC.dialogs.handleTreeListSelect); - $(c_id).ready(function(){ - $.getJSON(OC.filePath('files', 'ajax', 'rawlist.php'), {mimetype: mimetype_filter} ,function(r) { - OC.dialogs.fillFilePicker(r, c_id, callback) - }); - }).data('multiselect', multiselect).data('mimetype',mimetype_filter); - // build buttons - var b = [{ - text: t('core', 'Choose'), - click: function(){ - if (callback != undefined) { - var p; - if ($(c_id).data('multiselect') == true) { - p = []; - $(c_id+' .filepicker_element_selected .filename').each(function(i, elem) { - p.push(($(c_id).data('path')?$(c_id).data('path'):'')+'/'+$(elem).text()); - }); - } else { - var p = $(c_id).data('path'); - if (p == undefined) p = ''; - p = p+'/'+$(c_id+' .filepicker_element_selected .filename').text() - } - callback(p); - $(c_id).dialog('close'); - } - } + + var dialog_name = 'oc-dialog-' + OCdialogs.dialogs_counter + '-content'; + var dialog_id = '#' + dialog_name; + var dialog_div = '
' + content + '
'; + if (modal === undefined) modal = false; + $('body').append(dialog_div); + var buttonlist = [{ + text: t('core', 'Ok'), + click: function(){ OCdialogs.form_ok_handler(callback, dialog_id); } }, { - text: t('core', 'Cancel'), - click: function(){$(c_id).dialog('close'); }} - ]; - $(c_id).dialog({width: ((4*$('body').width())/9), height: 400, modal: modal, buttons: b}); + text: t('core', 'Cancel'), + click: function(){ $(dialog_id).dialog('close'); } + }]; + var dialog_height = ( $('tr', dialog_div).length + 1 ) * 30 + 120; + $(dialog_id).dialog({ + width: (4/9) * $(document).width(), + height: dialog_height, + modal: modal, + buttons: buttonlist + }); OCdialogs.dialogs_counter++; }, - // guts, dont use, dont touch + /** + * show a file picker to pick a file from + * @param title dialog title + * @param callback which will be triggered when user presses Choose + * @param multiselect whether it should be possible to select multiple files + * @param mimetype_filter mimetype to filter by + * @param modal make the dialog modal + */ + filepicker:function(title, callback, multiselect, mimetype_filter, modal) { + var dialog_name = 'oc-dialog-' + OCdialogs.dialogs_counter + '-content'; + var dialog_id = '#' + dialog_name; + var dialog_div = '
'; + if (modal === undefined) modal = false; + if (multiselect === undefined) multiselect = false; + if (mimetype_filter === undefined) mimetype_filter = ''; + + $('body').append(dialog_div); + + $(dialog_id).data('path', '/'); + + $(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) + }); + $.getJSON(OC.filePath('files', 'ajax', 'rawlist.php'), { mimetype: "httpd/unix-directory" }, function(request) { + OCdialogs.fillTreeList(request, dialog_id) + }); + }).data('multiselect', multiselect).data('mimetype',mimetype_filter); + + // build buttons + var function_to_call = function() { + if (callback !== undefined) { + var datapath; + if (multiselect === true) { + datapath = []; + $(dialog_id + ' .filepicker_element_selected .filename').each(function(index, element) { + datapath.push( $(dialog_id).data('path') + $(elem).text() ); + }); + } else { + var datapath = $(dialog_id).data('path'); + datapath += $(dialog_id+' .filepicker_element_selected .filename').text() + } + callback(datapath); + $(dialog_id).dialog('close'); + } + }; + var buttonlist = [{ + text: t('core', 'Choose'), + click: function_to_call + }, + { + text: t('core', 'Cancel'), + click: function(){$(dialog_id).dialog('close'); } + }]; + + $(dialog_id).dialog({ + width: (4/9)*$(document).width(), + height: 420, + modal: modal, + buttons: buttonlist + }); + OCdialogs.dialogs_counter++; + }, + /** + * Displays raw dialog + * You better use a wrapper instead ... + */ message:function(content, title, dialog_type, buttons, callback, modal) { - var c_name = 'oc-dialog-'+OCdialogs.dialogs_counter+'-content'; - var c_id = '#'+c_name; - var d = '
'+content+'
'; - if (modal == undefined) modal = false; - $('body').append(d); - var b = []; + var dialog_name = 'oc-dialog-' + OCdialogs.dialogs_counter + '-content'; + var dialog_id = '#' + dialog_name; + var dialog_div = '
' + content + '
'; + if (modal === undefined) modal = false; + $('body').append(dialog_div); + var buttonlist = []; switch (buttons) { case OCdialogs.YES_NO_BUTTONS: - b[1] = {text: t('core', 'No'), click: function(){ if (callback != undefined) callback(false); $(c_id).dialog('close'); }}; - b[0] = {text: t('core', 'Yes'), click: function(){ if (callback != undefined) callback(true); $(c_id).dialog('close');}}; + buttonlist = [{ + text: t('core', 'Yes'), + click: function(){ + if (callback !== undefined) callback(true); + $(dialog_id).dialog('close'); + } + }, + { + text: t('core', 'No'), + click: function(){ + if (callback !== undefined) callback(false); + $(dialog_id).dialog('close'); + } + }]; break; - case OCdialogs.OK_CANCEL_BUTTONS: - b[1] = {text: t('core', 'Cancel'), click: function(){$(c_id).dialog('close'); }}; - case OCdialogs.OK_BUTTON: // fallthrough - var f; + case OCdialogs.OK_BUTTON: + var function_to_call; switch(dialog_type) { case OCdialogs.ALERT_DIALOG: - f = function(){$(c_id).dialog('close'); if(callback) callback();}; + function_to_call = function() { + $(dialog_id).dialog('close'); + if(callback !== undefined) callback(); + }; break; case OCdialogs.PROMPT_DIALOG: - f = function(){OCdialogs.prompt_ok_handler(callback, c_id)}; - break; - case OCdialogs.FORM_DIALOG: - f = function(){OCdialogs.form_ok_handler(callback, c_id)}; + buttonlist[1] = { + text: t('core', 'Cancel'), + click: function() { $(dialog_id).dialog('close'); } + }; + function_to_call = function() { OCdialogs.prompt_ok_handler(callback, dialog_id); }; break; } - b[0] = {text: t('core', 'Ok'), click: f}; + buttonlist[0] = { + text: t('core', 'Ok'), + click: function_to_call + }; break; - } - var possible_height = ($('tr', d).size()+1)*30; - $(c_id).dialog({width: 4*$(document).width()/9, height: possible_height + 120, modal: modal, buttons: b}); + }; + + $(dialog_id).dialog({ + width: (4/9) * $(document).width(), + height: 180, + modal: modal, + buttons: buttonlist + }); OCdialogs.dialogs_counter++; }, - // dialogs buttons types - YES_NO_BUTTONS: 70, - OK_BUTTONS: 71, - OK_CANCEL_BUTTONS: 72, + // dialog button types + YES_NO_BUTTONS: 70, + OK_BUTTONS: 71, // dialogs types - ALERT_DIALOG: 80, - INFO_DIALOG: 81, - PROMPT_DIALOG: 82, - FORM_DIALOG: 83, + ALERT_DIALOG: 80, + INFO_DIALOG: 81, + FORM_DIALOG: 82, + // used to name each dialog dialogs_counter: 0, + determineValue: function(element) { - switch ($(element).attr('type')) { - case 'checkbox': return element.checked; - } - return $(element).val(); - }, - prompt_ok_handler: function(callback, c_id) { $(c_id).dialog('close'); if (callback != undefined) callback($(c_id + " input#oc-dialog-prompt-input").val()); }, - form_ok_handler: function(callback, c_id) { - if (callback != undefined) { - var r = []; - var c = 0; - $(c_id + ' input, '+c_id+' select').each(function(i, elem) { - r[c] = {name: $(elem).attr('name'), value: OCdialogs.determineValue(elem)}; - c++; - }); - $(c_id).dialog('close'); - callback(r); + if ( $(element).attr('type') === 'checkbox' ) { + return element.checked; } else { - $(c_id).dialog('close'); + return $(element).val(); } }, - fillFilePicker:function(r, dialog_content_id) { - var entry_template = '
*NAME*
*LASTMODDATE*
'; - var names = ''; - $.each(r.data, function(index, a) { - names += entry_template.replace('*LASTMODDATE*', OC.mtime2date(a.mtime)).replace('*NAME*', a.name).replace('*MIMETYPEICON*', a.mimetype_icon).replace('*ENTRYNAME*', a.name).replace('*ENTRYTYPE*', a.type); + + prompt_ok_handler: function(callback, dialog_id) { + $(dialog_id).dialog('close'); + if (callback !== undefined) callback($(dialog_id + " input#oc-dialog-prompt-input").val()); + }, + + form_ok_handler: function(callback, dialog_id) { + if (callback !== undefined) { + var valuelist = []; + $(dialog_id + ' input, ' + dialog_id + ' select').each(function(index, element) { + valuelist[index] = { name: $(elem).attr('name'), value: OCdialogs.determineValue(elem) }; + }); + $(dialog_id).dialog('close'); + callback(valuelist); + } else { + $(dialog_id).dialog('close'); + } + }, + /** + * fills the filepicker with files + */ + fillFilePicker:function(request, dialog_content_id) { + var template = '
*NAME*
*LASTMODDATE*
'; + var files = ''; + $.each(request.data, function(index, file) { + files += template.replace('*LASTMODDATE*', OC.mtime2date(file.mtime)).replace('*NAME*', file.name).replace('*MIMETYPEICON*', file.mimetype_icon).replace('*ENTRYNAME*', file.name).replace('*ENTRYTYPE*', file.type); }); - $(dialog_content_id + ' #filelist').html(names).on('click', '[data="file"]', function() { - OC.dialogs.handlePickerClick(this, $(this).data('entryname'), $(this).data('dcid')); + $(dialog_content_id + ' #filelist').html(files).on('click', '[data="file"]', function() { + OCdialogs.handlePickerClick(this, $(this).data('entryname'), $(this).data('dcid')); }); $(dialog_content_id + ' .filepicker_loader').css('visibility', 'hidden'); }, - handleTreeListSelect:function(event) { - var newval = parseInt($(this).val()); - var oldval = parseInt($(this).data('oldval')); - while (newval != oldval && oldval > 0) { - $('option:last', this).remove(); - $('option:last', this).attr('selected','selected'); - oldval--; - } - var skip_first = true; - var path = ''; - $(this).children().each(function(i, element) { - if (skip_first) { - skip_first = false; - return; + /** + * fills the tree list with directories + */ + fillTreeList: function(request, dialog_id) { + var template = ''; + var paths = ''; + var count = 1; + $.each(request.data, function(index, file) { + if (file.mimetype === "httpd/unix-directory") { + paths += template.replace('*COUNT*', count).replace('*NAME*', file.name); + count++; } - path += '/'+$(element).text(); }); - $(event.data.dcid).data('path', path); - $(event.data.dcid + ' .filepicker_loader').css('visibility', 'visible'); - $.getJSON(OC.filePath('files', 'ajax', 'rawlist.php'), {dir: path, mimetype: $(event.data.dcid).data('mimetype')}, function(r){OC.dialogs.fillFilePicker(r, event.data.dcid)}); + + $(dialog_id + ' #dirtree').html(paths); }, - // this function is in early development state, please dont use it unlsess you know what you are doing - handlePickerClick:function(element, name, dcid) { - var p = $(dcid).data('path'); - if (p == undefined) p = ''; - p = p+'/'+name; - if ($(element).attr('data') == 'file'){ - if ($(dcid).data('multiselect') != true) { - $(dcid+' .filepicker_element_selected').removeClass('filepicker_element_selected'); + + handleTreeListSelect:function(event) { + // fails at paths with & + 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 + ' .filepicker_loader').css('visibility', 'visible'); + $.getJSON( + OC.filePath('files', 'ajax', 'rawlist.php'), + { + dir: $(event.data.dcid).data('path'), + mimetype: $(event.data.dcid).data('mimetype') + }, + function(request) { OCdialogs.fillFilePicker(request, event.data.dcid) } + ); + $.getJSON( + OC.filePath('files', 'ajax', 'rawlist.php'), + { + dir: $(event.data.dcid).data('path'), + mimetype: "httpd/unix-directory" + }, + function(request) { OCdialogs.fillTreeList(request, event.data.dcid) } + ); + }, + // go one directory up + filepickerDirUp:function(event) { + var old_path = $(event.data.dcid).data('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] + "/" + } + $(event.data.dcid).data('path', new_path); + $.getJSON( + OC.filePath('files', 'ajax', 'rawlist.php'), + { + dir: $(event.data.dcid).data('path'), + mimetype: $(event.data.dcid).data('mimetype') + }, + function(request) { OCdialogs.fillFilePicker(request, event.data.dcid) } + ); + $.getJSON( + OC.filePath('files', 'ajax', 'rawlist.php'), + { + dir: $(event.data.dcid).data('path'), + mimetype: "httpd/unix-directory" + }, + function(request) { OCdialogs.fillTreeList(request, event.data.dcid) } + ); + } + }, + // this function is in early development state, please dont use it unless you know what you are doing + handlePickerClick:function(element, name, dialog_content_id) { + var datapath = $(dialog_content_id).data('path'); + if (datapath === undefined) datapath = ''; + datapath += name; + if ( $(element).attr('data') === 'file' ){ + if ( $(dialog_content_id).data('multiselect') !== true) { + $(dialog_content_id + ' .filepicker_element_selected').removeClass('filepicker_element_selected'); } $(element).toggleClass('filepicker_element_selected'); return; } - $(dcid).data('path', p); - $(dcid + ' #dirtree option:last').removeAttr('selected'); - var newval = parseInt($(dcid + ' #dirtree option:last').val())+1; - $(dcid + ' #dirtree').append(''); - $(dcid + ' .filepicker_loader').css('visibility', 'visible'); - $.getJSON(OC.filePath('files', 'ajax', 'rawlist.php'), {dir: p, mimetype: $(dcid).data('mimetype')}, function(r){OC.dialogs.fillFilePicker(r, dcid)}); + $(dialog_content_id).data('path', datapath); + $(dialog_content_id + ' #dirtree option:last').removeAttr('selected'); + var newval = parseInt($(dialog_content_id + ' #dirtree option:last').val())+1; + $(dialog_content_id + ' #dirtree').append(''); + $(dialog_content_id + ' .filepicker_loader').css('visibility', 'visible'); + $.getJSON( + OC.filePath('files', 'ajax', 'rawlist.php'), + { + dir: datapath, + mimetype: $(dialog_content_id).data('mimetype') + }, + function(request){ OCdialogs.fillFilePicker(request, dialog_content_id) } + ); } };