floating-action - npm Package Compare versions

Comparing version 1.0.3 to 2.0.0

dist/floating-action.js

@@ -0,1 +1,2 @@
+/* globals HTMLElement, customElements */
 /**
@@ -5,113 +6,115 @@ * Created by claysissing on 12/07/2016.
 
-var csFA = Object.create(HTMLElement.prototype);
+class Csfloatingaction extends HTMLElement {
+  connectedCallback () {
+    this.setAttributes()
+    this.setElements()
+    this.addEvents()
+    this.hasScrolled()
+  }
 
-csFA.createdCallback = function() {
-    this.setAttributes();
-    this.setElements();
-    this.addEvents();
-    this.hasScrolled();
-};
+  disconnectedCallback () {
+    this.removeEventListener('mouseenter', this.buttonAction)
+    this.removeEventListener('mouseleave', this.buttonAction)
+    this.removeEventListener('click', this.buttonAction)
+    window.removeEventListener('scroll', this.scrollEvent)
+    this.buttonElement.removeEventListener('click', this.preventBtnClick)
+  }
 
-csFA.setAttributes = function() {
-    this.button = this.getAttribute('button');
-    this.container = this.getAttribute('container');
-    this.toggle = this.getAttribute('toggle');
-    this.moveContainer = this.getAttribute('move-container');
-    this.offSet = parseInt(this.getAttribute('to-bottom')) || 0;
-};
+  setAttributes () {
+    this.button = this.getAttribute('button')
+    this.container = this.getAttribute('container')
+    this.toggle = this.getAttribute('toggle')
+    this.moveContainer = this.getAttribute('move-container')
+    this.offSet = parseInt(this.getAttribute('to-bottom')) || 0
+  }
 
-csFA.setElements = function() {
-    this.buttonElement = document.querySelector(this.button);
-    this.containerElement = document.querySelector(this.container);
-};
+  setElements () {
+    this.buttonElement = this.querySelector(this.button)
+    this.containerElement = this.querySelector(this.container)
+  }
 
-csFA.addEvents = function() {
-    
-    if(!this.isTouchDevice()) {
-        this.addEventListener('mouseenter', this.buttonAction.bind(this), false);
-        this.addEventListener('mouseleave', this.buttonAction.bind(this), false);
+  addEvents () {
+    if (!this.isTouchDevice()) {
+      this.addEventListener('mouseenter', this.buttonAction.bind(this), false)
+      this.addEventListener('mouseleave', this.buttonAction.bind(this), false)
     }
-    
-    if(this.isTouchDevice()) {
-        this.buttonElement.addEventListener('click', this.buttonAction.bind(this), false);
+
+    if (this.isTouchDevice()) {
+      this.buttonElement.addEventListener('click', this.buttonAction.bind(this), false)
     }
-};
+  }
 
-csFA.hasScrolled = function() {
-    
-    window.addEventListener('scroll', function() {
-        
-        var isBottom = this.isBottom(this.offSet),
-            hasClass = this.classList.contains(this.moveContainer);
-        
-        if(isBottom) {
-            if(!hasClass) {
-                this.classList.add(this.moveContainer);
-            }
-        }
-        
-        if(!isBottom) {
-            if(hasClass) {
-                this.classList.remove(this.moveContainer);
-            }
-        }
-        
-    }.bind(this), false);
-};
+  hasScrolled () {
+    window.addEventListener('scroll', this.scrollEvent.bind(this), false)
+  }
 
-csFA.buttonAction = function(e) {
-    
-    e.preventDefault();
-    this.addRemoveClass();
-    
-    this.buttonElement.addEventListener('click', function(e) {
-        e.preventDefault();
-    }, false);
-};
+  scrollEvent () {
+    var isBottom = this.isBottom(this.offSet)
+    var hasClass = this.classList.contains(this.moveContainer)
 
-csFA.addRemoveClass = function () {
-    
-    var conElement = this.containerElement,
-        isVisible = conElement.classList.contains(this.toggle);
-    
-    if(!isVisible) {
-        conElement.classList.add(this.toggle);
+    if (isBottom) {
+      if (!hasClass) {
+        this.classList.add(this.moveContainer)
+      }
     }
-    
-    if(isVisible) {
-        conElement.classList.remove(this.toggle);
+
+    if (!isBottom) {
+      if (hasClass) {
+        this.classList.remove(this.moveContainer)
+      }
     }
-};
+  }
 
-csFA.isTouchDevice = function() {
+  buttonAction (e) {
+    e.preventDefault()
+    this.addRemoveClass()
+    this.buttonElement.addEventListener('click', this.preventBtnClick, false)
+  }
+
+  preventBtnClick (e) {
+    e.preventDefault()
+  }
+
+  addRemoveClass () {
+    var conElement = this.containerElement
+    var isVisible = conElement.classList.contains(this.toggle)
+    if (!isVisible) {
+      conElement.classList.add(this.toggle)
+    }
+    if (isVisible) {
+      conElement.classList.remove(this.toggle)
+    }
+  }
+
+  isTouchDevice () {
     try {
-        document.createEvent('TouchEvent');
-        return true;
+      document.createEvent('TouchEvent')
+      return true
     } catch (e) {
-        return false;
+      return false
     }
-};
+  }
 
-csFA.isBottom = function(offSet) {
-    
-    var totalHeight   = document.body.offsetHeight - offSet,
-        visibleHeight = document.documentElement.clientHeight,
-        currentScroll;
-    
+  isBottom (offSet) {
+    var totalHeight = document.body.offsetHeight - offSet
+    var visibleHeight = document.documentElement.clientHeight
+    var currentScroll
+
     if (document.documentElement.scrollTop) {
-        currentScroll = document.documentElement.scrollTop;
+      currentScroll = document.documentElement.scrollTop
     } else {
-        currentScroll = document.body.scrollTop;
+      currentScroll = document.body.scrollTop
     }
-    
+
     if (totalHeight <= currentScroll + visibleHeight) {
-        return true;
+      return true
     } else {
-        return false;
+      return false
     }
+  }
+
+
 }
 
-
-document.registerElement('cs-floatingaction', {
-    prototype: csFA
-});
+// Define the new element
+customElements.define('cs-floatingaction', Csfloatingaction)

dist/floating-action.min.js

@@ -1,1 +0,1 @@
-var csFA=Object.create(HTMLElement.prototype);csFA.createdCallback=function(){this.setAttributes(),this.setElements(),this.addEvents(),this.hasScrolled()},csFA.setAttributes=function(){this.button=this.getAttribute("button"),this.container=this.getAttribute("container"),this.toggle=this.getAttribute("toggle"),this.moveContainer=this.getAttribute("move-container"),this.offSet=parseInt(this.getAttribute("to-bottom"))||0},csFA.setElements=function(){this.buttonElement=document.querySelector(this.button),this.containerElement=document.querySelector(this.container)},csFA.addEvents=function(){this.isTouchDevice()||(this.addEventListener("mouseenter",this.buttonAction.bind(this),!1),this.addEventListener("mouseleave",this.buttonAction.bind(this),!1)),this.isTouchDevice()&&this.buttonElement.addEventListener("click",this.buttonAction.bind(this),!1)},csFA.hasScrolled=function(){window.addEventListener("scroll",function(){var t=this.isBottom(this.offSet),e=this.classList.contains(this.moveContainer);t&&(e||this.classList.add(this.moveContainer)),t||e&&this.classList.remove(this.moveContainer)}.bind(this),!1)},csFA.buttonAction=function(t){t.preventDefault(),this.addRemoveClass(),this.buttonElement.addEventListener("click",function(t){t.preventDefault()},!1)},csFA.addRemoveClass=function(){var t=this.containerElement,e=t.classList.contains(this.toggle);e||t.classList.add(this.toggle),e&&t.classList.remove(this.toggle)},csFA.isTouchDevice=function(){try{return document.createEvent("TouchEvent"),!0}catch(t){return!1}},csFA.isBottom=function(t){var e,n=document.body.offsetHeight-t,s=document.documentElement.clientHeight;return e=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop,n<=e+s},document.registerElement("cs-floatingaction",{prototype:csFA});
+'use strict';var _createClass=function(){function a(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,'value'in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}();function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')}function _possibleConstructorReturn(a,b){if(!a)throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');return b&&('object'==typeof b||'function'==typeof b)?b:a}function _inherits(a,b){if('function'!=typeof b&&null!==b)throw new TypeError('Super expression must either be null or a function, not '+typeof b);a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),b&&(Object.setPrototypeOf?Object.setPrototypeOf(a,b):a.__proto__=b)}var Csfloatingaction=function(a){function b(){return _classCallCheck(this,b),_possibleConstructorReturn(this,(b.__proto__||Object.getPrototypeOf(b)).apply(this,arguments))}return _inherits(b,a),_createClass(b,[{key:'connectedCallback',value:function connectedCallback(){this.setAttributes(),this.setElements(),this.addEvents(),this.hasScrolled()}},{key:'disconnectedCallback',value:function disconnectedCallback(){this.removeEventListener('mouseenter',this.buttonAction),this.removeEventListener('mouseleave',this.buttonAction),this.removeEventListener('click',this.buttonAction),window.removeEventListener('scroll',this.scrollEvent),this.buttonElement.removeEventListener('click',this.preventBtnClick)}},{key:'setAttributes',value:function setAttributes(){this.button=this.getAttribute('button'),this.container=this.getAttribute('container'),this.toggle=this.getAttribute('toggle'),this.moveContainer=this.getAttribute('move-container'),this.offSet=parseInt(this.getAttribute('to-bottom'))||0}},{key:'setElements',value:function setElements(){this.buttonElement=this.querySelector(this.button),this.containerElement=this.querySelector(this.container)}},{key:'addEvents',value:function addEvents(){this.isTouchDevice()||(this.addEventListener('mouseenter',this.buttonAction.bind(this),!1),this.addEventListener('mouseleave',this.buttonAction.bind(this),!1)),this.isTouchDevice()&&this.buttonElement.addEventListener('click',this.buttonAction.bind(this),!1)}},{key:'hasScrolled',value:function hasScrolled(){window.addEventListener('scroll',this.scrollEvent.bind(this),!1)}},{key:'scrollEvent',value:function scrollEvent(){var a=this.isBottom(this.offSet),b=this.classList.contains(this.moveContainer);a&&!b&&this.classList.add(this.moveContainer),!a&&b&&this.classList.remove(this.moveContainer)}},{key:'buttonAction',value:function buttonAction(a){a.preventDefault(),this.addRemoveClass(),this.buttonElement.addEventListener('click',this.preventBtnClick,!1)}},{key:'preventBtnClick',value:function preventBtnClick(a){a.preventDefault()}},{key:'addRemoveClass',value:function addRemoveClass(){var a=this.containerElement,b=a.classList.contains(this.toggle);b||a.classList.add(this.toggle),b&&a.classList.remove(this.toggle)}},{key:'isTouchDevice',value:function isTouchDevice(){try{return document.createEvent('TouchEvent'),!0}catch(a){return!1}}},{key:'isBottom',value:function isBottom(a){var b,c=document.body.offsetHeight-a,d=document.documentElement.clientHeight;return b=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop,!!(c<=b+d)}}]),b}(HTMLElement);customElements.define('cs-floatingaction',Csfloatingaction);

package.json

 {
   "name": "floating-action",
-  "version": "1.0.3",
+  "version": "2.0.0",
   "description": "This custom element will create a floating action button.",
   "main": "./dist/floating-action.min.js",
   "scripts": {
-    "build:js": "./node_modules/.bin/uglifyjs --compress --mangle -- src/floating-action.js > dist/floating-action.min.js && cp src/floating-action.js dist/floating-action.js",
-    "build:css": "./node_modules/.bin/cssnano < src/floating-action.css > dist/floating-action.min.css && cp src/floating-action.css dist/floating-action.css",
+    "builds:js": "babel src/floating-action.js --out-file dist/floating-action.min.js --presets=es2015,babili && cp src/floating-action.js dist/floating-action.js",
+    "build:css": "cssnano < src/floating-action.css > dist/floating-action.min.css && cp src/floating-action.css dist/floating-action.css",
     "version": "git add -A .",
@@ -31,2 +31,6 @@ "postversion": "git push && git push --tags"
   "devDependencies": {
+    "babel": "^6.23.0",
+    "babel-cli": "^6.24.1",
+    "babel-preset-es2015": "^6.24.1",
+    "babili": "^0.1.2",
     "cssnano": "^3.7.3",
@@ -33,0 +37,0 @@ "cssnano-cli": "^1.0.4",

src/floating-action.js

@@ -0,1 +1,2 @@
+/* globals HTMLElement, customElements */
 /**
@@ -5,113 +6,115 @@ * Created by claysissing on 12/07/2016.
 
-var csFA = Object.create(HTMLElement.prototype);
+class Csfloatingaction extends HTMLElement {
+  connectedCallback () {
+    this.setAttributes()
+    this.setElements()
+    this.addEvents()
+    this.hasScrolled()
+  }
 
-csFA.createdCallback = function() {
-    this.setAttributes();
-    this.setElements();
-    this.addEvents();
-    this.hasScrolled();
-};
+  disconnectedCallback () {
+    this.removeEventListener('mouseenter', this.buttonAction)
+    this.removeEventListener('mouseleave', this.buttonAction)
+    this.removeEventListener('click', this.buttonAction)
+    window.removeEventListener('scroll', this.scrollEvent)
+    this.buttonElement.removeEventListener('click', this.preventBtnClick)
+  }
 
-csFA.setAttributes = function() {
-    this.button = this.getAttribute('button');
-    this.container = this.getAttribute('container');
-    this.toggle = this.getAttribute('toggle');
-    this.moveContainer = this.getAttribute('move-container');
-    this.offSet = parseInt(this.getAttribute('to-bottom')) || 0;
-};
+  setAttributes () {
+    this.button = this.getAttribute('button')
+    this.container = this.getAttribute('container')
+    this.toggle = this.getAttribute('toggle')
+    this.moveContainer = this.getAttribute('move-container')
+    this.offSet = parseInt(this.getAttribute('to-bottom')) || 0
+  }
 
-csFA.setElements = function() {
-    this.buttonElement = document.querySelector(this.button);
-    this.containerElement = document.querySelector(this.container);
-};
+  setElements () {
+    this.buttonElement = this.querySelector(this.button)
+    this.containerElement = this.querySelector(this.container)
+  }
 
-csFA.addEvents = function() {
-    
-    if(!this.isTouchDevice()) {
-        this.addEventListener('mouseenter', this.buttonAction.bind(this), false);
-        this.addEventListener('mouseleave', this.buttonAction.bind(this), false);
+  addEvents () {
+    if (!this.isTouchDevice()) {
+      this.addEventListener('mouseenter', this.buttonAction.bind(this), false)
+      this.addEventListener('mouseleave', this.buttonAction.bind(this), false)
     }
-    
-    if(this.isTouchDevice()) {
-        this.buttonElement.addEventListener('click', this.buttonAction.bind(this), false);
+
+    if (this.isTouchDevice()) {
+      this.buttonElement.addEventListener('click', this.buttonAction.bind(this), false)
     }
-};
+  }
 
-csFA.hasScrolled = function() {
-    
-    window.addEventListener('scroll', function() {
-        
-        var isBottom = this.isBottom(this.offSet),
-            hasClass = this.classList.contains(this.moveContainer);
-        
-        if(isBottom) {
-            if(!hasClass) {
-                this.classList.add(this.moveContainer);
-            }
-        }
-        
-        if(!isBottom) {
-            if(hasClass) {
-                this.classList.remove(this.moveContainer);
-            }
-        }
-        
-    }.bind(this), false);
-};
+  hasScrolled () {
+    window.addEventListener('scroll', this.scrollEvent.bind(this), false)
+  }
 
-csFA.buttonAction = function(e) {
-    
-    e.preventDefault();
-    this.addRemoveClass();
-    
-    this.buttonElement.addEventListener('click', function(e) {
-        e.preventDefault();
-    }, false);
-};
+  scrollEvent () {
+    var isBottom = this.isBottom(this.offSet)
+    var hasClass = this.classList.contains(this.moveContainer)
 
-csFA.addRemoveClass = function () {
-    
-    var conElement = this.containerElement,
-        isVisible = conElement.classList.contains(this.toggle);
-    
-    if(!isVisible) {
-        conElement.classList.add(this.toggle);
+    if (isBottom) {
+      if (!hasClass) {
+        this.classList.add(this.moveContainer)
+      }
     }
-    
-    if(isVisible) {
-        conElement.classList.remove(this.toggle);
+
+    if (!isBottom) {
+      if (hasClass) {
+        this.classList.remove(this.moveContainer)
+      }
     }
-};
+  }
 
-csFA.isTouchDevice = function() {
+  buttonAction (e) {
+    e.preventDefault()
+    this.addRemoveClass()
+    this.buttonElement.addEventListener('click', this.preventBtnClick, false)
+  }
+
+  preventBtnClick (e) {
+    e.preventDefault()
+  }
+
+  addRemoveClass () {
+    var conElement = this.containerElement
+    var isVisible = conElement.classList.contains(this.toggle)
+    if (!isVisible) {
+      conElement.classList.add(this.toggle)
+    }
+    if (isVisible) {
+      conElement.classList.remove(this.toggle)
+    }
+  }
+
+  isTouchDevice () {
     try {
-        document.createEvent('TouchEvent');
-        return true;
+      document.createEvent('TouchEvent')
+      return true
     } catch (e) {
-        return false;
+      return false
     }
-};
+  }
 
-csFA.isBottom = function(offSet) {
-    
-    var totalHeight   = document.body.offsetHeight - offSet,
-        visibleHeight = document.documentElement.clientHeight,
-        currentScroll;
-    
+  isBottom (offSet) {
+    var totalHeight = document.body.offsetHeight - offSet
+    var visibleHeight = document.documentElement.clientHeight
+    var currentScroll
+
     if (document.documentElement.scrollTop) {
-        currentScroll = document.documentElement.scrollTop;
+      currentScroll = document.documentElement.scrollTop
     } else {
-        currentScroll = document.body.scrollTop;
+      currentScroll = document.body.scrollTop
     }
-    
+
     if (totalHeight <= currentScroll + visibleHeight) {
-        return true;
+      return true
     } else {
-        return false;
+      return false
     }
+  }
+
+
 }
 
-
-document.registerElement('cs-floatingaction', {
-    prototype: csFA
-});
+// Define the new element
+customElements.define('cs-floatingaction', Csfloatingaction)

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30057

increased by37.36%

Number of package files

16

increased by33.33%

Lines of code

652

increased by82.63%

Worsened metrics

Dev dependency count

9

increased by80%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes