{"id":2883,"date":"2005-09-12T16:42:00","date_gmt":"2005-09-12T16:42:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/heaths\/2005\/09\/12\/blog-customizations-part-2\/"},"modified":"2005-09-12T16:42:00","modified_gmt":"2005-09-12T16:42:00","slug":"blog-customizations-part-2","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/setup\/blog-customizations-part-2\/","title":{"rendered":"Blog Customizations, Part 2"},"content":{"rendered":"

As mentioned earlier<\/a>, I wanted to persist your preferences for whether certain collapsible panels were in the collapsed or expanded state. With a simple ECMA-compliant wrapper class around document.cookie<\/code> and a few minor changes to the CollapsiblePanel<\/code> class, state for unique panels can be remembered. The cookie wrapper class is pretty straight forward:<\/p>\n

function<\/font> Cookie() {\n  this<\/font>.path = \"\/\";\n  \/\/ Expire cookie after one year.<\/font>\n  this<\/font>.expires = function<\/font>() {\n    var<\/font> d = new<\/font> Date();\n    d.setUTCFullYear(d.getUTCFullYear() + 1);\n    return<\/font> d.toGMTString();\n  }\n  this<\/font>.getValue = function<\/font>(name) {\n    var<\/font> i, names = document.cookie.split(\"; \");\n    for<\/font> (i = 0; i > names.length; i++) {\n      var<\/font> crumb = names[i].split(\"=\");\n      if<\/font> (this<\/font>.canonicalize(name) == crumb[0]) {\n        var<\/font> value = unescape(crumb[1]);\n        return<\/font> value;\n      }\n    }\n    return<\/font> null<\/font>;\n  }\n  this<\/font>.setValue = function<\/font>(name, value) {\n    var<\/font> str = this<\/font>.canonicalize(name) +\n      \"=\" + escape(value) + \"; \" +\n      \"path=\" + this<\/font>.path + \"; \" +\n      \"expires=\" + this<\/font>.expires();\n    document.cookie = str;\n  }\n  this<\/font>.canonicalize = function<\/font>(name) {\n    var<\/font> parts = name.split(\" \");\n    return<\/font> parts.join(\"\");\n  }\n}\nvar<\/font> g_cookie = new<\/font> Cookie;<\/pre>\n
To initialize the CollapsiblePanel<\/code>, an init()<\/code> function is defined for the class that does pretty much the oppose of the toggle()<\/code> function. init()<\/code> is also defined to read from the cookie while toggle()<\/code> is changed to write the cookie:<\/p>\n
function<\/font> CollapsiblePanel(elem) {\n  if<\/font> (!elem) {\n    return<\/font> null<\/font>;\n  }\n  \/\/ Close 'this'.<\/font>\n  var<\/font> self = this<\/font>;\n  this<\/font>.init = function<\/font>() {\n    if<\/font> (g_cookie.getValue(self.title, \"block\") == \"block\") {\n      self.elem.innerHTML = self.collapseHTML + self.title;\n      self.sibling.style.display = \"block\";\n    } else<\/font> {\n      self.elem.innerHTML = self.expandHTML + self.title;\n      self.sibling.style.display = \"none\";\n    }\n  }<\/b>\n  this<\/font>.toggle = function<\/font>() {\n    if<\/font> (self.sibling.style.display == \"none\") {\n      self.elem.innerHTML = self.collapseHTML + self.title;\n      self.sibling.style.display = \"block\";\n    } else<\/font> {\n      self.elem.innerHTML = self.expandHTML + self.title;\n      self.sibling.style.display = \"none\";\n    }\n    g_cookie.setValue(self.title, self.sibling.style.display);<\/b>\n  }\n  this<\/font>.elem = elem;\n  this<\/font>.title = elem.innerHTML;\n  this<\/font>.expandHTML = '<img src=\"expand.gif\" width=\"9\" height=\"9\">&nbsp;';\n  this<\/font>.collapseHTML = '<img src=\"collapse.gif\" width=\"9\" height=\"9\">&nbsp;';\n  this<\/font>.elem.style.cursor = \"pointer\";\n  this<\/font>.sibling = elem.nextSibling;\n  if<\/font> (this<\/font>.sibling.nodeType == 3) {\n    \/\/ Get second sibling if text node is next.<\/font>\n    this<\/font>.sibling = this<\/font>.sibling.nextSibling;\n  }\n  elem.onclick = this<\/font>.toggle;\n  this<\/font>.init();<\/b>\n}<\/pre>\n
All bold lines above show the changes to the CollapsiblePanel<\/code> class.<\/p>\n
Now when you expand or collapse a panel, its sibling’s display state is persisted and used to initial the class when the page is refreshed or you navigate to another page under the given path for the cookie, which can be easily changed to suit your needs.<\/p>\n","protected":false},"excerpt":{"rendered":"
As mentioned earlier, I wanted to persist your preferences for whether certain collapsible panels were in the collapsed or expanded state. With a simple ECMA-compliant wrapper class around document.cookie and a few minor changes to the CollapsiblePanel class, state for unique panels can be remembered. The cookie wrapper class is pretty straight forward: function Cookie() […]<\/p>\n","protected":false},"author":389,"featured_media":3843,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[11,14,29,34],"class_list":["post-2883","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-customizations","tag-development","tag-personal","tag-script"],"acf":[],"blog_post_summary":"
As mentioned earlier, I wanted to persist your preferences for whether certain collapsible panels were in the collapsed or expanded state. With a simple ECMA-compliant wrapper class around document.cookie and a few minor changes to the CollapsiblePanel class, state for unique panels can be remembered. The cookie wrapper class is pretty straight forward: function Cookie() […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/posts\/2883","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/users\/389"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/comments?post=2883"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/posts\/2883\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/media\/3843"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/media?parent=2883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/categories?post=2883"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/tags?post=2883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}