diff --git a/.eslintrc.json b/.eslintrc.json
index 765a6db..f54a37f 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -26,7 +26,10 @@
],
"arrow-spacing": [
"error",
- { "before": true, "after": true }
+ {
+ "before": true,
+ "after": true
+ }
],
"brace-style": "error",
"camelcase": "error",
@@ -56,14 +59,14 @@
"key-spacing": [
"error",
{
- "afterColon": true,
- "beforeColon": false
+ "afterColon": true,
+ "beforeColon": false
}
],
"keyword-spacing": [
"error",
{
- "before": true
+ "before": true
}
],
"no-console": "off",
@@ -87,6 +90,10 @@
"no-use-before-define": "error",
"no-useless-call": "error",
"no-useless-concat": "error",
+ "object-shorthand": [
+ "error",
+ "always"
+ ],
"one-var": [
"error",
{
@@ -98,6 +105,7 @@
"error",
"always"
],
+ "prefer-arrow-callback": "error",
"quotes": [
"error",
"single"
@@ -114,12 +122,12 @@
"space-before-function-paren": [
"error",
{
- "anonymous": "always",
- "named": "never"
+ "anonymous": "always",
+ "named": "never"
}
],
"space-in-parens": "error",
"space-infix-ops": "error",
"valid-jsdoc": "warn"
}
-}
+}
\ No newline at end of file
diff --git a/.travis.yml b/.travis.yml
index 54dea31..2c29ea8 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,33 +1,40 @@
+---
language: node_js
-env:
- global:
- - CC_TEST_REPORTER_ID=9cf7da023bab612f3146e176b8b0a327a3a309a8af2e7a3e468967a7fe4600b4
- - SAUCE_USERNAME=nomego
- - secure: cQBITrMNen1VJ7rov8APzDC+SdrKmkObpBw3q/tHAYryvw3GhXMLYCFTyLWYCOu0v34OmH3Cu4JEceTFdD74KAXez8CvR140ObVCiS57orVv3V0uUDZB0+2V6qJxHAbWWjuGZsO87RSlZo5eVYW/ELEjPjV5b/OBIrvfx/jOq5+v8KcdYjcnt4LLkZuvyFwPQ8z8LaaUIfjh+LBg7D5C8ISaDs0n1R9dBlZyXyXCExteRCjrGvq2SvfqihNl5Ou7OVT0TMSKIy+AgpIrGHC+R50LLG1vDA+Ryb2qW7gdn/7GX1SUIbDzI0AU1gv+SdJqwY/76aS4PdKzOPtFsbo825p80s4Pq8FREp4ULGLibPc6gUptcQieDo3orJD+C0j/0843GQjfwDq7/KjEBAO1ekMvxdbCaOGOAAZBG+gWj1/TA2ZnCvkjRnoc5MZcb3SQoY+RPea54gkQ3VGC6OvIcn+llMdo3JUI34PAsD0PHD4LgtYLBmkNltjfMEak4bIikkHT6WBErWfn7cC9bwaVppXJa5ih4rEd8tZdu560CYtqUM9ObeAvyskkbUeTmIaDrkzfGXqwcxrG90RFLV22ZMzxIxNFokukA8fWjRhEGa2xXe4hZCgp+NN617Xkv9c6h/De63g2C6tsr9aB33gjTKLHkYYC18VMlRfSk7F/3t4=
+node_js: "lts/*"
+
addons:
firefox: latest
apt:
sources:
- - google-chrome
+ - google-chrome
packages:
- - google-chrome-stable
+ - google-chrome-stable
+
cache:
yarn: true
directories:
- - node_modules
- - bower_components
- - ".eslintcache"
- - "$HOME/.cache/bower"
+ - node_modules
+ - bower_components
+ - .eslintcache
+ - $HOME/.cache/bower
+ - $HOME/cc
+
+env:
+ global:
+ - CC_TEST_REPORTER_ID=9cf7da023bab612f3146e176b8b0a327a3a309a8af2e7a3e468967a7fe4600b4
+ - SAUCE_USERNAME=nomego
+ - secure: cQBITrMNen1VJ7rov8APzDC+SdrKmkObpBw3q/tHAYryvw3GhXMLYCFTyLWYCOu0v34OmH3Cu4JEceTFdD74KAXez8CvR140ObVCiS57orVv3V0uUDZB0+2V6qJxHAbWWjuGZsO87RSlZo5eVYW/ELEjPjV5b/OBIrvfx/jOq5+v8KcdYjcnt4LLkZuvyFwPQ8z8LaaUIfjh+LBg7D5C8ISaDs0n1R9dBlZyXyXCExteRCjrGvq2SvfqihNl5Ou7OVT0TMSKIy+AgpIrGHC+R50LLG1vDA+Ryb2qW7gdn/7GX1SUIbDzI0AU1gv+SdJqwY/76aS4PdKzOPtFsbo825p80s4Pq8FREp4ULGLibPc6gUptcQieDo3orJD+C0j/0843GQjfwDq7/KjEBAO1ekMvxdbCaOGOAAZBG+gWj1/TA2ZnCvkjRnoc5MZcb3SQoY+RPea54gkQ3VGC6OvIcn+llMdo3JUI34PAsD0PHD4LgtYLBmkNltjfMEak4bIikkHT6WBErWfn7cC9bwaVppXJa5ih4rEd8tZdu560CYtqUM9ObeAvyskkbUeTmIaDrkzfGXqwcxrG90RFLV22ZMzxIxNFokukA8fWjRhEGa2xXe4hZCgp+NN617Xkv9c6h/De63g2C6tsr9aB33gjTKLHkYYC18VMlRfSk7F/3t4=
+ - NEO_CC_URL=https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64
+ - NEO_CC=$HOME/cc/cc-test-reporter
+
before_script:
-- curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64
- > ./cc-test-reporter
-- chmod +x ./cc-test-reporter
-- "./cc-test-reporter before-build"
-- yarn run lint
+ - yarn lint
+ - ([[ -e $NEO_CC ]] || curl -L $NEO_CC_URL > $NEO_CC) && chmod +x $NEO_CC
+ - $NEO_CC before-build
script:
-- yarn test
-after_script:
-- "./cc-test-reporter after-build --exit-code $TRAVIS_TEST_RESULT"
+ - yarn test $([ -z "$SAUCE_ACCESS_KEY"] && echo "--skip-plugin sauce")
+ - $NEO_CC after-build --exit-code $TRAVIS_TEST_RESULT
+
notifications:
slack:
secure: Ijq6DWrCfSGCDv6a5OgzpcNNFNJDtOkBel67AzizrSYEPGExe6YVp9Hp41ln8BGMgO3KNguM11SAWsEy9r8slCE9rcWeYVlIRxQo+0Tvggahz9oCNqh10Mn+0qtg+YKILv4ZnYgLuk0nm3ua2eOV7ypOjXboZ+CYjes4VjwbRbuSO9JT3oui9Kzz/ZXl/TeFwITbMgVQR3Y37O4OxBaXCQGRbkNdI9JfOwl1UmGDqC4i4KLBa2ZKXv4CxH70qxUvEBHpmsCbYOrk2Fj0Njrp5L2Fzs73fy4sKAnfUE9UxRRXTrgfoobBBH+Xw31sU/PZu+R+KPZaWjg9EHEDV6DDyhfAbn5lFbAWoCtgplVsukQP5CxDTugr1fmTxduaxhfaaGyQyAAo7OoexwrlzqCRuLocDRUMNSenxzMuQZe2GAx24MG5HZmCWhz834qrOGONTxUkn8bdI6x/g3xML1BGPzOTdZz/89rF5PDinqoZGJmslpXDc/yH/h//As+9Mbh98+08HFNYoQrdPTL1CqhtYKeUjkijk7CgCUztdLN6RqfbEMfdlxcR7lKQH5r0W5N1nw36qZ+iiL8HlIeG26/wrGX31oi2syo/jV294G6+3YMgqghSXS6hInJ8+GuiQEN4pDvXfK8QqLGxNTTaxdn5GkRvlTuZzuOJZLUhnPtCt+o=
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 2efe4c1..e9b6d66 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -10,7 +10,6 @@
"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true,
"**/node_modules/**": true,
- "**/bower_components/**": true,
- "**/bower_components-1.x/**": true
+ "**/bower_components/**": true
}
}
diff --git a/bower.json b/bower.json
index 85230bc..294064b 100644
--- a/bower.json
+++ b/bower.json
@@ -8,7 +8,6 @@
"cosmoz-bottom-bar": "Neovici/cosmoz-bottom-bar#^2.0.0",
"cosmoz-i18next": "Neovici/cosmoz-i18next#^1.0.2",
"cosmoz-page-router": "Neovici/cosmoz-page-router#^2.0.0",
- "cosmoz-templatize": "Neovici/cosmoz-templatize#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.3",
"paper-icon-button": "PolymerElements/paper-icon-button#^2.2.0",
"paper-spinner": "PolymerElements/paper-spinner#^2.1.0"
@@ -25,4 +24,4 @@
"resolutions": {
"webcomponentsjs": "^1.0.0"
}
-}
\ No newline at end of file
+}
diff --git a/cosmoz-data-nav.html b/cosmoz-data-nav.html
index 9c23f35..03c9f15 100644
--- a/cosmoz-data-nav.html
+++ b/cosmoz-data-nav.html
@@ -1,11 +1,14 @@
-
+
+
+
+
+
-
diff --git a/cosmoz-data-nav.js b/cosmoz-data-nav.js
index d3c504a..2f7a39d 100644
--- a/cosmoz-data-nav.js
+++ b/cosmoz-data-nav.js
@@ -19,260 +19,268 @@
_asyncPeriod(callStep, timeout);
};
return _asyncPeriod(callStep, timeout);
- };
-
- Polymer({
- is: 'cosmoz-data-nav',
- properties: {
- /**
- * The array of buffer elements.
- */
- _elements: {
- type: Array,
- value() {
- return [this._createElement()];
- }
- },
-
- /**
- * The name of the variable to add to the binding scope for the array
- * element associated with a template instance.
- */
- as: {
- type: String,
- value: 'item'
- },
-
- /**
- * The name of the variable to add to the binding scope with the index
- * for the item.
- */
- indexAs: {
- type: String,
- value: 'index'
- },
-
- /**
- * An array containing items from which a selection can be made.
- */
- items: {
- type: Array,
- value() {
- return [];
- },
- notify: true,
- observer: '_itemsChanged'
- },
-
- /**
- * The length of items array.
- */
- queueLength: {
- type: Number,
- notify: true,
- readOnly: true
- },
-
- hasItems: {
- type: Boolean,
- readOnly: true,
- reflectToAttribute: true
- },
-
- elementsBuffer: {
- type: Number,
- value: 3
- },
-
- /**
- * Number of items after the currently selected one to preload.
- */
- preload: {
- type: Number,
- value: 1
- },
-
- /**
- * The currently selected index.
- */
- selected: {
- type: Number,
- value: 0,
- notify: true,
- observer: '_updateSelected'
- },
-
- /**
- * The index of the next element.
- */
- selectedNext: {
- type: Number,
- notify: true,
- value: 1,
- readOnly: true
- },
-
- /**
- * The currently selected element (holder)
- */
- selectedElement: {
- type: Object,
- notify: true,
- readOnly: true,
- computed: '_getElement(selected, _elements.*)'
- },
-
- /**
- * The currently selected element (instance)
- */
- selectedInstance: {
- type: Object,
- notify: true,
- readOnly: true,
- computed: '_getInstance(selectedElement)'
- },
-
- /**
- * The currently selected item, or `null` if no item is selected.
- */
- selectedItem: {
- type: Object,
- notify: true,
- readOnly: true,
- computed: '_getItem(selected, items)'
- },
-
- /**
- * True if cosmoz-data-nav should try to maintain selection when
- * `items` change.
- */
- maintainSelection: {
- type: Boolean,
- value: false
- },
-
- /**
- * The attribute that elements which control the `selected` of this element
- * should have. The value of the attribute can be `-1` or `+1`.
- */
- selectAttribute: {
- type: String,
- value: 'cosmoz-data-nav-select'
- },
-
- /**
- * True if the element is currently animating.
- */
- animating: {
- type: Boolean,
- value: false,
- reflectToAttribute: true,
- },
-
- /**
- * True if selecting a element with a index smaller than the current one.
- */
- reverse: {
- type: Boolean,
- value: false,
- reflectToAttribute: true,
- },
-
- /**
- * Function used to determine if a item is incomplete and needs to be preloaded.
- * The default values is a function that requires item to be a `Object`.
- */
- isIncompleteFn: {
- type: Function,
- value() {
- return item => item == null || typeof item !== 'object';
- }
- },
-
- /**
- * The hash parameter to use for selecting an item.
- */
- hashParam: {
- type: String
- },
-
- /**
- * The route hash parameters extracted by the `cosmoz-page-location`
- * element.
- */
- _routeHashParams: {
- type: Object
- },
-
- /**
- *
- */
- idPath: {
- type: String,
- value: 'id'
- },
-
- /**
- * True if element should render items even if it is not visible.
- */
- hiddenRendering: {
- type: Boolean,
- value: false
- }
},
+ {
+ Debouncer,
+ enqueueDebouncer,
+ FlattenedNodesObserver,
+ IronResizableBehavior,
+ Templatize,
+ mixinBehaviors
+ } = Polymer;
- behaviors: [
- Polymer.IronResizableBehavior,
- Cosmoz.TranslatableBehavior
- ],
- listeners: {
- tap: '_onTap',
- transitionend: '_onTransitionEnd'
- },
+ class CosmozDataNav extends mixinBehaviors([
+ IronResizableBehavior,
+ Cosmoz.TranslatableBehavior
+ ], Polymer.Element) {
- /**
- * Polymer `created` livecycle function.
- *
- * @return {void}
- */
- created() {
+ static get is() {
+ return 'cosmoz-data-nav';
+ }
+
+ static get properties() {
+ return {
+ /**
+ * The array of buffer elements.
+ */
+ _elements: {
+ type: Array,
+ value() {
+ return [this._createElement()];
+ }
+ },
+
+ /**
+ * The name of the variable to add to the binding scope for the array
+ * element associated with a template instance.
+ */
+ as: {
+ type: String,
+ value: 'item'
+ },
+
+ /**
+ * The name of the variable to add to the binding scope with the index
+ * for the item.
+ */
+ indexAs: {
+ type: String,
+ value: 'index'
+ },
+
+ /**
+ * An array containing items from which a selection can be made.
+ */
+ items: {
+ type: Array,
+ value() {
+ return [];
+ },
+ notify: true,
+ observer: '_itemsChanged'
+ },
+
+ /**
+ * The length of items array.
+ */
+ queueLength: {
+ type: Number,
+ notify: true,
+ readOnly: true
+ },
+
+ hasItems: {
+ type: Boolean,
+ readOnly: true,
+ reflectToAttribute: true
+ },
+
+ elementsBuffer: {
+ type: Number,
+ value: 3
+ },
+
+ /**
+ * Number of items after the currently selected one to preload.
+ */
+ preload: {
+ type: Number,
+ value: 1
+ },
+
+ /**
+ * The currently selected index.
+ */
+ selected: {
+ type: Number,
+ value: 0,
+ notify: true,
+ observer: '_updateSelected'
+ },
+
+ /**
+ * The index of the next element.
+ */
+ selectedNext: {
+ type: Number,
+ notify: true,
+ value: 1,
+ readOnly: true
+ },
+
+ /**
+ * The currently selected element (holder)
+ */
+ selectedElement: {
+ type: Object,
+ notify: true,
+ readOnly: true,
+ computed: '_getElement(selected, _elements.*)'
+ },
+
+ /**
+ * The currently selected element (instance)
+ */
+ selectedInstance: {
+ type: Object,
+ notify: true,
+ readOnly: true,
+ computed: '_getInstance(selectedElement)'
+ },
+
+ /**
+ * The currently selected item, or `null` if no item is selected.
+ */
+ selectedItem: {
+ type: Object,
+ notify: true,
+ readOnly: true,
+ computed: '_getItem(selected, items)'
+ },
+
+ /**
+ * True if cosmoz-data-nav should try to maintain selection when
+ * `items` change.
+ */
+ maintainSelection: {
+ type: Boolean,
+ value: false
+ },
+
+ /**
+ * The attribute that elements which control the `selected` of this element
+ * should have. The value of the attribute can be `-1` or `+1`.
+ */
+ selectAttribute: {
+ type: String,
+ value: 'cosmoz-data-nav-select'
+ },
+
+ /**
+ * True if the element is currently animating.
+ */
+ animating: {
+ type: Boolean,
+ value: false,
+ reflectToAttribute: true,
+ },
+
+ /**
+ * True if selecting a element with a index smaller than the current one.
+ */
+ reverse: {
+ type: Boolean,
+ value: false,
+ reflectToAttribute: true,
+ },
+
+ /**
+ * Function used to determine if a item is incomplete and needs to be preloaded.
+ * The default values is a function that requires item to be a `Object`.
+ */
+ isIncompleteFn: {
+ type: Function,
+ value() {
+ return item => item == null || typeof item !== 'object';
+ }
+ },
+
+ /**
+ * The hash parameter to use for selecting an item.
+ */
+ hashParam: {
+ type: String
+ },
+
+ /**
+ * The route hash parameters extracted by the `cosmoz-page-location`
+ * element.
+ */
+ _routeHashParams: {
+ type: Object
+ },
+
+ /**
+ *
+ */
+ idPath: {
+ type: String,
+ value: 'id'
+ },
+
+ /**
+ * True if element should render items even if it is not visible.
+ */
+ hiddenRendering: {
+ type: Boolean,
+ value: false
+ }
+ };
+ }
+
+ constructor() {
+ super();
this._cache = {};
this._preloadIdx = 0;
- },
+ this._boundOnTemplatesChange = this._onTemplatesChange.bind(this);
+ }
- /**
- * Polymer `attached` livecycle function.
- *
- * @return {void}
- */
- attached() {
- this._templatesObserver = Polymer.dom(this.$.templatesSlot)
- .observeNodes(this._onTemplatesChange.bind(this));
- this.listen(window, 'cosmoz-cache-purge', '_onCachePurge');
- },
+ connectedCallback() {
+ super.connectedCallback();
+ this._templatesObserver = new FlattenedNodesObserver(
+ this.$.templatesSlot,
+ this._boundOnTemplatesChange
+ );
+ window.addEventListener('cosmoz-cache-purge', this._onCachePurge);
+ this.addEventListener('tap', this._onTap);
+ this.addEventListener('transitionend', this._onTransitionEnd);
+ }
- /**
- * Polymer `detached` livecycle function.
- *
- * @return {void}
- */
- detached() {
+ disconnectedCallback() {
+ super.disconnectedCallback();
if (this._templatesObserver) {
- Polymer.dom(this).unobserveNodes(this._templatesObserver);
+ this._templatesObserver.disconnect();
this._templatesObserver = null;
}
+
+ if (this._selectDebouncer != null) {
+ this._selectDebouncer.cancel();
+ }
+
this._cache = {};
this._indexRenderQueue = [];
- this.unlisten(window, 'cosmoz-cache-purge', '_onCachePurge');
- this.cancelDebouncer('select');
+ window.removeEventListener('cosmoz-cache-purge', this._onCachePurge);
+ this.removeEventListener('tap', this._onTap);
+ this.removeEventListener('transitionend', this._onTransitionEnd);
+
this.splice('_elements', 0, this._elements.length, this._createElement())
.forEach(element => {
this._removeInstance(element.__instance);
this._removeInstance(element.__incomplete);
element.__instance = element.__incomplete = null;
});
- },
+ }
_onTemplatesChange(change) {
if (!this._elementTemplate) {
@@ -294,10 +302,10 @@
.fill().map(this._createElement, this));
_doAsyncSteps(elements.map(el => {
- Polymer.dom(this).appendChild(el);
+ this.appendChild(el);
return this._createIncomplete.bind(this, el);
}));
- },
+ }
_templatize(elementTemplate, incompleteTemplate) {
this._elementTemplate = elementTemplate;
@@ -308,43 +316,30 @@
nextDisabled: true,
[this.indexAs]: true
};
- this._elementCtor = Cosmoz.Templatize.templatize(this._elementTemplate, this, {
- instanceProps: Object.assign({[this.as]: true}, baseProps),
+ this._elementCtor = Templatize.templatize(this._elementTemplate, this, {
+ instanceProps: Object.assign({ [this.as]: true }, baseProps),
parentModel: true,
- forwardParentProp: this._forwardHostProp,
- forwardParentPath: this._forwardParentPath,
forwardHostProp: this._forwardHostProp,
- forwardInstanceProp: this._notifyInstanceProp,
notifyInstanceProp: this._notifyInstanceProp
});
- this._incompleteCtor = Cosmoz.Templatize.templatize(this._incompleteTemplate, this, {
+ this._incompleteCtor = Templatize.templatize(this._incompleteTemplate, this, {
instanceProps: baseProps,
parentModel: true,
- forwardParentProp: this._forwardHostProp,
- forwardParentPath: this._forwardParentPath,
forwardHostProp: this._forwardHostProp,
});
- },
+ }
get _allInstances() {
return this._elements
.reduce((p, n) => p.concat([n.__instance, n.__incomplete]), [])
.filter(i => i != null);
- },
+ }
get _allElementInstances() {
return this._elements
.map(e => e.__instance)
.filter(i => i != null);
- },
-
- _forwardParentPath(path, value) {
- const instances = this._allInstances;
- if (!instances || !instances.length) {
- return;
- }
- instances.forEach(inst => inst.notifyPath(path, value, true));
- },
+ }
_forwardHostProp(prop, value) {
const instances = this._allInstances;
@@ -352,7 +347,7 @@
return;
}
instances.forEach(inst => IS_V2 ? inst.forwardHostProp(prop, value) : inst[prop] = value);
- },
+ }
_notifyInstanceProp(inst, prop, value) {
const index = inst.index,
@@ -362,14 +357,14 @@
}
this.removeFromCache(item);
this.set(['items', index], value);
- },
+ }
_createElement() {
const element = document.createElement('div');
element.setAttribute('slot', 'items');
element.classList.add('animatable');
return element;
- },
+ }
_createIncomplete(element) {
if (element.__incomplete) {
@@ -377,8 +372,8 @@
}
const incomplete = new this._incompleteCtor({});
element.__incomplete = incomplete;
- Polymer.dom(element).appendChild(incomplete.root);
- },
+ element.appendChild(incomplete.root);
+ }
/**
* Selects an item by index.
@@ -393,7 +388,7 @@
}
this.reverse = index < this.selected;
this.selected = index;
- },
+ }
/**
* Replace an id in the `items` element list with the full data of the item.
@@ -423,11 +418,11 @@
}
this._updateSelected();
- },
+ }
clearCache() {
this._cache = {};
- },
+ }
removeFromCache(item) {
if (item == null) {
@@ -438,7 +433,7 @@
if (key != null) {
delete cache[key];
}
- },
+ }
/**
* Observes full changes to `items` properties
@@ -478,7 +473,7 @@
this.selected = index;
- },
+ }
/**
* Observes changed to `selected` property and
@@ -526,7 +521,7 @@
}
classes.remove('in');
}, 8);
- },
+ }
/**
* Handles `transitionend` event and cleans up animation classe and properties
@@ -544,7 +539,7 @@
this.animating = false;
elements.forEach(el => el.classList.remove('in', 'out'));
this._synchronize();
- },
+ }
/**
* Preloads items that are not loaded depending on the currently
@@ -564,7 +559,14 @@
const item = items[index];
if (this.isIncompleteFn(item)) {
- this.fire('need-data', { id: item, render: true });
+ this.dispatchEvent(new CustomEvent('need-data', {
+ bubbles: true,
+ composed: true,
+ detail: {
+ id: item,
+ render: true
+ }
+ }));
return;
}
@@ -574,20 +576,20 @@
this._preloadIdx = index + 1;
this._preload();
- },
+ }
_getBaseProps(index) {
return {
prevDisabled: index < 1,
- nextDisabled: index + 1 >= this.items.length,
+ nextDisabled: index + 1 >= this.items.length,
[this.indexAs]: Math.min(Math.max(index, 0), this.items.length - 1)
};
- },
+ }
_getElement(index, _elements = this._elements) {
const elements = _elements && _elements.base || _elements;
- return elements[index % (this.elementsBuffer || elements.length) ];
- },
+ return elements[index % (this.elementsBuffer || elements.length)];
+ }
_getInstance(selectedElement) {
if (selectedElement == null || selectedElement.children.length < 2) {
@@ -595,11 +597,11 @@
}
// index 0 is incomplete element
return selectedElement.children[1];
- },
+ }
_getItem(index, items = this.items) {
return items[index];
- },
+ }
_resetElement(index) {
const element = this._getElement(index);
@@ -633,7 +635,7 @@
}
instance._showHideChildren(true);
- },
+ }
_removeInstance(instance) {
if (!instance) {
@@ -644,9 +646,9 @@
for (let i = 0; i < children.length; i++) {
const child = children[i],
parent = child.parentNode;
- Polymer.dom(parent).removeChild(child);
+ parent.removeChild(child);
}
- },
+ }
/**
* Syncronizes the `items` data with the created template instances
@@ -670,7 +672,7 @@
this._indexRenderQueue = indexes;
_asyncPeriod(this._renderQueue.bind(this));
- },
+ }
/**
* Handle `tap` event and finds the closest item to the rootTarget that has a `selectAttribute` attribute.
@@ -703,18 +705,21 @@
if (isNaN(select)) {
return;
}
- this.debounce('select', () => {
- this.animating = true;
- this.select(this.selected + select);
- }, 15);
- },
+ this._selectDebouncer = enqueueDebouncer(Debouncer.debounce(this._selectDebouncer,
+ Polymer.Async.timeOut.after(15),
+ () => {
+ this.animating = true;
+ this.select(this.selected + select);
+ }
+ ));
+ }
/**
* True if the current element is visible.
*/
get _isVisible() {
return Boolean(this.offsetWidth || this.offsetHeight);
- },
+ }
_isDescendantOf(descendant, ancestor, limit = this) {
let parent = descendant;
@@ -731,7 +736,7 @@
}
return false;
- },
+ }
/**
* Check if a element is a descendant of another element
@@ -752,7 +757,7 @@
return Array.from(IS_V2 ? instance.children : instance._children)
.filter(c => c.nodeType === Node.ELEMENT_NODE)
.some(child => this._isDescendantOf(descendant, child));
- },
+ }
/**
* Check if a element is a descendant of the currently selected element.
@@ -762,7 +767,7 @@
*/
resizerShouldNotify(resizable) {
return this._isDescendantOfElementInstance(resizable, this.selectedElement);
- },
+ }
/**
* Handles resize notifications from descendants.
@@ -780,14 +785,14 @@
return;
}
this._fireResize();
- },
+ }
notifyResize() {
if (!this.isAttached || this.animating || !this._isVisible) {
return;
}
Polymer.IronResizableBehavior.notifyResize.call(this);
- },
+ }
/**
* Notifies a descendant resizable of the element.
@@ -815,7 +820,7 @@
this._notifyDescendant(resizable);
return instance.__resized = true;
- },
+ }
/**
* Select item by id.
@@ -834,7 +839,7 @@
return;
}
}
- },
+ }
_forwardItem(element, item, idx) {
this._removeInstance(element.__instance);
@@ -847,8 +852,8 @@
element.__instance = instance;
element.item = item;
element._reset = false;
- Polymer.dom(element).appendChild(instance.root);
- },
+ element.appendChild(instance.root);
+ }
_renderQueue() {
if (!this.attached) {
@@ -881,7 +886,7 @@
}
_asyncPeriod(this._renderQueue.bind(this));
- },
+ }
_renderQueueProcess(idx) {
const element = this._getElement(idx),
@@ -903,7 +908,7 @@
}
const isSelected = idx === this.selected,
- needsRender = element.item !== item;
+ needsRender = element.item !== item;
this._renderRan = needsRender;
@@ -916,7 +921,7 @@
// resize is a expensive operation
this._renderRan = this._notifyElementResize();
}
- },
+ }
_onCachePurge(e, detail) {
const ids = detail.ids;
@@ -924,11 +929,11 @@
return this.clearCache();
}
ids.forEach(id => delete this._cache[id]);
- },
+ }
_getItemId(item) {
- return this.isIncompleteFn(item) ? item : this.get(this.idPath, item);
- },
+ return this.isIncompleteFn(item) ? item : this.get(this.idPath, item);
+ }
_updateHashForSelected(selected) {
const hashParam = this.hashParam,
@@ -942,7 +947,7 @@
if (item == null) {
return;
}
- const itemId = this._getItemId(item),
+ const itemId = this._getItemId(item),
path = ['_routeHashParams', hashParam],
hashValue = this.get(path);
@@ -951,7 +956,7 @@
}
this.set(path, itemId);
- },
+ }
_updateSelectedFromHash() {
const hashParam = this.hashParam,
@@ -972,6 +977,6 @@
this.selected = selection;
return true;
}
-
- });
+ }
+ customElements.define(CosmozDataNav.is, CosmozDataNav);
}());
diff --git a/demo/helpers/cosmoz-demo-view.html b/demo/helpers/cosmoz-demo-view.html
index a4fcb23..e1eb7c5 100644
--- a/demo/helpers/cosmoz-demo-view.html
+++ b/demo/helpers/cosmoz-demo-view.html
@@ -1,9 +1,9 @@
-
+
-
+
-
-
-
-
-
Basic cosmoz-data-nav
.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-