basic-component-mixins - npm Package Compare versions

Comparing version 0.7.2 to 0.7.3

docs/ClickSelection.md

@@ -8,7 +8,7 @@ <a name="ClickSelection"></a>
 
-This mixin expects the component to provide a method `indexOfItem(item)`.
-You can provide that method yourself, or use the ContentAsItems mixin.
-This mixin also expects the component to define a `selectedIndex`
-property. You can provide that yourself, or use the ItemsSelection mixin.
+This mixin expects the component to provide an `items` property. You can
+provide that property yourself, or use the ContentAsItems mixin. This mixin
+also expects the component to define a `selectedIndex` property. You can
+provide that yourself, or use the ItemsSelection mixin.
 
 **Kind**: global class  

docs/ContentAsItems.md

@@ -25,3 +25,2 @@ <a name="ContentAsItems"></a>
     * [.applySelection(item, selected)](#ContentAsItems+applySelection)
-    * [.indexOfItem(item)](#ContentAsItems+indexOfItem) ⇒ <code>number</code>
     * [.itemAdded(item)](#ContentAsItems+itemAdded)
@@ -51,15 +50,2 @@ * [.itemsChanged()](#ContentAsItems+itemsChanged)
 
-<a name="ContentAsItems+indexOfItem"></a>
-### contentAsItems.indexOfItem(item) ⇒ <code>number</code>
-Return the positional index for the indicated item.
-
-Because this acts like a getter, this does not invoke a base implementation.
-
-**Kind**: instance method of <code>[ContentAsItems](#ContentAsItems)</code>  
-**Returns**: <code>number</code> - The index of the item, or -1 if not found.  
-
-| Param | Type | Description |
-| --- | --- | --- |
-| item | <code>HTMLElement</code> | The item whose index is requested. |
-
 <a name="ContentAsItems+itemAdded"></a>
@@ -66,0 +52,0 @@ ### contentAsItems.itemAdded(item)

docs/TargetSelection.md

@@ -34,3 +34,2 @@ <a name="TargetSelection"></a>
     * [.target](#TargetSelection+target) : <code>HTMLElement</code>
-    * [.indexOfItem(item)](#TargetSelection+indexOfItem) ⇒ <code>number</code>
     * [.itemsChanged()](#TargetSelection+itemsChanged)
@@ -60,13 +59,2 @@
 **Kind**: instance property of <code>[TargetSelection](#TargetSelection)</code>  
-<a name="TargetSelection+indexOfItem"></a>
-### targetSelection.indexOfItem(item) ⇒ <code>number</code>
-Return the positional index for the indicated item.
-
-**Kind**: instance method of <code>[TargetSelection](#TargetSelection)</code>  
-**Returns**: <code>number</code> - The index of the item, or -1 if not found.  
-
-| Param | Type | Description |
-| --- | --- | --- |
-| item | <code>HTMLElement</code> | The item whose index is requested. |
-
 <a name="TargetSelection+itemsChanged"></a>
@@ -73,0 +61,0 @@ ### targetSelection.itemsChanged()

es5globals.js

 /*
  * This file is transpiled to create an ES5-compatible distribution in which
- * the mixins and helpers are available via the window.Basic global.
- * E.g., the AttributeMarshalling mixin is available as
- * window.Basic.AttributeMarshalling.
+ * the package's main feature(s) are available via the window.Basic global.
  */
@@ -7,0 +5,0 @@

package.json

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

src/AttributeMarshalling.js

@@ -63,3 +63,4 @@ /* Exported function extends a base class with AttributeMarshalling. */
       if (super.createdCallback) { super.createdCallback(); }
-      [].forEach.call(this.attributes, attribute => {
+      let attributes = [].slice.call(this.attributes); // To array for IE
+      attributes.forEach(attribute => {
         this.attributeChangedCallback(attribute.name, undefined, attribute.value);
@@ -66,0 +67,0 @@ });

src/ClickSelection.js

@@ -10,6 +10,6 @@ /* Exported function extends a base class with ClickSelection. */
    *
-   * This mixin expects the component to provide a method `indexOfItem(item)`.
-   * You can provide that method yourself, or use the ContentAsItems mixin.
-   * This mixin also expects the component to define a `selectedIndex`
-   * property. You can provide that yourself, or use the ItemsSelection mixin.
+   * This mixin expects the component to provide an `items` property. You can
+   * provide that property yourself, or use the ContentAsItems mixin. This mixin
+   * also expects the component to define a `selectedIndex` property. You can
+   * provide that yourself, or use the ItemsSelection mixin.
    */
@@ -55,3 +55,3 @@ class ClickSelection extends base {
 function selectTarget(element, target) {
-  let index = element.indexOfItem && element.indexOfItem(target);
+  let index = element.items && element.items.indexOf(target);
   if (index >= 0) {
@@ -58,0 +58,0 @@ element.selectedIndex = index;

src/ContentAsItems.js

@@ -51,14 +51,2 @@ /* Exported function extends a base class with ContentAsItems. */
     /**
-     * Return the positional index for the indicated item.
-     *
-     * Because this acts like a getter, this does not invoke a base implementation.
-     *
-     * @param {HTMLElement} item The item whose index is requested.
-     * @returns {number} The index of the item, or -1 if not found.
-     */
-    indexOfItem(item) {
-      return this.items.indexOf(item);
-    }
-
-    /**
      * This method is invoked whenever a new item is added to the list.
@@ -65,0 +53,0 @@ *

src/ItemsSelection.js

@@ -113,3 +113,3 @@ /* Exported function extends a base class with ItemsSelection. */
       // TODO: Memoize
-      let index = this.indexOfItem(selectedItem);
+      let index = this.items.indexOf(selectedItem);
 
@@ -167,3 +167,3 @@ // If index = -1, selection wasn't found. Most likely cause is that the
       // or index in each setter.
-      let index = this.indexOfItem(item);
+      let index = this.items.indexOf(item);
       updatePossibleNavigations(this, index);
@@ -170,0 +170,0 @@

src/SelectionAriaActive.js

@@ -48,5 +48,8 @@ // Used to assign unique IDs to item elements without IDs.
       item.setAttribute('aria-selected', selected);
-      let itemId = item.getAttribute('id');
+      let itemId = item.id;
       if (itemId) {
-        this.collective.outermostElement.setAttribute('aria-activedescendant', itemId);
+        let outermost = this.collective ?
+          this.collective.outermostElement :
+          this;
+        outermost.setAttribute('aria-activedescendant', itemId);
       }
@@ -86,14 +89,5 @@ }
       if (super.createdCallback) { super.createdCallback(); }
-
-      // Determine a base item ID based on this component's host's own ID. This
-      // will be combined with a unique integer to assign IDs to items that
-      // don't have an explicit ID. If the basic-list-box has ID "foo", then its
-      // items will have IDs that look like "_fooOption1". If the list has no ID
-      // itself, its items will get IDs that look like "_option1". Item IDs are
-      // prefixed with an underscore to differentiate them from
-      // manually-assigned IDs, and to minimize the potential for ID conflicts.
-      let elementId = this.getAttribute( "id" );
-      this.itemBaseId = elementId ?
-          "_" + elementId + "Option" :
-          "_option";
+      if (!this.getAttribute('role')) {
+        this.setAttribute('role', 'listbox');
+      }
     }
@@ -108,4 +102,15 @@
       // overall list whenever the selection changes.
-      if (!item.getAttribute('id')) {
-        item.setAttribute('id', this.itemBaseId + idCount++);
+      //
+      // The ID will take the form of a base ID plus a unique integer. The base
+      // ID will be incorporate the component's own ID. E.g., if a component has
+      // ID "foo", then its items will have IDs that look like "_fooOption1". If
+      // the compnent has no ID itself, its items will get IDs that look like
+      // "_option1". Item IDs are prefixed with an underscore to differentiate
+      // them from manually-assigned IDs, and to minimize the potential for ID
+      // conflicts.
+      if (!item.id) {
+        let baseId = this.id ?
+            "_" + this.id + "Option" :
+            "_option";
+        item.id = baseId + idCount++;
       }
@@ -120,4 +125,7 @@ }
       // Catch the case where the selection is removed.
-      if (item == null && this.collective) {
-        this.collective.outermostElement.removeAttribute('aria-activedescendant');
+      if (item == null) {
+        let outermost = this.collective ?
+          this.collective.outermostElement :
+          this;
+        outermost.removeAttribute('aria-activedescendant');
       }
@@ -124,0 +132,0 @@ }

src/SwipeDirection.js

@@ -25,29 +25,58 @@ /* Exported function extends a base class with SwipeDirection. */
       // the first if the user has already begun a swipe.
-      this.addEventListener('touchstart', event => {
-        if (this._multiTouch) {
-          return;
-        } else if (event.touches.length === 1) {
-          touchStart(this, event);
-        } else {
-          this._multiTouch = true;
-        }
-      });
-      this.addEventListener('touchmove', event => {
-        if (!this._multiTouch && event.touches.length === 1) {
-          let handled = touchMove(this, event);
-          if (handled) {
-            event.preventDefault();
+      if (window.PointerEvent) {
+        // Prefer listening to standard pointer events.
+        this.addEventListener('pointerdown', event => {
+          if (isEventForPenOrPrimaryTouch(event)) {
+            touchStart(this, event.clientX, event.clientY);
           }
-        }
-      });
-      this.addEventListener('touchend', event => {
-        if (event.touches.length === 0) {
-          // All touches removed; gesture is complete.
-          if (!this._multiTouch) {
-            // Single-touch swipe has finished.
-            touchEnd(this, event);
+        });
+        this.addEventListener('pointermove', event => {
+          if (isEventForPenOrPrimaryTouch(event)) {
+            let handled = touchMove(this, event.clientX, event.clientY);
+            if (handled) {
+              event.preventDefault();
+            }
           }
-          this._multiTouch = false;
-        }
-      });
+        });
+        this.addEventListener('pointerup', event => {
+          if (isEventForPenOrPrimaryTouch(event)) {
+            touchEnd(this, event.clientX, event.clientY);
+          }
+        });
+      } else {
+        // Pointer events not supported -- listen to older touch events.
+        this.addEventListener('touchstart', event => {
+          if (this._multiTouch) {
+            return;
+          } else if (event.touches.length === 1) {
+            let clientX = event.changedTouches[0].clientX;
+            let clientY = event.changedTouches[0].clientY;
+            touchStart(this, clientX, clientY);
+          } else {
+            this._multiTouch = true;
+          }
+        });
+        this.addEventListener('touchmove', event => {
+          if (!this._multiTouch && event.touches.length === 1) {
+            let clientX = event.changedTouches[0].clientX;
+            let clientY = event.changedTouches[0].clientY;
+            let handled = touchMove(this, clientX, clientY);
+            if (handled) {
+              event.preventDefault();
+            }
+          }
+        });
+        this.addEventListener('touchend', event => {
+          if (event.touches.length === 0) {
+            // All touches removed; gesture is complete.
+            if (!this._multiTouch) {
+              // Single-touch swipe has finished.
+              let clientX = event.changedTouches[0].clientX;
+              let clientY = event.changedTouches[0].clientY;
+              touchEnd(this, clientX, clientY);
+            }
+            this._multiTouch = false;
+          }
+        });
+      }
     }
@@ -110,9 +139,14 @@
 
-function touchStart(element, event) {
+// Return true if the pointer event is for the pen, or the primary touch point.
+function isEventForPenOrPrimaryTouch(event) {
+  return event.pointerType === 'pen' ||
+      (event.pointerType === 'touch' && event.isPrimary);
+}
+
+
+function touchStart(element, clientX, clientY) {
   element.showTransition(false);
-  let x = event.changedTouches[0].clientX;
-  let y = event.changedTouches[0].clientY;
-  element._startX = x;
-  element._previousX = x;
-  element._previousY = y;
+  element._startX = clientX;
+  element._previousX = clientX;
+  element._previousY = clientY;
   element._deltaX = 0;
@@ -122,12 +156,10 @@ element._deltaY = 0;
 
-function touchMove(element, event) {
-  let x = event.changedTouches[0].clientX;
-  let y = event.changedTouches[0].clientY;
-  element._deltaX = x - element._previousX;
-  element._deltaY = y - element._previousY;
-  element._previousX = x;
-  element._previousY = y;
+function touchMove(element, clientX, clientY) {
+  element._deltaX = clientX - element._previousX;
+  element._deltaY = clientY - element._previousY;
+  element._previousX = clientX;
+  element._previousY = clientY;
   if (Math.abs(element._deltaX) > Math.abs(element._deltaY)) {
     // Move was mostly horizontal.
-    trackTo(element, x);
+    trackTo(element, clientX);
     // Indicate that the event was handled. It'd be nicer if we didn't have
@@ -147,5 +179,4 @@ // to do this so that, e.g., a user could be swiping left and right
 
-function touchEnd(element, event) {
+function touchEnd(element, clientX, clientY) {
   element.showTransition(true);
-  let x = event.changedTouches[0].clientX;
   if (element._deltaX >= 20) {
@@ -162,3 +193,3 @@ // Finished going right at high speed.
     // console.log("slow drag " + element._deltaX);
-    trackTo(element, x);
+    trackTo(element, clientX);
     let position = element.position;
@@ -165,0 +196,0 @@ if (position >= 0.5) {

src/TargetSelection.js

@@ -31,26 +31,3 @@ /* Exported function extends a base class with TargetSelection. */
 
-    // attachedCallback() {
-    //   // Apply any selection made before assimilation.
-    //   if (this._prematureSelectedIndex
-    //       && 'selectedIndex' in this && this.selectedIndex === -1) {
-    //     this.selectedIndex = this._prematureSelectedIndex;
-    //     this._prematureSelectedIndex = null;
-    //   }
-    // }
-
     /**
-     * Return the positional index for the indicated item.
-     *
-     * @param {HTMLElement} item The item whose index is requested.
-     * @returns {number} The index of the item, or -1 if not found.
-     */
-    indexOfItem(item) {
-      if (super.indexOfItem) { super.indexOfItem(item); }
-      let target = this.target;
-      return target ?
-        target.indexOfItem(item) :
-        -1;
-    }
-
-    /**
      * The current set of items in the list.
@@ -88,8 +65,2 @@ *
       if ('selectedIndex' in base.prototype) { super.selectedIndex = index; }
-      // if ('selectedIndex' in this {
-      //   this.selectedIndex = index;
-      // } else {
-      //   // Selection is being made before the collective supports it.
-      //   this._prematureSelectedIndex = index;
-      // }
       let target = this.target;
@@ -120,2 +91,3 @@ if (target && target.selectedIndex !== index) {
       if (super.selectedItemChanged) { super.selectedItemChanged(); }
+      this.dispatchEvent(new CustomEvent('selected-item-changed'));
     }
@@ -122,0 +94,0 @@

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

652153

increased by5.71%

Number of package files

79

increased by2.6%

Lines of code

8582

increased by4.61%

Worsened metrics

Number of low supply chain risk alerts

5

increased by66.67%

No dependency changes