mirror of
http://git.whoc.org.uk/git/password-manager.git
synced 2025-12-17 03:47:04 +01:00
First release of /delta version
This commit is contained in:
Giulio Cesare Solaroli
363
frontend/delta/js/Clipperz/Visual.js
Normal file
363
frontend/delta/js/Clipperz/Visual.js
Normal file
@@ -0,0 +1,363 @@
|
||||
/*
|
||||
|
||||
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
|
||||
);
|
||||
};
|
||||
|
||||
//=============================================================================
|
||||
|
||||
Reference in New Issue
Block a user