mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Various cleanups in OC.dialogs

This commit is contained in:
Thomas Tanghus 2013-05-17 04:54:08 +02:00
parent 4a8db293ec
commit 152e275c8a
4 changed files with 120 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/files/ajax/rawlist.php
View File

@ -15,6 +15,14 @@ $mimetype = isset($_GET['mimetype']) ? $_GET['mimetype'] : '';
// make filelist // make filelist
$files = array(); $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 ) { foreach( \OC\Files\Filesystem::getDirectoryContent( $dir, $mimetype ) as $i ) {
$i["date"] = OCP\Util::formatDate($i["mtime"] ); $i["date"] = OCP\Util::formatDate($i["mtime"] );
$i['mimetype_icon'] = $i['type'] == 'dir' ? \mimetype_icon('dir'): \mimetype_icon($i['mimetype']); $i['mimetype_icon'] = $i['type'] == 'dir' ? \mimetype_icon('dir'): \mimetype_icon($i['mimetype']);

15
core/css/styles.css
View File

@ -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; } .ui-datepicker-prev,.ui-datepicker-next{ border:1px solid #ddd; background:#fff; }
/* ---- DIALOGS ---- */ /* ---- DIALOGS ---- */
#dirup {width:4%;} #oc-dialog-filepicker-content .dirup {width:4%; font-weight: bold;}
#dirtree {width:92%;} #oc-dialog-filepicker-content .dirtree {width:92%; overflow:hidden; font-weight: bold; }
#filelist {height:270px; overflow-y:auto; background-color:white; width:100%;} #oc-dialog-filepicker-content .dirtree span { cursor: pointer; }
#filelist img { margin: 2px 1em 0 4px; } #oc-dialog-filepicker-content .dirtree span:not(last-child)::after { content: '>'; padding: 3px;}
#filelist .date { float:right;margin-right:1em; } #oc-dialog-filepicker-content .filelist {height:270px; overflow-y:auto; background-color:white; width:100%;}
.filepicker_element_selected { background-color:lightblue;} #oc-dialog-filepicker-content .filelist img { margin: 2px 1em 0 4px; }
.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 .filelist .date { float:right;margin-right:1em; }
#oc-dialog-filepicker-content .filepicker_element_selected { background-color:lightblue;}
.ui-dialog {position:fixed !important;} .ui-dialog {position:fixed !important;}
span.ui-icon {float: left; margin: 3px 7px 30px 0;} span.ui-icon {float: left; margin: 3px 7px 30px 0;}
.loading { background: url('../img/loading.gif') no-repeat center; cursor: wait; } .loading { background: url('../img/loading.gif') no-repeat center; cursor: wait; }

239
core/js/oc-dialogs.js
View File

@ -133,7 +133,7 @@ var OCdialogs = {
var self = this; var self = this;
$.get(OC.filePath('core', 'templates', 'filepicker.html'), function(tmpl) { $.get(OC.filePath('core', 'templates', 'filepicker.html'), function(tmpl) {
self.$filePickerTemplate = $(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); defer.resolve(self.$filePickerTemplate);
}) })
.fail(function() { .fail(function() {
@ -160,6 +160,12 @@ var OCdialogs = {
} }
return defer.promise(); 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 * show a file picker to pick a file from
* @param title dialog title * @param title dialog title
@ -169,35 +175,35 @@ var OCdialogs = {
* @param modal make the dialog modal * @param modal make the dialog modal
*/ */
filepicker:function(title, callback, multiselect, mimetype_filter, modal) { filepicker:function(title, callback, multiselect, mimetype_filter, modal) {
var self = this;
$.when(this._getFilePickerTemplate()).then(function($tmpl) { $.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 dialog_id = '#' + dialog_name;
var $dlg = $tmpl.octemplate({ if(self.$filePicker) {
self.$filePicker.dialog('close');
}
self.$filePicker = $tmpl.octemplate({
dialog_name: dialog_name, dialog_name: dialog_name,
title: title title: title
}).data('path', '/'); }).data('path', '');
if (modal === undefined) { modal = false }; if (modal === undefined) { modal = false };
if (multiselect === undefined) { multiselect = false }; if (multiselect === undefined) { multiselect = false };
if (mimetype_filter === undefined) { mimetype_filter = '' }; 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'); self.$filePicker.ready(function() {
$dlg.ready(function(){ self.$filelist = self.$filePicker.find('.filelist');
$.getJSON(OC.filePath('files', 'ajax', 'rawlist.php'), self.$dirUp = self.$filePicker.find('.dirup');
{mimetype: mimetype_filter}, self.$dirTree = self.$filePicker.find('.dirtree');
function(response) { self.$dirTree.on('click', 'span', self, self.handleTreeListSelect);
OCdialogs.fillFilePicker(response, dialog_id); self.$dirUp.click(self, self.filepickerDirUp);
}); self.$filelist.on('click', 'li', function(event) {
$.getJSON(OC.filePath('files', 'ajax', 'rawlist.php'), self.handlePickerClick(event, $(this));
{mimetype: 'httpd/unix-directory'},
function(response) {
OCdialogs.fillTreeList(response, dialog_id);
}); });
self.fillFilePicker('');
}).data('multiselect', multiselect).data('mimetype',mimetype_filter); }).data('multiselect', multiselect).data('mimetype',mimetype_filter);
// build buttons // build buttons
@ -206,15 +212,15 @@ var OCdialogs = {
var datapath; var datapath;
if (multiselect === true) { if (multiselect === true) {
datapath = []; datapath = [];
$(dialog_id + ' .filepicker_element_selected .filename').each(function(index, element) { self.$filelist.find('.filepicker_element_selected .filename').each(function(index, element) {
datapath.push( $(dialog_id).data('path') + $(element).text() ); datapath.push(self.$filePicker.data('path') + '/' + $(element).text());
}); });
} else { } else {
var datapath = $(dialog_id).data('path'); var datapath = self.$filePicker.data('path');
datapath += $(dialog_id+' .filepicker_element_selected .filename').text(); datapath += '/' + self.$filelist.find('.filepicker_element_selected .filename').text();
} }
callback(datapath); callback(datapath);
$(dialog_id).dialog('close'); self.$filePicker.dialog('close');
} }
}; };
var buttonlist = [{ var buttonlist = [{
@ -223,16 +229,19 @@ var OCdialogs = {
}, },
{ {
text: t('core', 'Cancel'), 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(), width: (4/9)*$(document).width(),
height: 420, height: 420,
modal: modal, modal: modal,
buttons: buttonlist buttons: buttonlist,
close: function(event, ui) {
self.$filePicker.dialog('destroy').remove();
self.$filePicker = null;
}
}); });
OCdialogs.dialogs_counter++;
}) })
.fail(function() { .fail(function() {
alert(t('core', 'Error loading file picker template')); alert(t('core', 'Error loading file picker template'));
@ -340,146 +349,98 @@ var OCdialogs = {
/** /**
* fills the filepicker with files * fills the filepicker with files
*/ */
fillFilePicker:function(request, dialog_content_id) { fillFilePicker:function(dir) {
var $filelist = $(dialog_content_id + ' #filelist').empty();
var files = '';
var dirs = []; var dirs = [];
var others = []; 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; var self = this;
$.each(sorted, function(idx, entry) { this.$filelist.empty().addClass('loading');
$li = self.$listTmpl.octemplate({ this.$filePicker.data('path', dir);
type: entry.type, $.when(this._getFileList(dir, this.$filePicker.data('mimetype'))).then(function(response) {
dcid: dialog_content_id, $.each(response.data, function(index, file) {
imgsrc: entry.mimetype_icon, if (file.type === 'dir') {
filename: entry.name, dirs.push(file);
date: OC.mtime2date(entry.mtime) } else {
others.push(file);
}
}); });
$filelist.append($li);
self.fillTreeList();
var sorted = dirs.concat(others);
$.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);
});
self.$filelist.removeClass('loading');
}); });
$filelist.removeClass('loading');
$filelist.on('click', 'li', function() {
OCdialogs.handlePickerClick($(this), $(this).data('entryname'), dialog_content_id);
});
$(dialog_content_id + ' .filepicker_loader').css('visibility', 'hidden');
}, },
/** /**
* fills the tree list with directories * fills the tree list with directories
*/ */
fillTreeList: function(request, dialog_id) { fillTreeList: function() {
var $dirtree = $(dialog_id + ' #dirtree').empty(); this.$dirTree.empty();
var $template = $('<option value="{count}">{name}</option>'); var self = this
$dirtree.append($template.octemplate({ var path = this.$filePicker.data('path');
count: 0, if(!path) {
name: $(dialog_id).data('path') return;
})); }
$.each(request.data, function(index, file) { var $template = $('<span data-dir="{dir}">{name}</span>');
$dirtree.append($template.octemplate({ var paths = path.split('/');
count: index, paths.pop();
name: file.name $.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 * handle selection made in the tree list
*/ */
handleTreeListSelect:function(event) { handleTreeListSelect:function(event) {
// if there's a slash in the selected path, don't append it var self = event.data;
if ($('option:selected', this).html().indexOf('/') !== -1) { var dir = $(event.target).data('dir');
$(event.data.dcid).data('path', $('option:selected', this).html()); self.fillFilePicker(dir);
} 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) }
);
}, },
/** /**
* go one directory up * go one directory up
*/ */
filepickerDirUp:function(event) { filepickerDirUp:function(event) {
var old_path = $(event.data.dcid).data('path'); var self = event.data;
if ( old_path !== '/') { var old_path = self.$filePicker.data('path');
var splitted_path = old_path.split("/"); if (old_path !== '') {
var new_path = "" var splitted_path = old_path.split('/');
for (var i = 0; i < splitted_path.length - 2; i++) { splitted_path.pop();
new_path += splitted_path[i] + '/' self.fillFilePicker(splitted_path.join('/'));
}
$(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) }
);
} }
}, },
/** /**
* handle clicks made in the filepicker * handle clicks made in the filepicker
*/ */
handlePickerClick:function(element, name, dialog_content_id) { handlePickerClick:function(event, $element) {
if ( $(element).data('type') === 'file' ){ if ($element.data('type') === 'file') {
if ( $(dialog_content_id).data('multiselect') !== true) { if (this.$filePicker.data('multiselect') !== true || !event.ctrlKey) {
$(dialog_content_id + ' .filepicker_element_selected').removeClass('filepicker_element_selected'); this.$filelist.find('.filepicker_element_selected').removeClass('filepicker_element_selected');
} }
$(element).toggleClass('filepicker_element_selected'); $element.toggleClass('filepicker_element_selected');
return; return;
} else if ( $(element).data('type') === 'dir' ) { } else if ( $element.data('type') === 'dir' ) {
var datapath = escapeHTML( $(dialog_content_id).data('path') + name + '/' ); this.fillFilePicker(this.$filePicker.data('path') + '/' + $element.data('entryname'))
$(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) }
);
} }
} }
}; };

8
core/templates/filepicker.html
View File

@ -1,8 +1,8 @@
<div id="{dialog_name}" title="{title}"> <div id="{dialog_name}" title="{title}">
<button id="dirup">↑</button> <button class="dirup">↑</button>
<select id="dirtree"></select> <span class="dirtree"></span>
<ul id="filelist"> <ul class="filelist">
<li data-entryname="{filename}" data-type="{type}" data-dcid="{dcid}"> <li data-entryname="{filename}" data-type="{type}">
<img src="{imgsrc}" /> <img src="{imgsrc}" />
<span class="filename">{filename}</span> <span class="filename">{filename}</span>
<span class="date">{date}</span> <span class="date">{date}</span>