mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 03:10:07 +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...
|
||||
//
|
||||
// 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 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 = {}
|
||||
console.log('>>> ribbons')
|
||||
|
||||
@ -84,7 +81,6 @@ module.RibbonsClassPrototype = {
|
||||
.replace(/^"(.*)"$/g, '$1'))
|
||||
},
|
||||
// XXX NOTE: quots removal might render this incompatible with older data formats...
|
||||
// XXX should this do .updateImage(..) ???
|
||||
createImage: function(gid){
|
||||
gid = gid != null ? gid+'' : gid
|
||||
return $('<div>')
|
||||
@ -93,6 +89,14 @@ module.RibbonsClassPrototype = {
|
||||
// this removes the extra quots...
|
||||
.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,
|
||||
createRibbon: RibbonsClassPrototype.createRibbon,
|
||||
createImage: RibbonsClassPrototype.createImage,
|
||||
createMark: RibbonsClassPrototype.createMark,
|
||||
|
||||
// Generic getters...
|
||||
getElemGID: RibbonsClassPrototype.getElemGID,
|
||||
@ -256,6 +261,28 @@ module.RibbonsPrototype = {
|
||||
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...
|
||||
|
||||
@ -376,7 +403,7 @@ module.RibbonsPrototype = {
|
||||
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...
|
||||
@ -628,9 +655,38 @@ module.RibbonsPrototype = {
|
||||
},
|
||||
|
||||
|
||||
getImageMarks: function(){
|
||||
// XXX
|
||||
// Mark an image...
|
||||
//
|
||||
// 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:
|
||||
// IMAGE_UPDATERS -- make it a callback/event (node/jquery)...
|
||||
updateImageIndicators: function(gid, image){
|
||||
@ -656,7 +712,7 @@ module.RibbonsPrototype = {
|
||||
return img
|
||||
},
|
||||
|
||||
// Update image{s}...
|
||||
// Update image(s)...
|
||||
//
|
||||
load_img_sync: false,
|
||||
//
|
||||
@ -667,6 +723,7 @@ module.RibbonsPrototype = {
|
||||
updateImage: function(image, gid, size, sync){
|
||||
image = image == null ? this.getImage() : $(image)
|
||||
sync = sync == null ? this.load_img_sync : sync
|
||||
size = size == null ? this.getVisibleImageSize('max') : size
|
||||
|
||||
var that = this
|
||||
return image.each(function(){
|
||||
@ -693,12 +750,16 @@ module.RibbonsPrototype = {
|
||||
'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...
|
||||
var img_data = that.images[gid]
|
||||
if(img_data == null){
|
||||
img_data = STUB_IMAGE_DATA
|
||||
img_data = images.STUB_IMAGE_DATA
|
||||
}
|
||||
|
||||
/* 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...
|
||||
var p_url = that.images.getBestPreview(gid, size).url
|
||||
|
||||
// update the preview if it's a new image or...
|
||||
// XXX this should be pushed as far back as possible...
|
||||
if(old_gid != gid
|
||||
// the new preview (purl) is different to current...
|
||||
|| 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...
|
||||
// XXX this needs the loaded image, thus should be done right after preview loading...
|
||||
that.correctImageProportionsForRotation(image)
|
||||
|
||||
// marks and other indicators...
|
||||
@ -866,39 +936,50 @@ module.RibbonsPrototype = {
|
||||
that.correctImageProportionsForRotation(img)
|
||||
// XXX this is a bit of an overkill but it will update the
|
||||
// preview if needed...
|
||||
//image.updateImage(img)
|
||||
//that.updateImage(img)
|
||||
})
|
||||
return target
|
||||
},
|
||||
|
||||
// Flip an image...
|
||||
//
|
||||
// Flip image:
|
||||
// .flipImage(target, 'horizontal')
|
||||
// .flipImage(target, 'vertical')
|
||||
// -> image
|
||||
//
|
||||
// Set an explicit state:
|
||||
// .flipImage(target, [ .. ])
|
||||
// -> image
|
||||
//
|
||||
// NOTE: target must be .getImage(..) compatible.
|
||||
// NOTE: this can be applied in bulk, e.g.
|
||||
// this.flipImage($('.image'), 'vertical') will rotate all the
|
||||
// loaded images vertically.
|
||||
flipImage: function(target, direction){
|
||||
target = this.getImage(target)
|
||||
var set_state = direction.constructor.name == 'Array' ? direction : null
|
||||
target.each(function(i, e){
|
||||
var img = $(this)
|
||||
|
||||
// get the state...
|
||||
var state = img.attr('flipped')
|
||||
state = (state == null ? '' : state)
|
||||
.split(',')
|
||||
.map(function(e){ return e.trim() })
|
||||
.filter(function(e){ return e != '' })
|
||||
// update existing state...
|
||||
if(set_state == null){
|
||||
var state = img.attr('flipped')
|
||||
state = (state == null ? '' : state)
|
||||
.split(',')
|
||||
.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...
|
||||
var i = state.indexOf(direction)
|
||||
if(i >= 0){
|
||||
state.splice(i, 1)
|
||||
// set an explicit state...
|
||||
} else {
|
||||
state.push(direction)
|
||||
var state = set_state.slice()
|
||||
}
|
||||
|
||||
// write the state...
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user