mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 11:20:09 +00:00
added keyboard help...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
02eaae8cc4
commit
32e259a2ff
@ -6,6 +6,7 @@
|
||||
| This is a tad complicated by:
|
||||
| - marks
|
||||
| - image elem proportions that can change
|
||||
[_] ASAP: import fav dirs...
|
||||
[_] BUG: sometimes duplicate images get loaded...
|
||||
| this happens when jumping back and forth on the mid ribbon until
|
||||
| the last element shows up and then moving left until the frame
|
||||
|
||||
@ -272,19 +272,77 @@ body {
|
||||
|
||||
/* XXX this is by no means final... */
|
||||
.viewer,
|
||||
.light.viewer {
|
||||
.light.viewer,
|
||||
.light.viewer .overlay-block .background {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.gray.viewer {
|
||||
.gray.viewer,
|
||||
.gray.viewer .overlay-block .background {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.dark.viewer {
|
||||
.dark.viewer,
|
||||
.dark.viewer .overlay-block .background {
|
||||
background: #0a0a0a;
|
||||
}
|
||||
|
||||
|
||||
/* Overlay */
|
||||
.overlay-block {
|
||||
display: none;
|
||||
position: absolute:
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.viewer.overlay .overlay-block {
|
||||
display: block;
|
||||
}
|
||||
.overlay-block .content {
|
||||
}
|
||||
.overlay-block .background {
|
||||
position: absolute:
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
|
||||
/* this is for sliding stuff */
|
||||
.viewer {
|
||||
box-shadow: 0px 0px 50px 0px silver;
|
||||
}
|
||||
|
||||
/* help */
|
||||
.keyboard-help {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.keyboard-help .section-doc {
|
||||
font-size: small;
|
||||
vertical-align: top;
|
||||
font-style: italic;
|
||||
}
|
||||
.keyboard-help th {
|
||||
text-align: left;
|
||||
height: 50px;
|
||||
vertical-align: bottom;
|
||||
border-bottom: solid gray 1px;
|
||||
}
|
||||
.keyboard-help tr:hover {
|
||||
background: #eee;
|
||||
vertical-align: top;
|
||||
}
|
||||
.keyboard-help tr td:first-child {
|
||||
color: gray;
|
||||
font-style: italic;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@ -376,8 +434,6 @@ $(function(){
|
||||
updateImages()
|
||||
})
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
@ -424,6 +480,10 @@ Populated
|
||||
<div class="down-indicator"></div>
|
||||
<div class="start-indicator"></div>
|
||||
<div class="end-indicator"></div>
|
||||
<div class="overlay-block">
|
||||
<div class="background"></div>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@ -28,8 +28,19 @@ var KEYBOARD_CONFIG = {
|
||||
}),
|
||||
},
|
||||
|
||||
'.overlay:visible':{
|
||||
title: 'Overlay',
|
||||
doc: 'NOTE: In this mode all other key bindings are disabled, except '+
|
||||
'the ones explicitly defined here.',
|
||||
ignore: '*',
|
||||
Esc: doc('Close overlay',
|
||||
function(){
|
||||
$('.overlay').click()
|
||||
}),
|
||||
},
|
||||
|
||||
// general setup...
|
||||
'.viewer': {
|
||||
'.viewer:not(.overlay)': {
|
||||
title: 'Global',
|
||||
|
||||
// Navigation...
|
||||
@ -141,7 +152,7 @@ var KEYBOARD_CONFIG = {
|
||||
shiftImageDown(null, DIRECTION)
|
||||
centerRibbons()
|
||||
}),
|
||||
'ctrl+shift': doc('Shift image up to empty ribbon',
|
||||
'ctrl+shift': doc('Shift image down to empty ribbon',
|
||||
function(){
|
||||
event.preventDefault()
|
||||
shiftImageDownNewRibbon(null, DIRECTION)
|
||||
@ -276,15 +287,71 @@ var KEYBOARD_CONFIG = {
|
||||
|
||||
F4: doc('Open image in external software', openImage),
|
||||
|
||||
// XXX STUB print this in an overlay...
|
||||
// '?'
|
||||
'/': {
|
||||
shift: doc('Show keyboard bindings',
|
||||
// XXX make this generic...
|
||||
H: {
|
||||
default: doc('Show keyboard bindings',
|
||||
function(){
|
||||
var body = $(document.body)
|
||||
|
||||
// remove helo when we scroll to the top...
|
||||
var scroll_handler = function(){
|
||||
if(body.scrollTop() <= 0){
|
||||
$('.keyboard-help')
|
||||
.remove()
|
||||
$('.viewer')
|
||||
.removeClass('overlay')
|
||||
body
|
||||
.click()
|
||||
$(window)
|
||||
.off('scroll', scroll_handler)
|
||||
}
|
||||
}
|
||||
|
||||
// prepare and cleanup...
|
||||
$('.keyboard-help').remove()
|
||||
$('.viewer').addClass('overlay')
|
||||
|
||||
// build the help...
|
||||
var doc = buildKeybindingsHelpHTML(KEYBOARD_CONFIG)
|
||||
alert(doc.text())
|
||||
.css({
|
||||
cursor: 'hand',
|
||||
})
|
||||
.appendTo(body)
|
||||
|
||||
// add exit by click...
|
||||
body
|
||||
.one('click', function(){
|
||||
body
|
||||
.animate({
|
||||
scrollTop: 0,
|
||||
}, function(){
|
||||
$('.keyboard-help')
|
||||
.remove()
|
||||
$('.viewer')
|
||||
.removeClass('overlay')
|
||||
$(window)
|
||||
.off('scroll', scroll_handler)
|
||||
})
|
||||
})
|
||||
|
||||
// scroll to the help...
|
||||
// NOTE: need to set the scroll handler AFTER we
|
||||
// scroll down, or it will be more of a
|
||||
// tease than a help...
|
||||
var t = getRelativeVisualPosition($('.viewer'), doc).top
|
||||
body
|
||||
.animate({
|
||||
scrollTop: Math.abs(t) - 40,
|
||||
}, function(){
|
||||
$(window)
|
||||
.on('scroll', scroll_handler)
|
||||
})
|
||||
}),
|
||||
}
|
||||
},
|
||||
// '?'
|
||||
'/': {
|
||||
shift: 'H',
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user