diff --git a/ui/Gen3-TODO.otl b/ui/Gen3-TODO.otl
index 70bed5ef..660b3a23 100755
--- a/ui/Gen3-TODO.otl
+++ b/ui/Gen3-TODO.otl
@@ -1,6 +1,29 @@
-[_] 50% Gen 3 current todo
- [_] 0% image load and positioning must be fool proof
- [X] action visual indication
+[_] 9% Gen 3 current todo
+ [_] 19% High priority
+ [_] 0% image load and positioning must be fool proof
+ [_] 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
diff --git a/ui/base.js b/ui/base.js
index a61f40d8..c290d5e5 100755
--- a/ui/base.js
+++ b/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()
diff --git a/ui/data.js b/ui/data.js
index f529aaed..e3af23fe 100755
--- a/ui/data.js
+++ b/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
diff --git a/ui/index.html b/ui/index.html
index 1a5da44f..8c8aba03 100755
--- a/ui/index.html
+++ b/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;
+}
+
+
@@ -261,6 +277,7 @@ body {
+
@@ -297,7 +314,15 @@ $(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(
KEYBOARD_CONFIG,
diff --git a/ui/keybindings3.js b/ui/keybindings3.js
index c4accb0b..bac46f42 100755
--- a/ui/keybindings3.js
+++ b/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()
diff --git a/ui/modes.js b/ui/modes.js
new file mode 100755
index 00000000..a317f251
--- /dev/null
+++ b/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 : */