password-manager/frontend/gamma/js/Clipperz/Visual.js

/*

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

//=============================================================================