Merge pull request #674 from mkszepp/replace-jquery-with-vanilla

Replace jquery usages with vanilla js

addon/animate.js

@@ -20,7 +20,7 @@ export function animate(elt, props, opts, label) {
   // 'progress' callback has fired.
   let state = { percentComplete: 0, timeRemaining: 100, timeSpent: 0 };
 
-  if (!elt || elt.length === 0) {
+  if (!elt) {
     return Promise.resolve();
   }
 
@@ -54,7 +54,7 @@ export function animate(elt, props, opts, label) {
     state.timeSpent = state.timeRemaining / (1 / state.percentComplete - 1);
   };
 
-  state.promise = Promise.resolve(Velocity.animate(elt[0], props, opts));
+  state.promise = Promise.resolve(Velocity.animate(elt, props, opts));
 
   if (label) {
     state.promise = state.promise.then(
@@ -74,7 +74,7 @@ export function animate(elt, props, opts, label) {
 
 export function stop(elt) {
   if (elt) {
-    Velocity(elt[0], 'stop', true);
+    Velocity(elt, 'stop', true);
   }
 }
 
@@ -94,7 +94,7 @@ export function setDefaults(props) {
 }
 
 export function isAnimating(elt, animationLabel) {
-  return elt && elt.data('lfTags_' + animationLabel);
+  return elt && data(elt, 'lfTags_' + animationLabel);
 }
 
 export function finish(elt, animationLabel) {
@@ -119,12 +119,35 @@ function stateForLabel(elt, label) {
 
 function applyLabel(elt, label, state) {
   if (elt) {
-    elt.data('lfTags_' + label, state);
+    data(elt, 'lfTags_' + label, state);
   }
 }
 
 function clearLabel(elt, label) {
   if (elt) {
-    elt.data('lfTags_' + label, null);
+    data(elt, 'lfTags_' + label, null);
+  }
+}
+
+const DATA_STORAGE = {};
+
+function data(obj, key, val) {
+  if (!obj) {
+    return DATA_STORAGE;
+  } else if (!key) {
+    if (!(obj in DATA_STORAGE)) {
+      return {};
+    }
+    return DATA_STORAGE[obj];
+  } else if (arguments.length < 3) {
+    if (!(obj in DATA_STORAGE)) {
+      return undefined;
+    }
+    return DATA_STORAGE[obj][key];
+  } else {
+    if (!(obj in DATA_STORAGE)) {
+      DATA_STORAGE[obj] = {};
+    }
+    DATA_STORAGE[obj][key] = val;
   }
 }

addon/components/liquid-container.js

@@ -2,15 +2,14 @@ import Component from '@ember/component';
 import Growable from 'liquid-fire/mixins/growable';
 import { measure } from './liquid-measured';
 import layout from 'liquid-fire/templates/components/liquid-container';
-import $ from 'jquery';
 
 export default Component.extend(Growable, {
   layout,
   classNames: ['liquid-container'],
 
   lockSize(elt, want) {
-    elt.outerWidth(want.width);
-    elt.outerHeight(want.height);
+    elt.style.width = `${want.width}px`;
+    elt.style.height = `${want.height}px`;
   },
 
   unlockSize() {
@@ -54,8 +53,7 @@ export default Component.extend(Growable, {
       }
 
       // Remember our own size before anything changes
-      let elt = $(this.element);
-      this._cachedSize = measure(elt);
+      this._cachedSize = measure(this.element);
 
       // And make any children absolutely positioned with fixed sizes.
       for (let i = 0; i < versions.length; i++) {
@@ -64,15 +62,14 @@ export default Component.extend(Growable, {
     },
 
     afterChildInsertion(versions) {
-      let elt = $(this.element);
+      let elt = this.element;
       let enableGrowth = this.enableGrowth !== false;
 
       // Measure children
       let sizes = [];
       for (let i = 0; i < versions.length; i++) {
         if (versions[i].view) {
-          let childElt = $(versions[i].view.element);
-          sizes[i] = measure(childElt);
+          sizes[i] = measure(versions[i].view.element);
         }
       }
 
@@ -119,23 +116,26 @@ function goAbsolute(version, size) {
   if (!version.view) {
     return;
   }
-  let elt = $(version.view.element);
-  let pos = elt.position();
+  let elt = version.view.element;
+  let pos = {
+    top: elt.offsetTop,
+    left: elt.offsetLeft,
+  };
   if (!size) {
     size = measure(elt);
   }
-  elt.outerWidth(size.width);
-  elt.outerHeight(size.height);
-  elt.css({
-    position: 'absolute',
-    top: pos.top,
-    left: pos.left,
-  });
+  elt.style.width = `${size.width}px`;
+  elt.style.height = `${size.height}px`;
+  elt.style.position = 'absolute';
+  elt.style.top = `${pos.top}px`;
+  elt.style.left = `${pos.left}px`;
 }
 
 function goStatic(version) {
   if (version.view && !version.view.isDestroyed) {
-    let elt = $(version.view.element);
-    elt.css({ width: '', height: '', position: '' });
+    let elt = version.view.element;
+    elt.style.width = '';
+    elt.style.height = '';
+    elt.style.position = '';
   }
 }

addon/components/liquid-measured.js

@@ -3,7 +3,6 @@ import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 import MutationObserver from 'liquid-fire/mutation-observer';
 import layout from 'liquid-fire/templates/components/liquid-measured';
-import $ from 'jquery';
 
 const WINDOW_RESIZE_THROTTLE_DURATION = 100;
 
@@ -37,8 +36,7 @@ export default Component.extend({
     this.windowResizeHandler = this.windowDidResize.bind(this);
     window.addEventListener('resize', this.windowResizeHandler);
 
-    let elt = $(this.element);
-    elt.bind('webkitTransitionEnd', function () {
+    this.element.addEventListener('webkitTransitionEnd', function () {
       self.didMutate();
     });
     // Chrome Memory Leak: https://bugs.webkit.org/show_bug.cgi?id=93661
@@ -77,8 +75,7 @@ export default Component.extend({
     if (!this.element) {
       return;
     }
-    let elt = $(this.element);
-    this.didMeasure(measure(elt));
+    this.didMeasure(measure(this.element));
   },
 
   _destroyOnUnload() {
@@ -87,11 +84,11 @@ export default Component.extend({
 });
 
 export function measure($elt) {
-  let boundingRect = $elt[0].getBoundingClientRect();
+  let boundingRect = $elt.getBoundingClientRect();
 
   // Calculate the scaling.
   // NOTE: We only handle the simple zoom case.
-  let claimedWidth = $elt[0].offsetWidth;
+  let claimedWidth = $elt.offsetWidth;
 
   // Round the width because offsetWidth is rounded
   let actualWidth = Math.round(boundingRect.width);

addon/components/liquid-spacer.js

@@ -2,25 +2,24 @@ import Component from '@ember/component';
 import { measure } from './liquid-measured';
 import Growable from 'liquid-fire/mixins/growable';
 import layout from 'liquid-fire/templates/components/liquid-spacer';
-import $ from 'jquery';
 
 export default Component.extend(Growable, {
   layout,
   enabled: true,
 
   didInsertElement() {
     this._super(...arguments);
-    let elt = $(this.element);
-    let child = elt.find('> div');
+    let elt = this.element;
+    let child = elt.getElementsByTagName('div')[0];
     let measurements = this.myMeasurements(measure(child));
 
     this.element.style.overflow = 'hidden';
 
     if (this.growWidth) {
-      elt.outerWidth(measurements.width);
+      elt.style.width = `${measurements.width}px`;
     }
     if (this.growHeight) {
-      elt.outerHeight(measurements.height);
+      elt.style.height = `${measurements.height}px`;
     }
   },
 
@@ -32,15 +31,15 @@ export default Component.extend(Growable, {
       return;
     }
     let want = this.myMeasurements(measurements);
-    let elt = $(this.element);
+    let elt = this.element;
     let have = measure(elt);
     this.animateGrowth(elt, have, want);
   },
 
   // given our child's outerWidth & outerHeight, figure out what our
   // outerWidth & outerHeight should be.
   myMeasurements(childMeasurements) {
-    let elt = $(this.element);
+    let elt = this.element;
     return {
       width:
         childMeasurements.width +
@@ -70,8 +69,10 @@ function border(dimension) {
 
 function sumCSS(elt, fields) {
   let accum = 0;
+  const style = getComputedStyle(elt);
+
   for (let i = 0; i < fields.length; i++) {
-    let num = parseFloat(elt.css(fields[i]), 10);
+    let num = parseFloat(style[fields[i]], 10);
     if (!isNaN(num)) {
       accum += num;
     }

addon/components/liquid-versions.js

@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import { A } from '@ember/array';
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
@@ -70,7 +69,7 @@ export default Component.extend({
 
     transition = this.transitionMap.transitionFor({
       versions: versions,
-      parentElement: $(containingElement(this)),
+      parentElement: containingElement(this),
       use: this.use,
       rules: this.rules,
       matchContext: this.matchContext || {},

addon/constrainables.js

@@ -69,7 +69,7 @@ export default {
   },
   parentElementClass: {
     accessor: function (conditions) {
-      let cls = conditions.parentElement.attr('class');
+      let cls = conditions.parentElement.getAttribute('class');
       if (cls) {
         return cls.split(/\s+/);
       }

addon/constraints.js

@@ -66,7 +66,7 @@ export default class Constraints {
     if (this.debug) {
       console.log(
         '[liquid-fire] Checking transition rules for',
-        conditions.parentElement[0]
+        conditions.parentElement
       );
     }
 

addon/dsl.js

@@ -69,7 +69,7 @@ export default class DSL {
 
   matchSelector(selector) {
     return new Constraint('parentElement', function (elt) {
-      return elt.is(selector);
+      return matches(elt, selector);
     });
   }
 
@@ -118,3 +118,15 @@ export default class DSL {
     return 'debug';
   }
 }
+
+function matches(elt, s) {
+  if (Element.prototype.matches) {
+    return elt.matches(s);
+  } else {
+    let matches = (elt.document || elt.ownerDocument).querySelectorAll(s),
+      i = matches.length;
+    // eslint-disable-next-line no-empty
+    while (--i >= 0 && matches.item(i) !== elt) {}
+    return i > -1;
+  }
+}

addon/mixins/growable.js

@@ -43,7 +43,7 @@ export default Mixin.create({
       want[dimension],
       have[dimension],
     ];
-    return Velocity(elt[0], target, {
+    return Velocity(elt, target, {
       delay: this._delayFor(have[dimension], want[dimension]),
       duration: this._durationFor(have[dimension], want[dimension]),
       queue: false,

addon/running-transition.js

@@ -1,5 +1,4 @@
 import { capitalize } from '@ember/string';
-import $ from 'jquery';
 
 export default class RunningTransition {
   constructor(transitionMap, versions, animation) {
@@ -72,7 +71,7 @@ function addPublicVersion(context, prefix, version) {
   let elt = null;
 
   if (version.view) {
-    elt = $(version.view.element);
+    elt = version.view.element;
   }
 
   let props = {

addon/transitions/default.js

@@ -6,7 +6,7 @@ import { Promise } from 'liquid-fire';
 // appearance).
 export default function defaultTransition() {
   if (this.newElement) {
-    this.newElement.css({ visibility: '' });
+    this.newElement.style.visibility = '';
   }
   return Promise.resolve();
 }