From 8d81ed3baae31bb471ded7759121d8bcc2c83a31 Mon Sep 17 00:00:00 2001 From: coderaiser Date: Tue, 24 Jan 2017 12:24:53 +0200 Subject: [PATCH] feature(cloudcmd) add ability to sort by name, size and date (#101) --- client/client.js | 83 ++++++++++++++++++++++---------------- client/listeners.js | 29 +++++++++++++ common/cloudfunc.js | 32 ++++++++++----- test/common/cloudfunc.html | 2 +- 4 files changed, 101 insertions(+), 45 deletions(-) diff --git a/client/client.js b/client/client.js index 3b9c7de1..8466cdb2 100644 --- a/client/client.js +++ b/client/client.js @@ -1,4 +1,5 @@ /* global itype */ +/* global rendy */ var Util, DOM, CloudFunc, join; @@ -34,6 +35,9 @@ var Util, DOM, CloudFunc, join; this.TITLE = 'Cloud Commander'; + this.sort = 'name'; + this.order = 'asc'; + TITLE = this.TITLE; log.enable = function() { @@ -100,7 +104,7 @@ var Util, DOM, CloudFunc, join; function loadModule(params) { var name, path, func, doBefore, funcName, isContain; - + if (params) { name = params.name, path = params.path, @@ -406,12 +410,20 @@ var Util, DOM, CloudFunc, join; if (!isRefresh && json) return createFileTable(obj, panel, options, callback); - RESTful.read(path, 'json', function(error, obj) { + var query = rendy('?sort={{ sort }}&order={{ order }}', { + sort: CloudCmd.sort, + order: CloudCmd.order + }); + + RESTful.read(path + query, 'json', function(error, obj) { if (error) return; Storage.set(path, obj); + options.sort = CloudCmd.sort; + options.order = CloudCmd.order; + createFileTable(obj, panel, options, function() { if (isRefresh && !noCurrent) { DOM.setCurrentByName(name); @@ -456,43 +468,44 @@ var Util, DOM, CloudFunc, join; dir = Info.dir, name = Info.name; - if (error) { - Dialog.alert(TITLE, error.responseText); - } else { - childNodes = panel.childNodes; - i = childNodes.length; + if (error) + return Dialog.alert(TITLE, error.responseText); - while (i--) - panel.removeChild(panel.lastChild); - - panel.innerHTML = CloudFunc.buildFromJSON({ - data : json, - id : panel.id, - prefix : CloudCmd.PREFIX, - template : { - file : templFile, - path : templPath, - pathLink : templPathLink, - link : templLink - } - }); - - Listeners.setOnPanel(panel); - - if (!noCurrent) { - if (name === '..' && dir !== '/') - current = DOM.getCurrentByName(dir); - - if (!current) - current = DOM.getFiles(panel)[0]; - - DOM.setCurrentFile(current, { - history: history - }); + childNodes = panel.childNodes; + i = childNodes.length; + + while (i--) + panel.removeChild(panel.lastChild); + + panel.innerHTML = CloudFunc.buildFromJSON({ + sort : options.sort, + order : options.order, + data : json, + id : panel.id, + prefix : CloudCmd.PREFIX, + template : { + file : templFile, + path : templPath, + pathLink : templPathLink, + link : templLink } + }); + + Listeners.setOnPanel(panel); + + if (!noCurrent) { + if (name === '..' && dir !== '/') + current = DOM.getCurrentByName(dir); - Util.exec(callback); + if (!current) + current = DOM.getFiles(panel)[0]; + + DOM.setCurrentFile(current, { + history: history + }); } + + Util.exec(callback); }); } diff --git a/client/listeners.js b/client/listeners.js index aa16fdde..b8cc283a 100644 --- a/client/listeners.js +++ b/client/listeners.js @@ -26,8 +26,37 @@ var Util, DOM, CloudFunc, CloudCmd; pop(); resize(); config(); + header(); }; + function header() { + var fm = DOM.getFM(); + + Events.addClick(fm, function(event) { + var el = event.target; + var parent = el.parentElement; + + if (parent.dataset.name !== 'js-fm-header') + return; + + var name = (el.dataset.name || '') + .replace('js-', ''); + + if (!/^(name|size|date)$/.test(name)) + return; + + if (name === CloudCmd.sort) { + if (CloudCmd.order === 'asc') + CloudCmd.order = 'desc'; + else + CloudCmd.order = 'asc'; + } + + CloudCmd.sort = name; + CloudCmd.refresh(); + }); + } + function config() { DOM.Files.get('config', function(e, config) { var type = config && config.packer; diff --git a/common/cloudfunc.js b/common/cloudfunc.js index 4f185364..b58c5720 100644 --- a/common/cloudfunc.js +++ b/common/cloudfunc.js @@ -137,7 +137,7 @@ * */ this.buildFromJSON = function(params) { - var attribute, size, date, owner, mode, + var attribute, dotDot, link, dataName, linkResult, prefix = params.prefix, @@ -148,6 +148,9 @@ files = json.files, path = json.path, + sort = params.sort || 'name', + order = params.order || 'asc', + /* * Строим путь каталога в котором мы находимся * со всеми подкаталогами @@ -160,14 +163,26 @@ path : htmlPath }); + var name = 'name'; + var size = 'size'; + var date = 'date'; + var arrow = order === 'asc' ? '↑' : '↓'; + + if (sort === 'name' && order !== 'asc') + name += arrow; + else if (sort === 'size') + size += arrow; + else if (sort === 'date') + date += arrow; + var header = rendy(templateFile, { tag : 'div', - attribute : '', + attribute : 'data-name="js-fm-header" ', className : 'fm-header', type : '', - name : 'name', - size : 'size', - date : 'date', + name : name, + size : size, + date : date, owner : 'owner', mode : 'mode' }); @@ -214,7 +229,6 @@ var link = prefix + FS + path + file.name; var type = getType(file.size); - var attribute = getAttribute(file.size); var size = getSize(file.size); var date = file.date || '--.--.----'; @@ -225,7 +239,7 @@ link : link, title : file.name, name : Entity.encode(file.name), - attribute : attribute + attribute : getAttribute(file.size) }); var dataName = 'data-name="js-file-' + file.name + '" '; @@ -253,8 +267,8 @@ if (size === 'dir') return 'directory'; - return 'text-file' - }; + return 'text-file'; + } function getAttribute(size) { if (size === 'dir') diff --git a/test/common/cloudfunc.html b/test/common/cloudfunc.html index 94076440..418a77f9 100644 --- a/test/common/cloudfunc.html +++ b/test/common/cloudfunc.html @@ -1,4 +1,4 @@ -
+
name size