Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2017-05-27 06:50:29 +03:00
parent 8eefbf5b6e
commit 899e42473e
5 changed files with 187 additions and 147 deletions

View File

@ -71,6 +71,9 @@ core.ImageGridFeatures.Feature('viewer-testing', [
// XXX
//'ui-blank-render',
// XXX BUG: features: this pulls in all the suggestions that depend
// regardless of weather they depend on it or not:
// 'ui-partial-ribbons'
'ui-ribbons-render',
'ui-partial-ribbons-render',
'ui-vdom-render',
@ -81,6 +84,8 @@ core.ImageGridFeatures.Feature('viewer-testing', [
'ui-cursor',
'ui-single-image',
// XXX remove this... (at this point this is here only to keep load order consistent)
'ui-partial-ribbons',
/*/ XXX has bugs -- non-current ribbons are not always aligned...
'ui-partial-ribbons-2',

View File

@ -16,14 +16,17 @@ var core = require('features/core')
var ribbons = require('imagegrid/ribbons')
/*********************************************************************/
var RibbonsClassPrototype = {
// XXX
}
RibbonsClassPrototype.__proto__ = ribbons.BaseRibbons.prototype.__proto__
var RibbonsPrototype = {
// XXX
}
RibbonsPrototype.__proto__ = ribbons.BaseRibbons.prototype
@ -37,11 +40,35 @@ object.makeConstructor('Ribbons',
/*********************************************************************/
// XXX things that do not yet work with this:
// .nextRibbon(..) / .prevRibbon(..)
//
var RenderActions = actions.Actions({
get dom(){
return this.ribbons ? this.ribbons.viewer : undefined },
load: [
function(data){
// XXX setup .ribbons
return function(){
// XXX setup .ribbons
var viewer = data.viewer
viewer = viewer == null && this.ribbons != null
? this.dom
: viewer
if(this.ribbons == null){
this.ribbons = Ribbons(viewer, this.images)
// XXX is this correct???
//this.ribbons.__image_updaters = [this.updateImage.bind(this)]
} else {
//this.ribbons.clear()
this.ribbons.images = this.images
}
this.reload()
}
}],
reload: [
function(){
@ -103,6 +130,8 @@ var RenderActions = actions.Actions({
}, 'screenheight', count, whole)
}],
// XXX do we need updateImage here???
centerImage: ['- Interface/Center an image in ribbon horizontally',
function(target, align, offset, scale){
// XXX

View File

@ -440,11 +440,14 @@ core.ImageGridFeatures.Feature({
tag: 'ui-ribbons-render',
exclusive: ['ui-render'],
depends: [
// XXX BUG: for some reason this causes a dependency conflict...
//'ui',
'base',
],
suggested: [
'ui-animation',
'ui-ribbons-edit-render',
'ui-partial-ribbons',
],
actions: RibbonsActions,
@ -697,7 +700,8 @@ core.ImageGridFeatures.Feature({
tag: 'ui-partial-ribbons',
exclusive: ['ui-partial-ribbons'],
depends: [
'ui'
//'ui',
'ui-ribbons-render',
],
suggested: [
'ui-partial-ribbons-precache',

View File

@ -173,6 +173,151 @@ var BaseRibbonsPrototype = {
}
},
// Helpers...
// Prevent CSS transitions...
//
// Prevent transitions globally (.viewer):
// .preventTransitions()
// -> data
//
// Prevent transitions on elem:
// .preventTransitions(elem)
// -> data
//
//
// NOTE: this will set a .no-transitions CSS class and force
// recalculation on the given element
// NOTE: for this to have effect proper CSS configuration is needed.
preventTransitions: function(target){
target = target || this.viewer
//prevent_nested = prevent_nested || false
if(target.length == 0){
return this
}
var t = target[0]
// handle nesting...
var l = t.getAttribute('__prevent_transitions')
if(l != null){
t.setAttribute('__prevent_transitions', parseInt(l)+1)
return this
}
t.setAttribute('__prevent_transitions', 0)
target.addClass('no-transitions')
var s = getComputedStyle(t)
s.webkitTransition
s.mozTransition
s.msTransition
s.oTransition
s.transition
return this
},
// Restore CSS transitions...
//
// This is a companion to .preventTransitions(..)
//
// Restore transitions globally (.viewer):
// .restoreTransitions()
// -> data
//
// Restore transitions on elem:
// .restoreTransitions(elem)
// -> data
//
// Restore transitions on elem (force sync):
// .restoreTransitions(elem, true)
// -> data
//
// Force restore transitions:
// .restoreTransitions(.., .., true)
// -> data
//
// When at least one .preventTransitions(..) is called with
// prevent_nested set to true, this will be a no-op on all nested
// levels.
// This can be overridden via setting the force to true.
//
// NOTE: the implementation of this method might seem ugly, but the
// code is speed-critical, thus we access the DOM directly and
// the two branches are unrolled...
restoreTransitions: function(target, now, force){
if(target === true || target === false){
now = target
target = this.viewer
} else {
target = target || this.viewer
}
if(target.length == 0){
return this
}
var t = target[0]
// sync...
if(now){
// handle nesting...
var l = t.getAttribute('__prevent_transitions')
if(l != null && !force && l != '0'){
t.setAttribute('__prevent_transitions', parseInt(l)-1)
return this
}
t.removeAttribute('__prevent_transitions')
target.removeClass('no-transitions')
var s = getComputedStyle(t)
s.webkitTransition
s.mozTransition
s.msTransition
s.oTransition
s.transition
// on next exec frame...
} else {
var that = this
setTimeout(function(){
// handle nesting...
var l = t.getAttribute('__prevent_transitions')
if(l != null && !force && l != '0'){
t.setAttribute('__prevent_transitions', l-1)
return this
}
t.removeAttribute('__prevent_transitions')
target.removeClass('no-transitions')
var s = getComputedStyle(t)
s.webkitTransition
s.mozTransition
s.msTransition
s.oTransition
s.transition
}, 0)
}
return this
},
// Shorthand wrappers of the above...
//
// XXX do we need custom target support here???
noTransitions: function(func){
this.preventTransitions()
func.apply(this, args2array(arguments).slice(1))
this.restoreTransitions(true)
return this
},
noTransitionsDeep: function(func){
this.preventTransitions(null, true)
func.apply(this, args2array(arguments).slice(1))
this.restoreTransitions(true)
return this
},
// Scale...
//
@ -863,151 +1008,6 @@ var RibbonsPrototype = {
createImage: RibbonsClassPrototype.createImage,
createMark: RibbonsClassPrototype.createMark,
// Helpers...
// Prevent CSS transitions...
//
// Prevent transitions globally (.viewer):
// .preventTransitions()
// -> data
//
// Prevent transitions on elem:
// .preventTransitions(elem)
// -> data
//
//
// NOTE: this will set a .no-transitions CSS class and force
// recalculation on the given element
// NOTE: for this to have effect proper CSS configuration is needed.
preventTransitions: function(target){
target = target || this.viewer
//prevent_nested = prevent_nested || false
if(target.length == 0){
return this
}
var t = target[0]
// handle nesting...
var l = t.getAttribute('__prevent_transitions')
if(l != null){
t.setAttribute('__prevent_transitions', parseInt(l)+1)
return this
}
t.setAttribute('__prevent_transitions', 0)
target.addClass('no-transitions')
var s = getComputedStyle(t)
s.webkitTransition
s.mozTransition
s.msTransition
s.oTransition
s.transition
return this
},
// Restore CSS transitions...
//
// This is a companion to .preventTransitions(..)
//
// Restore transitions globally (.viewer):
// .restoreTransitions()
// -> data
//
// Restore transitions on elem:
// .restoreTransitions(elem)
// -> data
//
// Restore transitions on elem (force sync):
// .restoreTransitions(elem, true)
// -> data
//
// Force restore transitions:
// .restoreTransitions(.., .., true)
// -> data
//
// When at least one .preventTransitions(..) is called with
// prevent_nested set to true, this will be a no-op on all nested
// levels.
// This can be overridden via setting the force to true.
//
// NOTE: the implementation of this method might seem ugly, but the
// code is speed-critical, thus we access the DOM directly and
// the two branches are unrolled...
restoreTransitions: function(target, now, force){
if(target === true || target === false){
now = target
target = this.viewer
} else {
target = target || this.viewer
}
if(target.length == 0){
return this
}
var t = target[0]
// sync...
if(now){
// handle nesting...
var l = t.getAttribute('__prevent_transitions')
if(l != null && !force && l != '0'){
t.setAttribute('__prevent_transitions', parseInt(l)-1)
return this
}
t.removeAttribute('__prevent_transitions')
target.removeClass('no-transitions')
var s = getComputedStyle(t)
s.webkitTransition
s.mozTransition
s.msTransition
s.oTransition
s.transition
// on next exec frame...
} else {
var that = this
setTimeout(function(){
// handle nesting...
var l = t.getAttribute('__prevent_transitions')
if(l != null && !force && l != '0'){
t.setAttribute('__prevent_transitions', l-1)
return this
}
t.removeAttribute('__prevent_transitions')
target.removeClass('no-transitions')
var s = getComputedStyle(t)
s.webkitTransition
s.mozTransition
s.msTransition
s.oTransition
s.transition
}, 0)
}
return this
},
// Shorthand wrappers of the above...
//
// XXX do we need custom target support here???
noTransitions: function(func){
this.preventTransitions()
func.apply(this, args2array(arguments).slice(1))
this.restoreTransitions(true)
return this
},
noTransitionsDeep: function(func){
this.preventTransitions(null, true)
func.apply(this, args2array(arguments).slice(1))
this.restoreTransitions(true)
return this
},
// Rotate...
//
// Get ribbon rotation angle...

View File

@ -119,6 +119,8 @@ $(function(){
//'-ui-partial-ribbons',
])
window.ImageGridFeatures = viewer.ImageGridFeatures
} catch(err){
console.error(err)
return