added single image mode...

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

ui/Gen3-TODO.otl

@@ -1,6 +1,29 @@
-[_] 50% Gen 3 current todo
+[_] 9% Gen 3 current todo
+	[_] 19% High priority
 		[_] 0% image load and positioning must be fool proof
-	[X] action visual indication
+		[_] 0% gesture support
+		[_] 0% styles
+			[_] cleanup
+			[_] split themes and layout
+		[_] 0% themes
+			[_] light
+			[_] gray
+			[_] dark
+		[X] 100% action visual indication
+			[X] first/last image
+			[X] shift up/down
+		[_] 0% tweak loader
+			[_] thresholds and frame size
+			[_] remove extra and repetitive actions
+			[_] caching config
+		[_] 33% UI elements
+			[X] indicators
+			[_] image number
+			[_] detailed image info
+	[_] Low priority
+		[_] Help
+		[_] Keyboard config
+		[_] general config
 		
 
 

ui/base.js

@@ -24,7 +24,14 @@
 var NAV_ALL = '*'
 var NAV_VISIBLE = ':visible'
 var NAV_MARKED = '.marked:visible'
-var NAV_DEFAULT = NAV_VISIBLE
+var NAV_DEFAULT = NAV_ALL
+
+var NAV_RIBBON_ALL = ''
+var NAV_RIBBON_VISIBLE = ':visible'
+var NAV_RIBBON_DEFAULT = NAV_RIBBON_ALL
+//var NAV_RIBBON_DEFAULT = NAV_RIBBON_VISIBLE
+
+var TRANSITION_MODE_DEFAULT = 'animate'
 
 var MAX_SCREEN_IMAGES = 12
 var ZOOM_SCALE = 1.2
@@ -456,7 +463,7 @@ function alignVia(container, elem, via, valign, halign, mode){
 
 	valign = valign == null ? 'center' : valign
 	halign = halign == null ? 'center' : halign
-	mode = mode == null ? 'animate' : mode
+	mode = mode == null ? TRANSITION_MODE_DEFAULT : mode
 
 	var pos = getRelativeVisualPosition(container, elem)
 	var dt = pos.top
@@ -505,10 +512,7 @@ function alignVia(container, elem, via, valign, halign, mode){
 
 // XXX make this more configurable (centering, ...)...
 function centerView(image, mode){
-	if(mode == null){
-		//mode = 'css'
-		mode = 'animate'
-	}
+	mode = mode == null ? TRANSITION_MODE_DEFAULT : mode
 
 	$('.viewer').trigger('preCenteringView', [getRibbon(image), image])
 
@@ -569,10 +573,7 @@ function centerView(image, mode){
 // XXX this does not work in marked-only mode...
 // XXX this needs the image to exist... should be GID compatible... (???)
 function centerRibbon(ribbon, image, mode){
-	if(mode == null){
-		//mode = 'css'
-		mode = 'animate'
-	}
+	mode = mode == null ? TRANSITION_MODE_DEFAULT : mode
 	ribbon = $(ribbon)
 	image = image == null ? $('.current.image') : $(image)
 
@@ -620,7 +621,7 @@ function centerRibbon(ribbon, image, mode){
 // a shorthand...
 function centerRibbons(mode, no_skip_current){
 	return $('.ribbon')
-		.filter(':visible')
+		.filter('*' + NAV_RIBBON_DEFAULT)
 		.each(function(){ 
 			if(no_skip_current == true && $(this).find('.current.image').length > 0){
 				return
@@ -645,6 +646,13 @@ function clickHandler(evt){
 }
 
 
+// XXX for some reason this messes up alignment for the initial view...
+function dblClickHandler(evt){
+	toggleSingleImageMode()
+}
+
+
+
 
 /**********************************************************************
 * User actions
@@ -727,11 +735,11 @@ function prevRibbon(moving, mode){
 	mode = mode == null ? NAV_DEFAULT : mode
 	var cur = $('.current.image')
 	var target = getImageBefore(cur, 
-			getRibbon(cur).prevAll('.ribbon:visible').first())
+			getRibbon(cur).prevAll('.ribbon' + NAV_RIBBON_DEFAULT).first())
 	if(target.length == 0){
 		// XXX too complex???
 		target = getRibbon(cur)
-					.prevAll('.ribbon:visible').first()
+					.prevAll('.ribbon' + NAV_RIBBON_DEFAULT).first()
 						.find('.image' + mode).first()
 	} else if(moving == 'next' && cur.attr('order') != target.attr('order')){
 		var next = target.nextAll('.image' + mode).first()
@@ -743,11 +751,11 @@ function nextRibbon(moving, mode){
 	mode = mode == null ? NAV_DEFAULT : mode
 	var cur = $('.current.image')
 	var target = getImageBefore(cur, 
-			getRibbon(cur).nextAll('.ribbon:visible').first())
+			getRibbon(cur).nextAll('.ribbon' + NAV_RIBBON_DEFAULT).first())
 	if(target.length == 0){
 		// XXX too complex???
 		target = getRibbon(cur)
-					.nextAll('.ribbon:visible').first()
+					.nextAll('.ribbon' + NAV_RIBBON_DEFAULT).first()
 						.find('.image' + mode).first()
 	} else if(moving == 'next' && cur.attr('order') != target.attr('order')){
 			var next = target.nextAll('.image' + mode).first()

ui/data.js

@@ -53,15 +53,17 @@ var IMAGE_CACHE = []
 */
 
 // NOTE: this expects gids...
-function imageDateCmp(a, b){
-	return DATA.images[b].ctime - DATA.images[a].ctime
+function imageDateCmp(a, b, data){
+	data = data == null ? DATA : data
+	return data.images[b].ctime - data.images[a].ctime
 }
 
 
 // NOTE: this expects gids...
-function imageNameCmp(a, b){
-	a = DATA.images[b].path.split('/')[-1]
-	b = DATA.images[a].path.split('/')[-1]
+function imageNameCmp(a, b, data){
+	data = data == null ? DATA : data
+	a = data.images[b].path.split('/')[-1]
+	b = data.images[a].path.split('/')[-1]
 	if(a == b){
 		return 0
 	} else if(a < b){
@@ -482,7 +484,6 @@ function loadData(data, images_per_screen){
 
 
 function convertDataGen1(data, cmp){
-	cmp = cmp == null ? imageDateCmp : cmp
 	var res = {
 		varsion: '2.0',
 		current: null,
@@ -490,9 +491,15 @@ function convertDataGen1(data, cmp){
 		order: [], 
 		images: {}
 	}
+	cmp = cmp == null ?
+			function(a, b){ 
+				return imageDateCmp(a, b, res) 
+			}
+			: cmp
 	var ribbons = res.ribbons
 	var images = res.images
 	var order = res.order
+
 	// position...
 	res.current = data.position
 	
@@ -509,7 +516,6 @@ function convertDataGen1(data, cmp){
 		ribbon.sort(cmp)
 	})
 
-	// order...
 	order.sort(cmp)
 
 	// XXX STUB

ui/index.html

@@ -18,11 +18,12 @@ body {
 
 .viewer {
 	position: relative;
-	width: 800px;
-	height: 600px;
+	width: 100%;
+	height: 100%;
 	overflow: hidden;
 
-	border: solid blue 1px;
+	/*border: solid blue 1px;*/
+	box-sizing: border-box;
 
 	-moz-user-select: none;
 	-webkit-user-select: none;
@@ -81,7 +82,7 @@ body {
 	position: relative;
 	display: inline-block;
 	vertical-align: middle;
-	text-align;left;
+	text-align:left;
 	width: 300px;
 	height: 300px;
 	font-size: 12pt;
@@ -90,6 +91,8 @@ body {
 	box-sizing: border-box;
 	color: white;
 
+	text-shadow: black 0.1em 0.1em 0.4em, black 0.1em 0.1em;
+
 	background: no-repeat 50% black;
 	background-size: contain;
 	/* XXX do we need this? */
@@ -251,6 +254,19 @@ body {
 }
 
 
+
+.single-image-mode.viewer .image {
+	background-color: transparent;
+	border: none;
+}
+.single-image-mode.viewer .image:not(.current) {
+	/* XXX for some reason this breaks the alignment on large magnifications...
+	display: none;
+	*/
+	opacity: 0;
+}
+
+
 </style>
 
 
@@ -261,6 +277,7 @@ body {
 <script src="lib/keyboard.js"></script>
 
 <script src="base.js"></script>
+<script src="modes.js"></script>
 <script src="marks.js"></script>
 <script src="data.js"></script>
 <script src="ui.js"></script>
@@ -297,6 +314,14 @@ $(function(){
 	//		the internal workings...
 	$('.viewer')
 		.click(clickHandler)
+		// XXX for some reason this messes up alignment on initial view...
+		//.dblclick(dblClickHandler)
+
+	$(window)
+		.resize(function() {
+			// XXX should this be animated or not?
+			centerView()
+		})
 		
 	$(document)
 		.keydown(makeKeyboardHandler(

ui/keybindings3.js

@@ -140,6 +140,8 @@ var KEYBOARD_CONFIG = {
 		'=': function(){ zoomIn() },
 
 
+		Enter: function(){ toggleSingleImageMode() },
+
 		// XXX this should only work on single image mode...
 		F: function(){ 
 				toggleImageProportions() 

ui/modes.js

@@ -0,0 +1,29 @@
+/**********************************************************************
+* 
+*
+*
+**********************************************************************/
+
+//var DEBUG = DEBUG != null ? DEBUG : true
+
+
+/*********************************************************************/
+
+// XXX make this save and restore settings...
+var toggleSingleImageMode = createCSSClassToggler('.viewer', 
+		'single-image-mode',
+		function(action){
+			if(action == 'on'){
+				TRANSITION_MODE_DEFAULT = 'css'
+				fitNImages(1)
+			} else {
+				TRANSITION_MODE_DEFAULT = 'animate'
+				fitNImages(5)
+			}
+		})
+
+
+
+
+/**********************************************************************
+* vim:set ts=4 sw=4 :                                                */