Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

basic-arrow-selection

Package Overview
Dependencies
Maintainers
2
Versions
11
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

basic-arrow-selection - npm Package Compare versions

Comparing version 0.7.6 to 0.8.0

6

package.json
{
"name": "basic-arrow-selection",
"version": "0.7.6",
"version": "0.8.0",
"description": "Mixin used to add prominent left and right arrow buttons to a wrapped child. Clicking the left/right buttons selects the previous/next item.",

@@ -16,4 +16,4 @@ "homepage": "https://component.kitchen",

"dependencies": {
"basic-element-base": "^0.7.6",
"basic-component-mixins": "^0.7.6"
"basic-element-base": "^0.8.0",
"basic-component-mixins": "^0.8.0"
},

@@ -20,0 +20,0 @@ "browserify": {

68

README.md
# API Documentation
<a name="ArrowSelection"></a>
## ArrowSelection ⇐ <code>ElementBase</code>

@@ -35,3 +34,2 @@ Component which adds prominent left and right arrow buttons to a wrapped

, <code>[TargetInCollective](../basic-component-mixins/docs/TargetInCollective.md)</code>
, <code>[TargetInCollective](../basic-component-mixins/docs/TargetInCollective.md)</code>
, <code>[TargetSelection](../basic-component-mixins/docs/TargetSelection.md)</code>

@@ -58,3 +56,2 @@

* ["selected-item-changed"](#ItemsSelection.event_selected-item-changed)
* [.selectedIndex](#TargetSelection+selectedIndex) : <code>number</code>
* [.selectedIndex](#ItemsSelection+selectedIndex) : <code>number</code>

@@ -65,4 +62,4 @@ * [.selectedItem](#TargetSelection+selectedItem) : <code>HTMLElement</code>

* [.selectionRequired](#ItemsSelection+selectionRequired) : <code>boolean</code>
* [.selectionWraps](#TargetSelection+selectionWraps) : <code>boolean</code>
* [.selectionWraps](#ItemsSelection+selectionWraps) : <code>boolean</code>
* [.selectionWraps](#TargetSelection+selectionWraps) : <code>boolean</code>
* [.selectLast()](#ItemsSelection+selectLast)

@@ -72,3 +69,2 @@ * [.selectNext()](#ItemsSelection+selectNext)

* [.target](#TargetInCollective+target) : <code>HTMLElement</code>
* [.target](#TargetInCollective+target) : <code>HTMLElement</code>
* [.target](#ContentFirstChildTarget+target) : <code>HTMLElement</code>

@@ -78,3 +74,2 @@ * [.target](#TargetSelection+target) : <code>HTMLElement</code>

<a name="ItemsSelection+applySelection"></a>
### arrowSelection.applySelection(item, selected)

@@ -94,3 +89,2 @@ Apply the indicate selection state to the item.

<a name="ItemsSelection+canSelectNext"></a>
### arrowSelection.canSelectNext : <code>boolean</code>

@@ -102,3 +96,2 @@ True if the selection can be moved to the next item, false if not (the

<a name="ItemsSelection+canSelectPrevious"></a>
### arrowSelection.canSelectPrevious : <code>boolean</code>

@@ -110,3 +103,2 @@ True if the selection can be moved to the previous item, false if not

<a name="DistributedChildrenAsContent+content"></a>
### arrowSelection.content : <code>Array.&lt;HTMLElement&gt;</code>

@@ -118,3 +110,2 @@ The content of this component, defined to be the flattened array of

<a name="KeyboardDirection+goDown"></a>
### arrowSelection.goDown()

@@ -126,3 +117,2 @@ Invoked when the user wants to go/navigate down.

<a name="KeyboardDirection+goEnd"></a>
### arrowSelection.goEnd()

@@ -134,3 +124,2 @@ Invoked when the user wants to go/navigate to the end (e.g., of a list).

<a name="KeyboardDirection+goLeft"></a>
### arrowSelection.goLeft()

@@ -142,3 +131,2 @@ Invoked when the user wants to go/navigate left.

<a name="KeyboardDirection+goRight"></a>
### arrowSelection.goRight()

@@ -150,3 +138,2 @@ Invoked when the user wants to go/navigate right.

<a name="KeyboardDirection+goStart"></a>
### arrowSelection.goStart()

@@ -158,3 +145,2 @@ Invoked when the user wants to go/navigate to the start (e.g., of a

<a name="KeyboardDirection+goUp"></a>
### arrowSelection.goUp()

@@ -166,3 +152,2 @@ Invoked when the user wants to go/navigate up.

<a name="ItemsSelection+itemAdded"></a>
### arrowSelection.itemAdded(item)

@@ -181,3 +166,2 @@ Handle a new item being added to the list.

<a name="TargetSelection+items"></a>
### arrowSelection.items : <code>Array.&lt;HTMLElement&gt;</code>

@@ -188,3 +172,2 @@ The current set of items in the list.

<a name="TargetSelection+itemsChanged"></a>
### arrowSelection.itemsChanged()

@@ -197,3 +180,2 @@ This method is invoked when the underlying contents change. It is also

<a name="Keyboard+keydown"></a>
### arrowSelection.keydown(event) ⇒ <code>boolean</code>

@@ -213,3 +195,2 @@ Handle the indicated keyboard event.

<a name="KeyboardDirection+navigationAxis"></a>
### arrowSelection.navigationAxis : <code>string</code>

@@ -225,3 +206,2 @@ Indicates the direction of permitted navigation with the keyboard.

<a name="ItemsSelection.event_selected-index-changed"></a>
### "selected-index-changed"

@@ -237,3 +217,2 @@ Fires when the selectedIndex property changes.

<a name="ItemsSelection.event_selected-item-changed"></a>
### "selected-item-changed"

@@ -249,11 +228,3 @@ Fires when the selectedItem property changes.

<a name="TargetSelection+selectedIndex"></a>
### arrowSelection.selectedIndex : <code>number</code>
The index of the item which is currently selected, or -1 if there is no
selection.
**Kind**: instance property of <code>[ArrowSelection](#ArrowSelection)</code>. Defined by <code>[TargetSelection](../basic-component-mixins/docs/TargetSelection.md)</code> mixin.
<a name="ItemsSelection+selectedIndex"></a>
### arrowSelection.selectedIndex : <code>number</code>

@@ -268,3 +239,2 @@ The index of the item which is currently selected.

<a name="TargetSelection+selectedItem"></a>
### arrowSelection.selectedItem : <code>HTMLElement</code>

@@ -275,3 +245,2 @@ The currently selected item, or null if there is no selection.

<a name="ItemsSelection+selectedItem"></a>
### arrowSelection.selectedItem : <code>object</code>

@@ -284,3 +253,2 @@ The currently selected item, or null if there is no selection.

<a name="ItemsSelection+selectFirst"></a>
### arrowSelection.selectFirst()

@@ -291,3 +259,2 @@ Select the first item in the list.

<a name="ItemsSelection+selectionRequired"></a>
### arrowSelection.selectionRequired : <code>boolean</code>

@@ -297,18 +264,16 @@ True if the list should always have a selection (if it has items).

**Kind**: instance property of <code>[ArrowSelection](#ArrowSelection)</code>. Defined by <code>[ItemsSelection](../basic-component-mixins/docs/ItemsSelection.md)</code> mixin.
<a name="ItemsSelection+selectionWraps"></a>
**Default**: <code>false</code>
<a name="TargetSelection+selectionWraps"></a>
### arrowSelection.selectionWraps : <code>boolean</code>
True if selection navigations wrap from last to first, and vice versa.
**Kind**: instance property of <code>[ArrowSelection](#ArrowSelection)</code>. Defined by <code>[ItemsSelection](../basic-component-mixins/docs/ItemsSelection.md)</code> mixin.
**Kind**: instance property of <code>[ArrowSelection](#ArrowSelection)</code>. Defined by <code>[TargetSelection](../basic-component-mixins/docs/TargetSelection.md)</code> mixin.
**Default**: <code>{false}</code>
<a name="TargetSelection+selectionWraps"></a>
<a name="ItemsSelection+selectionWraps"></a>
### arrowSelection.selectionWraps : <code>boolean</code>
True if selection navigations wrap from last to first, and vice versa.
**Kind**: instance property of <code>[ArrowSelection](#ArrowSelection)</code>. Defined by <code>[TargetSelection](../basic-component-mixins/docs/TargetSelection.md)</code> mixin.
**Default**: <code>{false}</code>
**Kind**: instance property of <code>[ArrowSelection](#ArrowSelection)</code>. Defined by <code>[ItemsSelection](../basic-component-mixins/docs/ItemsSelection.md)</code> mixin.
**Default**: <code>false</code>
<a name="ItemsSelection+selectLast"></a>
### arrowSelection.selectLast()

@@ -319,3 +284,2 @@ Select the last item in the list.

<a name="ItemsSelection+selectNext"></a>
### arrowSelection.selectNext()

@@ -326,3 +290,2 @@ Select the next item in the list.

<a name="ItemsSelection+selectPrevious"></a>
### arrowSelection.selectPrevious()

@@ -333,3 +296,2 @@ Select the previous item in the list.

<a name="TargetInCollective+target"></a>
### arrowSelection.target : <code>HTMLElement</code>

@@ -347,18 +309,3 @@ Gets/sets the current target of the component.

**Kind**: instance property of <code>[ArrowSelection](#ArrowSelection)</code>. Defined by <code>[TargetInCollective](../basic-component-mixins/docs/TargetInCollective.md)</code> mixin.
<a name="TargetInCollective+target"></a>
### arrowSelection.target : <code>HTMLElement</code>
Gets/sets the current target of the component.
Set this to point to another element. That target element will be
implicitly added to the component's collective. That is, the component
and its target will share responsibility for handling keyboard events.
You can set this property yourself, or you can use the
ContentFirstChildTarget mixin to automatically set the target to the
component's first child.
**Kind**: instance property of <code>[ArrowSelection](#ArrowSelection)</code>. Defined by <code>[TargetInCollective](../basic-component-mixins/docs/TargetInCollective.md)</code> mixin.
<a name="ContentFirstChildTarget+target"></a>
### arrowSelection.target : <code>HTMLElement</code>

@@ -369,3 +316,2 @@ Gets/sets the current target of the component.

<a name="TargetSelection+target"></a>
### arrowSelection.target : <code>HTMLElement</code>

@@ -372,0 +318,0 @@ Gets/sets the target element to which this component will delegate

76

src/ArrowSelection.js

@@ -0,1 +1,2 @@

import createSymbol from '../../basic-component-mixins/src/createSymbol';
import ElementBase from '../../basic-element-base/src/ElementBase';

@@ -13,2 +14,10 @@ import ContentFirstChildTarget from '../../basic-component-mixins/src/ContentFirstChildTarget';

// Symbols for private data members on an element.
const mousedownListenerSymbol = createSymbol('mousedownListener');
const mousemoveListenerSymbol = createSymbol('mousemoveListener');
const lastMouseXSymbol = createSymbol('lastMouseX');
const lastMouseYSymbol = createSymbol('lastMouseY');
const mouseTimeoutSymbol = createSymbol('mouseTimeout');
let base = ElementBase.compose(

@@ -56,3 +65,2 @@ ContentFirstChildTarget,

* @mixes TargetInCollective
* @mixes TargetInCollective
* @mixes TargetSelection

@@ -67,3 +75,5 @@ */

if ('canSelectNext' in base.prototype) { super.canSelectNext = canSelectNext; }
this.$.buttonRight.disabled = !canSelectNext;
if (this.$) {
this.$.buttonRight.disabled = !canSelectNext;
}
}

@@ -76,7 +86,10 @@

if ('canSelectPrevious' in base.prototype) { super.canSelectPrevious = canSelectPrevious; }
this.$.buttonLeft.disabled = !canSelectPrevious;
if (this.$) {
this.$.buttonLeft.disabled = !canSelectPrevious;
}
}
createdCallback() {
super.createdCallback();
if (super.createdCallback) { super.createdCallback(); }
this.$.buttonLeft.addEventListener('click', event => {

@@ -104,4 +117,8 @@ this.selectPrevious();

}
}
this.navigationAxis = 'horizontal';
get defaults() {
let defaults = super.defaults || {};
defaults.navigationAxis = 'horizontal';
return defaults;
}

@@ -256,3 +273,3 @@

// to respond to those fake mousemove events. To discriminate between fake and
// real mousemove events, when we get a mousemove event, we wait for a tick to
// real mousemove events, when we get a mousemove event, we wait for a bit to
// see if the same location is reported as the location of a subsequent

@@ -262,21 +279,31 @@ // mousedown.

element._mousedownListener = event => {
// console.log("mousedown");
element._lastMouseDownPageX = event.pageX;
element._lastMouseDownPageY = event.pageY;
element[mousedownListenerSymbol] = event => {
// console.log(`mousedown ${event.pageX}, ${event.pageY}`);
if (element[mouseTimeoutSymbol]) {
clearTimeout(element[mouseTimeoutSymbol]);
}
element[lastMouseXSymbol] = event.pageX;
element[lastMouseYSymbol] = event.pageY;
};
window.addEventListener('mousedown', element._mousedownListener);
window.addEventListener('mousedown', element[mousedownListenerSymbol]);
element._mousemoveListener = event => {
// console.log("mousemove");
setTimeout(() => {
if (event.pageX !== element._lastMouseDownPageX ||
event.pageY !== element._lastMouseDownPageY) {
element[mousemoveListenerSymbol] = event => {
// console.log(`setting timeout`);
// Postpone checking the mousemove location to give the mousedown event a
// chance to fire. The 250 ms delay is just guesswork; a shorter delay
// doesn't seem to work.
element[mouseTimeoutSymbol] = setTimeout(() => {
// console.log(`postponed mousemove ${event.pageX}, ${event.pageY}`);
if (element[lastMouseXSymbol] != null && event.pageX !== element[lastMouseXSymbol] ||
element[lastMouseYSymbol] != null && event.pageY !== element[lastMouseYSymbol]) {
// mousemove event was at a location other than the last mousedown,
// and hence most likely a real mousemove event.
mouseDetected(element);
} else {
element[lastMouseXSymbol] = event.pageX;
element[lastMouseYSymbol] = event.pageY;
}
});
}, 250);
};
window.addEventListener('mousemove', element._mousemoveListener);
window.addEventListener('mousemove', element[mousemoveListenerSymbol]);
}

@@ -286,10 +313,13 @@

function mouseDetected(element) {
// console.log("mouse detected");
// console.log(`mouse detected`);
showArrows(element);
// We can stop listening for mouse events now.
window.removeEventListener('mousedown', element._mousedownListener);
window.removeEventListener('mousemove', element._mousemoveListener);
element._mousedownListener = null;
element._mousemoveListener = null;
if (element[mouseTimeoutSymbol]) {
clearTimeout(element[mouseTimeoutSymbol]);
}
window.removeEventListener('mousedown', element[mousedownListenerSymbol]);
window.removeEventListener('mousemove', element[mousemoveListenerSymbol]);
element[mousedownListenerSymbol] = null;
element[mousemoveListenerSymbol] = null;
}

@@ -296,0 +326,0 @@ 

dist/basic-arrow-selection.js

Sorry, the diff of this file is too big to display

index.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc