From f6742c41419416400b9fad537841b1c1a3a8a52a Mon Sep 17 00:00:00 2001 From: Nathan Heskew Date: Wed, 21 Jul 2010 14:09:09 -0700 Subject: [PATCH] Updating the admin nav to remember what was closed - also cleaned up the expand/collapse functionality a bit. still needs a little more work though (images - sprite or embeded, and a little script opt) --HG-- branch : dev --- .../Modules/Orchard.Themes/Scripts/base.js | 43 ++++++++++---- .../Themes/TheAdmin/Scripts/admin.js | 56 +++++++++++++++++-- .../Themes/TheAdmin/Styles/site.css | 49 +++++++++++----- .../Themes/TheAdmin/Views/Menu.ascx | 11 +++- 4 files changed, 127 insertions(+), 32 deletions(-) diff --git a/src/Orchard.Web/Modules/Orchard.Themes/Scripts/base.js b/src/Orchard.Web/Modules/Orchard.Themes/Scripts/base.js index 5c6b184e4..685ea4104 100644 --- a/src/Orchard.Web/Modules/Orchard.Themes/Scripts/base.js +++ b/src/Orchard.Web/Modules/Orchard.Themes/Scripts/base.js @@ -5,26 +5,48 @@ __cookieName: "Orchrd", // Orchard, on a diet __cookieExpiration: 180, // roughly 6 months cookie: function (scope, value, options) { // a light-weight wrapper around $.cookie for an Orchard.* cookie name - return $.cookie($.orchard.__cookieName + (scope ? "-" + scope.toLowerCase() : ""), value, options); + return $.cookie($.orchard.__cookieName + (scope ? scope.toLowerCase() : ""), value, options); + }, + cookiesInTheOrchard: function () { + return $.orchard.cookiesLike($.orchard.__cookieName); + }, + cookiesLike: function (name) { + var jar = []; + // taken from the $.cookie plugin to get all of the cookies that begin with the name + if (document.cookie && document.cookie != '') { + var cookies = document.cookie.split(';'); + for (var i = 0; i < cookies.length; i++) { + var cookie = jQuery.trim(cookies[i]); + // Does this cookie string begin with the name we want? + if (cookie.split("=")[0].substring(0, name.length) === (name)) { + jar.push(decodeURIComponent(cookie.substring(cookie.indexOf("=") + 1))); + } + } + } + return jar; }, setting: function (name, value, options) { // cookie-stored settings (only, at the moment) if (value && value.path) { options = value; value = undefined; } - var scope = (options && options.path && options.path.replace(/\W+/g, "-")) || ""; // this could become a problem with long paths as it's appended to the cookie name - var cookie = $.orchard.cookie(scope); - var key = (name + ((options && !!options.key && options.key) || "")).replace(/\W+/g, "-"); + var key = (name + ((options && !!options.key && ("-" + options.key)) || "")).replace(/\W+/g, "-"); if (typeof value === "undefined") { // try to get the setting value from the default "root" cookie - if (cookie) { - var data = $.parseJSON(cookie); - return data && data[key]; + var cookies = $.orchard.cookiesInTheOrchard(); + for (var i = 0; i < cookies.length; i++) { + var data = $.parseJSON(cookies[i]); + var value = data && data[key]; + if (typeof value !== "undefined") { + return value; + } } return undefined; } else { // store the setting value - the setting isn't removable by the way, setting to "" might be enough for most cases - var data = (cookie && $.parseJSON(cookie)) || {}; - data[key] = value; + var scope = (options && options.path && options.path.replace(/\W+/g, "-")) || ""; // this could become a problem with long paths as it's appended to the cookie name + var cookie = $.orchard.cookie(scope); + var newData = (cookie && $.parseJSON(cookie)) || {}; + newData[key] = value; var dataString = (function (obj) { //todo: pull out into a seperate function if (!obj) { return ""; } var k, str = "{"; @@ -35,7 +57,7 @@ str = str.substring(0, str.length - 1); } return str + "}"; - })(data); + })(newData); $.orchard.cookie(scope, dataString, { expires: $.orchard.__cookieExpiration, path: (options && options.path) || "/" }); // todo: default path should be app path } } @@ -69,6 +91,7 @@ //_controllees.slideUp(200); <- hook this back up when chrome behaves, or when I care less _controllees.hide() } + return this; } }); // collapsable areas - anything with a data-controllerid attribute has its visibility controlled by the id-ed radio/checkbox diff --git a/src/Orchard.Web/Themes/TheAdmin/Scripts/admin.js b/src/Orchard.Web/Themes/TheAdmin/Scripts/admin.js index 0306c639a..c2c3f9900 100644 --- a/src/Orchard.Web/Themes/TheAdmin/Scripts/admin.js +++ b/src/Orchard.Web/Themes/TheAdmin/Scripts/admin.js @@ -1,6 +1,50 @@ -$(document).ready(function(){ -$("#navigation li span").click(function() { -$(this).next().next().slideToggle(400); -return false; - }); -}); +(function ($) { + $.fn.extend({ + expandoControl: function (getControllees, options) { + if (typeof getControllees !== "function") + return this; + + var _this = $(this); + var settings = $.extend({ + path: "/", + collapse: false, + remember: true + }, options); + _this.each(function (index, element) { + var controller = $(element); + var glyph = $(""); + + glyph.data("controllees", getControllees(controller)); + if (settings.remember) { + var shouldClose = $.orchard.setting("expando", { key: _this.selector + "-" + controller.text(), path: settings.path }); + if (shouldClose) { + glyph.addClass("closed").data("controllees").hide(); + } + } + glyph.click(function () { + var __this = $(this); + + if (settings.remember) { // remembering closed state as true because that's not the default + // need to allow specified keys since these selectors could get *really* long + $.orchard.setting("expando", !__this.hasClass("closed") ? "closed" : "open", { key: _this.selector + "-" + controller.text(), path: settings.path }); + } + + if (__this.hasClass("closed") || __this.hasClass("closing")) { + __this.addClass("opening") + .data("controllees").slideDown(300, function () { __this.removeClass("opening").removeClass("closed").addClass("open"); }); + } + else { + __this.addClass("closing") + .data("controllees").slideUp(300, function () { __this.removeClass("closing").removeClass("open").addClass("closed"); }); + } + + return false; + }); + + controller.before(glyph); + }); + + return this; + } + }); +})(jQuery); \ No newline at end of file diff --git a/src/Orchard.Web/Themes/TheAdmin/Styles/site.css b/src/Orchard.Web/Themes/TheAdmin/Styles/site.css index 8ac3c7b37..58ff7f699 100644 --- a/src/Orchard.Web/Themes/TheAdmin/Styles/site.css +++ b/src/Orchard.Web/Themes/TheAdmin/Styles/site.css @@ -246,14 +246,11 @@ form.link button:hover { margin:0; } #navigation li h3 { - padding:0; + padding:0 0 0 8px; } #navigation li h3 a, #navigation li h3 span { display:block; - padding:6px 4px 8px 8px; -} -#navigation li h3 a:hover, #navigation li h3 a:active, #navigation li h3 a:focus { - text-decoration:none; + padding:6px 4px 8px 0; } #navigation ul a, #navigation ul a:link, #navigation ul a:visited { color:#2d2f25; @@ -271,16 +268,40 @@ form.link button:hover { } /* todo: make generic so all toggles can use this and clean up jQuery */ -.menuGlyph { -display:block; -height:11px; -width:11px; -margin:0 0 -22px -8px; -background:url("images/menuOpen.gif") no-repeat center top; +.expandoGlyph { + background:#fcfcfc url("images/menuOpen.gif") no-repeat center center; + cursor:pointer; + display:block; + height:17px; + margin:0 0 -2.5em -11px; + width:17px; + position:relative; + -webkit-transform:rotate(0deg); } -.menuGlyph:hover { -background:url("images/menuOpenHover.gif") no-repeat center top; -cursor:pointer; +.expandoGlyph:hover { + background-image:url("images/menuOpenHover.gif"); +} +.expandoGlyph.closed { + background-image:url("images/menuClosed.gif"); +} +.expandoGlyph.closed:hover { + background-image:url("images/menuClosedHover.gif"); +} +.expandoGlyph.closing { + -webkit-transition:all .2s ease-in-out; + -moz-transition:all .2s ease-in-out; + transition:all .2s ease-in-out; + -webkit-transform:rotate(-90deg); + -moz-transform:rotate(-90deg); + transform:rotate(-90deg); +} +.expandoGlyph.opening { + -webkit-transition:all .2s ease-in-out; + -moz-transition:all .2s ease-in-out; + transition:all .2s ease-in-out; + -webkit-transform:rotate(90deg); + -moz-transform:rotate(90deg); + transform:rotate(90deg); } /* Content diff --git a/src/Orchard.Web/Themes/TheAdmin/Views/Menu.ascx b/src/Orchard.Web/Themes/TheAdmin/Views/Menu.ascx index ae65161c3..a236b79c7 100644 --- a/src/Orchard.Web/Themes/TheAdmin/Views/Menu.ascx +++ b/src/Orchard.Web/Themes/TheAdmin/Views/Menu.ascx @@ -15,10 +15,17 @@ classification += "last "; %> - >

<%=sectionHeaderMarkup %>

\ No newline at end of file + +<% using (this.Capture("end-of-page-scripts")) { %> + +<% } %> \ No newline at end of file