flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 18:30:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

some refactoring...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2012-08-04 14:59:54 +04:00
parent 4862cd146d
commit 6a4ebcb0c8
4 changed files with 33 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/experiment-ribbon-navigation-n-zoom.html
View File

@ -153,8 +153,8 @@ Guides:
<br> <br>
Zoom: Zoom:
<button onclick="zoomContainerBy(2)">+</button> <button onclick="scaleContainerBy(2)">+</button>
<button onclick="zoomContainerBy(0.5)">-</button> <button onclick="scaleContainerBy(0.5)">-</button>
<button onclick="setContainerZoom(1)">Original</button> <button onclick="setContainerZoom(1)">Original</button>
<button onclick="fitImage()">Image</button> <button onclick="fitImage()">Image</button>
<button onclick="fitThreeImages()">Three</button> <button onclick="fitThreeImages()">Three</button>

24
ui/gallery-prototype.js
View File

@ -42,7 +42,7 @@ function setupControlElements(){
$('.demote').click(shiftImageUp) $('.demote').click(shiftImageUp)
$('.promote').click(shiftImageDown) $('.promote').click(shiftImageDown)
$('.toggle-wide').click(toggleWideView) $('.toggle-wide').click(toggleWideView)
$('.toggle-single').click(toggleRibbonView) $('.toggle-single').click(toggleSingleImageMode)
} }
@ -111,7 +111,7 @@ var ZOOM_FACTOR = 2
// XXX need to make this handle modifiers gracefully... // XXX need to make this handle modifiers gracefully...
var keys = { var keys = {
toggleHelp: [72], toggleHelp: [72],
toggleRibbonView: [70], toggleSingleImageMode: [70],
close: [27, 88, 67], close: [27, 88, 67],
// zooming... // zooming...
@ -187,10 +187,10 @@ function handleKeys(event){
} }
}() }()
// zooming... // zooming...
: (fn(code, keys.zoomIn) >= 0) ? zoomContainerBy(ZOOM_FACTOR) : (fn(code, keys.zoomIn) >= 0) ? scaleContainerBy(ZOOM_FACTOR)
: (fn(code, keys.zoomOut) >= 0) ? zoomContainerBy(1/ZOOM_FACTOR) : (fn(code, keys.zoomOut) >= 0) ? scaleContainerBy(1/ZOOM_FACTOR)
// zoom presets... // zoom presets...
: (fn(code, keys.zoomOriginal) >= 0) ? setContainerZoom(1) : (fn(code, keys.zoomOriginal) >= 0) ? setContainerScale(1)
: (fn(code, keys.fitOne) >= 0) ? fitImage() : (fn(code, keys.fitOne) >= 0) ? fitImage()
: (fn(code, keys.fitThree) >= 0) ? fitThreeImages() : (fn(code, keys.fitThree) >= 0) ? fitThreeImages()
@ -200,7 +200,7 @@ function handleKeys(event){
: (fn(code, keys.moveViewLeft) >= 0) ? moveViewLeft() : (fn(code, keys.moveViewLeft) >= 0) ? moveViewLeft()
: (fn(code, keys.moveViewRight) >= 0) ? moveViewRight() : (fn(code, keys.moveViewRight) >= 0) ? moveViewRight()
: (fn(code, keys.toggleRibbonView) >= 0) ? toggleRibbonView() : (fn(code, keys.toggleSingleImageMode) >= 0) ? toggleSingleImageMode()
: (fn(code, keys.ignore) >= 0) ? false : (fn(code, keys.ignore) >= 0) ? false
// XXX // XXX
: (keys.helpShowOnUnknownKey) ? function(){alert(code)}() : (keys.helpShowOnUnknownKey) ? function(){alert(code)}()
@ -236,12 +236,18 @@ function setViewerMode(mode){
// ribbon/single view modes... // ribbon/single view modes...
var ORIGINAL_FIELD_SCALE = 1
// XXX CSS broken... // XXX CSS broken...
function toggleRibbonView(){ function toggleSingleImageMode(){
if($('.single-image-mode').length > 0){ if($('.single-image-mode').length > 0){
unsetViewerMode('single-image-mode') unsetViewerMode('single-image-mode')
setContainerScale(ORIGINAL_FIELD_SCALE)
} else { } else {
setViewerMode('single-image-mode') setViewerMode('single-image-mode')
ORIGINAL_FIELD_SCALE = getElementScale($('.field'))
fitImage()
} }
} }
@ -250,10 +256,10 @@ function toggleRibbonView(){
// wide view mode toggle... // wide view mode toggle...
function toggleWideView(){ function toggleWideView(){
if($('.wide-view-mode').length > 0){ if($('.wide-view-mode').length > 0){
setContainerZoom(1) setContainerScale(1)
$('.viewer').removeClass('wide-view-mode') $('.viewer').removeClass('wide-view-mode')
} else { } else {
setContainerZoom(0.1) setContainerScale(0.1)
$('.viewer').addClass('wide-view-mode') $('.viewer').addClass('wide-view-mode')
} }
} }

2
ui/gallery.html
View File

@ -124,7 +124,7 @@ $(document).ready(setup);
<button onclick="zoomContainerBy(2)">Zoom in (+)</button> <button onclick="zoomContainerBy(2)">Zoom in (+)</button>
<button onclick="zoomContainerBy(0.5)">Zoom out (-)</button> <button onclick="zoomContainerBy(0.5)">Zoom out (-)</button>
<button onclick="setContainerZoom(1)">Original (0)</button> <button onclick="setContainerScale(1)">Original (0)</button>
<button onclick="fitImage()">Image (1)</button> <button onclick="fitImage()">Image (1)</button>
<button onclick="fitThreeImages()">Three (3)</button> <button onclick="fitThreeImages()">Three (3)</button>

33
ui/ui.js
View File

@ -37,8 +37,7 @@ function getCurrentVerticalOffset(image){
image = $('.image.current') image = $('.image.current')
} }
//var zoom = $('.field').css('zoom') var scale = getElementScale($('.field'))
var zoom = getElementScale($('.field'))
var ribbons = $('.ribbon') var ribbons = $('.ribbon')
var ribbon = image.parents('.ribbon') var ribbon = image.parents('.ribbon')
@ -68,8 +67,7 @@ function getCurrentHorizontalOffset(image){
image = $('.image.current') image = $('.image.current')
} }
//var zoom = $('.field').css('zoom') var scale = getElementScale($('.field'))
var zoom = getElementScale($('.field'))
var ribbon = image.parents('.ribbon') var ribbon = image.parents('.ribbon')
var images = ribbon.children('.image') var images = ribbon.children('.image')
@ -175,13 +173,12 @@ function centerOrigin(){
// XXX need to make this work for % values... // XXX need to make this work for % values...
// XXX make this usable as an event handler for .resize(...) event... // XXX make this usable as an event handler for .resize(...) event...
// XXX this does not account for zoom correctly... // XXX this does not account for scale correctly...
function fieldSize(W, H){ function fieldSize(W, H){
var oW = $('.container').width() var oW = $('.container').width()
var oH = $('.container').height() var oH = $('.container').height()
//var zoom = $('.field').css('zoom') var scale = getElementScale($('.field'))
var zoom = getElementScale($('.field'))
$('.container').css({ $('.container').css({
'width': W, 'width': W,
@ -240,22 +237,22 @@ function setElementScale(elem, scale){
} }
// XXX this appears to be broken -- for some reason the current scale does not change... // XXX this appears to be broken -- for some reason the current scale does not change...
function zoomContainerBy(factor){ function scaleContainerBy(factor){
var zoom = getElementScale($('.field'))*factor var scale = getElementScale($('.field'))*factor
setContainerZoom(zoom) setContainerScale(scale)
} }
function setContainerZoom(zoom){ function setContainerScale(scale){
var H = $('.container').height() var H = $('.container').height()
var W = $('.container').width() var W = $('.container').width()
$('.field').css({ $('.field').css({
'transform': 'scale('+zoom+', '+zoom+')', 'transform': 'scale('+scale+', '+scale+')',
'-moz-transform': 'scale('+zoom+', '+zoom+')', '-moz-transform': 'scale('+scale+', '+scale+')',
'-o-transform': 'scale('+zoom+', '+zoom+')', '-o-transform': 'scale('+scale+', '+scale+')',
'-ms-transform': 'scale('+zoom+', '+zoom+')', '-ms-transform': 'scale('+scale+', '+scale+')',
'-webkit-transform': 'scale('+zoom+', '+zoom+')', '-webkit-transform': 'scale('+scale+', '+scale+')',
}) })
} }
@ -268,7 +265,7 @@ function fitImage(){
var f = Math.min(H/h, W/w) var f = Math.min(H/h, W/w)
setContainerZoom(f) setContainerScale(f)
} }
function fitThreeImages(){ function fitThreeImages(){
@ -281,6 +278,6 @@ function fitThreeImages(){
var f = Math.min(H/h, W/w) var f = Math.min(H/h, W/w)
setContainerZoom(f) setContainerScale(f)
} }