mirror of
https://github.com/lrsjng/h5ai.git
synced 2025-05-27 13:34:30 -04:00
Begin to move all src javascript to es6. Add search/filter ignore case option.
This commit is contained in:
Lars Jung
parent
f37e8e7b89
commit
7ec2bdf16a
58 changed files with 3546 additions and 3420 deletions
|
|
@ -1,201 +1,208 @@
|
|||
modulejs.define('ext/tree', ['_', '$', 'core/event', 'core/location', 'core/resource', 'core/settings', 'core/store', 'core/util'], function (_, $, event, location, resource, allsettings, store, util) {
|
||||
var settings = _.extend({
|
||||
enabled: false,
|
||||
show: true,
|
||||
maxSubfolders: 50,
|
||||
naturalSort: false,
|
||||
ignorecase: true
|
||||
}, allsettings.tree);
|
||||
var template =
|
||||
'<div class="item">' +
|
||||
'<span class="indicator none">' +
|
||||
'<img src="' + resource.image('tree-indicator') + '"/>' +
|
||||
'</span>' +
|
||||
'<a>' +
|
||||
'<span class="icon"><img/></span>' +
|
||||
'<span class="label"/>' +
|
||||
'</a>' +
|
||||
'</span>';
|
||||
var settingsTemplate =
|
||||
'<div class="block">' +
|
||||
'<h1 class="l10n-tree">Tree</h1>' +
|
||||
'<div id="view-tree" class="button view">' +
|
||||
'<img src="' + resource.image('tree-toggle') + '" alt="view-tree"/>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
var storekey = 'ext/tree';
|
||||
const {jQuery: jq, _: lo} = require('../win');
|
||||
const event = require('../core/event');
|
||||
const location = require('../core/location');
|
||||
const resource = require('../core/resource');
|
||||
const allsettings = require('../core/settings');
|
||||
const store = require('../core/store');
|
||||
const util = require('../core/util');
|
||||
|
||||
|
||||
function cmpFn(item1, item2) {
|
||||
var val1 = item1.label;
|
||||
var val2 = item2.label;
|
||||
const settings = lo.extend({
|
||||
enabled: false,
|
||||
show: true,
|
||||
maxSubfolders: 50,
|
||||
naturalSort: false,
|
||||
ignorecase: true
|
||||
}, allsettings.tree);
|
||||
const template =
|
||||
`<div class="item">
|
||||
<span class="indicator none">
|
||||
<img src="${resource.image('tree-indicator')}"/>
|
||||
</span>
|
||||
<a>
|
||||
<span class="icon"><img/></span>
|
||||
<span class="label"/>
|
||||
</a>
|
||||
</span>`;
|
||||
const settingsTemplate =
|
||||
`<div class="block">
|
||||
<h1 class="l10n-tree">Tree</h1>
|
||||
<div id="view-tree" class="button view">
|
||||
<img src="${resource.image('tree-toggle')}" alt="view-tree"/>
|
||||
</div>
|
||||
</div>`;
|
||||
const storekey = 'ext/tree';
|
||||
|
||||
if (settings.ignorecase) {
|
||||
val1 = val1.toLowerCase();
|
||||
val2 = val2.toLowerCase();
|
||||
}
|
||||
|
||||
return settings.natural ? util.naturalCmpFn(val1, val2) : util.regularCmpFn(val1, val2);
|
||||
function cmpFn(item1, item2) {
|
||||
let val1 = item1.label;
|
||||
let val2 = item2.label;
|
||||
|
||||
if (settings.ignorecase) {
|
||||
val1 = val1.toLowerCase();
|
||||
val2 = val2.toLowerCase();
|
||||
}
|
||||
|
||||
function update(item) {
|
||||
var $html = $(template);
|
||||
var $indicator = $html.find('.indicator');
|
||||
var $a = $html.find('a');
|
||||
var $img = $html.find('.icon img');
|
||||
var $label = $html.find('.label');
|
||||
return settings.natural ? util.naturalCmpFn(val1, val2) : util.regularCmpFn(val1, val2);
|
||||
}
|
||||
|
||||
$html
|
||||
.addClass(item.isFolder() ? 'folder' : 'file')
|
||||
.data('item', item);
|
||||
function update(item) {
|
||||
const $html = jq(template);
|
||||
const $indicator = $html.find('.indicator');
|
||||
const $a = $html.find('a');
|
||||
const $img = $html.find('.icon img');
|
||||
const $label = $html.find('.label');
|
||||
|
||||
location.setLink($a, item);
|
||||
$img.attr('src', resource.icon('folder'));
|
||||
$label.text(item.label);
|
||||
$html
|
||||
.addClass(item.isFolder() ? 'folder' : 'file')
|
||||
.data('item', item);
|
||||
|
||||
if (item.isFolder()) {
|
||||
var subfolders = item.getSubfolders();
|
||||
location.setLink($a, item);
|
||||
$img.attr('src', resource.icon('folder'));
|
||||
$label.text(item.label);
|
||||
|
||||
// indicator
|
||||
if (item.isManaged && !item.isContentFetched || subfolders.length) {
|
||||
$indicator.removeClass('none');
|
||||
if (item.isFolder()) {
|
||||
const subfolders = item.getSubfolders();
|
||||
|
||||
if (item.isManaged && !item.isContentFetched) {
|
||||
$indicator.addClass('unknown');
|
||||
} else if (item.isContentVisible) {
|
||||
$indicator.addClass('open');
|
||||
} else {
|
||||
$indicator.addClass('close');
|
||||
}
|
||||
}
|
||||
// indicator
|
||||
if (item.isManaged && !item.isContentFetched || subfolders.length) {
|
||||
$indicator.removeClass('none');
|
||||
|
||||
// is it the current folder?
|
||||
if (item.isCurrentFolder()) {
|
||||
$html.addClass('active');
|
||||
}
|
||||
|
||||
// does it have subfolders?
|
||||
if (subfolders.length) {
|
||||
subfolders.sort(cmpFn);
|
||||
|
||||
var $ul = $('<ul class="content"/>').appendTo($html);
|
||||
var counter = 0;
|
||||
_.each(subfolders, function (e) {
|
||||
counter += 1;
|
||||
if (counter <= settings.maxSubfolders) {
|
||||
$('<li/>').append(update(e)).appendTo($ul);
|
||||
}
|
||||
});
|
||||
if (subfolders.length > settings.maxSubfolders) {
|
||||
$('<li class="summary">… ' + (subfolders.length - settings.maxSubfolders) + ' more subfolders</li>').appendTo($ul);
|
||||
}
|
||||
if (!item.isContentVisible) {
|
||||
$ul.hide();
|
||||
}
|
||||
}
|
||||
|
||||
// reflect folder status
|
||||
if (!item.isManaged) {
|
||||
$img.attr('src', resource.icon('folder-page'));
|
||||
}
|
||||
}
|
||||
|
||||
if (item.$tree) {
|
||||
item.$tree.replaceWith($html);
|
||||
}
|
||||
item.$tree = $html;
|
||||
|
||||
return $html;
|
||||
}
|
||||
|
||||
function createOnIndicatorClick() {
|
||||
function slide(item, $indicator, $content, down) {
|
||||
item.isContentVisible = down;
|
||||
$indicator.removeClass('open close').addClass(down ? 'open' : 'close');
|
||||
$content[down ? 'slideDown' : 'slideUp']();
|
||||
}
|
||||
|
||||
return function () {
|
||||
var $indicator = $(this);
|
||||
var $item = $indicator.closest('.item');
|
||||
var item = $item.data('item');
|
||||
var $content = $item.find('> ul.content');
|
||||
|
||||
if ($indicator.hasClass('unknown')) {
|
||||
item.fetchContent(function () {
|
||||
item.isContentVisible = false;
|
||||
|
||||
$item = update(item);
|
||||
$indicator = $item.find('> .indicator');
|
||||
$content = $item.find('> ul.content');
|
||||
|
||||
if (!$indicator.hasClass('none')) {
|
||||
slide(item, $indicator, $content, true);
|
||||
}
|
||||
});
|
||||
} else if ($indicator.hasClass('open')) {
|
||||
slide(item, $indicator, $content, false);
|
||||
} else if ($indicator.hasClass('close')) {
|
||||
slide(item, $indicator, $content, true);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function fetchTree(item, callback) {
|
||||
item.isContentVisible = true;
|
||||
item.fetchContent(function () {
|
||||
if (item.parent) {
|
||||
fetchTree(item.parent, callback);
|
||||
if (item.isManaged && !item.isContentFetched) {
|
||||
$indicator.addClass('unknown');
|
||||
} else if (item.isContentVisible) {
|
||||
$indicator.addClass('open');
|
||||
} else {
|
||||
callback(item);
|
||||
$indicator.addClass('close');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateSettings() {
|
||||
if (store.get(storekey)) {
|
||||
$('#view-tree').addClass('active');
|
||||
$('#tree').show();
|
||||
} else {
|
||||
$('#view-tree').removeClass('active');
|
||||
$('#tree').hide();
|
||||
}
|
||||
}
|
||||
|
||||
function onLocationChanged(item) {
|
||||
fetchTree(item, function (root) {
|
||||
$('#tree').append(update(root));
|
||||
updateSettings();
|
||||
});
|
||||
}
|
||||
|
||||
function init() {
|
||||
if (!settings.enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
$('<div id="tree"/>')
|
||||
.appendTo('#mainrow')
|
||||
.on('click', '.indicator', createOnIndicatorClick());
|
||||
// is it the current folder?
|
||||
if (item.isCurrentFolder()) {
|
||||
$html.addClass('active');
|
||||
}
|
||||
|
||||
$(settingsTemplate)
|
||||
.appendTo('#sidebar')
|
||||
.find('#view-tree')
|
||||
.on('click', function (ev) {
|
||||
store.put(storekey, !store.get(storekey));
|
||||
updateSettings();
|
||||
ev.preventDefault();
|
||||
// does it have subfolders?
|
||||
if (subfolders.length) {
|
||||
subfolders.sort(cmpFn);
|
||||
|
||||
const $ul = jq('<ul class="content"/>').appendTo($html);
|
||||
let counter = 0;
|
||||
lo.each(subfolders, e => {
|
||||
counter += 1;
|
||||
if (counter <= settings.maxSubfolders) {
|
||||
jq('<li/>').append(update(e)).appendTo($ul);
|
||||
}
|
||||
});
|
||||
|
||||
// ensure stored value is boolean, otherwise set default
|
||||
if (typeof store.get(storekey) !== 'boolean') {
|
||||
store.put(storekey, settings.show);
|
||||
if (subfolders.length > settings.maxSubfolders) {
|
||||
jq('<li class="summary">… ' + (subfolders.length - settings.maxSubfolders) + ' more subfolders</li>').appendTo($ul);
|
||||
}
|
||||
if (!item.isContentVisible) {
|
||||
$ul.hide();
|
||||
}
|
||||
}
|
||||
updateSettings();
|
||||
|
||||
event.sub('location.changed', onLocationChanged);
|
||||
// reflect folder status
|
||||
if (!item.isManaged) {
|
||||
$img.attr('src', resource.icon('folder-page'));
|
||||
}
|
||||
}
|
||||
|
||||
if (item.$tree) {
|
||||
item.$tree.replaceWith($html);
|
||||
}
|
||||
item.$tree = $html;
|
||||
|
||||
init();
|
||||
});
|
||||
return $html;
|
||||
}
|
||||
|
||||
function createOnIndicatorClick() {
|
||||
function slide(item, $indicator, $content, down) {
|
||||
item.isContentVisible = down;
|
||||
$indicator.removeClass('open close').addClass(down ? 'open' : 'close');
|
||||
$content[down ? 'slideDown' : 'slideUp']();
|
||||
}
|
||||
|
||||
return ev => {
|
||||
let $indicator = jq(ev.currentTarget);
|
||||
let $item = $indicator.closest('.item');
|
||||
const item = $item.data('item');
|
||||
let $content = $item.find('> ul.content');
|
||||
|
||||
if ($indicator.hasClass('unknown')) {
|
||||
item.fetchContent(() => {
|
||||
item.isContentVisible = false;
|
||||
|
||||
$item = update(item);
|
||||
$indicator = $item.find('> .indicator');
|
||||
$content = $item.find('> ul.content');
|
||||
|
||||
if (!$indicator.hasClass('none')) {
|
||||
slide(item, $indicator, $content, true);
|
||||
}
|
||||
});
|
||||
} else if ($indicator.hasClass('open')) {
|
||||
slide(item, $indicator, $content, false);
|
||||
} else if ($indicator.hasClass('close')) {
|
||||
slide(item, $indicator, $content, true);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function fetchTree(item, callback) {
|
||||
item.isContentVisible = true;
|
||||
item.fetchContent(() => {
|
||||
if (item.parent) {
|
||||
fetchTree(item.parent, callback);
|
||||
} else {
|
||||
callback(item);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateSettings() {
|
||||
if (store.get(storekey)) {
|
||||
jq('#view-tree').addClass('active');
|
||||
jq('#tree').show();
|
||||
} else {
|
||||
jq('#view-tree').removeClass('active');
|
||||
jq('#tree').hide();
|
||||
}
|
||||
}
|
||||
|
||||
function onLocationChanged(item) {
|
||||
fetchTree(item, root => {
|
||||
jq('#tree').append(update(root));
|
||||
updateSettings();
|
||||
});
|
||||
}
|
||||
|
||||
function init() {
|
||||
if (!settings.enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
jq('<div id="tree"/>')
|
||||
.appendTo('#mainrow')
|
||||
.on('click', '.indicator', createOnIndicatorClick());
|
||||
|
||||
jq(settingsTemplate)
|
||||
.appendTo('#sidebar')
|
||||
.find('#view-tree')
|
||||
.on('click', ev => {
|
||||
store.put(storekey, !store.get(storekey));
|
||||
updateSettings();
|
||||
ev.preventDefault();
|
||||
});
|
||||
|
||||
// ensure stored value is boolean, otherwise set default
|
||||
if (typeof store.get(storekey) !== 'boolean') {
|
||||
store.put(storekey, settings.show);
|
||||
}
|
||||
updateSettings();
|
||||
|
||||
event.sub('location.changed', onLocationChanged);
|
||||
}
|
||||
|
||||
|
||||
init();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue