diff options
Diffstat (limited to 'public/assets/javascripts/mx/primitives')
| -rw-r--r-- | public/assets/javascripts/mx/primitives/mx.embed.js | 66 | ||||
| -rw-r--r-- | public/assets/javascripts/mx/primitives/mx.image.js | 6 | ||||
| -rw-r--r-- | public/assets/javascripts/mx/primitives/mx.video.js | 59 |
3 files changed, 126 insertions, 5 deletions
diff --git a/public/assets/javascripts/mx/primitives/mx.embed.js b/public/assets/javascripts/mx/primitives/mx.embed.js new file mode 100644 index 0000000..f15ec98 --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.embed.js @@ -0,0 +1,66 @@ +MX.Embed = MX.Object3D.extend({ + + init: function (ops) { + + this.type = "Embed" + + var layer = this + layer.media = ops.media + layer.width = ops.media.width + layer.height = ops.media.height + layer.x = ops.x || 0 + layer.y = ops.y || 0 + layer.z = ops.z || 0 + layer.scale = ops.scale || 1 + layer.backface = ops.backface || false + + if (layer.backface) { + layer.el.classList.add("backface-visible") + } + + if (ops.src) { + this.loadEmbed(ops) + } + + if (ops.className) { + layer.el.classList.add(ops.className) + } + layer.el.style.backgroundRepeat = 'no-repeat' + + }, + + loadEmbed: function(ops){ + var layer = this + layer.ops = defaults(ops, layer.ops) + +// layer.scale = layer.ops.scale || 1 +// layer.width = layer.ops.width || image.naturalWidth +// layer.height = layer.ops.height || image.naturalHeight +// layer.x = layer.ops.x || 0 +// layer.y = layer.ops.y || 0 +// layer.z = layer.ops.z || 0 +// layer.rotationX = layer.ops.rotationX || 0 +// layer.rotationY = layer.ops.rotationY || 0 +// layer.rotationZ = layer.ops.rotationZ || 0 +// layer.el.style.backgroundImage = "url(" + image.src + ")" +// layer.el.classList.add('image') +// layer.dirty = true +// layer.update() + }, + + move: function(ops){ + var layer = this + layer.ops = defaults(ops, layer.ops) + for (var i in ops) { + layer[i] = ops[i] + } + layer.dirty = true + layer.update() + }, + + toString: function(){ + var params = "id src width height depth x y z rotationX rotationY rotationZ scale".split(" ") + return this.__toString(params) + }, + +}) diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js index e36c857..6ddc5d8 100644 --- a/public/assets/javascripts/mx/primitives/mx.image.js +++ b/public/assets/javascripts/mx/primitives/mx.image.js @@ -25,16 +25,12 @@ MX.Image = MX.Object3D.extend({ layer.el.classList.add(ops.className) } layer.el.style.backgroundRepeat = 'no-repeat' - - this.dirty = true - this.updateChildren = true - this.update() }, loadTexture: function(ops){ var layer = this layer.ops = defaults(ops, layer.ops) - console.log(layer.ops.y, layer.y) + var image = new Image() image.onload = function(){ layer.scale = layer.ops.scale || 1 diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js new file mode 100644 index 0000000..c9ec339 --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.video.js @@ -0,0 +1,59 @@ +MX.Video = MX.Object3D.extend({ + init: function (ops) { + + this.type = "Video" + + var layer = this + layer.width = 0 + layer.height = 0 + layer.x = ops.x || 0 + layer.y = ops.y || 0 + layer.z = ops.z || 0 + layer.scale = ops.scale || 1 + layer.backface = ops.backface || false + layer.media = ops.media + layer.el.classList.add('video') + + if (layer.backface) { + layer.el.classList.add("backface-visible") + } + + if (ops.src) { + this.loadVideo(ops) + } + + if (ops.className) { + layer.el.classList.add(ops.className) + } + layer.el.style.backgroundRepeat = 'no-repeat' + }, + + loadVideo: function(ops){ + var layer = this + layer.ops = defaults(ops, layer.ops) + + var video = document.createElement('video') + video.addEventListener("loadedmetadata", function(){ + // + video.play() + }) + video.src = ops.src + video.load() + }, + + move: function(ops){ + var layer = this + layer.ops = defaults(ops, layer.ops) + for (var i in ops) { + layer[i] = ops[i] + } + layer.dirty = true + layer.update() + }, + + toString: function(){ + var params = "id src width height depth x y z rotationX rotationY rotationZ scale".split(" ") + return this.__toString(params) + }, + +}) |
