| 1 |
/** |
| 2 |
* Modules in this bundle |
| 3 |
* @license |
| 4 |
* |
| 5 |
* modal-video: |
| 6 |
* license: appleple |
| 7 |
* author: appleple |
| 8 |
* homepage: http://developer.a-blogcms.jp |
| 9 |
* version: 2.4.2 |
| 10 |
* |
| 11 |
* custom-event-polyfill: |
| 12 |
* license: MIT (http://opensource.org/licenses/MIT) |
| 13 |
* contributors: Frank Panetta, Mikhail Reenko <[email protected]>, Joscha Feth <[email protected]> |
| 14 |
* homepage: https://github.com/krambuhl/custom-event-polyfill#readme |
| 15 |
* version: 0.3.0 |
| 16 |
* |
| 17 |
* es6-object-assign: |
| 18 |
* license: MIT (http://opensource.org/licenses/MIT) |
| 19 |
* author: Rubén Norte <[email protected]> |
| 20 |
* homepage: https://github.com/rubennorte/es6-object-assign |
| 21 |
* version: 1.1.0 |
| 22 |
* |
| 23 |
* This header is generated by licensify (https://github.com/twada/licensify) |
| 24 |
*/ |
| 25 |
(function(){function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}return e})()({1:[function(require,module,exports){ |
| 26 |
// Polyfill for creating CustomEvents on IE9/10/11 |
| 27 |
|
| 28 |
// code pulled from: |
| 29 |
// https://github.com/d4tocchini/customevent-polyfill |
| 30 |
// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent#Polyfill |
| 31 |
|
| 32 |
try { |
| 33 |
var ce = new window.CustomEvent('test'); |
| 34 |
ce.preventDefault(); |
| 35 |
if (ce.defaultPrevented !== true) { |
| 36 |
// IE has problems with .preventDefault() on custom events |
| 37 |
// http://stackoverflow.com/questions/23349191 |
| 38 |
throw new Error('Could not prevent default'); |
| 39 |
} |
| 40 |
} catch(e) { |
| 41 |
var CustomEvent = function(event, params) { |
| 42 |
var evt, origPrevent; |
| 43 |
params = params || { |
| 44 |
bubbles: false, |
| 45 |
cancelable: false, |
| 46 |
detail: undefined |
| 47 |
}; |
| 48 |
|
| 49 |
evt = document.createEvent("CustomEvent"); |
| 50 |
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); |
| 51 |
origPrevent = evt.preventDefault; |
| 52 |
evt.preventDefault = function () { |
| 53 |
origPrevent.call(this); |
| 54 |
try { |
| 55 |
Object.defineProperty(this, 'defaultPrevented', { |
| 56 |
get: function () { |
| 57 |
return true; |
| 58 |
} |
| 59 |
}); |
| 60 |
} catch(e) { |
| 61 |
this.defaultPrevented = true; |
| 62 |
} |
| 63 |
}; |
| 64 |
return evt; |
| 65 |
}; |
| 66 |
|
| 67 |
CustomEvent.prototype = window.Event.prototype; |
| 68 |
window.CustomEvent = CustomEvent; // expose definition to window |
| 69 |
} |
| 70 |
|
| 71 |
},{}],2:[function(require,module,exports){ |
| 72 |
/** |
| 73 |
* Code refactored from Mozilla Developer Network: |
| 74 |
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign |
| 75 |
*/ |
| 76 |
|
| 77 |
'use strict'; |
| 78 |
|
| 79 |
function assign(target, firstSource) { |
| 80 |
if (target === undefined || target === null) { |
| 81 |
throw new TypeError('Cannot convert first argument to object'); |
| 82 |
} |
| 83 |
|
| 84 |
var to = Object(target); |
| 85 |
for (var i = 1; i < arguments.length; i++) { |
| 86 |
var nextSource = arguments[i]; |
| 87 |
if (nextSource === undefined || nextSource === null) { |
| 88 |
continue; |
| 89 |
} |
| 90 |
|
| 91 |
var keysArray = Object.keys(Object(nextSource)); |
| 92 |
for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) { |
| 93 |
var nextKey = keysArray[nextIndex]; |
| 94 |
var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey); |
| 95 |
if (desc !== undefined && desc.enumerable) { |
| 96 |
to[nextKey] = nextSource[nextKey]; |
| 97 |
} |
| 98 |
} |
| 99 |
} |
| 100 |
return to; |
| 101 |
} |
| 102 |
|
| 103 |
function polyfill() { |
| 104 |
if (!Object.assign) { |
| 105 |
Object.defineProperty(Object, 'assign', { |
| 106 |
enumerable: false, |
| 107 |
configurable: true, |
| 108 |
writable: true, |
| 109 |
value: assign |
| 110 |
}); |
| 111 |
} |
| 112 |
} |
| 113 |
|
| 114 |
module.exports = { |
| 115 |
assign: assign, |
| 116 |
polyfill: polyfill |
| 117 |
}; |
| 118 |
|
| 119 |
},{}],3:[function(require,module,exports){ |
| 120 |
'use strict'; |
| 121 |
|
| 122 |
var ModalVideo = require('../index'); |
| 123 |
|
| 124 |
var applyJQuery = function applyJQuery(jQuery) { |
| 125 |
jQuery.fn.modalVideo = function (settings) { |
| 126 |
if (typeof settings === 'strings') {} else { |
| 127 |
new ModalVideo(this, settings); |
| 128 |
} |
| 129 |
return this; |
| 130 |
}; |
| 131 |
}; |
| 132 |
|
| 133 |
if (typeof define === 'function' && define.amd) { |
| 134 |
define(['jquery'], applyJQuery); |
| 135 |
} else { |
| 136 |
var jq = window.jQuery ? window.jQuery : window.$; |
| 137 |
if (typeof jq !== 'undefined') { |
| 138 |
applyJQuery(jq); |
| 139 |
} |
| 140 |
} |
| 141 |
|
| 142 |
module.exports = applyJQuery; |
| 143 |
|
| 144 |
},{"../index":5}],4:[function(require,module,exports){ |
| 145 |
'use strict'; |
| 146 |
|
| 147 |
Object.defineProperty(exports, "__esModule", { |
| 148 |
value: true |
| 149 |
}); |
| 150 |
|
| 151 |
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); |
| 152 |
|
| 153 |
require('custom-event-polyfill'); |
| 154 |
|
| 155 |
var _util = require('../lib/util'); |
| 156 |
|
| 157 |
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } |
| 158 |
|
| 159 |
var assign = require('es6-object-assign').assign; |
| 160 |
|
| 161 |
var defaults = { |
| 162 |
channel: 'youtube', |
| 163 |
facebook: {}, |
| 164 |
youtube: { |
| 165 |
autoplay: 1, |
| 166 |
cc_load_policy: 1, |
| 167 |
color: null, |
| 168 |
controls: 1, |
| 169 |
disablekb: 0, |
| 170 |
enablejsapi: 0, |
| 171 |
end: null, |
| 172 |
fs: 1, |
| 173 |
h1: null, |
| 174 |
iv_load_policy: 1, |
| 175 |
list: null, |
| 176 |
listType: null, |
| 177 |
loop: 0, |
| 178 |
modestbranding: null, |
| 179 |
mute: 0, |
| 180 |
origin: null, |
| 181 |
playlist: null, |
| 182 |
playsinline: null, |
| 183 |
rel: 0, |
| 184 |
showinfo: 1, |
| 185 |
start: 0, |
| 186 |
wmode: 'transparent', |
| 187 |
theme: 'dark', |
| 188 |
nocookie: false |
| 189 |
}, |
| 190 |
ratio: '16:9', |
| 191 |
vimeo: { |
| 192 |
api: false, |
| 193 |
autopause: true, |
| 194 |
autoplay: true, |
| 195 |
byline: true, |
| 196 |
callback: null, |
| 197 |
color: null, |
| 198 |
controls: true, |
| 199 |
height: null, |
| 200 |
loop: false, |
| 201 |
maxheight: null, |
| 202 |
maxwidth: null, |
| 203 |
muted: false, |
| 204 |
player_id: null, |
| 205 |
portrait: true, |
| 206 |
title: true, |
| 207 |
width: null, |
| 208 |
xhtml: false |
| 209 |
}, |
| 210 |
allowFullScreen: true, |
| 211 |
allowAutoplay: true, |
| 212 |
animationSpeed: 300, |
| 213 |
classNames: { |
| 214 |
modalVideo: 'modal-video', |
| 215 |
modalVideoClose: 'modal-video-close', |
| 216 |
modalVideoBody: 'modal-video-body', |
| 217 |
modalVideoInner: 'modal-video-inner', |
| 218 |
modalVideoIframeWrap: 'modal-video-movie-wrap', |
| 219 |
modalVideoCloseBtn: 'modal-video-close-btn' |
| 220 |
}, |
| 221 |
aria: { |
| 222 |
openMessage: 'You just openned the modal video', |
| 223 |
dismissBtnMessage: 'Close the modal by clicking here' |
| 224 |
} |
| 225 |
}; |
| 226 |
|
| 227 |
var ModalVideo = function () { |
| 228 |
function ModalVideo(ele, option) { |
| 229 |
var _this = this; |
| 230 |
|
| 231 |
_classCallCheck(this, ModalVideo); |
| 232 |
|
| 233 |
var opt = assign({}, defaults, option); |
| 234 |
var selectors = typeof ele === 'string' ? document.querySelectorAll(ele) : ele; |
| 235 |
var body = document.querySelector('body'); |
| 236 |
var classNames = opt.classNames; |
| 237 |
var speed = opt.animationSpeed; |
| 238 |
[].forEach.call(selectors, function (selector) { |
| 239 |
selector.addEventListener('click', function (event) { |
| 240 |
if (selector.tagName === 'A') { |
| 241 |
event.preventDefault(); |
| 242 |
} |
| 243 |
var videoId = selector.dataset.videoId; |
| 244 |
var channel = selector.dataset.channel || opt.channel; |
| 245 |
var id = (0, _util.getUniqId)(); |
| 246 |
var videoUrl = selector.dataset.videoUrl || _this.getVideoUrl(opt, channel, videoId); |
| 247 |
var html = _this.getHtml(opt, videoUrl, id); |
| 248 |
(0, _util.append)(body, html); |
| 249 |
var modal = document.getElementById(id); |
| 250 |
var btn = modal.querySelector('.js-modal-video-dismiss-btn'); |
| 251 |
modal.focus(); |
| 252 |
modal.addEventListener('click', function () { |
| 253 |
(0, _util.addClass)(modal, classNames.modalVideoClose); |
| 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 |
btn.addEventListener('click', function () { |
| 271 |
(0, _util.triggerEvent)(modal, 'click'); |
| 272 |
}); |
| 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: 'getQueryString', |
| 288 |
value: function getQueryString(obj) { |
| 289 |
var url = ''; |
| 290 |
Object.keys(obj).forEach(function (key) { |
| 291 |
url += key + '=' + obj[key] + '&'; |
| 292 |
}); |
| 293 |
return url.substr(0, url.length - 1); |
| 294 |
} |
| 295 |
}, { |
| 296 |
key: 'getVideoUrl', |
| 297 |
value: function getVideoUrl(opt, channel, videoId) { |
| 298 |
if (channel === 'youtube') { |
| 299 |
return this.getYoutubeUrl(opt.youtube, videoId); |
| 300 |
} else if (channel === 'vimeo') { |
| 301 |
return this.getVimeoUrl(opt.vimeo, videoId); |
| 302 |
} else if (channel === 'facebook') { |
| 303 |
return this.getFacebookUrl(opt.facebook, videoId); |
| 304 |
} |
| 305 |
return ''; |
| 306 |
} |
| 307 |
}, { |
| 308 |
key: 'getVimeoUrl', |
| 309 |
value: function getVimeoUrl(vimeo, videoId) { |
| 310 |
var query = this.getQueryString(vimeo); |
| 311 |
return '//player.vimeo.com/video/' + videoId + '?' + query; |
| 312 |
} |
| 313 |
}, { |
| 314 |
key: 'getYoutubeUrl', |
| 315 |
value: function getYoutubeUrl(youtube, videoId) { |
| 316 |
var query = this.getQueryString(youtube); |
| 317 |
if (youtube.nocookie === true) { |
| 318 |
return '//www.youtube-nocookie.com/embed/' + videoId + '?' + query; |
| 319 |
} |
| 320 |
|
| 321 |
return '//www.youtube.com/embed/' + videoId + '?' + query; |
| 322 |
} |
| 323 |
}, { |
| 324 |
key: 'getFacebookUrl', |
| 325 |
value: function getFacebookUrl(facebook, videoId) { |
| 326 |
return '//www.facebook.com/v2.10/plugins/video.php?href=https://www.facebook.com/facebook/videos/' + videoId + '&' + this.getQueryString(facebook); |
| 327 |
} |
| 328 |
}, { |
| 329 |
key: 'getHtml', |
| 330 |
value: function getHtml(opt, videoUrl, id) { |
| 331 |
var padding = this.getPadding(opt.ratio); |
| 332 |
var classNames = opt.classNames; |
| 333 |
return '\n <div class="' + classNames.modalVideo + '" tabindex="-1" role="dialog" aria-label="' + opt.aria.openMessage + '" id="' + id + '">\n <div class="' + classNames.modalVideoBody + '">\n <div class="' + classNames.modalVideoInner + '">\n <div class="' + classNames.modalVideoIframeWrap + '" style="padding-bottom:' + padding + '">\n <button class="' + classNames.modalVideoCloseBtn + ' js-modal-video-dismiss-btn" aria-label="' + opt.aria.dismissBtnMessage + '"></button>\n <iframe width=\'460\' height=\'230\' src="https:' + videoUrl + '?autoplay=1" frameborder=\'0\' allowfullscreen=' + opt.allowFullScreen + ' tabindex="-1" ' + (opt.allowAutoplay ? 'allow="autoplay"' : '') + '/>\n </div>\n </div>\n </div>\n </div>\n '; |
| 334 |
} |
| 335 |
}]); |
| 336 |
|
| 337 |
return ModalVideo; |
| 338 |
}(); |
| 339 |
|
| 340 |
exports.default = ModalVideo; |
| 341 |
module.exports = exports['default']; |
| 342 |
|
| 343 |
},{"../lib/util":6,"custom-event-polyfill":1,"es6-object-assign":2}],5:[function(require,module,exports){ |
| 344 |
'use strict'; |
| 345 |
|
| 346 |
module.exports = require('./core/'); |
| 347 |
|
| 348 |
},{"./core/":4}],6:[function(require,module,exports){ |
| 349 |
'use strict'; |
| 350 |
|
| 351 |
Object.defineProperty(exports, "__esModule", { |
| 352 |
value: true |
| 353 |
}); |
| 354 |
var append = exports.append = function append(element, string) { |
| 355 |
var div = document.createElement('div'); |
| 356 |
div.innerHTML = string; |
| 357 |
while (div.children.length > 0) { |
| 358 |
element.appendChild(div.children[0]); |
| 359 |
} |
| 360 |
}; |
| 361 |
|
| 362 |
var getUniqId = exports.getUniqId = function getUniqId() { |
| 363 |
return (Date.now().toString(36) + Math.random().toString(36).substr(2, 5)).toUpperCase(); |
| 364 |
}; |
| 365 |
|
| 366 |
var remove = exports.remove = function remove(element) { |
| 367 |
if (element && element.parentNode) { |
| 368 |
element.parentNode.removeChild(element); |
| 369 |
} |
| 370 |
}; |
| 371 |
|
| 372 |
var addClass = exports.addClass = function addClass(element, className) { |
| 373 |
if (element.classList) { |
| 374 |
element.classList.add(className); |
| 375 |
} else { |
| 376 |
element.className += ' ' + className; |
| 377 |
} |
| 378 |
}; |
| 379 |
|
| 380 |
var triggerEvent = exports.triggerEvent = function triggerEvent(el, eventName, options) { |
| 381 |
var event = void 0; |
| 382 |
if (window.CustomEvent) { |
| 383 |
event = new CustomEvent(eventName, { cancelable: true }); |
| 384 |
} else { |
| 385 |
event = document.createEvent('CustomEvent'); |
| 386 |
event.initCustomEvent(eventName, false, false, options); |
| 387 |
} |
| 388 |
el.dispatchEvent(event); |
| 389 |
}; |
| 390 |
|
| 391 |
},{}]},{},[3]); |
| 392 |
jQuery(".js-video-button").modalVideo({ |
| 393 |
channel:'youtube', |
| 394 |
autoplay: 0 |
| 395 |
}); |
| 396 |
// new ModalVideo('.js-video-button', {channel: 'youtube'}); |
| 397 |
|
