css-sprite-lite - npm Package Compare versions

Comparing version 1.2.0 to 2.0.1

index.js

 "use strict";
 
-var Class    = require('uclass');
-var onRemove = require('udom/element/onRemove');
+const deepMixIn = require('mout/object/deepMixIn');
+const onRemove  = require('udom/element/onRemove');
 
-var csSpriteLite = new Class({
-  Binds : ['stop'],
+class csSpriteLite {
 
-  Implements : [
-    require('uclass/options')
-  ],
+  constructor(options) {
+    this.stop = this.stop.bind(this);
 
-  options : {
-    url : null,
-    width : 200,
-    height : 200,
-    interval : 100,
-    anchor : document.body,
-    loop_from : 0,
-    ignored_frames : [],
-    loop_start_coor : {
-      x : 0, y : 0
-    },
-    current_position : {
-      x : 0, y : 0
-    }
-  },
+    this.options = {
+      url       : null,
+      width     : 200,
+      height    : 200,
+      interval  : 100,
+      anchor    : document.body,
+      loop_from : 0,
+      ignored_frames   : [],
+      loop_start_coor  : {
+        x : 0, y : 0
+      },
+      current_position : {
+        x : 0, y : 0
+      }
+    };
 
-  interval : null,
+    this.interval = null;
 
-  initialize : function(options) {
-    var self = this;
-    self.setOptions(options);
-  },
+    deepMixIn(this.options, (options || {}));
+  }
 
-  nextStep : function() {
-    var self = this;
-
-    if (self.options.loop_from == self.frame && !self.loop_flag) {
-      self.options.loop_start_coor = {x : self.options.current_position.x, y : self.options.current_position.y};
-      self.loop_flag = true;
+  nextStep() {
+    if(this.options.loop_from == this.frame && !this.loop_flag) {
+      this.options.loop_start_coor = {x : this.options.current_position.x, y : this.options.current_position.y};
+      this.loop_flag = true;
     }
 
-    self.options.current_position.x += self.options.width;
-    if (self.img_size.width <= self.options.current_position.x) 
-      self.options.current_position = {x : 0, y : self.options.current_position.y + self.options.height};
+    this.options.current_position.x += this.options.width;
+    if(this.img_size.width <= this.options.current_position.x)
+      this.options.current_position = {x : 0, y : this.options.current_position.y + this.options.height};
 
-    if (self.img_size.height <= self.options.current_position.y) {
-      self.frame = self.options.loop_from;
-      self.options.current_position = {x : self.options.loop_start_coor.x, y : self.options.loop_start_coor.y};
+    if(this.img_size.height <= this.options.current_position.y) {
+      this.frame = this.options.loop_from;
+      this.options.current_position = {x : this.options.loop_start_coor.x, y : this.options.loop_start_coor.y};
     }
 
-    if (self.options.ignored_frames.indexOf(self.frame) !== -1)
-      self.nextStep();
-  },
+    if(this.options.ignored_frames.indexOf(this.frame) !== -1)
+      this.nextStep();
+  }
 
-  setStyles : function(obj, propertyObject) {
-   for (var property in propertyObject)
+  setStyles(obj, propertyObject) {
+    for(var property in propertyObject)
       obj.style[property] = propertyObject[property];
-  },
+  }
 
-  play : function() {
-    var self = this,
-        src_img = new Image();
+  play() {
+    var src_img = new Image();
 
-    src_img.onload = function() {
-      self.img_size = {
-        'width' : this.width,
-        'height' : this.height
+    src_img.onload = () => {
+      this.img_size = {
+        width  : this.width,
+        height : this.height
       };
@@ -75,34 +68,34 @@
 
-      self.setStyles(canvas, {
-        "backgroundImage"    : "url('" + self.options.url + "')",
-        "backgroundRepeat"   : "no-repeat",
-        "backgroundPosition" : "0px 0px",
-        "width"              : self.options.width || 200,
-        "height"             : self.options.height || 200
+      this.setStyles(canvas, {
+        backgroundImage    : `url('${this.options.url}')`,
+        backgroundRepeat   : "no-repeat",
+        backgroundPosition : "0px 0px",
+        width              : this.options.width || 200,
+        height             : this.options.height || 200
       });
 
-      self.options.anchor.appendChild(canvas);
-      onRemove(canvas, self.stop);
-      self.frame = 0,
-      self.loop_flag = false;
+      this.options.anchor.appendChild(canvas);
+      onRemove(canvas, this.stop);
+      this.frame = 0,
+      this.loop_flag = false;
 
-      self.interval = setInterval(function() {
-        self.nextStep();
-        self.setStyles(canvas, {
-          "backgroundPosition" : "-" + self.options.current_position.x + "px -" + self.options.current_position.y + "px"
+      this.interval = setInterval(() => {
+        this.nextStep();
+        this.setStyles(canvas, {
+          "backgroundPosition" : `-${this.options.current_position.x}px -${this.options.current_position.y}px`
         });
 
-        self.frame++;
-      }, self.options.interval);
+        this.frame++;
+      }, this.options.interval);
     };
-    src_img.src = self.options.url;
-  },
 
-  stop : function() {
-    var self = this;
-    clearInterval(self.interval);
+    src_img.src = this.options.url;
   }
 
-});
+  stop() {
+    clearInterval(this.interval);
+  }
 
+}
+
 module.exports = csSpriteLite;

package.json

 {
   "name": "css-sprite-lite",
-  "version": "1.2.0",
+  "version": "2.0.1",
   "description": "An easy AND LIGHT way to create a spinner from a sprite",
   "main": "index.js",
   "dependencies": {
-    "uclass": "^2.0.7",
+    "mout": "^1.1.0",
     "udom": "^1.6.1"
   },
   "scripts": {
-    "test": "npm test"
+    "eslint": "eslint index.js"
   },
@@ -13,0 +13,0 @@ "repository": {

README.md

@@ -12,4 +12,2 @@ # csSpriteLite
 ### Installation
-* In pure client side, just take the dist/csSpriteLite.js file and use it as in the exemple.
-* You can also use the npm module, require and browserify it.
 ```
@@ -21,10 +19,4 @@ npm install css-sprite-lite
 ```
-//////////////////////////
-// dist file
-<script type="text/javascript" src="csSpriteLite.js">;</script>
-// browserified
-var csSpriteLite = require('csSpriteLite');
-/////////////////////////
+const csSpriteLite = require('csSpriteLite');
  
- 
 document.onreadystatechange = function () {
@@ -59,10 +51,2 @@ if (document.readyState == "complete") {
 
-### Dev mode
-
-Don't forget to rebuild the compiled file if needed :
-```sh
-$ browserify index.js --standalone csSpriteLite > dist/csSpriteLite.js
-```
-it AS to be in standalone mode to be used in a non browserified app
-
 You can find this module on npmjs.com :
@@ -69,0 +53,0 @@ https://www.npmjs.com/package/css-sprite-lite

Fixed 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

Number of package files

5

increased by25%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

4980

decreased by-10.7%

Lines of code

78

decreased by-8.24%

Number of lines in readme file

60

decreased by-21.05%

Dependency changes

• + Addedmout@^1.1.0

• - Removeduclass@^2.0.7

• - Removeduclass@2.4.0(transitive)