Merge pull request #30 from PredixDev/modal-bug

Fix #29 Modal bug
predixdesignsystem · Feb 22, 2018 · 13e1c46 · 13e1c46
2 parents b27c587 + 349b1c5
commit 13e1c46
Show file tree

Hide file tree

Showing 5 changed files with 174 additions and 12 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -1,7 +1,10 @@
-v2.2.0
+v2.2.2
 ==================
-* Fix demo for IE
+* Added workaround for a Firefox bug where getScreenCTM doesnt work right when the svg is in a transformed HTML element
 
+v2.2.1
+==================
+* Fix demo for IE
 
 v2.2.0
 ==================

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "px-slider",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "main": [
     "px-slider.html"
   ],
@@ -17,18 +17,19 @@
     "wct.conf.json",
     "test",
     "OSS_Notice.pdf",
-    "*.png"
+    "*.png",
+    "examples"
   ],
   "dependencies": {
     "polymer": "#1.9 - 2",
-    "px-d3-imports": "^2.0.0",
+    "px-d3-imports": "^3.0.0",
     "iron-resizable-behavior": "^2.0.0",
     "px-number-formatter": "^4.0.0",
-    "iron-a11y-keys": "^2.0.0"
+    "iron-a11y-keys": "^2.0.0",
+    "px-component-helpers": "^1.0.0"
   },
   "devDependencies": {
     "px-theme": "^3.0.0",
-    "px-starter-kit-design": "^1.0.0",
     "px-demo": "^3.0.0",
     "px-helpers-design": "^1.0.0",
     "px-forms-design": "^2.0.0",

diff --git a/examples/modal.html b/examples/modal.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>px-modal demo</title>
+
+  <!-- Load webcomponentsjs + Polymer -->
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../polymer/polymer.html"/>
+
+  <!-- Load components -->
+  <link rel="import" href="../../px-modal/px-modal.html"/>
+  <link rel="import" href="../px-slider.html"/>
+
+  <style>
+    html {
+      font-size: 15px;
+    }
+  </style>
+
+  <!-- Load theme -->
+  <link rel="import" href="../../px-theme/px-theme-styles.html"/>
+  <custom-style>
+    <style include="px-theme-styles" is="custom-style"></style>
+  </custom-style>
+</head>
+<body>
+  <dom-bind>
+    <template is="dom-bind">
+      <!-- <div style="transform: translate(20%,0)"> -->
+        <px-modal
+          header-text="Confirm delete"
+          body-text="Do you want to delete this record? The record will be deleted permanently."
+          accept-text="Permanently Delete Record"
+          reject-text="Cancel"
+          open-trigger="[[trigger]]">
+          <div slot="body">
+            <div style="transform: translate(-10%,0)">
+              <px-slider
+              value="10"
+              end-value="90"
+              min="0"
+              max="100"
+              step="1"
+              is-range
+              scale="linear"
+              base="10"
+              exponent="2"
+              min-label-position="bottom"
+              max-label-position="bottom">
+              </px-slider>
+            </div>
+          </div>
+        </px-modal>
+      <!-- </div> -->
+      <px-modal-trigger
+        trigger="{{trigger}}">
+        <button class="btn btn--tertiary">Open Modal</button>
+      </px-modal-trigger>
+    </template>
+  </dom-bind>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "px-slider",
   "author": "General Electric",
   "description": "Predix UI slider component",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "private": false,
   "extName": null,
   "repository": {

diff --git a/px-slider.html b/px-slider.html
@@ -3,6 +3,7 @@
 <link rel="import" href="../px-d3-imports/px-d3-imports.html"/>
 <link rel="import" href="../px-number-formatter/px-number-formatter-behavior.html"/>
 <link rel="import" href="../px-number-formatter/px-number-formatter-no-display.html"/>
+<link rel="import" href="../px-component-helpers/px-common-behaviors.html"/>
 <link rel="import" href="../iron-a11y-keys/iron-a11y-keys.html"/>
 <link rel="import" href="css/px-slider-styles.html">
 <link rel="import" href="css/px-handle-styles.html">
@@ -444,11 +445,36 @@
               }
             };
           }
+        },
+
+        /**
+         * For FF fix: The amount we need to add to our mouse vals for them to be correct
+         */
+        _transformX: {
+          type: Number,
+          value: 0
+        },
+
+        /**
+         * For FF fix
+         */
+        _searchForTransforms: {
+          type: Boolean,
+          value: false
+        },
+
+        /**
+         * For FF fix
+         */
+        _transformEventName: {
+          type: String,
+          value: 'search-for-transforms'
         }
       },
       behaviors: [
         Polymer.IronResizableBehavior,
-        PxNumberFormatter.commonProperties
+        PxNumberFormatter.commonProperties,
+        PxCommonBehavior.uniqueIds
       ],
       listeners: {
         'iron-resize': '_onIronResize'
@@ -472,6 +498,13 @@
         this.setAttribute('role','slider');
       },
 
+      detached() {
+        if(this._searchForTransforms) {
+          this.removeID(this._transformEventName);
+          window.removeEventListener(this._transformEventName, this._searchForTransformationsBound);
+        }
+      },
+
       /**
        * Do general setup on our svg once we have an animation frame and know stuff exists
        * - create listeners
@@ -500,6 +533,57 @@
 
         // set up our listeners
         this._setupListeners();
+
+        /*
+          IS FIREFOX SUDDENLY BREAKING IN A MODAL OR OTHER ELEMS
+          WITH A TRANSFORM? THIS IS PROBABLY WHY
+
+          This section should be deleted if Firefox ever gets their
+          shit together and fixes their stupid browser. See:
+          https://github.com/d3/d3/issues/2771
+          https://bugzilla.mozilla.org/show_bug.cgi?id=849203
+          https://bugzilla.mozilla.org/show_bug.cgi?id=972041
+
+          delete sections from:
+           * below
+           * the props
+           * the detached
+           * the onIronResize
+           * _createHandleListeners (adding _transformX)
+           * _trackOnClick
+
+        */
+        if(!!navigator.userAgent.match(/Firefox/)) {
+          this._searchForTransforms = true;
+          // we must create a unique event name since this is attached
+          // to the window. We dont want other sliders on the page
+          // to trigger the event for all sliders.
+          this._transformEventName += this.generateRandomID(this._transformEventName);
+          this._searchForTransformationsBound = this._searchForTransformations.bind(this);
+          window.addEventListener(this._transformEventName, this._searchForTransformationsBound);
+        }
+      },
+
+      _searchForTransformations(evt) {
+        const ne = Polymer.dom(evt);
+        let transform = 0;
+
+        window.requestAnimationFrame(() => {
+          for(var i = 0; i<ne.path.length; i++) {
+            if(ne.path[i] instanceof HTMLElement) {
+              const styles = window.getComputedStyle(ne.path[i]);
+
+              if(styles.transform && styles.transform !== 'none') {
+                // only picking up X right now
+                // TODO if we implement Y sliders, need to get the y val
+                // Example transform val: 'matrix(1, 0, 0, 1, -200, -82.5)'
+                transform += Number(styles.transform.split(',')[4]);
+              }
+            }
+          }
+
+          this._transformX = Math.abs(transform);
+        });
       },
 
       /**
@@ -540,7 +624,7 @@
             progressBar.classed("progressBarPressed", true);
 
             // TODO for vertical: check state, pass in d3.event.y
-            this._calcSliderValue(Px.d3.event.x, valueVar);
+            this._calcSliderValue(Px.d3.event.x + this._transformX, valueVar);
 
           }.bind(this))
           .on("end", function() {
@@ -577,7 +661,7 @@
        */
       _trackOnClick(elem) {
         // TODO vertical: [1]
-        var val = Px.d3.mouse(elem)[0], // Get the mouse position
+        var val = Px.d3.mouse(elem)[0] + this._transformX, // Get the mouse position
             prop = 'value';  //assume it should affect the left value
 
         if(this.isRange) {
@@ -665,6 +749,16 @@
 
           this.set('_width', Math.max(w, 0));
           // this.set('_height', Math.max(h, 0));
+
+          if(this._searchForTransforms) {
+            const event = new CustomEvent(this._transformEventName, {
+              bubbles: true,
+              composed: true,
+              cancelable: true
+            });
+
+            this.dispatchEvent(event);
+          }
         }, 10);
       },
 
@@ -1152,4 +1246,3 @@
     });
   </script>
 </dom-module>
-