From ee6b3d4d41878430411762ccc54ca84dbce89547 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Tue, 10 Jan 2017 00:40:59 -0200
Subject: [PATCH] remove ripple directive and use the new component

---
 docs/src/pages/components/BottomBar.vue       |   6 +
 docs/src/pages/components/Card.vue            |   8 +-
 docs/src/pages/components/Checkbox.vue        |  20 +--
 src/components/mdBottomBar/mdBottomBar.scss   |   4 +
 src/components/mdBottomBar/mdBottomBar.theme  |  10 +-
 .../mdBottomBar/mdBottomBarItem.vue           |   9 +-
 src/components/mdCheckbox/mdCheckbox.theme    |  44 ++++---
 src/components/mdCheckbox/mdCheckbox.vue      |   3 +-
 src/components/mdRadio/mdRadio.vue            |   3 +-
 src/components/mdSwitch/mdSwitch.vue          |   3 +-
 src/components/mdTable/mdTableHead.vue        |   4 +-
 src/core/components/mdInkRipple/index.js      | 115 ------------------
 .../components/mdInkRipple/mdInkRipple.scss   |  12 +-
 13 files changed, 77 insertions(+), 164 deletions(-)

diff --git a/docs/src/pages/components/BottomBar.vue b/docs/src/pages/components/BottomBar.vue
index bf3635b..16b292f 100644
--- a/docs/src/pages/components/BottomBar.vue
+++ b/docs/src/pages/components/BottomBar.vue
@@ -60,6 +60,12 @@
                 <md-table-cell><code>String</code></md-table-cell>
                 <md-table-cell>Create a anchor on the item - In this case the generated tag will be <code>&lt;a&gt;</code>.</md-table-cell>
               </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>disabled</md-table-cell>
+                <md-table-cell><code>Boolean</code></md-table-cell>
+                <md-table-cell>Disable the item and prevent his actions. Default <code>false</code></md-table-cell>
+              </md-table-row>
             </md-table-body>
           </md-table>
         </api-table>
diff --git a/docs/src/pages/components/Card.vue b/docs/src/pages/components/Card.vue
index e9612f3..4d15574 100644
--- a/docs/src/pages/components/Card.vue
+++ b/docs/src/pages/components/Card.vue
@@ -362,8 +362,10 @@
             </md-card>
 
             <md-card md-with-hover>
-              <md-card-media v-md-ink-ripple>
+              <md-card-media>
                 <img src="assets/card-image-1.jpg" alt="People">
+
+                <md-ink-ripple />
               </md-card-media>
 
               <md-card-actions>
@@ -425,8 +427,10 @@
               &lt;/md-card&gt;
 
               &lt;md-card md-with-hover&gt;
-                &lt;md-card-media v-md-ink-ripple&gt;
+                &lt;md-card-media&gt;
                   &lt;img src=&quot;assets/card-image-1.jpg&quot; alt=&quot;People&quot;&gt;
+
+                  &lt;md-ink-ripple&gt;&lt;/md-ink-ripple&gt;
                 &lt;/md-card-media&gt;
 
                 &lt;md-card-actions&gt;
diff --git a/docs/src/pages/components/Checkbox.vue b/docs/src/pages/components/Checkbox.vue
index 2ff7c5d..58cf13a 100644
--- a/docs/src/pages/components/Checkbox.vue
+++ b/docs/src/pages/components/Checkbox.vue
@@ -89,20 +89,20 @@
 
         <example-box card-title="Themes">
           <div slot="demo">
-            <md-checkbox md-name="orange"  id="my-test5" name="my-test5" v-model="checkbox2" class="md-primary">Primary Orange</md-checkbox>
-            <md-checkbox md-name="green"  id="my-test6" name="my-test6" v-model="checkbox2" class="md-primary">Primary Green</md-checkbox>
-            <md-checkbox md-name="light-blue" id="my-test7" name="my-test7" v-model="checkbox2" class="md-primary">Primary Light Blue</md-checkbox>
-            <md-checkbox md-name="indigo"  id="my-test8" name="my-test8" v-model="checkbox2" class="md-primary">Primary Indigo</md-checkbox>
-            <md-checkbox md-name="brown"  id="my-test9" name="my-test9" v-model="checkbox2" class="md-primary" disabled>Primary Brown Disabled</md-checkbox>
+            <md-checkbox md-theme="orange"  id="my-test5" name="my-test5" v-model="checkbox2" class="md-primary">Primary Orange</md-checkbox>
+            <md-checkbox md-theme="green"  id="my-test6" name="my-test6" v-model="checkbox2" class="md-primary">Primary Green</md-checkbox>
+            <md-checkbox md-theme="light-blue" id="my-test7" name="my-test7" v-model="checkbox2" class="md-primary">Primary Light Blue</md-checkbox>
+            <md-checkbox md-theme="indigo"  id="my-test8" name="my-test8" v-model="checkbox2" class="md-primary">Primary Indigo</md-checkbox>
+            <md-checkbox md-theme="brown"  id="my-test9" name="my-test9" v-model="checkbox2" class="md-primary" disabled>Primary Brown Disabled</md-checkbox>
           </div>
 
           <div slot="code">
             <code-block lang="xml">
-              &lt;md-checkbox md-name=&quot;orange&quot;  id=&quot;my-test5&quot; name=&quot;my-test5&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Orange&lt;/md-checkbox&gt;
-              &lt;md-checkbox md-name=&quot;green&quot;  id=&quot;my-test6&quot; name=&quot;my-test6&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Green&lt;/md-checkbox&gt;
-              &lt;md-checkbox md-name=&quot;light-blue&quot; id=&quot;my-test7&quot; name=&quot;my-test7&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Light Blue&lt;/md-checkbox&gt;
-              &lt;md-checkbox md-name=&quot;indigo&quot;  id=&quot;my-test8&quot; name=&quot;my-test8&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Indigo&lt;/md-checkbox&gt;
-              &lt;md-checkbox md-name=&quot;brown&quot;  id=&quot;my-test9&quot; name=&quot;my-test9&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot; disabled&gt;Primary Brown Disabled&lt;/md-checkbox&gt;
+              &lt;md-checkbox md-theme=&quot;orange&quot;  id=&quot;my-test5&quot; name=&quot;my-test5&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Orange&lt;/md-checkbox&gt;
+              &lt;md-checkbox md-theme=&quot;green&quot;  id=&quot;my-test6&quot; name=&quot;my-test6&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Green&lt;/md-checkbox&gt;
+              &lt;md-checkbox md-theme=&quot;light-blue&quot; id=&quot;my-test7&quot; name=&quot;my-test7&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Light Blue&lt;/md-checkbox&gt;
+              &lt;md-checkbox md-theme=&quot;indigo&quot;  id=&quot;my-test8&quot; name=&quot;my-test8&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot;&gt;Primary Indigo&lt;/md-checkbox&gt;
+              &lt;md-checkbox md-theme=&quot;brown&quot;  id=&quot;my-test9&quot; name=&quot;my-test9&quot; v-model=&quot;checkbox2&quot; class=&quot;md-primary&quot; disabled&gt;Primary Brown Disabled&lt;/md-checkbox&gt;
             </code-block>
           </div>
         </example-box>
diff --git a/src/components/mdBottomBar/mdBottomBar.scss b/src/components/mdBottomBar/mdBottomBar.scss
index d3e28f1..562d5d4 100644
--- a/src/components/mdBottomBar/mdBottomBar.scss
+++ b/src/components/mdBottomBar/mdBottomBar.scss
@@ -45,6 +45,10 @@
     }
   }
 
+  &[disabled] {
+    opacity: .38;
+  }
+
   .md-bottom-bar.md-shift & {
     min-width: 56px;
     max-width: 96px;
diff --git a/src/components/mdBottomBar/mdBottomBar.theme b/src/components/mdBottomBar/mdBottomBar.theme
index 4311b36..9ed1338 100644
--- a/src/components/mdBottomBar/mdBottomBar.theme
+++ b/src/components/mdBottomBar/mdBottomBar.theme
@@ -6,7 +6,7 @@
       .md-bottom-bar-item {
         color: #{'BACKGROUND-CONTRAST-0.54'};
 
-        &:hover:not(.md-active) {
+        &:hover:not([disabled]):not(.md-active) {
           color: #{'BACKGROUND-CONTRAST-0.87'};
         }
 
@@ -47,7 +47,7 @@
       .md-bottom-bar-item {
         color: #{'PRIMARY-CONTRAST-0.54'};
 
-        &:hover:not(.md-active) {
+        &:hover:not([disabled]):not(.md-active) {
           color: #{'PRIMARY-CONTRAST-0.87'};
         }
 
@@ -62,7 +62,7 @@
         .md-bottom-bar-item {
           color: #{'ACCENT-CONTRAST-0.54'};
 
-          &:hover:not(.md-active) {
+          &:hover:not([disabled]):not(.md-active) {
             color: #{'ACCENT-CONTRAST-0.87'};
           }
 
@@ -78,7 +78,7 @@
         .md-bottom-bar-item {
           color: #{'WARN-CONTRAST-0.54'};
 
-          &:hover:not(.md-active) {
+          &:hover:not([disabled]):not(.md-active) {
             color: #{'WARN-CONTRAST-0.87'};
           }
 
@@ -94,7 +94,7 @@
         .md-bottom-bar-item {
           color: #{'BACKGROUND-CONTRAST-0.54'};
 
-          &:hover:not(.md-active) {
+          &:hover:not([disabled]):not(.md-active) {
             color: #{'BACKGROUND-CONTRAST-0.87'};
           }
 
diff --git a/src/components/mdBottomBar/mdBottomBarItem.vue b/src/components/mdBottomBar/mdBottomBarItem.vue
index c043c27..bddc876 100644
--- a/src/components/mdBottomBar/mdBottomBarItem.vue
+++ b/src/components/mdBottomBar/mdBottomBarItem.vue
@@ -1,15 +1,19 @@
 <template>
-  <a :href="href" class="md-bottom-bar-item" :class="classes" v-md-ink-ripple @click="setActive" v-if="href">
+  <a :href="href" class="md-bottom-bar-item" :class="classes" :disabled="disabled" @click="setActive" v-if="href">
     <md-icon>{{ mdIcon }}</md-icon>
 
+    <md-ink-ripple :md-disabled="disabled" />
+
     <span class="md-text">
       <slot></slot>
     </span>
   </a>
 
-  <button type="button" class="md-bottom-bar-item" :class="classes" v-md-ink-ripple @click="setActive" v-else>
+  <button type="button" class="md-bottom-bar-item" :class="classes" :disabled="disabled" @click="setActive" v-else>
     <md-icon>{{ mdIcon }}</md-icon>
 
+    <md-ink-ripple :md-disabled="disabled" />
+
     <span class="md-text">
       <slot></slot>
     </span>
@@ -21,6 +25,7 @@
     props: {
       mdIcon: String,
       mdActive: Boolean,
+      disabled: String,
       href: String
     },
     data() {
diff --git a/src/components/mdCheckbox/mdCheckbox.theme b/src/components/mdCheckbox/mdCheckbox.theme
index f7c85cc..b9ebcd0 100644
--- a/src/components/mdCheckbox/mdCheckbox.theme
+++ b/src/components/mdCheckbox/mdCheckbox.theme
@@ -9,23 +9,25 @@
           border-color: #{'ACCENT-CONTRAST'};
         }
       }
-
-      .md-ink-ripple {
-        color: #{'ACCENT-COLOR'};
-      }
-
-      .md-ripple {
-        opacity: .38;
-      }
     }
 
-    &.md-primary.md-checked {
-      .md-checkbox-container {
-        background-color: #{'PRIMARY-COLOR'};
-        border-color: #{'PRIMARY-COLOR'};
+    .md-ink-ripple {
+      color: #{'ACCENT-COLOR'};
+    }
 
-        &:after {
-          border-color: #{'PRIMARY-CONTRAST'};
+    .md-ripple {
+      opacity: .26;
+    }
+
+    &.md-primary {
+      &.md-checked {
+        .md-checkbox-container {
+          background-color: #{'PRIMARY-COLOR'};
+          border-color: #{'PRIMARY-COLOR'};
+
+          &:after {
+            border-color: #{'PRIMARY-CONTRAST'};
+          }
         }
       }
 
@@ -34,13 +36,15 @@
       }
     }
 
-    &.md-warn.md-checked {
-      .md-checkbox-container {
-        background-color: #{'WARN-COLOR'};
-        border-color: #{'WARN-COLOR'};
+    &.md-warn {
+      &.md-checked {
+        .md-checkbox-container {
+          background-color: #{'WARN-COLOR'};
+          border-color: #{'WARN-COLOR'};
 
-        &:after {
-          border-color: #{'WARN-CONTRAST'};
+          &:after {
+            border-color: #{'WARN-CONTRAST'};
+          }
         }
       }
 
diff --git a/src/components/mdCheckbox/mdCheckbox.vue b/src/components/mdCheckbox/mdCheckbox.vue
index 662e0d2..9ad2bff 100644
--- a/src/components/mdCheckbox/mdCheckbox.vue
+++ b/src/components/mdCheckbox/mdCheckbox.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="md-checkbox" :class="[themeClass, classes]">
-    <div class="md-checkbox-container" @click.stop="toggleCheck" v-md-ink-ripple="disabled" tabindex="0">
+    <div class="md-checkbox-container" @click.stop="toggleCheck" tabindex="0">
       <input type="checkbox" :name="name" :id="id" :disabled="disabled" :value="value" tabindex="-1">
+      <md-ink-ripple :md-disabled="disabled" />
     </div>
 
     <label :for="id || name" class="md-checkbox-label" v-if="$slots.default">
diff --git a/src/components/mdRadio/mdRadio.vue b/src/components/mdRadio/mdRadio.vue
index 0e42c3e..6f8e8ec 100644
--- a/src/components/mdRadio/mdRadio.vue
+++ b/src/components/mdRadio/mdRadio.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="md-radio" :class="[themeClass, classes]">
-    <div class="md-radio-container" @click="toggleCheck" v-md-ink-ripple="disabled">
+    <div class="md-radio-container" @click="toggleCheck">
       <input type="radio" :name="name" :id="id" :disabled="disabled" :value="value">
+      <md-ink-ripple :md-disabled="disabled" />
     </div>
 
     <label :for="id || name" class="md-radio-label" v-if="$slots.default">
diff --git a/src/components/mdSwitch/mdSwitch.vue b/src/components/mdSwitch/mdSwitch.vue
index 80b69c1..9191b3f 100644
--- a/src/components/mdSwitch/mdSwitch.vue
+++ b/src/components/mdSwitch/mdSwitch.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="md-switch" :class="[themeClass, classes]">
     <div class="md-switch-container" @click="toggle($event)">
-      <div class="md-switch-thumb" :style="styles" v-md-ink-ripple="disabled">
+      <div class="md-switch-thumb" :style="styles">
         <input type="checkbox" :name="name" :id="id" :disabled="disabled" :value="value">
         <button :type="type" class="md-switch-holder"></button>
+        <md-ink-ripple :md-disabled="disabled" />
       </div>
     </div>
 
diff --git a/src/components/mdTable/mdTableHead.vue b/src/components/mdTable/mdTableHead.vue
index 5f7b6be..064f9cb 100644
--- a/src/components/mdTable/mdTableHead.vue
+++ b/src/components/mdTable/mdTableHead.vue
@@ -1,6 +1,6 @@
 <template>
   <th class="md-table-head" :class="classes" @click="changeSort">
-    <div class="md-table-head-container" v-md-ink-ripple="!mdSortBy">
+    <div class="md-table-head-container">
       <div class="md-table-head-text md-test">
         <md-icon class="md-sortable-icon" v-if="mdSortBy">arrow_downward</md-icon>
 
@@ -8,6 +8,8 @@
 
         <md-tooltip v-if="mdTooltip">{{ mdTooltip }}</md-tooltip>
       </div>
+
+      <md-ink-ripple :md-disabled="!mdSortBy" />
     </div>
   </th>
 </template>
diff --git a/src/core/components/mdInkRipple/index.js b/src/core/components/mdInkRipple/index.js
index 0746349..7ff9d81 100644
--- a/src/core/components/mdInkRipple/index.js
+++ b/src/core/components/mdInkRipple/index.js
@@ -1,120 +1,5 @@
-import 'scopedQuerySelectorShim/dist/scopedQuerySelectorShim';
 import mdInkRipple from './mdInkRipple.vue';
 
 export default function install(Vue) {
-  let rippleParentClass = 'md-ink-ripple';
-  let rippleClass = 'md-ripple';
-  let rippleActiveClass = 'md-active';
-  let registeredMouseFunction;
-  let referenceElement;
-
-  let unregisterMouseEvent = (el = referenceElement) => {
-    el.removeEventListener('mousedown', registeredMouseFunction);
-  };
-
-  let registerMouseEvent = (element, holder) => {
-    if (holder) {
-      let ripple = holder.querySelector(':scope > .' + rippleParentClass + '> .' + rippleClass);
-
-      if (ripple) {
-        registeredMouseFunction = (event) => {
-          let rect = holder.getBoundingClientRect();
-
-          event.stopPropagation();
-
-          ripple.classList.remove(rippleActiveClass);
-
-          let top = event.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop;
-          let left = event.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft;
-
-          ripple.style.top = top + 'px';
-          ripple.style.left = left + 'px';
-
-          ripple.classList.add(rippleActiveClass);
-        };
-
-        element.removeEventListener('mousedown', registeredMouseFunction);
-        element.addEventListener('mousedown', registeredMouseFunction);
-      }
-    }
-  };
-
-  let createElement = (ripple, className, size) => {
-    ripple = document.createElement('div');
-    ripple.className = className;
-
-    if (size) {
-      ripple.style.width = size;
-      ripple.style.height = size;
-    }
-
-    return ripple;
-  };
-
-  let checkAvailablePositions = (element) => {
-    let availablePositions = ['relative', 'absolute', 'fixed'];
-
-    return availablePositions.indexOf(getComputedStyle(element).position) > -1;
-  };
-
-  let getClosestParent = (element) => {
-    let found = false;
-    let parent = element;
-
-    if (!element) {
-      return false;
-    }
-
-    if (checkAvailablePositions(element)) {
-      return element;
-    }
-
-    while (!found) {
-      parent = parent.parentNode;
-
-      if (!parent || parent.tagName.toLowerCase() === 'body') {
-        break;
-      }
-
-      if (parent && checkAvailablePositions(parent)) {
-        found = parent;
-      }
-    }
-
-    return found;
-  };
-
-  let createRipple = (element, currentRipple) => {
-    let holder = getClosestParent(element);
-
-    if (holder) {
-      let ripple = holder.querySelector(':scope > .' + rippleParentClass + '> .' + rippleClass);
-
-      if (!ripple) {
-        let elementSize = Math.round(Math.max(holder.offsetWidth, holder.offsetHeight)) + 'px';
-        let rippleParent = currentRipple || createElement(ripple, rippleParentClass);
-        let rippleElement = createElement(ripple, rippleClass, elementSize);
-
-        rippleParent.appendChild(rippleElement);
-        holder.appendChild(rippleParent);
-      }
-
-      if (holder !== element || !ripple) {
-        referenceElement = element;
-        registerMouseEvent(element, holder);
-      }
-    }
-  };
-
-  Vue.directive('mdInkRipple', function(el, bindings) {
-    Vue.nextTick(() => {
-      if (!bindings.value) {
-        createRipple(el);
-      } else {
-        unregisterMouseEvent(el);
-      }
-    });
-  });
-
   Vue.component('md-ink-ripple', Vue.extend(mdInkRipple));
 }
diff --git a/src/core/components/mdInkRipple/mdInkRipple.scss b/src/core/components/mdInkRipple/mdInkRipple.scss
index 9891b0b..f62b793 100644
--- a/src/core/components/mdInkRipple/mdInkRipple.scss
+++ b/src/core/components/mdInkRipple/mdInkRipple.scss
@@ -21,14 +21,14 @@
   transition: none;
   will-change: background-color, opacity, transform, width, height, top, left;
 
-  &.md-fadeout {
-    opacity: 0;
-    transition: $swift-ease-out;
-    transition-duration: .6s;
-  }
-
   &.md-active {
     animation: ripple 1s $swift-ease-out-timing-function forwards;
+
+    &.md-fadeout {
+      opacity: 0 !important;
+      transition: $swift-ease-out;
+      transition-duration: .6s;
+    }
   }
 }