fitvids - npm Package Compare versions

Comparing version 1.0.2 to 2.0.0

index.js

@@ -14,14 +14,17 @@
 
-module.exports = function (selector, opts) {
+module.exports = function (parentSelector, opts) {
+	parentSelector = parentSelector || 'body'
 	opts = opts || {}
-	selector = selector || 'body'
 
-	if (isObject(selector)) {
-		opts = selector
-		selector = 'body'
+	if (isObject(parentSelector)) {
+		opts = parentSelector
+		parentSelector = 'body'
 	}
 
-	var containers = queryAll(selector)
-	if (containers.length < 1) return
+	opts.ignore = opts.ignore || ''
+	opts.players = opts.players || ''
 
+	var containers = queryAll(parentSelector)
+	if (!hasLength(containers)) return
+
 	if (!document.getElementById('fit-vids-style')) {
@@ -32,16 +35,17 @@ var head = document.head || document.getElementsByTagName('head')[0]
 
-	var customSelector = toSelector(opts.players)
-	var videoSelector = toSelector(selectors)
+	var custom = toSelectorArray(opts.players) || []
+	var ignored = toSelectorArray(opts.ignore) || []
+	var selector = selectors
+		.filter(notIgnored(ignored))
+		.concat(custom)
+		.join()
 
-	if (customSelector.length) {
-		videoSelector = videoSelector + ',' + customSelector
-	}
+	if (!hasLength(selector)) return
 
-	for (var i = 0, l = containers.length; i < l; i++) {
-		var container = containers[i]
-		var videos = queryAll(container, videoSelector)
-		for (var j = 0, ll = videos.length; j < ll; j++) {
-			wrap(videos[j])
-		}
-	}
+	containers.forEach(function (container) {
+		var videos = queryAll(container, selector)
+		videos.forEach(function (video) {
+			wrap(video)
+		})
+	})
 }
@@ -57,2 +61,11 @@
 
+function toSelectorArray (input) {
+	if (typeof input === 'string') {
+		return input.split(',').map(trim).filter(hasLength)
+	} else if (isArray(input)) {
+		return flatten(input.map(toSelectorArray).filter(hasLength))
+	}
+	return input || []
+}
+
 function wrap (el) {
@@ -78,7 +91,2 @@ if (/fluid-width-video-wrapper/.test(el.parentNode.className)) return
 
-function toSelector (input) {
-	if (typeof input === 'undefined') return ''
-	return Array.isArray(input) ? input.join() : input
-}
-
 function styles () {
@@ -90,4 +98,31 @@ var div = document.createElement('div')
 
+function notIgnored (ignored) {
+	if (ignored.length < 1) {
+		return function () {
+			return true
+		}
+	}
+	return function (selector) {
+		return ignored.indexOf(selector) === -1
+	}
+}
+
+function hasLength (input) {
+	return input.length > 0
+}
+
+function trim (str) {
+	return str.replace(/^\s+|\s+$/g, '')
+}
+
+function flatten (input) {
+	return [].concat.apply([], input)
+}
+
 function isObject (input) {
 	return Object.prototype.toString.call(input) === '[object Object]'
 }
+
+function isArray (input) {
+	return Object.prototype.toString.call(input) === '[object Array]'
+}

package.json

 {
   "name": "fitvids",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "description": "Makes your videos fluid-width.",
   "main": "index.js",
   "scripts": {
+    "build": "make build",
     "test": "make test"
   },
   "devDependencies": {
-    "hihat": "^2.4.3",
+    "hihat": "^2.6.4",
     "tap-dev-tool": "^1.3.0",
@@ -12,0 +13,0 @@ "tape": "^4.2.0",

README.md

@@ -21,4 +21,12 @@ # fitvids
 
-The module exports a single function. Just call it, and it'll wrap all your videos. By default it applies to any videos on the page.
+The module exports a single function. Just call it, and it'll wrap all your videos. By default it applies to video embeds from the following sites.
 
+Player        | Default?
+--------------|-----------
+YouTube       | ✓
+Vimeo         | ✓
+Kickstarter   | ✓
+
+_Other video players can be supported by passing a custom selector via [the options](#custom-players)_
+
 ## Options
@@ -28,3 +36,3 @@
 
-If you'd prefer to limit this to a single element, you can call fitvids with an optional selector:
+If you'd prefer to limit fitvids to a single element, you can provide an optional parent selector:
 
@@ -53,2 +61,12 @@ ```javascript
 
+#### Ignoring Selectors
+
+If you'd like to ignore one of the [default selectors](#usage), you can pass a selector via the `ignore` option:
+
+```javascript
+fitvids({
+	ignore: ['object']
+})
+```
+
 ### Browser Support
@@ -58,8 +76,7 @@
 
-* Firefox 3.5+
 * Chrome 4+
-* Opera 10+
-* IE 8+
+* Firefox 2+
+* IE 9+
 * Safari 3.1+
-* Safari iOS 3.2+
+* Safari Mobile 3.2+
 
@@ -66,0 +83,0 @@ ### License

test.js

 
+require('tap-dev-tool/register')
+
 var fitvids = require('./')
@@ -27,5 +29,3 @@ var test = require('tape')
 	t.equal(video.parentNode.className, 'fluid-width-video-wrapper', 'wrapped in fluid container')
-
 	document.body.removeChild(wrapper)
-
 	t.end()
@@ -52,3 +52,2 @@ })
 	document.body.removeChild(extra)
-
 	t.end()
@@ -65,5 +64,47 @@ })
 	t.equal(video.parentNode.className, 'fluid-width-video-wrapper', 'wrapped in fluid container')
+	document.body.removeChild(video.parentNode)
 	t.end()
 })
 
+test('allows ignoring default selectors', function (t) {
+	var video = player('http://player.vimeo.com/video/118801020')
+
+	fitvids({
+		ignore: ['iframe[src*="player.vimeo.com"]']
+	})
+
+	t.equal(video.parentNode.tagName, 'BODY', 'not wrapped in container')
+	document.body.removeChild(video)
+	t.end()
+})
+
+test('allows ignored and custom players at the same time', function (t) {
+	var vimeo = player('http://player.vimeo.com/video/118801020')
+	var youtube = player('https://www.youtube.com/embed/Bfk83WZcAI4')
+	var dailymotion = player('http://www.dailymotion.com/embed/video/x1wt7d1')
+
+	fitvids({
+		players: ['iframe[src*="dailymotion.com"]'],
+		ignore: ['iframe[src*="player.vimeo.com"],iframe[src*="youtube.com"]']
+	})
+
+	t.equal(vimeo.parentNode.tagName, 'BODY', 'ignored not wrapped in container')
+	t.equal(youtube.parentNode.tagName, 'BODY', 'ignored not wrapped in container')
+	t.equal(dailymotion.parentNode.tagName, 'DIV', 'custom is wrapped in container')
+	document.body.removeChild(vimeo)
+	document.body.removeChild(youtube)
+	document.body.removeChild(dailymotion.parentNode)
+	t.end()
+})
+
+test('doesn\'t wrap videos multiple times', function (t) {
+	var video = player('http://player.vimeo.com/video/118801020')
+	fitvids()
+	fitvids()
+	t.equal(video.parentNode.className, 'fluid-width-video-wrapper', 'wrapped in fluid container')
+	t.equal(video.parentNode.parentNode.tagName, 'BODY', 'not wrapped twice')
+	document.body.removeChild(video.parentNode)
+	t.end()
+})
+
 /**
@@ -70,0 +111,0 @@ * Generate a video embed from a source url

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

24299

increased by72.95%

Number of package files

12

increased by33.33%

Lines of code

361

increased by87.05%

Number of lines in readme file

82

increased by26.15%

Worsened metrics

Number of low quality alerts

2

increased by100%

Number of low supply chain risk alerts

8

increased by100%

No dependency changes