mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-30 02:40:08 +00:00
Ribbons.updateImage(..) done, still not happy with it, smells like the context is leaking all over the place...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
3ca05d008f
commit
6368bc4c3e
@ -12,90 +12,6 @@ var images = require('images')
|
|||||||
|
|
||||||
/*********************************************************************/
|
/*********************************************************************/
|
||||||
|
|
||||||
// A stub image, also here for documentation...
|
|
||||||
var STUB_IMAGE_DATA =
|
|
||||||
module.STUB_IMAGE_DATA = {
|
|
||||||
// Entity GID...
|
|
||||||
id: 'STUB-GID',
|
|
||||||
|
|
||||||
// Entity type
|
|
||||||
//
|
|
||||||
// can be:
|
|
||||||
// - 'image'
|
|
||||||
// - 'group'
|
|
||||||
type: 'image',
|
|
||||||
|
|
||||||
// Entity state
|
|
||||||
//
|
|
||||||
// can be:
|
|
||||||
// - 'single'
|
|
||||||
// - 'grouped'
|
|
||||||
// - 'hidden'
|
|
||||||
// - ...
|
|
||||||
state: 'single',
|
|
||||||
|
|
||||||
// Creation time...
|
|
||||||
ctime: 0,
|
|
||||||
|
|
||||||
// Original path...
|
|
||||||
path: './images/sizes/900px/SIZE.jpg',
|
|
||||||
|
|
||||||
// Previews...
|
|
||||||
// NOTE: the actual values depend on specific image and can be
|
|
||||||
// any size...
|
|
||||||
preview: {
|
|
||||||
'150px': './images/sizes/150px/SIZE.jpg',
|
|
||||||
'350px': './images/sizes/350px/SIZE.jpg',
|
|
||||||
'900px': './images/sizes/900px/SIZE.jpg',
|
|
||||||
},
|
|
||||||
|
|
||||||
// Classes
|
|
||||||
// XXX currently unused...
|
|
||||||
classes: '',
|
|
||||||
|
|
||||||
// Image orientation (optional)
|
|
||||||
//
|
|
||||||
// can be:
|
|
||||||
// - null/undefined - same as 0
|
|
||||||
// - 0 (default) - load as-is
|
|
||||||
// - 90 - rotate 90deg CW
|
|
||||||
// - 180 - rotate 180deg CW
|
|
||||||
// - 270 - rotate 270deg CW (90deg CCW)
|
|
||||||
//
|
|
||||||
// NOTE: use orientationExif2ImageGrid(..) to convert from EXIF
|
|
||||||
// orientation format to ImageGrid format...
|
|
||||||
orientation: 0,
|
|
||||||
|
|
||||||
// Image flip state (optional)
|
|
||||||
//
|
|
||||||
// can be:
|
|
||||||
// - null/undefined
|
|
||||||
// - array
|
|
||||||
//
|
|
||||||
// can contain:
|
|
||||||
// - 'vertical'
|
|
||||||
// - 'horizontal'
|
|
||||||
//
|
|
||||||
// NOTE: use orientationExif2ImageGrid(..) to convert from EXIF
|
|
||||||
// orientation format to ImageGrid format...
|
|
||||||
flipped: null,
|
|
||||||
|
|
||||||
// Image comment (optional)
|
|
||||||
//
|
|
||||||
// can be:
|
|
||||||
// - null/undefined
|
|
||||||
// - string
|
|
||||||
comment: null,
|
|
||||||
|
|
||||||
// List of image tags (optional)
|
|
||||||
//
|
|
||||||
// can be:
|
|
||||||
// - null/undefined
|
|
||||||
// - array
|
|
||||||
tags: null,
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// List of function that update image state...
|
// List of function that update image state...
|
||||||
//
|
//
|
||||||
// these are called by updateImage(..) after the image is created.
|
// these are called by updateImage(..) after the image is created.
|
||||||
|
|||||||
@ -13,6 +13,90 @@ console.log('>>> images')
|
|||||||
|
|
||||||
/*********************************************************************/
|
/*********************************************************************/
|
||||||
|
|
||||||
|
// A stub image, also here for documentation...
|
||||||
|
var STUB_IMAGE_DATA =
|
||||||
|
module.STUB_IMAGE_DATA = {
|
||||||
|
// Entity GID...
|
||||||
|
id: 'STUB-GID',
|
||||||
|
|
||||||
|
// Entity type
|
||||||
|
//
|
||||||
|
// can be:
|
||||||
|
// - 'image'
|
||||||
|
// - 'group'
|
||||||
|
type: 'image',
|
||||||
|
|
||||||
|
// Entity state
|
||||||
|
//
|
||||||
|
// can be:
|
||||||
|
// - 'single'
|
||||||
|
// - 'grouped'
|
||||||
|
// - 'hidden'
|
||||||
|
// - ...
|
||||||
|
state: 'single',
|
||||||
|
|
||||||
|
// Creation time...
|
||||||
|
ctime: 0,
|
||||||
|
|
||||||
|
// Original path...
|
||||||
|
path: './images/sizes/900px/SIZE.jpg',
|
||||||
|
|
||||||
|
// Previews...
|
||||||
|
// NOTE: the actual values depend on specific image and can be
|
||||||
|
// any size...
|
||||||
|
preview: {
|
||||||
|
'150px': './images/sizes/150px/SIZE.jpg',
|
||||||
|
'350px': './images/sizes/350px/SIZE.jpg',
|
||||||
|
'900px': './images/sizes/900px/SIZE.jpg',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Classes
|
||||||
|
// XXX currently unused...
|
||||||
|
classes: '',
|
||||||
|
|
||||||
|
// Image orientation (optional)
|
||||||
|
//
|
||||||
|
// can be:
|
||||||
|
// - null/undefined - same as 0
|
||||||
|
// - 0 (default) - load as-is
|
||||||
|
// - 90 - rotate 90deg CW
|
||||||
|
// - 180 - rotate 180deg CW
|
||||||
|
// - 270 - rotate 270deg CW (90deg CCW)
|
||||||
|
//
|
||||||
|
// NOTE: use orientationExif2ImageGrid(..) to convert from EXIF
|
||||||
|
// orientation format to ImageGrid format...
|
||||||
|
orientation: 0,
|
||||||
|
|
||||||
|
// Image flip state (optional)
|
||||||
|
//
|
||||||
|
// can be:
|
||||||
|
// - null/undefined
|
||||||
|
// - array
|
||||||
|
//
|
||||||
|
// can contain:
|
||||||
|
// - 'vertical'
|
||||||
|
// - 'horizontal'
|
||||||
|
//
|
||||||
|
// NOTE: use orientationExif2ImageGrid(..) to convert from EXIF
|
||||||
|
// orientation format to ImageGrid format...
|
||||||
|
flipped: null,
|
||||||
|
|
||||||
|
// Image comment (optional)
|
||||||
|
//
|
||||||
|
// can be:
|
||||||
|
// - null/undefined
|
||||||
|
// - string
|
||||||
|
comment: null,
|
||||||
|
|
||||||
|
// List of image tags (optional)
|
||||||
|
//
|
||||||
|
// can be:
|
||||||
|
// - null/undefined
|
||||||
|
// - array
|
||||||
|
tags: null,
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Calculate relative rotation angle...
|
// Calculate relative rotation angle...
|
||||||
//
|
//
|
||||||
// Calculate rotation angle relative to from:
|
// Calculate rotation angle relative to from:
|
||||||
|
|||||||
@ -5,9 +5,6 @@
|
|||||||
*
|
*
|
||||||
**********************************************************************/
|
**********************************************************************/
|
||||||
|
|
||||||
// XXX this is a stub, here untill image.js is done...
|
|
||||||
_UPDATE_IMAGE = false
|
|
||||||
|
|
||||||
define(function(require){ var module = {}
|
define(function(require){ var module = {}
|
||||||
console.log('>>> ribbons')
|
console.log('>>> ribbons')
|
||||||
|
|
||||||
@ -84,7 +81,6 @@ module.RibbonsClassPrototype = {
|
|||||||
.replace(/^"(.*)"$/g, '$1'))
|
.replace(/^"(.*)"$/g, '$1'))
|
||||||
},
|
},
|
||||||
// XXX NOTE: quots removal might render this incompatible with older data formats...
|
// XXX NOTE: quots removal might render this incompatible with older data formats...
|
||||||
// XXX should this do .updateImage(..) ???
|
|
||||||
createImage: function(gid){
|
createImage: function(gid){
|
||||||
gid = gid != null ? gid+'' : gid
|
gid = gid != null ? gid+'' : gid
|
||||||
return $('<div>')
|
return $('<div>')
|
||||||
@ -93,6 +89,14 @@ module.RibbonsClassPrototype = {
|
|||||||
// this removes the extra quots...
|
// this removes the extra quots...
|
||||||
.replace(/^"(.*)"$/g, '$1'))
|
.replace(/^"(.*)"$/g, '$1'))
|
||||||
},
|
},
|
||||||
|
createMark: function(cls, gid){
|
||||||
|
gid = gid != null ? gid+'' : gid
|
||||||
|
return $('<div class="mark">')
|
||||||
|
.addClass(cls)
|
||||||
|
.attr('gid', JSON.stringify(gid)
|
||||||
|
// this removes the extra quots...
|
||||||
|
.replace(/^"(.*)"$/g, '$1'))
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -110,6 +114,7 @@ module.RibbonsPrototype = {
|
|||||||
createViewer: RibbonsClassPrototype.createViewer,
|
createViewer: RibbonsClassPrototype.createViewer,
|
||||||
createRibbon: RibbonsClassPrototype.createRibbon,
|
createRibbon: RibbonsClassPrototype.createRibbon,
|
||||||
createImage: RibbonsClassPrototype.createImage,
|
createImage: RibbonsClassPrototype.createImage,
|
||||||
|
createMark: RibbonsClassPrototype.createMark,
|
||||||
|
|
||||||
// Generic getters...
|
// Generic getters...
|
||||||
getElemGID: RibbonsClassPrototype.getElemGID,
|
getElemGID: RibbonsClassPrototype.getElemGID,
|
||||||
@ -256,6 +261,28 @@ module.RibbonsPrototype = {
|
|||||||
return img
|
return img
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// Get image marks...
|
||||||
|
//
|
||||||
|
// .getImageMarks(gid)
|
||||||
|
// .getImageMarks(image)
|
||||||
|
// -> marks
|
||||||
|
//
|
||||||
|
// .getImageMarks(gid, cls)
|
||||||
|
// .getImageMarks(image, cls)
|
||||||
|
// -> marks
|
||||||
|
//
|
||||||
|
getImageMarks: function(img, cls){
|
||||||
|
gid = typeof(img) == typeof('str') ? img : null
|
||||||
|
gid = gid == null ? this.getElemGID(img) : gid
|
||||||
|
|
||||||
|
var marks = this.viewer.find('.mark[gid='+JSON.stringify(gid)+']')
|
||||||
|
|
||||||
|
if(cls != null){
|
||||||
|
return marks.filter('.'+cls)
|
||||||
|
}
|
||||||
|
return marks
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
// Basic manipulation...
|
// Basic manipulation...
|
||||||
|
|
||||||
@ -376,7 +403,7 @@ module.RibbonsPrototype = {
|
|||||||
to.before(img)
|
to.before(img)
|
||||||
}
|
}
|
||||||
|
|
||||||
return _UPDATE_IMAGE ? image.updateImage(img) : img
|
return this.updateImage(img)
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
@ -435,7 +462,7 @@ module.RibbonsPrototype = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
_UPDATE_IMAGE && image.updateImage(img)
|
that.updateImage(img)
|
||||||
})
|
})
|
||||||
|
|
||||||
// remove the rest of the stuff in ribbon...
|
// remove the rest of the stuff in ribbon...
|
||||||
@ -628,9 +655,38 @@ module.RibbonsPrototype = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
getImageMarks: function(){
|
// Mark an image...
|
||||||
// XXX
|
//
|
||||||
|
// Mark current image with cls
|
||||||
|
// .markImage(cls)
|
||||||
|
// -> mark
|
||||||
|
//
|
||||||
|
// .markImage(cls, gid)
|
||||||
|
// -> mark
|
||||||
|
//
|
||||||
|
// NOTE: this will reuse existing marks...
|
||||||
|
markImage: function(cls, image){
|
||||||
|
var gid = typeof(image) == typeof('str') ? image : null
|
||||||
|
image = this.getImage(gid)
|
||||||
|
gid = gid == null ? this.getElemGID(image) : gid
|
||||||
|
|
||||||
|
// no image is loaded...
|
||||||
|
if(image.length == 0){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
var mark = this.getImageMarks(gid, cls)
|
||||||
|
|
||||||
|
if(mark.length == 0){
|
||||||
|
mark = this.createMark(cls, gid)
|
||||||
|
}
|
||||||
|
|
||||||
|
// make sure the mark is explicitly after the image...
|
||||||
|
mark.insertAfter(image)
|
||||||
|
|
||||||
|
return mark
|
||||||
},
|
},
|
||||||
|
|
||||||
// XXX this needs:
|
// XXX this needs:
|
||||||
// IMAGE_UPDATERS -- make it a callback/event (node/jquery)...
|
// IMAGE_UPDATERS -- make it a callback/event (node/jquery)...
|
||||||
updateImageIndicators: function(gid, image){
|
updateImageIndicators: function(gid, image){
|
||||||
@ -656,7 +712,7 @@ module.RibbonsPrototype = {
|
|||||||
return img
|
return img
|
||||||
},
|
},
|
||||||
|
|
||||||
// Update image{s}...
|
// Update image(s)...
|
||||||
//
|
//
|
||||||
load_img_sync: false,
|
load_img_sync: false,
|
||||||
//
|
//
|
||||||
@ -667,6 +723,7 @@ module.RibbonsPrototype = {
|
|||||||
updateImage: function(image, gid, size, sync){
|
updateImage: function(image, gid, size, sync){
|
||||||
image = image == null ? this.getImage() : $(image)
|
image = image == null ? this.getImage() : $(image)
|
||||||
sync = sync == null ? this.load_img_sync : sync
|
sync = sync == null ? this.load_img_sync : sync
|
||||||
|
size = size == null ? this.getVisibleImageSize('max') : size
|
||||||
|
|
||||||
var that = this
|
var that = this
|
||||||
return image.each(function(){
|
return image.each(function(){
|
||||||
@ -693,12 +750,16 @@ module.RibbonsPrototype = {
|
|||||||
'background-image': '',
|
'background-image': '',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
size = size == null ? that.getVisibleImageSize('max') : size
|
|
||||||
|
// if not images data defined drop out...
|
||||||
|
if(that.images == null){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
// get the image data...
|
// get the image data...
|
||||||
var img_data = that.images[gid]
|
var img_data = that.images[gid]
|
||||||
if(img_data == null){
|
if(img_data == null){
|
||||||
img_data = STUB_IMAGE_DATA
|
img_data = images.STUB_IMAGE_DATA
|
||||||
}
|
}
|
||||||
|
|
||||||
/* XXX does not seem to be needing this...
|
/* XXX does not seem to be needing this...
|
||||||
@ -710,10 +771,28 @@ module.RibbonsPrototype = {
|
|||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
// main attrs...
|
||||||
|
image
|
||||||
|
.attr({
|
||||||
|
orientation: [null, 0].indexOf(img_data.orientation) < 0
|
||||||
|
? img_data.orientation,
|
||||||
|
: null
|
||||||
|
flipped: img_data.flipped != null
|
||||||
|
? img_data.flipped.join(', '),
|
||||||
|
: null
|
||||||
|
})
|
||||||
|
*/
|
||||||
|
|
||||||
|
// image state...
|
||||||
|
that.rotateImage(image, img_data.orientation == null ? 0 : img_data.orientation)
|
||||||
|
that.flipImage(image, img_data.flipped == null ? [] : img_data.flipped)
|
||||||
|
|
||||||
// preview...
|
// preview...
|
||||||
var p_url = that.images.getBestPreview(gid, size).url
|
var p_url = that.images.getBestPreview(gid, size).url
|
||||||
|
|
||||||
// update the preview if it's a new image or...
|
// update the preview if it's a new image or...
|
||||||
|
// XXX this should be pushed as far back as possible...
|
||||||
if(old_gid != gid
|
if(old_gid != gid
|
||||||
// the new preview (purl) is different to current...
|
// the new preview (purl) is different to current...
|
||||||
|| image.css('background-image').indexOf(encodeURI(p_url)) < 0){
|
|| image.css('background-image').indexOf(encodeURI(p_url)) < 0){
|
||||||
@ -738,17 +817,8 @@ module.RibbonsPrototype = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// main attrs...
|
|
||||||
image
|
|
||||||
.attr({
|
|
||||||
//order: DATA.order.indexOf(gid),
|
|
||||||
orientation: img_data.orientation == null ? 0 : img_data.orientation,
|
|
||||||
})
|
|
||||||
|
|
||||||
// flip...
|
|
||||||
setImageFlipState(image, img_data.flipped == null ? [] : img_data.flipped)
|
|
||||||
|
|
||||||
// NOTE: this only has effect on non-square image blocks...
|
// NOTE: this only has effect on non-square image blocks...
|
||||||
|
// XXX this needs the loaded image, thus should be done right after preview loading...
|
||||||
that.correctImageProportionsForRotation(image)
|
that.correctImageProportionsForRotation(image)
|
||||||
|
|
||||||
// marks and other indicators...
|
// marks and other indicators...
|
||||||
@ -866,39 +936,50 @@ module.RibbonsPrototype = {
|
|||||||
that.correctImageProportionsForRotation(img)
|
that.correctImageProportionsForRotation(img)
|
||||||
// XXX this is a bit of an overkill but it will update the
|
// XXX this is a bit of an overkill but it will update the
|
||||||
// preview if needed...
|
// preview if needed...
|
||||||
//image.updateImage(img)
|
//that.updateImage(img)
|
||||||
})
|
})
|
||||||
return target
|
return target
|
||||||
},
|
},
|
||||||
|
|
||||||
// Flip an image...
|
// Flip an image...
|
||||||
//
|
//
|
||||||
|
// Flip image:
|
||||||
// .flipImage(target, 'horizontal')
|
// .flipImage(target, 'horizontal')
|
||||||
// .flipImage(target, 'vertical')
|
// .flipImage(target, 'vertical')
|
||||||
// -> image
|
// -> image
|
||||||
//
|
//
|
||||||
|
// Set an explicit state:
|
||||||
|
// .flipImage(target, [ .. ])
|
||||||
|
// -> image
|
||||||
|
//
|
||||||
// NOTE: target must be .getImage(..) compatible.
|
// NOTE: target must be .getImage(..) compatible.
|
||||||
// NOTE: this can be applied in bulk, e.g.
|
// NOTE: this can be applied in bulk, e.g.
|
||||||
// this.flipImage($('.image'), 'vertical') will rotate all the
|
// this.flipImage($('.image'), 'vertical') will rotate all the
|
||||||
// loaded images vertically.
|
// loaded images vertically.
|
||||||
flipImage: function(target, direction){
|
flipImage: function(target, direction){
|
||||||
target = this.getImage(target)
|
target = this.getImage(target)
|
||||||
|
var set_state = direction.constructor.name == 'Array' ? direction : null
|
||||||
target.each(function(i, e){
|
target.each(function(i, e){
|
||||||
var img = $(this)
|
var img = $(this)
|
||||||
|
|
||||||
// get the state...
|
// update existing state...
|
||||||
var state = img.attr('flipped')
|
if(set_state == null){
|
||||||
state = (state == null ? '' : state)
|
var state = img.attr('flipped')
|
||||||
.split(',')
|
state = (state == null ? '' : state)
|
||||||
.map(function(e){ return e.trim() })
|
.split(',')
|
||||||
.filter(function(e){ return e != '' })
|
.map(function(e){ return e.trim() })
|
||||||
|
.filter(function(e){ return e != '' })
|
||||||
|
// toggle the specific state...
|
||||||
|
var i = state.indexOf(direction)
|
||||||
|
if(i >= 0){
|
||||||
|
state.splice(i, 1)
|
||||||
|
} else {
|
||||||
|
state.push(direction)
|
||||||
|
}
|
||||||
|
|
||||||
// toggle the specific state...
|
// set an explicit state...
|
||||||
var i = state.indexOf(direction)
|
|
||||||
if(i >= 0){
|
|
||||||
state.splice(i, 1)
|
|
||||||
} else {
|
} else {
|
||||||
state.push(direction)
|
var state = set_state.slice()
|
||||||
}
|
}
|
||||||
|
|
||||||
// write the state...
|
// write the state...
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user