Refactored and lots of modification. See README.md.

src/_h5ai/js/inc/view/extended.js

@@ -0,0 +1,135 @@
+
+module.define('view/extended', [jQuery, 'core/settings', 'core/resource', 'core/format', 'core/event', 'core/entry'], function ($, allsettings, resource, format, event, entry) {
+
+	var defaults = {
+			modes: ['details', 'icons'],
+			setParentFolderLabels: false
+		},
+
+		settings = _.extend({}, defaults, allsettings.view),
+
+		template = '<li class="entry">' +
+						'<a>' +
+							'<span class="icon small"><img /></span>' +
+							'<span class="icon big"><img /></span>' +
+							'<span class="label" />' +
+							'<span class="date" />' +
+							'<span class="size" />' +
+						'</a>' +
+					'</li>',
+		hintTemplate = '<span class="hint"></span>',
+		listTemplate = '<ul>' +
+							'<li class="header">' +
+								'<a class="icon"></a>' +
+								'<a class="label" href="#"><span class="l10n-name"></span></a>' +
+								'<a class="date" href="#"><span class="l10n-lastModified"></span></a>' +
+								'<a class="size" href="#"><span class="l10n-size"></span></a>' +
+							'</li>' +
+						'</ul>',
+		emptyTemplate = '<div class="empty l10n-empty">empty</div>',
+
+
+
+		// updates this single entry
+		update = function (entry) {
+
+			if (entry.$extended && entry.status && entry.$extended.data('status') === entry.status) {
+				return entry.$extended;
+			}
+
+			var $html = $(template),
+				$a = $html.find('a'),
+				$imgSmall = $html.find('.icon.small img'),
+				$imgBig = $html.find('.icon.big img'),
+				$label = $html.find('.label'),
+				$date = $html.find('.date'),
+				$size = $html.find('.size'),
+				icon16 = resource.icon(entry.type),
+				icon48 = resource.icon(entry.type, true),
+				escapedHref = entry.absHref.replace(/'/g, "%27").replace(/"/g, "%22");
+
+			$html
+				.addClass(entry.isFolder() ? 'folder' : 'file')
+				.data('entry', entry)
+				.data('status', entry.status);
+
+			if (entry.isParentFolder) {
+				icon16 = resource.icon('folder-parent');
+				icon48 = resource.icon('folder-parent', true);
+				if (!settings.setParentFolderLabels) {
+					$label.addClass('l10n-parentDirectory');
+				}
+				$html.addClass('folder-parent');
+			}
+
+			$a.attr('href', entry.absHref);
+			$imgSmall.attr('src', icon16).attr('alt', entry.type);
+			$imgBig.attr('src', icon48).attr('alt', entry.type);
+			$label.text(entry.label);
+			$date.data('time', entry.time).text(format.formatDate(entry.time));
+			$size.data('bytes', entry.size).text(format.formatSize(entry.size));
+
+			if (entry.isFolder() && _.isNumber(entry.status)) {
+				if (entry.status === 200) {
+					$html.addClass('page');
+					$imgSmall.attr('src', resource.icon('folder-page'));
+					$imgBig.attr('src', resource.icon('folder-page', true));
+				} else {
+					$html.addClass('error');
+					$label.append($(hintTemplate).text(' ' + entry.status + ' '));
+				}
+			}
+
+			if (entry.$extended) {
+				entry.$extended.replaceWith($html);
+			}
+			entry.$extended = $html;
+
+			return $html;
+		},
+
+		onMouseenter = function () {
+
+			var entry = $(this).closest('.entry').data('entry');
+			event.pub('entry.mouseenter', entry);
+		},
+
+		onMouseleave = function () {
+
+			var entry = $(this).closest('.entry').data('entry');
+			event.pub('entry.mouseleave', entry);
+		},
+
+		// creates the view for entry content
+		init = function (entry) {
+
+			var $extended = $('#extended'),
+				$ul = $(listTemplate);
+
+			if (entry.parent) {
+				$ul.append(update(entry.parent));
+			}
+
+			_.each(entry.content, function (e) {
+
+				$ul.append(update(e));
+
+				e.fetchStatus(function (e) {
+
+					update(e);
+				});
+			});
+
+			$extended.append($ul);
+
+			if (entry.isEmpty()) {
+				$extended.append($(emptyTemplate));
+			}
+
+			$extended
+				.on('mouseenter', '.entry a', onMouseenter)
+				.on('mouseleave', '.entry a', onMouseleave);
+		};
+
+	init(entry);
+});