basic-component-mixins - npm Package Compare versions

Comparing version 0.7.1 to 0.7.2

docs/Keyboard.md

@@ -35,11 +35,7 @@ <a name="Keyboard"></a>
 
-Finally, this mixin is designed to work with Collective class via a mixin
-like TargetInCollective. This allows a set of related component instances
-to cooperatively handle the keyboard. See the Collective class for details.
+Finally, this mixin is designed to work with the optional Collective class
+via a mixin like TargetInCollective. This allows a set of related component
+instances to cooperatively handle the keyboard. See the Collective class
+for details.
 
-NOTE: For the time being, this mixin should be used with
-TargetInCollective. The intention is to allow this mixin to be used without
-requiring collective keyboard support, so that this mixin can be used on
-its own.
-
 **Kind**: global class  
@@ -46,0 +42,0 @@ <a name="Keyboard+keydown"></a>

package.json

 {
   "name": "basic-component-mixins",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "Mixins for creating web components in plain JavaScript",
@@ -5,0 +5,0 @@ "homepage": "https://component.kitchen",

README.md

@@ -226,3 +226,3 @@ # basic-component-mixins
     var GreetElement = Basic.Composable(HTMLElement).compose(
-      ShadowTemplate,
+      Basic.ShadowTemplate,
       {
@@ -301,2 +301,4 @@ template: 'Hello, <slot></slot>.'
   (direct children, or nodes distributed to slots).
+* [OpenClose](docs/OpenClose.md).
+  Adds open/close semantics.
 * [SelectionAriaActive](docs/SelectionAriaActive.md).
@@ -303,0 +305,0 @@ Treat the selected item in a list as the active item in ARIA accessibility

src/ContentAsItems.js

@@ -36,3 +36,8 @@ /* Exported function extends a base class with ContentAsItems. */
       if (super.applySelection) { super.applySelection(item, selected); }
-      item.classList.toggle('selected', selected);
+      // Would like to use classList.toggle() here, but IE 11 doesn't have it.
+      if (selected) {
+        item.classList.add('selected');
+      } else {
+        item.classList.remove('selected');
+      }
     }
@@ -39,0 +44,0 @@

src/Keyboard.js

@@ -40,13 +40,16 @@ // TODO: Provide baseline behavior for this mixin when used outside of a
    *
-   * Finally, this mixin is designed to work with Collective class via a mixin
-   * like TargetInCollective. This allows a set of related component instances
-   * to cooperatively handle the keyboard. See the Collective class for details.
-   *
-   * NOTE: For the time being, this mixin should be used with
-   * TargetInCollective. The intention is to allow this mixin to be used without
-   * requiring collective keyboard support, so that this mixin can be used on
-   * its own.
+   * Finally, this mixin is designed to work with the optional Collective class
+   * via a mixin like TargetInCollective. This allows a set of related component
+   * instances to cooperatively handle the keyboard. See the Collective class
+   * for details.
    */
   class Keyboard extends base {
 
+    createdCallback() {
+      if (super.createdCallback) { super.createdCallback(); }
+
+      // Assume this component is going to handle the keyboard on its own.
+      startListeningToKeydown(this);
+    }
+
     /**
@@ -101,14 +104,24 @@ * Handle the indicated keyboard event.
 
+// Fire the keydown() method on the element or (if it belongs to a collective)
+// all elements in the collective.
+//
+// Note: the value of 'this' is bound to the element which received the event.
 function keydown(event) {
 
-  // Give collective elements a shot at the event, working from innermost to
-  // outermost (this element).
-  let handled;
-  let elements = this.collective.elements;
-  for (let i = elements.length - 1; i >= 0; i--) {
-    let element = elements[i];
-    handled = element.keydown && element.keydown(event);
-    if (handled) {
-      break;
+  let handled = false;
+
+  if (this.collective) {
+    // Give collective elements a shot at the event, working from innermost to
+    // outermost (this element).
+    let elements = this.collective.elements;
+    for (let i = elements.length - 1; i >= 0; i--) {
+      let element = elements[i];
+      handled = element.keydown && element.keydown(event);
+      if (handled) {
+        break;
+      }
     }
+  } else {
+    // Component is handling the keyboard on its own.
+    handled = this.keydown(event);
   }
@@ -115,0 +128,0 @@

src/SelectionInView.js

@@ -17,2 +17,10 @@ /* Exported function extends a base class with SelectionInView. */
 
+    attachedCallback() {
+      if (super.attachedCallback) { super.attachedCallback(); }
+      let selectedItem = this.selectedItem;
+      if (selectedItem) {
+        this.scrollItemIntoView(selectedItem);
+      }
+    }
+
     get selectedItem() {
@@ -19,0 +27,0 @@ return super.selectedItem;

src/TimerSelection.js

@@ -51,3 +51,3 @@ /* Exported function extends a base class with TimerSelection. */
       } else if (!playing && this._playing) {
-          this.pause();
+        this.pause();
       }
@@ -89,3 +89,5 @@ }
 function setTimer(element) {
-  element._timeout = setTimeout(selectNextWithWrap.bind(this), 2000);
+  element._timeout = setTimeout(() => {
+    selectNextWithWrap(element);
+  }, 2000);
 }
@@ -92,0 +94,0 @@

test/ObserveContentChanges.tests.js

@@ -70,8 +70,11 @@ import { assert } from 'chai';
     let fixture = document.createElement('observe-test');
-    fixture.contentChangedHook = (element) => {
-      assert.equal(fixture.textContent, 'chihuahua');
-      done();
-    };
     container.appendChild(fixture);
-    fixture.textContent = 'chihuahua';
+    // Wait for initial contentChanged call to complete.
+    microtask(() => {
+      fixture.contentChangedHook = (element) => {
+        assert.equal(fixture.textContent, 'chihuahua');
+        done();
+      };
+      fixture.textContent = 'chihuahua';
+    });
   });
@@ -81,10 +84,13 @@
     let fixture = document.createElement('observe-test');
-    fixture.contentChangedHook = () => {
-      assert.equal(fixture.textContent, 'dingo');
-      done();
-    };
     container.appendChild(fixture);
-    let div = document.createElement('div');
-    div.textContent = 'dingo';
-    fixture.appendChild(div);
+    // Wait for initial contentChanged call to complete.
+    microtask(() => {
+      fixture.contentChangedHook = () => {
+        assert.equal(fixture.textContent, 'dingo');
+        done();
+      };
+      let div = document.createElement('div');
+      div.textContent = 'dingo';
+      fixture.appendChild(div);
+    });
   });
@@ -97,9 +103,12 @@
     container.appendChild(fixture);
-    fixture.contentChangedHook = function(element) {
-      if (element === contentTest) {
-        assert.equal(element.textContent, 'echidna');
-        done();
-      }
-    };
-    fixture.textContent = 'echidna';
+    // Wait for initial contentChanged call to complete.
+    microtask(() => {
+      fixture.contentChangedHook = function(element) {
+        if (element === contentTest) {
+          assert.equal(element.textContent, 'echidna');
+          done();
+        }
+      };
+      fixture.textContent = 'echidna';
+    });
   });
@@ -110,3 +119,3 @@
     container.appendChild(fixture);
-    // Wait for initial contentChanged to be invoked.
+    // Wait for initial contentChanged call to complete.
     microtask(() => {
@@ -135,15 +144,20 @@ // Listen for future contentChanged invocations.
     let fixture = document.createElement('observe-test');
-    fixture.contentChangedHook = function() {
-      assert.equal(fixture.textContent, 'gorilla');
-      done();
-    };
     container.appendChild(fixture);
+    // Wait for initial contentChanged call to complete.
+    microtask(() => {
 
-    // Remove an element from the shadow, which shouldn't trigger contentChanged.
-    let shadowElement = fixture.shadowRoot.querySelector('#static');
-    shadowElement.remove();
+      fixture.contentChangedHook = function() {
+        assert.equal(fixture.textContent, 'gorilla');
+        done();
+      };
 
-    // Now add an element to the light DOM, which we do expect to trigger
-    // contentChanged.
-    fixture.textContent = 'gorilla';
+      // Remove an element from the shadow, which shouldn't trigger contentChanged.
+      let shadowElement = fixture.shadowRoot.querySelector('#static');
+      shadowElement.remove();
+
+      // Now add an element to the light DOM, which we do expect to trigger
+      // contentChanged.
+      fixture.textContent = 'gorilla';
+
+    });
   });
@@ -157,8 +171,11 @@
     container.appendChild(fixture);
-    fixture.contentChangedHook = function() {
-      assert.equal(fixture.childNodes.length, 0);
-      done();
-    };
-    // Remove a light DOM child, which should trigger contentChanged.
-    fixture.removeChild(div);
+    // Wait for initial contentChanged call to complete.
+    microtask(() => {
+      fixture.contentChangedHook = function() {
+        assert.equal(fixture.childNodes.length, 0);
+        done();
+      };
+      // Remove a light DOM child, which should trigger contentChanged.
+      fixture.removeChild(div);
+    });
   });
@@ -168,3 +185,2 @@
   // not component's own attributes) as content changes.
-
   it.skip("calls contentChanged when shadow element attributes change", done => {
@@ -182,13 +198,16 @@ let fixture = document.createElement('observe-test');
 
-  it.skip("doesn't call contentChanged when element's own attributes change", done => {
+  it("doesn't call contentChanged when element's own attributes change", done => {
     let fixture = document.createElement('observe-test');
-    fixture.contentChangedHook = function() {
-      // Shouldn't get invoked.
-      done(new Error("The contentChanged handler was invoked, but shouldn't have been."));
-    };
     container.appendChild(fixture);
-    fixture.sampleAttribute = 'hedgehog';
-    setTimeout(done);
+    // Wait for initial contentChanged call to complete.
+    microtask(() => {
+      fixture.contentChangedHook = function() {
+        // Shouldn't get invoked.
+        done(new Error("The contentChanged handler was invoked, but shouldn't have been."));
+      };
+      fixture.sampleAttribute = 'hedgehog';
+      microtask(() => done());
+    });
   });
 
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

616922

increased by2.25%

Number of package files

77

increased by6.94%

Lines of code

8204

increased by3.38%

Number of lines in readme file

349

increased by0.58%

No dependency changes