mirror of
https://github.com/lrsjng/h5ai.git
synced 2025-08-09 15:26:46 +02:00
Initial switch to info bar. Aggregates status bar and QRCode.
This commit is contained in:
Lars Jung
33
src/_h5ai/client/css/inc/info.less
Normal file
33
src/_h5ai/client/css/inc/info.less
Normal file
@@ -0,0 +1,33 @@
|
||||
|
||||
#info {
|
||||
display: none;
|
||||
|
||||
overflow: auto;
|
||||
flex: 0 0 auto;
|
||||
order: 99;
|
||||
|
||||
padding: 16px 16px 16px 8px;
|
||||
border-left: 1px solid @col-border;
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
// font-weight: lighter;
|
||||
width: 250px;
|
||||
|
||||
.label, .time, .size {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.qrcode {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
margin: 0 auto;
|
||||
padding: 8px;
|
||||
width: 150px;
|
||||
// border: @border-widget;
|
||||
box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.4);
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
|
||||
#qrcode {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 8px;
|
||||
bottom: 24px;
|
||||
z-index: 10;
|
||||
|
||||
background-color: @col-widget-back;
|
||||
border: @border-widget;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -8,7 +8,7 @@
|
||||
@import "inc/download";
|
||||
@import "inc/filter";
|
||||
@import "inc/tree";
|
||||
@import "inc/qrcode";
|
||||
@import "inc/info";
|
||||
@import "inc/preview";
|
||||
@import "inc/preview-aud";
|
||||
@import "inc/preview-img";
|
||||
|
||||
|
Before Width: | Height: | Size: 331 B After Width: | Height: | Size: 331 B |
122
src/_h5ai/client/js/inc/ext/info.js
Normal file
122
src/_h5ai/client/js/inc/ext/info.js
Normal file
@@ -0,0 +1,122 @@
|
||||
modulejs.define('ext/info', ['_', '$', 'modernizr', 'core/settings', 'core/resource', 'core/store', 'core/event', 'core/format'], function (_, $, modernizr, allsettings, resource, store, event, format) {
|
||||
|
||||
var settings = _.extend({
|
||||
enabled: false
|
||||
}, allsettings.info);
|
||||
var template =
|
||||
'<div id="info">' +
|
||||
'<div class="label"/>' +
|
||||
'<div class="time"/>' +
|
||||
'<div class="size"/>' +
|
||||
'<div class="qrcode"/>' +
|
||||
'</div>';
|
||||
var settingsTemplate =
|
||||
'<div class="block">' +
|
||||
'<h1 class="l10n-info">Info</h1>' +
|
||||
'<div id="view-info" class="button view">' +
|
||||
'<img src="' + resource.image('info-toggle') + '" alt="view-info"/>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
var sepTemplate = '<span class="sep"/>';
|
||||
var storekey = 'ext/info';
|
||||
var $label, $time, $size, $qrcode;
|
||||
var currentFolder;
|
||||
|
||||
// <span class="l10n-folders"/>
|
||||
// <span class="l10n-files"/>
|
||||
|
||||
function updateSettings() {
|
||||
|
||||
if (store.get(storekey)) {
|
||||
$('#view-info').addClass('active');
|
||||
$('#info').show();
|
||||
} else {
|
||||
$('#view-info').removeClass('active');
|
||||
$('#info').hide();
|
||||
}
|
||||
}
|
||||
|
||||
function update(item) {
|
||||
|
||||
$label.text(item.label);
|
||||
if (_.isNumber(item.time)) {
|
||||
$time.text(format.formatDate(item.time));
|
||||
} else {
|
||||
$time.text('.');
|
||||
}
|
||||
if (_.isNumber(item.size)) {
|
||||
$size.text(format.formatSize(item.size));
|
||||
} else {
|
||||
$size.text('.');
|
||||
}
|
||||
|
||||
if (item.isFolder()) {
|
||||
var stats = item.getStats();
|
||||
$size.append(' - ' + stats.folders + ' - ' + stats.files);
|
||||
}
|
||||
|
||||
|
||||
$qrcode.empty().qrcode({
|
||||
render: modernizr.canvas ? 'canvas' : 'div',
|
||||
size: 150,
|
||||
color: '#333',
|
||||
background: null,
|
||||
radius: 0.3,
|
||||
text: window.location.protocol + '//' + window.location.host + item.absHref
|
||||
});
|
||||
}
|
||||
|
||||
function onMouseenter(item) {
|
||||
|
||||
if (item.isCurrentParentFolder()) {
|
||||
return;
|
||||
}
|
||||
|
||||
update(item);
|
||||
}
|
||||
|
||||
function onMouseleave(item) {
|
||||
|
||||
update(currentFolder);
|
||||
}
|
||||
|
||||
function onLocationChanged(item) {
|
||||
|
||||
currentFolder = item;
|
||||
update(currentFolder);
|
||||
}
|
||||
|
||||
function init() {
|
||||
|
||||
if (!settings.enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
var $info = $(template).appendTo('#main-row');
|
||||
$label = $info.find('.label');
|
||||
$time = $info.find('.time');
|
||||
$size = $info.find('.size');
|
||||
$qrcode = $info.find('.qrcode');
|
||||
|
||||
$(settingsTemplate)
|
||||
.appendTo('#settings')
|
||||
.find('#view-info')
|
||||
.on('click', function (ev) {
|
||||
|
||||
store.put(storekey, !store.get(storekey));
|
||||
updateSettings();
|
||||
ev.preventDefault();
|
||||
});
|
||||
|
||||
// ensure stored value is boolean, default to true
|
||||
store.put(storekey, store.get(storekey) !== false);
|
||||
updateSettings();
|
||||
|
||||
event.sub('location.changed', onLocationChanged);
|
||||
event.sub('item.mouseenter', onMouseenter);
|
||||
event.sub('item.mouseleave', onMouseleave);
|
||||
}
|
||||
|
||||
|
||||
init();
|
||||
});
|
||||
@@ -1,53 +0,0 @@
|
||||
modulejs.define('ext/qrcode', ['_', '$', 'modernizr', 'core/settings', 'core/event'], function (_, $, modernizr, allsettings, event) {
|
||||
|
||||
var settings = _.extend({
|
||||
enabled: false,
|
||||
size: 150
|
||||
}, allsettings.qrcode);
|
||||
var template = '<div id="qrcode"/>';
|
||||
var $qrcode, hideTimeoutId;
|
||||
|
||||
|
||||
function update(item) {
|
||||
|
||||
$qrcode.empty().qrcode({
|
||||
render: modernizr.canvas ? 'canvas' : 'div',
|
||||
size: settings.size,
|
||||
color: '#333',
|
||||
bgColor: '#fff',
|
||||
radius: 0.5,
|
||||
text: window.location.protocol + '//' + window.location.host + item.absHref
|
||||
});
|
||||
}
|
||||
|
||||
function onMouseenter(item) {
|
||||
|
||||
if (!item.isFolder()) {
|
||||
update(item);
|
||||
clearTimeout(hideTimeoutId);
|
||||
$qrcode.stop(true, true).fadeIn(400);
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseleave(item) {
|
||||
|
||||
hideTimeoutId = setTimeout(function () {
|
||||
|
||||
$qrcode.stop(true, true).fadeOut(400);
|
||||
}, 200);
|
||||
}
|
||||
|
||||
function init() {
|
||||
|
||||
if (!settings.enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
$qrcode = $(template).appendTo('body');
|
||||
|
||||
event.sub('item.mouseenter', onMouseenter);
|
||||
event.sub('item.mouseleave', onMouseleave);
|
||||
}
|
||||
|
||||
init();
|
||||
});
|
||||
@@ -1,82 +0,0 @@
|
||||
modulejs.define('ext/statusbar', ['_', '$', 'core/settings', 'core/format', 'core/event'], function (_, $, allsettings, format, event) {
|
||||
|
||||
var settings = _.extend({
|
||||
enabled: false
|
||||
}, allsettings.statusbar);
|
||||
var template =
|
||||
'<span class="statusbar">' +
|
||||
'<span class="status default">' +
|
||||
'<span class="folderTotal"/> <span class="l10n-folders"/>' +
|
||||
'<span class="sep"/>' +
|
||||
'<span class="fileTotal"/> <span class="l10n-files"/>' +
|
||||
'</span>' +
|
||||
'<span class="status dynamic"/>' +
|
||||
'</span>';
|
||||
var sepTemplate = '<span class="sep"/>';
|
||||
var $statusDynamic;
|
||||
var $statusDefault;
|
||||
|
||||
|
||||
function update(html) {
|
||||
|
||||
if (html) {
|
||||
$statusDefault.hide();
|
||||
$statusDynamic.empty().append(html).show();
|
||||
} else {
|
||||
$statusDynamic.empty().hide();
|
||||
$statusDefault.show();
|
||||
}
|
||||
}
|
||||
|
||||
function init() {
|
||||
|
||||
if (!settings.enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
var $statusbar = $(template);
|
||||
var $folderTotal = $statusbar.find('.folderTotal');
|
||||
var $fileTotal = $statusbar.find('.fileTotal');
|
||||
var onLocationChanged = function (item) {
|
||||
|
||||
var stats = item.getStats();
|
||||
$folderTotal.text(stats.folders);
|
||||
$fileTotal.text(stats.files);
|
||||
};
|
||||
|
||||
$statusDefault = $statusbar.find('.status.default');
|
||||
$statusDynamic = $statusbar.find('.status.dynamic');
|
||||
|
||||
$('#bottombar > .center').append($statusbar);
|
||||
|
||||
event.sub('statusbar', update);
|
||||
event.sub('location.changed', onLocationChanged);
|
||||
event.sub('location.refreshed', onLocationChanged);
|
||||
|
||||
event.sub('item.mouseenter', function (item) {
|
||||
|
||||
if (item.isCurrentParentFolder()) {
|
||||
return;
|
||||
}
|
||||
|
||||
var $span = $('<span/>').append(item.label);
|
||||
|
||||
if (_.isNumber(item.time)) {
|
||||
$span.append(sepTemplate).append(format.formatDate(item.time));
|
||||
}
|
||||
if (_.isNumber(item.size)) {
|
||||
$span.append(sepTemplate).append(format.formatSize(item.size));
|
||||
}
|
||||
|
||||
update($span);
|
||||
});
|
||||
|
||||
event.sub('item.mouseleave', function (item) {
|
||||
|
||||
update();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
init();
|
||||
});
|
||||
@@ -60,7 +60,7 @@ Options
|
||||
},
|
||||
|
||||
/*
|
||||
Use a context menu (right-click) on selected elements.
|
||||
Enable a context menu (right-click) on some elements.
|
||||
*/
|
||||
"contextmenu": {
|
||||
"enabled": true
|
||||
@@ -137,6 +137,13 @@ Options
|
||||
"id": "UA-000000-0"
|
||||
},
|
||||
|
||||
/*
|
||||
Enable a generic info side bar.
|
||||
*/
|
||||
"info": {
|
||||
"enabled": true
|
||||
},
|
||||
|
||||
/*
|
||||
Localization, for example "en", "de" etc. - see "_h5ai/conf/l10n" folder for
|
||||
possible values. Adjust it to your needs. If lang is not found
|
||||
@@ -244,16 +251,6 @@ Options
|
||||
"types": ["vid-avi", "vid-flv", "vid-mkv", "vid-mov", "vid-mp4", "vid-mpg", "vid-webm"]
|
||||
},
|
||||
|
||||
/*
|
||||
Show QRCodes on hovering files.
|
||||
|
||||
- size: width and height in pixel
|
||||
*/
|
||||
"qrcode": {
|
||||
"enabled": true,
|
||||
"size": 150
|
||||
},
|
||||
|
||||
/*
|
||||
Make entries selectable.
|
||||
At the moment only needed for packaged download.
|
||||
@@ -286,13 +283,6 @@ Options
|
||||
"folders": 0
|
||||
},
|
||||
|
||||
/*
|
||||
Show additional info in a statusbar.
|
||||
*/
|
||||
"statusbar": {
|
||||
"enabled": true
|
||||
},
|
||||
|
||||
/*
|
||||
Show thumbnails for image files. Needs the "/_{{pkg.name}}/cache" folder to be
|
||||
writable for the web Server.
|
||||
|
||||
Reference in New Issue
Block a user