pox 0.2.2

data/vendor/assets/javascripts/pox/transition.js

@@ -0,0 +1,316 @@
+//= require ./browser
+//= require ./animate
+
+(function(){
+	"use strict";
+	
+	var ConvertTransformToStyle = {
+		convertTransformToCss: function(animateProperties, failbackProperties) {
+			var properties = this.cssProperties["transform"];
+			
+			for (var name in properties) {
+				var value = properties[name];
+				var failback = function() {
+					failbackProperties["transform-" + name] = value;
+				};
+				
+				if (name == "translate") {
+					var offsetArray = value.split(/[, ]+/);
+					
+					this.buildTranslateProperty({
+						left: offsetArray[0],
+						top: offsetArray[1]
+					}, animateProperties, failbackProperties, failback);
+				} else if (name == "translateX") {
+					this.buildTranslateProperty({
+						left: properties[name]
+					}, animateProperties, failbackProperties, failback);
+				} else if (name == "translateY") {
+					this.buildTranslateProperty({
+						top: properties[name]
+					}, animateProperties, failbackProperties, failback);
+				} else {
+					failback();
+				}
+			}
+		},
+		
+		buildTranslateProperty: function(offset, animateProperties, failbackProperties, failback) {
+			var position = Pox.getStyle(this.element, "position");
+			var animateStyles = {};
+			
+			if (position != "absolute") {
+				return failback();
+			}
+			
+			this.element.originStyles = this.element.originStyles || {};
+			
+			for (var property in offset) {
+				if (this.cssProperties[property]) {
+					return failback();
+				}
+				
+				var offsetValue = offset[property];
+				
+				if (offsetValue == null || offsetValue === "" || parseFloat(offsetValue) == 0) {
+					offsetValue = "0px";
+				}
+				
+				if (!/\px$/.test(offsetValue)) {
+					return failback();
+				}
+				
+				var originValue = this.element.originStyles[property] || Pox.getComputedStyle(this.element, property);
+				
+				if (originValue == null) {
+					return failback();
+				}
+				
+				this.element.originStyles[property] = originValue;
+				animateStyles[property] = parseFloat(originValue) + parseFloat(offsetValue) + "px";
+			}
+
+			Pox.extend(animateProperties, animateStyles);
+		}
+	};
+	
+	/** @lends Pox */
+	var WebkitTransition = Pox.clazz({
+		element: null,
+		duration: 400,
+		delay: 0,
+		cssProperties: {},
+		complete: function() { },
+		failback: function(failbackProperties, transition) {
+			var failbackString = "these properties is not supported: ";
+			for (var key in failbackProperties) {
+				failbackString += key + ": " + failbackProperties[key] + ", ";
+			}
+			alert(failbackString);
+		},
+		
+		exec: function() {
+			var failbackProperties = {};
+			var prevTransition = this.element.dataWebkitTransition;
+			if (prevTransition) {
+				prevTransition.unbindEvents();
+			}
+			
+			this.element.dataWebkitTransition = this;
+			
+			if (this.duration === 0) {
+				this.complete();
+			} else {
+				this.bindEvents();
+			}
+			this.applyStyles(failbackProperties);
+			
+			if (!Pox.isEmpty(failbackProperties, this)) {
+				this.failback(failbackProperties);
+			}
+			
+			
+		},
+		
+		unbindEvents: function() {
+			if (this._completeBindWrapper) {
+				this.element.removeEventListener("webkitTransitionEnd", this._completeBindWrapper);
+				this._completeBindWrapper = null;
+			}
+		},
+		
+		bindEvents: function() {
+			var self = this;
+			this._completeBindWrapper = function(event) {
+				self.unbindEvents();
+				return self.complete();
+			}
+			
+			this.element.addEventListener("webkitTransitionEnd", this._completeBindWrapper, false);
+		},
+		
+		applyStyles: function(failbackProperties) {
+			this.element.style.webkitTransitionDelay = this.delay + "ms";
+			this.element.style.webkitTransitionDuration = this.duration + "ms";
+			
+			var propertyNames = []
+			for (var name in this.cssProperties) {
+				var value = this.cssProperties[name];
+				
+				if (name == "transform") {
+					this.buildTransformStyle(failbackProperties);
+				} else {
+					this.element.style[name] = value;
+				}
+				
+				propertyNames.push(name);
+			}
+			this.element.style.webkitTransitionProperty = propertyNames.join(", ");
+		},
+		
+		buildTransformStyle: function(failbackProperties) {
+			var properties = this.cssProperties["transform"];
+			
+			if (Pox.Browser.supportWebkitTransform) {
+				var styles = [];
+				
+				for (var name in properties) {
+					if ( name == "origin" ) {
+						this.element.style["-webkit-transform-origin"] = properties[name];
+					} else {
+						styles.push(name + "(" + properties[name] + ")");
+					}
+					
+				}
+				
+				this.element.style["-webkit-transform"] = styles.join(" ");
+				
+			} else {
+				this.convertTransformToCss(this.cssProperties, failbackProperties);
+			}
+		}
+	}, ConvertTransformToStyle);
+	
+	/**
+	 * 元素滑动(css3滑动)
+	 * @param {HTMLElement} element
+	 * @param {object} options
+	 * @param {number} [options.duration=400] 滑动时长
+	 * @param {object} options.cssProperties 样式
+	 * @param {function} [options.complete] 滑动成功后的回调函数
+	 * @param {function} [options.failback] 滑动失败后的回调函数
+	 * @example <caption>Example usage of webkitTransition.</caption>
+	 * $p.webkitTransition(element, {
+	 *	duration: 200,
+	 *	cssProperties: {
+	 *		transform: {
+	 *			translate: "300px, 200px",
+	 *			rotate: "-80deg",
+	 *			origin: "80% 80%"
+	 *		},
+	 *		height: "300px",
+	 *		width: "400px"
+	 *	},
+	 *	complete: function() {},
+	 *	failback: function() {},
+	 *  });
+	 */
+	Pox.webkitTransition = function(element, customOptions) {
+		var webkitTransition = Pox.instance(WebkitTransition, customOptions);
+		webkitTransition.element = element;
+		webkitTransition.exec();
+	};
+
+
+
+	var AnimateTransition = Pox.clazz({
+		element: null,
+		duration: 400,
+		delay: 0,
+		complete: function() { },
+		cssProperties: {},
+		failback: function(failbackProperties, transition) {
+			var failbackString = "these properties is not supported: ";
+			for (var key in failbackProperties) {
+				failbackString += key + ": " + failbackProperties[key] + ", ";
+			}
+			alert(failbackString);
+		},
+		
+		exec: function() {
+			var animateProperties = {},
+				failbackProperties = {};
+			
+			this.buildAnimateStyles(animateProperties, failbackProperties);
+			
+			Pox.animate(this.element, {
+				duration: this.duration,
+				complete: this.complete,
+				styles: animateProperties
+			});
+			
+			if (!Pox.isEmpty(failbackProperties, this)) {
+				this.failback(failbackProperties);
+			}
+		},
+		
+		buildAnimateStyles: function(animateProperties, failbackProperties) {
+			var SUPPORT_ANIMATE_NAMES = ["left", "top", "right", "bottom", "width", "height", "opacity"];
+			
+			for (var name in this.cssProperties) {
+				var value = this.cssProperties[name];
+				
+				if (Pox.contains(SUPPORT_ANIMATE_NAMES, name)) {
+					animateProperties[name] = value;
+				} else if (name == "transform") {
+					this.convertTransformToCss(animateProperties, failbackProperties);
+				} else {
+					failbackProperties[name] = value;
+				}
+			}
+		}
+	}, ConvertTransformToStyle);
+
+	 /**
+	 * 元素滑动(支持js滑动)
+	 * @param {HTMLElement} element
+	 * @param {object} options
+	 * @param {number} [options.duration=400] 滑动时长
+	 * @param {object} options.cssProperties 样式
+	 * @param {function} [options.complete] 滑动成功后的回调函数
+	 * @param {function} [options.failback] 滑动失败后的回调函数
+	 * @example <caption>Example usage of webkitTransition.</caption>
+	 * $p.transition(element, {
+	 *	duration: 200,
+	 *	cssProperties: {
+	 *		transform: {
+	 *			translate: "300px, 200px",
+	 *			rotate: "-80deg",
+	 *			origin: "80% 80%"
+	 *		},
+	 *		height: "300px",
+	 *		width: "400px"
+	 *	},
+	 *	complete: function() {},
+	 *	failback: function() {}
+	 *  });
+	 */
+	Pox.animateTransition = function(element, customOptions) {
+		var animateTransition = Pox.instance(AnimateTransition, customOptions);
+		animateTransition.element = element;
+		animateTransition.exec();
+	};
+
+	 /**
+	 * 元素滑动(支持js滑动和css3滑动)
+	 * @param {HTMLElement} element
+	 * @param {object} options
+	 * @param {number} [options.duration=400] 滑动时长
+	 * @param {object} options.cssProperties 样式
+	 * @param {function} [options.complete] 滑动成功后的回调函数
+	 * @param {function} [options.failback] 滑动失败后的回调函数
+	 * @example <caption>Example usage of webkitTransition.</caption>
+	 * $p.transition(element, {
+	 *	duration: 200,
+	 *	cssProperties: {
+	 *		transform: {
+	 *			translate: "300px, 200px",
+	 *			rotate: "-80deg",
+	 *			origin: "80% 80%"
+	 *		},
+	 *		height: "300px",
+	 *		width: "400px"
+	 *	},
+	 *	complete: function() {},
+	 *	failback: function() {}
+	 *  });
+	 */
+	Pox.transition = function(element, options) {
+		if (Pox.Browser.supportWebkitTransition) {
+			Pox.webkitTransition(element, options);
+		} else {
+			Pox.animateTransition(element, options);
+		}
+	};
+
+})()

metadata

@@ -0,0 +1,85 @@
+--- !ruby/object:Gem::Specification
+name: pox
+version: !ruby/object:Gem::Version
+  version: 0.2.2
+platform: ruby
+authors:
+- nmzhu
+- gxw
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-06-30 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: assets for ipanel
+email:
+- nmzhu@b-star.cn
+- xwgou@b-star.cn
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- CHANGELOG.md
+- Gemfile
+- LICENSE
+- README.md
+- Rakefile
+- lib/pox.rb
+- lib/pox/engine.rb
+- lib/pox/version.rb
+- pox.gemspec
+- vendor/assets/javascripts/agent/adaptor-cos.js
+- vendor/assets/javascripts/agent/adaptor-default.js
+- vendor/assets/javascripts/agent/adaptor-ipanel.js
+- vendor/assets/javascripts/agent/adaptor-vision.js
+- vendor/assets/javascripts/agent/core.js
+- vendor/assets/javascripts/build-in.js
+- vendor/assets/javascripts/pox.js
+- vendor/assets/javascripts/pox/ajax.js
+- vendor/assets/javascripts/pox/all.js
+- vendor/assets/javascripts/pox/animate.js
+- vendor/assets/javascripts/pox/browser.js
+- vendor/assets/javascripts/pox/core.js
+- vendor/assets/javascripts/pox/debugger.js
+- vendor/assets/javascripts/pox/dom.js
+- vendor/assets/javascripts/pox/transition.js
+homepage: 
+licenses: []
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.2.2
+signing_key: 
+specification_version: 4
+summary: assets for ipanel
+test_files: []
+has_rdoc: