364 lines
11 KiB
JavaScript
364 lines
11 KiB
JavaScript
/*
|
|
|
|
Copyright 2008-2013 Clipperz Srl
|
|
|
|
This file is part of Clipperz, the online password manager.
|
|
For further information about its features and functionalities please
|
|
refer to http://www.clipperz.com.
|
|
|
|
* Clipperz is free software: you can redistribute it and/or modify it
|
|
under the terms of the GNU Affero General Public License as published
|
|
by the Free Software Foundation, either version 3 of the License, or
|
|
(at your option) any later version.
|
|
|
|
* Clipperz is distributed in the hope that it will be useful, but
|
|
WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
|
|
See the GNU Affero General Public License for more details.
|
|
|
|
* You should have received a copy of the GNU Affero General Public
|
|
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
|
|
|
|
*/
|
|
|
|
if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
|
|
if (typeof(Clipperz.Visual) == 'undefined') { Clipperz.Visual = {}; }
|
|
|
|
Clipperz.Visual.VERSION = "0.1";
|
|
Clipperz.Visual.NAME = "Clipperz.Visual";
|
|
|
|
MochiKit.Base.update(Clipperz.Visual, {
|
|
|
|
//-------------------------------------------------------------------------
|
|
|
|
'__repr__': function () {
|
|
return "[" + this.NAME + " " + this.VERSION + "]";
|
|
},
|
|
|
|
//-------------------------------------------------------------------------
|
|
|
|
'toString': function () {
|
|
return this.__repr__();
|
|
},
|
|
|
|
//-------------------------------------------------------------------------
|
|
|
|
'deferredResize': function (anElement, someOptions) {
|
|
var deferredResult;
|
|
var moveTransition;
|
|
var scaleTransition;
|
|
var duration;
|
|
|
|
duration = someOptions.duration || 0.5;
|
|
|
|
deferredResult = new Clipperz.Async.Deferred("Visual.deferredResize", {trace:false});
|
|
deferredResult.addCallback(MochiKit.Async.succeed, arguments[arguments.length - 1]);
|
|
|
|
moveTransition = MochiKit.Visual.Transitions.linear; //MochiKit.Visual.Transitions.sinoidal;
|
|
scaleTransition = MochiKit.Visual.Transitions.linear; //MochiKit.Visual.Transitions.sinoidal;
|
|
|
|
MochiKit.Style.setElementPosition(anElement, {x:someOptions.from.position.x, y:someOptions.from.position.y }, 'px');
|
|
|
|
new MochiKit.Visual.Parallel([
|
|
new MochiKit.Visual.Move(anElement, {x:someOptions.to.position.x, y:someOptions.to.position.y, mode:'absolute', transition:moveTransition, sync:true}),
|
|
new Clipperz.Visual.Resize(anElement, {fromSize:{h:someOptions.from.dimensions.h, w:someOptions.from.dimensions.w}, toSize:{h:someOptions.to.dimensions.h, w:someOptions.to.dimensions.w}, transition:scaleTransition, scaleContent:false, scaleFromCenter:false, restoreAfterFinish:true, sync:true})
|
|
], {duration:duration, afterFinish:MochiKit.Base.method(deferredResult, 'callback')})
|
|
|
|
return deferredResult;
|
|
},
|
|
|
|
//-------------------------------------------------------------------------
|
|
|
|
'deferredAnimation': function (anAnimation, someParameters, someOptions) {
|
|
var deferredResult;
|
|
var afterFinishCallback;
|
|
var options;
|
|
|
|
deferredResult = new Clipperz.Async.Deferred("Clipperz.Visual.deferredAnimation", {trace:false});
|
|
deferredResult.addCallback(MochiKit.Async.succeed, arguments[arguments.length - 1]);
|
|
|
|
if (MochiKit.Base.isUndefinedOrNull(someOptions)) {
|
|
options = {}
|
|
} else {
|
|
options = someOptions;
|
|
}
|
|
|
|
if (MochiKit.Base.isUndefinedOrNull(someOptions['afterFinish'])) {
|
|
options['afterFinish'] = MochiKit.Base.noop;
|
|
}
|
|
|
|
MochiKit.Base.update(options, {
|
|
'afterFinish': MochiKit.Base.compose(options['afterFinish'], MochiKit.Base.method(deferredResult, 'callback'))
|
|
});
|
|
|
|
new anAnimation(someParameters, options);
|
|
|
|
return deferredResult;
|
|
},
|
|
|
|
//-------------------------------------------------------------------------
|
|
|
|
'deferredAnimations': function (aSinchronizationType, someAnimations, someOptions) {
|
|
var deferredResult;
|
|
var options;
|
|
|
|
deferredResult = new Clipperz.Async.Deferred("Visual.deferredParallelAnimations", {trace:false});
|
|
deferredResult.addCallback(MochiKit.Async.succeed, arguments[arguments.length - 1]);
|
|
|
|
options = someOptions;
|
|
if (MochiKit.Base.isUndefinedOrNull(someOptions['afterFinish'])) {
|
|
options['afterFinish'] = MochiKit.Base.noop;
|
|
}
|
|
MochiKit.Base.update(options, {
|
|
'afterFinish': MochiKit.Base.compose(options['afterFinish'], MochiKit.Base.method(deferredResult, 'callback'))
|
|
});
|
|
|
|
new aSinchronizationType(someAnimations, options)
|
|
|
|
return deferredResult;
|
|
},
|
|
|
|
//-------------------------------------------------------------------------
|
|
__syntaxFix__: "syntax fix"
|
|
|
|
});
|
|
|
|
//#############################################################################
|
|
|
|
/** @id Clipperz.Visual.Resize */
|
|
Clipperz.Visual.Resize = function (element, percent, options) {
|
|
var cls = arguments.callee;
|
|
if (!(this instanceof cls)) {
|
|
return new cls(element, percent, options);
|
|
}
|
|
this.__init__(element, percent, options);
|
|
};
|
|
|
|
Clipperz.Visual.Resize.prototype = new MochiKit.Visual.Base();
|
|
|
|
MochiKit.Base.update(Clipperz.Visual.Resize.prototype, {
|
|
__class__ : Clipperz.Visual.Resize,
|
|
|
|
__init__: function (element, options) {
|
|
this.element = MochiKit.DOM.getElement(element);
|
|
options = MochiKit.Base.update({
|
|
scaleX: true,
|
|
scaleY: true,
|
|
scaleContent: true,
|
|
scaleFromCenter: false,
|
|
scaleMode: 'box', // 'box' or 'contents' or {} with provided values
|
|
syntax_fix: 'syntax fix'
|
|
}, options);
|
|
|
|
this.start(options);
|
|
},
|
|
|
|
setup: function () {
|
|
this.restoreAfterFinish = this.options.restoreAfterFinish || false;
|
|
this.elementPositioning = MochiKit.Style.getStyle(this.element, 'position');
|
|
|
|
var ma = MochiKit.Base.map;
|
|
var b = MochiKit.Base.bind;
|
|
this.originalStyle = {};
|
|
ma(b(function (k) { this.originalStyle[k] = this.element.style[k]; }, this), ['top', 'left', 'width', 'height', 'fontSize']);
|
|
|
|
this.originalTop = this.element.offsetTop;
|
|
this.originalLeft = this.element.offsetLeft;
|
|
|
|
var fontSize = MochiKit.Style.getStyle(this.element, 'font-size') || '100%';
|
|
ma(b(function (fontSizeType) {
|
|
if (fontSize.indexOf(fontSizeType) > 0) {
|
|
this.fontSize = parseFloat(fontSize);
|
|
this.fontSizeType = fontSizeType;
|
|
}
|
|
}, this), ['em', 'px', '%']);
|
|
|
|
this.factor = 1;
|
|
|
|
this.dims = [this.options.fromSize.h, this.options.fromSize.w];
|
|
},
|
|
|
|
update: function (position) {
|
|
this.setDimensions( (this.options.toSize.h - this.options.fromSize.h) * position + this.options.fromSize.h,
|
|
(this.options.toSize.w - this.options.fromSize.w) * position + this.options.fromSize.w);
|
|
},
|
|
|
|
finish: function () {
|
|
if (this.restoreAfterFinish) {
|
|
MochiKit.Style.setStyle(this.element, this.originalStyle);
|
|
}
|
|
},
|
|
|
|
setDimensions: function (height, width) {
|
|
var d = {};
|
|
var r = Math.round;
|
|
if (/MSIE/.test(navigator.userAgent)) {
|
|
r = Math.ceil;
|
|
}
|
|
if (this.options.scaleX) {
|
|
d.width = r(width) + 'px';
|
|
}
|
|
if (this.options.scaleY) {
|
|
d.height = r(height) + 'px';
|
|
}
|
|
if (this.options.scaleFromCenter) {
|
|
var topd = (height - this.dims[0])/2;
|
|
var leftd = (width - this.dims[1])/2;
|
|
if (this.elementPositioning == 'absolute') {
|
|
if (this.options.scaleY) {
|
|
d.top = this.originalTop - topd + 'px';
|
|
}
|
|
if (this.options.scaleX) {
|
|
d.left = this.originalLeft - leftd + 'px';
|
|
}
|
|
} else {
|
|
if (this.options.scaleY) {
|
|
d.top = -topd + 'px';
|
|
}
|
|
if (this.options.scaleX) {
|
|
d.left = -leftd + 'px';
|
|
}
|
|
}
|
|
}
|
|
MochiKit.Style.setStyle(this.element, d);
|
|
}
|
|
});
|
|
|
|
//=============================================================================
|
|
|
|
Clipperz.Visual.squize = function (element, /* optional */ options) {
|
|
var d = MochiKit.DOM;
|
|
var v = MochiKit.Visual;
|
|
var s = MochiKit.Style;
|
|
|
|
element = d.getElement(element);
|
|
options = MochiKit.Base.update({
|
|
moveTransition: v.Transitions.sinoidal,
|
|
scaleTransition: v.Transitions.sinoidal,
|
|
opacityTransition: v.Transitions.none,
|
|
scaleContent: true,
|
|
scaleFromCenter: false,
|
|
scaleX: true,
|
|
scaleY: true
|
|
}, options);
|
|
var oldStyle = {
|
|
top: element.style.top,
|
|
left: element.style.left,
|
|
height: element.style.height,
|
|
width: element.style.width,
|
|
opacity: s.getStyle(element, 'opacity')
|
|
};
|
|
|
|
var dims = s.getElementDimensions(element, true);
|
|
var moveX, moveY;
|
|
|
|
moveX = options.scaleX ? dims.w/2 : 0;
|
|
moveY = options.scaleY ? dims.h/2 : 0;
|
|
|
|
var elemClip;
|
|
|
|
var optionsParallel = MochiKit.Base.update({
|
|
beforeStartInternal: function (effect) {
|
|
s.makePositioned(effect.effects[0].element);
|
|
elemClip = s.makeClipping(effect.effects[0].element);
|
|
},
|
|
afterFinishInternal: function (effect) {
|
|
s.hideElement(effect.effects[0].element);
|
|
s.undoClipping(effect.effects[0].element, elemClip);
|
|
s.undoPositioned(effect.effects[0].element);
|
|
s.setStyle(effect.effects[0].element, oldStyle);
|
|
}
|
|
}, options);
|
|
|
|
return new v.Parallel(
|
|
[new v.Opacity(element, {
|
|
sync: true, to: 0.0, from: 1.0,
|
|
transition: options.opacityTransition
|
|
}),
|
|
new v.Scale(element, /Opera/.test(navigator.userAgent) ? 1 : 0, {
|
|
scaleMode: {originalHeight: dims.h, originalWidth: dims.w},
|
|
sync: true, transition: options.scaleTransition,
|
|
scaleContent: options.scaleContent,
|
|
scaleFromCenter: options.scaleFromCenter,
|
|
restoreAfterFinish: true,
|
|
scaleX: options.scaleX,
|
|
scaleY: options.scaleY
|
|
}),
|
|
new v.Move(element, {
|
|
x: moveX, y: moveY, sync: true, transition: options.moveTransition
|
|
})
|
|
], optionsParallel
|
|
);
|
|
};
|
|
|
|
//-----------------------------------------------------------------------------
|
|
|
|
Clipperz.Visual.expand = function (element, /* optional */ options) {
|
|
var d = MochiKit.DOM;
|
|
var v = MochiKit.Visual;
|
|
var s = MochiKit.Style;
|
|
|
|
element = d.getElement(element);
|
|
options = MochiKit.Base.update({
|
|
// direction: 'center',
|
|
moveTransition: v.Transitions.sinoidal,
|
|
scaleTransition: v.Transitions.sinoidal,
|
|
opacityTransition: v.Transitions.none,
|
|
scaleContent: true,
|
|
scaleFromCenter: false,
|
|
scaleX: true,
|
|
scaleY: true
|
|
}, options);
|
|
var oldStyle = {
|
|
top: element.style.top,
|
|
left: element.style.left,
|
|
height: element.style.height,
|
|
width: element.style.width,
|
|
opacity: s.getStyle(element, 'opacity')
|
|
};
|
|
|
|
var dims = s.getElementDimensions(element, true);
|
|
var moveX, moveY;
|
|
|
|
moveX = options.scaleX ? dims.w/2 : 0;
|
|
moveY = options.scaleY ? dims.h/2 : 0;
|
|
|
|
var elemClip;
|
|
|
|
var optionsParallel = MochiKit.Base.update({
|
|
beforeStartInternal: function (effect) {
|
|
s.makePositioned(effect.effects[0].element);
|
|
elemClip = s.makeClipping(effect.effects[0].element);
|
|
},
|
|
afterFinishInternal: function (effect) {
|
|
s.hideElement(effect.effects[0].element);
|
|
s.undoClipping(effect.effects[0].element, elemClip);
|
|
s.undoPositioned(effect.effects[0].element);
|
|
s.setStyle(effect.effects[0].element, oldStyle);
|
|
}
|
|
}, options);
|
|
|
|
return new v.Parallel(
|
|
[new v.Opacity(element, {
|
|
sync: true, to: 0.0, from: 1.0,
|
|
transition: options.opacityTransition
|
|
}),
|
|
new v.Scale(element, /Opera/.test(navigator.userAgent) ? 1 : 0, {
|
|
scaleMode: {originalHeight: dims.h, originalWidth: dims.w},
|
|
sync: true, transition: options.scaleTransition,
|
|
scaleContent: options.scaleContent,
|
|
scaleFromCenter: options.scaleFromCenter,
|
|
restoreAfterFinish: true,
|
|
scaleX: options.scaleX,
|
|
scaleY: options.scaleY
|
|
}),
|
|
new v.Move(element, {
|
|
x: moveX, y: moveY, sync: true, transition: options.moveTransition
|
|
})
|
|
], optionsParallel
|
|
);
|
|
};
|
|
|
|
//=============================================================================
|
|
|