mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 10:20:08 +00:00
some code cleanup...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
2318dc56a4
commit
be5524daa3
10
ui/TODO.otl
10
ui/TODO.otl
@ -1,5 +1,5 @@
|
||||
Priority work
|
||||
[_] 45% Preview II
|
||||
[_] 39% Preview II
|
||||
[_] 55% sorted images in ribbons
|
||||
[X] 100% stage I: position the promoted/demoted image correctly
|
||||
| and correct positioning on promote/demote
|
||||
@ -42,9 +42,8 @@ Priority work
|
||||
[X] basic actions
|
||||
[X] zooming
|
||||
[_] position other ribbons...
|
||||
[_] 60% correct zooming and modes
|
||||
[_] 75% correct zooming and modes
|
||||
[X] zooming in ribbon view
|
||||
[_] dragging wile zoomed to more than screen width/height...
|
||||
[X] 100% zoom presets for ribbon view
|
||||
| other possible presets:
|
||||
| - five
|
||||
@ -58,6 +57,11 @@ Priority work
|
||||
[X] one (with zooming)
|
||||
[_] single image mode with zooming
|
||||
| ribbons are hidden
|
||||
[_] 0% drag action...
|
||||
[_] basic infrastructure
|
||||
[_] center current action
|
||||
[_] while zoomed more than the screen
|
||||
[_] while zoomed out (ribbon view)
|
||||
[_] 66% fix layout and animations
|
||||
[X] zooming
|
||||
[X] navigation
|
||||
|
||||
@ -65,8 +65,8 @@ function imageClick(){
|
||||
}
|
||||
.origin-marker-2 {
|
||||
position: relative;
|
||||
top: -6px;
|
||||
left: -6px;
|
||||
top: -7px;
|
||||
left: -7px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
|
||||
@ -167,6 +167,10 @@ Size:
|
||||
<button onclick="fieldSize(600, 400)">600x400</button>
|
||||
<br>
|
||||
<br>
|
||||
<button onclick="centerCurrentImage()">center current</button>
|
||||
<button onclick="centerOrigin()">center origin</button>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<div class="container animated">
|
||||
<div class="field">
|
||||
|
||||
@ -134,25 +134,35 @@ function handleImageClick(e) {
|
||||
|
||||
|
||||
|
||||
var ZOOM_FACTOR = 2
|
||||
|
||||
// key configuration...
|
||||
// XXX need to make this handle modifiers gracefully...
|
||||
var keys = {
|
||||
toggleHelpKeys: [72],
|
||||
toggleHelp: [72],
|
||||
toggleRibbonView: [70],
|
||||
closeKeys: [27, 88, 67],
|
||||
close: [27, 88, 67],
|
||||
|
||||
firstKeys: [36],
|
||||
lastKeys: [35],
|
||||
previousKeys: [37, 80, 188, 8],
|
||||
nextKeys: [39, 78, 190, 32],
|
||||
// zooming...
|
||||
zoomIn: [187],
|
||||
zoomOut: [189],
|
||||
// zoom presets...
|
||||
zoomOriginal: [48],
|
||||
fitOne: [49],
|
||||
fitThree: [51],
|
||||
|
||||
first: [36],
|
||||
last: [35],
|
||||
previous: [37, 80, 188, 8],
|
||||
next: [39, 78, 190, 32],
|
||||
// these work with ctrl and shift modifiers...
|
||||
downKeys: [40],
|
||||
upKeys: [38],
|
||||
down: [40],
|
||||
up: [38],
|
||||
// these work with ctrl modifier...
|
||||
promoteKeys: [45],
|
||||
demoteKeys: [46],
|
||||
promote: [45],
|
||||
demote: [46],
|
||||
|
||||
ignoreKeys: [16, 17, 18],
|
||||
ignore: [16, 17, 18],
|
||||
|
||||
helpShowOnUnknownKey: true
|
||||
}
|
||||
@ -160,24 +170,24 @@ var keys = {
|
||||
// XXX revise...
|
||||
function handleKeys(event){
|
||||
var code = event.keyCode, fn = $.inArray;
|
||||
var _ = (fn(code, keys.closeKeys) >= 0) ? function(){}()
|
||||
: (fn(code, keys.firstKeys) >= 0) ? firstImage()
|
||||
: (fn(code, keys.nextKeys) >= 0) ? nextImage()
|
||||
: (fn(code, keys.previousKeys) >= 0) ? prevImage()
|
||||
: (fn(code, keys.lastKeys) >= 0) ? lastImage()
|
||||
: (fn(code, keys.promoteKeys) >= 0) ? function(){
|
||||
var _ = (fn(code, keys.close) >= 0) ? function(){}()
|
||||
: (fn(code, keys.first) >= 0) ? firstImage()
|
||||
: (fn(code, keys.next) >= 0) ? nextImage()
|
||||
: (fn(code, keys.previous) >= 0) ? prevImage()
|
||||
: (fn(code, keys.last) >= 0) ? lastImage()
|
||||
: (fn(code, keys.promote) >= 0) ? function(){
|
||||
if(event.ctrlKey){
|
||||
createRibbon('next')
|
||||
}
|
||||
shiftImageDown()
|
||||
}()
|
||||
: (fn(code, keys.demoteKeys) >= 0) ? function(){
|
||||
: (fn(code, keys.demote) >= 0) ? function(){
|
||||
if(event.ctrlKey){
|
||||
createRibbon('prev')
|
||||
}
|
||||
shiftImageUp()
|
||||
}()
|
||||
: (fn(code, keys.downKeys) >= 0) ? function(){
|
||||
: (fn(code, keys.down) >= 0) ? function(){
|
||||
if(event.shiftKey){
|
||||
if(event.ctrlKey){
|
||||
createRibbon('next')
|
||||
@ -187,7 +197,7 @@ function handleKeys(event){
|
||||
focusBelowRibbon()
|
||||
}
|
||||
}()
|
||||
: (fn(code, keys.upKeys) >= 0) ? function(){
|
||||
: (fn(code, keys.up) >= 0) ? function(){
|
||||
if(event.shiftKey){
|
||||
if(event.ctrlKey){
|
||||
createRibbon('prev')
|
||||
@ -197,8 +207,16 @@ function handleKeys(event){
|
||||
focusAboveRibbon()
|
||||
}
|
||||
}()
|
||||
// zooming...
|
||||
: (fn(code, keys.zoomIn) >= 0) ? zoomContainerBy(ZOOM_FACTOR)
|
||||
: (fn(code, keys.zoomOut) >= 0) ? zoomContainerBy(1/ZOOM_FACTOR)
|
||||
// zoom presets...
|
||||
: (fn(code, keys.zoomOriginal) >= 0) ? setContainerZoom(1)
|
||||
: (fn(code, keys.fitOne) >= 0) ? fitImage()
|
||||
: (fn(code, keys.fitThree) >= 0) ? fitThreeImages()
|
||||
|
||||
: (fn(code, keys.toggleRibbonView) >= 0) ? toggleRibbonView()
|
||||
: (fn(code, keys.ignoreKeys) >= 0) ? false
|
||||
: (fn(code, keys.ignore) >= 0) ? false
|
||||
// XXX
|
||||
: (keys.helpShowOnUnknownKey) ? function(){alert(code)}()
|
||||
: false;
|
||||
|
||||
@ -100,11 +100,11 @@ $(document).ready(setup);
|
||||
|
||||
<br><br>
|
||||
|
||||
<button onclick="zoomContainerBy(2)">Zoom in</button>
|
||||
<button onclick="zoomContainerBy(0.5)">Zoom out</button>
|
||||
<button onclick="setContainerZoom(1)">Original</button>
|
||||
<button onclick="fitImage()">Image</button>
|
||||
<button onclick="fitThreeImages()">Three</button>
|
||||
<button onclick="zoomContainerBy(2)">Zoom in (+)</button>
|
||||
<button onclick="zoomContainerBy(0.5)">Zoom out (-)</button>
|
||||
<button onclick="setContainerZoom(1)">Original (0)</button>
|
||||
<button onclick="fitImage()">Image (1)</button>
|
||||
<button onclick="fitThreeImages()">Three (3)</button>
|
||||
|
||||
<br><br>
|
||||
|
||||
|
||||
21
ui/ui.js
21
ui/ui.js
@ -95,7 +95,7 @@ function centerSquare(){
|
||||
// horizontal...
|
||||
alignRibbon()
|
||||
|
||||
centerOrigin()
|
||||
centerCurrentImage()
|
||||
}
|
||||
|
||||
function alignRibbon(image, position){
|
||||
@ -175,6 +175,7 @@ function centerOrigin(){
|
||||
|
||||
// XXX need to make this work for % values...
|
||||
// XXX make this usable as an event handler for .resize(...) event...
|
||||
// XXX this does not account for zoom correctly...
|
||||
function fieldSize(W, H){
|
||||
var oW = $('.container').width()
|
||||
var oH = $('.container').height()
|
||||
@ -189,15 +190,25 @@ function fieldSize(W, H){
|
||||
|
||||
// shift the field...
|
||||
$('.field').css({
|
||||
// compensate top/left that get changed while zooming....
|
||||
'top': H/2 * 1/zoom - H/2,
|
||||
'left': W/2 * 1/zoom - W/2,
|
||||
|
||||
'margin-top': (parseFloat($('.field').css('margin-top')) + (H-oH)/2),
|
||||
'margin-left': (parseFloat($('.field').css('margin-left')) + (W-oW)/2)
|
||||
})
|
||||
}
|
||||
|
||||
function centerCurrentImage(){
|
||||
$('.field')
|
||||
.css({
|
||||
'top': 0,
|
||||
'left': 0
|
||||
})
|
||||
// do this after animations are done...
|
||||
.one("webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend", centerOrigin)
|
||||
// this is repeated intentionally...
|
||||
// ...needed for small shifts, while the after-animation event
|
||||
// is for large moves.
|
||||
centerOrigin()
|
||||
}
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user