From 4c1ed3d1e8e05acfb0039ee0e8006f72916ae6a2 Mon Sep 17 00:00:00 2001 From: Lars Jung Date: Thu, 29 Sep 2011 13:43:22 +0200 Subject: [PATCH 1/4] Redesigned js. --- src/h5ai/js/inc/{tree.js => Connector.js} | 37 +- src/h5ai/js/inc/{extended.js => Extended.js} | 18 +- src/h5ai/js/inc/{h5ai.js => H5ai.js} | 6 +- src/h5ai/js/inc/Html.js | 260 ++++++++++++ src/h5ai/js/inc/Path.js | 105 +++++ src/h5ai/js/inc/PathCache.js | 61 +++ src/h5ai/js/inc/path.js | 404 ------------------- src/h5ai/js/main-js.js | 39 +- src/h5ai/js/main-php.js | 24 +- 9 files changed, 493 insertions(+), 461 deletions(-) rename src/h5ai/js/inc/{tree.js => Connector.js} (81%) rename src/h5ai/js/inc/{extended.js => Extended.js} (86%) rename src/h5ai/js/inc/{h5ai.js => H5ai.js} (99%) create mode 100644 src/h5ai/js/inc/Html.js create mode 100644 src/h5ai/js/inc/Path.js create mode 100644 src/h5ai/js/inc/PathCache.js delete mode 100644 src/h5ai/js/inc/path.js diff --git a/src/h5ai/js/inc/tree.js b/src/h5ai/js/inc/Connector.js similarity index 81% rename from src/h5ai/js/inc/tree.js rename to src/h5ai/js/inc/Connector.js index fa2dc0f9..ab644855 100644 --- a/src/h5ai/js/inc/tree.js +++ b/src/h5ai/js/inc/Connector.js @@ -1,13 +1,13 @@ -/*global $, Objects */ +/*global $, H5aiJs */ -Objects.Tree = function (pathCache, h5ai) { +H5aiJs.factory.Connector = function () { var contentTypeRegEx = /^text\/html;h5ai=/, pathnameStatusCache = {}, fetchStatus = function (pathname, callback) { - if (h5ai.settings.folderStatus[pathname]) { - callback(h5ai.settings.folderStatus[pathname]); + if (H5aiJs.h5ai.settings.folderStatus[pathname]) { + callback(H5aiJs.h5ai.settings.folderStatus[pathname]); return; } else if (pathnameStatusCache[pathname]) { callback(pathnameStatusCache[pathname]); @@ -37,14 +37,14 @@ Objects.Tree = function (pathCache, h5ai) { if (status !== "h5ai") { path.status = status; } - path.updateHtml(); - h5ai.linkHoverStates(); + H5aiJs.html.updateHtml(path); + H5aiJs.h5ai.linkHoverStates(); }); } }, updatePaths = function () { - $.each(pathCache.cache, function (ref, cached) { + $.each(H5aiJs.pathCache.cache, function (ref, cached) { updatePath(cached); }); }, @@ -76,7 +76,7 @@ Objects.Tree = function (pathCache, h5ai) { $(html).find("#table td").closest("tr").each(function () { - var path = pathCache.getPath(pathname, this); + var path = H5aiJs.pathCache.getPath(pathname, this); if (path.isFolder && (!path.isParentFolder || includeParent)) { content[path.absHref] = path; @@ -92,7 +92,7 @@ Objects.Tree = function (pathCache, h5ai) { fetchStatusAndContent(pathname, false, function (status, content) { - var path = pathCache.getPath(pathname); + var path = H5aiJs.pathCache.getPath(pathname); path.status = status; path.content = content; @@ -103,7 +103,7 @@ Objects.Tree = function (pathCache, h5ai) { fetchPath(pathname, function (path) { - var parent = pathCache.splitPathname(pathname)[0]; + var parent = H5aiJs.pathCache.splitPathname(pathname)[0]; path.treeOpen = true; if (childPath) { @@ -120,25 +120,24 @@ Objects.Tree = function (pathCache, h5ai) { fetchTree(document.location.pathname, function (path) { $("#tree") - .append(path.updateTreeHtml()) + .append(H5aiJs.html.updateTreeHtml(path)) .scrollpanel() .show(); - h5ai.shiftTree(false, true); - h5ai.linkHoverStates(); + H5aiJs.h5ai.shiftTree(false, true); + H5aiJs.h5ai.linkHoverStates(); setTimeout(function () { $("#tree").get(0).updateScrollbar(); }, 1); }); }, init = function () { - if (h5ai.settings.showTree) { + if (H5aiJs.h5ai.settings.showTree) { updatePaths(); populateTree(); } - }, - tree = { - fetchStatusAndContent: fetchStatusAndContent, - init: init }; - return tree; + return { + fetchStatusAndContent: fetchStatusAndContent, + init: init + }; }; diff --git a/src/h5ai/js/inc/extended.js b/src/h5ai/js/inc/Extended.js similarity index 86% rename from src/h5ai/js/inc/extended.js rename to src/h5ai/js/inc/Extended.js index e741865d..486107c2 100644 --- a/src/h5ai/js/inc/extended.js +++ b/src/h5ai/js/inc/Extended.js @@ -1,6 +1,6 @@ -/*global $, Objects */ +/*global $, H5aiJs */ -Objects.Extended = function (pathCache, h5ai) { +H5aiJs.factory.Extended = function () { var settings = { customHeader: "h5ai.header.html", @@ -17,15 +17,15 @@ Objects.Extended = function (pathCache, h5ai) { var $ul = $("body > nav ul"), pathname = "/", - path = pathCache.getPath(pathname), + path = H5aiJs.pathCache.getPath(pathname), pathnameParts = document.location.pathname.split("/"); - $ul.append(path.updateCrumbHtml()); + $ul.append(H5aiJs.html.updateCrumbHtml(path)); $.each(pathnameParts, function (idx, part) { if (part !== "") { pathname += part + "/"; - $ul.append(pathCache.getPath(pathname).updateCrumbHtml()); + $ul.append(H5aiJs.html.updateCrumbHtml(H5aiJs.pathCache.getPath(pathname))); } }); }, @@ -37,8 +37,8 @@ Objects.Extended = function (pathCache, h5ai) { $size = $ths.eq(3).find("a"), sortquery = document.location.search, order = { - column: (sortquery.indexOf("C=N") >= 0) ? "name" : (sortquery.indexOf("C=M") >= 0) ? "date" : (sortquery.indexOf("C=S") >= 0) ? "size" : h5ai.settings.sortorder.column, - ascending: (sortquery.indexOf("O=A") >= 0) ? true : (sortquery.indexOf("O=D") >= 0) ? false : h5ai.settings.sortorder.ascending + column: (sortquery.indexOf("C=N") >= 0) ? "name" : (sortquery.indexOf("C=M") >= 0) ? "date" : (sortquery.indexOf("C=S") >= 0) ? "size" : H5aiJs.h5ai.settings.sortorder.column, + ascending: (sortquery.indexOf("O=A") >= 0) ? true : (sortquery.indexOf("O=D") >= 0) ? false : H5aiJs.h5ai.settings.sortorder.ascending }, $icon, $ul, $li; @@ -66,8 +66,8 @@ Objects.Extended = function (pathCache, h5ai) { // entries $("#table td").closest("tr").each(function () { - var path = pathCache.getPath(document.location.pathname, this); - $ul.append(path.updateExtendedHtml()); + var path = H5aiJs.pathCache.getPath(document.location.pathname, this); + $ul.append(H5aiJs.html.updateExtendedHtml(path)); }); $("#extended").append($ul); diff --git a/src/h5ai/js/inc/h5ai.js b/src/h5ai/js/inc/H5ai.js similarity index 99% rename from src/h5ai/js/inc/h5ai.js rename to src/h5ai/js/inc/H5ai.js index 56cfcfc6..79779d7d 100644 --- a/src/h5ai/js/inc/h5ai.js +++ b/src/h5ai/js/inc/H5ai.js @@ -1,6 +1,6 @@ -/*global window, $, Objects, localStorage */ +/*global window, $, H5aiJs, localStorage */ -Objects.H5ai = function (options, langs) { +H5aiJs.factory.H5ai = function (options, langs) { var defaults = { store: { @@ -256,7 +256,7 @@ Objects.H5ai = function (options, langs) { if ($indicator.hasClass("unknown")) { $.get("/h5ai/php/treecontent.php", { "href": $entry.find("> a").attr("href") }, function (html) { - + var $content = $(html); $indicator.removeClass("unknown"); diff --git a/src/h5ai/js/inc/Html.js b/src/h5ai/js/inc/Html.js new file mode 100644 index 00000000..79e5977e --- /dev/null +++ b/src/h5ai/js/inc/Html.js @@ -0,0 +1,260 @@ +/*global $, H5aiJs */ + +H5aiJs.factory.Html = function () { + + var imagesPath = "/h5ai/images", + iconsPath = "/h5ai/icons", + image = function (id) { + + return imagesPath + "/" + id + ".png"; + }, + icon = function (id, big) { + + return iconsPath + "/" + (big ? "48x48" : "16x16") + "/" + id + ".png"; + }, + onClick = function (path, context) { + + H5aiJs.h5ai.triggerPathClick(path, context); + }, + updateCrumbHtml = function (path) { + + var $html, $a; + + if (path.html.$crumb && path.html.$crumb.data("status") === path.status) { + return path.html.$crumb; + } + + $html = $("
  • ") + .data("path", path) + .addClass(path.isFolder ? "folder" : "file"); + + if (path.status) { + $html.data("status", path.status); + } + + $a = $(">" + path.label + "") + .appendTo($html) + .attr("href", path.absHref) + .click(function() { onClick(path, "crumb"); }); + + if (path.isDomain) { + $html.addClass("domain"); + $a.find("img").attr("src", image("home")); + } + + if (path.isCurrentFolder) { + $html.addClass("current"); + } + + if (!isNaN(path.status)) { + if (path.status === 200) { + $("not listable").appendTo($a); + } else { + $("(" + path.status + ")").appendTo($a); + } + } + + if (path.html.$crumb) { + path.html.$crumb.replaceWith($html); + } + path.html.$crumb = $html; + + return $html; + }, + updateExtendedHtml = function (path) { + + var $html, $a, $label; + + if (path.html.$extended && path.html.$extended.data("status") === path.status) { + return path.html.$extended; + } + + $html = $("
  • ") + .data("path", path) + .addClass(path.isFolder ? "folder" : "file"); + + if (path.status) { + $html.data("status", path.status); + } + + $label = $("" + path.label + ""); + $a = $("") + .attr("href", path.absHref) + .click(function() { onClick(path, "extended"); }) + .appendTo($html) + .append($("" + path.alt + "")) + .append($("" + path.alt + "")) + .append($label) + .append($("" + path.date + "")) + .append($("" + path.size + "")); + + $a.hover( + function () { + if ($("#extended").hasClass("icons-view")) { + var $this = $(this); + $(".status.default").hide(); + $(".status.dynamic") + .empty() + .append($this.find(".label").clone()) + .append($("·")) + .append($this.find(".date").clone()) + .show(); + + if (!$this.closest(".entry").hasClass("folder")) { + $(".status.dynamic") + .append($("·")) + .append($this.find(".size").clone()); + } + } + }, + function () { + $(".status.default").show(); + $(".status.dynamic").empty().hide(); + } + ); + + if (path.isParentFolder) { + if (!H5aiJs.h5ai.settings.setParentFolderLabels) { + $label.addClass("l10n-parentDirectory"); + } + $html.addClass("folder-parent"); + } + + if (!isNaN(path.status)) { + if (path.status === 200) { + $html.addClass("page"); + $a.find(".icon.small img").attr("src", icon("folder-page")); + $a.find(".icon.big img").attr("src", icon("folder-page", true)); + } else { + $html.addClass("error"); + $label.append($(" " + path.status + " ")); + } + } + + if (path.html.$extended) { + path.html.$extended.replaceWith($html); + } + path.html.$extended = $html; + + return $html; + }, + updateTreeHtml = function (path) { + + var $html, $blank, $a, $indicator, $ul, idx; + + $html = $("
    ") + .data("path", path) + .addClass(path.isFolder ? "folder" : "file"); + + $blank = $("").appendTo($html); + + $a = $("") + .attr("href", path.absHref) + .click(function() { path.onClick(path, "tree"); }) + .appendTo($html) + .append($("")) + .append($("" + path.label + "")); + + if (path.isFolder) { + // indicator + if (path.status === undefined || !path.isEmpty()) { + $indicator = $("") + .click(function (event) { + + var $entry = $indicator.closest(".entry"); // $html + + if ($indicator.hasClass("unknown")) { + H5aiJs.connector.fetchStatusAndContent(path.absHref, false, function (status, content) { + + path.status = status; + path.content = content; + path.treeOpen = true; + $("#tree").get(0).updateScrollbar(true); + updateTreeHtml(path); + $("#tree").get(0).updateScrollbar(); + }); + } else if ($indicator.hasClass("open")) { + path.treeOpen = false; + $indicator.removeClass("open"); + $("#tree").get(0).updateScrollbar(true); + $entry.find("> ul.content").slideUp(function() { + + $("#tree").get(0).updateScrollbar(); + }); + } else { + path.treeOpen = true; + $indicator.addClass("open"); + $("#tree").get(0).updateScrollbar(true); + $entry.find("> ul.content").slideDown(function() { + + $("#tree").get(0).updateScrollbar(); + }); + } + + }); + + if (path.status === undefined) { + $indicator.addClass("unknown"); + } else if (path.treeOpen) { + $indicator.addClass("open"); + } + + $blank.replaceWith($indicator); + } + + // is path the domain? + if (path.isDomain) { + $html.addClass("domain"); + $a.find(".icon img").attr("src", icon("folder-home")); + } + + // is path the current folder? + if (path.isCurrentFolder) { + $html.addClass("current"); + $a.find(".icon img").attr("src", icon("folder-open")); + } + + // does it have subfolders? + if (!path.isEmpty()) { + $ul = $("