Adding back selected-parent class (#713)

* Adding back in the `selected-parent` class on select of a component * Cleaning up tests
clay · Dec 27, 2016 · d8c7431 · d8c7431
1 parent 9ca5989
commit d8c7431
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 4 deletions.
diff --git a/services/components/select.js b/services/components/select.js
@@ -16,7 +16,8 @@ var _ = require('lodash'),
   visibleComponents = require('./visible-components'),
   hidden = 'kiln-hide',
   selectorHeight = 56, // selector menus are 48px tall, offset is 8px
-  currentSelected;
+  currentSelected,
+  currentSelectedParent;
 
 /**
  * Get the closest component element from the DOM. Checks self and then parents.
@@ -108,7 +109,8 @@ function removePadding() {
  * @param {MouseEvent} e
  */
 function select(el) {
-  var component = getComponentEl(el);
+  var component = getComponentEl(el),
+    parent = getParentEl(component);
 
   // only one component can be selected at a time
   unselect();
@@ -120,21 +122,28 @@ function select(el) {
     component.classList.add('kiln-suppress-animation');
   }
 
-  // selected component gets .selected, parent gets .selected-parent
+  // selected component gets .selected
   if (component && component.tagName !== 'HTML') {
     component.classList.add('selected');
     addPadding(component);
     currentSelected = component;
   }
 
+  // if there's a parent it gets .selected-parent
+  if (parent) {
+    parent.classList.add('selected-parent');
+    currentSelectedParent = parent;
+  }
+
   window.kiln.trigger('select', component);
 }
 
 /**
  * remove selection
  */
 function unselect() {
-  var current = currentSelected || dom.find('.component-selector-wrapper.selected');
+  var current = currentSelected || dom.find('.component-selector-wrapper.selected'),
+    currentParent = current ? currentSelectedParent || getParentEl(current) : null;
 
   if (current) {
     current.classList.remove('kiln-suppress-animation'); // unsuppress initialFadeInOut animation
@@ -143,7 +152,12 @@ function unselect() {
     window.kiln.trigger('unselect', current);
   }
 
+  if (currentParent) {
+    currentParent.classList.remove('selected-parent');
+  }
+
   currentSelected = null;
+  currentSelectedParent = null;
 }
 
 /**

diff --git a/services/components/select.test.js b/services/components/select.test.js
@@ -55,6 +55,18 @@ describe(dirname, function () {
         fn(el);
         expect(el.classList.contains('selected')).to.equal(true);
       });
+
+      it('adds .selected-parent class to parent component', function () {
+        var el = stubEditableElement(),
+          parent = stubComponent(),
+          component = stubComponent();
+
+        component.appendChild(el);
+        parent.appendChild(component);
+
+        fn(el);
+        expect(parent.classList.contains('selected-parent')).to.equal(true);
+      });
     });
 
     describe('unselect', function () {
@@ -70,6 +82,19 @@ describe(dirname, function () {
         fn(); // unselect
         expect(component.classList.contains('selected')).to.equal(false);
       });
+
+      it('removed .selected-parent class from component parent', function () {
+        var el = stubEditableElement(),
+          component = stubComponent(),
+          parent = stubComponent();
+
+        component.appendChild(el);
+        parent.appendChild(component);
+
+        lib.select(el);
+        fn(); // unselect
+        expect(parent.classList.contains('selected-parent')).to.equal(false);
+      });
     });
 
     describe('when', function () {