Keep open/closed/last selected state of sitemap

* Stores the ids of the open sections in a cookie. * When page loads previously opened sections are reopened.

Author: peakpg

Gemfile.lock

@@ -10,6 +10,7 @@ PATH
  rails (>= 3.2.5, < 3.3.0)
  sass-rails
  term-ansicolor
+ underscore-rails (~> 1.4)
 
 GEM
  remote: http://rubygems.org/
@@ -95,7 +96,7 @@ GEM
  hike (1.2.1)
  i18n (0.6.1)
  journey (1.0.4)
- jquery-rails (2.2.1)
+ jquery-rails (2.3.0)
  railties (>= 3.0, < 5.0)
  thor (>= 0.14, < 2.0)
  json (1.7.7)
@@ -176,20 +177,23 @@ GEM
  sqlite3 (1.3.6)
  sqlite3-ruby (1.3.3)
  sqlite3 (>= 1.3.3)
- term-ansicolor (1.0.7)
+ term-ansicolor (1.2.2)
+ tins (~> 0.8)
  thin (1.5.0)
  daemons (>= 1.0.9)
  eventmachine (>= 0.12.6)
  rack (>= 1.0.0)
  thor (0.17.0)
  tilt (1.3.3)
+ tins (0.8.0)
  treetop (1.4.12)
  polyglot
  polyglot (>= 0.3.1)
  tzinfo (0.3.35)
  uglifier (1.3.0)
  execjs (>= 0.3.0)
  multi_json (~> 1.0, >= 1.0.2)
+ underscore-rails (1.4.4)
  websocket (1.0.4)
  xpath (0.1.4)
  nokogiri (~> 1.3)

app/assets/javascripts/cms/core_library.js.erb

@@ -154,7 +154,7 @@ $(function() {
  }
 });
 
-//CookieSet allows us to treat one cookie value as a set of values
+//CookieSet allows us to treat one cookie value as a Set of values (Each value can appear only once)
 jQuery(function($) {
  var sep = '|'
 

app/assets/javascripts/cms/new-sitemap.js

@@ -1,7 +1,9 @@
 //= require 'jquery'
 //= require 'jquery-ui'
+//= require 'jquery.cookie'
 //= require 'bootstrap'
 //= require 'cms/ajax'
+//= require 'underscore'
 
 // Code for working with the new sitemap structure.
 
@@ -28,6 +30,8 @@ var globalMenu = new GlobalMenu();
 var Sitemap = function() {
 };
 
+Sitemap.STATE = 'cms.sitemap.opened';
+
 // @return [Selector] The currently selected section in the sitemap. If a page or other child is selected, this will be
 // that element's parent.
 Sitemap.prototype.currentSection = function() {
@@ -155,6 +159,36 @@ Sitemap.prototype.move_to = function(node_id, target_node_id, position) {
  console.log("Dropping node", node_id, "into", target_node_id, "at position", position);
 
 };
+
+// @param [Selector] A selected link (<a>)
+Sitemap.prototype.isOpen = function(link){
+ return link.siblings('ul').hasClass('in') == true
+};
+
+// @param [Selector] link A selected link (<a>)
+// @param [String] icon The full name of the icon (icon-folder-open)
+Sitemap.prototype.changeIcon = function(link, icon){
+ link.find('i:first').attr('class', icon);
+};
+
+// @param [Number] id
+Sitemap.prototype.openedSection = function(id){
+ $.cookieSet.add(Sitemap.STATE, id);
+};
+Sitemap.prototype.closedSection = function(id){
+ $.cookieSet.remove(Sitemap.STATE, id);
+};
+
+// Reopen all sections that the user was last working with.
+Sitemap.prototype.restoreOpenState = function(){
+ var section_ids = $.cookieSet.get(Sitemap.STATE);
+ _.each(section_ids, function(id){
+ var link = $('.selectable[data-type="section"][data-id=' + id + ']');
+ sitemap.changeIcon(link, 'icon-folder-open');
+ $(link.data('target')).addClass('in');
+ });
+};
+
 var sitemap = new Sitemap();
 
 $(function() {
@@ -182,11 +216,17 @@ $(function() {
 
 // Change the folder icon when they are opened/closed.
 $(function() {
+ sitemap.restoreOpenState();
+ console.log("On page load, these sections should be open", $.cookie('sitemap.opened'));
  $('a[data-toggle="collapse"]').click(function() {
- if ($(this).siblings('ul').hasClass('in') == true) {
- $(this).find('i:first').attr('class', 'icon-folder-close');
+ if (sitemap.isOpen($(this))) {
+// console.log("Section", $(this).data('id'), "was closed.");
+ sitemap.closedSection($(this).data('id'));
+ sitemap.changeIcon($(this), 'icon-folder-close');
  } else {
- $(this).find('i:first').attr('class', 'icon-folder-open');
+// console.log("Section", $(this).data('id'), "was opened.");
+ sitemap.openedSection($(this).data('id'));
+ sitemap.changeIcon($(this), 'icon-folder-open');
  }
  });
 });

app/views/cms/section_nodes/_section.html.erb

@@ -4,6 +4,7 @@
  data = {
  target: "#section#{section.id}",
  type: 'section',
+ id: section.id,
  node_id: key.id,
  configure_path: edit_section_path(section),
  delete_path: section_path(section),

browsercms.gemspec

@@ -35,6 +35,7 @@ Gem::Specification.new do |s|
  s.add_dependency("bootstrap-sass")
  s.add_dependency("ancestry", "~> 1.2.4")
  s.add_dependency("ckeditor_rails", "~> 4.0.1.1")
+ s.add_dependency("underscore-rails", "~> 1.4")
  s.add_dependency("jquery-rails", "~> 2.0")
  s.add_dependency("paperclip", "~> 3.0.3")
 

lib/cms/engine.rb

@@ -5,7 +5,6 @@
 require 'browsercms'
 
 require 'bootstrap-sass'
-
 # Gem name is different than file name
 # Must be required FIRST, so that our assets paths appear before its do.
 # This allows app/assets/ckeditor/config.js to set CMS specific defaults.
@@ -15,6 +14,8 @@
 # especially while upgrading
 require 'jquery-rails'
 
+require 'underscore-rails'
+
 module Cms
 
  class Engine < Rails::Engine

todo_ui_Revamp.md

@@ -9,10 +9,9 @@ Tasks:
 ## UI Merge
 
 * Move/drag/drop sections
-* Keep open/closed/last selected state of sitemap
 * Audit/Delete/merge js/cms/sitemap.js.erb
 * No visual indicator of an empty section
-* page_editor.css/page_content_editing.css shouldn't have been deleted.
+* page_editor.css/page_content_editing.css shouldn't have been deleted during the bootstrap UI merge.
 * Can't edit the root section
 * Delete old sitemap pages (_section.old.erb, etc)