password-manager/frontend/delta/js/Clipperz/Visual.js
2013-08-30 23:23:42 +02:00

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
);
};
//=============================================================================