stowing UI stuff in empty branchui-mocks

1 files changed, 62 insertions, 0 deletions

diff --git a/assets/javascripts/mx/primitives/mx.box.js b/assets/javascripts/mx/primitives/mx.box.js
new file mode 100644
index 0000000..9f053da
--- /dev/null
+++ b/assets/javascripts/mx/primitives/mx.box.js
@@ -0,0 +1,62 @@
+MX.Box = MX.Object3D.extend({
+
+	// this will be called within the contructor
+	init: function (size, color, borderColor) {
+
+		this.type = "Box"
+
+		size = size || 100
+		color = color || 'rgba(0, 255, 122, .1)'
+		borderColor = borderColor || '#0f3'
+
+		// an Object3D's associated DOM node is the "el" property
+		this.el.classList.add('box')
+
+		var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2)
+
+		var top = this.top = new MX.Object3D('.face')
+		top.rotationX = angle
+		top.y = size / 2
+
+		var bottom = this.bottom = new MX.Object3D('.face')
+		bottom.rotationX = -angle
+		bottom.y = -size / 2
+
+		var left = this.left = new MX.Object3D('.face')
+		left.rotationY = -angle
+		left.x = -size / 2
+
+		var right = this.right = new MX.Object3D('.face')
+		right.rotationY = angle
+		right.x = size / 2
+
+		var front = this.front = new MX.Object3D('.face')
+		front.z = -size / 2
+
+		var back = this.back = new MX.Object3D('.face')
+		back.rotationY = angle * 2
+		back.z = size / 2
+
+		// adding children, must also be instances of Object3D
+		this.add(top, bottom, left, right, front, back)
+
+		this.children.forEach(function (face) {
+			face.width = size - 2
+			face.height = size - 2
+			face.el.style.backgroundColor = color
+			face.el.style.border = '1px solid ' + borderColor
+		})
+
+		// this applies the updated CSS style
+		// required for any change to take effect
+		// when a parent object's update() is called
+		// all its children will be updated as well
+		this.update()
+
+		// if this object's children won't move by themselves
+		this.updateChildren = false
+	}
+
+	// other properties will be mixed into the prototype of the new constructor
+
+})
\ No newline at end of file