72 lines
2.2 KiB
HTML
72 lines
2.2 KiB
HTML
<link rel="import" href="../../padlock.html">
|
|
<link rel="import" href="../../../bower_components/polymer/polymer.html">
|
|
|
|
<script>
|
|
|
|
/* global padlock, Polymer */
|
|
|
|
padlock.MarkableBehavior = (function(Polymer) {
|
|
"use strict";
|
|
|
|
return {
|
|
properties: {
|
|
_marked: {
|
|
type: Number,
|
|
value: -1,
|
|
observer: "_markedChanged"
|
|
},
|
|
_itemSelector: {
|
|
type: String,
|
|
value: "*"
|
|
}
|
|
},
|
|
_items: function() {
|
|
return Polymer.dom(this.root).querySelectorAll(this._itemSelector);
|
|
},
|
|
markNext: function() {
|
|
var length = this._items().length;
|
|
if (length) {
|
|
this._marked = (this._marked + 1 + length) % length;
|
|
this._revealMarked();
|
|
}
|
|
},
|
|
markPrev: function() {
|
|
var length = this._items().length;
|
|
if (length) {
|
|
this._marked = (this._marked - 1 + length) % length;
|
|
this._revealMarked();
|
|
}
|
|
},
|
|
_markedChanged: function(markedNew, markedOld) {
|
|
var elements = this._items(),
|
|
oldEl = elements[markedOld],
|
|
newEl = elements[markedNew];
|
|
|
|
if (oldEl) {
|
|
this.toggleClass("marked", false, oldEl);
|
|
}
|
|
if (newEl) {
|
|
this.toggleClass("marked", true, newEl);
|
|
}
|
|
},
|
|
_revealMarked: function() {
|
|
var el = this._items()[this._marked];
|
|
el && this._scrollIntoView(el);
|
|
},
|
|
//* Scrolls a given element in the list into view
|
|
_scrollIntoView: function(el) {
|
|
if (el.offsetTop < this.scrollTop) {
|
|
// The element is off to the top; Scroll it into view, aligning it at the top
|
|
el.scrollIntoView();
|
|
} else if (el.offsetTop + el.offsetHeight > this.scrollTop + this.offsetHeight) {
|
|
// The element is off to the bottom; Scroll it into view, aligning it at the bottom
|
|
el.scrollIntoView(false);
|
|
}
|
|
}
|
|
};
|
|
|
|
})(Polymer);
|
|
|
|
|
|
</script>
|