montagejs · thibaultzanini · Jan 4, 2018 · Jan 4, 2018 · Jan 5, 2018 · Jan 5, 2018
diff --git a/composer/translate-composer.js b/composer/translate-composer.js
@@ -1333,6 +1333,7 @@ var TranslateComposer = exports.TranslateComposer = Composer.specialize(/** @len
             translateStartEvent.initCustomEvent("translateStart", true, true, null);
             translateStartEvent.translateX = x;
             translateStartEvent.translateY = y;
+            translateStartEvent.targetElement = this.element;
             // Event needs to be the same shape as the one in flow-translate-composer
             translateStartEvent.scroll = 0;
             translateStartEvent.pointer = this._observedPointer;
@@ -1347,6 +1348,7 @@ var TranslateComposer = exports.TranslateComposer = Composer.specialize(/** @len
             translateEndEvent.initCustomEvent("translateEnd", true, true, null);
             translateEndEvent.translateX = this._translateX;
             translateEndEvent.translateY = this._translateY;
+            translateEndEvent.targetElement = this.element;
             // Event needs to be the same shape as the one in flow-translate-composer
             translateEndEvent.scroll = 0;
             translateEndEvent.pointer = this._observedPointer;
@@ -1361,6 +1363,7 @@ var TranslateComposer = exports.TranslateComposer = Composer.specialize(/** @len
             translateCancelEvent.initCustomEvent("translateCancel", true, true, null);
             translateCancelEvent.translateX = this._translateX;
             translateCancelEvent.translateY = this._translateY;
+            translateCancelEvent.targetElement = this.element;
             // Event needs to be the same shape as the one in flow-translate-composer
             translateCancelEvent.scroll = 0;
             translateCancelEvent.pointer = this._observedPointer;
@@ -1374,6 +1377,7 @@ var TranslateComposer = exports.TranslateComposer = Composer.specialize(/** @len
             translateEvent.initCustomEvent("translate", true, true, null);
             translateEvent.translateX = this._translateX;
             translateEvent.translateY = this._translateY;
+            translateEvent.targetElement = this.element;
             // Event needs to be the same shape as the one in flow-translate-composer
             translateEvent.scroll = 0;
             translateEvent.pointer = this._observedPointer;

diff --git a/core/core.js b/core/core.js
@@ -5,6 +5,7 @@
 require("collections/shim");
 require("./shim/object");
 require("./shim/array");
+require("./shim/math");
 require("./extras/object");
 require("./extras/date");
 require("./extras/element");

diff --git a/core/shim/math.js b/core/shim/math.js
@@ -0,0 +1,8 @@
+if (!Math.sign) {
+    /**
+     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sign
+     */
+    Math.sign = function (x) {
+        return ((x > 0) - (x < 0)) || +x;
+    };
+}
diff --git a/index.html b/index.html
@@ -34,6 +34,7 @@ <h4>Components:</h4>
         <a href="ui/html-fragment.info/sample/index.html">HTML Fragment</a>
         <a href="ui/list.info/sample/index.html">List</a>
         <a href="ui/list-item.info/sample/index.html">ListItem</a>
+        <a href="ui/list-item-menu.info/sample/index.html">ListItemMenu</a>
         <a href="ui/number-field.info/sample/index.html">NumberField</a>
         <a href="ui/placeholder.info/sample/index.html">Placeholder</a>
         <a href="ui/radio.info/sample/index.html">Radio</a>

diff --git a/test/mocks/data/icons/check.reel/check.html b/test/mocks/data/icons/check.reel/check.html
@@ -2,7 +2,7 @@
 <html>
 <head>
     <link rel="stylesheet" type="text/css" href="check.css">
-    <link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
+    <link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
     <script type="text/montage-serialization">
         {
             "owner": {

diff --git a/test/mocks/data/icons/department.reel/department.html b/test/mocks/data/icons/department.reel/department.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
+    <link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
     <script type="text/montage-serialization">
         {
             "owner": {

diff --git a/test/mocks/data/models/employee-list-item-menu-ui-descriptor.mjson b/test/mocks/data/models/employee-list-item-menu-ui-descriptor.mjson
@@ -0,0 +1,8 @@
+{
+    "root": {
+        "prototype": "core/meta/user-interface-descriptor",
+        "values": {
+            "listItemMenuDeleteNameExpression": "'Delete'"
+        }
+    }
+}
diff --git a/test/mocks/data/models/employee-ui-descriptor.mjson b/test/mocks/data/models/employee-ui-descriptor.mjson
@@ -13,7 +13,10 @@
             },
             "collectionNameExpression": "'Employees'",
             "nameExpression": "lastname + ' ' + firstname",
-            "descriptionExpression": "department"
+            "descriptionExpression": "department",
+            "collectionItemComponentModule": {
+                "%": "ui/list-item-menu.reel"
+            }
         }
     }
 }
diff --git a/test/mocks/data/models/employee.mjson b/test/mocks/data/models/employee.mjson
@@ -25,6 +25,9 @@
                 },
                 "montage/ui/cascading-list.reel": {
                     "%": "test/mocks/data/models/employee-cascading-list-ui-descriptor.mjson"
+                },
+                "montage/ui/list-item-menu.reel": {
+                    "%": "test/mocks/data/models/employee-list-item-menu-ui-descriptor.mjson"
                 }
             }
         }

diff --git a/ui/button.reel/button.js b/ui/button.reel/button.js
@@ -374,13 +374,12 @@ var Button = exports.Button = Control.specialize(/** @lends module:"montage/ui/n
                         this._label = this.originalElement.firstChild.data;
                     }
                     if (!this.element.firstChild) {
-                        this.element.appendChild(document.createTextNode(""));
+                        var span = document.createElement("span");
+                        span.appendChild(document.createTextNode(''));
+                        this.element.appendChild(span);
                     }
+
                     this._labelNode = this.element.firstChild;
-                    // this.setLabelInitialValue(this._labelNode.data)
-                    // if (this._label === undefined) {
-                    //     this._label = this._labelNode.data;
-                    // }
                 }
 
                 //this.classList.add("montage-Button");
@@ -403,8 +402,8 @@ var Button = exports.Button = Control.specialize(/** @lends module:"montage/ui/n
             }
             if (this.isInputElement) {
                 this._element.value = value;
-            } else if (this._labelNode) {
-                this._labelNode.data = value;
+            } else if (this._labelNode && this._labelNode.firstChild) {
+                this._labelNode.firstChild.data = value;
             }
         }
     },

diff --git a/ui/cascading-list.info/sample/index.html b/ui/cascading-list.info/sample/index.html
@@ -4,8 +4,6 @@
     <meta charset="utf-8">
 
     <title>Cascading List Samples</title>
-    <link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/css/emojione.min.css" rel="stylesheet">
 
     <script src="../../../montage.js" async></script>
     <script type="text/montage-serialization">

diff --git a/ui/list-item-menu.info/sample/index.html b/ui/list-item-menu.info/sample/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+
+    <title>List Item Menu Sample</title>
+    <link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
+    <script src="../../../montage.js" async></script>
+    <script type="text/montage-serialization">
+    {
+        "owner": {
+            "prototype": "montage/ui/loader.reel"
+        }
+    }
+    </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/ui/list-item-menu.info/sample/package.json b/ui/list-item-menu.info/sample/package.json
@@ -0,0 +1,11 @@
+{
+    "name": "list-item-menu-sample",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "montage": "*"
+    },
+    "mappings": {
+        "montage": "../../../"
+    }
+}
diff --git a/ui/list-item-menu.info/sample/ui/main.reel/main.css b/ui/list-item-menu.info/sample/ui/main.reel/main.css
@@ -0,0 +1,82 @@
+html, body, .Main {
+    padding: 0;
+    margin: 0;
+    height: 100%;
+    font-family: "Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.Main {
+    padding: 20px;
+}
+
+header {
+    margin: 60px 0;
+    font-size: 2rem;
+    text-align: center;
+    color: #33495d;
+    height: 40px;
+}
+
+.items {
+    margin: auto;
+    height: 500px;
+    width: 300px;
+}
+
+.ListItemMenu.gray .ListItemMenu-options button {
+    font-size: 14px;
+    white-space: nowrap;
+    color: rgb(100, 100, 100);
+}
+
+.ListItemMenu.gray .ListItemMenu-options button .dot {
+    background-color: rgb(100, 100, 100);
+}
+
+.ListItemMenu.gray.is-opened.right-side .ListItemMenu-content {
+    border-right: 1px solid #bdc3c7;
+}
+
+.ListItemMenu.gray.is-opened.left-side .ListItemMenu-content {
+    border-left: 1px solid #bdc3c7;
+}
+
+.ListItemMenu .archive {
+    background-color: #2C82C9;
+}
+
+.ListItemMenu .delete {
+    background-color: #e74c3c;
+}
+
+.ListItemMenu .more {
+    background-color: #9E9D9B;
+}
+
+.ListItemMenu .dot {
+    height: 5px;
+    width: 5px;
+    background-color: white;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+.ListItemMenu .move {
+    background-color: #5659C9;
+}
+
+.ListItemMenu .pin {
+    background-color: #2CC990;
+}
+
+.ListItemMenu[data-montage-id='list-item-menu-8'] .ListItemMenu-content {
+    padding-left: 16px;
+    padding-right: 16px;
+}