mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 02:10:08 +00:00
added image separators in ribbons + some refactoring...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
c885ee0bcf
commit
828e13d9d1
@ -791,6 +791,25 @@ stretching in width... */
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* image separators... */
|
||||
.ribbon-image-separators.viewer .image {
|
||||
box-shadow:
|
||||
9px 4px 0 -8px rgba(128,128,128,0.2),
|
||||
-9px 4px 0 -8px rgba(128,128,128,0.2);
|
||||
}
|
||||
.ribbon-image-separators.viewer .image[orientation="90"],
|
||||
.ribbon-image-separators.viewer .image[orientation="270"] {
|
||||
box-shadow:
|
||||
4px 9px 0 -8px rgba(128,128,128,0.2),
|
||||
4px -9px 0 -8px rgba(128,128,128,0.2);
|
||||
}
|
||||
.ribbon-image-separators.single-image-mode.viewer .image {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* default backgrounds */
|
||||
/* XXX not sure if we need these...
|
||||
.image {
|
||||
|
||||
@ -175,7 +175,7 @@ var CurrentImageIndicatorActions = actions.Actions({
|
||||
|
||||
var cur = this.ribbons.getImage(target)
|
||||
// NOTE: cur may be unloaded...
|
||||
var ribbon = this.ribbons.getRibbon(cur.length > 0 ? target : this.currentRibbon)
|
||||
var ribbon = this.ribbons.getRibbon(cur.length > 0 ? target : this.current_ribbon)
|
||||
|
||||
var marker = ribbon.find('.current-marker')
|
||||
|
||||
@ -310,12 +310,20 @@ module.CurrentImageIndicator = core.ImageGridFeatures.Feature({
|
||||
function(target, s){
|
||||
var m = this.ribbons.viewer.find('.current-marker')
|
||||
var c = this.current
|
||||
var r = this.currentRibbon
|
||||
var r = this.current_ribbon
|
||||
|
||||
// only update if marker exists and we are in current ribbon...
|
||||
if(m.length != 0
|
||||
&& (target == c
|
||||
// XXX not sure if target handling here is the
|
||||
// right way to go -- we manually check things
|
||||
// when .data.getImage(..) nad friends to this
|
||||
// better and in one spot...
|
||||
// ...the down side is that they are slower...
|
||||
&& (target == 'current'
|
||||
|| target == c
|
||||
|| target == r
|
||||
// XXX this seems to be slow enough to push
|
||||
// the frame-rate down...
|
||||
|| this.data.getRibbon(target) == r
|
||||
|| target == null)){
|
||||
m.hide()
|
||||
|
||||
@ -176,6 +176,8 @@ module.ViewerActions = actions.Actions({
|
||||
'transparent-ribbon',
|
||||
],
|
||||
|
||||
'ribbon-image-separators': 'on',
|
||||
|
||||
'ribbon-rotation-step': 10,
|
||||
|
||||
// XXX BUG: for some reason this get's shadowed by base.config...
|
||||
@ -404,6 +406,11 @@ module.ViewerActions = actions.Actions({
|
||||
function(){ return this.ribbons.viewer },
|
||||
function(){ return this.config['ribbon-themes'] },
|
||||
function(state){ this.config['ribbon-theme'] = state }) ],
|
||||
toggleRibbonImageSepators: ['Interface/Theme/Toggle ribbon image separators',
|
||||
toggler.CSSClassToggler(
|
||||
function(){ return this.ribbons.viewer },
|
||||
'ribbon-image-separators',
|
||||
function(state){ this.config['ribbon-image-separators'] = state }) ],
|
||||
|
||||
|
||||
/*
|
||||
@ -1003,6 +1010,8 @@ module.Viewer = core.ImageGridFeatures.Feature({
|
||||
&& this.toggleTheme(this.config.theme)
|
||||
this.config['ribbon-theme']
|
||||
&& this.toggleRibbonTheme(this.config['ribbon-theme'])
|
||||
this.config['ribbon-image-separators']
|
||||
&& this.toggleRibbonImageSepators(this.config['ribbon-image-separators'])
|
||||
|
||||
// center viewer on resize events...
|
||||
if(!this.__viewer_resize){
|
||||
|
||||
@ -576,12 +576,21 @@ var RibbonsPrototype = {
|
||||
//
|
||||
// XXX this might break when no images are loaded and proportions
|
||||
// are not square...
|
||||
getVisibleImageSize: function(dim, scale, img){
|
||||
getVisibleImageSize: function(dim, scale, img, force){
|
||||
dim = dim == null ? 'width' : dim
|
||||
img = img || this.viewer.find(IMAGE)
|
||||
|
||||
// if no images are loaded create one temporarily....
|
||||
var tmp
|
||||
|
||||
// // XXX size cache -- not sure if this needs to be cached...
|
||||
// var res = (this.__visible_image_size_cache || {})[dim]
|
||||
//
|
||||
// if(this.__visible_image_size_cache == false
|
||||
// || img.length > 0
|
||||
// || force
|
||||
// || res == null){
|
||||
|
||||
// if no images are loaded create one temporarily....
|
||||
if(img.length == 0){
|
||||
img = tmp = this.createImage('__tmp_image__')
|
||||
.css({
|
||||
@ -610,6 +619,14 @@ var RibbonsPrototype = {
|
||||
: dim == 'max' ? Math.max(parseFloat(css.height), parseFloat(css.width))
|
||||
: dim == 'min' ? Math.min(parseFloat(css.height), parseFloat(css.width))
|
||||
: null
|
||||
|
||||
// // XXX size cache -- not sure if this needs to be cached...
|
||||
// if(this.__visible_image_size_cache != false){
|
||||
// var cache = this.__visible_image_size_cache = this.__visible_image_size_cache || {}
|
||||
// cache[dim] = res
|
||||
// }
|
||||
// }
|
||||
|
||||
// get size for given scale...
|
||||
res = res ? res * scale : res
|
||||
|
||||
@ -1385,7 +1402,7 @@ var RibbonsPrototype = {
|
||||
})
|
||||
}
|
||||
|
||||
// if not images data defined drop out...
|
||||
// if no images data defined drop out...
|
||||
if(that.images == null){
|
||||
return image[0]
|
||||
}
|
||||
@ -1447,7 +1464,11 @@ var RibbonsPrototype = {
|
||||
}
|
||||
|
||||
// NOTE: this only has effect on non-square image blocks...
|
||||
// XXX this needs the loaded image, thus should be done right after preview loading...
|
||||
// XXX this needs the loaded image, thus should be done right
|
||||
// after preview loading...
|
||||
// XXX preview loading is async, is this the right
|
||||
// place for this??
|
||||
// ...this is also done in .rotateImage(..) above...
|
||||
that.correctImageProportionsForRotation(image)
|
||||
|
||||
// marks and other indicators...
|
||||
@ -1548,6 +1569,7 @@ var RibbonsPrototype = {
|
||||
$(unload_marks)
|
||||
.remove()
|
||||
|
||||
var images = []
|
||||
$(gids).each(function(i, gid){
|
||||
// support for sparse ribbons...
|
||||
if(gid == null){
|
||||
@ -1590,9 +1612,12 @@ var RibbonsPrototype = {
|
||||
}
|
||||
}
|
||||
|
||||
that.updateImage(img)
|
||||
images.push(img[0])
|
||||
})
|
||||
|
||||
// XXX this appears to be the bottleneck on large numbers of images...
|
||||
this.updateImage($(images))
|
||||
|
||||
if(place){
|
||||
this.placeRibbon(r, this.viewer.find(RIBBON).length)
|
||||
}
|
||||
@ -2199,6 +2224,8 @@ var RibbonsPrototype = {
|
||||
//
|
||||
// NOTE: this is not needed for square image blocks.
|
||||
// NOTE: if an image block is square, this will remove the margins.
|
||||
//
|
||||
// XXX this does the same job as features/ui-single-image.js' .updateImageProportions(..)
|
||||
correctImageProportionsForRotation: function(images){
|
||||
// XXX
|
||||
var W = this.viewer.innerWidth()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user