')
.addClass('ribbon-set'))
},
// XXX NOTE: quots removal might render this incompatible with older data formats...
createRibbon: function(gid){
gid = gid != null ? gid+'' : gid
return $('
')
.addClass('ribbon')
.attr('gid', JSON.stringify(gid)
// this removes the extra quots...
.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 $('
')
.addClass('image')
.attr('gid', JSON.stringify(gid)
// this removes the extra quots...
.replace(/^"(.*)"$/g, '$1'))
},
}
// NOTE: this is a low level interface, not a set of actions...
var RibbonsPrototype =
module.RibbonsPrototype = {
//
// .viewer (jQuery object)
//
// .images (Images object)
//
// XXX to update images we need to know about images...
// Constructors...
createViewer: RibbonsClassPrototype.createViewer,
createRibbon: RibbonsClassPrototype.createRibbon,
createImage: RibbonsClassPrototype.createImage,
// Generic getters...
getElemGID: RibbonsClassPrototype.getElemGID,
// Contextual getters...
// Get ribbon...
//
// Get current ribbon:
// .getRibbon()
// .getRibbon('current')
// -> ribbon
//
// Get base ribbon:
// .getRibbon('base')
// -> ribbon
//
// Get ribbon by its index/gid:
// .getRibbon(index)
// .getRibbon(gid)
// -> ribbon
//
// Get ribbon by image:
// .getRibbon(image)
// -> ribbon
// NOTE: image must be .getImage(..) compatible.
//
// Get ribbons from list:
// .getRibbon($(..))
// .getRibbon([..])
// -> ribbon(s)
// NOTE: this will filter the list but not search the tree...
//
//
// NOTE: if current image is unset then this will not be able to
// get it.
// NOTE: if base ribbon is unset this will return the first ribbon.
getRibbon: function(target){
// current...
if(target == null || target == 'current') {
return this.getImage().parents('.ribbon').first()
// base...
} else if(target == 'base'){
var r = this.viewer.find('.base.ribbon').first()
if(r.length == 0){
return this.viewer.find('.ribbon').first()
}
return r
// index...
} else if(typeof(target) == typeof(123)){
return this.viewer.find('.ribbon').eq(target)
// gid...
} else if(typeof(target) == typeof('str')){
//return this.viewer.find('.ribbon[gid="'+JSON.stringify(target)+'"]')
var r = this.viewer.find('.ribbon[gid='+JSON.stringify(target)+']')
// if no ribbon is found, try and get an image and it's ribbon...
return r.length == 0
? this.getImage(target).parents('.ribbon').first()
: r
}
return $(target).filter('.ribbon')
},
// Like .getRibbon(..) but returns ribbon index instead of the actual
// ribbon object...
getRibbonIndex: function(target){
return this.viewer.find('.ribbon').index(this.getRibbon(target))
},
// Get image...
//
// Get current image:
// .getImage()
// .getImage('current')
// -> image
//
// Get image by gid:
// .getImage(gid)
// -> image
//
// Get image at offset relative to current image:
// .getImage('next')
// .getImage('prev')
// .getImage(offset)
// -> image
//
// Get image at offset relative to image:
// .getImage(image, 'next')
// .getImage(image, 'prev')
// .getImage(image, offset)
// -> image
//
// Get images from list:
// .getImage($(..))
// .getImage([..])
// -> image(s)
// NOTE: this will filter the list but not search the tree...
//
getImage: function(target, offset){
var img = null
// relative to current -- target is offset...
if(target == 'next'
|| target == 'prev'
|| typeof(target) == typeof(123)){
offset = target
target = 'current'
}
// get the base image...
// current...
if(target == null || target == 'current') {
img = this.viewer.find('.current.image')
// gid...
} else if(typeof(target) == typeof('str')){
//return this.viewer.find('.image[gid="'+JSON.stringify(target)+'"]')
img = this.viewer.find('.image[gid='+JSON.stringify(target)+']')
}
// we got a collection...
if(img == null){
return $(target).filter('.image')
}
// get the offset...
if(offset != null && offset != 0){
// relative keywords...
offset = offset == 'next' ? 1
: offset == 'prev' ? -1
: offset
var list = offset > 0 ? 'nextAll' : 'prevAll'
offset = Math.abs(offset)-1
var res = img[list]('.image')
// handle overflow...
res = res.eq(Math.min(offset, res.length-1))
img = res.length == 0 ? img : res
}
return img
},
// Basic manipulation...
// Place a ribbon...
//
// Append target ribbon:
// .placeRibbon(target)
// -> ribbon
//
// Place target ribbon at position:
// .placeRibbon(target, index)
// .placeRibbon(target, ribbon-gid)
// .placeRibbon(target, ribbon)
// -> ribbon
//
// The ribbon will be placed at the new position shifting the next
// ribbon(s), if present, by one.
//
// Indexes if used, can be negative. Negative indexes are relative
// to the end, e.g. -1 is the same as length-1.
// Placing an element at a negative index will place it AFTER the
// target element, this is in contrast to positive indexes where an
// element is placed before the target. In both of the above cases
// (positive and negative indexes) the resulting target position
// will AT the passed position.
//
// NOTE: negative and positive indexes overflow to 0 and length
// respectively.
// NOTE: both target and position must be .getRibbon(..) compatible.
// NOTE: if target ribbon does not exist a new ribbon will be created.
// NOTE: if position ribbon (gid,ribbon) does not exist or is not
// attached then the target will be appended to the end.
// NOTE: this uses the DOM data for placement, this may differ from
// the actual data.
//
// XXX interaction animation...
placeRibbon: function(target, position){
// get create the ribbon...
var ribbon = this.getRibbon(target)
var i = this.getRibbonIndex(ribbon)
ribbon = ribbon.length == 0 ? this.createRibbon(target) : ribbon
var ribbons = this.viewer.find('.ribbon')
// normalize the position...
if(typeof(position) == typeof(123)){
position = position < 0 ? ribbons.length + position + 1 : position
position = position < 0 ? 0 : position
} else {
var p = this.getRibbonIndex(position)
// XXX what do we do if the target does not exist, i.e. p == -1 ????
}
// place the ribbon...
if(ribbons.length == 0 || ribbons.length <= position){
this.viewer.find('.ribbon-set').append(ribbon)
} else if(i != position) {
ribbons.eq(position).before(ribbon)
}
// XXX do we need to update the ribbon here???
return ribbon
},
// Place an image...
//
// Place target at at offset from current position:
// .placeImage(target, offset)
// -> image
//
// Place target at image position:
// .placeImage(target, image)
// .placeImage(target, image, 'before')
// .placeImage(target, image, 'after')
// -> image
//
// NOTE: mode is defaults to 'before'.
// NOTE: if image gid does not exist it will be created.
//
// XXX interaction animation...
// XXX mode is ugly...
// XXX should this be strongly or weakly coupled to images.updateImage(..)???
placeImage: function(target, to, mode){
mode = mode == null ? 'before' : mode
var img = this.getImage(target)
img = img.length == 0 ? this.createImage(target) : img
// offset on same ribbon...
if(typeof(to) == typeof(123)){
// moving the image to itself...
if(to == 0){
return img
}
var i = to
var images = img[i > 0 ? 'nextAll' : 'prevAll']('.image')
to = images.length > 0
? images.eq(Math.min(Math.abs(i), images.length)-1)
: img
// relative to image...
} else {
var i = mode == 'before' ? -1 : 1
to = this.getImage(to)
// moving the image to itself...
if(to[0] == img[0]){
return img
}
var images = to[mode]('.image')
}
// place the image...
if(images.length <= i){
to.parents('.ribbon').append(img)
// after...
} else if(i > 0){
to.next('.image').before(img)
// before...
} else {
to.before(img)
}
return _UPDATE_IMAGE ? image.updateImage(img) : img
},
// Bulk manipulation...
// update a set of images in a ribbon...
//
// This will reuse the images that already exist, thus if updating or
// adding images to an already loaded set this should be very fast.
//
// NOTE: gids and ribbon must be .getImage(..) and .getRibbon(..)
// compatible...
//
// XXX should this be strongly or weakly coupled to images.updateImage(..)???
updateRibbon: function(gids, ribbon){
// get/create the ribbon...
var r = this.getRibbon(ribbon)
if(r.length == 0){
// no such ribbon exists, then create and append it...
r = this.placeRibbon(ribbon, this.viewer.find('.ribbon').length)
}
var loaded = r.find('.image')
var that = this
$(gids).each(function(i, gid){
// get/create image...
var img = that.getImage(gid)
img = img.length == 0 ? that.createImage(gid) : img
// clear a chunk of images that are not in gids until one that is...
var g = loaded.length > i ? that.getElemGID(loaded.eq(i)) : null
while(g != null && gids.indexOf(g) < 0){
that.clear(g)
loaded.splice(i, 1)
g = loaded.length > i ? that.getElemGID(loaded.eq(i)) : null
}
// check if we need to reattach the image...
if(gid != g){
// append the image to set...
if(loaded.length == 0 || loaded.length <= i){
r.append(img.detach())
// attach the image at i...
} else {
// update the DOM...
loaded.eq(i).before(img.detach())
// update the loaded list...
var l = loaded.index(img)
if(l >= 0){
loaded.splice(l, 1)
}
loaded.splice(i, 0, img)
}
}
_UPDATE_IMAGE && image.updateImage(img)
})
// remove the rest of the stuff in ribbon...
if(loaded.length > gids.length){
loaded.eq(gids.length).nextAll().remove()
loaded.eq(gids.length).remove()
}
return this
},
// Update a data object in ribbons...
//
// .updateData(data, settings)
// -> ribbons
//
//
// This uses .updateRibbon(..) to load individual ribbons, for
// more info see docs for that.
//
// This uses data.ribbon_order to place the ribbons and data.ribbons
// to place the images.
//
// This uses data.base and data.current to set the base ribbon and
// current image respectively.
//
// All the data fields are optional, but for this to make a change
// at least one must be present.
//
//
// Settings format:
// {
// // if true keep the unchanged ribbons (default: false)
// // NOTE: untouched ribbons are the ones loaded into DOM but
// // not included in any of:
// // - data.ribbon_order
// // - data.ribbons
// // - data.base
// keep_ribbons: bool,
//
// // if true do not update the base ribbon (default: false)
// keep_base: bool,
//
// // if true do not update the current image (default: false)
// keep_current: bool,
//
//
// // a shorthand setting all the above to true (default: false).
// // NOTE: if this is set to true all other settings will be
// // ignored...
// keep_all: bool,
// }
//
// NOTE: this will not clear the ribbons object explicitly.
// NOTE: this will never remove the ribbons included in any of the
// data.base, data.ribbon_order or data.ribbons...
updateData: function(data, settings){
var settings = settings == null ? {} : settings
// load the data...
var that = this
// place images...
if(data.ribbons != null){
Object.keys(data.ribbons).forEach(function(gid){
that.updateRibbon(data.ribbons[gid], gid)
})
}
// place ribbons...
if(data.ribbon_order != null){
data.ribbon_order.forEach(function(gid, i){
that.placeRibbon(gid, i)
})
}
if(!settings.keep_all){
// set base ribbon...
if(!settings.keep_base && data.base != null){
this.setBaseRibbon(data.base)
}
// set base ribbon...
if(!settings.keep_current && data.current != null){
this.focusImage(data.current)
}
// clear the ribbons that did not get updated...
if(!settings.keep_ribbons
&& (data.ribbon_order != null || data.ribbons != null)){
var ribbons = []
ribbons = data.ribbon_order != null
? ribbons.concat(Object.keys(data.ribbon_order))
: ribbons
ribbons = data.ribbons != null
? ribbons.concat(Object.keys(data.ribbons))
: ribbons
ribbons.push(data.base)
that.viewer.find('.ribbon').each(function(){
var r = $(this)
if(ribbons.indexOf(that.getElemGID(r)) < 0){
r.remove()
}
})
}
}
return this
},
// Clear elements...
//
// Clear all elements:
// .clear()
// .clear('*')
// -> Ribbons
//
// Clear an image or a ribbon by gid:
// .clear(gid)
// -> Ribbons
//
// Clear a set of elements:
// .clear([gid, ...])
// -> Ribbons
//
//
// NOTE: another way to remove a ribbon or an image just to use
// .getRibbon(..).remove() and .getImage(...).remove() respectivly.
clear: function(gids){
// clear all...
if(gids == null || gids == '*'){
this.viewer.find('.ribbon').remove()
// clear one or more gids...
} else {
gids = gids.constructor.name != 'Array' ? [gids] : gids
var that = this
gids.forEach(function(g){
that.viewer.find('[gid='+JSON.stringify(g)+']').remove()
})
}
return this
},
// Focus image...
//
// Focus image by gid:
// .focusImage(gid)
// -> image
//
// Focus next/prev image relative to current:
// .focusImage('next')
// .focusImage('prev')
// -> image
//
// Focus image at offset from current:
// .focusImage(offset)
// -> image
//
// NOTE: gid must be a .getImage(..) compatible object.
// NOTE: for keyword and offset to work an image must be focused.
// NOTE: overflowing offset will focus first/last image.
//
// XXX interaction animation...
focusImage: function(gid){
var cur = this.viewer
.find('.current.image')
// relative keywords...
gid = gid == 'next' ? 1
: gid == 'prev' ? -1
: gid
// offset...
if(typeof(gid) == typeof(123)){
return this.focusImage(this.getImage(gid))
}
cur.removeClass('current')
return this.getImage(gid)
.addClass('current')
},
// XXX should this support keywords a-la .focusImage(..)???
setBaseRibbon: function(gid){
this.viewer.find('.base.ribbon').removeClass('base')
return this.getRibbon(gid).addClass('base')
},
getImageMarks: function(){
// XXX
},
// XXX this needs:
// IMAGE_UPDATERS -- make it a callback/event (node/jquery)...
updateImageIndicators: function(gid, image){
gid = gid == null ? this.getElemGID() : gid
image = image == null ? this.getImage() : $(image)
IMAGE_UPDATERS.forEach(function(update){
update(gid, image)
})
return image
},
_loadImagePreviewURL: function(image, url){
// pre-cache and load image...
// NOTE: this will make images load without a blackout...
var img = new Image()
img.onload = function(){
image.css({
'background-image': 'url("'+ url +'")',
})
}
img.src = url
return img
},
// Update image{s}...
//
load_img_sync: false,
//
// XXX this needs:
// STUB_IMAGE_DATA
// this.images
// XXX
updateImage: function(image, gid, size, sync){
image = image == null ? this.getImage() : $(image)
sync = sync == null ? this.load_img_sync : sync
var that = this
return image.each(function(){
var image = $(this)
var old_gid = that.getElemGID(image)
// same image -- update...
if(old_gid == gid || gid == null){
gid = old_gid
// reuse for different image -- reconstruct...
} else {
// remove old marks...
if(typeof(old_gid) == typeof('str')){
that.getImageMarks(old_gid).remove()
}
// reset gid...
image
.attr('gid', JSON.stringify(gid)
// this removes the extra quots...
.replace(/^"(.*)"$/g, '$1'))
.css({
// clear the old preview...
'background-image': '',
})
}
size = size == null ? that.getVisibleImageSize('max') : size
// get the image data...
var img_data = that.images[gid]
if(img_data == null){
img_data = STUB_IMAGE_DATA
}
/* XXX does not seem to be needing this...
// set the current class...
if(gid == DATA.current){
image.addClass('current')
} else {
image.removeClass('current')
}
*/
// preview...
var p_url = that.images.getBestPreview(gid, size).url
// update the preview if it's a new image or...
if(old_gid != gid
// the new preview (purl) is different to current...
|| image.css('background-image').indexOf(encodeURI(p_url)) < 0){
// sync load...
if(sync){
that._loadImagePreviewURL(image, p_url)
// async load...
} else {
// NOTE: storing the url in .data() makes the image load the
// last requested preview and in a case when we manage to
// call updateImage(...) on the same element multiple times
// before the previews get loaded...
// ...setting the data().loading is sync while loading an
// image is not, and if several loads are done in sequence
// there is no guarantee that they will happen in the same
// order as requested...
image.data().loading = p_url
setTimeout(function(){
that._loadImagePreviewURL(image, image.data().loading)
}, 0)
}
}
// 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...
that.correctImageProportionsForRotation(image)
// marks and other indicators...
that.updateImageIndicators(gid, image)
})
},
// XXX reread...
// Compensate for viewer proportioned and rotated images.
//
// This will set the margins so as to make the rotated image offset the
// same space as it is occupying visually...
//
// NOTE: this is not needed for square image blocks.
// NOTE: if an image block is square, this will remove the margins.
correctImageProportionsForRotation: function(images){
// XXX
var W = this.viewer.innerWidth()
var H = this.viewer.innerHeight()
var viewer_p = W > H ? 'landscape' : 'portrait'
return $(images).each(function(i, e){
var image = $(this)
// orientation...
var o = image.attr('orientation')
o = o == null ? 0 : o
var w = image.outerWidth()
var h = image.outerHeight()
// non-square image...
if(w != h){
var image_p = w > h ? 'landscape' : 'portrait'
// when the image is turned 90deg/270deg and its
// proportions are the same as the screen...
if((o == 90 || o == 270) && image_p == viewer_p){
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) && image_p != viewer_p){
image.css({
width: h,
height: w,
})
image.css({
'margin': '',
})
}
// square image...
} else {
image.css({
'margin': '',
})
}
})
},
// Image manipulation...
// Rotate an image...
//
// Rotate image clockwise:
// .rotateImage(target, 'cw')
// -> image
//
// Rotate image counterclockwise:
// .rotateImage(target, 'ccw')
// -> image
//
// Set explicit image rotation angle:
// .rotateImage(target, 0|90|180|270)
// .rotateImage(target, -90|-180|-270)
// -> image
//
// NOTE: target must be .getImage(..) compatible.
// NOTE: this can be applied in bulk, e.g.
// this.rotateImage($('.image'), 'cw') will rotate all the
// loaded images clockwise.
//
// XXX should this be strongly or weakly coupled to images.updateImage(..)
// or images.correctImageProportionsForRotation(..)???
// XXX should .correctImageProportionsForRotation(..) be in images???
rotateImage: function(target, direction){
target = this.getImage(target)
// validate direction...
if(images.calcRelativeRotation(direction) == null){
return target
}
var that = this
target.each(function(i, e){
var img = $(this)
var o = direction == 'cw' || direction == 'ccw'
? images.calcRelativeRotation(img.attr('orientation'), direction)
: direction*1
if(o == 0){
img.removeAttr('orientation')
} else {
img.attr('orientation', o)
}
// account for proportions...
that.correctImageProportionsForRotation(img)
// XXX this is a bit of an overkill but it will update the
// preview if needed...
//image.updateImage(img)
})
return target
},
// Flip an image...
//
// .flipImage(target, 'horizontal')
// .flipImage(target, 'vertical')
// -> 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)
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 != '' })
// toggle the specific state...
var i = state.indexOf(direction)
if(i >= 0){
state.splice(i, 1)
} else {
state.push(direction)
}
// write the state...
if(state.length == 0){
img.removeAttr('flipped')
} else {
img.attr('flipped', state.join(', '))
}
})
return target
},
// shorthands...
// XXX should these be here???
//rotateCW: function(target){ return this.rotateImage(target, 'cw') },
//rotateCCW: function(target){ return this.rotateImage(target, 'ccw') },
//flipVertical: function(target){ return this.flipImage(target, 'vertical') },
//flipHorizontal: function(target){ return this.flipImage(target, 'horizontal') },
// UI manipulation...
// XXX try and make image size the product of vmin and scale...
// XXX is this the right place for this???
// XXX uses jli.js getElementScale(..)
getVisibleImageSize: function(dim){
dim = dim == null ? 'width' : dim
var img = this.viewer.find('.image')
var scale = getElementScale(this.viewer.find('.ribbon-set'))
if(dim == 'height'){
return img.outerHeight(true) * scale
} else if(dim == 'width'){
return img.outerWidth(true) * scale
} else if(dim == 'max'){
return Math.max(img.outerHeight(true), img.outerWidth(true)) * scale
} else if(dim == 'min'){
return Math.min(img.outerHeight(true), img.outerWidth(true)) * scale
}
},
// XXX if target is an image align the ribbon both vertically and horizontally...
alignRibbon: function(target, mode){
// XXX
},
// XXX
fitNImages: function(n){
// XXX
},
_setup: function(viewer, images){
this.viewer = $(viewer)
this.images = images
},
}
// Main Ribbons object...
//
var Ribbons =
module.Ribbons =
function Ribbons(viewer, images){
// in case this is called as a function (without new)...
if(this.constructor.name != 'Ribbons'){
return new Ribbons(viewer)
}
this._setup(viewer, images)
return this
}
Ribbons.__proto__ = RibbonsClassPrototype
Ribbons.prototype = RibbonsPrototype
Ribbons.prototype.constructor = Ribbons
/**********************************************************************
* vim:set ts=4 sw=4 : */
return module })