Small fixes and semantics.
This commit is contained in:
parent
3a92606e0c
commit
84be82d175
18 changed files with 81 additions and 83 deletions
|
@ -1,5 +1,5 @@
|
|||
|
||||
#extended .context-menu {
|
||||
#view .context-menu {
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
|
@ -26,9 +26,9 @@
|
|||
}
|
||||
|
||||
#pv-txt-text {
|
||||
word-break: break-all;
|
||||
|
||||
&.highlighted {
|
||||
word-break: break-all;
|
||||
|
||||
tr:hover {
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
|
|
|
@ -14,7 +14,7 @@ body {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
#extended.view-details {
|
||||
#view.view-details {
|
||||
.header .label, .item .label {
|
||||
margin-right: 110px;
|
||||
}
|
||||
|
@ -22,7 +22,7 @@ body {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
#extended.view-icons {
|
||||
#view.view-icons {
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
#extended.view-details {
|
||||
#view.view-details {
|
||||
|
||||
li {
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
#extended.view-grid {
|
||||
#view.view-grid {
|
||||
|
||||
li {
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
#extended.view-icons {
|
||||
#view.view-icons {
|
||||
|
||||
li {
|
||||
text-align: center;
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
#extended.view-list {
|
||||
#view.view-list {
|
||||
|
||||
li {
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
@item-background-col-sel: rgba(240,100,0,0.2);
|
||||
@item-border-col-sel: rgba(240,100,0,0.2);
|
||||
|
||||
#extended {
|
||||
#view {
|
||||
display: none;
|
||||
margin: 0 auto;
|
||||
|
|
@ -18,11 +18,11 @@
|
|||
@import "inc/notify";
|
||||
|
||||
@import "inc/content";
|
||||
@import "inc/extended";
|
||||
@import "inc/extended-details";
|
||||
@import "inc/extended-icons";
|
||||
@import "inc/extended-list";
|
||||
@import "inc/extended-grid";
|
||||
@import "inc/view";
|
||||
@import "inc/view-details";
|
||||
@import "inc/view-icons";
|
||||
@import "inc/view-list";
|
||||
@import "inc/view-grid";
|
||||
// @import "inc/context-menu";
|
||||
@import "inc/dropbox";
|
||||
@import "inc/no-js-fallback";
|
||||
|
|
|
@ -120,11 +120,18 @@ modulejs.define('core/location', ['_', 'modernizr', 'core/settings', 'core/event
|
|||
}
|
||||
}
|
||||
|
||||
notify.set('loading...');
|
||||
load(function () {
|
||||
notify.set();
|
||||
event.pub('location.changed', getItem());
|
||||
});
|
||||
var item = getItem();
|
||||
if (item.isLocationLoaded) {
|
||||
event.pub('location.changed', item);
|
||||
refresh();
|
||||
} else {
|
||||
notify.set('loading...');
|
||||
load(function () {
|
||||
item.isLocationLoaded = true;
|
||||
notify.set();
|
||||
event.pub('location.changed', item);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
refresh = function () {
|
||||
|
|
|
@ -88,7 +88,7 @@ modulejs.define('ext/filter', ['_', '$', 'core/settings', 'core/resource'], func
|
|||
|
||||
$filter = $(template).appendTo('#navbar');
|
||||
$input = $filter.find('input');
|
||||
$noMatch = $(noMatchTemplate).appendTo('#extended');
|
||||
$noMatch = $(noMatchTemplate).appendTo('#view');
|
||||
|
||||
$filter
|
||||
.on('click', function () {
|
||||
|
|
|
@ -203,8 +203,8 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
|
|||
|
||||
initItem = function (item) {
|
||||
|
||||
if (item.$extended && _.indexOf(settings.types, item.type) >= 0) {
|
||||
item.$extended.find('a').on('click', function (event) {
|
||||
if (item.$view && _.indexOf(settings.types, item.type) >= 0) {
|
||||
item.$view.find('a').on('click', function (event) {
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
|
|
|
@ -254,8 +254,8 @@ modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/resource',
|
|||
|
||||
initItem = function (item) {
|
||||
|
||||
if (item.$extended && _.indexOf(_.keys(settings.types), item.type) >= 0) {
|
||||
item.$extended.find('a').on('click', function (event) {
|
||||
if (item.$view && _.indexOf(_.keys(settings.types), item.type) >= 0) {
|
||||
item.$view.find('a').on('click', function (event) {
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
|
|
|
@ -59,7 +59,7 @@ modulejs.define('ext/select', ['_', '$', 'core/settings', 'core/event'], functio
|
|||
.animate(
|
||||
{
|
||||
left: l + w * 0.5 * shrink,
|
||||
top: t + h * 0.5 * shrink,
|
||||
top: t + h * 0.5 * shrink,
|
||||
width: w * (1 - shrink),
|
||||
height: h * (1 - shrink),
|
||||
opacity: 0
|
||||
|
@ -111,14 +111,19 @@ modulejs.define('ext/select', ['_', '$', 'core/settings', 'core/event'], functio
|
|||
}
|
||||
},
|
||||
|
||||
onLocationChanged = function () {
|
||||
|
||||
publish();
|
||||
},
|
||||
|
||||
onLocationRefreshed = function (item, added, removed) {
|
||||
|
||||
var selectionChanged = false;
|
||||
|
||||
_.each(removed, function (item) {
|
||||
|
||||
if (item.$extended && item.$extended.hasClass('selected')) {
|
||||
item.$extended.removeClass('selected');
|
||||
if (item.$view && item.$view.hasClass('selected')) {
|
||||
item.$view.removeClass('selected');
|
||||
selectionChanged = true;
|
||||
}
|
||||
});
|
||||
|
@ -136,6 +141,7 @@ modulejs.define('ext/select', ['_', '$', 'core/settings', 'core/event'], functio
|
|||
|
||||
$selectionRect.hide().appendTo('body');
|
||||
|
||||
event.sub('location.changed', onLocationChanged);
|
||||
event.sub('location.refreshed', onLocationRefreshed);
|
||||
|
||||
$document
|
||||
|
|
|
@ -39,24 +39,24 @@ modulejs.define('ext/thumbnails', ['_', 'core/settings', 'core/event', 'core/ser
|
|||
|
||||
if (type) {
|
||||
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 {
|
||||
requestThumbSmall(type, item.absHref, function (src) {
|
||||
|
||||
if (src && item.$extended) {
|
||||
if (src && item.$view) {
|
||||
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) {
|
||||
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 {
|
||||
requestThumbBig(type, item.absHref, function (src) {
|
||||
|
||||
if (src && item.$extended) {
|
||||
if (src && item.$view) {
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
@ -161,8 +161,8 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e
|
|||
shiftTree = function (forceVisible, dontAnimate) {
|
||||
|
||||
var $tree = $("#tree"),
|
||||
$extended = $("#extended"),
|
||||
left = ((settings.slide && $tree.outerWidth() < $extended.offset().left) || forceVisible || !$extended.is(':visible')) ? 0 : 18 - $tree.outerWidth();
|
||||
$view = $("#view"),
|
||||
left = ((settings.slide && $tree.outerWidth() < $view.offset().left) || forceVisible || !$view.is(':visible')) ? 0 : 18 - $tree.outerWidth();
|
||||
|
||||
if (dontAnimate) {
|
||||
$tree.stop().css({ left: left });
|
||||
|
@ -199,17 +199,6 @@ modulejs.define('ext/tree', ['_', '$', 'core/settings', 'core/resource', 'core/e
|
|||
$tree.scrollpanel('update');
|
||||
},
|
||||
|
||||
onContentChanged = function (item) {
|
||||
|
||||
while (item.parent) {
|
||||
item = item.parent;
|
||||
}
|
||||
|
||||
update(item);
|
||||
adjustSpacing();
|
||||
shiftTree(false, true);
|
||||
},
|
||||
|
||||
onLocationChanged = function (item) {
|
||||
|
||||
fetchTree(item, function (root) {
|
||||
|
|
|
@ -16,22 +16,24 @@ modulejs.define('view/items', ['_', '$', 'core/settings', 'core/resource', 'core
|
|||
'</a>' +
|
||||
'</li>',
|
||||
hintTemplate = '<span class="hint"/>',
|
||||
itemsTemplate = '<ul id="items" class="clearfix">' +
|
||||
'<li class="header">' +
|
||||
'<a class="icon"/>' +
|
||||
'<a class="label" href="#"><span class="l10n-name"/></a>' +
|
||||
'<a class="date" href="#"><span class="l10n-lastModified"/></a>' +
|
||||
'<a class="size" href="#"><span class="l10n-size"/></a>' +
|
||||
'</li>' +
|
||||
'</ul>',
|
||||
emptyTemplate = '<div class="empty l10n-empty"/>',
|
||||
contentTemplate = '<div id="content"><div id="extended"/></div>',
|
||||
contentTemplate = '<div id="content">' +
|
||||
'<div id="view">' +
|
||||
'<ul id="items" class="clearfix">' +
|
||||
'<li class="header">' +
|
||||
'<a class="icon"/>' +
|
||||
'<a class="label" href="#"><span class="l10n-name"/></a>' +
|
||||
'<a class="date" href="#"><span class="l10n-lastModified"/></a>' +
|
||||
'<a class="size" href="#"><span class="l10n-size"/></a>' +
|
||||
'</li>' +
|
||||
'</ul>' +
|
||||
'<div class="empty l10n-empty"/>' +
|
||||
'</div>' +
|
||||
'</div>',
|
||||
|
||||
// updates this single item
|
||||
update = function (item, force) {
|
||||
|
||||
if (!force && item.$extended) {
|
||||
return item.$extended;
|
||||
if (!force && item.$view) {
|
||||
return item.$view;
|
||||
}
|
||||
|
||||
var $html = $(itemTemplate),
|
||||
|
@ -74,10 +76,10 @@ modulejs.define('view/items', ['_', '$', 'core/settings', 'core/resource', 'core
|
|||
$html.addClass('folder-parent');
|
||||
}
|
||||
|
||||
if (item.$extended) {
|
||||
item.$extended.replaceWith($html);
|
||||
if (item.$view) {
|
||||
item.$view.replaceWith($html);
|
||||
}
|
||||
item.$extended = $html;
|
||||
item.$view = $html;
|
||||
|
||||
return $html;
|
||||
},
|
||||
|
@ -96,9 +98,8 @@ modulejs.define('view/items', ['_', '$', 'core/settings', 'core/resource', 'core
|
|||
|
||||
onLocationChanged = function (item) {
|
||||
|
||||
var $extended = $('#extended'),
|
||||
$items = $('#items'),
|
||||
$empty = $extended.find('.empty');
|
||||
var $items = $('#items'),
|
||||
$empty = $('#view').find('.empty');
|
||||
|
||||
$items.find('.item').remove();
|
||||
|
||||
|
@ -120,9 +121,8 @@ modulejs.define('view/items', ['_', '$', 'core/settings', 'core/resource', 'core
|
|||
|
||||
onLocationRefreshed = function (item, added, removed) {
|
||||
|
||||
var $extended = $('#extended'),
|
||||
$items = $('#items'),
|
||||
$empty = $extended.find('.empty');
|
||||
var $items = $('#items'),
|
||||
$empty = $('#view').find('.empty');
|
||||
|
||||
_.each(added, function (item) {
|
||||
|
||||
|
@ -131,8 +131,8 @@ modulejs.define('view/items', ['_', '$', 'core/settings', 'core/resource', 'core
|
|||
|
||||
_.each(removed, function (item) {
|
||||
|
||||
item.$extended.fadeOut(400, function () {
|
||||
item.$extended.remove();
|
||||
item.$view.fadeOut(400, function () {
|
||||
item.$view.remove();
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -146,16 +146,12 @@ modulejs.define('view/items', ['_', '$', 'core/settings', 'core/resource', 'core
|
|||
init = function () {
|
||||
|
||||
var $content = $(contentTemplate),
|
||||
$extended = $content.find('#extended'),
|
||||
$items = $(itemsTemplate),
|
||||
$emtpy = $(emptyTemplate).hide();
|
||||
$view = $content.find('#view'),
|
||||
$items = $view.find('#items'),
|
||||
$emtpy = $view.find('.empty').hide();
|
||||
|
||||
format.setDefaultMetric(settings.binaryPrefix);
|
||||
|
||||
$extended
|
||||
.append($items)
|
||||
.append($emtpy);
|
||||
|
||||
$items
|
||||
.on('mouseenter', '.item a', onMouseenter)
|
||||
.on('mouseleave', '.item a', onMouseleave);
|
||||
|
|
|
@ -19,15 +19,15 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
|
|||
adjustSpacing = function () {
|
||||
|
||||
var contentWidth = $('#content').width(),
|
||||
$extended = $('#extended'),
|
||||
itemWidth = ($extended.hasClass('view-icons') || $extended.hasClass('view-grid')) ? ($extended.find('.item').eq(0).width() || 1) : 1;
|
||||
$view = $('#view'),
|
||||
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) {
|
||||
|
||||
var $extended = $('#extended');
|
||||
var $view = $('#view');
|
||||
|
||||
viewmode = _.indexOf(settings.modes, viewmode) >= 0 ? viewmode : settings.modes[0];
|
||||
store.put(storekey, viewmode);
|
||||
|
@ -35,10 +35,10 @@ modulejs.define('view/viewmode', ['_', '$', 'core/settings', 'core/resource', 'c
|
|||
_.each(modes, function (mode) {
|
||||
if (mode === viewmode) {
|
||||
$('#view-' + mode).addClass('current');
|
||||
$extended.addClass('view-' + mode).show();
|
||||
$view.addClass('view-' + mode).show();
|
||||
} else {
|
||||
$('#view-' + mode).removeClass('current');
|
||||
$extended.removeClass('view-' + mode);
|
||||
$view.removeClass('view-' + mode);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue