JAVASCRIPT   42

modal video js

Guest on 18th August 2022 12:49:30 PM

  1. (function(f) {
  2.     if (typeof exports === "object" && typeof module !== "undefined") {
  3.         module.exports = f();
  4.     } else if (typeof define === "function" && define.amd) {
  5.         define([], f);
  6.     } else {
  7.         var g;
  8.         if (typeof window !== "undefined") {
  9.             g = window;
  10.         } else if (typeof global !== "undefined") {
  11.             g = global;
  12.         } else if (typeof self !== "undefined") {
  13.             g = self;
  14.         } else {
  15.             g = this;
  16.         }
  17.         g.ModalVideo = f();
  18.     }
  19. })(function() {
  20.     var define, module, exports;
  21.     return (function() {
  22.         function e(t, n, r) {
  23.             function s(o, u) {
  24.                 if (!n[o]) {
  25.                     if (!t[o]) {
  26.                         var a = typeof require == "function" && require;
  27.                         if (!u && a) return a(o, !0);
  28.                         if (i) return i(o, !0);
  29.                         var f = new Error("Cannot find module '" + o + "'");
  30.                         throw ((f.code = "MODULE_NOT_FOUND"), f);
  31.                     }
  32.                     var l = (n[o] = {
  33.                         exports: {}
  34.                     });
  35.                     t[o][0].call(l.exports, function(e) {
  36.                         var n = t[o][1][e];
  37.                         return s(n ? n : e);
  38.                     }, l, l.exports, e, t, n, r);
  39.                 }
  40.                 return n[o].exports;
  41.             }
  42.             var i = typeof require == "function" && require;
  43.             for (var o = 0; o < r.length; o++) s(r[o]);
  44.             return s;
  45.         }
  46.         return e;
  47.     })()({
  48.         1: [function(require, module, exports) {
  49.             try {
  50.                 var ce = new window.CustomEvent("test");
  51.                 ce.preventDefault();
  52.                 if (ce.defaultPrevented !== true) {
  53.                     throw new Error("Could not prevent default");
  54.                 }
  55.             } catch (e) {
  56.                 var CustomEvent = function(event, params) {
  57.                     var evt, origPrevent;
  58.                     params = params || {
  59.                         bubbles: false,
  60.                         cancelable: false,
  61.                         detail: undefined,
  62.                     };
  63.                     evt = document.createEvent("CustomEvent");
  64.                     evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
  65.                     origPrevent = evt.preventDefault;
  66.                     evt.preventDefault = function() {
  67.                         origPrevent.call(this);
  68.                         try {
  69.                             Object.defineProperty(this, "defaultPrevented", {
  70.                                 get: function() {
  71.                                     return true;
  72.                                 },
  73.                             });
  74.                         } catch (e) {
  75.                             this.defaultPrevented = true;
  76.                         }
  77.                     };
  78.                     return evt;
  79.                 };
  80.                 CustomEvent.prototype = window.Event.prototype;
  81.                 window.CustomEvent = CustomEvent;
  82.             }
  83.         }, {}, ],
  84.         2: [function(require, module, exports) {
  85.             "use strict";
  86.  
  87.             function assign(target, firstSource) {
  88.                 if (target === undefined || target === null) {
  89.                     throw new TypeError("Cannot convert first argument to object");
  90.                 }
  91.                 var to = Object(target);
  92.                 for (var i = 1; i < arguments.length; i++) {
  93.                     var nextSource = arguments[i];
  94.                     if (nextSource === undefined || nextSource === null) {
  95.                         continue;
  96.                     }
  97.                     var keysArray = Object.keys(Object(nextSource));
  98.                     for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
  99.                         var nextKey = keysArray[nextIndex];
  100.                         var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
  101.                         if (desc !== undefined && desc.enumerable) {
  102.                             to[nextKey] = nextSource[nextKey];
  103.                         }
  104.                     }
  105.                 }
  106.                 return to;
  107.             }
  108.  
  109.             function polyfill() {
  110.                 if (!Object.assign) {
  111.                     Object.defineProperty(Object, "assign", {
  112.                         enumerable: false,
  113.                         configurable: true,
  114.                         writable: true,
  115.                         value: assign,
  116.                     });
  117.                 }
  118.             }
  119.             module.exports = {
  120.                 assign: assign,
  121.                 polyfill: polyfill,
  122.             };
  123.         }, {}, ],
  124.         3: [function(require, module, exports) {
  125.             "use strict";
  126.             Object.defineProperty(exports, "__esModule", {
  127.                 value: true,
  128.             });
  129.             var _createClass = (function() {
  130.                 function defineProperties(target, props) {
  131.                     for (var i = 0; i < props.length; i++) {
  132.                         var descriptor = props[i];
  133.                         descriptor.enumerable = descriptor.enumerable || false;
  134.                         descriptor.configurable = true;
  135.                         if ("value" in descriptor) descriptor.writable = true;
  136.                         Object.defineProperty(target, descriptor.key, descriptor);
  137.                     }
  138.                 }
  139.                 return function(Constructor, protoProps, staticProps) {
  140.                     if (protoProps)
  141.                         defineProperties(Constructor.prototype, protoProps);
  142.                     if (staticProps) defineProperties(Constructor, staticProps);
  143.                     return Constructor;
  144.                 };
  145.             })();
  146.             require("custom-event-polyfill");
  147.             var _util = require("../lib/util");
  148.  
  149.             function _classCallCheck(instance, Constructor) {
  150.                 if (!(instance instanceof Constructor)) {
  151.                     throw new TypeError("Cannot call a class as a function");
  152.                 }
  153.             }
  154.             var assign = require("es6-object-assign").assign;
  155.             var defaults = {
  156.                 channel: "youtube",
  157.                 facebook: {},
  158.                 youtube: {
  159.                     autoplay: 1,
  160.                     cc_load_policy: 1,
  161.                     color: null,
  162.                     controls: 1,
  163.                     disablekb: 0,
  164.                     enablejsapi: 0,
  165.                     end: null,
  166.                     fs: 1,
  167.                     h1: null,
  168.                     iv_load_policy: 1,
  169.                     loop: 0,
  170.                     modestbranding: null,
  171.                     mute: 0,
  172.                     origin: null,
  173.                     playsinline: null,
  174.                     rel: 0,
  175.                     showinfo: 1,
  176.                     start: 0,
  177.                     wmode: "transparent",
  178.                     theme: "dark",
  179.                     nocookie: true,
  180.                 },
  181.                 ratio: "16:9",
  182.                 vimeo: {
  183.                     api: false,
  184.                     autopause: true,
  185.                     autoplay: true,
  186.                     byline: true,
  187.                     callback: null,
  188.                     color: null,
  189.                     controls: true,
  190.                     height: null,
  191.                     loop: false,
  192.                     maxheight: null,
  193.                     maxwidth: null,
  194.                     muted: false,
  195.                     player_id: null,
  196.                     portrait: true,
  197.                     title: true,
  198.                     width: null,
  199.                     xhtml: false,
  200.                 },
  201.                 allowFullScreen: true,
  202.                 allowAutoplay: true,
  203.                 animationSpeed: 300,
  204.                 classNames: {
  205.                     modalVideo: "modal-video",
  206.                     modalVideoClose: "modal-video-close",
  207.                     modalVideoBody: "modal-video-body",
  208.                     modalVideoInner: "modal-video-inner",
  209.                     modalVideoIframeWrap: "modal-video-movie-wrap",
  210.                     modalVideoCloseBtn: "modal-video-close-btn",
  211.                 },
  212.                 aria: {
  213.                     openMessage: "You just openned the modal video",
  214.                     dismissBtnMessage: "Close the modal by clicking here",
  215.                 },
  216.             };
  217.             var ModalVideo = (function() {
  218.                 function ModalVideo(ele, option) {
  219.                     var _this = this;
  220.                     _classCallCheck(this, ModalVideo);
  221.                     var opt = assign({}, defaults, option);
  222.                     var selectors = typeof ele === "string" ? document.querySelectorAll(ele) : ele;
  223.                     var body = document.querySelector("body");
  224.                     var classNames = opt.classNames;
  225.                     var speed = opt.animationSpeed;
  226.                     [].forEach.call(selectors, function(selector) {
  227.                         selector.addEventListener("click", function(event) {
  228.                             if (selector.tagName === "A") {
  229.                                 event.preventDefault();
  230.                             }
  231.                             var videoId = selector.dataset.videoId;
  232.                             var channel = selector.dataset.channel || opt.channel;
  233.                             var id = (0, _util.getUniqId)();
  234.                             var videoUrl = selector.dataset.videoUrl || _this.getVideoUrl(opt, channel, videoId);
  235.                             var html = _this.getHtml(opt, videoUrl, id);
  236.                             (0, _util.append)(body, html);
  237.                             var modal = document.getElementById(id);
  238.                             var btn = modal.querySelector(".js-modal-video-dismiss-btn");
  239.                             var timeout = void 0;
  240.                             var resizeModalVideoWhenHeightGreaterThanWindowHeight = function resizeModalVideoWhenHeightGreaterThanWindowHeight() {
  241.                                 clearTimeout(timeout);
  242.                                 timeout = setTimeout(function() {
  243.                                     var width = _this.getWidthFulfillAspectRatio(opt.ratio, window.innerHeight, window.innerWidth);
  244.                                     var modalVideoInner = document.getElementById("modal-video-inner-" + id);
  245.                                     if (modalVideoInner.style.maxWidth !== width) {
  246.                                         modalVideoInner.style.maxWidth = width;
  247.                                     }
  248.                                 }, 10);
  249.                             };
  250.                             modal.focus();
  251.                             modal.addEventListener("click", function() {
  252.                                 (0, _util.addClass)(modal, classNames.modalVideoClose);
  253.                                 window.removeEventListener("resize", resizeModalVideoWhenHeightGreaterThanWindowHeight);
  254.                                 setTimeout(function() {
  255.                                     (0, _util.remove)(modal);
  256.                                     selector.focus();
  257.                                 }, speed);
  258.                             });
  259.                             modal.addEventListener("keydown", function(e) {
  260.                                 if (e.which === 9) {
  261.                                     e.preventDefault();
  262.                                     if (document.activeElement === modal) {
  263.                                         btn.focus();
  264.                                     } else {
  265.                                         modal.setAttribute("aria-label", "");
  266.                                         modal.focus();
  267.                                     }
  268.                                 }
  269.                             });
  270.                             window.addEventListener("resize", resizeModalVideoWhenHeightGreaterThanWindowHeight);
  271.                             btn.addEventListener("click", function() {
  272.                                 (0, _util.triggerEvent)(modal, "click");
  273.                             });
  274.                         });
  275.                     });
  276.                 }
  277.                 _createClass(ModalVideo, [{
  278.                     key: "getPadding",
  279.                     value: function getPadding(ratio) {
  280.                         var arr = ratio.split(":");
  281.                         var width = Number(arr[0]);
  282.                         var height = Number(arr[1]);
  283.                         var padding = (height * 100) / width;
  284.                         return padding + "%";
  285.                     },
  286.                 }, {
  287.                     key: "getWidthFulfillAspectRatio",
  288.                     value: function getWidthFulfillAspectRatio(ratio, maxHeight, maxWidth) {
  289.                         var arr = ratio.split(":");
  290.                         var width = Number(arr[0]);
  291.                         var height = Number(arr[1]);
  292.                         var videoHeight = maxWidth * (height / width);
  293.                         if (maxHeight < videoHeight) {
  294.                             return Math.floor((width / height) * maxHeight) + "px";
  295.                         }
  296.                         return "100%";
  297.                     },
  298.                 }, {
  299.                     key: "getQueryString",
  300.                     value: function getQueryString(obj) {
  301.                         var url = "";
  302.                         Object.keys(obj).forEach(function(key) {
  303.                             url += key + "=" + obj[key] + "&";
  304.                         });
  305.                         return url.substr(0, url.length - 1);
  306.                     },
  307.                 }, {
  308.                     key: "getVideoUrl",
  309.                     value: function getVideoUrl(opt, channel, videoId) {
  310.                         if (channel === "youtube") {
  311.                             return this.getYoutubeUrl(opt.youtube, videoId);
  312.                         } else if (channel === "vimeo") {
  313.                             return this.getVimeoUrl(opt.vimeo, videoId);
  314.                         } else if (channel === "facebook") {
  315.                             return this.getFacebookUrl(opt.facebook, videoId);
  316.                         } else if (channel === "custom") {
  317.                             return opt.url;
  318.                         }
  319.                         return "";
  320.                     },
  321.                 }, {
  322.                     key: "getVimeoUrl",
  323.                     value: function getVimeoUrl(vimeo, videoId) {
  324.                         var query = this.getQueryString(vimeo);
  325.                         return "//player.vimeo.com/video/" + videoId + "?" + query;
  326.                     },
  327.                 }, {
  328.                     key: "getYoutubeUrl",
  329.                     value: function getYoutubeUrl(youtube, videoId) {
  330.                         var query = this.getQueryString(youtube);
  331.                         if (youtube.nocookie === true) {
  332.                             return ("//www.youtube-nocookie.com/embed/" +
  333.                                 videoId +
  334.                                 "?" +
  335.                                 query);
  336.                         }
  337.                         return "//www.youtube.com/embed/" + videoId + "?" + query;
  338.                     },
  339.                 }, {
  340.                     key: "getFacebookUrl",
  341.                     value: function getFacebookUrl(facebook, videoId) {
  342.                         return ("//www.facebook.com/v2.10/plugins/video.php?href=https://www.facebook.com/facebook/videos/" +
  343.                             videoId +
  344.                             "&" +
  345.                             this.getQueryString(facebook));
  346.                     },
  347.                 }, {
  348.                     key: "getHtml",
  349.                     value: function getHtml(opt, videoUrl, id) {
  350.                         var padding = this.getPadding(opt.ratio);
  351.                         var classNames = opt.classNames;
  352.                         return ('\n      <div class="' +
  353.                             classNames.modalVideo +
  354.                             '" tabindex="-1" role="dialog" aria-label="' +
  355.                             opt.aria.openMessage +
  356.                             '" id="' +
  357.                             id +
  358.                             '">\n        <div class="' +
  359.                             classNames.modalVideoBody +
  360.                             '">\n          <div class="' +
  361.                             classNames.modalVideoInner +
  362.                             '" id="modal-video-inner-' +
  363.                             id +
  364.                             '">\n            <div class="' +
  365.                             classNames.modalVideoIframeWrap +
  366.                             '" style="padding-bottom:' +
  367.                             padding +
  368.                             '">\n              <button class="' +
  369.                             classNames.modalVideoCloseBtn +
  370.                             ' js-modal-video-dismiss-btn" aria-label="' +
  371.                             opt.aria.dismissBtnMessage +
  372.                             "\"></button>\n              <iframe width='460' height='230' src=\"" +
  373.                             videoUrl +
  374.                             "\" frameborder='0' allowfullscreen=" +
  375.                             opt.allowFullScreen +
  376.                             ' tabindex="-1" allow="' +
  377.                             (opt.allowAutoplay ? "autoplay;" : "") +
  378.                             ' accelerometer; encrypted-media; gyroscope; picture-in-picture" />\n            </div>\n          </div>\n        </div>\n      </div>\n    ');
  379.                     },
  380.                 }, ]);
  381.                 return ModalVideo;
  382.             })();
  383.             exports.default = ModalVideo;
  384.             module.exports = exports["default"];
  385.         }, {
  386.             "../lib/util": 5,
  387.             "custom-event-polyfill": 1,
  388.             "es6-object-assign": 2,
  389.         }, ],
  390.         4: [function(require, module, exports) {
  391.             "use strict";
  392.             module.exports = require("./core/");
  393.         }, {
  394.             "./core/": 3
  395.         }, ],
  396.         5: [function(require, module, exports) {
  397.             "use strict";
  398.             Object.defineProperty(exports, "__esModule", {
  399.                 value: true,
  400.             });
  401.             var append = (exports.append = function append(element, string) {
  402.                 var div = document.createElement("div");
  403.                 div.innerHTML = string;
  404.                 while (div.children.length > 0) {
  405.                     element.appendChild(div.children[0]);
  406.                 }
  407.             });
  408.             var getUniqId = (exports.getUniqId = function getUniqId() {
  409.                 return (Date.now().toString(36) + Math.random().toString(36).substr(2, 5)).toUpperCase();
  410.             });
  411.             var remove = (exports.remove = function remove(element) {
  412.                 if (element && element.parentNode) {
  413.                     element.parentNode.removeChild(element);
  414.                 }
  415.             });
  416.             var addClass = (exports.addClass = function addClass(element, className) {
  417.                 if (element.classList) {
  418.                     element.classList.add(className);
  419.                 } else {
  420.                     element.className += " " + className;
  421.                 }
  422.             });
  423.             var triggerEvent = (exports.triggerEvent = function triggerEvent(el, eventName, options) {
  424.                 var event = void 0;
  425.                 if (window.CustomEvent) {
  426.                     event = new CustomEvent(eventName, {
  427.                         cancelable: true
  428.                     });
  429.                 } else {
  430.                     event = document.createEvent("CustomEvent");
  431.                     event.initCustomEvent(eventName, false, false, options);
  432.                 }
  433.                 el.dispatchEvent(event);
  434.             });
  435.         }, {}, ],
  436.     }, {}, [4])(4);
  437. });

Raw Paste


Login or Register to edit or fork this paste. It's free.