Fijxu/h5ai
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Remove jq from tree.

Browse source
This commit is contained in:
Lars Jung 2016-06-28 03:01:07 +02:00
parent 901d8c407d
commit 9c4f3111ba
7 changed files with 134 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/_h5ai/public/css/lib/ext/info.less
View file

@ -1,6 +1,4 @@
#info { #info {
display: none;
overflow: auto; overflow: auto;
flex: 0 0 auto; flex: 0 0 auto;
order: 99; order: 99;

2
src/_h5ai/public/css/lib/ext/tree.less
View file

@ -1,6 +1,4 @@
#tree { #tree {
display: none;
overflow: auto; overflow: auto;
flex: 0 0 auto; flex: 0 0 auto;
order: 1; order: 1;

19
src/_h5ai/public/js/lib/ext/download.js
View file

@ -1,5 +1,4 @@
const {each} = require('../util'); const {each, dom} = require('../util');
const {jq} = require('../globals');
const server = require('../server'); const server = require('../server');
const event = require('../core/event'); const event = require('../core/event');
const location = require('../core/location'); const location = require('../core/location');
@ -20,16 +19,16 @@ let selectedItems = [];
let $download; let $download;
function onSelection(items) { const onSelection = items => {
selectedItems = items.slice(0); selectedItems = items.slice(0);
if (selectedItems.length) { if (selectedItems.length) {
$download.show(); $download.show();
} else if (!settings.alwaysVisible) { } else if (!settings.alwaysVisible) {
$download.hide(); $download.hide();
} }
} };
function onClick() { const onClick = () => {
const type = settings.type; const type = settings.type;
let name = settings.packageName; let name = settings.packageName;
const extension = type === 'shell-zip' ? 'zip' : 'tar'; const extension = type === 'shell-zip' ? 'zip' : 'tar';
@ -54,16 +53,16 @@ function onClick() {
}); });
server.formRequest(query); server.formRequest(query);
} };
function init() { const init = () => {
if (!settings.enabled) { if (!settings.enabled) {
return; return;
} }
$download = jq(template) $download = dom(template)
.hide() .hide()
.appendTo('#toolbar') .appTo('#toolbar')
.on('click', onClick); .on('click', onClick);
if (settings.alwaysVisible) { if (settings.alwaysVisible) {
@ -71,7 +70,7 @@ function init() {
} }
event.sub('selection', onSelection); event.sub('selection', onSelection);
} };
init(); init();

62
src/_h5ai/public/js/lib/ext/info.js
View file

@ -1,5 +1,5 @@
const {isNum} = require('../util'); const {isNum, dom} = require('../util');
const {win, jq, kjua} = require('../globals'); const {win, kjua} = require('../globals');
const event = require('../core/event'); const event = require('../core/event');
const format = require('../core/format'); const format = require('../core/format');
const resource = require('../core/resource'); const resource = require('../core/resource');
@ -17,12 +17,12 @@ const template =
`<div id="info"> `<div id="info">
<div class="icon"><img/></div> <div class="icon"><img/></div>
<div class="block"> <div class="block">
<div class="label"/> <div class="label"></div>
<div class="time"/> <div class="time"></div>
<div class="size"/> <div class="size"></div>
<div class="content"> <div class="content">
<span class="folders"/> <span class="l10n-folders"/>, <span class="folders"></span> <span class="l10n-folders"></span>,
<span class="files"/> <span class="l10n-files"/> <span class="files"></span> <span class="l10n-files"></span>
</div> </div>
</div> </div>
<div class="qrcode"/> <div class="qrcode"/>
@ -46,19 +46,19 @@ let $qrcode;
let currentFolder; let currentFolder;
function updateSettings() { const updateSettings = () => {
if (store.get(storekey)) { if (store.get(storekey)) {
jq('#view-info').addClass('active'); dom('#view-info').addCls('active');
jq('#info').show(); dom('#info').show();
} else { } else {
jq('#view-info').removeClass('active'); dom('#view-info').rmCls('active');
jq('#info').hide(); dom('#info').hide();
} }
} };
function update(item) { const update = item => {
let src = item.thumbRational || item.icon; let src = item.thumbRational || item.icon;
const isThumb = Boolean(item.thumbRational); const isThumb = !!item.thumbRational;
if (item.isCurrentFolder() || !src) { if (item.isCurrentFolder() || !src) {
src = resource.icon('folder'); src = resource.icon('folder');
@ -66,9 +66,9 @@ function update(item) {
$img.attr('src', src); $img.attr('src', src);
if (isThumb) { if (isThumb) {
$img.addClass('thumb'); $img.addCls('thumb');
} else { } else {
$img.removeClass('thumb'); $img.rmCls('thumb');
} }
$label.text(item.label); $label.text(item.label);
@ -96,7 +96,7 @@ function update(item) {
if (settings.qrcode) { if (settings.qrcode) {
const loc = win.location; const loc = win.location;
$qrcode.empty().append(kjua({ $qrcode.clr().app(kjua({
render: 'image', render: 'image',
size: 200, size: 200,
fill: settings.qrFill, fill: settings.qrFill,
@ -106,27 +106,27 @@ function update(item) {
quiet: 1 quiet: 1
})); }));
} }
} };
function onMouseenter(item) { const onMouseenter = item => {
update(item); update(item);
} };
function onMouseleave() { const onMouseleave = () => {
update(currentFolder); update(currentFolder);
} };
function onLocationChanged(item) { const onLocationChanged = item => {
currentFolder = item; currentFolder = item;
update(currentFolder); update(currentFolder);
} };
function init() { const init = () => {
if (!settings.enabled) { if (!settings.enabled) {
return; return;
} }
const $info = jq(template).appendTo('#mainrow'); const $info = dom(template).hide().appTo('#mainrow');
$img = $info.find('.icon img'); $img = $info.find('.icon img');
$label = $info.find('.label'); $label = $info.find('.label');
$time = $info.find('.time'); $time = $info.find('.time');
@ -137,11 +137,11 @@ function init() {
$qrcode = $info.find('.qrcode'); $qrcode = $info.find('.qrcode');
if (!settings.qrcode) { if (!settings.qrcode) {
$qrcode.remove(); $qrcode.rm();
} }
jq(settingsTemplate) dom(settingsTemplate)
.appendTo('#sidebar') .appTo('#sidebar')
.find('#view-info') .find('#view-info')
.on('click', ev => { .on('click', ev => {
store.put(storekey, !store.get(storekey)); store.put(storekey, !store.get(storekey));
@ -158,7 +158,7 @@ function init() {
event.sub('location.changed', onLocationChanged); event.sub('location.changed', onLocationChanged);
event.sub('item.mouseenter', onMouseenter); event.sub('item.mouseenter', onMouseenter);
event.sub('item.mouseleave', onMouseleave); event.sub('item.mouseleave', onMouseleave);
} };
init(); init();

30
src/_h5ai/public/js/lib/ext/l10n.js
View file

@ -1,5 +1,5 @@
const {each, isStr} = require('../util'); const {each, isStr, dom} = require('../util');
const {win, jq} = require('../globals'); const {win} = require('../globals');
const server = require('../server'); const server = require('../server');
const event = require('../core/event'); const event = require('../core/event');
const format = require('../core/format'); const format = require('../core/format');
@ -55,20 +55,18 @@ const update = lang => {
currentLang = lang; currentLang = lang;
} }
jq('#langs option') const sel = 'selected';
.removeAttr('selected').removeProp('selected') dom('#langs option').rmAttr(sel).rmProp(sel);
.filter('.' + currentLang.isoCode) dom('#langs .' + currentLang.isoCode).attr(sel, sel).prop(sel, sel);
.attr('selected', 'selected').prop('selected', 'selected');
each(currentLang, (value, key) => { each(currentLang, (value, key) => {
jq('.l10n-' + key).text(value); dom('.l10n-' + key).text(value);
jq('.l10n_ph-' + key).attr('placeholder', value); dom('.l10n_ph-' + key).attr('placeholder', value);
}); });
format.setDefaultDateFormat(currentLang.dateFormat); format.setDefaultDateFormat(currentLang.dateFormat);
jq('#items .item .date').each((idx, el) => { dom('#items .item').each(el => {
const $el = jq(el); dom(el).find('.date').text(format.formatDate(el._item.time));
$el.text(format.formatDate($el.data('time')));
}); });
}; };
@ -108,7 +106,7 @@ const localize = (languages, isoCode, useBrowserLang) => {
}; };
const initLangSelector = languages => { const initLangSelector = languages => {
const $block = jq(blockTemplate); const $block = dom(blockTemplate);
const $select = $block.find('select') const $select = $block.find('select')
.on('change', ev => { .on('change', ev => {
const isoCode = ev.target.value; const isoCode = ev.target.value;
@ -117,14 +115,14 @@ const initLangSelector = languages => {
}); });
each(languages, (language, isoCode) => { each(languages, (language, isoCode) => {
jq(optionTemplate) dom(optionTemplate)
.attr('value', isoCode) .attr('value', isoCode)
.addClass(isoCode) .addCls(isoCode)
.text(isoCode + ' - ' + (isStr(language) ? language : language.lang)) .text(isoCode + ' - ' + (isStr(language) ? language : language.lang))
.appendTo($select); .appTo($select);
}); });
$block.appendTo('#sidebar'); $block.appTo('#sidebar');
}; };
const init = () => { const init = () => {

122
src/_h5ai/public/js/lib/ext/tree.js
View file

@ -1,5 +1,4 @@
const {each, regularCmp, naturalCmp} = require('../util'); const {each, dom, regularCmp, naturalCmp} = require('../util');
const {jq} = require('../globals');
const event = require('../core/event'); const event = require('../core/event');
const location = require('../core/location'); const location = require('../core/location');
const resource = require('../core/resource'); const resource = require('../core/resource');
@ -14,17 +13,17 @@ const settings = Object.assign({
naturalSort: false, naturalSort: false,
ignorecase: true ignorecase: true
}, allsettings.tree); }, allsettings.tree);
const template = const itemTpl =
`<div class="item"> `<div class="item">
<span class="indicator none"> <span class="indicator none">
<img src="${resource.image('tree-indicator')}"/> <img src="${resource.image('tree-indicator')}"/>
</span> </span>
<a> <a>
<span class="icon"><img/></span> <span class="icon"><img/></span>
<span class="label"/> <span class="label"></span>
</a> </a>
</span>`; </span>`;
const settingsTemplate = const settingsTpl =
`<div class="block"> `<div class="block">
<h1 class="l10n-tree">Tree</h1> <h1 class="l10n-tree">Tree</h1>
<div id="view-tree" class="button view"> <div id="view-tree" class="button view">
@ -34,7 +33,7 @@ const settingsTemplate =
const storekey = 'ext/tree'; const storekey = 'ext/tree';
function cmpFn(item1, item2) { const cmpFn = (item1, item2) => {
let val1 = item1.label; let val1 = item1.label;
let val2 = item2.label; let val2 = item2.label;
@ -44,16 +43,17 @@ function cmpFn(item1, item2) {
} }
return settings.natural ? naturalCmp(val1, val2) : regularCmp(val1, val2); return settings.natural ? naturalCmp(val1, val2) : regularCmp(val1, val2);
} };
function update(item) { const update = item => {
const $html = jq(template); const $html = dom(itemTpl);
const $indicator = $html.find('.indicator'); const $indicator = $html.find('.indicator');
const $a = $html.find('a'); const $a = $html.find('a');
const $img = $html.find('.icon img'); const $img = $html.find('.icon img');
const $label = $html.find('.label'); const $label = $html.find('.label');
$html.addClass(item.isFolder() ? 'folder' : 'file'); $html.addCls(item.isFolder() ? 'folder' : 'file');
$indicator.on('click', createOnIndicatorClick()); // eslint-disable-line no-use-before-define
location.setLink($a, item); location.setLink($a, item);
$img.attr('src', resource.icon('folder')); $img.attr('src', resource.icon('folder'));
@ -64,36 +64,36 @@ function update(item) {
// indicator // indicator
if (item.isManaged && !item.isContentFetched || subfolders.length) { if (item.isManaged && !item.isContentFetched || subfolders.length) {
$indicator.removeClass('none'); $indicator.rmCls('none');
if (item.isManaged && !item.isContentFetched) { if (item.isManaged && !item.isContentFetched) {
$indicator.addClass('unknown'); $indicator.addCls('unknown');
} else if (item.isContentVisible) { } else if (item.isContentVisible) {
$indicator.addClass('open'); $indicator.addCls('open');
} else { } else {
$indicator.addClass('close'); $indicator.addCls('close');
} }
} }
// is it the current folder? // is it the current folder?
if (item.isCurrentFolder()) { if (item.isCurrentFolder()) {
$html.addClass('active'); $html.addCls('active');
} }
// does it have subfolders? // does it have subfolders?
if (subfolders.length) { if (subfolders.length) {
subfolders.sort(cmpFn); subfolders.sort(cmpFn);
const $ul = jq('<ul class="content"/>').appendTo($html); const $ul = dom('<ul class="content"></ul>').appTo($html);
let counter = 0; let counter = 0;
each(subfolders, e => { each(subfolders, e => {
counter += 1; counter += 1;
if (counter <= settings.maxSubfolders) { if (counter <= settings.maxSubfolders) {
jq('<li/>').append(update(e)).appendTo($ul); dom('<li></li>').app(update(e)).appTo($ul);
} }
}); });
if (subfolders.length > settings.maxSubfolders) { if (subfolders.length > settings.maxSubfolders) {
jq('<li class="summary">… ' + (subfolders.length - settings.maxSubfolders) + ' more subfolders</li>').appendTo($ul); dom('<li class="summary">… ' + (subfolders.length - settings.maxSubfolders) + ' more subfolders</li>').appTo($ul);
} }
if (!item.isContentVisible) { if (!item.isContentVisible) {
$ul.hide(); $ul.hide();
@ -107,48 +107,58 @@ function update(item) {
} }
if (item.$tree) { if (item.$tree) {
item.$tree.replaceWith($html); item.$tree.rpl($html);
} }
item.$tree = $html; item.$tree = $html;
$html[0]._item = item; $html[0]._item = item;
return $html; return $html;
} };
function createOnIndicatorClick() { const closestItem = el => {
function slide(item, $indicator, $content, down) { while (!el._item && el.parentNode) {
item.isContentVisible = down; el = el.parentNode;
$indicator.removeClass('open close').addClass(down ? 'open' : 'close');
$content[down ? 'slideDown' : 'slideUp']();
} }
return el._item;
};
const createOnIndicatorClick = () => {
const slide = ($indicator, $content, down) => {
const item = closestItem($indicator[0]);
item.isContentVisible = down;
$indicator.rmCls('open').rmCls('close').addCls(down ? 'open' : 'close');
// $content[down ? 'slideDown' : 'slideUp']();
$content[down ? 'show' : 'hide']();
};
return ev => { return ev => {
let $indicator = jq(ev.currentTarget); const item = closestItem(ev.target);
let $item = $indicator.closest('.item'); let $item = item.$tree;
const item = $item[0]._item; let $indicator = dom($item.find('.indicator')[0]);
let $content = $item.find('> ul.content'); let $content = dom($item.find('ul.content')[0]);
if ($indicator.hasClass('unknown')) { if ($indicator.hasCls('unknown')) {
item.fetchContent(() => { item.fetchContent(() => {
item.isContentVisible = false; item.isContentVisible = false;
$item = update(item); $item = update(item);
$indicator = $item.find('> .indicator'); $indicator = dom($item.find('.indicator')[0]);
$content = $item.find('> ul.content'); $content = dom($item.find('ul.content')[0]);
if (!$indicator.hasClass('none')) { if (!$indicator.hasCls('none')) {
slide(item, $indicator, $content, true); slide($indicator, $content, true);
} }
}); });
} else if ($indicator.hasClass('open')) { } else if ($indicator.hasCls('open')) {
slide(item, $indicator, $content, false); slide($indicator, $content, false);
} else if ($indicator.hasClass('close')) { } else if ($indicator.hasCls('close')) {
slide(item, $indicator, $content, true); slide($indicator, $content, true);
} }
}; };
} };
function fetchTree(item, callback) { const fetchTree = (item, callback) => {
item.isContentVisible = true; item.isContentVisible = true;
item.fetchContent(() => { item.fetchContent(() => {
if (item.parent) { if (item.parent) {
@ -157,36 +167,34 @@ function fetchTree(item, callback) {
callback(item); callback(item);
} }
}); });
} };
function updateSettings() { const updateSettings = () => {
if (store.get(storekey)) { if (store.get(storekey)) {
jq('#view-tree').addClass('active'); dom('#view-tree').addCls('active');
jq('#tree').show(); dom('#tree').show();
} else { } else {
jq('#view-tree').removeClass('active'); dom('#view-tree').rmCls('active');
jq('#tree').hide(); dom('#tree').hide();
} }
} };
function onLocationChanged(item) { const onLocationChanged = item => {
fetchTree(item, root => { fetchTree(item, root => {
jq('#tree').append(update(root)); dom('#tree').clr().app(update(root));
updateSettings(); updateSettings();
}); });
} };
function init() { const init = () => {
if (!settings.enabled) { if (!settings.enabled) {
return; return;
} }
jq('<div id="tree"/>') dom('<div id="tree"></div>').hide().appTo('#mainrow');
.appendTo('#mainrow')
.on('click', '.indicator', createOnIndicatorClick());
jq(settingsTemplate) dom(settingsTpl)
.appendTo('#sidebar') .appTo('#sidebar')
.find('#view-tree') .find('#view-tree')
.on('click', ev => { .on('click', ev => {
store.put(storekey, !store.get(storekey)); store.put(storekey, !store.get(storekey));
@ -201,7 +209,7 @@ function init() {
updateSettings(); updateSettings();
event.sub('location.changed', onLocationChanged); event.sub('location.changed', onLocationChanged);
} };
init(); init();

16
src/_h5ai/public/js/lib/util/dom.js
View file

@ -126,6 +126,17 @@ dom.prototype = {
return this.each(el => el.removeAttribute(key)); return this.each(el => el.removeAttribute(key));
}, },
prop(key, value) {
if (value === undefined) {
return this.length ? this[0][key] : undefined;
}
return this.each(el => {el[key] = value;});
},
rmProp(key) {
return this.each(el => delete el[key]);
},
val(value) { val(value) {
if (value === undefined) { if (value === undefined) {
return this.length ? this[0].value : undefined; return this.length ? this[0].value : undefined;
@ -168,7 +179,10 @@ dom.prototype = {
rpl(arg) { rpl(arg) {
return this.each(el => { return this.each(el => {
el.outerHTML = dom(arg).map(rplEl => rplEl.outerHTML).join(''); const parent = el.parentNode;
if (parent) {
parent.replaceChild(dom(arg)[0], el);
}
}); });
}, },