Small fixes and semantics.

This commit is contained in:
Lars Jung 2012-10-28 16:43:19 +01:00
parent 3a92606e0c
commit 84be82d175
18 changed files with 81 additions and 83 deletions

View file

@ -1,5 +1,5 @@
#extended .context-menu { #view .context-menu {
display: block; display: block;
position: absolute; position: absolute;

View file

@ -26,9 +26,9 @@
} }
#pv-txt-text { #pv-txt-text {
word-break: break-all;
&.highlighted { &.highlighted {
word-break: break-all;
tr:hover { tr:hover {
background-color: rgba(0,0,0,0.05); background-color: rgba(0,0,0,0.05);

View file

@ -14,7 +14,7 @@ body {
display: none; display: none;
} }
} }
#extended.view-details { #view.view-details {
.header .label, .item .label { .header .label, .item .label {
margin-right: 110px; margin-right: 110px;
} }
@ -22,7 +22,7 @@ body {
display: none; display: none;
} }
} }
#extended.view-icons { #view.view-icons {
padding: 0; padding: 0;
border: none; border: none;
} }

View file

@ -1,5 +1,5 @@
#extended.view-details { #view.view-details {
li { li {

View file

@ -1,5 +1,5 @@
#extended.view-grid { #view.view-grid {
li { li {

View file

@ -1,5 +1,5 @@
#extended.view-icons { #view.view-icons {
li { li {
text-align: center; text-align: center;

View file

@ -1,5 +1,5 @@
#extended.view-list { #view.view-list {
li { li {

View file

@ -16,7 +16,7 @@
@item-background-col-sel: rgba(240,100,0,0.2); @item-background-col-sel: rgba(240,100,0,0.2);
@item-border-col-sel: rgba(240,100,0,0.2); @item-border-col-sel: rgba(240,100,0,0.2);
#extended { #view {
display: none; display: none;
margin: 0 auto; margin: 0 auto;

View file

@ -18,11 +18,11 @@
@import "inc/notify"; @import "inc/notify";
@import "inc/content"; @import "inc/content";
@import "inc/extended"; @import "inc/view";
@import "inc/extended-details"; @import "inc/view-details";
@import "inc/extended-icons"; @import "inc/view-icons";
@import "inc/extended-list"; @import "inc/view-list";
@import "inc/extended-grid"; @import "inc/view-grid";
// @import "inc/context-menu"; // @import "inc/context-menu";
@import "inc/dropbox"; @import "inc/dropbox";
@import "inc/no-js-fallback"; @import "inc/no-js-fallback";

View file

@ -120,11 +120,18 @@ modulejs.define('core/location', ['_', 'modernizr', 'core/settings', 'core/event
} }
} }
var item = getItem();
if (item.isLocationLoaded) {
event.pub('location.changed', item);
refresh();
} else {
notify.set('loading...'); notify.set('loading...');
load(function () { load(function () {
item.isLocationLoaded = true;
notify.set(); notify.set();
event.pub('location.changed', getItem()); event.pub('location.changed', item);
}); });
}
}, },
refresh = function () { refresh = function () {

View file

@ -88,7 +88,7 @@ modulejs.define('ext/filter', ['_', '$', 'core/settings', 'core/resource'], func
$filter = $(template).appendTo('#navbar'); $filter = $(template).appendTo('#navbar');
$input = $filter.find('input'); $input = $filter.find('input');
$noMatch = $(noMatchTemplate).appendTo('#extended'); $noMatch = $(noMatchTemplate).appendTo('#view');
$filter $filter
.on('click', function () { .on('click', function () {

View file

@ -203,8 +203,8 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
initItem = function (item) { initItem = function (item) {
if (item.$extended && _.indexOf(settings.types, item.type) >= 0) { if (item.$view && _.indexOf(settings.types, item.type) >= 0) {
item.$extended.find('a').on('click', function (event) { item.$view.find('a').on('click', function (event) {
event.preventDefault(); event.preventDefault();

View file

@ -254,8 +254,8 @@ modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/resource',
initItem = function (item) { initItem = function (item) {
if (item.$extended && _.indexOf(_.keys(settings.types), item.type) >= 0) { if (item.$view && _.indexOf(_.keys(settings.types), item.type) >= 0) {
item.$extended.find('a').on('click', function (event) { item.$view.find('a').on('click', function (event) {
event.preventDefault(); event.preventDefault();

View file

@ -111,14 +111,19 @@ modulejs.define('ext/select', ['_', '$', 'core/settings', 'core/event'], functio
} }
}, },
onLocationChanged = function () {
publish();
},
onLocationRefreshed = function (item, added, removed) { onLocationRefreshed = function (item, added, removed) {
var selectionChanged = false; var selectionChanged = false;
_.each(removed, function (item) { _.each(removed, function (item) {
if (item.$extended && item.$extended.hasClass('selected')) { if (item.$view && item.$view.hasClass('selected')) {
item.$extended.removeClass('selected'); item.$view.removeClass('selected');
selectionChanged = true; selectionChanged = true;
} }
}); });
@ -136,6 +141,7 @@ modulejs.define('ext/select', ['_', '$', 'core/settings', 'core/event'], functio
$selectionRect.hide().appendTo('body'); $selectionRect.hide().appendTo('body');
event.sub('location.changed', onLocationChanged);
event.sub('location.refreshed', onLocationRefreshed); event.sub('location.refreshed', onLocationRefreshed);
$document $document

View file

@ -39,24 +39,24 @@ modulejs.define('ext/thumbnails', ['_', 'core/settings', 'core/event', 'core/ser
if (type) { if (type) {
if (item.thumbSmall) { if (item.thumbSmall) {
item.$extended.find('.icon.small img').addClass('thumb').attr('src', item.thumbSmall); item.$view.find('.icon.small img').addClass('thumb').attr('src', item.thumbSmall);
} else { } else {
requestThumbSmall(type, item.absHref, function (src) { requestThumbSmall(type, item.absHref, function (src) {
if (src && item.$extended) { if (src && item.$view) {
item.thumbSmall = src; item.thumbSmall = src;
item.$extended.find('.icon.small img').addClass('thumb').attr('src', src); item.$view.find('.icon.small img').addClass('thumb').attr('src', src);
} }
}); });
} }
if (item.thumbBig) { if (item.thumbBig) {
item.$extended.find('.icon.big img').addClass('thumb').attr('src', item.thumbBig); item.$view.find('.icon.big img').addClass('thumb').attr('src', item.thumbBig);
} else { } else {
requestThumbBig(type, item.absHref, function (src) { requestThumbBig(type, item.absHref, function (src) {
if (src && item.$extended) { if (src && item.$view) {
item.thumbBig = src; item.thumbBig = src;
item.$extended.find('.icon.big img').addClass('thumb').attr('src', src); item.$view.find('.icon.big img').addClass('thumb').attr('src', src);
} }
}); });
} }

View file

@ -161,8 +161,8 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e
shiftTree = function (forceVisible, dontAnimate) { shiftTree = function (forceVisible, dontAnimate) {
var $tree = $("#tree"), var $tree = $("#tree"),
$extended = $("#extended"), $view = $("#view"),
left = ((settings.slide && $tree.outerWidth() < $extended.offset().left) || forceVisible || !$extended.is(':visible')) ? 0 : 18 - $tree.outerWidth(); left = ((settings.slide && $tree.outerWidth() < $view.offset().left) || forceVisible || !$view.is(':visible')) ? 0 : 18 - $tree.outerWidth();
if (dontAnimate) { if (dontAnimate) {
$tree.stop().css({ left: left }); $tree.stop().css({ left: left });
@ -199,17 +199,6 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e
$tree.scrollpanel('update'); $tree.scrollpanel('update');
}, },
onContentChanged = function (item) {
while (item.parent) {
item = item.parent;
}
update(item);
adjustSpacing();
shiftTree(false, true);
},
onLocationChanged = function (item) { onLocationChanged = function (item) {
fetchTree(item, function (root) { fetchTree(item, function (root) {

View file

@ -16,22 +16,24 @@ modulejs.define('view/items', ['_', '$', 'core/settings', 'core/resource', 'core
'</a>' + '</a>' +
'</li>', '</li>',
hintTemplate = '<span class="hint"/>', hintTemplate = '<span class="hint"/>',
itemsTemplate = '<ul id="items" class="clearfix">' + contentTemplate = '<div id="content">' +
'<div id="view">' +
'<ul id="items" class="clearfix">' +
'<li class="header">' + '<li class="header">' +
'<a class="icon"/>' + '<a class="icon"/>' +
'<a class="label" href="#"><span class="l10n-name"/></a>' + '<a class="label" href="#"><span class="l10n-name"/></a>' +
'<a class="date" href="#"><span class="l10n-lastModified"/></a>' + '<a class="date" href="#"><span class="l10n-lastModified"/></a>' +
'<a class="size" href="#"><span class="l10n-size"/></a>' + '<a class="size" href="#"><span class="l10n-size"/></a>' +
'</li>' + '</li>' +
'</ul>', '</ul>' +
emptyTemplate = '<div class="empty l10n-empty"/>', '<div class="empty l10n-empty"/>' +
contentTemplate = '<div id="content"><div id="extended"/></div>', '</div>' +
'</div>',
// updates this single item
update = function (item, force) { update = function (item, force) {
if (!force && item.$extended) { if (!force && item.$view) {
return item.$extended; return item.$view;
} }
var $html = $(itemTemplate), var $html = $(itemTemplate),
@ -74,10 +76,10 @@ modulejs.define('view/items', ['_', '$', 'core/settings', 'core/resource', 'core
$html.addClass('folder-parent'); $html.addClass('folder-parent');
} }
if (item.$extended) { if (item.$view) {
item.$extended.replaceWith($html); item.$view.replaceWith($html);
} }
item.$extended = $html; item.$view = $html;
return $html; return $html;
}, },
@ -96,9 +98,8 @@ modulejs.define('view/items', ['_', '$', 'core/settings', 'core/resource', 'core
onLocationChanged = function (item) { onLocationChanged = function (item) {
var $extended = $('#extended'), var $items = $('#items'),
$items = $('#items'), $empty = $('#view').find('.empty');
$empty = $extended.find('.empty');
$items.find('.item').remove(); $items.find('.item').remove();
@ -120,9 +121,8 @@ modulejs.define('view/items', ['_', '$', 'core/settings', 'core/resource', 'core
onLocationRefreshed = function (item, added, removed) { onLocationRefreshed = function (item, added, removed) {
var $extended = $('#extended'), var $items = $('#items'),
$items = $('#items'), $empty = $('#view').find('.empty');
$empty = $extended.find('.empty');
_.each(added, function (item) { _.each(added, function (item) {
@ -131,8 +131,8 @@ modulejs.define('view/items', ['_', '$', 'core/settings', 'core/resource', 'core
_.each(removed, function (item) { _.each(removed, function (item) {
item.$extended.fadeOut(400, function () { item.$view.fadeOut(400, function () {
item.$extended.remove(); item.$view.remove();
}); });
}); });
@ -146,16 +146,12 @@ modulejs.define('view/items', ['_', '$', 'core/settings', 'core/resource', 'core
init = function () { init = function () {
var $content = $(contentTemplate), var $content = $(contentTemplate),
$extended = $content.find('#extended'), $view = $content.find('#view'),
$items = $(itemsTemplate), $items = $view.find('#items'),
$emtpy = $(emptyTemplate).hide(); $emtpy = $view.find('.empty').hide();
format.setDefaultMetric(settings.binaryPrefix); format.setDefaultMetric(settings.binaryPrefix);
$extended
.append($items)
.append($emtpy);
$items $items
.on('mouseenter', '.item a', onMouseenter) .on('mouseenter', '.item a', onMouseenter)
.on('mouseleave', '.item a', onMouseleave); .on('mouseleave', '.item a', onMouseleave);

View file

@ -19,15 +19,15 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
adjustSpacing = function () { adjustSpacing = function () {
var contentWidth = $('#content').width(), var contentWidth = $('#content').width(),
$extended = $('#extended'), $view = $('#view'),
itemWidth = ($extended.hasClass('view-icons') || $extended.hasClass('view-grid')) ? ($extended.find('.item').eq(0).width() || 1) : 1; itemWidth = ($view.hasClass('view-icons') || $view.hasClass('view-grid')) ? ($view.find('.item').eq(0).width() || 1) : 1;
$extended.width(Math.floor(contentWidth / itemWidth) * itemWidth); $view.width(Math.floor(contentWidth / itemWidth) * itemWidth);
}, },
update = function (viewmode) { update = function (viewmode) {
var $extended = $('#extended'); var $view = $('#view');
viewmode = _.indexOf(settings.modes, viewmode) >= 0 ? viewmode : settings.modes[0]; viewmode = _.indexOf(settings.modes, viewmode) >= 0 ? viewmode : settings.modes[0];
store.put(storekey, viewmode); store.put(storekey, viewmode);
@ -35,10 +35,10 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
_.each(modes, function (mode) { _.each(modes, function (mode) {
if (mode === viewmode) { if (mode === viewmode) {
$('#view-' + mode).addClass('current'); $('#view-' + mode).addClass('current');
$extended.addClass('view-' + mode).show(); $view.addClass('view-' + mode).show();
} else { } else {
$('#view-' + mode).removeClass('current'); $('#view-' + mode).removeClass('current');
$extended.removeClass('view-' + mode); $view.removeClass('view-' + mode);
} }
}); });