Fixed relative movement of slider in menus
diff --git a/dev/demo/menu.html b/dev/demo/menu.html
index db88cbf..bbed401 100644
--- a/dev/demo/menu.html
+++ b/dev/demo/menu.html
@@ -22,6 +22,7 @@
<div style="position: absolute; background-color: #7ba400; height: 50px; width: 100%;"></div>
<div id="menu" class="vc" style="padding-top: 80px; padding-left: 80px;"></div>
+ <div id="largemenu" style="padding-top: 0px; padding-left: 500px;"></div>
<span id="choose-ql" class="menu select" style="position: absolute; right: 100px; top: 90px;">
<select name="ql">
diff --git a/dev/demo/menudemo.js b/dev/demo/menudemo.js
index 29d5c1b..3d67a14 100644
--- a/dev/demo/menudemo.js
+++ b/dev/demo/menudemo.js
@@ -2,7 +2,7 @@
baseUrl: '../js/src'
});
-require(['menu','menu/item', 'menu/prefix', 'menu/lengthField', 'selectMenu'], function (menuClass, itemClass, prefixClass, lengthFieldClass, selectMenuClass) {
+require(['menu','menu/item', 'menu/prefix', 'menu/lengthField', 'selectMenu', 'hint/item', 'hint/lengthField'], function (menuClass, itemClass, prefixClass, lengthFieldClass, selectMenuClass, hintItemClass, hintLengthField) {
/**
* Create own menu item class.
@@ -86,10 +86,70 @@
['textID', 'textID', 'string']
]);
+ var largeMenu = menuClass.create([
+ // http://www.ids-mannheim.de/cosmas2/projekt/referenz/stts/morph.html
+ // http://nachhalt.sfb632.uni-potsdam.de/owl-docu/stts.html
+ // "$.", "$(", "$,"
+ ["ADJA","ADJA ", "Attributive Adjective"],
+ ["ADJD","ADJD ", "Predicative Adjective"],
+ ["ADV","ADV ", "Adverb"],
+ ["APPO","APPO ", "Postposition"],
+ ["APPR","APPR ", "Preposition"],
+ ["APPRART","APPRART ", "Preposition with Determiner"],
+ ["APZR","APZR ","Right Circumposition"],
+ ["ART","ART ", "Determiner"],
+ ["CARD","CARD ", "Cardinal Number"],
+ ["FM","FM ", "Foreign Material"],
+ ["ITJ","ITJ ", "Interjection"],
+ ["KOKOM","KOKOM ", "Comparison Particle"],
+ ["KON","KON ", "Coordinating Conjuncion"],
+ ["KOUI","KOUI ", "Subordinating Conjunction with 'zu'"],
+ ["KOUS","KOUS ", "Subordinating Conjunction with Sentence"],
+ ["NE","NE ", "Named Entity"],
+ ["NN","NN ", "Normal Nomina"],
+ ["PAV", "PAV ", "Pronominal Adverb"],
+ ["PDAT","PDAT ","Attributive Demonstrative Pronoun"],
+ ["PDS","PDS ", "Substitutive Demonstrative Pronoun"],
+ ["PIAT","PIAT ", "Attributive Indefinite Pronoun without Determiner"],
+ ["PIDAT","PIDAT ", "Attributive Indefinite Pronoun with Determiner"],
+ ["PIS","PIS ", "Substitutive Indefinite Pronoun"],
+ ["PPER","PPER ", "Personal Pronoun"],
+ ["PPOSAT","PPOSAT ", "Attributive Possessive Pronoun"],
+ ["PPOSS","PPOSS ", "Substitutive Possessive Pronoun"],
+ ["PRELAT","PRELAT ", "Attributive Relative Pronoun"],
+ ["PRELS","PRELS ", "Substitutive Relative Pronoun"],
+ ["PRF","PRF ", "Reflexive Pronoun"],
+ ["PROAV","PROAV ", "Pronominal Adverb"],
+ ["PTKA","PTKA ","Particle with Adjective"],
+ ["PTKANT","PTKANT ", "Answering Particle"],
+ ["PTKNEG","PTKNEG ", "Negation Particle"],
+ ["PTKVZ","PTKVZ ", "Separated Verbal Particle"],
+ ["PTKZU","PTKZU ", "'zu' Particle"],
+ ["PWAT","PWAT ", "Attributive Interrogative Pronoun"],
+ ["PWAV","PWAV ", "Adverbial Interrogative Pronoun"],
+ ["PWS","PWS ", "Substitutive Interrogative Pronoun"],
+ ["TRUNC","TRUNC ","Truncated"],
+ ["VAFIN","VAFIN ", "Auxiliary Finite Verb"],
+ ["VAIMP","VAIMP ", "Auxiliary Finite Imperative Verb"],
+ ["VAINF","VAINF ", "Auxiliary Infinite Verb"],
+ ["VAPP","VAPP ", "Auxiliary Perfect Participle"],
+ ["VMFIN","VMFIN ", "Modal Finite Verb"],
+ ["VMINF","VMINF ", "Modal Infinite Verb"],
+ ["VMPP","VMPP ", "Modal Perfect Participle"],
+ ["VVFIN","VVFIN ","Finite Verb"],
+ ["VVIMP","VVIMP ", "Finite Imperative Verb"],
+ ["VVINF","VVINF ", "Infinite Verb"],
+ ["VVIZU","VVIZU ", "Infinite Verb with 'zu'"],
+ ["VVPP","VVPP ", "Perfect Participle"],
+ ["XY", "XY ", "Non-Word"]
+ ], { 'itemClass' : hintItemClass, 'lengthField' : hintLengthField });
+
document.getElementById('menu').appendChild(menu.element());
+ document.getElementById('largemenu').appendChild(largeMenu.element());
menu.limit(3).show(3);
menu.focus();
selectMenuClass.create(document.getElementById('choose-ql')).limit(5); // .show();
+ largeMenu.limit(8).show(3);
});
diff --git a/dev/js/spec/menuSpec.js b/dev/js/spec/menuSpec.js
index ba6f1fd..09848fc 100644
--- a/dev/js/spec/menuSpec.js
+++ b/dev/js/spec/menuSpec.js
@@ -1608,10 +1608,12 @@
// This will normally be done on
menu.slider()._rulerHeight = 100;
menu.slider()._sliderHeight = 40;
+ menu.slider()._event.initOffset = 0;
expect(menu.slider().length()).toEqual(5);
menu.slider().movetoRel(10);
expect(menu.slider().offset()).toEqual(0);
+
expect(menu.shownItem(0).active()).toBe(true);
expect(menu.shownItem(0).lcField()).toEqual(' constituency');
menu.slider().movetoRel(24);
diff --git a/dev/js/src/hint/item.js b/dev/js/src/hint/item.js
index 317dae7..3747a72 100644
--- a/dev/js/src/hint/item.js
+++ b/dev/js/src/hint/item.js
@@ -22,6 +22,8 @@
this._name = params[0];
this._action = params[1];
this._lcField = ' ' + this._name.toLowerCase();
+
+ console.log('!!!!');
if (params.length > 2) {
this._desc = params[2];
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 8fcc162..e79837b 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -63,6 +63,7 @@
domReady(function (event) {
var obj = {};
+
var session = sessionClass.create('KalamarJS');
// What should be visible?
diff --git a/dev/js/src/menu/slider.js b/dev/js/src/menu/slider.js
index baef16a..5df1543 100644
--- a/dev/js/src/menu/slider.js
+++ b/dev/js/src/menu/slider.js
@@ -73,10 +73,16 @@
* @param {number} relative position
*/
movetoRel : function (relativePos) {
+
+ // This is important to find the correct percentage!
var diffHeight = (this._rulerHeight - this._sliderHeight);
var relativeOffset = (relativePos / diffHeight);
- var off = this.offset(parseInt(relativeOffset * this._screens));
+ // Offset is a value 0 to this._screens
+ var off = this.offset(
+ parseInt(relativeOffset * this._screens) + this._event.initOffset
+ );
+
if (off !== undefined) {
this._menu.screen(off);
};
@@ -206,7 +212,12 @@
_mousedown : function (e) {
// Bind drag handler
var ev = this._event;
- ev.init = e.clientY - (this._step * this._offset);
+
+ // _step * _offset is the distance of the ruler to the top
+ ev.init = e.clientY;
+ ev.initOffset = this._offset;
+ // By substracting that, it is like initializing to the first point
+
ev.mov = this._mousemove.bind(this);
ev.up = this._mouseup.bind(this);
diff --git a/dev/scss/header/hint.scss b/dev/scss/header/hint.scss
index 5659a2e..c383a15 100644
--- a/dev/scss/header/hint.scss
+++ b/dev/scss/header/hint.scss
@@ -21,10 +21,6 @@
right-radius: 0;
}
}
- span.desc {
- display: block;
- font-size: 75%;
- }
}
div.alert.hint {
diff --git a/dev/scss/header/menu.scss b/dev/scss/header/menu.scss
index 0bf2bbd..8cfa301 100644
--- a/dev/scss/header/menu.scss
+++ b/dev/scss/header/menu.scss
@@ -31,6 +31,11 @@
white-space: normal;
}
+ul.menu span.desc {
+ display: block;
+ font-size: 75%;
+}
+
ul.menu div.lengthField {
border: {
color: transparent;