Merge branch 'master' into commonjs

# Conflicts: # package.json
montagejs · Oct 23, 2018 · 211d5f4 · 211d5f4
2 parents 4a0b76e + 6572c62
commit 211d5f4
Show file tree

Hide file tree

Showing 62 changed files with 4,419 additions and 356 deletions.
diff --git a/composer/swipe-composer.info/sample/index.html b/composer/swipe-composer.info/sample/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Swipe Composer Sample</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <script src="../../../montage.js"></script>
+    <script type="text/montage-serialization">
+    {
+        "owner": {
+            "prototype": "montage/ui/loader.reel"
+        }
+    }
+    </script>
+</head>
+<body>
+    <span class="loading"></span>
+</body>
+</html>
diff --git a/composer/swipe-composer.info/sample/package.json b/composer/swipe-composer.info/sample/package.json
@@ -0,0 +1,10 @@
+{
+    "name": "swipe-composer-sample",
+    "version": "0.0.1",
+    "dependencies": {
+        "montage": "*"
+    },
+    "mappings": {
+        "montage": "../../../"
+    }
+}
diff --git a/composer/swipe-composer.info/sample/ui/main.reel/main.css b/composer/swipe-composer.info/sample/ui/main.reel/main.css
@@ -0,0 +1,29 @@
+html, body {
+    padding: 0;
+    margin: 0;
+    font-family: "Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif;
+     -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.Main {
+    padding: 20px;
+}
+
+header {
+    margin: 40px 0;
+    font-size: 2rem;
+    text-align: center;
+    color: #33495d;
+    height: 40px;
+}
+
+.HitBox {
+    margin: auto;
+    width: 400px;
+    height: 400px;
+    border: 1px solid black;
+}
diff --git a/composer/swipe-composer.info/sample/ui/main.reel/main.html b/composer/swipe-composer.info/sample/ui/main.reel/main.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <link rel="stylesheet" type="text/css" href="main.css">
+
+    <script type="text/montage-serialization">
+    {
+        "owner": {
+            "values": {
+                "element": {"#": "main"},
+                "_hitBox": {"#": "hitBox"},
+                "_line": {"#": "line"}
+            }
+        },
+
+        "swipeDirection": {
+            "prototype": "montage/ui/text.reel",
+            "values": {
+                "element": {"#": "swipeDirection"},
+                "value": {"<-": "@owner.swipeDirection"}
+            }
+        },
+
+        "swipeDistance": {
+            "prototype": "montage/ui/text.reel",
+            "values": {
+                "element": {"#": "swipeDistance"},
+                "value": {"<-": "@owner.swipeDistance"}
+            }
+        },
+
+        "swipeVelocity": {
+            "prototype": "montage/ui/text.reel",
+            "values": {
+                "element": {"#": "swipeVelocity"},
+                "value": {"<-": "@owner.swipeVelocity"}
+            }
+        },
+
+        "swipeAngle": {
+            "prototype": "montage/ui/text.reel",
+            "values": {
+                "element": {"#": "swipeAngle"},
+                "value": {"<-": "@owner.swipeAngle"}
+            }
+        }
+    }
+    </script>
+</head>
+<body>
+    <div data-montage-id="main" class="Main">
+        <header>Swipe Composer Sample</header>
+        <div data-montage-id="hitBox" class="HitBox">
+            <svg height="100%" width="100%">
+                <line data-montage-id="line" style="stroke:rgb(255,0,0);stroke-width:2" />
+            </svg>
+        </div>
+        <div>
+            <p>
+                <span>Direction:</span>
+                <span data-montage-id="swipeDirection"></span>
+            </p>
+            <p>
+                <span>Distance:</span>
+                <span data-montage-id="swipeDistance"></span>
+            </p>
+            <p>
+                <span>Velocity:</span>
+                <span data-montage-id="swipeVelocity"></span>
+            </p>
+            <p>
+                <span>Angle:</span>
+                <span data-montage-id="swipeAngle"></span>
+            </p>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/composer/swipe-composer.info/sample/ui/main.reel/main.js b/composer/swipe-composer.info/sample/ui/main.reel/main.js
@@ -0,0 +1,133 @@
+var Component = require("montage/ui/component").Component,
+    SwipeComposer = require("montage/composer/swipe-composer").SwipeComposer;
+
+exports.Main = Component.specialize({
+
+    _x1: {
+        value: 0
+    },
+
+    _y1: {
+        value: 0
+    },
+
+    _x2: {
+        value: 0
+    },
+
+    _y2: {
+        value: 0
+    },
+
+    __swipeComposer: {
+        value: null
+    },
+
+    _swipeComposer: {
+        get: function () {
+            if (!this.__swipeComposer) {
+                this.__swipeComposer = new SwipeComposer();
+                this.addComposerForElement(this.__swipeComposer, this._hitBox);
+            }
+
+            return this.__swipeComposer;
+        }
+    },
+
+    _translateComposer: {
+        get: function () {
+            return this._swipeComposer._translateComposer;
+        }
+    },
+
+    enterDocument: {
+        value: function (firstTime) {
+            if (firstTime) {
+                this._translateComposer.addEventListener("translateStart", this);
+                this._swipeComposer.addEventListener("swipe", this);
+            }
+        }
+    },
+
+    handleTranslateStart: {
+        value: function () {
+            this._x1 = (
+                this._translateComposer.pointerStartEventPosition.pageX -
+                this._hitBoxRect.left
+            );
+
+            this._y1 = (
+                this._translateComposer.pointerStartEventPosition.pageY -
+                this._hitBoxRect.top
+            );
+
+            this._translateComposer.addEventListener("translate", this);
+            this._translateComposer.addEventListener("translateEnd", this);
+            this._translateComposer.addEventListener("translateCancel", this);
+        }
+    },
+
+    handleTranslate: {
+        value: function (event) {
+            this._x2 = this._x1 + event.translateX;
+            this._y2 = this._y1 + event.translateY;
+            this.needsDraw = true;
+        }
+    },
+
+    handleTranslateEnd: {
+        value: function () {
+            this._reset();
+        }
+    },
+
+    handleTranslateCancel: {
+        value: function () {
+            this._reset();
+        }
+    },
+
+    handleSwipe: {
+        value: function (event) {
+            this.swipeDirection = event.direction;
+            this.swipeVelocity = event.velocity.toFixed(2);
+            this.swipeAngle = event.angle.toFixed(2);
+            this.swipeDistance = event.distance.toFixed(2);
+        }
+    },
+
+    _reset: {
+        value: function () {
+            this._translateComposer.removeEventListener("translate", this);
+            this._translateComposer.removeEventListener("translateEnd", this);
+            this._translateComposer.removeEventListener("translateCancel", this);
+
+            this._x1 = 0;
+            this._x2 = 0;
+            this._y1 = 0;
+            this._y2 = 0;
+
+            this.needsDraw = true;
+        }
+    },
+
+    willDraw: {
+        value: function () {
+            if (!this._hitBoxRect && this._hitBox) {
+                this._hitBoxRect = this._hitBox.getBoundingClientRect();
+            }
+        }
+    },
+
+    draw: {
+        value: function () {
+            if (this._hitBoxRect && this._hitBox) {
+                this._line.setAttribute("x1", this._x1);
+                this._line.setAttribute("y1", this._y1);
+                this._line.setAttribute("x2", this._x2);
+                this._line.setAttribute("y2", this._y2);
+            }
+        }
+    }
+
+});