added top/bottom indicators...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

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, 
+	var target_ribbon = getRibbon(cur).prevAll('.ribbon' + NAV_RIBBON_DEFAULT).first()
-			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 = target_ribbon.find('.image' + mode).first()
-		target = getRibbon(cur)
-					.prevAll('.ribbon' + NAV_RIBBON_DEFAULT).first()
-						.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, 
+	var target_ribbon = getRibbon(cur).nextAll('.ribbon' + NAV_RIBBON_DEFAULT).first()
-			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 = target_ribbon.find('.image' + mode).first()
-		target = getRibbon(cur)
-					.nextAll('.ribbon' + NAV_RIBBON_DEFAULT).first()
-						.find('.image' + mode).first()
 	}
 	return centerView(focusImage(target))
 }

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 

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;
+  top: 20px;
-  right: 15px;
+  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,

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;
+	top: 20px;
-	right: 15px;
+	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... */

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 $('<span class="expanding-text">'+
+	return $('<span class="indicator expanding-text">'+
 				'<span class="hidden">'+ text +'</span>'+
 				'<span class="shown">'+ text[0] +'</span>'+
 			'</span>')
@@ -274,7 +278,7 @@ function showGlobalIndicator(cls, text){
 	if(c.length == 0){
 		c = $('<div>')
 			.addClass('global-mode-indicators')
-			.append('<span class="mode-tip">Global status:</span>')
+			.append('<span class="mode-tip">Global status</span>')
 			.appendTo($('.viewer'))
 	}
 	return makeIndicator(text)
@@ -286,7 +290,7 @@ function showContextIndicator(cls, text){
 	if(c.length == 0){
 		c = $('<div>')
 			.addClass('context-mode-indicators')
-			.append('<span class="mode-tip">Context status:</span>')
+			.append('<span class="mode-tip">Context status</span>')
 			.appendTo($('.viewer'))
 	}
 	return makeIndicator(text)