Various cleanups in OC.dialogs
This commit is contained in:
Thomas Tanghus
parent
4a8db293ec
commit
152e275c8a
|
|
@ -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']);
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
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
|
||||
*/
|
||||
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'))
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue