From 47d73c656b1a63a745af5e2a7b8377474f9c2bdb Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Sun, 21 Jul 2013 17:09:21 +0200 Subject: [PATCH 01/83] Sets version to 0.23.0-dev --- README.md | 5 +++++ package.json | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 2faf2a74..d14e00e8 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,11 @@ It profits from these great projects: ( **h5ai** uses [semantic versioning](http://semver.org/) ) +### develop branch + +* ... + + ### v0.23.0 - *2013-07-21* * removes `aai` mode! diff --git a/package.json b/package.json index 5bdc18ae..b848c08e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "h5ai", - "version": "0.23.0", + "version": "0.23.0-dev", "description": "a modern HTTP web server index", "url": "http://larsjung.de/h5ai/", "author": "Lars Jung", From ede9f4d3f8fd8ebaea8cce5a24b17766aa0dffa3 Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Sun, 21 Jul 2013 22:23:16 +0200 Subject: [PATCH 02/83] Fixes setParentFolderLabels=false. --- src/_h5ai/client/js/inc/ext/l10n.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/_h5ai/client/js/inc/ext/l10n.js b/src/_h5ai/client/js/inc/ext/l10n.js index b27d145d..c2abc220 100644 --- a/src/_h5ai/client/js/inc/ext/l10n.js +++ b/src/_h5ai/client/js/inc/ext/l10n.js @@ -151,14 +151,11 @@ modulejs.define('ext/l10n', ['_', '$', 'core/settings', 'core/langs', 'core/form init = function () { - if (!settings.enabled) { - event.sub('ready', function () { update(); }); - return; + if (settings.enabled) { + initLangSelector(langs); } - initLangSelector(langs); - - event.sub('ready', function () { + event.sub('location.changed', function () { localize(langs, settings.lang, settings.useBrowserLang); }); From efb447ae789762595f48194e4ba66ccba7756aa0 Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Tue, 23 Jul 2013 10:21:02 +0200 Subject: [PATCH 03/83] Minor refactoring. --- src/_h5ai/conf/options.json | 4 ++-- src/_h5ai/server/php/inc/Api.php | 2 ++ src/_h5ai/server/php/index.php | 2 -- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/_h5ai/conf/options.json b/src/_h5ai/conf/options.json index 71405d05..c5079066 100644 --- a/src/_h5ai/conf/options.json +++ b/src/_h5ai/conf/options.json @@ -44,7 +44,7 @@ Options "indexFiles": ["index.html", "index.htm", "index.php"], "ignore": ["^\\.", "^_{{pkg.name}}"], "smartBrowsing": true, - "extInNewWindow": true + "extInNewWindow": false }, @@ -180,7 +180,7 @@ Options 2: mode, servername and -version */ "mode": { - "enabled": true, + "enabled": false, "display": 2 }, diff --git a/src/_h5ai/server/php/inc/Api.php b/src/_h5ai/server/php/inc/Api.php index 6968a14c..518a4702 100644 --- a/src/_h5ai/server/php/inc/Api.php +++ b/src/_h5ai/server/php/inc/Api.php @@ -207,6 +207,8 @@ class Api { json_exit(); } + + json_fail(100, "unsupported request"); } } diff --git a/src/_h5ai/server/php/index.php b/src/_h5ai/server/php/index.php index 50916f7d..967d49b1 100644 --- a/src/_h5ai/server/php/index.php +++ b/src/_h5ai/server/php/index.php @@ -53,8 +53,6 @@ if (array_key_exists("action", $_REQUEST)) { $api = new Api($app); $api->apply(); - json_fail(100, "unsupported request"); - } else { header("Content-type: text/html;charset=utf-8"); From d76e1194d1c544337beed6d6202f53d8881c77a3 Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Tue, 23 Jul 2013 20:09:56 +0200 Subject: [PATCH 04/83] Adds EXIF and PHP version to info page. --- src/_h5ai/client/js/inc/info.js | 1 + src/_h5ai/conf/options.json | 6 +++--- src/_h5ai/index.html.jade | 6 +++++- src/_h5ai/server/php/inc/App.php | 3 +++ 4 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/_h5ai/client/js/inc/info.js b/src/_h5ai/client/js/inc/info.js index 58197760..54bb59cc 100644 --- a/src/_h5ai/client/js/inc/info.js +++ b/src/_h5ai/client/js/inc/info.js @@ -22,6 +22,7 @@ modulejs.define('info', ['$'], function ($) { setCheckResult(this, json.checks[$(this).data('id')]); }); + $('.test.php .test-result').text(json.checks['phpversion']); } }); }; diff --git a/src/_h5ai/conf/options.json b/src/_h5ai/conf/options.json index c5079066..59d3f241 100644 --- a/src/_h5ai/conf/options.json +++ b/src/_h5ai/conf/options.json @@ -57,7 +57,7 @@ Options - interval: number, update interval in milliseconds, at least 1000 */ "autorefresh": { - "enabled": false, + "enabled": true, "interval": 5000 }, @@ -84,7 +84,7 @@ Options Allow file deletion. */ "delete": { - "enabled": false + "enabled": true }, /* [EXPERIMENTAL] @@ -95,7 +95,7 @@ Options - maxfilesize: number, file size is in MB */ "dropbox": { - "enabled": false, + "enabled": true, "maxfiles": 10, "maxfilesize": 1000 }, diff --git a/src/_h5ai/index.html.jade b/src/_h5ai/index.html.jade index 708aee0e..6f29d1ee 100644 --- a/src/_h5ai/index.html.jade +++ b/src/_h5ai/index.html.jade @@ -32,7 +32,7 @@ html.no-js( lang="en" ) h2 server supports ul#tests - li.test( data-id="php" ) + li.test.php( data-id="php" ) span.test-label php version span.test-result ? div.test-info PHP version >= 5.2.1 @@ -44,6 +44,10 @@ html.no-js( lang="en" ) span.test-label image thumbs span.test-result ? div.test-info PHP GD extension with JPEG support available + li.test( data-id="exif" ) + span.test-label use exif thumbs + span.test-result ? + div.test-info PHP EXIF extension available li.test( data-id="ffmpeg" ) span.test-label movie thumbs span.test-result ? diff --git a/src/_h5ai/server/php/inc/App.php b/src/_h5ai/server/php/inc/App.php index 1617ad4c..77e97c06 100644 --- a/src/_h5ai/server/php/inc/App.php +++ b/src/_h5ai/server/php/inc/App.php @@ -278,6 +278,7 @@ class App { $gdinfo = gd_info(); $gd = array_key_exists("JPG Support", $gdinfo) && $gdinfo["JPG Support"] || array_key_exists("JPEG Support", $gdinfo) && $gdinfo["JPEG Support"]; } + $exif = function_exists("exif_thumbnail"); $cache = @is_writable($this->get_cache_abs_path()); $tar = @preg_match("/tar(.exe)?$/i", `which tar`) > 0; $zip = @preg_match("/zip(.exe)?$/i", `which zip`) > 0; @@ -287,9 +288,11 @@ class App { return array( "idx" => $this->app_abs_href . "server/php/index.php", + "phpversion" => PHP_VERSION, "php" => $php, "cache" => $cache, "thumbs" => $gd, + "exif" => $exif, "tar" => $tar, "zip" => $zip, "convert" => $convert, From a3a236d2e11b160b6d7631a32d73cf25046427f4 Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Tue, 23 Jul 2013 20:39:24 +0200 Subject: [PATCH 05/83] Ignore warnings for unsupported images. --- src/_h5ai/server/php/inc/Thumb.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_h5ai/server/php/inc/Thumb.php b/src/_h5ai/server/php/inc/Thumb.php index d4b6dacd..4365040d 100644 --- a/src/_h5ai/server/php/inc/Thumb.php +++ b/src/_h5ai/server/php/inc/Thumb.php @@ -57,7 +57,7 @@ class Thumb { $et = false; if (function_exists("exif_thumbnail")) { - $et = exif_thumbnail($source_abs_path); + $et = @exif_thumbnail($source_abs_path); } if($et !== false) { file_put_contents($thumb_abs_path, $et); From 8a431fe95e414cfe9d3bfd1913c4fc9ce09717f5 Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Thu, 25 Jul 2013 23:41:20 +0200 Subject: [PATCH 06/83] Adds .aiff extention to type audio. --- src/_h5ai/conf/types.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_h5ai/conf/types.json b/src/_h5ai/conf/types.json index 1e7105df..bf0f5f1a 100644 --- a/src/_h5ai/conf/types.json +++ b/src/_h5ai/conf/types.json @@ -7,7 +7,7 @@ File types mapped to file extensions { "archive": [".tar.bz2", ".tar.gz", ".tgz"], - "audio": [".aif", ".flac", ".m4a", ".mid", ".mp3", ".mpa", ".ra", ".ogg", ".wav", ".wma"], + "audio": [".aif", ".aiff", ".flac", ".m4a", ".mid", ".mp3", ".mpa", ".ra", ".ogg", ".wav", ".wma"], "authors": ["authors"], "bin": [".class", ".o", ".so"], "blank": [], From 696409e19c46789175daea927829eff0b25a4761 Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Fri, 26 Jul 2013 14:44:31 +0200 Subject: [PATCH 07/83] Updates pl translation. --- src/_h5ai/conf/l10n/pl.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/_h5ai/conf/l10n/pl.json b/src/_h5ai/conf/l10n/pl.json index de4b7c07..ab672614 100644 --- a/src/_h5ai/conf/l10n/pl.json +++ b/src/_h5ai/conf/l10n/pl.json @@ -9,10 +9,10 @@ "size": "Rozmiar", "parentDirectory": "Katalog nadrzędny", "empty": "pusty", - "folders": "foldery", - "files": "pliki", + "folders": "folderów", + "files": "plików", "download": "pobierz", - "noMatch": "nie pasuje", + "noMatch": "nie znaleziono", "dateFormat": "YYYY-MM-DD HH:mm", "filter": "filtr", "delete": "usuń" From 3733d0c6d09189c264b761fa923ae7469d4fc8be Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Sun, 28 Jul 2013 16:15:20 +0200 Subject: [PATCH 08/83] Replace 'which' with 'command -v' to be POSIX compatible here. --- src/_h5ai/server/php/inc/App.php | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/_h5ai/server/php/inc/App.php b/src/_h5ai/server/php/inc/App.php index 77e97c06..f699a823 100644 --- a/src/_h5ai/server/php/inc/App.php +++ b/src/_h5ai/server/php/inc/App.php @@ -280,11 +280,11 @@ class App { } $exif = function_exists("exif_thumbnail"); $cache = @is_writable($this->get_cache_abs_path()); - $tar = @preg_match("/tar(.exe)?$/i", `which tar`) > 0; - $zip = @preg_match("/zip(.exe)?$/i", `which zip`) > 0; - $convert = @preg_match("/convert(.exe)?$/i", `which convert`) > 0; - $ffmpeg = @preg_match("/ffmpeg(.exe)?$/i", `which ffmpeg`) > 0; - $du = @preg_match("/du(.exe)?$/i", `which du`) > 0; + $tar = @preg_match("/tar(.exe)?$/i", `command -v tar`) > 0; + $zip = @preg_match("/zip(.exe)?$/i", `command -v zip`) > 0; + $convert = @preg_match("/convert(.exe)?$/i", `command -v convert`) > 0; + $ffmpeg = @preg_match("/ffmpeg(.exe)?$/i", `command -v ffmpeg`) > 0; + $du = @preg_match("/du(.exe)?$/i", `command -v du`) > 0; return array( "idx" => $this->app_abs_href . "server/php/index.php", From a296311b88eb888bf57b52bbc8d4237362d20584 Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Tue, 13 Aug 2013 00:36:39 +0200 Subject: [PATCH 09/83] Updates build process. --- makefile.js | 129 +++++++++++++++++++++++---------------------------- package.json | 2 +- 2 files changed, 59 insertions(+), 72 deletions(-) diff --git a/makefile.js b/makefile.js index cc43d53d..c24553da 100644 --- a/makefile.js +++ b/makefile.js @@ -2,82 +2,49 @@ 'use strict'; -var path = require('path'), - - pkg = require('./package.json'), - - root = path.resolve(__dirname), - src = path.join(root, 'src'), - build = path.join(root, 'build'), - - jshint = { - // Enforcing Options - bitwise: true, - curly: true, - eqeqeq: true, - forin: true, - latedef: true, - newcap: true, - noempty: true, - plusplus: true, - trailing: true, - undef: true, - - // Environments - browser: true, - - // Globals - predef: [ - 'modulejs' - ] - }, - - handlebarsEnv = { - pkg: pkg - }, - - mapSrc = function (blob) { - - return blob.source.replace(src, build).replace(/\.less$/, '.css').replace(/\.jade$/, ''); - }, - - mapRoot = function (blob) { - - return blob.source.replace(root, path.join(build, '_h5ai')); - }; - - module.exports = function (make) { - var Event = make.Event, + var path = require('path'), + + pkg = require('./package.json'), + + root = path.resolve(__dirname), + src = path.join(root, 'src'), + build = path.join(root, 'build'), + $ = make.fQuery, - moment = make.moment; + mapSrc = $.map.p(src, build).s('.less', '.css').s('.jade', ''), + mapRoot = $.map.p(root, build); - make.version('>=0.8.1'); + make.version('>=0.10.0'); make.defaults('build'); make.before(function () { - handlebarsEnv.stamp = moment().format('YYYY-MM-DD HH:mm:ss'); + var moment = make.moment(); + + make.env = { + pkg: pkg, + stamp: moment.format('YYYY-MM-DD HH:mm:ss') + }; + + $.info({ method: 'before', message: pkg.version + ' ' + make.env.stamp }); }); make.target('check-version', [], 'add git info to dev builds').async(function (done, fail) { - if (!/-dev$/.test(pkg.version)) { + if (!/\+$/.test(pkg.version)) { done(); return; } $.git(root, function (err, result) { - pkg.version += '-' + result.revListOriginMasterHead.length + '-' + result.revParseHead.slice(0, 7); - Event.info({ - method: 'check-version', - message: 'version set to ' + pkg.version - }); + pkg.version += result.buildSuffix; + $.info({ method: 'check-version', message: 'version set to ' + pkg.version }); done(); }); }); @@ -85,14 +52,34 @@ module.exports = function (make) { make.target('clean', [], 'delete build folder').sync(function () { - $.rmfr($.I_AM_SURE, build); + $.DELETE(build); }); make.target('lint', [], 'lint all JavaScript files with JSHint').sync(function () { + var jshint = { + // Enforcing Options + bitwise: true, + curly: true, + eqeqeq: true, + forin: true, + latedef: true, + newcap: true, + noempty: true, + plusplus: true, + trailing: true, + undef: true, + + // Environments + browser: true + }, + globals = { + 'modulejs': true + }; + $(src + '/_h5ai/client/js: **/*.js, ! lib/**') - .jshint(jshint); + .jshint(jshint, globals); }); @@ -102,28 +89,28 @@ module.exports = function (make) { .modified(mapSrc, $(src + ': _h5ai/client/js/**')) .includify() .uglifyjs() - .write($.OVERWRITE, mapSrc); + .WRITE(mapSrc); $(src + ': _h5ai/client/css/*.less') .modified(mapSrc, $(src + ': _h5ai/client/css/**')) .less() .cssmin() - .write($.OVERWRITE, mapSrc); + .WRITE(mapSrc); $(src + ': **/*.jade') .modified(mapSrc) - .handlebars(handlebarsEnv) + .handlebars(make.env) .jade() - .write($.OVERWRITE, mapSrc); + .WRITE(mapSrc); $(src + ': **, ! _h5ai/client/js/**, ! _h5ai/client/css/**, ! **/*.jade') .modified(mapSrc) - .handlebars(handlebarsEnv) - .write($.OVERWRITE, mapSrc); + .handlebars(make.env) + .WRITE(mapSrc); $(root + ': README*, LICENSE*') .modified(mapRoot) - .write($.OVERWRITE, mapRoot); + .WRITE(mapRoot); }); @@ -133,28 +120,28 @@ module.exports = function (make) { .modified(mapSrc, $(src + ': _h5ai/client/js/**')) .includify() // .uglifyjs() - .write($.OVERWRITE, mapSrc); + .WRITE(mapSrc); $(src + ': _h5ai/client/css/*.less') .modified(mapSrc, $(src + ': _h5ai/client/css/**')) .less() // .cssmin() - .write($.OVERWRITE, mapSrc); + .WRITE(mapSrc); $(src + ': **/*.jade') .modified(mapSrc) - .handlebars(handlebarsEnv) + .handlebars(make.env) .jade() - .write($.OVERWRITE, mapSrc); + .WRITE(mapSrc); $(src + ': **, ! _h5ai/client/js/**, ! _h5ai/client/css/**, ! **/*.jade') .modified(mapSrc) - .handlebars(handlebarsEnv) - .write($.OVERWRITE, mapSrc); + .handlebars(make.env) + .WRITE(mapSrc); $(root + ': README*, LICENSE*') .modified(mapRoot) - .write($.OVERWRITE, mapRoot); + .WRITE(mapRoot); }); diff --git a/package.json b/package.json index b848c08e..028a1094 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "h5ai", - "version": "0.23.0-dev", + "version": "0.23.0+", "description": "a modern HTTP web server index", "url": "http://larsjung.de/h5ai/", "author": "Lars Jung", From cec6ca2e6e04b19bf6a94fd56931e71fe77aa2e7 Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Fri, 16 Aug 2013 16:22:23 +0200 Subject: [PATCH 10/83] Some updates on the info page. --- makefile.js | 6 ++- src/_h5ai/client/css/inc/h5ai-info.less | 22 +++++------ src/_h5ai/index.html.jade | 51 ++++++++++++++++--------- 3 files changed, 48 insertions(+), 31 deletions(-) diff --git a/makefile.js b/makefile.js index c24553da..dfaf43be 100644 --- a/makefile.js +++ b/makefile.js @@ -85,16 +85,18 @@ module.exports = function (make) { make.target('build', ['check-version'], 'build all updated files').sync(function () { + var header = '/* ' + pkg.name + ' ' + pkg.version + ' - ' + pkg.url + ' */' + $(src + ': _h5ai/client/js/*.js') .modified(mapSrc, $(src + ': _h5ai/client/js/**')) .includify() - .uglifyjs() + .uglifyjs({header: header}) .WRITE(mapSrc); $(src + ': _h5ai/client/css/*.less') .modified(mapSrc, $(src + ': _h5ai/client/css/**')) .less() - .cssmin() + .cssmin({header: header}) .WRITE(mapSrc); $(src + ': **/*.jade') diff --git a/src/_h5ai/client/css/inc/h5ai-info.less b/src/_h5ai/client/css/inc/h5ai-info.less index c77f1d9b..f662d64e 100644 --- a/src/_h5ai/client/css/inc/h5ai-info.less +++ b/src/_h5ai/client/css/inc/h5ai-info.less @@ -32,15 +32,15 @@ body#h5ai-info { display: block; color: #aaa; - .value { - margin-left: 0.5em; - padding: 2px 4px; - .border-radius(4px); - font-family: @font-family-mono; - letter-spacing: 0.1em; - background-color: @col-widget-back; - border: @border-widget; - } + } + code { + margin: 0 0.2em; + padding: 2px 4px; + .border-radius(4px); + font-family: @font-family-mono; + letter-spacing: 0.1em; + background-color: @col-widget-back; + border: @border-widget; } h1 { font-size: 3.6em; @@ -70,7 +70,7 @@ body#h5ai-info { .test-label { display: inline-block; - width: 300px; + width: 350px; } .test-result { display: inline-block; @@ -90,7 +90,7 @@ body#h5ai-info { margin: 4px 0 12px 12px; font-size: 0.7em; color: #aaa; - width: 310px; + width: 350px; line-height: 1.2em; } } diff --git a/src/_h5ai/index.html.jade b/src/_h5ai/index.html.jade index 6f29d1ee..f9564184 100644 --- a/src/_h5ai/index.html.jade +++ b/src/_h5ai/index.html.jade @@ -28,46 +28,61 @@ html.no-js( lang="en" ) span.build-version version {{pkg.version}} span.build-stamp {{stamp}} span.idx-file Index File: - span.value + code.value - h2 server supports + h2 Server Details ul#tests li.test.php( data-id="php" ) - span.test-label php version + span.test-label PHP version span.test-result ? - div.test-info PHP version >= 5.2.1 + div.test-info PHP version >= 5.2.1 li.test( data-id="cache" ) - span.test-label cache directory + span.test-label Cache directory span.test-result ? - div.test-info web server has write access + div.test-info Web server has write access li.test( data-id="thumbs" ) - span.test-label image thumbs + span.test-label Image thumbs span.test-result ? div.test-info PHP GD extension with JPEG support available li.test( data-id="exif" ) - span.test-label use exif thumbs + span.test-label Use EXIF thumbs span.test-result ? div.test-info PHP EXIF extension available li.test( data-id="ffmpeg" ) - span.test-label movie thumbs + span.test-label Movie thumbs span.test-result ? - div.test-info command 'ffmpeg' available + div.test-info + | Command line program + code ffmpeg + | available li.test( data-id="convert" ) - span.test-label pdf thumbs + span.test-label PDF thumbs span.test-result ? - div.test-info command 'convert' available + div.test-info + | Command line program + code convert + | available li.test( data-id="tar" ) - span.test-label shell tar + span.test-label Shell tar span.test-result ? - div.test-info command 'tar' available + div.test-info + | Command line program + code tar + | available li.test( data-id="zip" ) - span.test-label shell zip + span.test-label Shell zip span.test-result ? - div.test-info command 'zip' available + div.test-info + | Command line program + code zip + | available li.test( data-id="du" ) - span.test-label folder size + span.test-label Folder sizes span.test-result ? - div.test-info command 'du' available + div.test-info + | Command line program + code du + | available div#bottombar.clearfix span.left From 2c8940d062fcc463e31247a7f52a630dcca3f84b Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Fri, 16 Aug 2013 18:18:38 +0200 Subject: [PATCH 11/83] Updates readme. --- README.md | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index d14e00e8..d49e325d 100644 --- a/README.md +++ b/README.md @@ -7,25 +7,21 @@ create [a new issue](http://github.com/lrsjng/h5ai/issues/new) on GitHub! ## Install -( **note:** please don't use files from the `src` folder for installation, -they need to be preprocessed to work correctly ) - +**Note:** please don't use files from the `src` folder for installation, +they need to be preprocessed to work correctly! You'll find a preprocessed package, as well as detailed installation instructions on the [project page](http://larsjung.de/h5ai/). ## Build -( there are repositories for the latest [releases](http://release.larsjung.de/h5ai/) and [dev builds](http://release.larsjung.de/h5ai/dev/) ) - -If you want to build **h5ai** yourself you need to install the build tool [fQuery](http://larsjung.de/fquery/) first: +There are repositories for the latest [releases](http://release.larsjung.de/h5ai/) and [dev builds](http://release.larsjung.de/h5ai/dev/). +But if you want to build **h5ai** yourself you need to install the build tool [fQuery](http://larsjung.de/fquery/) first: > npm install -g fquery This will install fQuery and its command line tool `makejs`. Run `makejs --help` to see if everything -worked fine. - -To clone and build the project run the following commands. +worked fine. To clone and build the project run the following commands. You'll find a new directory `build` including a fresh zipball. > git clone git://github.com/lrsjng/h5ai.git @@ -56,7 +52,7 @@ It profits from these great projects: ## Changelog -( **h5ai** uses [semantic versioning](http://semver.org/) ) +**h5ai** uses [semantic versioning](http://semver.org/). ### develop branch From 9331d38545bbf98b7e7eff6829f759e45545d2e3 Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Fri, 16 Aug 2013 18:29:02 +0200 Subject: [PATCH 12/83] Updates readme. --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index d49e325d..8ad8a00e 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,5 @@ # h5ai -**a modern HTTP web server index for Apache httpd, lighttpd, nginx and Cherokee** - +**h5ai** is a modern HTTP web server index for Apache httpd, lighttpd, nginx and Cherokee. The preferred way to report a bug or make a feature request is to create [a new issue](http://github.com/lrsjng/h5ai/issues/new) on GitHub! From 448ad6a27e995c71774c3ab1e691a82824c08a10 Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Fri, 16 Aug 2013 19:09:37 +0200 Subject: [PATCH 13/83] Fix. --- makefile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/makefile.js b/makefile.js index dfaf43be..bf3e5c25 100644 --- a/makefile.js +++ b/makefile.js @@ -85,7 +85,7 @@ module.exports = function (make) { make.target('build', ['check-version'], 'build all updated files').sync(function () { - var header = '/* ' + pkg.name + ' ' + pkg.version + ' - ' + pkg.url + ' */' + var header = '/* ' + pkg.name + ' ' + pkg.version + ' - ' + pkg.url + ' */'; $(src + ': _h5ai/client/js/*.js') .modified(mapSrc, $(src + ': _h5ai/client/js/**')) From b42cd95e41764225798235ed635a299bfb057fbc Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Sun, 18 Aug 2013 19:59:57 +0200 Subject: [PATCH 14/83] Adds alt attributes to fallback img elements. --- src/_h5ai/server/php/inc/App.php | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/_h5ai/server/php/inc/App.php b/src/_h5ai/server/php/inc/App.php index f699a823..a7c8e2aa 100644 --- a/src/_h5ai/server/php/inc/App.php +++ b/src/_h5ai/server/php/inc/App.php @@ -209,11 +209,13 @@ class App { $html = ""; $html .= ""; if ($folder->get_parent($cache)) { - $html .= ""; + $html .= ""; } foreach ($items as $item) { + $type = $item->is_folder ? "folder" : "default"; + $html .= ""; - $html .= ""; + $html .= ""; $html .= ""; $html .= ""; $html .= ""; From bc7607340c07f14117d02d08963a92f4c3b21657 Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Sun, 18 Aug 2013 21:09:35 +0200 Subject: [PATCH 15/83] Cleans fallback code. --- src/_h5ai/client/css/inc/bottombar.less | 1 - src/_h5ai/client/css/inc/general.less | 9 +++------ src/_h5ai/index.html.jade | 4 ++-- src/_h5ai/server/php/inc/page.php.jade | 4 ++-- 4 files changed, 7 insertions(+), 11 deletions(-) diff --git a/src/_h5ai/client/css/inc/bottombar.less b/src/_h5ai/client/css/inc/bottombar.less index 646a5e33..8603e04f 100644 --- a/src/_h5ai/client/css/inc/bottombar.less +++ b/src/_h5ai/client/css/inc/bottombar.less @@ -46,7 +46,6 @@ margin-left: 16px; } .noBrowserMsg { - display: none; color: @col-error; margin-left: 16px; a, a:active, a:visited { diff --git a/src/_h5ai/client/css/inc/general.less b/src/_h5ai/client/css/inc/general.less index 47307d19..8d2e140a 100644 --- a/src/_h5ai/client/css/inc/general.less +++ b/src/_h5ai/client/css/inc/general.less @@ -28,9 +28,6 @@ @border-widget-sep: 1px solid @col-widget-sep; - - - @font-family: Ubuntu, sans-serif; @font-family-mono: "Ubuntu Mono", monospace; @@ -48,9 +45,9 @@ body { margin: 30px; } -html.js .hideOnJs, html.no-js .hideOnNoJs { +html.js .noJsMsg { display: none; } -html.no-browser .noBrowserMsg { - display: inline !important; +html.browser .noBrowserMsg { + display: none; } diff --git a/src/_h5ai/index.html.jade b/src/_h5ai/index.html.jade index f9564184..b317940f 100644 --- a/src/_h5ai/index.html.jade +++ b/src/_h5ai/index.html.jade @@ -2,7 +2,7 @@ doctype 5 //if lt IE 9 //[if gt IE 8]> //[if gt IE 8]> Date: Sun, 18 Aug 2013 21:40:08 +0200 Subject: [PATCH 16/83] Cleans styles. --- src/_h5ai/client/css/inc/bottombar.less | 2 - src/_h5ai/client/css/inc/dropbox.less | 2 +- src/_h5ai/client/css/inc/general.less | 4 -- src/_h5ai/client/css/inc/h5ai-info.less | 2 +- src/_h5ai/client/css/inc/notify.less | 2 +- src/_h5ai/client/css/inc/preview-img.less | 5 +- src/_h5ai/client/css/inc/preview-txt.less | 4 +- src/_h5ai/client/css/inc/topbar.less | 2 - src/_h5ai/client/css/inc/tree.less | 6 +-- src/_h5ai/client/css/inc/view.less | 6 +-- src/_h5ai/client/css/lib/mixins.less | 57 +++-------------------- 11 files changed, 15 insertions(+), 77 deletions(-) diff --git a/src/_h5ai/client/css/inc/bottombar.less b/src/_h5ai/client/css/inc/bottombar.less index 8603e04f..53ca8340 100644 --- a/src/_h5ai/client/css/inc/bottombar.less +++ b/src/_h5ai/client/css/inc/bottombar.less @@ -7,10 +7,8 @@ left: 0; bottom: 0; padding: 6px 0 8px 0; - // .vert-gradient(rgb(241,241,241), rgb(228,228,228)); background-color: @col-widget-back; border-top: @border-widget; - // .box-shadow(0 -2px 4px 0 rgba(0, 0, 0, 0.15); color: #999; text-align: center; diff --git a/src/_h5ai/client/css/inc/dropbox.less b/src/_h5ai/client/css/inc/dropbox.less index 785dc2b6..ed8dfefa 100644 --- a/src/_h5ai/client/css/inc/dropbox.less +++ b/src/_h5ai/client/css/inc/dropbox.less @@ -1,7 +1,7 @@ #content { border: 1px dashed #fff; - .border-radius(8px); + border-radius: 8px; .transition(border-color 0.2s ease-in-out); &.hint { diff --git a/src/_h5ai/client/css/inc/general.less b/src/_h5ai/client/css/inc/general.less index 8d2e140a..aa80c092 100644 --- a/src/_h5ai/client/css/inc/general.less +++ b/src/_h5ai/client/css/inc/general.less @@ -16,9 +16,6 @@ @col-widget-back-sel: rgba(255,255,255,0.8); @col-widget-sep: @col-border; -// @col-sb-back: rgb(210,210,210); -// @col-sb-thumb: rgb(180,180,180); -// @col-sb-thumb-active: rgb(150,150,150); @col-sb-back: rgba(0,0,0,0.08); @col-sb-thumb: rgba(0,0,0,0.15); @col-sb-thumb-active: rgba(0,0,0,0.25); @@ -38,7 +35,6 @@ html { overflow-y: auto; } body { font-family: @font-family; - // font-weight: 400; font-size: 13px; color: @col; background-color: @col-back; diff --git a/src/_h5ai/client/css/inc/h5ai-info.less b/src/_h5ai/client/css/inc/h5ai-info.less index f662d64e..d231be17 100644 --- a/src/_h5ai/client/css/inc/h5ai-info.less +++ b/src/_h5ai/client/css/inc/h5ai-info.less @@ -36,7 +36,7 @@ body#h5ai-info { code { margin: 0 0.2em; padding: 2px 4px; - .border-radius(4px); + border-radius: 4px; font-family: @font-family-mono; letter-spacing: 0.1em; background-color: @col-widget-back; diff --git a/src/_h5ai/client/css/inc/notify.less b/src/_h5ai/client/css/inc/notify.less index 4ac6545e..8c1b7867 100644 --- a/src/_h5ai/client/css/inc/notify.less +++ b/src/_h5ai/client/css/inc/notify.less @@ -9,6 +9,6 @@ padding: 2px 6px 2px 6px; color: #fff; background-color: rgba(0, 0, 0, 0.2); - .border-radius(4px); + border-radius: 4px; text-align: center; } diff --git a/src/_h5ai/client/css/inc/preview-img.less b/src/_h5ai/client/css/inc/preview-img.less index a4542c22..ce69d923 100644 --- a/src/_h5ai/client/css/inc/preview-img.less +++ b/src/_h5ai/client/css/inc/preview-img.less @@ -24,7 +24,7 @@ max-width: 100%; max-height: 100%; border: 2px solid #fff; - .border-radius(4px); + border-radius: 4px; background-color: @check-white; background-image: @@ -39,7 +39,7 @@ #pv-img-image { border: 0; - .border-radius(0); + border-radius: 0; } } @@ -124,7 +124,6 @@ height: 32px; left: 0; bottom: 0; - // .vert-gradient(rgb(27,27,27), rgb(14,14,14)); background-color: rgb(27,27,27); border-top: 1px solid rgb(45,45,45); } diff --git a/src/_h5ai/client/css/inc/preview-txt.less b/src/_h5ai/client/css/inc/preview-txt.less index bbbb893a..a236ff0a 100644 --- a/src/_h5ai/client/css/inc/preview-txt.less +++ b/src/_h5ai/client/css/inc/preview-txt.less @@ -19,7 +19,7 @@ padding: 10px; background-color: #fff; border: 2px solid #fff; - .border-radius(4px); + border-radius: 4px; text-align: left; overflow: auto; position: relative; @@ -227,6 +227,6 @@ height: 32px; left: 0; bottom: 0; - .vert-gradient(rgb(27,27,27), rgb(14,14,14)); + background-color: rgb(27,27,27); border-top: 1px solid rgb(45,45,45); } diff --git a/src/_h5ai/client/css/inc/topbar.less b/src/_h5ai/client/css/inc/topbar.less index 04b52559..e0da03c6 100644 --- a/src/_h5ai/client/css/inc/topbar.less +++ b/src/_h5ai/client/css/inc/topbar.less @@ -6,10 +6,8 @@ min-height: 30px; left: 0; top: 0; - // .vert-gradient(rgb(241,241,241), rgb(228,228,228)); background-color: @col-widget-back; border-bottom: @border-widget; - // .box-shadow(0 2px 4px 0 rgba(0, 0, 0, 0.15); } diff --git a/src/_h5ai/client/css/inc/tree.less b/src/_h5ai/client/css/inc/tree.less index 2f258b6f..be456672 100644 --- a/src/_h5ai/client/css/inc/tree.less +++ b/src/_h5ai/client/css/inc/tree.less @@ -12,15 +12,12 @@ border-right: @border-widget; .sp-scrollbar { - // margin: 8px 8px 8px 0; width: 6px; background-color: @col-sb-back; - // .border-radius(3px); cursor: pointer; .sp-thumb { background-color: @col-sb-thumb; - // .border-radius(3px); } &.active .sp-thumb { background-color: @col-sb-thumb-active; @@ -63,14 +60,13 @@ padding: 4px 6px; color: #555; border: 1px solid rgba(0,0,0,0); - .border-radius(3px); + border-radius: 3px; text-decoration: none; opacity: 0.7; &:hover, &.hover { color: @col-hover; background-color: @col-widget-back-hover; - // border-color: rgba(0,0,0,0.05); opacity: 1; } } diff --git a/src/_h5ai/client/css/inc/view.less b/src/_h5ai/client/css/inc/view.less index f75c44c7..14103a72 100644 --- a/src/_h5ai/client/css/inc/view.less +++ b/src/_h5ai/client/css/inc/view.less @@ -76,7 +76,6 @@ overflow: hidden; &:hover, &.hover { - // color: #e80; color: @col-hover; background-color: @item-background-col-hover; border-color: @item-border-col-hover; @@ -86,8 +85,6 @@ &.selected:not(.selecting), &.selecting:not(.selected) { a, a:active, a:visited { - // color: #000; - // color: @col-hover; background-color: @item-background-col-sel; border-color: @item-border-col-sel; @@ -105,7 +102,6 @@ color: #aaa; &:hover, &.hover { - // color: #e80; color: @col-hover; } } @@ -131,7 +127,7 @@ img { &.thumb { - .box-shadow(0 0 0 1px #ddd); + box-shadow: 0 0 0 1px #ddd; } } diff --git a/src/_h5ai/client/css/lib/mixins.less b/src/_h5ai/client/css/lib/mixins.less index e1ecd862..82978299 100644 --- a/src/_h5ai/client/css/lib/mixins.less +++ b/src/_h5ai/client/css/lib/mixins.less @@ -1,57 +1,12 @@ -.border-radius (@radius) { - -webkit-border-radius: @radius; /* Saf3-4, iOS 1-3.2, Android <1.6 */ - -moz-border-radius: @radius; /* FF1-3.6 */ - border-radius: @radius; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */ -} - - -.background-clip () { - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; -} - - -.box-shadow (@shadow) { - -webkit-box-shadow: @shadow; /* Saf3-4 */ - -moz-box-shadow: @shadow; /* FF3.5 - 3.6 */ - box-shadow: @shadow; /* Opera 10.5, IE9, FF4+, Chrome 10+ */ -} - - .transition (@transition) { - -webkit-transition: @transition; /* Saf3.2+, Chrome */ - -moz-transition: @transition; /* FF4+ */ - -ms-transition: @transition; /* IE10? */ - -o-transition: @transition; /* Opera 10.5+ */ - transition: @transition; + -webkit-transition: @transition; + transition: @transition; } - .transform (@transform) { - -webkit-transform: @transform; /* Saf3.1+, Chrome */ - -moz-transform: @transform; /* FF3.5+ */ - -ms-transform: @transform; /* IE9 */ - -o-transform: @transform; /* Opera 10.5 */ - transform: @transform; - zoom: 1; -} - - -.vert-gradient (@top, @bottom) { - background-color: @top; - background-image: -webkit-gradient(linear, left top, left bottom, from(@top), to(@bottom)); /* Saf4+, Chrome */ - background-image: -webkit-linear-gradient(top, @top, @bottom); /* Chrome 10+, Saf5.1+, iOS 5+ */ - background-image: -moz-linear-gradient(top, @top, @bottom); /* FF3.6 */ - background-image: -ms-linear-gradient(top, @top, @bottom); /* IE10 */ - background-image: -o-linear-gradient(top, @top, @bottom); /* Opera 11.10+ */ - background-image: linear-gradient(top, @top, @bottom); -} - - -.background-size (@size) { - -webkit-background-size: @size; /* Saf3-4 */ - -moz-background-size: @size; /* FF3.6 */ - background-size: @size; /* Opera, IE9, Saf5, Chrome, FF4 */ + -webkit-transform: @transform; + -ms-transform: @transform; + transform: @transform; + zoom: 1; } From 0acd3efaadb8bfe8d6d269815b7664ace4d64264 Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Mon, 19 Aug 2013 14:03:23 +0200 Subject: [PATCH 17/83] Styles. --- src/_h5ai/client/css/inc/preview-img.less | 6 +- src/_h5ai/client/css/inc/preview-txt.less | 4 +- src/_h5ai/client/css/inc/preview.less | 110 ++++++++++++++++++++++ src/_h5ai/client/css/styles.less | 1 + 4 files changed, 116 insertions(+), 5 deletions(-) create mode 100644 src/_h5ai/client/css/inc/preview.less diff --git a/src/_h5ai/client/css/inc/preview-img.less b/src/_h5ai/client/css/inc/preview-img.less index ce69d923..2ef51489 100644 --- a/src/_h5ai/client/css/inc/preview-img.less +++ b/src/_h5ai/client/css/inc/preview-img.less @@ -23,8 +23,7 @@ #pv-img-image { max-width: 100%; max-height: 100%; - border: 2px solid #fff; - border-radius: 4px; + border: 1px solid #fff; background-color: @check-white; background-image: @@ -39,12 +38,13 @@ #pv-img-image { border: 0; - border-radius: 0; } } #pv-img-close { position: fixed; + left: 0; + top: 0; width: 100%; height: 100%; cursor: pointer; diff --git a/src/_h5ai/client/css/inc/preview-txt.less b/src/_h5ai/client/css/inc/preview-txt.less index a236ff0a..bff27626 100644 --- a/src/_h5ai/client/css/inc/preview-txt.less +++ b/src/_h5ai/client/css/inc/preview-txt.less @@ -9,6 +9,7 @@ z-index: 100; background-color: rgba(0,0,0,0.5); + .transition(background-color 0.3s ease-in-out); text-align: center; } @@ -18,8 +19,7 @@ margin: 0 auto; padding: 10px; background-color: #fff; - border: 2px solid #fff; - border-radius: 4px; + border: 1px solid #fff; text-align: left; overflow: auto; position: relative; diff --git a/src/_h5ai/client/css/inc/preview.less b/src/_h5ai/client/css/inc/preview.less new file mode 100644 index 00000000..79789342 --- /dev/null +++ b/src/_h5ai/client/css/inc/preview.less @@ -0,0 +1,110 @@ + +#pv-overlay { + display: none; + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: 100; + + background-color: rgba(0,0,0,0.5); + .transition(background-color 0.3s ease-in-out); + + text-align: center; +} + +#pv-overlay.fullscreen { + background-color: #111; +} + +#pv-spinner { + position: fixed; +} + +#pv-close { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + cursor: pointer; +} + +#pv-prev { + position: fixed; + cursor: pointer; +} + +#pv-next { + position: fixed; + cursor: pointer; +} + +#pv-buttons { + list-style: none; + list-style-image: none; + margin: 0; + padding: 0; + + img { + position: relative; + top: -2px; + width: 16px; + height: 16px; + } + img + span, img + input { + margin-left: 6px; + } + input { + background-color: rgba(255,255,255,0.1); + border: none; + color: #ccc; + } + + .bar-label { + display: block; + color: #ccc; + height: 30px; + line-height: 30px; + padding: 0 10px; + opacity: 0.7; + .transition(all 0.2s ease-in-out); + } + + .bar-highlight { + background-color: rgba(255,255,255,0.1); + opacity: 1.0; + } + + @bar-sep-border: 1px solid rgba(255,255,255,0.08); + + .bar-button { + .bar-label; + cursor: pointer; + &:hover, &.hover { + .bar-highlight; + } + } + + .bar-left { + float: left; + border-right: @bar-sep-border; + } + + .bar-right { + float: right; + border-left: @bar-sep-border; + } +} + +#pv-bottombar { + position: fixed; + z-index: 5; + width: 100%; + height: 32px; + left: 0; + bottom: 0; + background-color: rgb(27,27,27); + border-top: 1px solid rgb(45,45,45); +} diff --git a/src/_h5ai/client/css/styles.less b/src/_h5ai/client/css/styles.less index de6b62e8..2eeb4cb2 100644 --- a/src/_h5ai/client/css/styles.less +++ b/src/_h5ai/client/css/styles.less @@ -13,6 +13,7 @@ @import "inc/l10n"; @import "inc/tree"; @import "inc/qrcode"; +@import "inc/preview"; @import "inc/preview-img"; @import "inc/preview-txt"; @import "inc/notify"; From 8dbd7dd2a7f2d9cb24ea8042fa5f416621ecad0a Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Tue, 20 Aug 2013 19:21:42 +0200 Subject: [PATCH 18/83] Adds generic preview. --- src/_h5ai/client/js/inc/ext/preview.js | 247 +++++++++++++++++++++++++ 1 file changed, 247 insertions(+) create mode 100644 src/_h5ai/client/js/inc/ext/preview.js diff --git a/src/_h5ai/client/js/inc/ext/preview.js b/src/_h5ai/client/js/inc/ext/preview.js new file mode 100644 index 00000000..bcfef0ca --- /dev/null +++ b/src/_h5ai/client/js/inc/ext/preview.js @@ -0,0 +1,247 @@ + +modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'core/store', 'core/event', 'core/location'], function (_, $, allsettings, resource, store, event, location) { + + var settings = _.extend({ + enabled: true + }, allsettings['preview']), + + template = '
' + + '
' + + '' + + '
' + + '
' + + '' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
    ' + + '
  • ' + + '
  • ' + + '
  • ' + + '
  • ' + + '
  • ' + + '
  • ' + + '
' + + '
' + + '
', + + storekey = 'preview.isFullscreen', + + currentEntries = [], + currentIdx = 0, + isFullscreen = store.get(storekey) || false, + + adjustSize = function () { + + var rect = $(window).fracs('viewport'), + $container = $('#pv-content'), + $spinner = $('#pv-spinner'), + $spinnerimg = $spinner.find('img').width(100).height(100), + $img = $('#pv-image'), + margin = isFullscreen ? 0 : 20, + barheight = isFullscreen ? 0 : 31; + + $container.add($spinner).css({ + width: rect.width - 2 * margin, + height: rect.height - 2 * margin - barheight, + left: margin, + top: margin + }); + + var lr = ($container.width() - $img.width()) / 2, + tb = ($container.height() - $img.height()) / 2; + + $img.css({ + margin: '' + tb + 'px ' + lr + 'px' + }); + $spinnerimg.css({ + margin: '' + (($spinner.height() - $spinnerimg.height()) / 2) + 'px ' + (($spinner.width() - $spinnerimg.height()) / 2) + 'px' + }); + + rect = $img.fracs('rect'); + if (!rect) { + return; + } + rect = rect.relativeTo($('#pv-overlay').fracs('rect')); + + $('#pv-prev').css({ + left: rect.left, + top: rect.top, + width: rect.width / 2, + height: rect.height + }); + $('#pv-next').css({ + left: rect.left + rect.width / 2, + top: rect.top, + width: rect.width / 2, + height: rect.height + }); + + $('#pv-bar-percent').text('' + (100 * $img.width() / $img[0].naturalWidth).toFixed(0) + '%'); + if (isFullscreen) { + $('#pv-overlay').addClass('fullscreen'); + $('#pv-bar-fullscreen').find('img').attr('src', resource.image('preview/no-fullscreen')); + $('#pv-bottombar').fadeOut(400); + } else { + $('#pv-overlay').removeClass('fullscreen'); + $('#pv-bar-fullscreen').find('img').attr('src', resource.image('preview/fullscreen')); + $('#pv-bottombar').fadeIn(200); + } + }, + + onEnter = function (items, idx) { + + $(window).on('keydown', onKeydown); + $('#pv-image').hide(); + $('#pv-overlay').stop(true, true).fadeIn(200); + + currentEntries = items; + adjustSize(); + }, + + onNext = function () { + + if (_.isFunction(onIndexChange)) { + onIndexChange(1); + } + }, + + onPrevious = function () { + + if (_.isFunction(onIndexChange)) { + onIndexChange(-1); + } + }, + + onExit = function () { + + $(window).off('keydown', onKeydown); + $('#pv-overlay').stop(true, true).fadeOut(200); + }, + + onFullscreen = function () { + + isFullscreen = !isFullscreen; + store.put(storekey, isFullscreen); + + adjustSize(); + }, + + onKeydown = function (event) { + + var key = event.which; + + if (key === 27) { // esc + event.preventDefault(); + event.stopImmediatePropagation(); + onExit(); + } else if (key === 8 || key === 37 || key === 40) { // backspace, left, down + event.preventDefault(); + event.stopImmediatePropagation(); + onPrevious(); + } else if (key === 13 || key === 32 || key === 38 || key === 39) { // enter, space, up, right + event.preventDefault(); + event.stopImmediatePropagation(); + onNext(); + } else if (key === 70) { // f + event.preventDefault(); + event.stopImmediatePropagation(); + onFullscreen(); + } + }, + + setIndex = function (idx, total) { + + if (_.isNumber(idx)) { + $('#pv-bar-idx').show().text('' + idx + (_.isNumber(total) ? '/' + total : '')); + } else { + $('#pv-bar-idx').hide(); + } + }, + + setLabels = function (labels) { + + $('#pv-buttons .bar-left').remove(); + _.each(labels, function (label) { + + $('
  • ') + .addClass('bar-left bar-label') + .text(label) + .appendTo('#pv-buttons'); + }); + }, + + onIndexChange = null, + setOnIndexChange = function (fn) { + + onIndexChange = fn; + }, + + init = function () { + + if (!settings.enabled) { + return; + } + + $(template).appendTo('body'); + $('#pv-bar-prev, #pv-prev').on('click', onPrevious); + $('#pv-bar-next, #pv-next').on('click', onNext); + $('#pv-bar-close, #pv-close').on('click', onExit); + $('#pv-bar-fullscreen').on('click', onFullscreen); + + $('#pv-prev') + .on('mouseenter', function () { + $('#pv-bar-prev').addClass('hover'); + }) + .on('mouseleave', function () { + $('#pv-bar-prev').removeClass('hover'); + }); + + $('#pv-next') + .on('mouseenter', function () { + $('#pv-bar-next').addClass('hover'); + }) + .on('mouseleave', function () { + $('#pv-bar-next').removeClass('hover'); + }); + + $('#pv-close') + .on('mouseenter', function () { + $('#pv-bar-close').addClass('hover'); + }) + .on('mouseleave', function () { + $('#pv-bar-close').removeClass('hover'); + }); + + $('#pv-overlay') + .on('keydown', onKeydown) + .on('mousemove', function (event) { + + if (isFullscreen) { + var rect = $('#pv-overlay').fracs('rect'); + + if (rect.bottom - event.pageY < 64) { + $('#pv-bottombar').fadeIn(200); + } else { + $('#pv-bottombar').fadeOut(400); + } + } + }) + .on('click mousedown mousemove keydown keypress', function (event) { + + event.stopImmediatePropagation(); + }); + + $(window).on('resize load', adjustSize); + }; + + init(); + + return { + setIndex: setIndex, + setLabels: setLabels, + setOnIndexChange: setOnIndexChange + }; +}); From 25c131f875fd6daf2a7279857a42fa3d56ce1c7b Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Wed, 21 Aug 2013 14:04:20 +0200 Subject: [PATCH 19/83] Updates image preview. --- src/_h5ai/client/css/inc/preview-img.less | 117 +-------- src/_h5ai/client/css/inc/preview.less | 47 +++- src/_h5ai/client/js/inc/ext/preview-img.js | 263 ++++----------------- src/_h5ai/client/js/inc/ext/preview.js | 161 +++++++------ 4 files changed, 180 insertions(+), 408 deletions(-) diff --git a/src/_h5ai/client/css/inc/preview-img.less b/src/_h5ai/client/css/inc/preview-img.less index 2ef51489..7ca5b28a 100644 --- a/src/_h5ai/client/css/inc/preview-img.less +++ b/src/_h5ai/client/css/inc/preview-img.less @@ -1,29 +1,11 @@ -#pv-img-overlay { - display: none; - position: fixed; - left: 0; - top: 0; - right: 0; - bottom: 0; - z-index: 100; - - background-color: rgba(0,0,0,0.5); - .transition(background-color 0.3s ease-in-out); - - text-align: center; -} - -#pv-img-content, #pv-spinner { - position: fixed; -} - @check-white: #f8f8f8; @check-black: #e8e8e8; #pv-img-image { + position: absolute; + max-width: 100%; max-height: 100%; - border: 1px solid #fff; background-color: @check-white; background-image: @@ -32,98 +14,3 @@ background-size: 60px 60px; background-position: 0 0, 30px 30px } - -#pv-img-overlay.fullscreen { - background-color: #111; - - #pv-img-image { - border: 0; - } -} - -#pv-img-close { - position: fixed; - left: 0; - top: 0; - width: 100%; - height: 100%; - cursor: pointer; -} - -#pv-img-prev { - position: fixed; - cursor: pointer; -} - -#pv-img-next { - position: fixed; - cursor: pointer; -} - -#pv-img-buttons, #pv-img-topbuttons { - list-style: none; - list-style-image: none; - margin: 0; - padding: 0; - - img { - position: relative; - top: -2px; - width: 16px; - height: 16px; - } - img + span, img + input { - margin-left: 6px; - } - input { - background-color: rgba(255,255,255,0.1); - border: none; - color: #ccc; - } - - .bar-label { - display: block; - color: #ccc; - height: 30px; - line-height: 30px; - padding: 0 10px; - opacity: 0.7; - .transition(all 0.2s ease-in-out); - } - - .bar-highlight { - background-color: rgba(255,255,255,0.1); - opacity: 1.0; - } - - @bar-sep-border: 1px solid rgba(255,255,255,0.08); - - .bar-button { - .bar-label; - cursor: pointer; - &:hover, &.hover { - .bar-highlight; - } - } - - .bar-left { - float: left; - border-right: @bar-sep-border; - } - - .bar-right { - float: right; - border-left: @bar-sep-border; - } -} - -#pv-img-bottombar { - position: fixed; - z-index: 5; - width: 100%; - height: 32px; - left: 0; - bottom: 0; - background-color: rgb(27,27,27); - border-top: 1px solid rgb(45,45,45); -} diff --git a/src/_h5ai/client/css/inc/preview.less b/src/_h5ai/client/css/inc/preview.less index 79789342..3ca1895f 100644 --- a/src/_h5ai/client/css/inc/preview.less +++ b/src/_h5ai/client/css/inc/preview.less @@ -18,12 +18,23 @@ background-color: #111; } -#pv-spinner { - position: fixed; +#pv-content { + position: absolute; + overflow: hidden; } -#pv-close { - position: fixed; +#pv-spinner { + position: absolute; + + img { + width: 100px; + height: 100px; + margin: -50px -50px; + } +} + +#pv-close-area { + position: absolute; left: 0; top: 0; width: 100%; @@ -31,14 +42,32 @@ cursor: pointer; } -#pv-prev { - position: fixed; +#pv-prev-area, #pv-next-area { + position: absolute; + top: 50%; cursor: pointer; + opacity: 0.5; + .transition(all 0.2s ease-in-out); + + img { + background-color: rgba(0,0,0,0.5); + border-radius: 8px; + width: 48px; + height: 48px; + margin: -24px 0; + } + + &:hover { + opacity: 1; + } } -#pv-next { - position: fixed; - cursor: pointer; +#pv-prev-area { + left: 8px; +} + +#pv-next-area { + right: 8px; } #pv-buttons { diff --git a/src/_h5ai/client/js/inc/ext/preview-img.js b/src/_h5ai/client/js/inc/ext/preview-img.js index bf693a9b..ead5a717 100644 --- a/src/_h5ai/client/js/inc/ext/preview-img.js +++ b/src/_h5ai/client/js/inc/ext/preview-img.js @@ -1,100 +1,11 @@ -modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource', 'core/store', 'core/event', 'core/location'], function (_, $, allsettings, resource, store, event, location) { +modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/store', 'core/event', 'ext/preview'], function (_, $, allsettings, store, event, preview) { var settings = _.extend({ enabled: false, types: ['bmp', 'gif', 'ico', 'image', 'jpg', 'png', 'tiff'] }, allsettings['preview-img']), - template = '
    ' + - '
    ' + - '' + - '
    ' + - '
    ' + - '' + - '
    ' + - '
    ' + - '
    ' + - '
    ' + - '
    ' + - '
      ' + - '
    • ' + - '
    • ' + - '
    • ' + - '
    • ' + - '
    • ' + - '
    • ' + - '
    • ' + - '
    • ' + - '
    • ' + - '
    ' + - '
    ' + - '
    ', - - storekey = 'preview-img.isFullscreen', - - currentEntries = [], - currentIdx = 0, - isFullscreen = store.get(storekey) || false, - - adjustSize = function () { - - var rect = $(window).fracs('viewport'), - $container = $('#pv-img-content'), - $spinner = $('#pv-spinner'), - $spinnerimg = $spinner.find('img').width(100).height(100), - $img = $('#pv-img-image'), - margin = isFullscreen ? 0 : 20, - barheight = isFullscreen ? 0 : 31; - - $container.add($spinner).css({ - width: rect.width - 2 * margin, - height: rect.height - 2 * margin - barheight, - left: margin, - top: margin - }); - - var lr = ($container.width() - $img.width()) / 2, - tb = ($container.height() - $img.height()) / 2; - - $img.css({ - margin: '' + tb + 'px ' + lr + 'px' - }); - $spinnerimg.css({ - margin: '' + (($spinner.height() - $spinnerimg.height()) / 2) + 'px ' + (($spinner.width() - $spinnerimg.height()) / 2) + 'px' - }); - - rect = $img.fracs('rect'); - if (!rect) { - return; - } - rect = rect.relativeTo($('#pv-img-overlay').fracs('rect')); - - $('#pv-img-prev').css({ - left: rect.left, - top: rect.top, - width: rect.width / 2, - height: rect.height - }); - $('#pv-img-next').css({ - left: rect.left + rect.width / 2, - top: rect.top, - width: rect.width / 2, - height: rect.height - }); - - $('#pv-img-bar-percent').text('' + (100 * $img.width() / $img[0].naturalWidth).toFixed(0) + '%'); - if (isFullscreen) { - $('#pv-img-overlay').addClass('fullscreen'); - $('#pv-img-bar-fullscreen').find('img').attr('src', resource.image('preview/no-fullscreen')); - $('#pv-img-bottombar').fadeOut(400); - } else { - $('#pv-img-overlay').removeClass('fullscreen'); - $('#pv-img-bar-fullscreen').find('img').attr('src', resource.image('preview/fullscreen')); - $('#pv-img-bottombar').fadeIn(200); - } - }, - preloadImg = function (src, callback) { var $img = $('') @@ -106,94 +17,69 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource', .attr('src', src); }, - onIndexChange = function (idx) { - - currentIdx = (idx + currentEntries.length) % currentEntries.length; - - var $container = $('#pv-img-content'), - $img = $('#pv-img-image'), - src = currentEntries[currentIdx].absHref, - spinnerTimeout = setTimeout(function () { $('#pv-spinner').show(); }, 200); - - preloadImg(src, function ($preloaded_img) { - - clearTimeout(spinnerTimeout); - $('#pv-spinner').hide(); - - $('#pv-img-image').fadeOut(100, function () { - - $('#pv-img-image').replaceWith($preloaded_img.hide()); - $preloaded_img.attr('id', 'pv-img-image').fadeIn(200); - - // small timeout, so $preloaded_img is visible and therefore $preloaded_img.width is available - setTimeout(function () { - - adjustSize(); - $('#pv-img-bar-label').text(currentEntries[currentIdx].label); - $('#pv-img-bar-size').text('' + $preloaded_img[0].naturalWidth + 'x' + $preloaded_img[0].naturalHeight); - $('#pv-img-bar-idx').text('' + (currentIdx + 1) + ' / ' + currentEntries.length); - $('#pv-img-bar-original').find('a').attr('href', currentEntries[currentIdx].absHref); - }, 10); - }); - }); - }, - onEnter = function (items, idx) { - $(window).on('keydown', onKeydown); - $('#pv-img-image').hide(); - $('#pv-img-overlay').stop(true, true).fadeIn(200); + var currentItems = items, + currentIdx = idx, + currentItem = items[idx], - currentEntries = items; - adjustSize(); - onIndexChange(idx); - }, + onAdjustSize = function () { - onNext = function () { + var $content = $('#pv-content'), + $img = $('#pv-img-image'); - onIndexChange(currentIdx + 1); - }, + if ($img.length) { - onPrevious = function () { + $img.css({ + 'left': '' + (($content.width()-$img.width())*0.5) + 'px', + 'top': '' + (($content.height()-$img.height())*0.5) + 'px' + }); - onIndexChange(currentIdx - 1); - }, + preview.setLabels([ + currentItem.label, + '' + $img[0].naturalWidth + 'x' + $img[0].naturalHeight, + '' + (100 * $img.width() / $img[0].naturalWidth).toFixed(0) + '%' + ]); + } + }, - onExit = function () { + onIdxChange = function (rel) { - $(window).off('keydown', onKeydown); - $('#pv-img-overlay').stop(true, true).fadeOut(200); - }, + currentIdx = (currentIdx + rel + currentItems.length) % currentItems.length; + currentItem = currentItems[currentIdx]; - onFullscreen = function () { + var spinnerTimeout = setTimeout(function () { preview.showSpinner(true); }, 200); - isFullscreen = !isFullscreen; - store.put(storekey, isFullscreen); + preloadImg(currentItem.absHref, function ($preloaded_img) { - adjustSize(); - }, + clearTimeout(spinnerTimeout); + preview.showSpinner(false); - onKeydown = function (event) { + $('#pv-content').fadeOut(100, function () { - var key = event.which; + $('#pv-content').empty().append($preloaded_img.attr('id', 'pv-img-image')).fadeIn(200); - if (key === 27) { // esc - event.preventDefault(); - event.stopImmediatePropagation(); - onExit(); - } else if (key === 8 || key === 37 || key === 40) { // backspace, left, down - event.preventDefault(); - event.stopImmediatePropagation(); - onPrevious(); - } else if (key === 13 || key === 32 || key === 38 || key === 39) { // enter, space, up, right - event.preventDefault(); - event.stopImmediatePropagation(); - onNext(); - } else if (key === 70) { // f - event.preventDefault(); - event.stopImmediatePropagation(); - onFullscreen(); - } + // small timeout, so $preloaded_img is visible and therefore $preloaded_img.width is available + setTimeout(function () { + + onAdjustSize(); + + preview.setIndex(currentIdx + 1, currentItems.length); + preview.setLabels([ + currentItem.label, + '' + $preloaded_img[0].naturalWidth + 'x' + $preloaded_img[0].naturalHeight, + '' + (100 * $preloaded_img.width() / $preloaded_img[0].naturalWidth).toFixed(0) + '%' + ]); + preview.setRawLink(currentItem.absHref); + }, 10); + }); + }); + }; + + onIdxChange(0); + preview.setOnIndexChange(onIdxChange); + preview.setOnAdjustSize(onAdjustSize); + preview.enter(); }, initItem = function (item) { @@ -230,59 +116,8 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource', return; } - $(template).appendTo('body'); - $('#pv-img-bar-prev, #pv-img-prev').on('click', onPrevious); - $('#pv-img-bar-next, #pv-img-next').on('click', onNext); - $('#pv-img-bar-close, #pv-img-close').on('click', onExit); - $('#pv-img-bar-fullscreen').on('click', onFullscreen); - - $('#pv-img-prev') - .on('mouseenter', function () { - $('#pv-img-bar-prev').addClass('hover'); - }) - .on('mouseleave', function () { - $('#pv-img-bar-prev').removeClass('hover'); - }); - - $('#pv-img-next') - .on('mouseenter', function () { - $('#pv-img-bar-next').addClass('hover'); - }) - .on('mouseleave', function () { - $('#pv-img-bar-next').removeClass('hover'); - }); - - $('#pv-img-close') - .on('mouseenter', function () { - $('#pv-img-bar-close').addClass('hover'); - }) - .on('mouseleave', function () { - $('#pv-img-bar-close').removeClass('hover'); - }); - - $('#pv-img-overlay') - .on('keydown', onKeydown) - .on('mousemove', function (event) { - - if (isFullscreen) { - var rect = $('#pv-img-overlay').fracs('rect'); - - if (rect.bottom - event.pageY < 64) { - $('#pv-img-bottombar').fadeIn(200); - } else { - $('#pv-img-bottombar').fadeOut(400); - } - } - }) - .on('click mousedown mousemove keydown keypress', function (event) { - - event.stopImmediatePropagation(); - }); - event.sub('location.changed', onLocationChanged); event.sub('location.refreshed', onLocationRefreshed); - - $(window).on('resize load', adjustSize); }; init(); diff --git a/src/_h5ai/client/js/inc/ext/preview.js b/src/_h5ai/client/js/inc/ext/preview.js index bcfef0ca..7e2e4016 100644 --- a/src/_h5ai/client/js/inc/ext/preview.js +++ b/src/_h5ai/client/js/inc/ext/preview.js @@ -6,19 +6,15 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor }, allsettings['preview']), template = '
    ' + - '
    ' + - '' + - '
    ' + - '
    ' + - '' + - '
    ' + - '
    ' + - '
    ' + - '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + '
    ' + '
      ' + '
    • ' + - '
    • ' + + '
    • ' + '
    • ' + '
    • ' + '
    • ' + @@ -38,69 +34,49 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor var rect = $(window).fracs('viewport'), $container = $('#pv-content'), $spinner = $('#pv-spinner'), - $spinnerimg = $spinner.find('img').width(100).height(100), - $img = $('#pv-image'), margin = isFullscreen ? 0 : 20, barheight = isFullscreen ? 0 : 31; - $container.add($spinner).css({ + $container.css({ width: rect.width - 2 * margin, height: rect.height - 2 * margin - barheight, left: margin, top: margin }); - var lr = ($container.width() - $img.width()) / 2, - tb = ($container.height() - $img.height()) / 2; - - $img.css({ - margin: '' + tb + 'px ' + lr + 'px' - }); - $spinnerimg.css({ - margin: '' + (($spinner.height() - $spinnerimg.height()) / 2) + 'px ' + (($spinner.width() - $spinnerimg.height()) / 2) + 'px' + $spinner.css({ + left: rect.width * 0.5, + top: rect.height * 0.5 }); - rect = $img.fracs('rect'); - if (!rect) { - return; - } - rect = rect.relativeTo($('#pv-overlay').fracs('rect')); - - $('#pv-prev').css({ - left: rect.left, - top: rect.top, - width: rect.width / 2, - height: rect.height - }); - $('#pv-next').css({ - left: rect.left + rect.width / 2, - top: rect.top, - width: rect.width / 2, - height: rect.height - }); - - $('#pv-bar-percent').text('' + (100 * $img.width() / $img[0].naturalWidth).toFixed(0) + '%'); if (isFullscreen) { $('#pv-overlay').addClass('fullscreen'); $('#pv-bar-fullscreen').find('img').attr('src', resource.image('preview/no-fullscreen')); - $('#pv-bottombar').fadeOut(400); } else { $('#pv-overlay').removeClass('fullscreen'); $('#pv-bar-fullscreen').find('img').attr('src', resource.image('preview/fullscreen')); - $('#pv-bottombar').fadeIn(200); + } + + if (_.isFunction(onAdjustSize)) { + onAdjustSize(1); } }, - onEnter = function (items, idx) { + onEnter = function () { $(window).on('keydown', onKeydown); - $('#pv-image').hide(); + $('#pv-content').empty(); $('#pv-overlay').stop(true, true).fadeIn(200); - currentEntries = items; adjustSize(); }, + onExit = function () { + + $(window).off('keydown', onKeydown); + $('#pv-overlay').stop(true, true).fadeOut(200); + }, + onNext = function () { if (_.isFunction(onIndexChange)) { @@ -115,10 +91,19 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor } }, - onExit = function () { + fsTimer = null, + onMouseMove = function () { - $(window).off('keydown', onKeydown); - $('#pv-overlay').stop(true, true).fadeOut(200); + clearTimeout(fsTimer); + $('#pv-bottombar, #pv-prev-area, #pv-next-area').fadeIn(200); + + if (isFullscreen) { + + fsTimer = setTimeout(function () { + + $('#pv-bottombar, #pv-prev-area, #pv-next-area').fadeOut(400); + }, 2000); + } }, onFullscreen = function () { @@ -126,6 +111,7 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor isFullscreen = !isFullscreen; store.put(storekey, isFullscreen); + onMouseMove(); adjustSize(); }, @@ -152,12 +138,31 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor } }, + enter = function () { + + onEnter(); + }, + + exit = function () { + + onExit(); + }, + setIndex = function (idx, total) { if (_.isNumber(idx)) { - $('#pv-bar-idx').show().text('' + idx + (_.isNumber(total) ? '/' + total : '')); + $('#pv-bar-idx').text('' + idx + (_.isNumber(total) ? '/' + total : '')).show(); } else { - $('#pv-bar-idx').hide(); + $('#pv-bar-idx').text('').hide(); + } + }, + + setRawLink = function (href) { + + if (href) { + $('#pv-bar-raw').find('a').attr('href', href).end().show(); + } else { + $('#pv-bar-raw').find('a').attr('href', '#').end().hide(); } }, @@ -179,6 +184,25 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor onIndexChange = fn; }, + onAdjustSize = null, + setOnAdjustSize = function (fn) { + + onAdjustSize = fn; + }, + + showSpinner = function (show, millis) { + + if (!_.isNumber(millis)) { + millis = 400; + } + + if (show) { + $('#pv-spinner').stop(true, true).fadeIn(millis); + } else { + $('#pv-spinner').stop(true, true).fadeOut(millis); + } + }, + init = function () { if (!settings.enabled) { @@ -186,12 +210,14 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor } $(template).appendTo('body'); - $('#pv-bar-prev, #pv-prev').on('click', onPrevious); - $('#pv-bar-next, #pv-next').on('click', onNext); - $('#pv-bar-close, #pv-close').on('click', onExit); + + $('#pv-spinner').hide(); + $('#pv-bar-prev, #pv-prev-area').on('click', onPrevious); + $('#pv-bar-next, #pv-next-area').on('click', onNext); + $('#pv-bar-close, #pv-close-area').on('click', onExit); $('#pv-bar-fullscreen').on('click', onFullscreen); - $('#pv-prev') + $('#pv-prev-area') .on('mouseenter', function () { $('#pv-bar-prev').addClass('hover'); }) @@ -199,7 +225,7 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor $('#pv-bar-prev').removeClass('hover'); }); - $('#pv-next') + $('#pv-next-area') .on('mouseenter', function () { $('#pv-bar-next').addClass('hover'); }) @@ -207,7 +233,7 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor $('#pv-bar-next').removeClass('hover'); }); - $('#pv-close') + $('#pv-close-area') .on('mouseenter', function () { $('#pv-bar-close').addClass('hover'); }) @@ -215,20 +241,10 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor $('#pv-bar-close').removeClass('hover'); }); + var fsTimer = null; $('#pv-overlay') .on('keydown', onKeydown) - .on('mousemove', function (event) { - - if (isFullscreen) { - var rect = $('#pv-overlay').fracs('rect'); - - if (rect.bottom - event.pageY < 64) { - $('#pv-bottombar').fadeIn(200); - } else { - $('#pv-bottombar').fadeOut(400); - } - } - }) + .on('mousemove', onMouseMove) .on('click mousedown mousemove keydown keypress', function (event) { event.stopImmediatePropagation(); @@ -240,8 +256,13 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor init(); return { + enter: enter, + exit: exit, setIndex: setIndex, + setRawLink: setRawLink, setLabels: setLabels, - setOnIndexChange: setOnIndexChange + setOnIndexChange: setOnIndexChange, + setOnAdjustSize: setOnAdjustSize, + showSpinner: showSpinner }; }); From cdbf2e21041f59c1ba84887621dc1be94d39bbc1 Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Wed, 21 Aug 2013 15:56:18 +0200 Subject: [PATCH 20/83] Updates text preview. --- src/_h5ai/client/css/inc/preview-txt.less | 126 +------------ src/_h5ai/client/js/inc/ext/preview-txt.js | 194 ++++++--------------- 2 files changed, 66 insertions(+), 254 deletions(-) diff --git a/src/_h5ai/client/css/inc/preview-txt.less b/src/_h5ai/client/css/inc/preview-txt.less index bff27626..85c76ad3 100644 --- a/src/_h5ai/client/css/inc/preview-txt.less +++ b/src/_h5ai/client/css/inc/preview-txt.less @@ -1,35 +1,14 @@ -#pv-txt-overlay { - display: none; - position: fixed; - left: 0; - top: 0; - right: 0; - bottom: 0; - z-index: 100; - - background-color: rgba(0,0,0,0.5); - .transition(background-color 0.3s ease-in-out); - - text-align: center; -} - -#pv-txt-content { - max-width: 960px; - margin: 0 auto; - padding: 10px; - background-color: #fff; - border: 1px solid #fff; - text-align: left; - overflow: auto; - position: relative; -} - -#pv-txt-spinner { - position: fixed; -} - #pv-txt-text { + // position: absolute; + max-width: 800px; + max-height: 100%; + height: 100%; + text-align: left; + background-color: #fff; + margin: 0 auto; + padding: 8px; + overflow: auto; &.highlighted { word-break: break-all; @@ -143,90 +122,3 @@ } } } - -#pv-txt-close { - position: fixed; - left: 0; - top: 0; - width: 100%; - height: 100%; - cursor: pointer; -} - -#pv-txt-prev { - position: fixed; - cursor: pointer; -} - -#pv-txt-next { - position: fixed; - cursor: pointer; -} - -#pv-txt-buttons, #pv-txt-topbuttons { - list-style: none; - list-style-image: none; - margin: 0; - padding: 0; - - img { - position: relative; - top: -2px; - width: 16px; - height: 16px; - } - img + span, img + input { - margin-left: 6px; - } - input { - background-color: rgba(255,255,255,0.1); - border: none; - color: #ccc; - } - - .bar-label { - display: block; - color: #ccc; - height: 30px; - line-height: 30px; - padding: 0 10px; - opacity: 0.7; - .transition(all 0.2s ease-in-out); - } - - .bar-highlight { - background-color: rgba(255,255,255,0.1); - opacity: 1.0; - } - - @bar-sep-border: 1px solid rgba(255,255,255,0.05); - - .bar-button { - .bar-label; - cursor: pointer; - &:hover, &.hover { - .bar-highlight; - } - } - - .bar-left { - float: left; - border-right: @bar-sep-border; - } - - .bar-right { - float: right; - border-left: @bar-sep-border; - } -} - -#pv-txt-bottombar { - position: fixed; - z-index: 5; - width: 100%; - height: 32px; - left: 0; - bottom: 0; - background-color: rgb(27,27,27); - border-top: 1px solid rgb(45,45,45); -} diff --git a/src/_h5ai/client/js/inc/ext/preview-txt.js b/src/_h5ai/client/js/inc/ext/preview-txt.js index 508fd323..e93c77ed 100644 --- a/src/_h5ai/client/js/inc/ext/preview-txt.js +++ b/src/_h5ai/client/js/inc/ext/preview-txt.js @@ -1,5 +1,5 @@ -modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/resource', 'core/store', 'core/event', 'core/location'], function (_, $, allsettings, resource, store, event, location) { +modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/store', 'core/event', 'ext/preview'], function (_, $, allsettings, store, event, preview) { var settings = _.extend({ enabled: false, @@ -28,33 +28,9 @@ modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/resource', } }, allsettings['preview-txt']), - template = '
      ' + - '
      ' + - '
      ' + - '
      ' + - '
      ' + - '
      ' + - '' + - '
      ' + - '
      ' + - '
        ' + - '
      • ' + - '
      • ' + - '
      • ' + - '
      • ' + - '
      • ' + - '
      • ' + - '
      • ' + - '
      ' + - '
      ' + - '
      ', - templateText = '
      ',
       		templateMarkdown = '
      ', - currentEntries = [], - currentIdx = 0, - // adapted from SyntaxHighlighter getHighlightedLines = function (sh, alias, content) { @@ -159,107 +135,74 @@ modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/resource', }); }, - onIndexChange = function (idx) { - - currentIdx = (idx + currentEntries.length) % currentEntries.length; - - var $container = $('#pv-txt-content'), - $text = $('#pv-txt-text'), - current = currentEntries[currentIdx], - spinnerTimeout = setTimeout(function () { $('#pv-txt-spinner').show(); }, 200); - - preloadText(current.absHref, function (content) { - - clearTimeout(spinnerTimeout); - $('#pv-txt-spinner').hide(); - - $text.fadeOut(100, function () { - - var $nText; - - if (current.type === 'markdown') { - $nText = $(templateMarkdown).hide().text(content); - $text.replaceWith($nText); - - loadMarkdown(function (md) { - - if (md) { - $nText.html(md.toHTML(content)); - } - }); - } else { - $nText = $(templateText).hide().text(content); - $text.replaceWith($nText); - - loadSyntaxhighlighter(function (sh) { - - if (sh) { - var $table = $('
  • NameLast modifiedSize
    app_abs_href . "client/icons/16x16/folder-parent.png\"/>Parent Directory
    app_abs_href . "client/icons/16x16/folder-parent.png\" alt=\"folder-parent\"/>Parent Directory
    app_abs_href . "client/icons/16x16/" . ($item->is_folder ? "folder" : "default") . ".png\"/>app_abs_href . "client/icons/16x16/" . $type . ".png\" alt=\"" . $type . "\"/>abs_href . "\">" . basename($item->abs_path) . "" . date("Y-m-d H:i", $item->date) . "" . ($item->size !== null ? intval($item->size / 1000) . " KB" : "" ) . "
    '); - - getHighlightedLines(sh, settings.types[current.type], content).each(function (i) { - $('') - .append($('
    ').addClass('nr').append(i + 1)) - .append($('').addClass('line').append(this)) - .appendTo($table); - }); - - $nText.empty().append($table); - } - }); - } - $nText.fadeIn(200); - - adjustSize(); - $('#pv-txt-bar-label').text(current.label); - $('#pv-txt-bar-size').text('' + current.size + ' bytes'); - $('#pv-txt-bar-idx').text('' + (currentIdx + 1) + ' / ' + currentEntries.length); - $('#pv-txt-bar-original').find('a').attr('href', current.absHref); - }); - }); - }, - onEnter = function (items, idx) { - $(window).on('keydown', onKeydown); - $('#pv-txt-overlay').stop(true, true).fadeIn(200); + var currentItems = items, + currentIdx = idx, + currentItem = items[idx], - currentEntries = items; - onIndexChange(idx); - }, + onIdxChange = function (rel) { - onNext = function () { + currentIdx = (currentIdx + rel + currentItems.length) % currentItems.length; + currentItem = currentItems[currentIdx]; - onIndexChange(currentIdx + 1); - }, + var spinnerTimeout = setTimeout(function () { preview.showSpinner(true); }, 200); - onPrevious = function () { + preloadText(currentItem.absHref, function (textContent) { - onIndexChange(currentIdx - 1); - }, + clearTimeout(spinnerTimeout); + preview.showSpinner(false); - onExit = function () { + $('#pv-content').fadeOut(100, function () { - $(window).off('keydown', onKeydown); - $('#pv-txt-overlay').stop(true, true).fadeOut(200); - }, + var $text; - onKeydown = function (event) { + if (currentItem.type === 'markdown') { + $text = $(templateMarkdown).text(textContent); + $text.replaceWith($text); - var key = event.which; + loadMarkdown(function (md) { - if (key === 27) { // esc - event.preventDefault(); - event.stopImmediatePropagation(); - onExit(); - } else if (key === 8 || key === 37 || key === 40) { // backspace, left, down - event.preventDefault(); - event.stopImmediatePropagation(); - onPrevious(); - } else if (key === 13 || key === 32 || key === 38 || key === 39) { // enter, space, up, right - event.preventDefault(); - event.stopImmediatePropagation(); - onNext(); - } + if (md) { + $text.html(md.toHTML(textContent)); + } + }); + } else { + $text = $(templateText).text(textContent); + $text.replaceWith($text); + + loadSyntaxhighlighter(function (sh) { + + if (sh) { + var $table = $(''); + + getHighlightedLines(sh, settings.types[currentItem.type], textContent).each(function (i) { + $('') + .append($('
    ').addClass('nr').append(i + 1)) + .append($('').addClass('line').append(this)) + .appendTo($table); + }); + + $text.empty().append($table); + } + }); + } + + $('#pv-content').empty().append($text).fadeIn(200); + + preview.setIndex(currentIdx + 1, currentItems.length); + preview.setLabels([ + currentItem.label, + '' + currentItem.size + ' bytes' + ]); + preview.setRawLink(currentItem.absHref); + }); + }); + }; + + onIdxChange(0); + preview.setOnIndexChange(onIdxChange); + preview.enter(); }, initItem = function (item) { @@ -296,31 +239,8 @@ modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/resource', return; } - $(template).appendTo('body'); - $('#pv-txt-bar-prev').on('click', onPrevious); - $('#pv-txt-bar-next').on('click', onNext); - $('#pv-txt-bar-close, #pv-txt-close').on('click', onExit); - - $('#pv-txt-close') - .on('mouseenter', function () { - $('#pv-txt-bar-close').addClass('hover'); - }) - .on('mouseleave', function () { - $('#pv-txt-bar-close').removeClass('hover'); - }); - - - $('#pv-txt-overlay') - .on('keydown', onKeydown) - .on('click mousedown mousemove keydown keypress', function (event) { - - event.stopImmediatePropagation(); - }); - event.sub('location.changed', onLocationChanged); event.sub('location.refreshed', onLocationRefreshed); - - $(window).on('resize load', adjustSize); }; init(); From 11f6b3792d1ccabc6e533ee505d7ead3762387ff Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Wed, 21 Aug 2013 15:58:18 +0200 Subject: [PATCH 21/83] Minor updates. --- src/_h5ai/client/css/inc/preview-txt.less | 1 - src/_h5ai/client/js/inc/ext/preview-img.js | 2 +- src/_h5ai/client/js/inc/ext/preview-txt.js | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/_h5ai/client/css/inc/preview-txt.less b/src/_h5ai/client/css/inc/preview-txt.less index 85c76ad3..0d3fcce4 100644 --- a/src/_h5ai/client/css/inc/preview-txt.less +++ b/src/_h5ai/client/css/inc/preview-txt.less @@ -1,6 +1,5 @@ #pv-txt-text { - // position: absolute; max-width: 800px; max-height: 100%; height: 100%; diff --git a/src/_h5ai/client/js/inc/ext/preview-img.js b/src/_h5ai/client/js/inc/ext/preview-img.js index ead5a717..a9dc5a4a 100644 --- a/src/_h5ai/client/js/inc/ext/preview-img.js +++ b/src/_h5ai/client/js/inc/ext/preview-img.js @@ -1,5 +1,5 @@ -modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/store', 'core/event', 'ext/preview'], function (_, $, allsettings, store, event, preview) { +modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/event', 'ext/preview'], function (_, $, allsettings, event, preview) { var settings = _.extend({ enabled: false, diff --git a/src/_h5ai/client/js/inc/ext/preview-txt.js b/src/_h5ai/client/js/inc/ext/preview-txt.js index e93c77ed..adc2b7ce 100644 --- a/src/_h5ai/client/js/inc/ext/preview-txt.js +++ b/src/_h5ai/client/js/inc/ext/preview-txt.js @@ -1,5 +1,5 @@ -modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/store', 'core/event', 'ext/preview'], function (_, $, allsettings, store, event, preview) { +modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/event', 'ext/preview'], function (_, $, allsettings, event, preview) { var settings = _.extend({ enabled: false, From 72c7b32a941a7a52da70cf8e2b0eec89267f475d Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Wed, 21 Aug 2013 23:00:33 +0200 Subject: [PATCH 22/83] Preview updates. --- src/_h5ai/client/css/inc/preview-img.less | 4 +- src/_h5ai/client/css/inc/preview-txt.less | 6 +-- src/_h5ai/client/css/inc/preview.less | 1 - src/_h5ai/client/js/inc/ext/preview-txt.js | 44 ++++++++-------------- src/_h5ai/client/js/inc/ext/preview.js | 2 +- 5 files changed, 22 insertions(+), 35 deletions(-) diff --git a/src/_h5ai/client/css/inc/preview-img.less b/src/_h5ai/client/css/inc/preview-img.less index 7ca5b28a..4a1fe130 100644 --- a/src/_h5ai/client/css/inc/preview-img.less +++ b/src/_h5ai/client/css/inc/preview-img.less @@ -12,5 +12,7 @@ -webkit-linear-gradient(45deg, @check-black 25%, transparent 25%, transparent 75%, @check-black 75%, @check-black), -webkit-linear-gradient(45deg, @check-black 25%, transparent 25%, transparent 75%, @check-black 75%, @check-black); background-size: 60px 60px; - background-position: 0 0, 30px 30px + background-position: 0 0, 30px 30px; + + box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3); } diff --git a/src/_h5ai/client/css/inc/preview-txt.less b/src/_h5ai/client/css/inc/preview-txt.less index 0d3fcce4..68bff18e 100644 --- a/src/_h5ai/client/css/inc/preview-txt.less +++ b/src/_h5ai/client/css/inc/preview-txt.less @@ -1,14 +1,14 @@ #pv-txt-text { - max-width: 800px; - max-height: 100%; - height: 100%; + max-width: 960px; text-align: left; background-color: #fff; margin: 0 auto; padding: 8px; overflow: auto; + box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3); + &.highlighted { word-break: break-all; diff --git a/src/_h5ai/client/css/inc/preview.less b/src/_h5ai/client/css/inc/preview.less index 3ca1895f..b3c29289 100644 --- a/src/_h5ai/client/css/inc/preview.less +++ b/src/_h5ai/client/css/inc/preview.less @@ -20,7 +20,6 @@ #pv-content { position: absolute; - overflow: hidden; } #pv-spinner { diff --git a/src/_h5ai/client/js/inc/ext/preview-txt.js b/src/_h5ai/client/js/inc/ext/preview-txt.js index adc2b7ce..ef5fcf12 100644 --- a/src/_h5ai/client/js/inc/ext/preview-txt.js +++ b/src/_h5ai/client/js/inc/ext/preview-txt.js @@ -92,32 +92,6 @@ modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/event', 'ex loadScript(allsettings.h5aiAbsHref + 'client/js/markdown.js', 'markdown', callback); }, - adjustSize = function () { - - var $window = $(window), - $container = $('#pv-txt-content'), - $spinner = $('#pv-txt-spinner'), - $spinnerimg = $spinner.find('img').width(100).height(100), - margin = 20, - barheight = 31; - - $container.css({ - height: $window.height() - 2 * margin - barheight - 32, - top: margin - }); - - $spinner.css({ - width: $window.width() - 2 * margin, - height: $window.height() - 2 * margin - barheight, - left: margin, - top: margin - }); - - $spinnerimg.css({ - margin: '' + (($spinner.height() - $spinnerimg.height()) / 2) + 'px ' + (($spinner.width() - $spinnerimg.height()) / 2) + 'px' - }); - }, - preloadText = function (absHref, callback) { $.ajax({ @@ -141,6 +115,17 @@ modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/event', 'ex currentIdx = idx, currentItem = items[idx], + onAdjustSize = function () { + + var $content = $('#pv-content'), + $text = $('#pv-txt-text'); + + if ($text.length) { + + $text.height($content.height() - 16); + } + }, + onIdxChange = function (rel) { currentIdx = (currentIdx + rel + currentItems.length) % currentItems.length; @@ -158,8 +143,8 @@ modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/event', 'ex var $text; if (currentItem.type === 'markdown') { + $text = $(templateMarkdown).text(textContent); - $text.replaceWith($text); loadMarkdown(function (md) { @@ -168,8 +153,8 @@ modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/event', 'ex } }); } else { + $text = $(templateText).text(textContent); - $text.replaceWith($text); loadSyntaxhighlighter(function (sh) { @@ -187,8 +172,8 @@ modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/event', 'ex } }); } - $('#pv-content').empty().append($text).fadeIn(200); + onAdjustSize(); preview.setIndex(currentIdx + 1, currentItems.length); preview.setLabels([ @@ -202,6 +187,7 @@ modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/event', 'ex onIdxChange(0); preview.setOnIndexChange(onIdxChange); + preview.setOnAdjustSize(onAdjustSize); preview.enter(); }, diff --git a/src/_h5ai/client/js/inc/ext/preview.js b/src/_h5ai/client/js/inc/ext/preview.js index 7e2e4016..ec864176 100644 --- a/src/_h5ai/client/js/inc/ext/preview.js +++ b/src/_h5ai/client/js/inc/ext/preview.js @@ -244,7 +244,7 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor var fsTimer = null; $('#pv-overlay') .on('keydown', onKeydown) - .on('mousemove', onMouseMove) + .on('mousemove click mousedown', onMouseMove) .on('click mousedown mousemove keydown keypress', function (event) { event.stopImmediatePropagation(); From 797d5bbc47785a25bac5fe1f60b361b5782e8c3c Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Fri, 23 Aug 2013 00:12:34 +0200 Subject: [PATCH 23/83] Updates preview. --- src/_h5ai/client/css/inc/preview.less | 36 ++++++++++++++--- src/_h5ai/client/js/inc/ext/preview.js | 53 +++++++------------------- 2 files changed, 44 insertions(+), 45 deletions(-) diff --git a/src/_h5ai/client/css/inc/preview.less b/src/_h5ai/client/css/inc/preview.less index b3c29289..796936bb 100644 --- a/src/_h5ai/client/css/inc/preview.less +++ b/src/_h5ai/client/css/inc/preview.less @@ -34,11 +34,21 @@ #pv-close-area { position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; + right: 8px; + top: 8px; cursor: pointer; + opacity: 0.5; + + img { + background-color: rgba(0,0,0,0.5); + border-radius: 8px; + width: 48px; + height: 48px; + } + + &:hover { + opacity: 1; + } } #pv-prev-area, #pv-next-area { @@ -46,14 +56,14 @@ top: 50%; cursor: pointer; opacity: 0.5; - .transition(all 0.2s ease-in-out); img { background-color: rgba(0,0,0,0.5); border-radius: 8px; width: 48px; height: 48px; - margin: -24px 0; + margin: -72px 0; + padding: 48px 0; } &:hover { @@ -135,4 +145,18 @@ bottom: 0; background-color: rgb(27,27,27); border-top: 1px solid rgb(45,45,45); + +} + +#pv-overlay.fullscreen { + + #pv-bottombar { + opacity: 0.5; + } +} + +@media only screen and (max-width: 700px) { +#pv-prev-area, #pv-next-area, #pv-close-area { + display: none !important; +} } diff --git a/src/_h5ai/client/js/inc/ext/preview.js b/src/_h5ai/client/js/inc/ext/preview.js index ec864176..e432bcf5 100644 --- a/src/_h5ai/client/js/inc/ext/preview.js +++ b/src/_h5ai/client/js/inc/ext/preview.js @@ -6,12 +6,12 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor }, allsettings['preview']), template = '
    ' + - '
    ' + '
    ' + '
    ' + - '
    ' + - '
    ' + - '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + '
    ' + '
    ', - storekey = 'preview.isFullscreen', + storekey = 'ext/preview', currentEntries = [], currentIdx = 0, diff --git a/src/_h5ai/client/js/inc/ext/sort.js b/src/_h5ai/client/js/inc/ext/sort.js index 32443c68..862d8086 100644 --- a/src/_h5ai/client/js/inc/ext/sort.js +++ b/src/_h5ai/client/js/inc/ext/sort.js @@ -9,7 +9,7 @@ modulejs.define('ext/sort', ['_', '$', 'core/settings', 'core/resource', 'core/e natural: false }, allsettings.sort), - storekey = 'sort.order', + storekey = 'ext/sort', template = 'ascending' + 'descending', diff --git a/src/_h5ai/client/js/inc/view/viewmode.js b/src/_h5ai/client/js/inc/view/viewmode.js index 35048745..e0714c17 100644 --- a/src/_h5ai/client/js/inc/view/viewmode.js +++ b/src/_h5ai/client/js/inc/view/viewmode.js @@ -25,25 +25,6 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c '' + '', - // sizeSelectorTemplate = '
  • ' + - // '' + - // 'size' + - // 'small' + - // '' + - // '