mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 18:30:09 +00:00
cleanup + found an odd bug -- toggleSingleImageModeTransitions at first toggles oddly (bad context mirroring?)...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
de391f135b
commit
7dad2dcc53
@ -114,7 +114,9 @@ Priority work
|
||||
[X] 100% actions
|
||||
[X] bug: shifting up to new ribbon pushes the current row down...
|
||||
| before starting on a fix, need to cleanup the code from old hacks and workarounds...
|
||||
[_] 28% Preview II (optional features)
|
||||
[_] 26% Preview II (optional features)
|
||||
[_] make keyboeard handler mode-aware...
|
||||
| this is needed to disable navigation keys in setup-mode, for example...
|
||||
[_] slideshow...
|
||||
[_] 50% serialization/deserialization
|
||||
[X] JSON loader/unloader
|
||||
|
||||
@ -74,7 +74,7 @@ function setup(){
|
||||
|
||||
// XXX get the timing right
|
||||
// XXX fire this when all is done, via an event...
|
||||
$('.overlay').delay(500).fadeOut(700)
|
||||
$('.splash').delay(500).fadeOut(700)
|
||||
}
|
||||
$(document).ready(setup);
|
||||
|
||||
@ -88,13 +88,19 @@ $(document).ready(setup);
|
||||
</head>
|
||||
<body>
|
||||
<div class="viewer no-single-image-transitions">
|
||||
<div class="overlay">
|
||||
<div class="splash">
|
||||
<!-- XXX replace this with a background-image logo... -->
|
||||
<table width="100%" height="100%"><tr><td align="center" valign="middle">
|
||||
<big><b>ImageGrid</b></big><br>
|
||||
<small><i>loading...</i></small>
|
||||
</td></tr></table>
|
||||
</div>
|
||||
<div class="overlay">
|
||||
<div class="background">
|
||||
</div>
|
||||
<div class="content">
|
||||
</div>
|
||||
</div>
|
||||
<div class="controller-mini left">
|
||||
<div class="screen-button show-controls">*</div>
|
||||
<div class="screen-button"></div>
|
||||
|
||||
@ -113,22 +113,23 @@ ImageGrid.TYPE('toggle', function(obj){
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
function showInOverlay(obj){
|
||||
// clean things up...
|
||||
$('.overlay').children().remove()
|
||||
|
||||
|
||||
$('.overlay .content').children().remove()
|
||||
// put it in the overlay...
|
||||
$('.overlay').append(obj)
|
||||
|
||||
$('.overlay .content').append(obj)
|
||||
// prepare the overlay...
|
||||
$('.overlay')
|
||||
.one('click', function(){
|
||||
$('.overlay')
|
||||
.fadeOut()
|
||||
.fadeOut(function(){
|
||||
$('.overlay .content')
|
||||
.children()
|
||||
.remove()
|
||||
})
|
||||
})
|
||||
.fadeIn()
|
||||
return obj
|
||||
}
|
||||
@ -1026,10 +1027,10 @@ function toggleBackgroundModes(){
|
||||
|
||||
|
||||
|
||||
//var toggleSingleImageModeTransitions = createCSSClassToggler('.viewer', 'no-single-image-transitions')
|
||||
// XXX for some reason this is backwords... (says 'on' when it's off ans 'off' when on)
|
||||
ImageGrid.ACTION({
|
||||
id: 'toggleSingleImageModeTransitions',
|
||||
title: 'Single image mode transitions',
|
||||
title: 'Disable single image mode transitions',
|
||||
doc: 'Toggle transitions in single image mode.',
|
||||
group: 'Mode: Single Image',
|
||||
type: 'toggle',
|
||||
@ -1037,7 +1038,6 @@ ImageGrid.ACTION({
|
||||
})
|
||||
|
||||
|
||||
//var toggleControls = createCSSClassToggler('.viewer', 'hidden-controls')
|
||||
ImageGrid.ACTION({
|
||||
id: 'toggleControls',
|
||||
title: 'Keyboard interface',
|
||||
@ -1048,7 +1048,6 @@ ImageGrid.ACTION({
|
||||
})
|
||||
|
||||
|
||||
//var toggleTransitions = createCSSClassToggler('.viewer', 'transitions-enabled')
|
||||
ImageGrid.ACTION({
|
||||
id: 'toggleTransitions',
|
||||
title: 'Global transitions',
|
||||
|
||||
@ -1,23 +1,44 @@
|
||||
.overlay {
|
||||
.overlay, .splash {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
z-index: 9000;
|
||||
}
|
||||
.overlay {
|
||||
display: none;
|
||||
}
|
||||
.splash {
|
||||
color: gray;
|
||||
background-color: white;
|
||||
opacity: 1.0;
|
||||
}
|
||||
.overlay .background, .overlay .content {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: gray;
|
||||
|
||||
opacity: 1.0;
|
||||
|
||||
z-index: 9000;
|
||||
|
||||
text-align: center:
|
||||
}
|
||||
.overlay .background {
|
||||
background-color: white;
|
||||
opacity: 0.5;
|
||||
z-index: 9000;
|
||||
}
|
||||
|
||||
.overlay .content {
|
||||
overflow: auto;
|
||||
opacity: 0.9;
|
||||
z-index: 9010;
|
||||
}
|
||||
|
||||
.overlay * {
|
||||
.overlay *, .splash * {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
@ -29,6 +50,7 @@
|
||||
padding: 20px;
|
||||
margin: 5px;
|
||||
border: solid 1px silver;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.options .option {
|
||||
@ -253,15 +275,21 @@
|
||||
|
||||
|
||||
/* dark background */
|
||||
.dark.viewer, .dark .overlay {
|
||||
.dark.viewer, .dark .splash {
|
||||
background-color: rgb(32, 32, 32);
|
||||
}
|
||||
|
||||
|
||||
.dark .overlay * {
|
||||
.dark .overlay *, .dark .splash * {
|
||||
color: silver;
|
||||
}
|
||||
|
||||
.dark .overlay .options, .dark .overlay .background {
|
||||
background-color: rgb(32, 32, 32);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.dark .screen-button {
|
||||
color: silver;
|
||||
@ -278,14 +306,18 @@
|
||||
|
||||
|
||||
/* black background */
|
||||
.black.viewer, .black .overlay {
|
||||
.black.viewer, .black .splash {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.black .overlay * {
|
||||
.black .overlay *, .black .splash * {
|
||||
color: silver;
|
||||
}
|
||||
|
||||
.black .overlay .options, .black .overlay .background {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
|
||||
.black .screen-button {
|
||||
color: white;
|
||||
|
||||
@ -71,7 +71,7 @@ function setup(){
|
||||
|
||||
// XXX get the timing right
|
||||
// XXX fire this when all is done, via an event...
|
||||
$('.overlay').delay(500).fadeOut(700)
|
||||
$('.splash').delay(500).fadeOut(700)
|
||||
}
|
||||
$(document).ready(setup);
|
||||
|
||||
@ -83,13 +83,19 @@ $(document).ready(setup);
|
||||
</style>
|
||||
|
||||
<div class="viewer no-single-image-transitions">
|
||||
<div class="overlay">
|
||||
<div class="splash">
|
||||
<!-- XXX replace this with a background-image logo... -->
|
||||
<table width="100%" height="100%"><tr><td align="center" valign="middle">
|
||||
<big><b>ImageGrid</b></big><br>
|
||||
<small><i>overlay...</i></small>
|
||||
<small><i>loading...</i></small>
|
||||
</td></tr></table>
|
||||
</div>
|
||||
<div class="overlay">
|
||||
<div class="background">
|
||||
</div>
|
||||
<div class="content">
|
||||
</div>
|
||||
</div>
|
||||
<div class="controller-mini left">
|
||||
<div class="screen-button show-controls">*</div>
|
||||
<div class="screen-button"></div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user