flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-11-02 04:10:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

added start/end indicators...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-05-03 19:24:06 +04:00
parent 7228900207
commit 2e5b7c6bc8
2 changed files with 49 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
ui/ImageGrid.js
View File

@ -28,7 +28,13 @@
function flashIndicator(direction){ function flashIndicator(direction){
$(direction == 'prev' ? '.up-indicator' : '.down-indicator') $({
prev: '.up-indicator',
next: '.down-indicator',
// XXX not implemented yet...
start: '.start-indicator',
end: '.end-indicator',
}[direction])
// NOTE: this needs to be visible in all cases and key press // NOTE: this needs to be visible in all cases and key press
// rhythms... // rhythms...
.show() .show()
@ -532,14 +538,24 @@ function nextImage(n, mode){
mode = mode == null ? NAV_DEFAULT : mode mode = mode == null ? NAV_DEFAULT : mode
n = n == null ? 1 : n n = n == null ? 1 : n
var target = $('.current.image').nextAll('.image' + mode) var target = $('.current.image').nextAll('.image' + mode)
target = target.length < n ? target.last() : target.eq(n-1) if(target.length < n){
target = target.last()
flashIndicator('end')
} else {
target = target.eq(n-1)
}
return centerImage(focusImage(target)) return centerImage(focusImage(target))
} }
function prevImage(n, mode){ function prevImage(n, mode){
mode = mode == null ? NAV_DEFAULT : mode mode = mode == null ? NAV_DEFAULT : mode
n = n == null ? 1 : n n = n == null ? 1 : n
var target = $('.current.image').prevAll('.image' + mode) var target = $('.current.image').prevAll('.image' + mode)
target = target.length < n ? target.last() : target.eq(n-1) if(target.length < n){
target = target.last()
flashIndicator('start')
} else {
target = target.eq(n-1)
}
return centerImage(focusImage(target)) return centerImage(focusImage(target))
} }
function nextScreenImages(mode){ function nextScreenImages(mode){
@ -548,14 +564,22 @@ function nextScreenImages(mode){
function prevScreenImages(mode){ function prevScreenImages(mode){
return prevImage(Math.round(getScreenWidthInImages()), mode) return prevImage(Math.round(getScreenWidthInImages()), mode)
} }
// XXX revise...
function firstImage(mode){ function firstImage(mode){
mode = mode == null ? NAV_DEFAULT : mode mode = mode == null ? NAV_DEFAULT : mode
if($('.current.image').prevAll('.image' + mode).length == 0){
flashIndicator('start')
}
return centerImage( return centerImage(
focusImage( focusImage(
$('.current.image').closest('.ribbon').find('.image').filter(mode).first())) $('.current.image').closest('.ribbon').find('.image').filter(mode).first()))
} }
// XXX revise...
function lastImage(mode){ function lastImage(mode){
mode = mode == null ? NAV_DEFAULT : mode mode = mode == null ? NAV_DEFAULT : mode
if($('.current.image').nextAll('.image' + mode).length == 0){
flashIndicator('end')
}
return centerImage( return centerImage(
focusImage( focusImage(
$('.current.image').closest('.ribbon').find('.image').filter(mode).last())) $('.current.image').closest('.ribbon').find('.image').filter(mode).last()))

25
ui/index.html
View File

@ -142,7 +142,9 @@
.up-indicator, .up-indicator,
.down-indicator { .down-indicator,
.start-indicator,
.end-indicator {
display: block; display: block;
position: absolute; position: absolute;
content: ""; content: "";
@ -183,10 +185,25 @@
top: -25px; top: -25px;
bottom: auto; bottom: auto;
} }
.start-indicator,
.end-indicator {
left: 0px;
width: 10px;
height: 100%;
margin: 0px;
background: yellow;
}
.end-indicator {
left: auto;
right: 0px;
}
/* default state */ /* default state */
.up-indicator, .up-indicator,
.down-indicator { .down-indicator,
display: none .start-indicator,
.end-indicator {
display: none;
} }
@ -312,6 +329,8 @@ Populated
<!-- XXX should these be here??? --> <!-- XXX should these be here??? -->
<div class="up-indicator"></div> <div class="up-indicator"></div>
<div class="down-indicator"></div> <div class="down-indicator"></div>
<div class="start-indicator"></div>
<div class="end-indicator"></div>
</div> </div>