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

Width hack.

Browse source
This commit is contained in:
Lars Jung 2016-07-23 22:30:26 +02:00
parent c486962ff8
commit e52b3dd440
19 changed files with 132 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/_h5ai/public/css/lib/responsive.less
View file

@ -8,12 +8,12 @@
}
}
#view.view-details {
.header .label, .item .label {
margin-right: 80px !important;
}
.header .date, .item .date {
display: none;
}
// .header .label, .item .label {
// margin-right: 80px !important;
// }
// .header .date, .item .date {
// display: none;
// }
}
#tree, #info {
display: none !important;

23
src/_h5ai/public/css/lib/view/view-details.less
View file

@ -115,3 +115,26 @@
.view-details-sized(16px)
}
#view.view-details {
&.width-0 {
.label {
margin-right: 4px;
}
.date {
display: none;
}
.size {
display: none;
}
}
&.width-1 {
.label {
margin-right: 64px;
}
.date {
display: none;
}
}
}

4
src/_h5ai/public/js/lib/core/event.js
View file

@ -1,4 +1,4 @@
const {isStr, isFn} = require('../util');
const {isStr, isFn, dom} = require('../util');
const subscriptions = {};
@ -20,6 +20,8 @@ const pub = (topic, ...args) => {
}
};
dom(global.window).on('resize', () => pub('resize'));
module.exports = {
sub,
pub

20
src/_h5ai/public/js/lib/ext/contextmenu.js
View file

@ -5,11 +5,11 @@ const allsettings = require('../core/settings');
const settings = Object.assign({
enabled: false
}, allsettings.contextmenu);
const tplOverlay = '<div id="cm-overlay"></div>';
const tplPanel = '<div class="cm-panel"><ul></ul></div>';
const tplSep = '<li class="cm-sep"></li>';
const tplEntry = '<li class="cm-entry"><span class="cm-icon"><img/></span><span class="cm-text"></span></li>';
const tplLabel = '<li class="cm-label"><span class="cm-text"></span></li>';
const overlayTpl = '<div id="cm-overlay"></div>';
const panelTpl = '<div class="cm-panel"><ul></ul></div>';
const sepTpl = '<li class="cm-sep"></li>';
const entryTpl = '<li class="cm-entry"><span class="cm-icon"><img/></span><span class="cm-text"></span></li>';
const labelTpl = '<li class="cm-label"><span class="cm-text"></span></li>';
const closestId = el => {
@ -20,7 +20,7 @@ const closestId = el => {
};
const createOverlay = callback => {
const $overlay = dom(tplOverlay);
const $overlay = dom(overlayTpl);
const handle = ev => {
ev.stopPropagation();
@ -40,18 +40,18 @@ const createOverlay = callback => {
};
const createPanel = menu => {
const $panel = dom(tplPanel);
const $panel = dom(panelTpl);
const $ul = $panel.find('ul');
let $li;
each(menu, entry => {
if (entry.type === '-') {
dom(tplSep).appTo($ul);
dom(sepTpl).appTo($ul);
} else if (entry.type === 'l') {
dom(tplLabel).appTo($ul)
dom(labelTpl).appTo($ul)
.find('.cm-text').text(entry.text);
} else if (entry.type === 'e') {
$li = dom(tplEntry).appTo($ul);
$li = dom(entryTpl).appTo($ul);
$li[0]._cmId = entry.id;
$li.find('.cm-text').text(entry.text);
if (entry.icon) {

12
src/_h5ai/public/js/lib/ext/crumb.js
View file

@ -9,18 +9,18 @@ const base = require('../view/base');
const settings = Object.assign({
enabled: false
}, allsettings.crumb);
const tplCrumbbar = '<div id="crumbbar"></div>';
const tplCrumb =
const crumbbarTpl = '<div id="crumbbar"></div>';
const crumbTpl =
`<a class="crumb">
<img class="sep" src="${resource.image('crumb')}" alt=">"/>
<span class="label"></span>
</a>`;
const tplPageHint =
const pageHintTpl =
`<img class="hint" src="${resource.icon('folder-page')}" alt="has index page"/>`;
const createHtml = item => {
const $html = dom(tplCrumb);
const $html = dom(crumbTpl);
location.setLink($html, item);
$html.find('.label').text(item.label);
@ -30,7 +30,7 @@ const createHtml = item => {
}
if (!item.isManaged) {
$html.app(dom(tplPageHint));
$html.app(dom(pageHintTpl));
}
item._$crumb = $html;
@ -59,7 +59,7 @@ const init = () => {
return;
}
dom(tplCrumbbar).appTo(base.$flowbar);
dom(crumbbarTpl).appTo(base.$flowbar);
event.sub('location.changed', onLocationChanged);
};

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

@ -11,7 +11,7 @@ const settings = Object.assign({
packageName: 'package',
alwaysVisible: false
}, allsettings.download);
const template =
const tpl =
`<div id="download" class="tool">
<img src="${resource.image('download')}" alt="download"/>
</div>`;
@ -60,7 +60,7 @@ const init = () => {
return;
}
$download = dom(template)
$download = dom(tpl)
.hide()
.appTo('#toolbar')
.on('click', onClick);

4
src/_h5ai/public/js/lib/ext/filter.js
View file

@ -12,7 +12,7 @@ const settings = Object.assign({
debounceTime: 100,
ignorecase: true
}, allsettings.filter);
const template =
const tpl =
`<div id="filter" class="tool">
<img src="${resource.image('filter')}" alt="filter"/>
<input class="l10n_ph-filter" type="text" value=""/>
@ -71,7 +71,7 @@ const init = () => {
return;
}
$filter = dom(template).appTo('#toolbar');
$filter = dom(tpl).appTo('#toolbar');
$input = $filter.find('input');
$filter.find('img').on('click', toggle);

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

@ -13,7 +13,7 @@ const settings = Object.assign({
qrcode: true,
qrColor: '#999'
}, allsettings.info);
const template =
const tpl =
`<div id="info">
<div class="icon"><img/></div>
<div class="block">
@ -27,7 +27,7 @@ const template =
</div>
<div class="qrcode"/>
</div>`;
const settingsTemplate =
const settingsTpl =
`<div class="block">
<h1 class="l10n-info">Info</h1>
<div id="view-info" class="button view">
@ -126,7 +126,7 @@ const init = () => {
return;
}
const $info = dom(template).hide().appTo('#mainrow');
const $info = dom(tpl).hide().appTo('#mainrow');
$img = $info.find('.icon img');
$label = $info.find('.label');
$time = $info.find('.time');
@ -140,12 +140,13 @@ const init = () => {
$qrcode.rm();
}
dom(settingsTemplate)
dom(settingsTpl)
.appTo('#sidebar')
.find('#view-info')
.on('click', ev => {
store.put(storekey, !store.get(storekey));
updateSettings();
event.pub('resize');
ev.preventDefault();
});

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

@ -35,14 +35,14 @@ const defaultTranslations = {
tree: 'Tree',
view: 'View'
};
const blockTemplate =
const blockTpl =
`<div class="block">
<h1 class="l10n-language">Language</h1>
<div class="select">
<select id="langs"/>
</div>
</div>`;
const optionTemplate = '<option/>';
const optionTpl = '<option/>';
const storekey = 'ext/l10n';
const loaded = {
en: Object.assign({}, defaultTranslations)
@ -109,7 +109,7 @@ const localize = (languages, isoCode, useBrowserLang) => {
};
const initLangSelector = languages => {
const $block = dom(blockTemplate);
const $block = dom(blockTpl);
const $select = $block.find('select')
.on('change', ev => {
const isoCode = ev.target.value;
@ -118,7 +118,7 @@ const initLangSelector = languages => {
});
each(languages, (language, isoCode) => {
dom(optionTemplate)
dom(optionTpl)
.attr('value', isoCode)
.addCls(isoCode)
.text(isoCode + ' - ' + (isStr(language) ? language : language.lang))

12
src/_h5ai/public/js/lib/ext/preview/preview-txt.js
View file

@ -10,8 +10,8 @@ const settings = Object.assign({
enabled: false,
styles: {}
}, allsettings['preview-txt']);
const tplPre = '<pre id="pv-content-txt"></pre>';
const tplDiv = '<div id="pv-content-txt"></div>';
const preTpl = '<pre id="pv-content-txt"></pre>';
const divTpl = '<div id="pv-content-txt"></div>';
const updateGui = () => {
const el = dom('#pv-content-txt')[0];
@ -54,18 +54,18 @@ const load = item => {
const style = settings.styles[item.type];
if (style === 1) {
return dom(tplPre).text(content);
return dom(preTpl).text(content);
} else if (style === 2) {
return dom(tplDiv).html(marked(content));
return dom(divTpl).html(marked(content));
} else if (style === 3) {
const $code = dom('<code></code>').text(content);
win.setTimeout(() => {
lolight.el($code[0]);
}, content.length < 20000 ? 0 : 500);
return dom(tplPre).app($code);
return dom(preTpl).app($code);
}
return dom(tplDiv).text(content);
return dom(divTpl).text(content);
});
};

4
src/_h5ai/public/js/lib/ext/preview/preview.js
View file

@ -8,7 +8,7 @@ const win = global.window;
const settings = Object.assign({
enabled: true
}, allsettings.preview);
const tplOverlay =
const overlayTpl =
`<div id="pv-overlay">
<div id="pv-container"></div>
<div id="pv-spinner"><img class="back"/><img class="spinner" src="${resource.image('spinner')}"/></div>
@ -252,7 +252,7 @@ const init = () => {
return;
}
dom(tplOverlay)
dom(overlayTpl)
.hide()
.appTo('body')
.on('keydown', onKeydown)

4
src/_h5ai/public/js/lib/ext/search.js
View file

@ -14,7 +14,7 @@ const settings = Object.assign({
debounceTime: 300,
ignorecase: true
}, allsettings.search);
const template =
const tpl =
`<div id="search" class="tool">
<img src="${resource.image('search')}" alt="search"/>
<input class="l10n_ph-search" type="text" value=""/>
@ -79,7 +79,7 @@ const init = () => {
return;
}
$search = dom(template).appTo('#toolbar');
$search = dom(tpl).appTo('#toolbar');
$input = $search.find('input');
$search.find('img').on('click', toggle);

4
src/_h5ai/public/js/lib/ext/sort.js
View file

@ -13,7 +13,7 @@ const settings = Object.assign({
folders: 0
}, allsettings.sort);
const storekey = 'ext/sort';
const template = `<img src="${resource.image('sort')}" class="sort" alt="sort order"/>`;
const tpl = `<img src="${resource.image('sort')}" class="sort" alt="sort order"/>`;
const getTypeOrder = item => item.isFolder() ? settings.folders : 1;
const columnProps = {0: 'label', 1: 'time', 2: 'size'};
@ -75,7 +75,7 @@ const addToggles = () => {
each(columnClasses, (cls, idx) => {
const pos = idx === '0' ? 'app' : 'pre';
$header
.find('a.' + cls)[pos](template)
.find('a.' + cls)[pos](tpl)
.on('click', ev => {
sortItems(idx, dom(ev.currentTarget).hasCls('ascending'));
ev.preventDefault();

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

@ -156,6 +156,7 @@ const init = () => {
.on('click', ev => {
store.put(storekey, !store.get(storekey));
updateSettings();
event.pub('resize');
ev.preventDefault();
});
@ -168,5 +169,4 @@ const init = () => {
event.sub('location.changed', onLocationChanged);
};
init();

16
src/_h5ai/public/js/lib/main/info.js
View file

@ -4,15 +4,15 @@ const server = require('../server');
const resource = require('../core/resource');
const tplTests =
const testsTpl =
'<ul id="tests"></ul>';
const tplTest =
const testTpl =
`<li class="test">
<span class="label"></span>
<span class="result"></span>
<div class="info"></div>
</li>`;
const tplLogin =
const loginTpl =
`<div id="login-wrapper">
<input id="pass" type="password" placeholder="password"/>
<span id="login">login</span>
@ -22,7 +22,7 @@ const tplLogin =
Change it in '_h5ai/private/conf/options.json'.
</div>
</div>`;
const tplSupport =
const supportTpl =
`<div id="support">
Show your support with a donation!
<div class="paypal">
@ -37,7 +37,7 @@ const setup = config.setup;
const addTest = (label, info, passed, result) => {
const $test = dom(tplTest).appTo('#tests');
const $test = dom(testTpl).appTo('#tests');
$test.find('.label').text(label);
$test.find('.result')
.addCls(passed ? 'passed' : 'failed')
@ -50,7 +50,7 @@ const addTests = () => {
return;
}
dom(tplTests).appTo('#content');
dom(testsTpl).appTo('#content');
addTest(
'h5ai version', 'Only green if this is an official h5ai release',
@ -157,11 +157,11 @@ const onKeydown = ev => {
};
const addSupport = () => {
dom(tplSupport).appTo('#content');
dom(supportTpl).appTo('#content');
};
const addLogin = () => {
dom(tplLogin).appTo('#content');
dom(loginTpl).appTo('#content');
if (setup.AS_ADMIN) {
dom('#pass').rm();

8
src/_h5ai/public/js/lib/view/base.js
View file

@ -1,7 +1,7 @@
const {dom} = require('../util');
const rootSelector = 'body';
const tplTopbar =
const topbarTpl =
`<div id="topbar">
<div id="toolbar"></div>
<div id="flowbar"></div>
@ -10,7 +10,7 @@ const tplTopbar =
<div>by h5ai</div>
</a>
</div>`;
const tplMainrow =
const mainrowTpl =
`<div id="mainrow">
<div id="content"></div>
</div>`;
@ -20,8 +20,8 @@ const init = () => {
const $root = dom(rootSelector)
.attr('id', 'root')
.app(tplTopbar)
.app(tplMainrow);
.app(topbarTpl)
.app(mainrowTpl);
return {
$root,

8
src/_h5ai/public/js/lib/view/sidebar.js
View file

@ -9,16 +9,16 @@ const settings = Object.assign({
disableSidebar: false
}, allsettings.view);
const storekey = 'sidebarIsVisible';
const tplSidebar = '<div id="sidebar"></div>';
const tplToggle =
const sidebarTpl = '<div id="sidebar"></div>';
const toggleTpl =
`<div id="sidebar-toggle" class="tool">
<img alt="sidebar"/>
</div>`;
const init = () => {
const $sidebar = dom(tplSidebar).hide();
const $toggle = dom(tplToggle);
const $sidebar = dom(sidebarTpl).hide();
const $toggle = dom(toggleTpl);
const $img = $toggle.find('img');
const update = toggle => {

52
src/_h5ai/public/js/lib/view/view.js
View file

@ -21,7 +21,7 @@ const settings = Object.assign({
const sortedSizes = settings.sizes.sort((a, b) => a - b);
const checkedModes = intersection(settings.modes, modes);
const storekey = 'view';
const tplView =
const viewTpl =
`<div id="view">
<ul id="items" class="clearfix">
<li class="header">
@ -33,7 +33,7 @@ const tplView =
</ul>
<div id="view-hint"></div>
</div>`;
const tplItem =
const itemTpl =
`<li class="item">
<a>
<span class="icon square"><img/></span>
@ -43,7 +43,7 @@ const tplItem =
<span class="size"></span>
</a>
</li>`;
const $view = dom(tplView);
const $view = dom(viewTpl);
const $items = $view.find('#items');
const $hint = $view.find('#view-hint');
@ -55,22 +55,26 @@ const createStyles = size => {
const gsize = cropSize(size, 40, 160);
const isize = cropSize(size, 80, 1000);
const ilsize = Math.round(isize * 4 / 3);
const important = '!important;';
const detailsPrefix = `#view.view-details.view-size-${size}`;
const gridPrefix = `#view.view-grid.view-size-${size}`;
const iconsPrefix = `#view.view-icons.view-size-${size}`;
const rules = [
`#view.view-details.view-size-${size} .item .label {line-height: ${dsize + 14}px !important;}`,
`#view.view-details.view-size-${size} .item .date {line-height: ${dsize + 14}px !important;}`,
`#view.view-details.view-size-${size} .item .size {line-height: ${dsize + 14}px !important;}`,
`#view.view-details.view-size-${size} .square {width: ${dsize}px !important; height: ${dsize}px !important;}`,
`#view.view-details.view-size-${size} .square img {width: ${dsize}px !important; height: ${dsize}px !important;}`,
`#view.view-details.view-size-${size} .label {margin-left: ${dsize + 32}px !important;}`,
`${detailsPrefix} .item .label {line-height: ${dsize + 14}px ${important}}`,
`${detailsPrefix} .item .date {line-height: ${dsize + 14}px ${important}}`,
`${detailsPrefix} .item .size {line-height: ${dsize + 14}px ${important}}`,
`${detailsPrefix} .square {width: ${dsize}px ${important} height: ${dsize}px ${important}}`,
`${detailsPrefix} .square img {width: ${dsize}px ${important} height: ${dsize}px ${important}}`,
`${detailsPrefix} .label {margin-left: ${dsize + 32}px ${important}}`,
`#view.view-grid.view-size-${size} .item .label {line-height: ${gsize}px !important;}`,
`#view.view-grid.view-size-${size} .square {width: ${gsize}px !important; height: ${gsize}px !important;}`,
`#view.view-grid.view-size-${size} .square img {width: ${gsize}px !important; height: ${gsize}px !important;}`,
`${gridPrefix} .item .label {line-height: ${gsize}px ${important}}`,
`${gridPrefix} .square {width: ${gsize}px ${important} height: ${gsize}px ${important}}`,
`${gridPrefix} .square img {width: ${gsize}px ${important} height: ${gsize}px ${important}}`,
`#view.view-icons.view-size-${size} .item {width: ${ilsize}px !important;}`,
`#view.view-icons.view-size-${size} .landscape {width: ${ilsize}px !important; height: ${isize}px !important;}`,
`#view.view-icons.view-size-${size} .landscape img {width: ${isize}px !important; height: ${isize}px !important;}`,
`#view.view-icons.view-size-${size} .landscape .thumb {width: ${ilsize}px !important;}`
`${iconsPrefix} .item {width: ${ilsize}px ${important}}`,
`${iconsPrefix} .landscape {width: ${ilsize}px ${important} height: ${isize}px ${important}}`,
`${iconsPrefix} .landscape img {width: ${isize}px ${important} height: ${isize}px ${important}}`,
`${iconsPrefix} .landscape .thumb {width: ${ilsize}px ${important}}`
];
return rules.join('\n');
@ -129,7 +133,7 @@ const onMouseleave = ev => {
};
const createHtml = item => {
const $html = dom(tplItem);
const $html = dom(itemTpl);
const $a = $html.find('a');
const $iconImg = $html.find('.icon img');
const $label = $html.find('.label');
@ -243,6 +247,17 @@ const onLocationRefreshed = (item, added, removed) => {
changeItems(add, removed);
};
const onResize = () => {
const width = $view[0].offsetWidth;
$view.rmCls('width-0').rmCls('width-1');
if (width < 320) {
$view.addCls('width-0');
} else if (width < 480) {
$view.addCls('width-1');
}
};
const init = () => {
addCssStyles();
set();
@ -254,9 +269,10 @@ const init = () => {
event.sub('location.changed', onLocationChanged);
event.sub('location.refreshed', onLocationRefreshed);
event.sub('resize', onResize);
onResize();
};
init();
module.exports = {

16
src/_h5ai/public/js/lib/view/viewmode.js
View file

@ -10,15 +10,15 @@ const view = require('./view');
const settings = Object.assign({
modeToggle: false
}, allsettings.view);
const tplSettings =
const settingsTpl =
'<div id="viewmode-settings" class="block"><h1 class="l10n-view">View</h1></div>';
const tplMode =
const modeTpl =
`<div id="viewmode-[MODE]" class="button mode">
<img src="${resource.image('view-[MODE]')}" alt="viewmode-[MODE]"/>
</div>`;
const tplSize =
const sizeTpl =
'<input id="viewmode-size" type="range" min="0" max="0" value="0">';
const tplToggle =
const toggleTpl =
`<div id="viewmode-toggle" class="tool">
<img alt="viewmode"/>
</div>`;
@ -42,11 +42,11 @@ const addSettings = () => {
return;
}
const $viewBlock = dom(tplSettings);
const $viewBlock = dom(settingsTpl);
if (modes.length > 1) {
each(modes, mode => {
dom(tplMode.replace(/\[MODE\]/g, mode))
dom(modeTpl.replace(/\[MODE\]/g, mode))
.on('click', () => {
view.setMode(mode);
})
@ -56,7 +56,7 @@ const addSettings = () => {
if (sizes.length > 1) {
const max = sizes.length - 1;
dom(tplSize)
dom(sizeTpl)
.attr('max', max)
.on('input', ev => view.setSize(sizes[ev.target.valueAsNumber]))
.on('change', ev => view.setSize(sizes[ev.target.valueAsNumber]))
@ -76,7 +76,7 @@ const onToggle = () => {
const addToggle = () => {
if (settings.modeToggle && modes.length > 1) {
dom(tplToggle)
dom(toggleTpl)
.on('click', onToggle)
.appTo(base.$toolbar);
}