photoride - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

lib/photoride.js

 if (typeof Tap === "undefined") require("tapjs");
 var _ = require("underscore");
 var EventEmitter = require("events").EventEmitter;
+var iScroll = require("iscroll");
+var Modernizr = require("./modernizr");
 
@@ -9,3 +11,9 @@ function Photoride(cont, options) {
 	var self = this;
-	this.options = options || {};
+	this.options = _.extend({
+		loop: true,
+		showCount: true,
+		resizeEvent: true,
+		enableTouch: Modernizr.touch,
+		enableArrowKeys: true
+	}, options || {});
 
@@ -23,3 +31,3 @@ if (cont == null) cont = document.createElement("div");
 	this.photoCount = document.createElement("div");
-	this.photoCount.style.display = this.options.showCount === false ? "none" : "";
+	this.photoCount.style.display = this.option("showCount") ? "" : "none";
 	this.photoCount.classList.add("photoride-count");
@@ -35,3 +43,3 @@ this.container.appendChild(this.photoCount);
 	this.nextBtn.classList.add("photoride-next-btn");
-	this.nextBtn.addEventListener("tap", this.next.bind(this));
+	this.nextBtn.addEventListener("tap", this.next.bind(this, null));
 	this.container.appendChild(this.nextBtn);
@@ -42,3 +50,3 @@
 	this.prevBtn.classList.add("photoride-prev-btn");
-	this.prevBtn.addEventListener("tap", this.previous.bind(this));
+	this.prevBtn.addEventListener("tap", this.previous.bind(this, null));
 	this.container.appendChild(this.prevBtn);
@@ -59,3 +67,5 @@
 	init: function() {
-		if (this.options.resizeEvent !== false) {
+		if (Modernizr.overflowscrolling) this._scrollDetect();
+
+		if (this.option("resizeEvent") !== false) {
 			var onResize;
@@ -68,3 +78,3 @@ window.addEventListener("resize", onResize = this.refresh.bind(this));
 
-		if (this.options.enableTouch !== false) {
+		if (this.option("enableTouch") !== false) {
 			var onTouch;
@@ -77,5 +87,19 @@ this.container.addEventListener("touchstart", onTouch = this._onTouchStart.bind(this));
 
+		if (this.option("enableArrowKeys") !== false) {
+			var onKeypress;
+			document.addEventListener("keyup", onKeypress = this._onArrowPress.bind(this));
+			this.once("destroy", function() {
+				document.removeEventListener("keyup", onKeypress);
+			});
+		}
+
 		this.refresh();
 	},
 
+	option: function(prop) {
+		var value = this.options == null ? void 0 : this.options[prop];
+		var args = Array.prototype.slice.call(arguments, 1);
+		return _.isFunction(value) ? value.apply(this, args) : value;
+	},
+
 	destroy: function() {
@@ -122,2 +146,6 @@ this.scroll.innerHTML = "";
 
+	getCurrent: function() {
+		return this.photos[this.current];
+	},
+
 	push: function(src, options) {
@@ -143,8 +171,14 @@ return this.add(this.photos.length, src, options);
 
-	next: function() {
-		return this.goto(this.current + 1);
+	next: function(loop) {
+		var n = this.current + 1;
+		if (loop == null) loop = this.option("loop");
+		if (loop && n >= this.photos.length) n = 0;
+		return this.goto(n);
 	},
 
-	previous: function() {
-		return this.goto(this.current - 1);
+	previous: function(loop) {
+		var n = this.current - 1;
+		if (loop == null) loop = this.option("loop");
+		if (loop && n < 0) n = this.photos.length - 1;
+		return this.goto(n);
 	},
@@ -169,3 +203,3 @@
 
-			if (Math.abs(dy) >= 20) {
+			if (Math.abs(dy) >= 50) {
 				horz = true;
@@ -183,7 +217,6 @@ self.goto(self.current);
 
-			var moved, chg;
+			var chg;
 
 			if (!horz && dx != null && Math.abs(dx) > 10)  {
-				moved = dx / self.width;
-				chg = dx >= 30 ? 1 : dx <= -30 ? -1 : 0;
+				chg = dx >= 40 ? 1 : dx <= -40 ? -1 : 0;
 			} else {
@@ -195,2 +228,32 @@ chg = 0;
 		});
+	},
+
+	_onArrowPress: function(e) {
+		if (e.keyCode !== 37 && e.keyCode !== 39) return;
+		e.preventDefault();
+		this[e.keyCode === 37 ? "previous" : "next"](this.option("loop"));
+	},
+
+	_scrollDetect: function() {
+		if (this._scrollFix) return this;
+
+		this.once("destroy", function() {
+			if (this._scrollFix) {
+				cancelAnimationFrame(this._scrollFix);
+				delete this._scrollFix;
+			}
+		});
+
+		var refresh = _.bind(function() {
+			var photo = this.getCurrent();
+			if (photo != null) photo.refresh();
+			next();
+		}, this);
+
+		function next() {
+			this._scrollFix = requestAnimationFrame(refresh);
+		}
+
+		next();
+		return this;
 	}
@@ -202,3 +265,6 @@ });
 		backgroundSize: "cover",
-		backgroundColor: "black"
+		backgroundColor: "black",
+		scrollDuration: 300,
+		maxFade: 0.75,
+		gradientSize: 0.3
 	}, options || {});
@@ -211,4 +277,4 @@
 	this.view.classList.add("photoride-image-view");
-	this.view.style.backgroundSize = this.options.backgroundSize;
-	this.view.style.backgroundColor = this.options.backgroundColor;
+	this.view.style.backgroundSize = this.option("backgroundSize");
+	this.view.style.backgroundColor = this.option("backgroundColor");
 	this.container.appendChild(this.view);
@@ -221,13 +287,17 @@
 
+	this.inner = document.createElement("div");
+	this.inner.classList.add("photoride-image-inner");
+	this.content.appendChild(this.inner);
+
 	this.paddingBox = document.createElement("div");
 	this.paddingBox.classList.add("photoride-image-padding");
-	this.content.appendChild(this.paddingBox);
+	this.inner.appendChild(this.paddingBox);
 
 	this.title = document.createElement("div");
 	this.title.classList.add("photoride-image-title");
-	this.content.appendChild(this.title);
+	this.inner.appendChild(this.title);
 
 	this.caption = document.createElement("div");
 	this.caption.classList.add("photoride-image-caption");
-	this.content.appendChild(this.caption);
+	this.inner.appendChild(this.caption);
 
@@ -251,7 +321,9 @@ this.moreBtn = document.createElement("a");
 	this.setSource(src);
-	this.setTitle(this.options.title);
-	this.setCaption(this.options.caption);
+	this.setTitle(this.option("title"));
+	this.setCaption(this.option("caption"));
 }
 
 _.extend(Photo.prototype, {
+	option: Photoride.prototype.option,
+
 	setSource: function(src) {
@@ -308,3 +380,3 @@ this.source = src;
 		var scrollTop = this.content.scrollTop;
-		var duration = this.options.scrollDuration || 300;
+		var duration = this.option("scrollDuration");
 
@@ -368,9 +440,6 @@ // find difference between current scroll position(relative to document.body) and the bink element to which we are scrolling to
 		perc = isNaN(perc) ? 0 : Math.min(1, perc);
-		var fade = this.options.maxFade;
-		fade = typeof fade !== "number" ? 0.75 : fade;
+		var fade = this.option("maxFade");
 		var lead = fade * perc;
 		var css = this.content.style.cssText;
-		var gradientSize = this.options.gradientSize;
-		gradientSize = typeof gradientSize !== "number" ? 0.3 : gradientSize;
-		gradientSize = Math.min(100, Math.max(0, Math.round((1 - gradientSize) * 100)));
+		var gradientSize = Math.min(100, Math.max(0, Math.round((1 - this.option("gradientSize")) * 100)));
 
@@ -377,0 +446,0 @@ this.toTopBtn.style.display = hasCaption && scrollTop >= 20 ? "" : "none";

package.json

 {
-	"name": "photoride",
-	"version": "0.1.0",
-	"description": "A simple image viewer with support for long captions.",
-	"author": "Beneath the Ink <[e-mail]>",
-	"contributors": [
-		{
-			"name": "Tyler Johnson",
-			"email": "[e-mail]",
-			"url": "http://github.com/tyler-johnson"
-		}
-	],
-	"main": "lib/photoride.js",
-	"style": "lib/photoride.less",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/BeneathTheInk/photoride.git"
-	},
-	"devDependencies": {
-		"grunt": "~0.4.5",
-		"grunt-browserify": "~3.8.0",
-		"grunt-cli": "~0.1.13",
-		"grunt-contrib-clean": "~0.6.0",
-		"grunt-contrib-cssmin": "~0.12.3",
-		"grunt-contrib-less": "~1.0.1",
-		"grunt-contrib-uglify": "~0.9.1",
-		"grunt-contrib-watch": "~0.6.1",
-		"grunt-wrap2000": "~0.1.0",
-		"less-plugin-inline-urls": "~1.1.0",
-		"less-plugin-npm-import": "~2.1.0"
-	},
-	"dependencies": {
-		"domready": "~1.0.8",
-		"lesshat": "~3.0.2",
-		"tapjs": "~1.0.6",
-		"underscore": "~1.8.3"
-	},
-	"scripts": {
-		"prepublish": "grunt"
-	},
-	"license": "MIT",
-	"keywords": [
-		"photo",
-		"gallery",
-		"viewer",
-		"mobile",
-		"caption",
-		"image"
-	]
+  "name": "photoride",
+  "version": "0.1.1",
+  "description": "A simple image viewer with support for long captions.",
+  "author": "Beneath the Ink <[e-mail]>",
+  "contributors": [
+    {
+      "name": "Tyler Johnson",
+      "email": "[e-mail]",
+      "url": "http://github.com/tyler-johnson"
+    }
+  ],
+  "main": "lib/photoride.js",
+  "style": "lib/photoride.less",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/BeneathTheInk/photoride.git"
+  },
+  "devDependencies": {
+    "grunt": "~0.4.5",
+    "grunt-browserify": "~3.8.0",
+    "grunt-cli": "~0.1.13",
+    "grunt-contrib-clean": "~0.6.0",
+    "grunt-contrib-cssmin": "~0.12.3",
+    "grunt-contrib-less": "~1.0.1",
+    "grunt-contrib-uglify": "~0.9.1",
+    "grunt-contrib-watch": "~0.6.1",
+    "grunt-wrap2000": "~0.1.0",
+    "less-plugin-inline-urls": "~1.1.0",
+    "less-plugin-npm-import": "~2.1.0"
+  },
+  "dependencies": {
+    "domready": "~1.0.8",
+    "iscroll": "^5.1.3",
+    "lesshat": "~3.0.2",
+    "tapjs": "~1.0.6",
+    "underscore": "~1.8.3"
+  },
+  "scripts": {
+    "prepublish": "grunt"
+  },
+  "license": "MIT",
+  "keywords": [
+    "photo",
+    "gallery",
+    "viewer",
+    "mobile",
+    "caption",
+    "image"
+  ]
 }

README.md

@@ -69,2 +69,4 @@ # Photoride
 - `enableTouch` (default: `true`) - By default, the user can scroll between images using their finger on a mobile device. You can disable touch interactions by setting this to false.
+- `enableArrowKeys` (default: `true`) - By default, the user can press the left and right arrow keys to navigate between images. You can disable this feature by setting this to false.
+- `loop` (default: `true`) - Whether or not the next and previous buttons loop around when reaching the end of the photos.
 
@@ -71,0 +73,0 @@ __Individual Image Options__

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

Improved metrics

Total package byte prevSize

636139

increased by72.6%

Number of package files

18

increased by5.88%

Lines of code

10339

increased by81.61%

Number of lines in readme file

79

increased by2.6%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addediscroll@^5.1.3

• + Addediscroll@5.2.0(transitive)