diff --git a/src/_h5ai/config.js b/src/_h5ai/config.js index bb64c0fa..86dc8053 100644 --- a/src/_h5ai/config.js +++ b/src/_h5ai/config.js @@ -60,7 +60,7 @@ var H5AI_CONFIG = { */ "autoupdate": { "enabled": true, - "interval": 5000 + "interval": 1000 }, /* @@ -213,7 +213,7 @@ var H5AI_CONFIG = { "java": "java", "makefile": "xml", "markdown": "plain", - "php": "php", + /*"php": "php",*/ "python": "python", "readme": "plain", "rb": "ruby", @@ -331,7 +331,7 @@ var H5AI_CONFIG = { "hpp": [".hpp"], "html": [".htm", ".html", ".shtml"], "ico": [".ico"], - "image": [".xpm"], + "image": [".svg", ".xpm"], "install": ["install"], "java": [".java"], "jpg": [".jpg", ".jpeg"], diff --git a/src/_h5ai/css/inc/dropbox.less b/src/_h5ai/css/inc/dropbox.less new file mode 100644 index 00000000..d87a2f6c --- /dev/null +++ b/src/_h5ai/css/inc/dropbox.less @@ -0,0 +1,100 @@ + +#dropbox { + margin: 48px 24px; + padding: 24px 12px; + overflow: hidden; + + background-color: #f8f8f8; + border: 1px dashed #ccc; + border-radius: 10px; + + .transition(all 0.2s ease-in-out); + + .label { + text-align: center; + color: #eee; + font-size: 5em; + font-weight: bold; + } + + &.hint { + // color: #ccc; + // border-color: #aaa; + } + + &.match { + border-color: #555; + + .label { + color: #999; + } + } +} + +#uploads { + width: 450px; + margin: 12px auto; + padding: 0; + list-style: none; + + .upload { + color: #555; + font-size: 0.9em; + + .name { + display: inline-block; + white-space: nowrap; + width: 320px; + overflow: hidden; + + &:before { + display: inline-block; + content: '•'; + color: #55c; + width: 1em; + text-align: center; + padding-right: 1em; + } + } + + .size { + // display: inline-block; + display: none; + float: right; + white-space: nowrap; + + &:after { + content: ' bytes' + } + } + + .progress { + display: inline-block; + margin: 4px 8px; + + width: 84px; + height: 8px; + background-color: #ddd; + overflow: hidden; + float: right; + + .bar { + width: 0%; + height: 100%; + background-color: #999; + } + } + + &.finished .name:before { + // content: '✓✔'; + content: '✔'; + color: #008200; + } + &.error .name:before { + content: '✖'; + color: #c55; + } + } + +} + diff --git a/src/_h5ai/css/inc/preview-img.less b/src/_h5ai/css/inc/preview-img.less index 7e6f9540..6946de74 100644 --- a/src/_h5ai/css/inc/preview-img.less +++ b/src/_h5ai/css/inc/preview-img.less @@ -18,11 +18,22 @@ } +// @check-white: rgba(255,255,255,0.5); +// @check-black: rgba(0,0,0,0.2); +@check-white: #f8f8f8; +@check-black: #e8e8e8; #pv-img-image { max-width: 100%; max-height: 100%; border: 2px solid #fff; .border-radius(4px); + + background-color: @check-white; + background-image: + -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 } #pv-img-overlay.fullscreen { diff --git a/src/_h5ai/css/styles.less b/src/_h5ai/css/styles.less index 39281b71..427acd71 100644 --- a/src/_h5ai/css/styles.less +++ b/src/_h5ai/css/styles.less @@ -23,6 +23,7 @@ body { @import "inc/content"; @import "inc/extended"; +@import "inc/dropbox"; @import "inc/bottombar"; @import "inc/l10n"; diff --git a/src/_h5ai/images/delete.png b/src/_h5ai/images/delete.png new file mode 100644 index 00000000..9d8afaef Binary files /dev/null and b/src/_h5ai/images/delete.png differ diff --git a/src/_h5ai/js/inc/ext/dropbox.js b/src/_h5ai/js/inc/ext/dropbox.js new file mode 100644 index 00000000..7e589b53 --- /dev/null +++ b/src/_h5ai/js/inc/ext/dropbox.js @@ -0,0 +1,139 @@ + +modulejs.define('ext/dropbox', ['_', '$', 'core/settings', 'core/entry'], function (_, $, allsettings, entry) { + + var defaults = { + enabled: true + }, + + settings = _.extend({}, defaults, allsettings.dropbox), + + template = '
dropbox
', + + uploadTemplate = '
  • ' + + '' + + '
    ' + + '' + + '
    • ', + + init = function () { + + if (!settings.enabled) { + return; + } + + var $dropbox = $(template).appendTo('#content'); + + var uploads = {}; + + $dropbox.filedrop({ + + // The name of the $_FILES entry: + paramname: 'userfile', + + maxfiles: 24, + maxfilesize: 1024, + url: allsettings.h5aiAbsHref + 'php/api.php', + data: { + action: 'upload', + href: entry.absHref + }, + + dragOver: function () { + + $dropbox.addClass('match'); + }, + + dragLeave: function () { + + $dropbox.removeClass('match'); + }, + + docOver: function () { + + $dropbox.addClass('hint'); + }, + + docLeave: function () { + + $dropbox.removeClass('hint'); + }, + + drop: function () { + + $dropbox.removeClass('match hint'); + }, + + + beforeEach: function (file) { + + uploads[file.name] = $(uploadTemplate).appendTo('#uploads') + .find('.name').text(file.name).end() + .find('.size').text(file.size).end() + .find('.progress .bar').css('width', 0).end(); + + console.log('beforeEach', file); + }, + + uploadStarted: function (i, file, len) { + + console.log('uploadStarted', i, file, len); + }, + + progressUpdated: function (i, file, progress) { + + uploads[file.name] + .find('.progress .bar').css('width', '' + progress + '%'); + console.log('progressUpdated', i, file, progress); + }, + + uploadFinished: function (i, file, response) { + + uploads[file.name].addClass(response.code ? 'error' : 'finished'); + setTimeout(function () { + uploads[file.name].slideUp(400, function () { + + uploads[file.name].remove(); + }); + }, 5000); + console.log('uploadFinished', i, file, response); + }, + + afterAll: function () { + + // $('#uploads .upload').remove(); + }, + + + error: function (err, file) { + + uploads[file.name].addClass('error'); + setTimeout(function () { + uploads[file.name].slideUp(400, function () { + + uploads[file.name].remove(); + }); + }, 5000); + switch (err) { + case 'BrowserNotSupported': + console.log('ERROR', 'Your browser does not support HTML5 file uploads!'); + break; + case 'TooManyFiles': + console.log('ERROR', 'Too many files! Please select 5 at most! (configurable)'); + break; + case 'FileTooLarge': + console.log('ERROR', file.name + ' is too large! Please upload files up to 2mb (configurable).'); + break; + default: + break; + } + console.log('error', err, file); + } + }); + + + + + }; + + init(); +}); diff --git a/src/_h5ai/js/inc/ext/preview-img.js b/src/_h5ai/js/inc/ext/preview-img.js index 1ae586e2..64c50a71 100644 --- a/src/_h5ai/js/inc/ext/preview-img.js +++ b/src/_h5ai/js/inc/ext/preview-img.js @@ -1,5 +1,5 @@ -modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource', 'core/store', 'core/entry'], function (_, $, allsettings, resource, store, entry) { +modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource', 'core/store', 'core/event', 'core/entry'], function (_, $, allsettings, resource, store, event, entry) { var defaults = { enabled: false, @@ -149,7 +149,6 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource', $('#pv-img-bar-original').find('a').attr('href', currentEntries[currentIdx].absHref); }, 1); }); - }); }, @@ -201,13 +200,20 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource', } }, - initEntry = function (entries, entry, idx) { + initEntry = function (entry) { - if (entry.$extended) { + if (entry.$extended && _.indexOf(settings.types, entry.type) >= 0) { entry.$extended.find('a').on('click', function (event) { event.preventDefault(); - onEnter(entries, idx); + + var matchedEntries = _.compact(_.map($('#extended .entry'), function (entry) { + + entry = $(entry).data('entry'); + return _.indexOf(settings.types, entry.type) >= 0 ? entry : null; + })); + + onEnter(matchedEntries, _.indexOf(matchedEntries, entry)); }); } }, @@ -218,13 +224,9 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource', return; } - var imageEntries = _.filter(entry.content, function (entry) { + _.each(entry.content, function (e) { - return _.indexOf(settings.types, entry.type) >= 0; - }); - _.each(imageEntries, function (e, idx) { - - initEntry(imageEntries, e, idx); + initEntry(e); }); $(template).appendTo('body'); @@ -277,6 +279,11 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource', } }); + event.sub('entry.created', function (entry) { + + initEntry(entry); + }); + $(window).on('resize load', adjustSize); }; diff --git a/src/_h5ai/js/inc/ext/preview-txt.js b/src/_h5ai/js/inc/ext/preview-txt.js index 8463e073..cfc6429b 100644 --- a/src/_h5ai/js/inc/ext/preview-txt.js +++ b/src/_h5ai/js/inc/ext/preview-txt.js @@ -1,5 +1,5 @@ -modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/resource', 'core/store', 'core/entry'], function (_, $, allsettings, resource, store, entry) { +modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/resource', 'core/store', 'core/event', 'core/entry'], function (_, $, allsettings, resource, store, event, entry) { var defaults = { enabled: false, @@ -16,7 +16,7 @@ modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/resource', java: 'java', makefile: 'xml', markdown: 'plain', - php: 'php', + // php: 'php', python: 'python', readme: 'plain', rb: 'ruby', @@ -207,13 +207,20 @@ modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/resource', } }, - initEntry = function (entries, entry, idx) { + initEntry = function (entry) { - if (entry.$extended) { + if (entry.$extended && _.indexOf(_.keys(settings.types), entry.type) >= 0) { entry.$extended.find('a').on('click', function (event) { event.preventDefault(); - onEnter(entries, idx); + + var matchedEntries = _.compact(_.map($('#extended .entry'), function (entry) { + + entry = $(entry).data('entry'); + return _.indexOf(_.keys(settings.types), entry.type) >= 0 ? entry : null; + })); + + onEnter(matchedEntries, _.indexOf(matchedEntries, entry)); }); } }, @@ -224,13 +231,9 @@ modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/resource', return; } - var imageEntries = _.filter(entry.content, function (entry) { + _.each(entry.content, function (e) { - return _.indexOf(_.keys(settings.types), entry.type) >= 0; - }); - _.each(imageEntries, function (e, idx) { - - initEntry(imageEntries, e, idx); + initEntry(e); }); $(template).appendTo('body'); @@ -254,6 +257,11 @@ modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/resource', event.stopPropagation(); }); + event.sub('entry.created', function (entry) { + + initEntry(entry); + }); + $(window).on('resize load', adjustSize); }; diff --git a/src/_h5ai/js/inc/ext/thumbnails.js b/src/_h5ai/js/inc/ext/thumbnails.js index 468e5a37..8bd87fdc 100644 --- a/src/_h5ai/js/inc/ext/thumbnails.js +++ b/src/_h5ai/js/inc/ext/thumbnails.js @@ -1,5 +1,5 @@ -modulejs.define('ext/thumbnails', ['_', 'core/settings', 'core/entry', 'core/ajax'], function (_, allsettings, entry, ajax) { +modulejs.define('ext/thumbnails', ['_', 'core/settings', 'core/entry', 'core/event', 'core/ajax'], function (_, allsettings, entry, event, ajax) { var defaults = { enabled: false, @@ -52,6 +52,11 @@ modulejs.define('ext/thumbnails', ['_', 'core/settings', 'core/entry', 'core/aja _.each(entry.content, checkEntry); }, settings.delay); + + event.sub('entry.created', function (entry) { + + checkEntry(entry); + }); }; init(entry); diff --git a/src/_h5ai/js/inc/main.js b/src/_h5ai/js/inc/main.js index e192f2db..6821c3e2 100644 --- a/src/_h5ai/js/inc/main.js +++ b/src/_h5ai/js/inc/main.js @@ -27,6 +27,7 @@ // @include "ext/crumb.js" // @include "ext/custom.js" // @include "ext/download.js" + // @include "ext/dropbox.js" // @include "ext/filter.js" // @include "ext/folderstatus.js" // @include "ext/google-analytics.js" diff --git a/src/_h5ai/js/inc/view/extended.js b/src/_h5ai/js/inc/view/extended.js index 5f561c2f..f8ff27bd 100644 --- a/src/_h5ai/js/inc/view/extended.js +++ b/src/_h5ai/js/inc/view/extended.js @@ -18,7 +18,7 @@ modulejs.define('view/extended', ['_', '$', 'core/settings', 'core/resource', 'c '' + '', hintTemplate = '', - listTemplate = '