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

added app state/settings and some minor bugs squashed...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-05-24 00:09:13 +04:00
parent 8e06a5a3f2
commit 6df9184afe
5 changed files with 62 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui/base.js
View File

@ -897,13 +897,14 @@ function flipHorizontal(image){
function fitNImages(n){
var image = $('.current.image')
var size = image.outerHeight(true)
var w = image.outerWidth(true)
var h = image.outerHeight(true)
var viewer = $('.viewer')
var W = viewer.innerWidth()
var H = viewer.innerHeight()
var scale = Math.min(W / (size * n), H / size)
var scale = Math.min(W / (w * n), H / h)
// NOTE: if animating, the next two likes must be animated together...
setElementScale($('.ribbon-set'), scale)
@ -916,14 +917,16 @@ function fitNImages(n){
// NOTE: here we measure image height as width may change depending on
// proportions...
function zoomIn(){
var w = getScreenWidthInImages(getVisibleImageSize('height'))
//var w = getScreenWidthInImages(getVisibleImageSize('height'))
var w = getScreenWidthInImages()
if(w > 1){
w = w / ZOOM_SCALE
fitNImages(w >= 1 ? w : 1)
}
}
function zoomOut(){
var w = getScreenWidthInImages(getVisibleImageSize('height'))
//var w = getScreenWidthInImages(getVisibleImageSize('height'))
var w = getScreenWidthInImages()
if(w <= MAX_SCREEN_IMAGES){
w = w * ZOOM_SCALE
fitNImages(w <= MAX_SCREEN_IMAGES ? w : MAX_SCREEN_IMAGES)

4
ui/data.js
View File

@ -62,6 +62,10 @@ var MARKED = []
var IMAGE_CACHE = []
var SETTINGS = {
'theme': null,
'screen-images-ribbon-mode': null,
'screen-images-single-image-mode': null,
'single-image-mode-proportions': null,
}

29
ui/index.html
View File

@ -202,33 +202,34 @@ body {
.marks-visible.viewer:after {
display: block;
position: absolute;
content: "Marks visible";
font-size: 11pt;
border: none;
color: blue;
width: auto;
height: auto;
content: "";
font-size: 0pt;
top: 10px;
right: 10px;
width: 10px;
height: 10px;
border: solid 2px blue;
border-radius: 50%;
background: blue;
}
.marked-only-view.viewer:after {
display: block;
position: absolute;
content: "Showing marked images only";
font-size: 11pt;
border: none;
color: blue;
width: auto;
height: auto;
content: "";
font-size: 0pt;
top: 10px;
right: 10px;
width: 10px;
height: 10px;
border: solid 2px blue;
border-radius: 50%;
background: transparent;
}
.marked-only-view.marks-visible.viewer:after {
content: "Showing marked images only (marks visible)";
background: blue;
}
/* XXX should we use opacity??? */

5
ui/keybindings3.js
View File

@ -172,7 +172,7 @@ var KEYBOARD_CONFIG = {
},
L: doc('Rotate image left', function(){ rotateLeft() }),
R: doc('Rotate image left', function(){ rotateRight() }),
R: doc('Rotate image right', function(){ rotateRight() }),
// zooming...
@ -265,9 +265,12 @@ var KEYBOARD_CONFIG = {
var gid = getImageGID($('.current.image'))
var r = getRibbonIndex(getRibbon())
var data = IMAGES[gid]
var orientation = data.orientation
orientation = orientation == null ? 0 : orientation
var order = DATA.order.indexOf(gid)
var name = data.path.split('/').pop()
alert('"'+ name +'"\n'+
'Orientation: '+ orientation +'deg\n'+
'GID: '+ gid +'\n'+
'Path: "'+ data.path +'"\n'+
'Order: '+ order +'\n'+

34
ui/modes.js
View File

@ -13,13 +13,39 @@
var toggleSingleImageMode = createCSSClassToggler('.viewer',
'single-image-mode',
function(action){
var w = getScreenWidthInImages()
// single image mode...
if(action == 'on'){
TRANSITION_MODE_DEFAULT = 'css'
fitNImages(1)
// save things...
SETTINGS['screen-images-ribbon-mode'] = w
// load things...
w = SETTINGS['screen-images-single-image-mode']
w = w == null ? 1 : w
var p = SETTINGS['single-image-mode-proportions']
p = p == null ? 'square' : p
// set stuff...
toggleImageProportions(p)
fitNImages(w)
// ribbon mode...
} else {
TRANSITION_MODE_DEFAULT = 'animate'
// save things...
SETTINGS['screen-images-single-image-mode'] = w
SETTINGS['single-image-mode-proportions'] = toggleImageProportions('?')
// load things...
w = SETTINGS['screen-images-ribbon-mode']
w = w == null ? DEFAULT_SCREEN_IMAGES : w
toggleImageProportions('square')
fitNImages(DEFAULT_SCREEN_IMAGES)
fitNImages(w)
}
})
@ -128,6 +154,7 @@ var toggleKeyboardHelp = createCSSClassToggler('.viewer', 'help-mode overlay',
// off...
} else {
// things to cleanup...
var _cleanup = function(){
$('.keyboard-help').remove()
$('.viewer').removeClass('overlay')
@ -135,11 +162,14 @@ var toggleKeyboardHelp = createCSSClassToggler('.viewer', 'help-mode overlay',
win.off('scroll', scroll_handler)
}
// animate things if we are not at the top...
if(body.scrollTop() > 0){
body
.animate({
scrollTop: 0,
}, _cleanup)
// if we are at the top do things fast...
} else {
_cleanup()
}