diff options
| -rw-r--r-- | apps/files/ajax/rawlist.php | 8 | ||||
| -rw-r--r-- | core/css/styles.css | 15 | ||||
| -rw-r--r-- | core/js/oc-dialogs.js | 235 | ||||
| -rw-r--r-- | core/templates/filepicker.html | 8 |
4 files changed, 118 insertions, 148 deletions
diff --git a/apps/files/ajax/rawlist.php b/apps/files/ajax/rawlist.php index 1cd2944483c..f568afad4da 100644 --- a/apps/files/ajax/rawlist.php +++ b/apps/files/ajax/rawlist.php @@ -15,6 +15,14 @@ $mimetype = isset($_GET['mimetype']) ? $_GET['mimetype'] : ''; // make filelist $files = array(); +// If a type other than directory is requested first load them. +if($mimetype && strpos($mimetype, 'httpd/unix-directory') === false) { + foreach( \OC\Files\Filesystem::getDirectoryContent( $dir, 'httpd/unix-directory' ) as $i ) { + $i["date"] = OCP\Util::formatDate($i["mtime"] ); + $i['mimetype_icon'] = $i['type'] == 'dir' ? \mimetype_icon('dir'): \mimetype_icon($i['mimetype']); + $files[] = $i; + } +} foreach( \OC\Files\Filesystem::getDirectoryContent( $dir, $mimetype ) as $i ) { $i["date"] = OCP\Util::formatDate($i["mtime"] ); $i['mimetype_icon'] = $i['type'] == 'dir' ? \mimetype_icon('dir'): \mimetype_icon($i['mimetype']); diff --git a/core/css/styles.css b/core/css/styles.css index ee00196d669..2038417685c 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -382,13 +382,14 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin .ui-datepicker-prev,.ui-datepicker-next{ border:1px solid #ddd; background:#fff; } /* ---- DIALOGS ---- */ -#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;} +#oc-dialog-filepicker-content .dirup {width:4%; font-weight: bold;} +#oc-dialog-filepicker-content .dirtree {width:92%; overflow:hidden; font-weight: bold; } +#oc-dialog-filepicker-content .dirtree span { cursor: pointer; } +#oc-dialog-filepicker-content .dirtree span:not(last-child)::after { content: '>'; padding: 3px;} +#oc-dialog-filepicker-content .filelist {height:270px; overflow-y:auto; background-color:white; width:100%;} +#oc-dialog-filepicker-content .filelist img { margin: 2px 1em 0 4px; } +#oc-dialog-filepicker-content .filelist .date { float:right;margin-right:1em; } +#oc-dialog-filepicker-content .filepicker_element_selected { background-color:lightblue;} .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; } diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js index 89897382878..4da9623c0a7 100644 --- a/core/js/oc-dialogs.js +++ b/core/js/oc-dialogs.js @@ -133,7 +133,7 @@ var OCdialogs = { 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(); + self.$listTmpl = self.$filePickerTemplate.find('.filelist li:first-child').detach(); defer.resolve(self.$filePickerTemplate); }) .fail(function() { @@ -160,6 +160,12 @@ var OCdialogs = { } return defer.promise(); }, + _getFileList: function(dir, mimeType) { + return $.getJSON( + OC.filePath('files', 'ajax', 'rawlist.php'), + {dir: dir, mimetype: mimeType} + ); + }, /** * show a file picker to pick a file from * @param title dialog title @@ -169,35 +175,35 @@ var OCdialogs = { * @param modal make the dialog modal */ filepicker:function(title, callback, multiselect, mimetype_filter, modal) { + var self = this; $.when(this._getFilePickerTemplate()).then(function($tmpl) { - var dialog_name = 'oc-dialog-' + OCdialogs.dialogs_counter + '-content'; + var dialog_name = 'oc-dialog-filepicker-content'; var dialog_id = '#' + dialog_name; - var $dlg = $tmpl.octemplate({ + if(self.$filePicker) { + self.$filePicker.dialog('close'); + } + self.$filePicker = $tmpl.octemplate({ dialog_name: dialog_name, title: title - }).data('path', '/'); + }).data('path', ''); if (modal === undefined) { modal = false }; if (multiselect === undefined) { multiselect = false }; if (mimetype_filter === undefined) { mimetype_filter = '' }; - $('body').append($dlg); + $('body').append(self.$filePicker); - $dlg.find('#dirtree').focus().change( {dcid: dialog_id}, OCdialogs.handleTreeListSelect ); - $dlg.find('#dirup').click( {dcid: dialog_id}, OCdialogs.filepickerDirUp ); - $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(response) { - OCdialogs.fillTreeList(response, dialog_id); + self.$filePicker.ready(function() { + self.$filelist = self.$filePicker.find('.filelist'); + self.$dirUp = self.$filePicker.find('.dirup'); + self.$dirTree = self.$filePicker.find('.dirtree'); + self.$dirTree.on('click', 'span', self, self.handleTreeListSelect); + self.$dirUp.click(self, self.filepickerDirUp); + self.$filelist.on('click', 'li', function(event) { + self.handlePickerClick(event, $(this)); }); + self.fillFilePicker(''); }).data('multiselect', multiselect).data('mimetype',mimetype_filter); // build buttons @@ -206,15 +212,15 @@ var OCdialogs = { var datapath; if (multiselect === true) { datapath = []; - $(dialog_id + ' .filepicker_element_selected .filename').each(function(index, element) { - datapath.push( $(dialog_id).data('path') + $(element).text() ); + self.$filelist.find('.filepicker_element_selected .filename').each(function(index, element) { + datapath.push(self.$filePicker.data('path') + '/' + $(element).text()); }); } else { - var datapath = $(dialog_id).data('path'); - datapath += $(dialog_id+' .filepicker_element_selected .filename').text(); + var datapath = self.$filePicker.data('path'); + datapath += '/' + self.$filelist.find('.filepicker_element_selected .filename').text(); } callback(datapath); - $(dialog_id).dialog('close'); + self.$filePicker.dialog('close'); } }; var buttonlist = [{ @@ -223,16 +229,19 @@ var OCdialogs = { }, { text: t('core', 'Cancel'), - click: function(){$(dialog_id).dialog('close'); } + click: function(){self.$filePicker.dialog('close'); } }]; - $(dialog_id).dialog({ + self.$filePicker.dialog({ width: (4/9)*$(document).width(), height: 420, modal: modal, - buttons: buttonlist + buttons: buttonlist, + close: function(event, ui) { + self.$filePicker.dialog('destroy').remove(); + self.$filePicker = null; + } }); - OCdialogs.dialogs_counter++; }) .fail(function() { alert(t('core', 'Error loading file picker template')); @@ -340,146 +349,98 @@ var OCdialogs = { /** * fills the filepicker with files */ - fillFilePicker:function(request, dialog_content_id) { - var $filelist = $(dialog_content_id + ' #filelist').empty(); - var files = ''; + fillFilePicker:function(dir) { var dirs = []; var others = []; - $.each(request.data, function(index, file) { - if (file.type === 'dir') { - dirs.push(file); - } else { - others.push(file); - } - }); - - 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) + this.$filelist.empty().addClass('loading'); + this.$filePicker.data('path', dir); + $.when(this._getFileList(dir, this.$filePicker.data('mimetype'))).then(function(response) { + $.each(response.data, function(index, file) { + if (file.type === 'dir') { + dirs.push(file); + } else { + others.push(file); + } }); - $filelist.append($li); - }); - $filelist.removeClass('loading'); + self.fillTreeList(); + var sorted = dirs.concat(others); - $filelist.on('click', 'li', function() { - OCdialogs.handlePickerClick($(this), $(this).data('entryname'), dialog_content_id); - }); + $.each(sorted, function(idx, entry) { + $li = self.$listTmpl.octemplate({ + type: entry.type, + dir: dir, + imgsrc: entry.mimetype_icon, + filename: entry.name, + date: OC.mtime2date(entry.mtime) + }); + self.$filelist.append($li); + }); - $(dialog_content_id + ' .filepicker_loader').css('visibility', 'hidden'); + self.$filelist.removeClass('loading'); + }); }, /** * fills the tree list with directories */ - fillTreeList: function(request, dialog_id) { - 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) { - $dirtree.append($template.octemplate({ - count: index, - name: file.name + fillTreeList: function() { + this.$dirTree.empty(); + var self = this + var path = this.$filePicker.data('path'); + if(!path) { + return; + } + var $template = $('<span data-dir="{dir}">{name}</span>'); + var paths = path.split('/'); + paths.pop(); + $.each(paths, function(index, dir) { + var dir = paths.pop(); + if(dir === '') { + return false; + } + self.$dirTree.prepend($template.octemplate({ + dir: paths.join('/') + '/' + dir, + name: dir })); }); + self.$dirTree.prepend($template.octemplate({ + dir: '', + name: '/' + })); }, /** * handle selection made in the tree list */ handleTreeListSelect:function(event) { - // if there's a slash in the selected path, don't append it - if ($('option:selected', this).html().indexOf('/') !== -1) { - $(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).find('#filelist').addClass('loading'); - $.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) } - ); + var self = event.data; + var dir = $(event.target).data('dir'); + self.fillFilePicker(dir); }, /** * 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).find('#filelist').empty().addClass('loading');; - $.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) } - ); + var self = event.data; + var old_path = self.$filePicker.data('path'); + if (old_path !== '') { + var splitted_path = old_path.split('/'); + splitted_path.pop(); + self.fillFilePicker(splitted_path.join('/')); } }, /** * handle clicks made in the filepicker */ - handlePickerClick:function(element, name, dialog_content_id) { - if ( $(element).data('type') === 'file' ){ - if ( $(dialog_content_id).data('multiselect') !== true) { - $(dialog_content_id + ' .filepicker_element_selected').removeClass('filepicker_element_selected'); + handlePickerClick:function(event, $element) { + if ($element.data('type') === 'file') { + if (this.$filePicker.data('multiselect') !== true || !event.ctrlKey) { + this.$filelist.find('.filepicker_element_selected').removeClass('filepicker_element_selected'); } - $(element).toggleClass('filepicker_element_selected'); + $element.toggleClass('filepicker_element_selected'); return; - } else if ( $(element).data('type') === 'dir' ) { - var datapath = escapeHTML( $(dialog_content_id).data('path') + name + '/' ); - $(dialog_content_id).data('path', datapath); - $(dialog_content_id).find('#filelist').empty().addClass('loading'); - $.getJSON( - OC.filePath('files', 'ajax', 'rawlist.php'), - { - dir: datapath, - mimetype: $(dialog_content_id).data('mimetype') - }, - function(request){ OCdialogs.fillFilePicker(request, dialog_content_id) } - ); - $.getJSON( - OC.filePath('files', 'ajax', 'rawlist.php'), - { - dir: datapath, - mimetype: 'httpd/unix-directory' - }, - function(request) { OCdialogs.fillTreeList(request, dialog_content_id) } - ); + } else if ( $element.data('type') === 'dir' ) { + this.fillFilePicker(this.$filePicker.data('path') + '/' + $element.data('entryname')) } } }; diff --git a/core/templates/filepicker.html b/core/templates/filepicker.html index f29de390ef8..e7aa77a732a 100644 --- a/core/templates/filepicker.html +++ b/core/templates/filepicker.html @@ -1,8 +1,8 @@ <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}"> + <button class="dirup">↑</button> + <span class="dirtree"></span> + <ul class="filelist"> + <li data-entryname="{filename}" data-type="{type}"> <img src="{imgsrc}" /> <span class="filename">{filename}</span> <span class="date">{date}</span> |