mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 03:10:07 +00:00
made the help a mode, some cleanup and minor refactoring...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
32e259a2ff
commit
98349d869e
@ -313,15 +313,18 @@ body {
|
||||
|
||||
|
||||
/* this is for sliding stuff */
|
||||
.viewer {
|
||||
.viewer.help-mode {
|
||||
box-shadow: 0px 0px 50px 0px silver;
|
||||
}
|
||||
|
||||
/* help */
|
||||
.keyboard-help {
|
||||
margin: 20px;
|
||||
width: 80%;
|
||||
margin-top: 20px;
|
||||
margin-left: 15%;
|
||||
margin-right: 5%;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.keyboard-help .section-doc {
|
||||
font-size: small;
|
||||
vertical-align: top;
|
||||
@ -341,6 +344,11 @@ body {
|
||||
color: gray;
|
||||
font-style: italic;
|
||||
padding-right: 20px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.keyboard-help .section-doc td:only-child {
|
||||
padding-right: 0px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -26,18 +26,28 @@ var KEYBOARD_CONFIG = {
|
||||
toggleImageProportions()
|
||||
centerRibbons()
|
||||
}),
|
||||
Esc: doc('Exit single image mode',
|
||||
function(){ toggleSingleImageMode('off') }),
|
||||
Q: 'Esc',
|
||||
},
|
||||
|
||||
'.overlay:visible':{
|
||||
title: 'Overlay',
|
||||
|
||||
'.help-mode':{
|
||||
title: 'Help',
|
||||
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()
|
||||
}),
|
||||
|
||||
Esc: doc('Close help',
|
||||
function(){ toggleKeyboardHelp('off') }),
|
||||
H: 'Esc',
|
||||
Q: 'Esc',
|
||||
// '?'
|
||||
'/': {
|
||||
shift: 'Esc',
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
// general setup...
|
||||
'.viewer:not(.overlay)': {
|
||||
@ -287,67 +297,8 @@ var KEYBOARD_CONFIG = {
|
||||
|
||||
F4: doc('Open image in external software', openImage),
|
||||
|
||||
// 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)
|
||||
.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)
|
||||
})
|
||||
}),
|
||||
},
|
||||
H: doc('Show keyboard bindings',
|
||||
function(){ toggleKeyboardHelp() }),
|
||||
// '?'
|
||||
'/': {
|
||||
shift: 'H',
|
||||
|
||||
66
ui/modes.js
66
ui/modes.js
@ -72,6 +72,72 @@ function toggleImageProportions(mode){
|
||||
}
|
||||
|
||||
|
||||
var toggleKeyboardHelp = createCSSClassToggler('.viewer', 'help-mode overlay',
|
||||
function(action){
|
||||
var body = $(document.body)
|
||||
var win = $(window)
|
||||
|
||||
// on...
|
||||
if(action == 'on'){
|
||||
// remove helo when we scroll to the top...
|
||||
var scroll_handler = function(){
|
||||
if(body.scrollTop() <= 0){
|
||||
toggleKeyboardHelp('off')
|
||||
}
|
||||
}
|
||||
|
||||
// prepare and cleanup...
|
||||
$('.keyboard-help').remove()
|
||||
$('.viewer').addClass('overlay')
|
||||
|
||||
// build the help...
|
||||
var doc = buildKeybindingsHelpHTML(KEYBOARD_CONFIG)
|
||||
.css({
|
||||
cursor: 'hand',
|
||||
})
|
||||
.appendTo(body)
|
||||
|
||||
// add exit by click...
|
||||
body
|
||||
.one('click', function(){
|
||||
toggleKeyboardHelp('off')
|
||||
})
|
||||
|
||||
// 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(){
|
||||
win
|
||||
.on('scroll', scroll_handler)
|
||||
})
|
||||
|
||||
// off...
|
||||
} else {
|
||||
var _cleanup = function(){
|
||||
$('.keyboard-help').remove()
|
||||
$('.viewer').removeClass('overlay')
|
||||
body.click()
|
||||
win.off('scroll', scroll_handler)
|
||||
}
|
||||
|
||||
if(body.scrollTop() > 0){
|
||||
body
|
||||
.animate({
|
||||
scrollTop: 0,
|
||||
}, _cleanup)
|
||||
} else {
|
||||
_cleanup()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
/**********************************************************************
|
||||
* vim:set ts=4 sw=4 : */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user