mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 11:20:09 +00:00
tweaking image rotation...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
eebd7dac37
commit
62c4f50159
@ -1,11 +1,11 @@
|
||||
[_] 20% Gen 3 current todo
|
||||
[_] 40% High priority
|
||||
[_] 21% Gen 3 current todo
|
||||
[_] 43% High priority
|
||||
[_] ASAP: account for image rotation with screen proportions while positioning
|
||||
| getRelativeVisualPosition(...) gives an odd position when:
|
||||
| - image is rotated
|
||||
| - image is screen-proportioned
|
||||
[_] ASAP: support relative paths in cache...
|
||||
[_] ASAP: load/view un-cached directories...
|
||||
[_] ASAP: rotate images in the viewer...
|
||||
| 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
|
||||
@ -61,6 +61,10 @@
|
||||
[_] thresholds and frame size
|
||||
[_] remove extra and repetitive actions
|
||||
[_] caching config
|
||||
[X] ASAP: rotate images in the viewer...
|
||||
| This is a tad complicated by:
|
||||
| - marks
|
||||
| - image elem proportions that can change
|
||||
[X] 100% themes
|
||||
[X] light
|
||||
[X] gray
|
||||
|
||||
60
ui/base.js
60
ui/base.js
@ -164,6 +164,7 @@ function getImageGID(image){
|
||||
// NOTE: if used during an animation/transition this will give the
|
||||
// position at the exact frame of the animation, this might not be
|
||||
// the desired "final" data...
|
||||
// XXX account for rotated images...
|
||||
function getRelativeVisualPosition(outer, inner){
|
||||
outer = $(outer).offset()
|
||||
inner = $(inner).offset()
|
||||
@ -800,29 +801,68 @@ var ccw = {
|
||||
270: 180,
|
||||
}
|
||||
|
||||
// XXX need to account for proportions...
|
||||
function rotateImage(direction, image){
|
||||
var r_table = direction == 'Left' ? cw : ccw
|
||||
image = image == null ? $('.current.image') : $(image)
|
||||
image.each(function(i, e){
|
||||
var img = $(this)
|
||||
var o = img.attr('orientation')
|
||||
img.attr('orientation', r_table[o])
|
||||
// XXX need to make this statically stable...
|
||||
function correctImageProportionsForRotation(image, direction){
|
||||
direction = direction == null ? 'static' : direction
|
||||
var viewer = $('.viewer')
|
||||
var W = viewer.innerWidth()
|
||||
var H = viewer.innerHeight()
|
||||
|
||||
$(image).each(function(i, e){
|
||||
var image = $(this)
|
||||
var o = image.attr('orientation')
|
||||
o = o == null ? 0 : o
|
||||
// XXX account for proportions...
|
||||
/*
|
||||
//var w = image.css('width')
|
||||
//var h = image.css('height')
|
||||
var w = image.outerWidth()
|
||||
var h = image.outerHeight()
|
||||
|
||||
if(w != h){
|
||||
|
||||
console.log('>>>', W/H, w/h )
|
||||
|
||||
// when the image is turned 90deg/270deg and its
|
||||
// proportions are the same as the screen...
|
||||
if((o == 90 || o == 270) && Math.abs(W/H - w/h) < 0.005 ){
|
||||
image.css({
|
||||
width: h,
|
||||
height: w,
|
||||
})
|
||||
image.css({
|
||||
'margin-top': -((w - h)/2),
|
||||
'margin-bottom': -((w - h)/2),
|
||||
'margin-left': (w - h)/2,
|
||||
'margin-right': (w - h)/2,
|
||||
})
|
||||
} else if((o == 0 || o == 180) && Math.abs(W/H - w/h) > 0.005 ){
|
||||
image.css({
|
||||
width: h,
|
||||
height: w,
|
||||
})
|
||||
image.css({
|
||||
'margin': '',
|
||||
})
|
||||
}
|
||||
*/
|
||||
|
||||
} else {
|
||||
image.css({
|
||||
'margin': '',
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function rotateImage(direction, image){
|
||||
var r_table = direction == 'left' ? cw : ccw
|
||||
image = image == null ? $('.current.image') : $(image)
|
||||
image.each(function(i, e){
|
||||
var img = $(this)
|
||||
var o = r_table[img.attr('orientation')]
|
||||
img.attr('orientation', o)
|
||||
|
||||
// account for proportions...
|
||||
correctImageProportionsForRotation(img, direction)
|
||||
})
|
||||
|
||||
$('.viewer').trigger('rotating' + direction.capitalize(), [image])
|
||||
|
||||
@ -132,7 +132,7 @@ function doc(text, func){
|
||||
* XXX need an explicit way to prioritize modes...
|
||||
* XXX check do we need did_handling here...
|
||||
*
|
||||
* XXX BUG explicitly given modes do ton yield results if the pattern
|
||||
* XXX BUG explicitly given modes do not yield results if the pattern
|
||||
* does not match...
|
||||
*/
|
||||
function getKeyHandlers(key, modifiers, keybindings, modes){
|
||||
@ -499,7 +499,6 @@ function buildKeybindingsHelpHTML(keybindings){
|
||||
var doc = buildKeybindingsHelp(keybindings)
|
||||
|
||||
var res = '<table class="keyboard-help">'
|
||||
|
||||
for(var mode in doc){
|
||||
if(mode == 'doc'){
|
||||
continue
|
||||
|
||||
10
ui/modes.js
10
ui/modes.js
@ -38,6 +38,7 @@ var toggleTheme = createCSSClassToggler('.viewer',
|
||||
// XXX should we use the createCSSClassToggler for this?
|
||||
// XXX revise: does extra stuff...
|
||||
function toggleImageProportions(mode){
|
||||
// normal images...
|
||||
var image = $('.image')
|
||||
var h = image.outerHeight(true)
|
||||
var w = image.outerWidth(true)
|
||||
@ -52,6 +53,10 @@ function toggleImageProportions(mode){
|
||||
width: size,
|
||||
height: size
|
||||
})
|
||||
|
||||
// account for rotation...
|
||||
correctImageProportionsForRotation(image)
|
||||
|
||||
centerView(null, 'css')
|
||||
return 'square'
|
||||
|
||||
@ -66,9 +71,14 @@ function toggleImageProportions(mode){
|
||||
} else {
|
||||
image.css('height', H * w/W)
|
||||
}
|
||||
|
||||
// account for rotation...
|
||||
correctImageProportionsForRotation(image)
|
||||
|
||||
centerView(null, 'css')
|
||||
return 'viewer'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user