Improve pageUp/pageDown behaviour in menus
diff --git a/Changes b/Changes
index c861526..db042e6 100755
--- a/Changes
+++ b/Changes
@@ -1,8 +1,9 @@
-0.20 2016-05-23
+0.20 2016-05-24
- Improved menu using sliders.
- Improved menu to make prefixes chooseable,
even if list can't be filtered.
- Fixed choosable prefixes in hint menu.
+ - Improve pageup/pagedown behaviour in menus.
0.19 2016-04-28
- Improved datepicker to enter date strings.
diff --git a/dev/js/spec/menuSpec.js b/dev/js/spec/menuSpec.js
index 972f385..1825917 100644
--- a/dev/js/spec/menuSpec.js
+++ b/dev/js/spec/menuSpec.js
@@ -1137,8 +1137,76 @@
});
- xit('should be page downable');
- xit('should be page upable');
+ it('should be page downable', function () {
+ var menu = KorAP.OwnMenu.create(demolonglist);
+ menu.limit(3);
+
+ expect(menu.show(0)).toBe(true);
+
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(menu.shownItem(0).lcField()).toEqual(' titel');
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+
+ menu.pageDown();
+
+ expect(menu.shownItem(0).lcField()).toEqual(' länge');
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).active()).toBe(false);
+
+ menu.pageDown();
+
+ expect(menu.shownItem(0).lcField()).toEqual(' corpusid');
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).active()).toBe(false);
+
+ // Doesn't matter
+ menu.pageDown();
+
+ expect(menu.shownItem(0).lcField()).toEqual(' corpusid');
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).active()).toBe(false);
+ });
+
+ it('should be page upable', function () {
+ var menu = KorAP.OwnMenu.create(demolonglist);
+ menu.limit(3);
+
+ // Choose the final value
+ expect(menu.show(1000)).toBe(true);
+
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).active()).toBe(true);
+ expect(menu.shownItem(2).lcField()).toEqual(' textid');
+ expect(menu.shownItem(3)).toBe(undefined);
+
+ menu.pageUp();
+
+ expect(menu.shownItem(0).lcField()).toEqual(' länge');
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).active()).toBe(false);
+
+ menu.pageUp();
+
+ expect(menu.shownItem(0).lcField()).toEqual(' titel');
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).active()).toBe(false);
+
+ // Doesn't matter
+ menu.pageUp();
+
+ expect(menu.shownItem(0).lcField()).toEqual(' titel');
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).active()).toBe(false);
+ });
it('should scroll to a chosen value', function () {
var menu = KorAP.OwnMenu.create(demolist);
@@ -1164,8 +1232,9 @@
});
+ xit('should be page upable with prefix');
+ xit('should be page downable with prefix');
xit('should highlight a chosen value');
-
xit('should move the viewport to active, if active is not in the viewport');
});
diff --git a/dev/js/src/menu.js b/dev/js/src/menu.js
index 95b4f8d..602eb37 100644
--- a/dev/js/src/menu.js
+++ b/dev/js/src/menu.js
@@ -14,6 +14,7 @@
* to the active item.
* TODO: pageUp and pageDown should use _screen
* TODO: Ignore keys with function key combinations (other than shift)
+ * TODO: Show the slider briefly on move (whenever screen is called).
*/
define([
'menu/item',
@@ -266,7 +267,7 @@
break;
case 33: // 'Page up'
e.halt();
- this.prev();
+ this.pageUp();
break;
case 40: // 'Down'
e.halt();
@@ -274,7 +275,7 @@
break;
case 34: // 'Page down'
e.halt();
- this.next();
+ this.pageDown();
break;
case 39: // 'Right'
if (this._prefix.active())
@@ -322,6 +323,13 @@
* in the viewport.
*/
screen : function (nr) {
+ if (nr < 0) {
+ nr = 0
+ }
+ else if (nr > (this.length() - this.limit())) {
+ nr = (this.length() - this.limit());
+ };
+
if (this._offset === nr)
return;
@@ -424,10 +432,12 @@
if (arguments.length === 1) {
// Normalize active value
- if (active < 0)
+ if (active < 0) {
active = 0;
- else if (active > this.length())
- active = this.length();
+ }
+ else if (active > this.length()) {
+ active = this.length() - 1;
+ };
if (active > this._limit) {
offset = active;
@@ -454,7 +464,7 @@
// Make chosen value active
if (this.position !== -1) {
- this.shownItem(this.position).active(true);
+ this.liveItem(this.position).active(true);
};
// The prefix is not active
@@ -720,6 +730,21 @@
newItem.active(true);
},
+ /**
+ * Move the page up by limit!
+ */
+ pageUp : function () {
+ this.screen(this._offset - this.limit());
+ },
+
+
+ /**
+ * Move the page down by limit!
+ */
+ pageDown : function () {
+ this.screen(this._offset + this.limit());
+ },
+
// Unmark all items
_unmark : function () {
@@ -819,40 +844,3 @@
}
};
});
-
-
- /*
- * Page down to the first item on the next page
- */
- /*
- nextPage : function () {
-
- // Prefix is active
- if (this._prefix.active()) {
- this._prefix.active(false);
- }
-
- // Last item is chosen
- else if (this.position >= this.limit() + this._offset) {
-
- this.position = this.limit() + this._offset - 1;
- newItem = this.liveItem(this.position);
- var oldItem = this.liveItem(this.position--);
- oldItem.active(false);
- }
-
- // Last item of page is chosen
- else if (0) {
-
- // Jump to last item
- else {
- var oldItem = this.liveItem(this.position);
- oldItem.active(false);
-
- this.position = this.limit() + this._offset - 1;
- newItem = this.liveItem(this.position);
- };
-
- newItem.active(true);
- },
- */