stowing UI stuff in empty branchui-mocks

1 files changed, 119 insertions, 0 deletions

diff --git a/assets/javascripts/mx/primitives/mx.texturedBox.js b/assets/javascripts/mx/primitives/mx.texturedBox.js
new file mode 100644
index 0000000..34668d4
--- /dev/null
+++ b/assets/javascripts/mx/primitives/mx.texturedBox.js
@@ -0,0 +1,119 @@
+// Creates a box using a given texture image.
+// Uses a texture image like this:
+//
+//             ---------- ----------
+//            |          |          |
+//            |   top    |  bottom  |
+//            |          |          |
+//  ---------- ---------- ---------- ----------
+// |          |          |          |          |
+// |   left   |  front   |  right   |   back   |
+// |          |          |          |          |
+//  ---------- ---------- ---------- ----------
+//
+// See `examples/images/skins/` for some minecraft skin examples.
+
+// Options:
+//
+//   - {number} `width`
+//   - {number} `height`
+//   - {number} `depth`
+//   - {string} `texture` path to texture image
+//   - {string} `classname` class to be added to dom element
+
+MX.TexturedBox = MX.Object3D.extend({
+
+    init: function (ops) {
+
+        if (!ops.width || !ops.height || !ops.depth || (!ops.texture && !ops.classname)) {
+            console.warn('TextureBox: missing arguments')
+            return
+        }
+
+        // faces
+        var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2),
+            offsetX = ops.offset ? (ops.offset.x || 0) : 0,
+            offsetY = ops.offset ? (ops.offset.y || 0) : 0,
+            overlap = ops.overlap ? ops.overlap : 0
+        var multiTexture = typeof ops.texture == "object";
+
+        var top = this.top = new MX.Object3D()
+        top.width = ops.width
+        top.height = ops.depth
+        top.rotationX = angle
+        top.y = ops.height / 2 - overlap
+        if (!multiTexture)
+        top.el.style.backgroundPosition =
+            (-(offsetX + ops.depth) + 'px ') +
+            (-offsetY + 'px')
+
+        var bottom = this.bottom = new MX.Object3D()
+        bottom.width = ops.width
+        bottom.height = ops.depth
+        bottom.rotationX = -angle
+        bottom.y = -ops.height / 2 + overlap
+        if (!multiTexture)
+        bottom.el.style.backgroundPosition =
+            (-(offsetX + ops.depth + ops.width) + 'px ') +
+            (-offsetY + 'px')
+
+        var left = this.left = new MX.Object3D()
+        left.width = ops.depth
+        left.height = ops.height
+        left.rotationY = -angle
+        left.x = -ops.width / 2 + overlap
+        if (!multiTexture)
+        left.el.style.backgroundPosition =
+            (-offsetX + 'px ') +
+            (-(offsetY + ops.depth) + 'px')
+
+        var right = this.right = new MX.Object3D()
+        right.width = ops.depth
+        right.height = ops.height
+        right.rotationY = angle
+        right.x = ops.width / 2 - overlap
+        if (!multiTexture)
+        right.el.style.backgroundPosition =
+            (-(offsetX + ops.depth + ops.width) + 'px ') +
+            (-(offsetY + ops.depth) + 'px')
+
+        var front = this.front = new MX.Object3D()
+        front.width = ops.width
+        front.height = ops.height
+        front.z = -ops.depth / 2 + overlap
+        if (!multiTexture)
+        front.el.style.backgroundPosition =
+            (-(offsetX + ops.depth) + 'px ') +
+            (-(offsetY + ops.depth) + 'px')
+
+        var back = this.back = new MX.Object3D()
+        back.width = ops.width
+        back.height = ops.height
+        back.rotationY = angle * 2
+        back.z = ops.depth / 2 - overlap
+        if (!multiTexture)
+        back.el.style.backgroundPosition =
+            (-(offsetX + ops.depth * 2 + ops.width) + 'px ') +
+            (-(offsetY + ops.depth) + 'px')
+
+        this.add(top, bottom, left, right, front, back)
+
+        this.children.forEach(function (c,i) {
+            if (multiTexture) {
+                c.el.style.backgroundImage = 'url(' + ops.texture[i] + ')'
+            }
+            else if (ops.texture) {
+                c.el.style.backgroundImage = 'url(' + ops.texture + ')'
+            }
+            if (ops.classname) {
+                c.el.classList.add(ops.classname)
+            }
+            c.el.style.backgroundRepeat = 'no-repeat'
+        })
+
+        this.update()
+        this.updateChildren = false
+
+    }
+
+})