mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 02:10:08 +00:00
more refactoring and cleanup...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
6a4ebcb0c8
commit
03dea124d1
21
ui/TODO.otl
21
ui/TODO.otl
@ -58,21 +58,18 @@ Priority work
|
||||
[X] one (with zooming)
|
||||
[X] single image mode with zooming
|
||||
| ribbons are hidden
|
||||
[_] 30% UI
|
||||
[_] 33% UI
|
||||
[X] fix single image mode
|
||||
| need to center the image correctly...
|
||||
[_] 46% add screen buttons for all actions...
|
||||
[X] 100% add screen buttons for all actions...
|
||||
[X] navigation
|
||||
[X] actions
|
||||
[_] zooming
|
||||
[_] 33% zoom presets
|
||||
[_] single
|
||||
[_] three
|
||||
[X] zooming
|
||||
[X] 100% zoom presets
|
||||
[X] single
|
||||
[X] three
|
||||
[X] wide
|
||||
| toggle...
|
||||
[_] return to current image / home (after drag)
|
||||
[_] tap image to return from large magnification
|
||||
[_] pinch to zoom
|
||||
[_] stretch viewer to screen
|
||||
[_] 0% layout
|
||||
[_] tablet
|
||||
@ -89,6 +86,11 @@ Priority work
|
||||
| @media screen {}
|
||||
[_] web
|
||||
| is this is the same as the above two? (with auto-select)
|
||||
[_] 0% return to current image / home (after drag)
|
||||
[_] button
|
||||
[_] keyboard
|
||||
[_] tap image to return from large magnification
|
||||
[_] pinch to zoom
|
||||
[_] 0% setting screen
|
||||
[_] basic screen
|
||||
[_] keyboard config (low priority)
|
||||
@ -134,6 +136,7 @@ Priority work
|
||||
[_] cleanup legacy workarounds
|
||||
[_] ui.js, gallery-prototype.js either merge or revise split logic
|
||||
[_] 0% Preview III
|
||||
[_] revise controls...
|
||||
[_] dynamic image/preview swap for zooming
|
||||
| important to make 1:1 previews for all main views and zoom levels...
|
||||
| also need to make this as device-neutral as possible...
|
||||
|
||||
@ -17,23 +17,31 @@ Control scheme:
|
||||
general
|
||||
focus image
|
||||
-- tap/click - -
|
||||
|
||||
left image
|
||||
left swipe right + -
|
||||
left,bksp,<,p swipe right + -
|
||||
right image
|
||||
right swipe left + -
|
||||
right,space,>,n swipe left + -
|
||||
up image
|
||||
up -- (via focus image) ?? -
|
||||
up - (via focus image) ?? -
|
||||
down image
|
||||
down -- (via focus image) ?? -
|
||||
down - (via focus image) ?? -
|
||||
|
||||
skip 10 left
|
||||
?? - - -
|
||||
skip 10 right
|
||||
?? - - -
|
||||
|
||||
first image
|
||||
home -- ?? -
|
||||
home - ?? -
|
||||
last image
|
||||
end -- ?? -
|
||||
end - ?? -
|
||||
|
||||
shift up
|
||||
s-up swipe up + -
|
||||
shift down
|
||||
s-down swipe down + -
|
||||
|
||||
shift up, new ribbon
|
||||
c-s-up ?? ?? ??
|
||||
shift down, new ribbon
|
||||
@ -42,36 +50,38 @@ Control scheme:
|
||||
drag view
|
||||
-- tap-drag - -
|
||||
move view left
|
||||
?? ?? ?? ??
|
||||
h - - -
|
||||
move view right
|
||||
?? ?? ?? ??
|
||||
l - - -
|
||||
move view up
|
||||
?? ?? ?? ??
|
||||
k - - -
|
||||
move view down
|
||||
?? ?? ?? ??
|
||||
j - - -
|
||||
|
||||
center current image
|
||||
?? ?? ?? ??
|
||||
|
||||
zoom in
|
||||
+ pinch spread - -
|
||||
+ pinch spread + -
|
||||
zoom out
|
||||
- pinch closeup - -
|
||||
- pinch closeup + -
|
||||
fit one
|
||||
1 tap current image - -
|
||||
|
||||
toggle single image mode
|
||||
?? ?? - -
|
||||
Enter ?? + -
|
||||
toggle slideshow mode
|
||||
?? ?? - -
|
||||
|
||||
keyboard help
|
||||
?? ?? - -
|
||||
settings
|
||||
?? ?? - -
|
||||
ribbon-specific
|
||||
fit three
|
||||
3 ?? - -
|
||||
3 ?? + -
|
||||
broad view
|
||||
?? ?? - -
|
||||
?? ?? + -
|
||||
single-specific
|
||||
|
||||
.
|
||||
|
||||
@ -37,12 +37,20 @@ function setupControlElements(){
|
||||
$(".image").click(setCurrentImage)
|
||||
|
||||
// buttons...
|
||||
$('.next-image').click(nextImage)
|
||||
$('.prev-image').click(prevImage)
|
||||
$('.demote').click(shiftImageUp)
|
||||
$('.promote').click(shiftImageDown)
|
||||
$('.toggle-wide').click(toggleWideView)
|
||||
$('.toggle-single').click(toggleSingleImageMode)
|
||||
$('.screen-button.next-image').click(nextImage)
|
||||
$('.screen-button.prev-image').click(prevImage)
|
||||
$('.screen-button.demote').click(shiftImageUp)
|
||||
$('.screen-button.promote').click(shiftImageDown)
|
||||
|
||||
$('.screen-button.zoom-in').click(function(){scaleContainerBy(ZOOM_FACTOR)})
|
||||
$('.screen-button.zoom-out').click(function(){scaleContainerBy(1/ZOOM_FACTOR)})
|
||||
|
||||
$('.screen-button.toggle-wide').click(toggleWideView)
|
||||
$('.screen-button.toggle-single').click(toggleSingleImageMode)
|
||||
|
||||
$('.screen-button.fit-three').click(fitThreeImages)
|
||||
|
||||
$('.screen-button.settings').click(function(){alert('not implemented yet...')})
|
||||
}
|
||||
|
||||
|
||||
@ -111,7 +119,7 @@ var ZOOM_FACTOR = 2
|
||||
// XXX need to make this handle modifiers gracefully...
|
||||
var keys = {
|
||||
toggleHelp: [72],
|
||||
toggleSingleImageMode: [70],
|
||||
toggleSingleImageMode: [70, 13], // ???, Enter
|
||||
close: [27, 88, 67],
|
||||
|
||||
// zooming...
|
||||
@ -256,9 +264,10 @@ function toggleSingleImageMode(){
|
||||
// wide view mode toggle...
|
||||
function toggleWideView(){
|
||||
if($('.wide-view-mode').length > 0){
|
||||
setContainerScale(1)
|
||||
setContainerScale(ORIGINAL_FIELD_SCALE)
|
||||
$('.viewer').removeClass('wide-view-mode')
|
||||
} else {
|
||||
ORIGINAL_FIELD_SCALE = getElementScale($('.field'))
|
||||
setContainerScale(0.1)
|
||||
$('.viewer').addClass('wide-view-mode')
|
||||
}
|
||||
|
||||
@ -65,12 +65,15 @@
|
||||
}
|
||||
|
||||
|
||||
.promote, .next-image, .prev-image, .demote, .toggle-wide, .toggle-single {
|
||||
.screen-button {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
height: 125px;
|
||||
|
||||
/* coloring is temporary... */
|
||||
background: gray;
|
||||
color: silver;
|
||||
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
@ -80,15 +83,20 @@
|
||||
}
|
||||
|
||||
|
||||
.next-image, .prev-image, .toggle-wide, .toggle-single {
|
||||
.next-image, .prev-image, .toggle-wide, .toggle-single, .zoom-in, .settings, .toggle-wide {
|
||||
/* coloring is temporary... */
|
||||
background: silver;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
|
||||
.toggle-wide, .toggle-single {
|
||||
height:50px
|
||||
.toggle-single, .fit-three, .zoom-in, .zoom-out {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.settings, .toggle-wide {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.promote {
|
||||
}
|
||||
|
||||
@ -12,11 +12,6 @@
|
||||
<script src="jquery-ui-1.8.22.custom.min.js"></script>
|
||||
|
||||
<script src="jquery.touchSwipe.js"></script>
|
||||
<!-- script src="jquery.wipetouch.js"></script-->
|
||||
<!-- XXX this does not work on android... -->
|
||||
<!-- script src="jquery.gestures.js"></script-->
|
||||
<!-- XXX need to figure out how to disable all the bling -->
|
||||
<!-- script src="jquery.mobile.js"></script-->
|
||||
|
||||
<!-- XXX STUB -->
|
||||
<script src="images.js"></script>
|
||||
@ -68,10 +63,12 @@ $(document).ready(setup);
|
||||
|
||||
<div class="viewer">
|
||||
<div class="controller">
|
||||
<div class="demote">^</div>
|
||||
<div class="prev-image"><</div>
|
||||
<div class="promote">v</div>
|
||||
<div class="toggle-single">[ ]</div>
|
||||
<div class="screen-button demote">^</div>
|
||||
<div class="screen-button prev-image"><</div>
|
||||
<div class="screen-button promote">v</div>
|
||||
<div class="screen-button toggle-single">[ ]</div>
|
||||
<div class="screen-button fit-three">ooo</div>
|
||||
<div class="screen-button settings">settings</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="field">
|
||||
@ -85,10 +82,12 @@ $(document).ready(setup);
|
||||
<div class="v-marker"></div>
|
||||
</div>
|
||||
<div class="controller">
|
||||
<div class="demote">^</div>
|
||||
<div class="next-image">></div>
|
||||
<div class="promote">v</div>
|
||||
<div class="toggle-wide">+/-</div>
|
||||
<div class="screen-button demote">^</div>
|
||||
<div class="screen-button next-image">></div>
|
||||
<div class="screen-button promote">v</div>
|
||||
<div class="screen-button zoom-in">+</div>
|
||||
<div class="screen-button zoom-out">-</div>
|
||||
<div class="screen-button toggle-wide">...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user