From 5705573c0f568b60a925a966a95185bbedef741f Mon Sep 17 00:00:00 2001 From: austin1134 Date: Sun, 14 Jan 2018 11:06:38 -0700 Subject: [PATCH 1/2] Updated Vide parameters Updated Vide parameters to accept your standard width and height options --- src/jquery.vide.js | 505 ++------------------------------------------- 1 file changed, 13 insertions(+), 492 deletions(-) diff --git a/src/jquery.vide.js b/src/jquery.vide.js index 0fe2be65..a5ae5ec7 100644 --- a/src/jquery.vide.js +++ b/src/jquery.vide.js @@ -1,493 +1,14 @@ -!(function(root, factory) { - if (typeof define === 'function' && define.amd) { - define(['jquery'], factory); - } else if (typeof exports === 'object') { - factory(require('jquery')); - } else { - factory(root.jQuery); - } -})(this, function($) { +/* + * Vide - v1.0.0 + * Hella easy jQuery plugin for video backgrounds. + * http://vodkabears.github.io/vide/ + * + * Made by Ilya Makarov + * Under MIT License + */ + +/* + * Modified by Austin to have the optional height and width options + */ +!function (e, t) { "function" == typeof define && define.amd ? define(["jquery"], t) : t("object" == typeof exports ? require("jquery") : e.jQuery) }(this, function (e) { "use strict"; function t(e) { var t, o, i, n, r, s, a, p = {}; for (a = 0, s = (r = e.replace(/\s*:\s*/g, ":").replace(/\s*,\s*/g, ",").split(",")).length; a < s && -1 === (o = r[a]).search(/^(http|https|ftp):\/\//) && -1 !== o.search(":"); a++)t = o.indexOf(":"), i = o.substring(0, t), (n = o.substring(t + 1)) || (n = void 0), "string" == typeof n && (n = "true" === n || "false" !== n && n), "string" == typeof n && (n = isNaN(n) ? n : +n), p[i] = n; return null == i && null == n ? e : p } function o(e) { var t, o, i, n = (e = "" + e).split(/\s+/), r = "50%", s = "50%"; for (i = 0, t = n.length; i < t; i++)o = n[i], "left" === o ? r = "0%" : "right" === o ? r = "100%" : "top" === o ? s = "0%" : "bottom" === o ? s = "100%" : "center" === o ? 0 === i ? r = "50%" : s = "50%" : 0 === i ? r = o : s = o; return { x: r, y: s } } function i(t, o) { var i = function () { o(this.src) }; e('').on("load", i), e('').on("load", i), e('').on("load", i), e('').on("load", i) } function n(o, i, n) { if (this.$element = e(o), "string" == typeof i && (i = t(i)), n ? "string" == typeof n && (n = t(n)) : n = {}, "string" == typeof i) i = i.replace(/\.\w*$/, ""); else if ("object" == typeof i) for (var r in i) i.hasOwnProperty(r) && (i[r] = i[r].replace(/\.\w*$/, "")); this.settings = e.extend({}, s, n), this.path = i; try { this.init() } catch (e) { if (e.message !== a) throw e } } var r = "vide", s = { volume: 1, playbackRate: 1, muted: !0, loop: !0, autoplay: !0, position: "50% 50%", posterType: "detect", resizing: !0, bgColor: "transparent", className: "" }, a = "Not implemented", p = "", c = ""; n.prototype.init = function () { var t, n, r = this, s = r.path, d = s, u = "", l = r.$element, g = r.settings, h = o(g.position), f = g.posterType; n = r.$wrapper = e("
").addClass(g.className).css({ position: "absolute", "z-index": -1, top: 0, left: 0, bottom: 0, right: 0, overflow: "hidden", "-webkit-background-size": "cover", "-moz-background-size": "cover", "-o-background-size": "cover", "background-size": "cover", "background-color": g.bgColor, "background-repeat": "no-repeat", "background-position": h.x + " " + h.y }), "object" == typeof s && (s.poster ? d = s.poster : s.mp4 ? d = s.mp4 : s.webm ? d = s.webm : s.ogv && (d = s.ogv)), "detect" === f ? i(d, function (e) { n.css("background-image", "url(" + e + ")") }) : "none" !== f && n.css("background-image", "url(" + d + "." + f + ")"), "static" === l.css("position") && l.css("position", "relative"), l.prepend(n), "object" == typeof s ? (s.mp4 && (u += ''), s.webm && (u += ''), s.ogv && (u += ''), t = r.$video = e("")) : t = r.$video = e(''); try { t.prop({ autoplay: g.autoplay, loop: g.loop, volume: g.volume, muted: g.muted, defaultMuted: g.muted, playbackRate: g.playbackRate, defaultPlaybackRate: g.playbackRate }), p = null != g.height || void 0 != g.height ? g.height : "auto", c = null != g.height || void 0 != g.height ? g.width : "auto" } catch (e) { throw new Error(a) } t.css({ margin: "auto", position: "absolute", "z-index": -1, top: h.y, left: h.x, "-webkit-transform": "translate(-" + h.x + ", -" + h.y + ")", "-ms-transform": "translate(-" + h.x + ", -" + h.y + ")", "-moz-transform": "translate(-" + h.x + ", -" + h.y + ")", transform: "translate(-" + h.x + ", -" + h.y + ")", visibility: "hidden", opacity: 0 }).one("canplaythrough.vide", function () { r.resize() }).one("playing.vide", function () { t.css({ visibility: "visible", opacity: 1 }), n.css("background-image", "none") }), l.on("resize.vide", function () { g.resizing && r.resize() }), n.append(t) }, n.prototype.getVideoObject = function () { return this.$video[0] }, n.prototype.resize = function () { if (this.$video) { var e = this.$wrapper, t = this.$video, o = t[0], i = o.videoHeight, n = o.videoWidth, r = e.height(), s = e.width(); s / n > r / i ? t.css({ width: s + 2, height: p }) : t.css({ width: c, height: r + 2 }) } }, n.prototype.destroy = function () { delete e[r].lookup[this.index], this.$video && this.$video.off(r), this.$element.off(r).removeData(r), this.$wrapper.remove() }, e[r] = { lookup: [] }, e.fn[r] = function (t, o) { var i; return this.each(function () { (i = e.data(this, r)) && i.destroy(), (i = new n(this, t, o)).index = e[r].lookup.push(i) - 1, e.data(this, r, i) }), this }, e(document).ready(function () { var t = e(window); t.on("resize.vide", function () { for (var t, o = e[r].lookup.length, i = 0; i < o; i++)(t = e[r].lookup[i]) && t.settings.resizing && t.resize() }), t.on("unload.vide", function () { return !1 }), e(document).find("[data-vide-bg]").each(function (t, o) { var i = e(o), n = i.data("vide-options"), s = i.data("vide-bg"); i[r](s, n) }) }) }); - 'use strict'; - - /** - * Name of the plugin - * @private - * @const - * @type {String} - */ - var PLUGIN_NAME = 'vide'; - - /** - * Default settings - * @private - * @const - * @type {Object} - */ - var DEFAULTS = { - volume: 1, - playbackRate: 1, - muted: true, - loop: true, - autoplay: true, - position: '50% 50%', - posterType: 'detect', - resizing: true, - bgColor: 'transparent', - className: '' - }; - - /** - * Not implemented error message - * @private - * @const - * @type {String} - */ - var NOT_IMPLEMENTED_MSG = 'Not implemented'; - - /** - * Parse a string with options - * @private - * @param {String} str - * @returns {Object|String} - */ - function parseOptions(str) { - var obj = {}; - var delimiterIndex; - var option; - var prop; - var val; - var arr; - var len; - var i; - - // Remove spaces around delimiters and split - arr = str.replace(/\s*:\s*/g, ':').replace(/\s*,\s*/g, ',').split(','); - - // Parse a string - for (i = 0, len = arr.length; i < len; i++) { - option = arr[i]; - - // Ignore urls and a string without colon delimiters - if ( - option.search(/^(http|https|ftp):\/\//) !== -1 || - option.search(':') === -1 - ) { - break; - } - - delimiterIndex = option.indexOf(':'); - prop = option.substring(0, delimiterIndex); - val = option.substring(delimiterIndex + 1); - - // If val is an empty string, make it undefined - if (!val) { - val = undefined; - } - - // Convert a string value if it is like a boolean - if (typeof val === 'string') { - val = val === 'true' || (val === 'false' ? false : val); - } - - // Convert a string value if it is like a number - if (typeof val === 'string') { - val = !isNaN(val) ? +val : val; - } - - obj[prop] = val; - } - - // If nothing is parsed - if (prop == null && val == null) { - return str; - } - - return obj; - } - - /** - * Parse a position option - * @private - * @param {String} str - * @returns {Object} - */ - function parsePosition(str) { - str = '' + str; - - // Default value is a center - var args = str.split(/\s+/); - var x = '50%'; - var y = '50%'; - var len; - var arg; - var i; - - for (i = 0, len = args.length; i < len; i++) { - arg = args[i]; - - // Convert values - if (arg === 'left') { - x = '0%'; - } else if (arg === 'right') { - x = '100%'; - } else if (arg === 'top') { - y = '0%'; - } else if (arg === 'bottom') { - y = '100%'; - } else if (arg === 'center') { - if (i === 0) { - x = '50%'; - } else { - y = '50%'; - } - } else { - if (i === 0) { - x = arg; - } else { - y = arg; - } - } - } - - return { x: x, y: y }; - } - - /** - * Search a poster - * @private - * @param {String} path - * @param {Function} callback - */ - function findPoster(path, callback) { - var onLoad = function() { - callback(this.src); - }; - - $('').on('load', onLoad); - $('').on('load', onLoad); - $('').on('load', onLoad); - $('').on('load', onLoad); - } - - /** - * Vide constructor - * @param {HTMLElement} element - * @param {Object|String} path - * @param {Object|String} options - * @constructor - */ - function Vide(element, path, options) { - this.$element = $(element); - - // Parse path - if (typeof path === 'string') { - path = parseOptions(path); - } - - // Parse options - if (!options) { - options = {}; - } else if (typeof options === 'string') { - options = parseOptions(options); - } - - // Remove an extension - if (typeof path === 'string') { - path = path.replace(/\.\w*$/, ''); - } else if (typeof path === 'object') { - for (var i in path) { - if (path.hasOwnProperty(i)) { - path[i] = path[i].replace(/\.\w*$/, ''); - } - } - } - - this.settings = $.extend({}, DEFAULTS, options); - this.path = path; - - // https://github.com/VodkaBears/Vide/issues/110 - try { - this.init(); - } catch (e) { - if (e.message !== NOT_IMPLEMENTED_MSG) { - throw e; - } - } - } - - /** - * Initialization - * @public - */ - Vide.prototype.init = function() { - var vide = this; - var path = vide.path; - var poster = path; - var sources = ''; - var $element = vide.$element; - var settings = vide.settings; - var position = parsePosition(settings.position); - var posterType = settings.posterType; - var $video; - var $wrapper; - - // Set styles of a video wrapper - $wrapper = vide.$wrapper = $('
') - .addClass(settings.className) - .css({ - position: 'absolute', - 'z-index': -1, - top: 0, - left: 0, - bottom: 0, - right: 0, - overflow: 'hidden', - '-webkit-background-size': 'cover', - '-moz-background-size': 'cover', - '-o-background-size': 'cover', - 'background-size': 'cover', - 'background-color': settings.bgColor, - 'background-repeat': 'no-repeat', - 'background-position': position.x + ' ' + position.y - }); - - // Get a poster path - if (typeof path === 'object') { - if (path.poster) { - poster = path.poster; - } else { - if (path.mp4) { - poster = path.mp4; - } else if (path.webm) { - poster = path.webm; - } else if (path.ogv) { - poster = path.ogv; - } - } - } - - // Set a video poster - if (posterType === 'detect') { - findPoster(poster, function(url) { - $wrapper.css('background-image', 'url(' + url + ')'); - }); - } else if (posterType !== 'none') { - $wrapper.css('background-image', 'url(' + poster + '.' + posterType + ')'); - } - - // If a parent element has a static position, make it relative - if ($element.css('position') === 'static') { - $element.css('position', 'relative'); - } - - $element.prepend($wrapper); - - if (typeof path === 'object') { - if (path.mp4) { - sources += ''; - } - - if (path.webm) { - sources += ''; - } - - if (path.ogv) { - sources += ''; - } - - $video = vide.$video = $(''); - } else { - $video = vide.$video = $(''); - } - - // https://github.com/VodkaBears/Vide/issues/110 - try { - $video - - // Set video properties - .prop({ - autoplay: settings.autoplay, - loop: settings.loop, - volume: settings.volume, - muted: settings.muted, - defaultMuted: settings.muted, - playbackRate: settings.playbackRate, - defaultPlaybackRate: settings.playbackRate - }); - } catch (e) { - throw new Error(NOT_IMPLEMENTED_MSG); - } - - // Video alignment - $video.css({ - margin: 'auto', - position: 'absolute', - 'z-index': -1, - top: position.y, - left: position.x, - '-webkit-transform': 'translate(-' + position.x + ', -' + position.y + ')', - '-ms-transform': 'translate(-' + position.x + ', -' + position.y + ')', - '-moz-transform': 'translate(-' + position.x + ', -' + position.y + ')', - transform: 'translate(-' + position.x + ', -' + position.y + ')', - - // Disable visibility, while loading - visibility: 'hidden', - opacity: 0 - }) - - // Resize a video, when it's loaded - .one('canplaythrough.' + PLUGIN_NAME, function() { - vide.resize(); - }) - - // Make it visible, when it's already playing - .one('playing.' + PLUGIN_NAME, function() { - $video.css({ - visibility: 'visible', - opacity: 1 - }); - $wrapper.css('background-image', 'none'); - }); - - // Resize event is available only for 'window' - // Use another code solutions to detect DOM elements resizing - $element.on('resize.' + PLUGIN_NAME, function() { - if (settings.resizing) { - vide.resize(); - } - }); - - // Append a video - $wrapper.append($video); - }; - - /** - * Get a video element - * @public - * @returns {HTMLVideoElement} - */ - Vide.prototype.getVideoObject = function() { - return this.$video[0]; - }; - - /** - * Resize a video background - * @public - */ - Vide.prototype.resize = function() { - if (!this.$video) { - return; - } - - var $wrapper = this.$wrapper; - var $video = this.$video; - var video = $video[0]; - - // Get a native video size - var videoHeight = video.videoHeight; - var videoWidth = video.videoWidth; - - // Get a wrapper size - var wrapperHeight = $wrapper.height(); - var wrapperWidth = $wrapper.width(); - - if (wrapperWidth / videoWidth > wrapperHeight / videoHeight) { - $video.css({ - - // +2 pixels to prevent an empty space after transformation - width: wrapperWidth + 2, - height: 'auto' - }); - } else { - $video.css({ - width: 'auto', - - // +2 pixels to prevent an empty space after transformation - height: wrapperHeight + 2 - }); - } - }; - - /** - * Destroy a video background - * @public - */ - Vide.prototype.destroy = function() { - delete $[PLUGIN_NAME].lookup[this.index]; - this.$video && this.$video.off(PLUGIN_NAME); - this.$element.off(PLUGIN_NAME).removeData(PLUGIN_NAME); - this.$wrapper.remove(); - }; - - /** - * Special plugin object for instances. - * @public - * @type {Object} - */ - $[PLUGIN_NAME] = { - lookup: [] - }; - - /** - * Plugin constructor - * @param {Object|String} path - * @param {Object|String} options - * @returns {JQuery} - * @constructor - */ - $.fn[PLUGIN_NAME] = function(path, options) { - var instance; - - this.each(function() { - instance = $.data(this, PLUGIN_NAME); - - // Destroy the plugin instance if exists - instance && instance.destroy(); - - // Create the plugin instance - instance = new Vide(this, path, options); - instance.index = $[PLUGIN_NAME].lookup.push(instance) - 1; - $.data(this, PLUGIN_NAME, instance); - }); - - return this; - }; - - $(document).ready(function() { - var $window = $(window); - - // Window resize event listener - $window.on('resize.' + PLUGIN_NAME, function() { - for (var len = $[PLUGIN_NAME].lookup.length, i = 0, instance; i < len; i++) { - instance = $[PLUGIN_NAME].lookup[i]; - - if (instance && instance.settings.resizing) { - instance.resize(); - } - } - }); - - // https://github.com/VodkaBears/Vide/issues/68 - $window.on('unload.' + PLUGIN_NAME, function() { - return false; - }); - - // Auto initialization - // Add 'data-vide-bg' attribute with a path to the video without extension - // Also you can pass options throw the 'data-vide-options' attribute - // 'data-vide-options' must be like 'muted: false, volume: 0.5' - $(document).find('[data-' + PLUGIN_NAME + '-bg]').each(function(i, element) { - var $element = $(element); - var options = $element.data(PLUGIN_NAME + '-options'); - var path = $element.data(PLUGIN_NAME + '-bg'); - - $element[PLUGIN_NAME](path, options); - }); - }); - -}); From 30259d92dae8b8318dec917b2ed5e3ed50ee630a Mon Sep 17 00:00:00 2001 From: austin1134 Date: Sun, 14 Jan 2018 11:10:20 -0700 Subject: [PATCH 2/2] File rename --- src/{jquery.vide.js => jquery.vide.min.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/{jquery.vide.js => jquery.vide.min.js} (100%) diff --git a/src/jquery.vide.js b/src/jquery.vide.min.js similarity index 100% rename from src/jquery.vide.js rename to src/jquery.vide.min.js