sprite-player - npm Package Compare versions

Comparing version 0.1.0 to 1.0.0

package.json

 {
   "name": "sprite-player",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Web component for controlling sprite sheet animations.",
@@ -5,0 +5,0 @@ "main": "docs/sprite-player.js",

README.md

@@ -1,2 +0,58 @@
-# sprite-player
+# <sprite-player>
 Web component for controlling sprite sheet animations.
+
+[![npm version](https://badge.fury.io/js/sprite-player.svg)](https://github.com/positlabs\/sprite-player)
+
+	npm install --save sprite-player
+
+## Demo
+
+https://positlabs.github.io/sprite-player/examples/
+
+![run animation](https://media.giphy.com/media/xUPGcttIpo6nPrNgpG/giphy.gif)
+
+## Quickstart
+
+	<!-- load the x-tag lib -->
+	<script src='https://cdnjs.cloudflare.com/ajax/libs/x-tag/1.5.11/x-tag-core.js'></script>
+
+	<!-- load sprite-player component -->
+	<script src='node_modules/sprite-player/docs/sprite-player.js'></script>
+
+	<!-- use it! -->
+	<sprite-player src="./assets/run.png" rows="1" cols="8" fps="12" autoplay loop></sprite-player>
+	
+## Documentation
+
+### Attributes
+
+**src**: (`string`) Path to sprite image.
+**frames**: (`int`) Number of frames in the animation. Defaults to `rows * cols`.
+**rows**: (`int`) Number of rows in the sprite.
+**cols**: (`int`) Number of columns in the sprite.
+**fps**: (`Number`) Frames per second.
+**autoplay**: (`Boolean`) Automatically play the animation as soon as the `src` is loaded.
+**loop**: (`Boolean`) Automatically replay the animation when it ends.
+
+### Properties
+
+Note: All attributes are accessible as properties.
+
+**paused**: (`Boolean`) State of the animation.
+**duration**: (`Number`) Duration of animation in seconds.
+
+### Methods
+
+**play**: Plays the animation. Sets `paused` to `false`.
+**pause**: Pauses the animation. Sets `paused` to `true`.
+
+### Events
+
+**play**: Sent when playback of the media starts after having been paused; that is, when playback is resumed after a prior pause event.
+**playing**: Sent when the media begins to play (either for the first time, after having been paused, or after ending and then *restarting*).
+**pause**: Sent when playback is paused.
+**ended**: Sent when playback completes.
+**loadstart**: Sent when loading of the media begins.
+**load**: Sent when media is loaded.
+**error**: Sent when media failed to load
+

src/sprite-player.js

@@ -0,2 +1,8 @@
+/*
 
+	https://github.com/positlabs/sprite-player
+
+*/
+
+
 const componentName = 'sprite-player'
@@ -6,3 +12,3 @@
 	created(){
-		this.paused = true
+		this._paused = true
 		this._frame = 0
@@ -13,7 +19,4 @@ this._prevTime = Date.now()
 	},
-	inserted(){
-		if(this.autoplay) this.play()
-	},
 	removed(){
-		this.paused = true
+		this._paused = true
 	}
@@ -23,2 +26,7 @@ }
 const accessors = {
+
+	/*
+		attributes
+	*/
+	
 	src: {
@@ -30,6 +38,16 @@ attribute: {},
 			this._img = document.createElement('img')
+			xtag.fireEvent(this, 'loadstart')
+			this._img.onload = () => {
+				xtag.fireEvent(this, 'load')
+				this._resize()
+				if(this.autoplay) this.play()
+			}
+			this._img.onerror = () => {
+				xtag.fireEvent(this, 'error', {message: 'failed to load ' + this._src})
+				this._paused = true
+			}
 			this._img.src = val
-			this._img.onload = () => {this._resize()}
 		}
 	},
+	
 	frames: {
@@ -44,2 +62,3 @@ attribute: {},
 	},
+	
 	rows: {
@@ -50,2 +69,3 @@ attribute: {},
 	},
+	
 	cols: {
@@ -56,6 +76,5 @@ attribute: {},
 	},
+	
 	fps: {
-		attribute: {
-			def: 30
-		},
+		attribute: { def: 30 },
 		get(){return this._fps},
@@ -67,6 +86,30 @@ set(val){
 	},
+	
 	autoplay: { attribute: { boolean: true } },
+	
 	loop: { attribute: { boolean: true } },
-	paused: { attribute: { boolean: true } }
 	
+	/*
+		properties
+	*/
+	paused: {
+		get(){
+			return this._paused
+		},
+		set(val){
+			if(this._paused === val) return
+			this._paused = val
+			if(this._paused){
+				xtag.fireEvent(this, 'pause')
+			}else {
+				xtag.fireEvent(this, 'play')
+				this._onFrame()
+			}
+		},
+	},
+
+	duration: {
+		get(){ return this.frames / this.fps }
+	}
+	
 }
@@ -77,5 +120,8 @@
 		this.paused = false
-		this._onFrame()
 	},
 
+	pause(){
+		this.paused = true
+	},
+
 	_render (){
@@ -102,2 +148,5 @@ xtag.innerHTML(this, `
 
+		// fire playing event on first frame
+		if(this._frame === 0){ xtag.fireEvent(this, 'playing') }
+
 		this._draw()
@@ -109,4 +158,4 @@ this._frame = (this._frame + 1) % this.frames
 			this._paused = true
+			xtag.fireEvent(this, 'ended')
 		}
-
 	},
@@ -113,0 +162,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Lines of code

236

increased by17.41%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

59

increased by1866.67%

Worsened metrics

Total package byte prevSize

20680

decreased by-18.1%

No dependency changes