diff --git a/ui/index.html b/ui/index.html
index 2311f3bb..522d3818 100755
--- a/ui/index.html
+++ b/ui/index.html
@@ -9,17 +9,16 @@
position: relative;
width: 800px;
height: 600px;
- /*overflow: hidden;*/
- overflow: auto;
+ overflow: hidden;
border: solid blue 1px;
}
.ribbon-set {
+ position: absolute;
}
.ribbon-set:empty:after {
- position: absolute;
display: block;
top: 0px;
left: 0px;
@@ -199,15 +198,59 @@ function focusImage(image){
// Alignment API...
-function alignImage(){
+// ...tried to make this as brain-dead-stupidly-simple as possible...
+function relativeVisualPosition(outer, inner){
+ outer = $(outer).offset()
+ inner = $(inner).offset()
+ return {
+ top: inner.top - outer.top,
+ left: inner.left - outer.left
+ }
}
+// This appears to work well with scaling...
+function centerImage(image, mode){
+ if(mode == null){
+ //mode = 'css'
+ mode = 'animate'
+ }
+ if(image == null){
+ image = $('.current.image')
+ }
+ var viewer = $('.viewer')
+ var W = viewer.innerWidth()
+ var H = viewer.innerHeight()
+
+ var ribbons = $('.ribbon-set')
+ var scale = getElementScale(ribbons)
+ // NOTE: these are scalable, this need to get normalized...
+ var w = image.width()*scale
+ var h = image.height()*scale
+
+ var pos = relativeVisualPosition(viewer, image)
+
+ // zero out top/left if set to anything other than a specific number...
+ var t = parseFloat(ribbons.css('top'))
+ t = t ? t : 0
+ var l = parseFloat(ribbons.css('left'))
+ l = l ? l : 0
+
+ // do the actual work...
+ return ribbons[mode]({
+ 'top': t - pos.top + (H - h)/2,
+ 'left': l - pos.left + (W - h)/2
+ })
+}
+
+
// NOTE: this is on purpose done relative...
function clickHandler(evt){
var img = $(evt.target).closest('.image')
- focusImage(img)
+
+ centerImage(
+ focusImage(img))
}
// setup...
diff --git a/ui/lib/jli.js b/ui/lib/jli.js
index 8da08f3d..161b1179 100755
--- a/ui/lib/jli.js
+++ b/ui/lib/jli.js
@@ -305,6 +305,7 @@ var getElementTransitionDuration = makeCSSVendorAttrGetter(
+var USE_TRANSFORM = true
var USE_3D_TRANSFORM = true
// NOTE: at this point this works only on the X axis...