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

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 key = (name + ((options && !!options.key && ("-" + options.key)) || "")).replace(/\W+/g, "-");
-                var cookie = $.orchard.cookie(scope);
-                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 cookies = $.orchard.cookiesInTheOrchard();
-                        var data = $.parseJSON(cookie);
+                    for (var i = 0; i < cookies.length; i++) {
-                        return data && data[key];
+                        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)) || {};
+                    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
-                    data[key] = value;
+                    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

src/Orchard.Web/Themes/TheAdmin/Scripts/admin.js

@@ -1,6 +1,50 @@
-$(document).ready(function(){
+(function ($) {
-$("#navigation li span").click(function() {
+    $.fn.extend({
-$(this).next().next().slideToggle(400);
+        expandoControl: function (getControllees, options) {
-return false;
+            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 = $("<span class=\"expandoGlyph\"></span>");
+
+                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);

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;
+	padding:6px 4px 8px 0;
-}
-#navigation li h3 a:hover, #navigation li h3 a:active, #navigation li h3 a:focus {
-    text-decoration:none;
 }
 #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 {
+.expandoGlyph {
-display:block;
+    background:#fcfcfc url("images/menuOpen.gif") no-repeat center center;
-height:11px;
+    cursor:pointer;
-width:11px;
+    display:block;
-margin:0 0 -22px -8px;
+    height:17px;
-background:url("images/menuOpen.gif") no-repeat center top;
+    margin:0 0 -2.5em -11px;
+    width:17px;
+    position:relative;
+    -webkit-transform:rotate(0deg);
 }
-.menuGlyph:hover {
+.expandoGlyph:hover {
-background:url("images/menuOpenHover.gif") no-repeat center top;
+    background-image:url("images/menuOpenHover.gif");
-cursor:pointer;
+}
+.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

src/Orchard.Web/Themes/TheAdmin/Views/Menu.ascx

@@ -15,10 +15,17 @@
                   classification += "last ";
               
               %>
-          <li<%=!string.IsNullOrEmpty(classification) ? string.Format(" class=\"{0}\"", classification.TrimEnd()) : "" %>><span class="menuGlyph"></span><h3><%=sectionHeaderMarkup %></h3><ul class="menuItems"><%foreach (var menuItem in menuSection.Items) { %>
+          <li<%=!string.IsNullOrEmpty(classification) ? string.Format(" class=\"{0}\"", classification.TrimEnd()) : "" %>><h3><%=sectionHeaderMarkup %></h3><ul class="menuItems"><%foreach (var menuItem in menuSection.Items) { %>
           <li><%: Html.ActionLink(menuItem.Text, (string)menuItem.RouteValues["action"], menuItem.RouteValues)%></li>
           <%} %></ul></li>
     <%
         }
       }%>
-</ul>
+</ul>
+<% using (this.Capture("end-of-page-scripts")) { %>
+<script type="text/javascript">
+    $(function () {
+        $("#navigation h3").expandoControl(function(controller) { return controller.next(); }, { collapse: false, remember: true, path: "<%:ResolveUrl("~/Admin") %>" });
+    });
+</script>
+<% } %>