Need to expand sections as you pass over them.

* As you move elements, the sections near the drop target expand permanently.

Author: peakpg

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

@@ -161,34 +161,53 @@ Sitemap.prototype.move_to = function(node_id, target_node_id, position) {
 };
 
 // @param [Selector] A selected link (<a>)
-Sitemap.prototype.isOpen = function(link){
+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){
+Sitemap.prototype.changeIcon = function(link, icon) {
  link.find('i:first').attr('class', icon);
 };
 
 // @param [Number] id
-Sitemap.prototype.openedSection = function(id){
+Sitemap.prototype.saveAsOpened = function(id) {
  $.cookieSet.add(Sitemap.STATE, id);
 };
-Sitemap.prototype.closedSection = function(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(){
+Sitemap.prototype.restoreOpenState = function() {
  var section_ids = $.cookieSet.get(Sitemap.STATE);
- _.each(section_ids, function(id){
+ _.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');
  });
 };
 
+// @param [Selector] link
+// @param [Boolean] forceOpen (Optional: false) Whether to manually force open the section
+Sitemap.prototype.open = function(link, forceOpen) {
+ forceOpen = forceOpen || false;
+ // Ignore requests to open non-sections, or those already open.
+ if (link.data('type') == 'section' && !$(link.data('target')).hasClass('in')) {
+ this.changeIcon(link, 'icon-folder-open');
+ this.saveAsOpened(link.data('id'));
+ if(forceOpen){
+ $(link.data('target')).collapse('show');
+ }
+ }
+
+};
+
+Sitemap.prototype.close = function(link) {
+ this.closedSection(link.data('id'));
+ this.changeIcon(link, 'icon-folder-close');
+};
 var sitemap = new Sitemap();
 
 $(function() {
@@ -209,24 +228,27 @@ $(function() {
  var parent_section = ui.item.parents('ul:first');
  var moving_node_id = ui.item.children('a:first').data('node-id');
  sitemap.move_to(moving_node_id, parent_section.data('node-id'), ui.item.index() + 1);
+ },
+
+ // As we move items around, expand (permanently) the surrounding lists to provide drop targets.
+ change: function(event, ui) {
+ var previousLink = $(ui.placeholder.prev().children('a')[0]);
+ sitemap.open(previousLink, true);
+ var nextLink = $(ui.placeholder.next().children('a')[0]);
+ sitemap.open(nextLink, true);
+
  }
  });
-
 });
 
 // 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 (sitemap.isOpen($(this))) {
-// console.log("Section", $(this).data('id'), "was closed.");
- sitemap.closedSection($(this).data('id'));
- sitemap.changeIcon($(this), 'icon-folder-close');
+ sitemap.close($(this));
  } else {
-// console.log("Section", $(this).data('id'), "was opened.");
- sitemap.openedSection($(this).data('id'));
- sitemap.changeIcon($(this), 'icon-folder-open');
+ sitemap.open($(this));
  }
  });
 });

todo_ui_Revamp.md

@@ -3,12 +3,10 @@ Tasks:
 - Move sitemap items
 -- [BUG] After moving a node, the section_node_ids are probably wrong. This means moving a node twice won't work (though it will appear to).
 -- It's hard visually to drop items into a section (especially if empty). (Should create obvious drop targets when you start dragging).
--- Need to expand sections as you pass over them.
 -- Need an image/section name for hover element when it leaves a parent section.
 
 ## UI Merge
 
-* Move/drag/drop sections
 * 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 during the bootstrap UI merge.