From f2e27bc47153fb491ad53febd6253ead4dc6ae31 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Sat, 8 Jun 2013 02:29:14 +0400 Subject: [PATCH] added top/bottom indicators... Signed-off-by: Alex A. Naanou --- ui/base.js | 28 ++++++++++++------------- ui/index.html | 2 +- ui/layout.css | 49 ++++++++++++++++++++++++++----------------- ui/layout.less | 57 +++++++++++++++++++++++++++++++------------------- ui/ui.js | 10 ++++++--- 5 files changed, 87 insertions(+), 59 deletions(-) diff --git a/ui/base.js b/ui/base.js index 456aa1a2..ab367320 100755 --- a/ui/base.js +++ b/ui/base.js @@ -753,20 +753,19 @@ function lastImage(mode){ // NOTE: if moving is 'next' these will chose the image after the current's order. // NOTE: if an image with the same order is found, moving argument has no effect. -// XXX these sometimes behave wrong at the start of the ribbon depending -// on direction... function prevRibbon(mode){ mode = mode == null ? NAV_DEFAULT : mode var cur = getImage() - var target = getImageBefore(cur, - getRibbon(cur).prevAll('.ribbon' + NAV_RIBBON_DEFAULT).first()) + var target_ribbon = getRibbon(cur).prevAll('.ribbon' + NAV_RIBBON_DEFAULT).first() + var target = getImageBefore(cur, target_ribbon) + + if(target_ribbon.length == 0){ + flashIndicator('top') + } // first image... if(target.length == 0){ - // XXX too complex??? - target = getRibbon(cur) - .prevAll('.ribbon' + NAV_RIBBON_DEFAULT).first() - .find('.image' + mode).first() + target = target_ribbon.find('.image' + mode).first() } else { var next = target.nextAll('.image' + mode).first() @@ -777,15 +776,16 @@ function prevRibbon(mode){ function nextRibbon(mode){ mode = mode == null ? NAV_DEFAULT : mode var cur = getImage() - var target = getImageBefore(cur, - getRibbon(cur).nextAll('.ribbon' + NAV_RIBBON_DEFAULT).first()) + var target_ribbon = getRibbon(cur).nextAll('.ribbon' + NAV_RIBBON_DEFAULT).first() + var target = getImageBefore(cur, target_ribbon) + + if(target_ribbon.length == 0){ + flashIndicator('bottom') + } // first image... if(target.length == 0){ - // XXX too complex??? - target = getRibbon(cur) - .nextAll('.ribbon' + NAV_RIBBON_DEFAULT).first() - .find('.image' + mode).first() + target = target_ribbon.find('.image' + mode).first() } return centerView(focusImage(target)) } diff --git a/ui/index.html b/ui/index.html index de9aae05..2264db49 100755 --- a/ui/index.html +++ b/ui/index.html @@ -83,9 +83,9 @@ $(function(){ toggleImageInfo('on') setupIndicators() - autoHideCursor($('.viewer')) + if(SCROLLER_ENABLED){ var scroller = makeScrollHandler($('.viewer'), { // XXX after click and initial move the screen jumps diff --git a/ui/layout.css b/ui/layout.css index 3a0c41e1..248053c7 100644 --- a/ui/layout.css +++ b/ui/layout.css @@ -579,7 +579,9 @@ body { .up-indicator, .down-indicator, .start-indicator, -.end-indicator { +.end-indicator, +.top-indicator, +.bottom-indicator { display: block; position: absolute; content: ""; @@ -627,11 +629,25 @@ body { left: auto; right: 0px; } +.top-indicator, +.bottom-indicator { + left: 0px; + height: 10px; + width: 100%; + margin: 0px; + background: yellow; +} +.bottom-indicator { + top: auto; + bottom: 0px; +} /* default state */ .up-indicator, .down-indicator, .start-indicator, -.end-indicator { +.end-indicator, +.top-indicator, +.bottom-indicator { display: none; } /* these are generic containers for indicators */ @@ -645,25 +661,28 @@ body { color: transparent; } .global-mode-indicators { - top: 15px; - right: 15px; + top: 20px; + right: 20px; +} +.context-mode-indicators { + right: 20px; + bottom: 20px; } .global-mode-indicators .mode-tip, .context-mode-indicators .mode-tip { + display: none; opacity: 0.5; -} -.global-mode-indicators:hover, -.context-mode-indicators:hover { - color: silver; font-weight: bold; - font-size: large; + color: gray; +} +.global-mode-indicators:hover .mode-tip, +.context-mode-indicators:hover .mode-tip { + display: inline-block; } .global-mode-indicators > *, .context-mode-indicators > * { font-size: small; vertical-align: center; -} -.global-mode-indicators > * { margin-left: 10px; } .global-mode-indicators .circle, @@ -686,14 +705,6 @@ body { .single-image-mode.viewer .global-mode-indicators:hover { opacity: 1; } -/* context indicators */ -.context-mode-indicators { - right: 15px; - bottom: 15px; -} -.context-mode-indicators > * { - margin-left: 10px; -} /* actual indicators */ /* marks... */ .global-mode-indicators .marked-only-visible, diff --git a/ui/layout.less b/ui/layout.less index af17a55f..7ee9fffe 100755 --- a/ui/layout.less +++ b/ui/layout.less @@ -528,7 +528,10 @@ body { .up-indicator, .down-indicator, .start-indicator, -.end-indicator { +.end-indicator, +.top-indicator, +.bottom-indicator +{ display: block; position: absolute; content: ""; @@ -578,11 +581,28 @@ body { left: auto; right: 0px; } +.top-indicator, +.bottom-indicator { + left: 0px; + height: 10px; + width: 100%; + margin: 0px; + + background: yellow; +} +.bottom-indicator { + top: auto; + bottom: 0px; +} + /* default state */ .up-indicator, .down-indicator, .start-indicator, -.end-indicator { +.end-indicator, +.top-indicator, +.bottom-indicator +{ display: none; } @@ -600,30 +620,33 @@ body { } .global-mode-indicators { - top: 15px; - right: 15px; + top: 20px; + right: 20px; +} +.context-mode-indicators { + right: 20px; + bottom: 20px; } .global-mode-indicators .mode-tip, .context-mode-indicators .mode-tip { + display: none; opacity: 0.5; -} - -.global-mode-indicators:hover, -.context-mode-indicators:hover { - color: gray; font-weight: bold; + color: gray; +} +.global-mode-indicators:hover .mode-tip, +.context-mode-indicators:hover .mode-tip { + display: inline-block; } .global-mode-indicators > *, .context-mode-indicators > * { font-size: small; vertical-align: center; -} - -.global-mode-indicators>* { margin-left: 10px; } + .global-mode-indicators .circle, .context-mode-indicators .circle { display: inline-block; @@ -646,16 +669,6 @@ body { opacity: 1; } -/* context indicators */ -.context-mode-indicators { - right: 15px; - bottom: 15px; - -} -.context-mode-indicators>* { - margin-left: 10px; -} - /* actual indicators */ /* marks... */ diff --git a/ui/ui.js b/ui/ui.js index 778bf0c5..516a36e8 100755 --- a/ui/ui.js +++ b/ui/ui.js @@ -72,10 +72,14 @@ function autoHideCursor(elem){ function flashIndicator(direction){ var cls = { + // shift up/down... prev: '.up-indicator', next: '.down-indicator', + // hit start/end/top/bottom... start: '.start-indicator', end: '.end-indicator', + top: '.top-indicator', + bottom: '.bottom-indicator', }[direction] var indicator = $(cls) @@ -263,7 +267,7 @@ function getStatus(){ // XXX move to ui.js? function makeIndicator(text){ - return $(''+ + return $(''+ ''+ ''+ text[0] +''+ '') @@ -274,7 +278,7 @@ function showGlobalIndicator(cls, text){ if(c.length == 0){ c = $('
') .addClass('global-mode-indicators') - .append('Global status:') + .append('Global status') .appendTo($('.viewer')) } return makeIndicator(text) @@ -286,7 +290,7 @@ function showContextIndicator(cls, text){ if(c.length == 0){ c = $('
') .addClass('context-mode-indicators') - .append('Context status:') + .append('Context status') .appendTo($('.viewer')) } return makeIndicator(text)