Modernize menu scripts
Change-Id: I784ea3b3680ecd7f36eb7a1724fd9c7d79a860e6
diff --git a/dev/js/src/menu/item.js b/dev/js/src/menu/item.js
index f0c531f..7ce7455 100644
--- a/dev/js/src/menu/item.js
+++ b/dev/js/src/menu/item.js
@@ -23,6 +23,7 @@
return Object.create(this)._init(params);
},
+
/**
* Upgrade this object to another object,
* while private data stays intact.
@@ -30,7 +31,7 @@
* @param {Object] An object with properties.
*/
upgradeTo : function (props) {
- for (var prop in props) {
+ for (let prop in props) {
this[prop] = props[prop];
};
return this;
@@ -46,6 +47,7 @@
return this._content;
},
+
/**
* Get or set the information for action of this item.
*/
@@ -71,7 +73,7 @@
* @param {boolean|null} State of activity
*/
active : function (bool) {
- var cl = this.element().classList;
+ const cl = this.element().classList;
if (bool === undefined)
return cl.contains("active");
else if (bool)
@@ -80,6 +82,7 @@
cl.remove("active");
},
+
/**
* Check or set if the item is
* at the boundary of the menu
@@ -88,7 +91,7 @@
* @param {boolean|null} State of activity
*/
noMore : function (bool) {
- var cl = this.element().classList;
+ const cl = this.element().classList;
if (bool === undefined)
return cl.contains("no-more");
else if (bool)
@@ -106,7 +109,7 @@
return this._element;
// Create list item
- var li = document.createElement("li");
+ const li = document.createElement("li");
// Connect action
if (this["onclick"] !== undefined) {
@@ -135,14 +138,15 @@
this.lowlight();
}
- var children = this.element().childNodes;
- for (var i = children.length -1; i >= 0; i--) {
+ const children = this.element().childNodes;
+ for (let i = children.length -1; i >= 0; i--) {
this._highlight(children[i], prefix);
};
this._prefix = prefix;
},
+
/**
* Remove highlight of the menu item
*/
@@ -150,18 +154,18 @@
if (this._prefix === null)
return;
- var e = this.element();
+ const e = this.element();
- var marks = e.getElementsByTagName("mark");
- for (var i = marks.length - 1; i >= 0; i--) {
- // Create text node clone
- var x = document.createTextNode(
- marks[i].firstChild.nodeValue
- );
-
+ const marks = e.getElementsByTagName("mark");
+
+ for (let i = marks.length - 1; i >= 0; i--) {
+
// Replace with content
marks[i].parentNode.replaceChild(
- x,
+ // Create text node clone
+ document.createTextNode(
+ marks[i].firstChild.nodeValue
+ ),
marks[i]
);
};
@@ -176,8 +180,8 @@
_highlight : function (elem, prefixString) {
if (elem.nodeType === 3) {
- var text = elem.nodeValue;
- var textlc = text.toLowerCase();
+ const text = elem.nodeValue;
+ const textlc = text.toLowerCase();
// Split prefixes
if (prefixString) {
@@ -186,12 +190,12 @@
// Doing this in a single line can trigger
// a deep-recursion in Firefox 57.01, though I don't know why.
prefixString = prefixString.trim();
- var prefixes = prefixString.split(" ");
- var prefix;
- var testPos;
- var pos = -1;
- var len = 0;
+ const prefixes = prefixString.split(" ");
+
+ let testPos,
+ pos = -1,
+ len = 0;
// Iterate over all prefixes and get the best one
// for (var i = 0; i < prefixes.length; i++) {
@@ -223,17 +227,17 @@
};
// Second element
- var hl = document.createElement("mark");
+ const hl = document.createElement("mark");
hl.appendChild(
document.createTextNode(text.substr(pos, len))
);
elem.parentNode.insertBefore(hl, elem);
// Third element
- var third = text.substr(pos + len);
+ const third = text.substr(pos + len);
if (third.length > 0) {
- var thirdE = document.createTextNode(third);
+ const thirdE = document.createTextNode(third);
elem.parentNode.insertBefore(
thirdE,
elem
@@ -241,14 +245,14 @@
this._highlight(thirdE, prefixString);
};
- var p = elem.parentNode;
- p.removeChild(elem);
+ elem.parentNode.removeChild(elem);
};
};
}
+
else {
- var children = elem.childNodes;
- for (var i = children.length -1; i >= 0; i--) {
+ const children = elem.childNodes;
+ for (let i = children.length -1; i >= 0; i--) {
this._highlight(children[i], prefixString);
};
};
@@ -261,17 +265,19 @@
throw new Error("Missing parameters");
};
- this.content(params[0]);
+ const t = this;
+
+ t.content(params[0]);
if (params.length > 1) {
- this._action = params[1];
+ t._action = params[1];
if (params.length > 2)
- this._onclick = params[2];
+ t._onclick = params[2];
};
- this._lcField = ' ' + this.content().textContent.toLowerCase();
- this._prefix = null;
+ t._lcField = ' ' + t.content().textContent.toLowerCase();
+ t._prefix = null;
return this;
},
@@ -281,7 +287,7 @@
* The click action of the menu item.
*/
onclick : function (e) {
- var m = this.menu();
+ const m = this.menu();
// Reset prefix
m.prefix("");
diff --git a/dev/js/src/menu/lengthField.js b/dev/js/src/menu/lengthField.js
index 870d5ba..8a6641d 100644
--- a/dev/js/src/menu/lengthField.js
+++ b/dev/js/src/menu/lengthField.js
@@ -1,3 +1,5 @@
+"use strict";
+
define({
/**
@@ -7,6 +9,7 @@
return Object.create(this)._init();
},
+
// Initialize lengthField object
_init : function () {
this._element = document.createElement('div');
@@ -14,6 +17,7 @@
return this;
},
+
/**
* Upgrade this object to another object,
* while private data stays intact.
@@ -21,12 +25,13 @@
* @param {Object} An object with properties.
*/
upgradeTo : function (props) {
- for (var prop in props) {
+ for (let prop in props) {
this[prop] = props[prop];
};
return this;
},
+
/**
* Get the associated dom element.
*/
@@ -34,6 +39,7 @@
return this._element;
},
+
/**
* Add string to lengthField.
*/
@@ -42,6 +48,7 @@
.appendChild(document.createTextNode(param[0] + '--'));
},
+
/**
* Remove all initialized values
*/
diff --git a/dev/js/src/menu/prefix.js b/dev/js/src/menu/prefix.js
index 90924c9..e513e85 100644
--- a/dev/js/src/menu/prefix.js
+++ b/dev/js/src/menu/prefix.js
@@ -1,3 +1,5 @@
+"use strict";
+
define({
/**
@@ -7,26 +9,31 @@
return Object.create(this)._init();
},
+
// Initialize prefix object
_init : function () {
- this._string = '';
+ const t = this;
+
+ t._string = '';
// Add prefix span
- this._element = document.createElement('span');
- this._element.classList.add('pref');
+ t._element = document.createElement('span');
+ t._element.classList.add('pref');
// Connect action
- if (this["onclick"] !== undefined)
- this._element["onclick"] = this.onclick.bind(this);
+ if (t["onclick"] !== undefined)
+ t._element["onclick"] = t.onclick.bind(t);
- return this;
+ return t;
},
+
_update : function () {
return this._element.innerHTML
= this._string;
},
+
/**
* Upgrade this object to another object,
* while private data stays intact.
@@ -34,7 +41,7 @@
* @param {Object} An object with properties.
*/
upgradeTo : function (props) {
- for (var prop in props) {
+ for (let prop in props) {
this[prop] = props[prop];
};
return this;
@@ -45,7 +52,7 @@
* Get or set the activity status of the prefix.
*/
active : function (bool) {
- var cl = this.element().classList;
+ const cl = this.element().classList;
if (bool === undefined)
return cl.contains("active");
else if (bool)
@@ -54,6 +61,7 @@
cl.remove("active");
},
+
/**
* Check, if a prefix is given or not.
*/
@@ -62,6 +70,7 @@
true : false;
},
+
/**
* Get or set the prefix string.
*/
@@ -81,7 +90,7 @@
this._string += string;
return this._update();
},
-
+
/**
* Clear prefix
@@ -98,23 +107,24 @@
*/
onclick : function () {},
-
+
/**
* Remove the last character of the string
*/
chop : function () {
+ const t = this;
// Prefix is long enough for backspace
- if (this._string.length > 1) {
- this._string = this._string.substring(
- 0, this._string.length - 1
+ if (t._string.length > 1) {
+ t._string = t._string.substring(
+ 0, t._string.length - 1
);
}
else {
- this._string = '';
+ t._string = '';
};
- return this._update();
+ return t._update();
},
diff --git a/dev/js/src/menu/slider.js b/dev/js/src/menu/slider.js
index adaf81a..5897da2 100644
--- a/dev/js/src/menu/slider.js
+++ b/dev/js/src/menu/slider.js
@@ -1,3 +1,5 @@
+"use strict";
+
/**
* Create slider for menus.
* The slider will only be used by mouse - touch support
@@ -79,11 +81,11 @@
movetoRel : function (relativePos) {
// This is important to find the correct percentage!
- var diffHeight = (this._rulerHeight - this._sliderHeight);
- var relativeOffset = (relativePos / diffHeight);
+ const diffHeight = (this._rulerHeight - this._sliderHeight);
+ const relativeOffset = (relativePos / diffHeight);
// Offset is a value 0 to this._screens
- var off = this.offset(
+ const off = this.offset(
parseInt(relativeOffset * this._screens) + this._event.initOffset
);
@@ -99,9 +101,9 @@
* @param {number} absolute position
*/
movetoAbs : function (absPos) {
- var absOffset = (absPos / this._rulerHeight);
+ const absOffset = (absPos / this._rulerHeight);
+ const off = this.offset(parseInt(absOffset * (this._screens + 1)));
- var off = this.offset(parseInt(absOffset * (this._screens + 1)));
if (off !== undefined) {
this._menu.screen(off);
};
@@ -148,10 +150,11 @@
*/
reInit : function () {
- var s = this._element.style;
+ const t = this;
+ const s = t._element.style;
// Do not show the slider, in case there is nothing to scroll
- if (this._length <= this._limit) {
+ if (t._length <= t._limit) {
s.display = 'none';
return;
}
@@ -159,42 +162,43 @@
s.display = 'block';
};
- this._height = ((this._limit / this._length) * 100);
- this._screens = this._length - this._limit;
- this._step = (100 - this._height) / this._screens;
- this._slider.style.height = this._height + '%';
+ t._height = ((t._limit / t._length) * 100);
+ t._screens = t._length - t._limit;
+ t._step = (100 - t._height) / t._screens;
+ t._slider.style.height = t._height + '%';
},
// Initialize prefix object
_init : function (menu) {
+ const t = this;
- this._menu = menu;
+ t._menu = menu;
- this._offset = 0;
- this._event = {};
- this._active = false;
+ t._offset = 0;
+ t._event = {};
+ t._active = false;
- var el = this._element = document.createElement('div');
+ const el = t._element = document.createElement('div');
el.setAttribute('class', 'ruler');
- this._slider = el.appendChild(
+ t._slider = el.appendChild(
document.createElement('span')
);
- this._ruler = el.appendChild(document.createElement('div'));
+ t._ruler = el.appendChild(document.createElement('div'));
// Do not mark the menu on mousedown
- this._ruler.addEventListener('mousedown', function (e) {
+ t._ruler.addEventListener('mousedown', function (e) {
e.halt()
}, false);
// Move the slider to the click position
- this._ruler.addEventListener('click', this._mouseclick.bind(this), false);
+ t._ruler.addEventListener('click', t._mouseclick.bind(t), false);
- this._slider.addEventListener('mousedown', this._mousedown.bind(this), false);
+ t._slider.addEventListener('mousedown', t._mousedown.bind(t), false);
- return this;
+ return t;
},
@@ -224,7 +228,7 @@
// Release mousedown event
_mousedown : function (e) {
// Bind drag handler
- var ev = this._event;
+ const ev = this._event;
// _step * _offset is the distance of the ruler to the top
ev.init = e.clientY;