Minor improved experiment with a slider
diff --git a/dev/js/src/menu.js b/dev/js/src/menu.js
index 420d0bc..183e97a 100644
--- a/dev/js/src/menu.js
+++ b/dev/js/src/menu.js
@@ -12,10 +12,12 @@
'menu/item',
'menu/prefix',
'menu/lengthField',
+ 'menu/slider',
'util'
], function (defaultItemClass,
defaultPrefixClass,
- defaultLengthFieldClass) {
+ defaultLengthFieldClass,
+ sliderClass) {
// Default maximum number of menu items
var menuLimit = 8;
@@ -176,6 +178,8 @@
};
this._lengthField._menu = this;
+ // Initialize the slider
+ this._slider = sliderClass.create();
var e = document.createElement("ul");
e.style.opacity = 0;
@@ -185,6 +189,7 @@
e.classList.add('roll');
e.appendChild(this._prefix.element());
e.appendChild(this._lengthField.element());
+ e.appendChild(this._slider.element());
// This has to be cleaned up later on
e["menu"] = this;
@@ -220,7 +225,7 @@
this.active = false;
// this.selected = undefined;
this._items = new Array();
- var i;
+ var i = 0;
// Initialize item list based on parameters
for (i in params) {
@@ -233,6 +238,9 @@
};
this._limit = menuLimit;
+ this._slider.length(i);
+ this._slider.limit(this._limit);
+
this._position = 0; // position in the active list
this._active = -1; // active item in the item list
this._firstActive = false; // Show the first item active always?
@@ -262,6 +270,7 @@
limit : function (limit) {
if (arguments.length === 1) {
this._limit = limit;
+ this._slider.limit(limit);
return this;
};
return this._limit;
@@ -315,6 +324,8 @@
this._element.style.opacity = 1;
+ this._slider.show();
+
// Iterate to the active item
if (this._active !== -1 && !this._prefix.isSet()) {
while (this._list[this._position] < this._active) {
@@ -471,7 +482,7 @@
// Remove all children
var children = this._element.childNodes;
// Leave the prefix and lengthField
- for (var i = children.length - 1; i >= 2; i--) {
+ for (var i = children.length - 1; i >= 3; i--) {
this._element.removeChild(
children[i]
);
@@ -501,10 +512,10 @@
item.highlight(this.prefix());
var e = this.element();
- // Append element after lengthFiled/prefix
+ // Append element after lengthField/prefix/slider
e.insertBefore(
item.element(),
- e.children[2]
+ e.children[3]
);
},
@@ -713,8 +724,8 @@
// Remove the HTML node from the first item
_removeFirst : function () {
this.item(this._list[this._offset]).lowlight();
- // leave lengthField/prefix
- this._element.removeChild(this._element.children[2]);
+ // leave lengthField/prefix/slider
+ this._element.removeChild(this._element.children[3]);
},
diff --git a/dev/js/src/menu/slider.js b/dev/js/src/menu/slider.js
new file mode 100644
index 0000000..8f27289
--- /dev/null
+++ b/dev/js/src/menu/slider.js
@@ -0,0 +1,52 @@
+define({
+
+ /**
+ * Create new prefix object.
+ */
+ create : function () {
+ return Object.create(this)._init();
+ },
+
+ // Initialize prefix object
+ _init : function () {
+
+ this._element = document.createElement('div');
+ this._element.setAttribute('class', 'ruler');
+
+ this._slider = this._element.appendChild(
+ document.createElement('span')
+ );
+
+ this._element.appendChild(document.createElement('div'));
+
+/*
+ this._string = '';
+
+ // Add prefix span
+ this._element = document.createElement('span');
+ this._element.classList.add('pref');
+ // Connect action
+
+ if (this["onclick"] !== undefined)
+ this._element["onclick"] = this.onclick.bind(this);
+
+*/
+ return this;
+ },
+
+ show : function (i) {
+ this._slider.style.height = ((this._limit / this._length) * 100) + '%';
+ },
+
+ length : function (i) {
+ this._length = i;
+ },
+
+ limit : function (i) {
+ this._limit = i;
+ },
+
+ element : function () {
+ return this._element;
+ }
+});
diff --git a/dev/scss/header/menu.scss b/dev/scss/header/menu.scss
index 0016420..7baa398 100644
--- a/dev/scss/header/menu.scss
+++ b/dev/scss/header/menu.scss
@@ -51,6 +51,10 @@
@include choose-item;
}
+ul.menu:hover > div.ruler {
+ opacity: 1;
+}
+
ul.menu {
position: absolute;
padding: 0;
@@ -59,6 +63,36 @@
list-style-type: none;
list-style-position: outside;
+ > div.ruler {
+ position: absolute;
+ right: 0px;
+ margin-right: -12px;
+ background-color: transparent;
+ width: 12px;
+ height: 100%;
+ opacity: 0;
+
+ > span {
+ position: absolute;
+ display: block;
+ right: 0px;
+ width: 6px;
+ cursor: pointer;
+ background-color: $light-grey;
+ border-radius: 3px;
+ z-index: 600;
+ }
+
+ > div {
+ position: absolute;
+ right: 1px;
+ width: 4px;
+ background-color: $dark-grey;
+ height: 100%;
+ border-radius: 2px;
+ }
+ }
+
/**
* List items
*/