diff options
Diffstat (limited to 'npm_assets/node_modules/baguettebox.js')
9 files changed, 2378 insertions, 0 deletions
diff --git a/npm_assets/node_modules/baguettebox.js/LICENSE b/npm_assets/node_modules/baguettebox.js/LICENSE new file mode 100644 index 0000000..61f2fae --- /dev/null +++ b/npm_assets/node_modules/baguettebox.js/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2017 Marek Grzybek + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/npm_assets/node_modules/baguettebox.js/README.md b/npm_assets/node_modules/baguettebox.js/README.md new file mode 100644 index 0000000..f35842a --- /dev/null +++ b/npm_assets/node_modules/baguettebox.js/README.md @@ -0,0 +1,279 @@ +<h1 align="center">baguetteBox.js</h1> + +[](https://github.com/feimosi/baguetteBox.js/releases) +[](https://github.com/feimosi/baguetteBox.js/blob/dev/LICENSE) +[](https://david-dm.org/feimosi/baguetteBox.js) +[](https://david-dm.org/feimosi/baguetteBox.js?type=dev) +[](https://www.npmjs.com/package/baguettebox.js) +[](https://travis-ci.org/feimosi/baguetteBox.js) + +[](https://paypal.me/feimosi) +[](https://twitter.com/intent/tweet?text=Check%20out%20baguetteBox.js%20-%20simple%20and%20easy%20to%20use%20lightbox%20script%20written%20in%20pure%20JavaScript%0Ahttps%3A%2F%2Fgithub.com%2Ffeimosi%2FbaguetteBox.js) +[](https://twitter.com/feimosi) + +Simple and easy to use lightbox script written in pure JavaScript. + +[Demo page](https://feimosi.github.io/baguetteBox.js/) + + + +## Table of contents + + * [Features](#features) + * [Installation](#installation) + * [Importing](#importing) + * [Usage](#usage) + * [Customization](#customization) + * [API](#api) + * [Responsive images](#responsive-images) + * [Compatibility](#compatibility) + * [Contributing](#contributing) + * [Donation](#donation) + * [Credits](#credits) + * [License](#license) + +## Features + +* Written in pure JavaScript, no dependencies required +* Multiple-gallery support allows custom options for each +* Supports swipe gestures on touch-screen devices +* Full-screen mode available +* Modern and minimal look +* Image captions support +* Responsive images +* CSS3 transitions +* SVG buttons, no extra files to download +* Around 3.2KB gzipped +* With Accessibility in mind + +## Installation + +You can use one of the following methods: + +### npm + +```sh +npm install baguettebox.js --save +``` + +### Yarn +```sh +yarn add baguettebox.js +``` + +### Bower + +```sh +bower install baguettebox.js --save +``` + +### CDN +1. Use one of the following CDN providers: + - https://cdnjs.com/libraries/baguettebox.js + - https://jsdelivr.com/projects/baguettebox.js + +3. Copy URLs of the latest version (both `.js` and `.css` files) + +2. Paste the URLs in your HTML file: + + ```html +<link rel="stylesheet" href="<CSS URL>"> +<script src="<JS URL>" async></script> + ``` + +### Manually + +1. Download `baguetteBox.min.css` and `baguetteBox.min.js` files from the `dist` folder. +2. Include them somewhere in your document: + + ```html +<link rel="stylesheet" href="css/baguetteBox.min.css"> +<script src="js/baguetteBox.min.js" async></script> + ``` + +## Importing + +### Traditional approach + +If you don't use JavaScript modules and include the file with a `<script>` tag, you don't have to import anything explicitly. `baguetteBox` will be available in the global scope. + +### CommonJS + +```js +const baguetteBox = require('baguettebox.js'); +``` + +### ES2015 modules + +```js +import baguetteBox from 'baguettebox.js'; +``` + +### Sass + +```scss +@import 'baguettebox.js/dist/baguetteBox.min.css'; +``` + +## Usage + +Initialize the script by running: + +```js +baguetteBox.run('.gallery'); +``` + +where the first argument is a selector to a gallery (or galleries) containing `a` tags. The HTML code may look like this: + +```html +<div class="gallery"> + <a href="img/2-1.jpg" data-caption="Image caption"> + <img src="img/thumbnails/2-1.jpg" alt="First image"> + </a> + <a href="img/2-2.jpg"> + <img src="img/thumbnails/2-2.jpg" alt="Second image"> + </a> + ... +</div> +``` + +To use captions put a `title` or `data-caption` attribute on the `a` tag. + +Note: if you import baguetteBox using the `<script>` tag, remember to run it after the document has loaded: + +```html +<script> +window.addEventListener('load', function() { + baguetteBox.run('.gallery'); +}); +</script> +``` + +## Customization + +You can pass an object with custom options as the second parameter. + +```js +baguetteBox.run('.gallery', { + // Custom options +}); +``` + +The following options are available: + +| Option | Type | Default | Description | +| --- | --- | --- | --- | +| `captions` | `Boolean` \| `function(element)` | `true` | Display image captions. Passing a function will use a string returned by this callback. The only argument is `a` element containing the image. Invoked in the context of the current gallery array | +| `buttons` | `Boolean` \| `'auto'` | `'auto'` | Display buttons. `'auto'` hides buttons on touch-enabled devices or when only one image is available | +| `fullScreen` | `Boolean` | `false` | Enable full screen mode | +| `noScrollbars` | `Boolean` | `false` | Hide scrollbars when gallery is displayed | +| `bodyClass` | `String` | `'baguetteBox-open'` | Class name that will be appended to the `body` when lightbox is visible (works in IE 10+) | +| `ignoreClass` | `String` | `null` | It will ignore images with given class put on `a` tag | +| `titleTag` | `Boolean` | `false` | Use caption value also in the gallery `img.title` attribute | +| `async` | `Boolean` | `false` | Load files asynchronously | +| `preload` | `Number` | `2` | How many files should be preloaded | +| `animation` | `'slideIn'` \| `'fadeIn'` \| `false` | `'slideIn'` | Animation type | +| `afterShow` | `function` | `null` | Callback to be run after showing the overlay | +| `afterHide` | `function` | `null` | Callback to be run after hiding the overlay | +| `onChange` | `function(currentIndex, imagesCount)` | `null` | Callback to be run when image changes | +| `overlayBackgroundColor` | `String` | `'rgba`<br>`(0,0,0,0.8)'` | Background color for the lightbox overlay | +| `filter` | `RegExp` | `/.+\.(gif\|jpe?g\|png\|webp)/i` | Pattern to match image files. Applied to the `a.href` attribute | + +## API + +### `run(selector, userOptions)` + +Initialize baguetteBox.js + +- @param `selector` {string} - valid CSS selector used by `querySelectorAll` +- @param `userOptions` {object} - custom options (see [#Customization](#customization)) +- @return {array} - an array of gallery objects (reflects elements found by the selector) + +### `show(index, gallery)` + +Show (if hidden) and move the gallery to a specific index + +- @param `index` {number} - the position of the image +- @param `gallery` {array} - gallery which should be opened, if omitted assumes the currently opened one +- @return {boolean} - true on success or false if the index is invalid + +Usage: + +```js +const gallery = baguetteBox.run('.gallery'); +baguetteBox.show(index, gallery[0]); +``` + +### `showNext` + +Switch to the next image + +- @return {boolean} - true on success or false if there are no more images to be loaded + +### `showPrevious` + +Switch to the previous image + +- @return {boolean} - true on success or false if there are no more images to be loaded + +### `hide` + +Hide the gallery + +### `destroy` + +Remove the plugin with any event bindings + +## Responsive images + +To use this feature, simply put `data-at-{width}` attributes on `a` tags with a value being the path to the desired image. `{width}` should be the maximum screen width the image can be displayed at. The script chooses the first image with `{width}` greater than or equal to the current screen width for best user experience. +That last `data-at-X` image is also used in the case of a screen larger than X. + +Here's an example of what the HTML code can look like: + +```html +<a href="img/2-1.jpg" + data-at-450="img/thumbs/2-1.jpg" + data-at-800="img/small/2-1.jpg" + data-at-1366="img/medium/2-1.jpg" + data-at-1920="img/big/2-1.jpg"> + <img src="img/thumbs/2-1.jpg"> +</a> +``` + +If you have 1366x768 resolution baguetteBox.js will choose `"img/medium/2-1.jpg"`. If, however, it's 1440x900 it'll choose `"img/big/2-1.jpg"`. Keep the `href` attribute as a fallback (link to a bigger image e.g. of HD size) for older browsers. + +## Compatibility + +Desktop: +* IE 8+ +* Chrome +* Firefox 3.6+ +* Opera 12+ +* Safari 5+ + +Mobile: +* Safari on iOS +* Chrome on Android + +## Contributing + +Feel free to report any issues! If you wish to contribute by fixing a bug or implementing a new feature, please first read the [CONTRIBUTING](./CONTRIBUTING.md) guide. + +## Donation + +If you find this project useful and want to say thanks, you can buy me a cup of coffee :) + +[](https://paypal.me/feimosi) + +## Credits + +Creation of `baguetteBox.js` was inspired by a great jQuery plugin [touchTouch](https://github.com/martinaglv/touchTouch). + +Huge thanks for providing a testing platform go to [](http://browserstack.com/) + +## License + +Copyright (c) 2018 [feimosi](https://github.com/feimosi/) + +This content is released under the [MIT License](https://opensource.org/licenses/MIT). diff --git a/npm_assets/node_modules/baguettebox.js/dist/baguetteBox.css b/npm_assets/node_modules/baguettebox.js/dist/baguetteBox.css new file mode 100644 index 0000000..5c55990 --- /dev/null +++ b/npm_assets/node_modules/baguettebox.js/dist/baguetteBox.css @@ -0,0 +1,198 @@ +/*! + * baguetteBox.js + * @author feimosi + * @version 1.11.1 + * @url https://github.com/feimosi/baguetteBox.js + */ +#baguetteBox-overlay { + display: none; + opacity: 0; + position: fixed; + overflow: hidden; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1000000; + background-color: #222; + background-color: rgba(0, 0, 0, 0.8); + -webkit-transition: opacity .5s ease; + transition: opacity .5s ease; } + #baguetteBox-overlay.visible { + opacity: 1; } + #baguetteBox-overlay .full-image { + display: inline-block; + position: relative; + width: 100%; + height: 100%; + text-align: center; } + #baguetteBox-overlay .full-image figure { + display: inline; + margin: 0; + height: 100%; } + #baguetteBox-overlay .full-image img { + display: inline-block; + width: auto; + height: auto; + max-height: 100%; + max-width: 100%; + vertical-align: middle; + -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); + box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); } + #baguetteBox-overlay .full-image figcaption { + display: block; + position: absolute; + bottom: 0; + width: 100%; + text-align: center; + line-height: 1.8; + white-space: normal; + color: #ccc; + background-color: #000; + background-color: rgba(0, 0, 0, 0.6); + font-family: sans-serif; } + #baguetteBox-overlay .full-image:before { + content: ""; + display: inline-block; + height: 50%; + width: 1px; + margin-right: -1px; } + +#baguetteBox-slider { + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; + white-space: nowrap; + -webkit-transition: left .4s ease, -webkit-transform .4s ease; + transition: left .4s ease, -webkit-transform .4s ease; + transition: left .4s ease, transform .4s ease; + transition: left .4s ease, transform .4s ease, -webkit-transform .4s ease, -moz-transform .4s ease; } + #baguetteBox-slider.bounce-from-right { + -webkit-animation: bounceFromRight .4s ease-out; + animation: bounceFromRight .4s ease-out; } + #baguetteBox-slider.bounce-from-left { + -webkit-animation: bounceFromLeft .4s ease-out; + animation: bounceFromLeft .4s ease-out; } + +@-webkit-keyframes bounceFromRight { + 0% { + margin-left: 0; } + 50% { + margin-left: -30px; } + 100% { + margin-left: 0; } } + +@keyframes bounceFromRight { + 0% { + margin-left: 0; } + 50% { + margin-left: -30px; } + 100% { + margin-left: 0; } } + +@-webkit-keyframes bounceFromLeft { + 0% { + margin-left: 0; } + 50% { + margin-left: 30px; } + 100% { + margin-left: 0; } } + +@keyframes bounceFromLeft { + 0% { + margin-left: 0; } + 50% { + margin-left: 30px; } + 100% { + margin-left: 0; } } + +.baguetteBox-button#next-button, .baguetteBox-button#previous-button { + top: 50%; + top: calc(50% - 30px); + width: 44px; + height: 60px; } + +.baguetteBox-button { + position: absolute; + cursor: pointer; + outline: none; + padding: 0; + margin: 0; + border: 0; + -moz-border-radius: 15%; + border-radius: 15%; + background-color: #323232; + background-color: rgba(50, 50, 50, 0.5); + color: #ddd; + font: 1.6em sans-serif; + -webkit-transition: background-color .4s ease; + transition: background-color .4s ease; } + .baguetteBox-button:focus, .baguetteBox-button:hover { + background-color: rgba(50, 50, 50, 0.9); } + .baguetteBox-button#next-button { + right: 2%; } + .baguetteBox-button#previous-button { + left: 2%; } + .baguetteBox-button#close-button { + top: 20px; + right: 2%; + right: calc(2% + 6px); + width: 30px; + height: 30px; } + .baguetteBox-button svg { + position: absolute; + left: 0; + top: 0; } + +/* + Preloader + Borrowed from http://tobiasahlin.com/spinkit/ +*/ +.baguetteBox-spinner { + width: 40px; + height: 40px; + display: inline-block; + position: absolute; + top: 50%; + left: 50%; + margin-top: -20px; + margin-left: -20px; } + +.baguetteBox-double-bounce1, +.baguetteBox-double-bounce2 { + width: 100%; + height: 100%; + -moz-border-radius: 50%; + border-radius: 50%; + background-color: #fff; + opacity: .6; + position: absolute; + top: 0; + left: 0; + -webkit-animation: bounce 2s infinite ease-in-out; + animation: bounce 2s infinite ease-in-out; } + +.baguetteBox-double-bounce2 { + -webkit-animation-delay: -1s; + animation-delay: -1s; } + +@-webkit-keyframes bounce { + 0%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 50% { + -webkit-transform: scale(1); + transform: scale(1); } } + +@keyframes bounce { + 0%, 100% { + -webkit-transform: scale(0); + -moz-transform: scale(0); + transform: scale(0); } + 50% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + transform: scale(1); } } diff --git a/npm_assets/node_modules/baguettebox.js/dist/baguetteBox.js b/npm_assets/node_modules/baguettebox.js/dist/baguetteBox.js new file mode 100644 index 0000000..712dfbd --- /dev/null +++ b/npm_assets/node_modules/baguettebox.js/dist/baguetteBox.js @@ -0,0 +1,793 @@ +/*! + * baguetteBox.js + * @author feimosi + * @version 1.11.1 + * @url https://github.com/feimosi/baguetteBox.js + */ + +/* global define, module */ + +(function (root, factory) { + 'use strict'; + if (typeof define === 'function' && define.amd) { + define(factory); + } else if (typeof exports === 'object') { + module.exports = factory(); + } else { + root.baguetteBox = factory(); + } +}(this, function () { + 'use strict'; + + // SVG shapes used on the buttons + var leftArrow = '<svg width="44" height="60">' + + '<polyline points="30 10 10 30 30 50" stroke="rgba(255,255,255,0.5)" stroke-width="4"' + + 'stroke-linecap="butt" fill="none" stroke-linejoin="round"/>' + + '</svg>', + rightArrow = '<svg width="44" height="60">' + + '<polyline points="14 10 34 30 14 50" stroke="rgba(255,255,255,0.5)" stroke-width="4"' + + 'stroke-linecap="butt" fill="none" stroke-linejoin="round"/>' + + '</svg>', + closeX = '<svg width="30" height="30">' + + '<g stroke="rgb(160,160,160)" stroke-width="4">' + + '<line x1="5" y1="5" x2="25" y2="25"/>' + + '<line x1="5" y1="25" x2="25" y2="5"/>' + + '</g></svg>'; + // Global options and their defaults + var options = {}, + defaults = { + captions: true, + buttons: 'auto', + fullScreen: false, + noScrollbars: false, + bodyClass: 'baguetteBox-open', + titleTag: false, + async: false, + preload: 2, + animation: 'slideIn', + afterShow: null, + afterHide: null, + onChange: null, + overlayBackgroundColor: 'rgba(0,0,0,.8)' + }; + // Object containing information about features compatibility + var supports = {}; + // DOM Elements references + var overlay, slider, previousButton, nextButton, closeButton; + // An array with all images in the current gallery + var currentGallery = []; + // Current image index inside the slider + var currentIndex = 0; + // Visibility of the overlay + var isOverlayVisible = false; + // Touch event start position (for slide gesture) + var touch = {}; + // If set to true ignore touch events because animation was already fired + var touchFlag = false; + // Regex pattern to match image files + var regex = /.+\.(gif|jpe?g|png|webp)/i; + // Object of all used galleries + var data = {}; + // Array containing temporary images DOM elements + var imagesElements = []; + // The last focused element before opening the overlay + var documentLastFocus = null; + var overlayClickHandler = function(event) { + // Close the overlay when user clicks directly on the background + if (event.target.id.indexOf('baguette-img') !== -1) { + hideOverlay(); + } + }; + var previousButtonClickHandler = function(event) { + event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true; // eslint-disable-line no-unused-expressions + showPreviousImage(); + }; + var nextButtonClickHandler = function(event) { + event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true; // eslint-disable-line no-unused-expressions + showNextImage(); + }; + var closeButtonClickHandler = function(event) { + event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true; // eslint-disable-line no-unused-expressions + hideOverlay(); + }; + var touchstartHandler = function(event) { + touch.count++; + if (touch.count > 1) { + touch.multitouch = true; + } + // Save x and y axis position + touch.startX = event.changedTouches[0].pageX; + touch.startY = event.changedTouches[0].pageY; + }; + var touchmoveHandler = function(event) { + // If action was already triggered or multitouch return + if (touchFlag || touch.multitouch) { + return; + } + event.preventDefault ? event.preventDefault() : event.returnValue = false; // eslint-disable-line no-unused-expressions + var touchEvent = event.touches[0] || event.changedTouches[0]; + // Move at least 40 pixels to trigger the action + if (touchEvent.pageX - touch.startX > 40) { + touchFlag = true; + showPreviousImage(); + } else if (touchEvent.pageX - touch.startX < -40) { + touchFlag = true; + showNextImage(); + // Move 100 pixels up to close the overlay + } else if (touch.startY - touchEvent.pageY > 100) { + hideOverlay(); + } + }; + var touchendHandler = function() { + touch.count--; + if (touch.count <= 0) { + touch.multitouch = false; + } + touchFlag = false; + }; + var contextmenuHandler = function() { + touchendHandler(); + }; + + var trapFocusInsideOverlay = function(event) { + if (overlay.style.display === 'block' && (overlay.contains && !overlay.contains(event.target))) { + event.stopPropagation(); + initFocus(); + } + }; + + // forEach polyfill for IE8 + // http://stackoverflow.com/a/14827443/1077846 + /* eslint-disable */ + if (![].forEach) { + Array.prototype.forEach = function(callback, thisArg) { + for (var i = 0; i < this.length; i++) { + callback.call(thisArg, this[i], i, this); + } + }; + } + + // filter polyfill for IE8 + // https://gist.github.com/eliperelman/1031656 + if (![].filter) { + Array.prototype.filter = function(a, b, c, d, e) { + c = this; + d = []; + for (e = 0; e < c.length; e++) + a.call(b, c[e], e, c) && d.push(c[e]); + return d; + }; + } + /* eslint-enable */ + + // Script entry point + function run(selector, userOptions) { + // Fill supports object + supports.transforms = testTransformsSupport(); + supports.svg = testSvgSupport(); + supports.passiveEvents = testPassiveEventsSupport(); + + buildOverlay(); + removeFromCache(selector); + return bindImageClickListeners(selector, userOptions); + } + + function bindImageClickListeners(selector, userOptions) { + // For each gallery bind a click event to every image inside it + var galleryNodeList = document.querySelectorAll(selector); + var selectorData = { + galleries: [], + nodeList: galleryNodeList + }; + data[selector] = selectorData; + + [].forEach.call(galleryNodeList, function(galleryElement) { + if (userOptions && userOptions.filter) { + regex = userOptions.filter; + } + + // Get nodes from gallery elements or single-element galleries + var tagsNodeList = []; + if (galleryElement.tagName === 'A') { + tagsNodeList = [galleryElement]; + } else { + tagsNodeList = galleryElement.getElementsByTagName('a'); + } + + // Filter 'a' elements from those not linking to images, and not containing <img> tags (PATCHED) + tagsNodeList = [].filter.call(tagsNodeList, function(element) { + if (element.className.indexOf(userOptions && userOptions.ignoreClass) === -1 && element.getElementsByTagName("img").length > 0) { + return regex.test(element.href); + } + }); + if (tagsNodeList.length === 0) { + return; + } + + var gallery = []; + [].forEach.call(tagsNodeList, function(imageElement, imageIndex) { + var imageElementClickHandler = function(event) { + event.preventDefault ? event.preventDefault() : event.returnValue = false; // eslint-disable-line no-unused-expressions + prepareOverlay(gallery, userOptions); + showOverlay(imageIndex); + }; + var imageItem = { + eventHandler: imageElementClickHandler, + imageElement: imageElement + }; + bind(imageElement, 'click', imageElementClickHandler); + gallery.push(imageItem); + }); + selectorData.galleries.push(gallery); + }); + + return selectorData.galleries; + } + + function clearCachedData() { + for (var selector in data) { + if (data.hasOwnProperty(selector)) { + removeFromCache(selector); + } + } + } + + function removeFromCache(selector) { + if (!data.hasOwnProperty(selector)) { + return; + } + var galleries = data[selector].galleries; + [].forEach.call(galleries, function(gallery) { + [].forEach.call(gallery, function(imageItem) { + unbind(imageItem.imageElement, 'click', imageItem.eventHandler); + }); + + if (currentGallery === gallery) { + currentGallery = []; + } + }); + + delete data[selector]; + } + + function buildOverlay() { + overlay = getByID('baguetteBox-overlay'); + // Check if the overlay already exists + if (overlay) { + slider = getByID('baguetteBox-slider'); + previousButton = getByID('previous-button'); + nextButton = getByID('next-button'); + closeButton = getByID('close-button'); + return; + } + // Create overlay element + overlay = create('div'); + overlay.setAttribute('role', 'dialog'); + overlay.id = 'baguetteBox-overlay'; + document.getElementsByTagName('body')[0].appendChild(overlay); + // Create gallery slider element + slider = create('div'); + slider.id = 'baguetteBox-slider'; + overlay.appendChild(slider); + // Create all necessary buttons + previousButton = create('button'); + previousButton.setAttribute('type', 'button'); + previousButton.id = 'previous-button'; + previousButton.setAttribute('aria-label', 'Previous'); + previousButton.innerHTML = supports.svg ? leftArrow : '<'; + overlay.appendChild(previousButton); + + nextButton = create('button'); + nextButton.setAttribute('type', 'button'); + nextButton.id = 'next-button'; + nextButton.setAttribute('aria-label', 'Next'); + nextButton.innerHTML = supports.svg ? rightArrow : '>'; + overlay.appendChild(nextButton); + + closeButton = create('button'); + closeButton.setAttribute('type', 'button'); + closeButton.id = 'close-button'; + closeButton.setAttribute('aria-label', 'Close'); + closeButton.innerHTML = supports.svg ? closeX : '×'; + overlay.appendChild(closeButton); + + previousButton.className = nextButton.className = closeButton.className = 'baguetteBox-button'; + + bindEvents(); + } + + function keyDownHandler(event) { + switch (event.keyCode) { + case 37: // Left arrow + showPreviousImage(); + break; + case 39: // Right arrow + showNextImage(); + break; + case 27: // Esc + hideOverlay(); + break; + case 36: // Home + showFirstImage(event); + break; + case 35: // End + showLastImage(event); + break; + } + } + + function bindEvents() { + var passiveEvent = supports.passiveEvents ? { passive: false } : null; + var nonPassiveEvent = supports.passiveEvents ? { passive: true } : null; + + bind(overlay, 'click', overlayClickHandler); + bind(previousButton, 'click', previousButtonClickHandler); + bind(nextButton, 'click', nextButtonClickHandler); + bind(closeButton, 'click', closeButtonClickHandler); + bind(slider, 'contextmenu', contextmenuHandler); + bind(overlay, 'touchstart', touchstartHandler, nonPassiveEvent); + bind(overlay, 'touchmove', touchmoveHandler, passiveEvent); + bind(overlay, 'touchend', touchendHandler); + bind(document, 'focus', trapFocusInsideOverlay, true); + } + + function unbindEvents() { + var passiveEvent = supports.passiveEvents ? { passive: false } : null; + var nonPassiveEvent = supports.passiveEvents ? { passive: true } : null; + + unbind(overlay, 'click', overlayClickHandler); + unbind(previousButton, 'click', previousButtonClickHandler); + unbind(nextButton, 'click', nextButtonClickHandler); + unbind(closeButton, 'click', closeButtonClickHandler); + unbind(slider, 'contextmenu', contextmenuHandler); + unbind(overlay, 'touchstart', touchstartHandler, nonPassiveEvent); + unbind(overlay, 'touchmove', touchmoveHandler, passiveEvent); + unbind(overlay, 'touchend', touchendHandler); + unbind(document, 'focus', trapFocusInsideOverlay, true); + } + + function prepareOverlay(gallery, userOptions) { + // If the same gallery is being opened prevent from loading it once again + if (currentGallery === gallery) { + return; + } + currentGallery = gallery; + // Update gallery specific options + setOptions(userOptions); + // Empty slider of previous contents (more effective than .innerHTML = "") + while (slider.firstChild) { + slider.removeChild(slider.firstChild); + } + imagesElements.length = 0; + + var imagesFiguresIds = []; + var imagesCaptionsIds = []; + // Prepare and append images containers and populate figure and captions IDs arrays + for (var i = 0, fullImage; i < gallery.length; i++) { + fullImage = create('div'); + fullImage.className = 'full-image'; + fullImage.id = 'baguette-img-' + i; + imagesElements.push(fullImage); + + imagesFiguresIds.push('baguetteBox-figure-' + i); + imagesCaptionsIds.push('baguetteBox-figcaption-' + i); + slider.appendChild(imagesElements[i]); + } + overlay.setAttribute('aria-labelledby', imagesFiguresIds.join(' ')); + overlay.setAttribute('aria-describedby', imagesCaptionsIds.join(' ')); + } + + function setOptions(newOptions) { + if (!newOptions) { + newOptions = {}; + } + // Fill options object + for (var item in defaults) { + options[item] = defaults[item]; + if (typeof newOptions[item] !== 'undefined') { + options[item] = newOptions[item]; + } + } + /* Apply new options */ + // Change transition for proper animation + slider.style.transition = slider.style.webkitTransition = (options.animation === 'fadeIn' ? 'opacity .4s ease' : + options.animation === 'slideIn' ? '' : 'none'); + // Hide buttons if necessary + if (options.buttons === 'auto' && ('ontouchstart' in window || currentGallery.length === 1)) { + options.buttons = false; + } + // Set buttons style to hide or display them + previousButton.style.display = nextButton.style.display = (options.buttons ? '' : 'none'); + // Set overlay color + try { + overlay.style.backgroundColor = options.overlayBackgroundColor; + } catch (e) { + // Silence the error and continue + } + } + + function showOverlay(chosenImageIndex) { + if (options.noScrollbars) { + document.documentElement.style.overflowY = 'hidden'; + document.body.style.overflowY = 'scroll'; + } + if (overlay.style.display === 'block') { + return; + } + + bind(document, 'keydown', keyDownHandler); + currentIndex = chosenImageIndex; + touch = { + count: 0, + startX: null, + startY: null + }; + loadImage(currentIndex, function() { + preloadNext(currentIndex); + preloadPrev(currentIndex); + }); + + updateOffset(); + overlay.style.display = 'block'; + if (options.fullScreen) { + enterFullScreen(); + } + // Fade in overlay + setTimeout(function() { + overlay.className = 'visible'; + if (options.bodyClass && document.body.classList) { + document.body.classList.add(options.bodyClass); + } + if (options.afterShow) { + options.afterShow(); + } + }, 50); + if (options.onChange) { + options.onChange(currentIndex, imagesElements.length); + } + documentLastFocus = document.activeElement; + initFocus(); + isOverlayVisible = true; + } + + function initFocus() { + if (options.buttons) { + previousButton.focus(); + } else { + closeButton.focus(); + } + } + + function enterFullScreen() { + if (overlay.requestFullscreen) { + overlay.requestFullscreen(); + } else if (overlay.webkitRequestFullscreen) { + overlay.webkitRequestFullscreen(); + } else if (overlay.mozRequestFullScreen) { + overlay.mozRequestFullScreen(); + } + } + + function exitFullscreen() { + if (document.exitFullscreen) { + document.exitFullscreen(); + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } else if (document.webkitExitFullscreen) { + document.webkitExitFullscreen(); + } + } + + function hideOverlay() { + if (options.noScrollbars) { + document.documentElement.style.overflowY = 'auto'; + document.body.style.overflowY = 'auto'; + } + if (overlay.style.display === 'none') { + return; + } + + unbind(document, 'keydown', keyDownHandler); + // Fade out and hide the overlay + overlay.className = ''; + setTimeout(function() { + overlay.style.display = 'none'; + if (document.fullscreen) { + exitFullscreen(); + } + if (options.bodyClass && document.body.classList) { + document.body.classList.remove(options.bodyClass); + } + if (options.afterHide) { + options.afterHide(); + } + documentLastFocus && documentLastFocus.focus(); + isOverlayVisible = false; + }, 500); + } + + function loadImage(index, callback) { + var imageContainer = imagesElements[index]; + var galleryItem = currentGallery[index]; + + // Return if the index exceeds prepared images in the overlay + // or if the current gallery has been changed / closed + if (typeof imageContainer === 'undefined' || typeof galleryItem === 'undefined') { + return; + } + + // If image is already loaded run callback and return + if (imageContainer.getElementsByTagName('img')[0]) { + if (callback) { + callback(); + } + return; + } + + // Get element reference, optional caption and source path + var imageElement = galleryItem.imageElement; + var thumbnailElement = imageElement.getElementsByTagName('img')[0]; + var imageCaption = typeof options.captions === 'function' ? + options.captions.call(currentGallery, imageElement) : + imageElement.getAttribute('data-caption') || imageElement.title; + var imageSrc = getImageSrc(imageElement); + + // Prepare figure element + var figure = create('figure'); + figure.id = 'baguetteBox-figure-' + index; + figure.innerHTML = '<div class="baguetteBox-spinner">' + + '<div class="baguetteBox-double-bounce1"></div>' + + '<div class="baguetteBox-double-bounce2"></div>' + + '</div>'; + // Insert caption if available + if (options.captions && imageCaption) { + var figcaption = create('figcaption'); + figcaption.id = 'baguetteBox-figcaption-' + index; + figcaption.innerHTML = imageCaption; + figure.appendChild(figcaption); + } + imageContainer.appendChild(figure); + + // Prepare gallery img element + var image = create('img'); + image.onload = function() { + // Remove loader element + var spinner = document.querySelector('#baguette-img-' + index + ' .baguetteBox-spinner'); + figure.removeChild(spinner); + if (!options.async && callback) { + callback(); + } + }; + image.setAttribute('src', imageSrc); + image.alt = thumbnailElement ? thumbnailElement.alt || '' : ''; + if (options.titleTag && imageCaption) { + image.title = imageCaption; + } + figure.appendChild(image); + + // Run callback + if (options.async && callback) { + callback(); + } + } + + // Get image source location, mostly used for responsive images + function getImageSrc(image) { + // Set default image path from href + var result = image.href; + // If dataset is supported find the most suitable image + if (image.dataset) { + var srcs = []; + // Get all possible image versions depending on the resolution + for (var item in image.dataset) { + if (item.substring(0, 3) === 'at-' && !isNaN(item.substring(3))) { + srcs[item.replace('at-', '')] = image.dataset[item]; + } + } + // Sort resolutions ascending + var keys = Object.keys(srcs).sort(function(a, b) { + return parseInt(a, 10) < parseInt(b, 10) ? -1 : 1; + }); + // Get real screen resolution + var width = window.innerWidth * window.devicePixelRatio; + // Find the first image bigger than or equal to the current width + var i = 0; + while (i < keys.length - 1 && keys[i] < width) { + i++; + } + result = srcs[keys[i]] || result; + } + return result; + } + + // Return false at the right end of the gallery + function showNextImage() { + return show(currentIndex + 1); + } + + // Return false at the left end of the gallery + function showPreviousImage() { + return show(currentIndex - 1); + } + + // Return false at the left end of the gallery + function showFirstImage(event) { + if (event) { + event.preventDefault(); + } + return show(0); + } + + // Return false at the right end of the gallery + function showLastImage(event) { + if (event) { + event.preventDefault(); + } + return show(currentGallery.length - 1); + } + + /** + * Move the gallery to a specific index + * @param `index` {number} - the position of the image + * @param `gallery` {array} - gallery which should be opened, if omitted assumes the currently opened one + * @return {boolean} - true on success or false if the index is invalid + */ + function show(index, gallery) { + if (!isOverlayVisible && index >= 0 && index < gallery.length) { + prepareOverlay(gallery, options); + showOverlay(index); + return true; + } + if (index < 0) { + if (options.animation) { + bounceAnimation('left'); + } + return false; + } + if (index >= imagesElements.length) { + if (options.animation) { + bounceAnimation('right'); + } + return false; + } + + currentIndex = index; + loadImage(currentIndex, function() { + preloadNext(currentIndex); + preloadPrev(currentIndex); + }); + updateOffset(); + + if (options.onChange) { + options.onChange(currentIndex, imagesElements.length); + } + + return true; + } + + /** + * Triggers the bounce animation + * @param {('left'|'right')} direction - Direction of the movement + */ + function bounceAnimation(direction) { + slider.className = 'bounce-from-' + direction; + setTimeout(function() { + slider.className = ''; + }, 400); + } + + function updateOffset() { + var offset = -currentIndex * 100 + '%'; + if (options.animation === 'fadeIn') { + slider.style.opacity = 0; + setTimeout(function() { + supports.transforms ? + slider.style.transform = slider.style.webkitTransform = 'translate3d(' + offset + ',0,0)' + : slider.style.left = offset; + slider.style.opacity = 1; + }, 400); + } else { + supports.transforms ? + slider.style.transform = slider.style.webkitTransform = 'translate3d(' + offset + ',0,0)' + : slider.style.left = offset; + } + } + + // CSS 3D Transforms test + function testTransformsSupport() { + var div = create('div'); + return typeof div.style.perspective !== 'undefined' || typeof div.style.webkitPerspective !== 'undefined'; + } + + // Inline SVG test + function testSvgSupport() { + var div = create('div'); + div.innerHTML = '<svg/>'; + return (div.firstChild && div.firstChild.namespaceURI) === 'http://www.w3.org/2000/svg'; + } + + // Borrowed from https://github.com/seiyria/bootstrap-slider/pull/680/files + /* eslint-disable getter-return */ + function testPassiveEventsSupport() { + var passiveEvents = false; + try { + var opts = Object.defineProperty({}, 'passive', { + get: function() { + passiveEvents = true; + } + }); + window.addEventListener('test', null, opts); + } catch (e) { /* Silence the error and continue */ } + + return passiveEvents; + } + /* eslint-enable getter-return */ + + function preloadNext(index) { + if (index - currentIndex >= options.preload) { + return; + } + loadImage(index + 1, function() { + preloadNext(index + 1); + }); + } + + function preloadPrev(index) { + if (currentIndex - index >= options.preload) { + return; + } + loadImage(index - 1, function() { + preloadPrev(index - 1); + }); + } + + function bind(element, event, callback, options) { + if (element.addEventListener) { + element.addEventListener(event, callback, options); + } else { + // IE8 fallback + element.attachEvent('on' + event, function(event) { + // `event` and `event.target` are not provided in IE8 + event = event || window.event; + event.target = event.target || event.srcElement; + callback(event); + }); + } + } + + function unbind(element, event, callback, options) { + if (element.removeEventListener) { + element.removeEventListener(event, callback, options); + } else { + // IE8 fallback + element.detachEvent('on' + event, callback); + } + } + + function getByID(id) { + return document.getElementById(id); + } + + function create(element) { + return document.createElement(element); + } + + function destroyPlugin() { + unbindEvents(); + clearCachedData(); + unbind(document, 'keydown', keyDownHandler); + document.getElementsByTagName('body')[0].removeChild(document.getElementById('baguetteBox-overlay')); + data = {}; + currentGallery = []; + currentIndex = 0; + } + + return { + run: run, + show: show, + showNext: showNextImage, + showPrevious: showPreviousImage, + hide: hideOverlay, + destroy: destroyPlugin + }; +})); diff --git a/npm_assets/node_modules/baguettebox.js/dist/baguetteBox.min.css b/npm_assets/node_modules/baguettebox.js/dist/baguetteBox.min.css new file mode 100644 index 0000000..f1c5ca9 --- /dev/null +++ b/npm_assets/node_modules/baguettebox.js/dist/baguetteBox.min.css @@ -0,0 +1,6 @@ +/*! + * baguetteBox.js + * @author feimosi + * @version 1.11.1 + * @url https://github.com/feimosi/baguetteBox.js + */#baguetteBox-overlay{display:none;opacity:0;position:fixed;overflow:hidden;top:0;left:0;width:100%;height:100%;z-index:1000000;background-color:#222;background-color:rgba(0,0,0,.8);-webkit-transition:opacity .5s ease;transition:opacity .5s ease}#baguetteBox-overlay.visible{opacity:1}#baguetteBox-overlay .full-image{display:inline-block;position:relative;width:100%;height:100%;text-align:center}#baguetteBox-overlay .full-image figure{display:inline;margin:0;height:100%}#baguetteBox-overlay .full-image img{display:inline-block;width:auto;height:auto;max-height:100%;max-width:100%;vertical-align:middle;-webkit-box-shadow:0 0 8px rgba(0,0,0,.6);-moz-box-shadow:0 0 8px rgba(0,0,0,.6);box-shadow:0 0 8px rgba(0,0,0,.6)}#baguetteBox-overlay .full-image figcaption{display:block;position:absolute;bottom:0;width:100%;text-align:center;line-height:1.8;white-space:normal;color:#ccc;background-color:#000;background-color:rgba(0,0,0,.6);font-family:sans-serif}#baguetteBox-overlay .full-image:before{content:"";display:inline-block;height:50%;width:1px;margin-right:-1px}#baguetteBox-slider{position:absolute;left:0;top:0;height:100%;width:100%;white-space:nowrap;-webkit-transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,transform .4s ease;transition:left .4s ease,transform .4s ease,-webkit-transform .4s ease,-moz-transform .4s ease}#baguetteBox-slider.bounce-from-right{-webkit-animation:bounceFromRight .4s ease-out;animation:bounceFromRight .4s ease-out}#baguetteBox-slider.bounce-from-left{-webkit-animation:bounceFromLeft .4s ease-out;animation:bounceFromLeft .4s ease-out}@-webkit-keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@-webkit-keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}@keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}.baguetteBox-button#next-button,.baguetteBox-button#previous-button{top:50%;top:calc(50% - 30px);width:44px;height:60px}.baguetteBox-button{position:absolute;cursor:pointer;outline:0;padding:0;margin:0;border:0;-moz-border-radius:15%;border-radius:15%;background-color:#323232;background-color:rgba(50,50,50,.5);color:#ddd;font:1.6em sans-serif;-webkit-transition:background-color .4s ease;transition:background-color .4s ease}.baguetteBox-button:focus,.baguetteBox-button:hover{background-color:rgba(50,50,50,.9)}.baguetteBox-button#next-button{right:2%}.baguetteBox-button#previous-button{left:2%}.baguetteBox-button#close-button{top:20px;right:2%;right:calc(2% + 6px);width:30px;height:30px}.baguetteBox-button svg{position:absolute;left:0;top:0}.baguetteBox-spinner{width:40px;height:40px;display:inline-block;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px}.baguetteBox-double-bounce1,.baguetteBox-double-bounce2{width:100%;height:100%;-moz-border-radius:50%;border-radius:50%;background-color:#fff;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:bounce 2s infinite ease-in-out;animation:bounce 2s infinite ease-in-out}.baguetteBox-double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounce{0%,100%{-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}}
\ No newline at end of file diff --git a/npm_assets/node_modules/baguettebox.js/dist/baguetteBox.min.js b/npm_assets/node_modules/baguettebox.js/dist/baguetteBox.min.js new file mode 100644 index 0000000..6af785d --- /dev/null +++ b/npm_assets/node_modules/baguettebox.js/dist/baguetteBox.min.js @@ -0,0 +1,7 @@ +/*! + * baguetteBox.js + * @author feimosi + * @version 1.11.1 + * @url https://github.com/feimosi/baguetteBox.js + */ +!function(e,t){"use strict";"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t():e.baguetteBox=t()}(this,function(){"use strict";var e,t,n,o,i,a='<svg width="44" height="60"><polyline points="30 10 10 30 30 50" stroke="rgba(255,255,255,0.5)" stroke-width="4"stroke-linecap="butt" fill="none" stroke-linejoin="round"/></svg>',s='<svg width="44" height="60"><polyline points="14 10 34 30 14 50" stroke="rgba(255,255,255,0.5)" stroke-width="4"stroke-linecap="butt" fill="none" stroke-linejoin="round"/></svg>',l='<svg width="30" height="30"><g stroke="rgb(160,160,160)" stroke-width="4"><line x1="5" y1="5" x2="25" y2="25"/><line x1="5" y1="25" x2="25" y2="5"/></g></svg>',r={},u={captions:!0,buttons:"auto",fullScreen:!1,noScrollbars:!1,bodyClass:"baguetteBox-open",titleTag:!1,async:!1,preload:2,animation:"slideIn",afterShow:null,afterHide:null,onChange:null,overlayBackgroundColor:"rgba(0,0,0,.8)"},c={},d=[],f=0,g=!1,p={},m=!1,b=/.+\.(gif|jpe?g|png|webp)/i,v={},h=[],y=null,w=function(e){-1!==e.target.id.indexOf("baguette-img")&&I()},k=function(e){e.stopPropagation?e.stopPropagation():e.cancelBubble=!0,q()},E=function(e){e.stopPropagation?e.stopPropagation():e.cancelBubble=!0,j()},x=function(e){e.stopPropagation?e.stopPropagation():e.cancelBubble=!0,I()},C=function(e){p.count++,p.count>1&&(p.multitouch=!0),p.startX=e.changedTouches[0].pageX,p.startY=e.changedTouches[0].pageY},B=function(e){if(!m&&!p.multitouch){e.preventDefault?e.preventDefault():e.returnValue=!1;var t=e.touches[0]||e.changedTouches[0];t.pageX-p.startX>40?(m=!0,q()):t.pageX-p.startX<-40?(m=!0,j()):p.startY-t.pageY>100&&I()}},T=function(){p.count--,p.count<=0&&(p.multitouch=!1),m=!1},N=function(){T()},L=function(t){"block"===e.style.display&&e.contains&&!e.contains(t.target)&&(t.stopPropagation(),H())};function A(e){if(v.hasOwnProperty(e)){var t=v[e].galleries;[].forEach.call(t,function(e){[].forEach.call(e,function(e){V(e.imageElement,"click",e.eventHandler)}),d===e&&(d=[])}),delete v[e]}}function P(e){switch(e.keyCode){case 37:q();break;case 39:j();break;case 27:I();break;case 36:!function(e){e&&e.preventDefault();X(0)}(e);break;case 35:!function(e){e&&e.preventDefault();X(d.length-1)}(e)}}function S(i,a){if(d!==i){for(d=i,function(i){i||(i={});for(var a in u)r[a]=u[a],"undefined"!=typeof i[a]&&(r[a]=i[a]);t.style.transition=t.style.webkitTransition="fadeIn"===r.animation?"opacity .4s ease":"slideIn"===r.animation?"":"none","auto"===r.buttons&&("ontouchstart"in window||1===d.length)&&(r.buttons=!1);n.style.display=o.style.display=r.buttons?"":"none";try{e.style.backgroundColor=r.overlayBackgroundColor}catch(e){}}(a);t.firstChild;)t.removeChild(t.firstChild);h.length=0;for(var s,l=[],c=[],f=0;f<i.length;f++)(s=W("div")).className="full-image",s.id="baguette-img-"+f,h.push(s),l.push("baguetteBox-figure-"+f),c.push("baguetteBox-figcaption-"+f),t.appendChild(h[f]);e.setAttribute("aria-labelledby",l.join(" ")),e.setAttribute("aria-describedby",c.join(" "))}}function F(t){r.noScrollbars&&(document.documentElement.style.overflowY="hidden",document.body.style.overflowY="scroll"),"block"!==e.style.display&&(z(document,"keydown",P),p={count:0,startX:null,startY:null},Y(f=t,function(){O(f),R(f)}),M(),e.style.display="block",r.fullScreen&&(e.requestFullscreen?e.requestFullscreen():e.webkitRequestFullscreen?e.webkitRequestFullscreen():e.mozRequestFullScreen&&e.mozRequestFullScreen()),setTimeout(function(){e.className="visible",r.bodyClass&&document.body.classList&&document.body.classList.add(r.bodyClass),r.afterShow&&r.afterShow()},50),r.onChange&&r.onChange(f,h.length),y=document.activeElement,H(),g=!0)}function H(){r.buttons?n.focus():i.focus()}function I(){r.noScrollbars&&(document.documentElement.style.overflowY="auto",document.body.style.overflowY="auto"),"none"!==e.style.display&&(V(document,"keydown",P),e.className="",setTimeout(function(){e.style.display="none",document.fullscreen&&(document.exitFullscreen?document.exitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen&&document.webkitExitFullscreen()),r.bodyClass&&document.body.classList&&document.body.classList.remove(r.bodyClass),r.afterHide&&r.afterHide(),y&&y.focus(),g=!1},500))}function Y(e,t){var n=h[e],o=d[e];if(void 0!==n&&void 0!==o)if(n.getElementsByTagName("img")[0])t&&t();else{var i=o.imageElement,a=i.getElementsByTagName("img")[0],s="function"==typeof r.captions?r.captions.call(d,i):i.getAttribute("data-caption")||i.title,l=function(e){var t=e.href;if(e.dataset){var n=[];for(var o in e.dataset)"at-"!==o.substring(0,3)||isNaN(o.substring(3))||(n[o.replace("at-","")]=e.dataset[o]);for(var i=Object.keys(n).sort(function(e,t){return parseInt(e,10)<parseInt(t,10)?-1:1}),a=window.innerWidth*window.devicePixelRatio,s=0;s<i.length-1&&i[s]<a;)s++;t=n[i[s]]||t}return t}(i),u=W("figure");if(u.id="baguetteBox-figure-"+e,u.innerHTML='<div class="baguetteBox-spinner"><div class="baguetteBox-double-bounce1"></div><div class="baguetteBox-double-bounce2"></div></div>',r.captions&&s){var c=W("figcaption");c.id="baguetteBox-figcaption-"+e,c.innerHTML=s,u.appendChild(c)}n.appendChild(u);var f=W("img");f.onload=function(){var n=document.querySelector("#baguette-img-"+e+" .baguetteBox-spinner");u.removeChild(n),!r.async&&t&&t()},f.setAttribute("src",l),f.alt=a&&a.alt||"",r.titleTag&&s&&(f.title=s),u.appendChild(f),r.async&&t&&t()}}function j(){return X(f+1)}function q(){return X(f-1)}function X(e,t){return!g&&e>=0&&e<t.length?(S(t,r),F(e),!0):e<0?(r.animation&&D("left"),!1):e>=h.length?(r.animation&&D("right"),!1):(Y(f=e,function(){O(f),R(f)}),M(),r.onChange&&r.onChange(f,h.length),!0)}function D(e){t.className="bounce-from-"+e,setTimeout(function(){t.className=""},400)}function M(){var e=100*-f+"%";"fadeIn"===r.animation?(t.style.opacity=0,setTimeout(function(){c.transforms?t.style.transform=t.style.webkitTransform="translate3d("+e+",0,0)":t.style.left=e,t.style.opacity=1},400)):c.transforms?t.style.transform=t.style.webkitTransform="translate3d("+e+",0,0)":t.style.left=e}function O(e){e-f>=r.preload||Y(e+1,function(){O(e+1)})}function R(e){f-e>=r.preload||Y(e-1,function(){R(e-1)})}function z(e,t,n,o){e.addEventListener?e.addEventListener(t,n,o):e.attachEvent("on"+t,function(e){(e=e||window.event).target=e.target||e.srcElement,n(e)})}function V(e,t,n,o){e.removeEventListener?e.removeEventListener(t,n,o):e.detachEvent("on"+t,n)}function U(e){return document.getElementById(e)}function W(e){return document.createElement(e)}return[].forEach||(Array.prototype.forEach=function(e,t){for(var n=0;n<this.length;n++)e.call(t,this[n],n,this)}),[].filter||(Array.prototype.filter=function(e,t,n,o,i){for(n=this,o=[],i=0;i<n.length;i++)e.call(t,n[i],i,n)&&o.push(n[i]);return o}),{run:function(r,u){var d;return c.transforms="undefined"!=typeof(d=W("div")).style.perspective||"undefined"!=typeof d.style.webkitPerspective,c.svg=function(){var e=W("div");return e.innerHTML="<svg/>","http://www.w3.org/2000/svg"===(e.firstChild&&e.firstChild.namespaceURI)}(),c.passiveEvents=function(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t)}catch(e){}return e}(),function(){if(e=U("baguetteBox-overlay"))return t=U("baguetteBox-slider"),n=U("previous-button"),o=U("next-button"),void(i=U("close-button"));var r,u;(e=W("div")).setAttribute("role","dialog"),e.id="baguetteBox-overlay",document.getElementsByTagName("body")[0].appendChild(e),(t=W("div")).id="baguetteBox-slider",e.appendChild(t),(n=W("button")).setAttribute("type","button"),n.id="previous-button",n.setAttribute("aria-label","Previous"),n.innerHTML=c.svg?a:"<",e.appendChild(n),(o=W("button")).setAttribute("type","button"),o.id="next-button",o.setAttribute("aria-label","Next"),o.innerHTML=c.svg?s:">",e.appendChild(o),(i=W("button")).setAttribute("type","button"),i.id="close-button",i.setAttribute("aria-label","Close"),i.innerHTML=c.svg?l:"×",e.appendChild(i),n.className=o.className=i.className="baguetteBox-button",r=c.passiveEvents?{passive:!1}:null,u=c.passiveEvents?{passive:!0}:null,z(e,"click",w),z(n,"click",k),z(o,"click",E),z(i,"click",x),z(t,"contextmenu",N),z(e,"touchstart",C,u),z(e,"touchmove",B,r),z(e,"touchend",T),z(document,"focus",L,!0)}(),A(r),function(e,t){var n=document.querySelectorAll(e),o={galleries:[],nodeList:n};return v[e]=o,[].forEach.call(n,function(e){t&&t.filter&&(b=t.filter);var n=[];if(n="A"===e.tagName?[e]:e.getElementsByTagName("a"),0!==(n=[].filter.call(n,function(e){if(-1===e.className.indexOf(t&&t.ignoreClass)&&e.getElementsByTagName("img").length>0)return b.test(e.href)})).length){var i=[];[].forEach.call(n,function(e,n){var o=function(e){e.preventDefault?e.preventDefault():e.returnValue=!1,S(i,t),F(n)},a={eventHandler:o,imageElement:e};z(e,"click",o),i.push(a)}),o.galleries.push(i)}}),o.galleries}(r,u)},show:X,showNext:j,showPrevious:q,hide:I,destroy:function(){var a,s;a=c.passiveEvents?{passive:!1}:null,s=c.passiveEvents?{passive:!0}:null,V(e,"click",w),V(n,"click",k),V(o,"click",E),V(i,"click",x),V(t,"contextmenu",N),V(e,"touchstart",C,s),V(e,"touchmove",B,a),V(e,"touchend",T),V(document,"focus",L,!0),function(){for(var e in v)v.hasOwnProperty(e)&&A(e)}(),V(document,"keydown",P),document.getElementsByTagName("body")[0].removeChild(document.getElementById("baguetteBox-overlay")),v={},d=[],f=0}}});
\ No newline at end of file diff --git a/npm_assets/node_modules/baguettebox.js/package.json b/npm_assets/node_modules/baguettebox.js/package.json new file mode 100644 index 0000000..456de35 --- /dev/null +++ b/npm_assets/node_modules/baguettebox.js/package.json @@ -0,0 +1,85 @@ +{ + "_from": "baguettebox.js@^1.11.0", + "_id": "baguettebox.js@1.11.1", + "_inBundle": false, + "_integrity": "sha512-0HnUVs+xaqwQOVbfi0kwZnZ1fJNWE5vJLCoCAtgQBtPmOJa1fhN8gubaBFOBGDkQy/vz6PWSr7B3WilhQKjyeQ==", + "_location": "/baguettebox.js", + "_phantomChildren": {}, + "_requested": { + "type": "range", + "registry": true, + "raw": "baguettebox.js@^1.11.0", + "name": "baguettebox.js", + "escapedName": "baguettebox.js", + "rawSpec": "^1.11.0", + "saveSpec": null, + "fetchSpec": "^1.11.0" + }, + "_requiredBy": [ + "/" + ], + "_resolved": "https://registry.npmjs.org/baguettebox.js/-/baguettebox.js-1.11.1.tgz", + "_shasum": "0a7f586e9e9bbfd3df1022a280fdcfcac6797fb7", + "_spec": "baguettebox.js@^1.11.0", + "_where": "/Users/kwpolska/git/nikola/npm_assets", + "author": { + "name": "feimosi" + }, + "bugs": { + "url": "https://github.com/feimosi/baguetteBox.js/issues" + }, + "bundleDependencies": false, + "dependencies": {}, + "deprecated": false, + "description": "Simple and easy to use lightbox script written in pure JavaScript", + "devDependencies": { + "browser-sync": "^2.26.7", + "gulp": "^3.9.1", + "gulp-autoprefixer": "^6.1.0", + "gulp-bump": "^3.1.3", + "gulp-concat": "^2.6.1", + "gulp-cssmin": "~0.2.0", + "gulp-eslint": "^5.0.0", + "gulp-gh-pages": "~0.5.4", + "gulp-if": "^2.0.2", + "gulp-inject-version": "^1.0.1", + "gulp-load-plugins": "^2.0.2", + "gulp-rimraf": "~0.2.2", + "gulp-sass": "^4.0.2", + "gulp-uglify": "^3.0.2", + "gulp-usemin": "~0.3.30", + "jsonfile": "^6.0.1", + "run-sequence": "^2.2.1" + }, + "files": [ + "dist", + "src" + ], + "homepage": "https://github.com/feimosi/baguetteBox.js", + "keywords": [ + "lightbox", + "gallery", + "modal", + "responsive" + ], + "license": "MIT", + "main": "dist/baguetteBox.min.js", + "name": "baguettebox.js", + "repository": { + "type": "git", + "url": "git+https://github.com/feimosi/baguetteBox.js.git" + }, + "resolutions": { + "natives": "1.1.3" + }, + "scripts": { + "build": "gulp build", + "lint": "gulp lint", + "patch": "gulp patch", + "release": "gulp release", + "start": "gulp", + "test": "gulp test" + }, + "style": "dist/baguetteBox.min.css", + "version": "1.11.1" +} diff --git a/npm_assets/node_modules/baguettebox.js/src/baguetteBox.js b/npm_assets/node_modules/baguettebox.js/src/baguetteBox.js new file mode 100644 index 0000000..71c642a --- /dev/null +++ b/npm_assets/node_modules/baguettebox.js/src/baguetteBox.js @@ -0,0 +1,793 @@ +/*! + * baguetteBox.js + * @author feimosi + * @version %%INJECT_VERSION%% + * @url https://github.com/feimosi/baguetteBox.js + */ + +/* global define, module */ + +(function (root, factory) { + 'use strict'; + if (typeof define === 'function' && define.amd) { + define(factory); + } else if (typeof exports === 'object') { + module.exports = factory(); + } else { + root.baguetteBox = factory(); + } +}(this, function () { + 'use strict'; + + // SVG shapes used on the buttons + var leftArrow = '<svg width="44" height="60">' + + '<polyline points="30 10 10 30 30 50" stroke="rgba(255,255,255,0.5)" stroke-width="4"' + + 'stroke-linecap="butt" fill="none" stroke-linejoin="round"/>' + + '</svg>', + rightArrow = '<svg width="44" height="60">' + + '<polyline points="14 10 34 30 14 50" stroke="rgba(255,255,255,0.5)" stroke-width="4"' + + 'stroke-linecap="butt" fill="none" stroke-linejoin="round"/>' + + '</svg>', + closeX = '<svg width="30" height="30">' + + '<g stroke="rgb(160,160,160)" stroke-width="4">' + + '<line x1="5" y1="5" x2="25" y2="25"/>' + + '<line x1="5" y1="25" x2="25" y2="5"/>' + + '</g></svg>'; + // Global options and their defaults + var options = {}, + defaults = { + captions: true, + buttons: 'auto', + fullScreen: false, + noScrollbars: false, + bodyClass: 'baguetteBox-open', + titleTag: false, + async: false, + preload: 2, + animation: 'slideIn', + afterShow: null, + afterHide: null, + onChange: null, + overlayBackgroundColor: 'rgba(0,0,0,.8)' + }; + // Object containing information about features compatibility + var supports = {}; + // DOM Elements references + var overlay, slider, previousButton, nextButton, closeButton; + // An array with all images in the current gallery + var currentGallery = []; + // Current image index inside the slider + var currentIndex = 0; + // Visibility of the overlay + var isOverlayVisible = false; + // Touch event start position (for slide gesture) + var touch = {}; + // If set to true ignore touch events because animation was already fired + var touchFlag = false; + // Regex pattern to match image files + var regex = /.+\.(gif|jpe?g|png|webp)/i; + // Object of all used galleries + var data = {}; + // Array containing temporary images DOM elements + var imagesElements = []; + // The last focused element before opening the overlay + var documentLastFocus = null; + var overlayClickHandler = function(event) { + // Close the overlay when user clicks directly on the background + if (event.target.id.indexOf('baguette-img') !== -1) { + hideOverlay(); + } + }; + var previousButtonClickHandler = function(event) { + event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true; // eslint-disable-line no-unused-expressions + showPreviousImage(); + }; + var nextButtonClickHandler = function(event) { + event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true; // eslint-disable-line no-unused-expressions + showNextImage(); + }; + var closeButtonClickHandler = function(event) { + event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true; // eslint-disable-line no-unused-expressions + hideOverlay(); + }; + var touchstartHandler = function(event) { + touch.count++; + if (touch.count > 1) { + touch.multitouch = true; + } + // Save x and y axis position + touch.startX = event.changedTouches[0].pageX; + touch.startY = event.changedTouches[0].pageY; + }; + var touchmoveHandler = function(event) { + // If action was already triggered or multitouch return + if (touchFlag || touch.multitouch) { + return; + } + event.preventDefault ? event.preventDefault() : event.returnValue = false; // eslint-disable-line no-unused-expressions + var touchEvent = event.touches[0] || event.changedTouches[0]; + // Move at least 40 pixels to trigger the action + if (touchEvent.pageX - touch.startX > 40) { + touchFlag = true; + showPreviousImage(); + } else if (touchEvent.pageX - touch.startX < -40) { + touchFlag = true; + showNextImage(); + // Move 100 pixels up to close the overlay + } else if (touch.startY - touchEvent.pageY > 100) { + hideOverlay(); + } + }; + var touchendHandler = function() { + touch.count--; + if (touch.count <= 0) { + touch.multitouch = false; + } + touchFlag = false; + }; + var contextmenuHandler = function() { + touchendHandler(); + }; + + var trapFocusInsideOverlay = function(event) { + if (overlay.style.display === 'block' && (overlay.contains && !overlay.contains(event.target))) { + event.stopPropagation(); + initFocus(); + } + }; + + // forEach polyfill for IE8 + // http://stackoverflow.com/a/14827443/1077846 + /* eslint-disable */ + if (![].forEach) { + Array.prototype.forEach = function(callback, thisArg) { + for (var i = 0; i < this.length; i++) { + callback.call(thisArg, this[i], i, this); + } + }; + } + + // filter polyfill for IE8 + // https://gist.github.com/eliperelman/1031656 + if (![].filter) { + Array.prototype.filter = function(a, b, c, d, e) { + c = this; + d = []; + for (e = 0; e < c.length; e++) + a.call(b, c[e], e, c) && d.push(c[e]); + return d; + }; + } + /* eslint-enable */ + + // Script entry point + function run(selector, userOptions) { + // Fill supports object + supports.transforms = testTransformsSupport(); + supports.svg = testSvgSupport(); + supports.passiveEvents = testPassiveEventsSupport(); + + buildOverlay(); + removeFromCache(selector); + return bindImageClickListeners(selector, userOptions); + } + + function bindImageClickListeners(selector, userOptions) { + // For each gallery bind a click event to every image inside it + var galleryNodeList = document.querySelectorAll(selector); + var selectorData = { + galleries: [], + nodeList: galleryNodeList + }; + data[selector] = selectorData; + + [].forEach.call(galleryNodeList, function(galleryElement) { + if (userOptions && userOptions.filter) { + regex = userOptions.filter; + } + + // Get nodes from gallery elements or single-element galleries + var tagsNodeList = []; + if (galleryElement.tagName === 'A') { + tagsNodeList = [galleryElement]; + } else { + tagsNodeList = galleryElement.getElementsByTagName('a'); + } + + // Filter 'a' elements from those not linking to images + tagsNodeList = [].filter.call(tagsNodeList, function(element) { + if (element.className.indexOf(userOptions && userOptions.ignoreClass) === -1) { + return regex.test(element.href); + } + }); + if (tagsNodeList.length === 0) { + return; + } + + var gallery = []; + [].forEach.call(tagsNodeList, function(imageElement, imageIndex) { + var imageElementClickHandler = function(event) { + event.preventDefault ? event.preventDefault() : event.returnValue = false; // eslint-disable-line no-unused-expressions + prepareOverlay(gallery, userOptions); + showOverlay(imageIndex); + }; + var imageItem = { + eventHandler: imageElementClickHandler, + imageElement: imageElement + }; + bind(imageElement, 'click', imageElementClickHandler); + gallery.push(imageItem); + }); + selectorData.galleries.push(gallery); + }); + + return selectorData.galleries; + } + + function clearCachedData() { + for (var selector in data) { + if (data.hasOwnProperty(selector)) { + removeFromCache(selector); + } + } + } + + function removeFromCache(selector) { + if (!data.hasOwnProperty(selector)) { + return; + } + var galleries = data[selector].galleries; + [].forEach.call(galleries, function(gallery) { + [].forEach.call(gallery, function(imageItem) { + unbind(imageItem.imageElement, 'click', imageItem.eventHandler); + }); + + if (currentGallery === gallery) { + currentGallery = []; + } + }); + + delete data[selector]; + } + + function buildOverlay() { + overlay = getByID('baguetteBox-overlay'); + // Check if the overlay already exists + if (overlay) { + slider = getByID('baguetteBox-slider'); + previousButton = getByID('previous-button'); + nextButton = getByID('next-button'); + closeButton = getByID('close-button'); + return; + } + // Create overlay element + overlay = create('div'); + overlay.setAttribute('role', 'dialog'); + overlay.id = 'baguetteBox-overlay'; + document.getElementsByTagName('body')[0].appendChild(overlay); + // Create gallery slider element + slider = create('div'); + slider.id = 'baguetteBox-slider'; + overlay.appendChild(slider); + // Create all necessary buttons + previousButton = create('button'); + previousButton.setAttribute('type', 'button'); + previousButton.id = 'previous-button'; + previousButton.setAttribute('aria-label', 'Previous'); + previousButton.innerHTML = supports.svg ? leftArrow : '<'; + overlay.appendChild(previousButton); + + nextButton = create('button'); + nextButton.setAttribute('type', 'button'); + nextButton.id = 'next-button'; + nextButton.setAttribute('aria-label', 'Next'); + nextButton.innerHTML = supports.svg ? rightArrow : '>'; + overlay.appendChild(nextButton); + + closeButton = create('button'); + closeButton.setAttribute('type', 'button'); + closeButton.id = 'close-button'; + closeButton.setAttribute('aria-label', 'Close'); + closeButton.innerHTML = supports.svg ? closeX : '×'; + overlay.appendChild(closeButton); + + previousButton.className = nextButton.className = closeButton.className = 'baguetteBox-button'; + + bindEvents(); + } + + function keyDownHandler(event) { + switch (event.keyCode) { + case 37: // Left arrow + showPreviousImage(); + break; + case 39: // Right arrow + showNextImage(); + break; + case 27: // Esc + hideOverlay(); + break; + case 36: // Home + showFirstImage(event); + break; + case 35: // End + showLastImage(event); + break; + } + } + + function bindEvents() { + var passiveEvent = supports.passiveEvents ? { passive: false } : null; + var nonPassiveEvent = supports.passiveEvents ? { passive: true } : null; + + bind(overlay, 'click', overlayClickHandler); + bind(previousButton, 'click', previousButtonClickHandler); + bind(nextButton, 'click', nextButtonClickHandler); + bind(closeButton, 'click', closeButtonClickHandler); + bind(slider, 'contextmenu', contextmenuHandler); + bind(overlay, 'touchstart', touchstartHandler, nonPassiveEvent); + bind(overlay, 'touchmove', touchmoveHandler, passiveEvent); + bind(overlay, 'touchend', touchendHandler); + bind(document, 'focus', trapFocusInsideOverlay, true); + } + + function unbindEvents() { + var passiveEvent = supports.passiveEvents ? { passive: false } : null; + var nonPassiveEvent = supports.passiveEvents ? { passive: true } : null; + + unbind(overlay, 'click', overlayClickHandler); + unbind(previousButton, 'click', previousButtonClickHandler); + unbind(nextButton, 'click', nextButtonClickHandler); + unbind(closeButton, 'click', closeButtonClickHandler); + unbind(slider, 'contextmenu', contextmenuHandler); + unbind(overlay, 'touchstart', touchstartHandler, nonPassiveEvent); + unbind(overlay, 'touchmove', touchmoveHandler, passiveEvent); + unbind(overlay, 'touchend', touchendHandler); + unbind(document, 'focus', trapFocusInsideOverlay, true); + } + + function prepareOverlay(gallery, userOptions) { + // If the same gallery is being opened prevent from loading it once again + if (currentGallery === gallery) { + return; + } + currentGallery = gallery; + // Update gallery specific options + setOptions(userOptions); + // Empty slider of previous contents (more effective than .innerHTML = "") + while (slider.firstChild) { + slider.removeChild(slider.firstChild); + } + imagesElements.length = 0; + + var imagesFiguresIds = []; + var imagesCaptionsIds = []; + // Prepare and append images containers and populate figure and captions IDs arrays + for (var i = 0, fullImage; i < gallery.length; i++) { + fullImage = create('div'); + fullImage.className = 'full-image'; + fullImage.id = 'baguette-img-' + i; + imagesElements.push(fullImage); + + imagesFiguresIds.push('baguetteBox-figure-' + i); + imagesCaptionsIds.push('baguetteBox-figcaption-' + i); + slider.appendChild(imagesElements[i]); + } + overlay.setAttribute('aria-labelledby', imagesFiguresIds.join(' ')); + overlay.setAttribute('aria-describedby', imagesCaptionsIds.join(' ')); + } + + function setOptions(newOptions) { + if (!newOptions) { + newOptions = {}; + } + // Fill options object + for (var item in defaults) { + options[item] = defaults[item]; + if (typeof newOptions[item] !== 'undefined') { + options[item] = newOptions[item]; + } + } + /* Apply new options */ + // Change transition for proper animation + slider.style.transition = slider.style.webkitTransition = (options.animation === 'fadeIn' ? 'opacity .4s ease' : + options.animation === 'slideIn' ? '' : 'none'); + // Hide buttons if necessary + if (options.buttons === 'auto' && ('ontouchstart' in window || currentGallery.length === 1)) { + options.buttons = false; + } + // Set buttons style to hide or display them + previousButton.style.display = nextButton.style.display = (options.buttons ? '' : 'none'); + // Set overlay color + try { + overlay.style.backgroundColor = options.overlayBackgroundColor; + } catch (e) { + // Silence the error and continue + } + } + + function showOverlay(chosenImageIndex) { + if (options.noScrollbars) { + document.documentElement.style.overflowY = 'hidden'; + document.body.style.overflowY = 'scroll'; + } + if (overlay.style.display === 'block') { + return; + } + + bind(document, 'keydown', keyDownHandler); + currentIndex = chosenImageIndex; + touch = { + count: 0, + startX: null, + startY: null + }; + loadImage(currentIndex, function() { + preloadNext(currentIndex); + preloadPrev(currentIndex); + }); + + updateOffset(); + overlay.style.display = 'block'; + if (options.fullScreen) { + enterFullScreen(); + } + // Fade in overlay + setTimeout(function() { + overlay.className = 'visible'; + if (options.bodyClass && document.body.classList) { + document.body.classList.add(options.bodyClass); + } + if (options.afterShow) { + options.afterShow(); + } + }, 50); + if (options.onChange) { + options.onChange(currentIndex, imagesElements.length); + } + documentLastFocus = document.activeElement; + initFocus(); + isOverlayVisible = true; + } + + function initFocus() { + if (options.buttons) { + previousButton.focus(); + } else { + closeButton.focus(); + } + } + + function enterFullScreen() { + if (overlay.requestFullscreen) { + overlay.requestFullscreen(); + } else if (overlay.webkitRequestFullscreen) { + overlay.webkitRequestFullscreen(); + } else if (overlay.mozRequestFullScreen) { + overlay.mozRequestFullScreen(); + } + } + + function exitFullscreen() { + if (document.exitFullscreen) { + document.exitFullscreen(); + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } else if (document.webkitExitFullscreen) { + document.webkitExitFullscreen(); + } + } + + function hideOverlay() { + if (options.noScrollbars) { + document.documentElement.style.overflowY = 'auto'; + document.body.style.overflowY = 'auto'; + } + if (overlay.style.display === 'none') { + return; + } + + unbind(document, 'keydown', keyDownHandler); + // Fade out and hide the overlay + overlay.className = ''; + setTimeout(function() { + overlay.style.display = 'none'; + if (document.fullscreen) { + exitFullscreen(); + } + if (options.bodyClass && document.body.classList) { + document.body.classList.remove(options.bodyClass); + } + if (options.afterHide) { + options.afterHide(); + } + documentLastFocus && documentLastFocus.focus(); + isOverlayVisible = false; + }, 500); + } + + function loadImage(index, callback) { + var imageContainer = imagesElements[index]; + var galleryItem = currentGallery[index]; + + // Return if the index exceeds prepared images in the overlay + // or if the current gallery has been changed / closed + if (typeof imageContainer === 'undefined' || typeof galleryItem === 'undefined') { + return; + } + + // If image is already loaded run callback and return + if (imageContainer.getElementsByTagName('img')[0]) { + if (callback) { + callback(); + } + return; + } + + // Get element reference, optional caption and source path + var imageElement = galleryItem.imageElement; + var thumbnailElement = imageElement.getElementsByTagName('img')[0]; + var imageCaption = typeof options.captions === 'function' ? + options.captions.call(currentGallery, imageElement) : + imageElement.getAttribute('data-caption') || imageElement.title; + var imageSrc = getImageSrc(imageElement); + + // Prepare figure element + var figure = create('figure'); + figure.id = 'baguetteBox-figure-' + index; + figure.innerHTML = '<div class="baguetteBox-spinner">' + + '<div class="baguetteBox-double-bounce1"></div>' + + '<div class="baguetteBox-double-bounce2"></div>' + + '</div>'; + // Insert caption if available + if (options.captions && imageCaption) { + var figcaption = create('figcaption'); + figcaption.id = 'baguetteBox-figcaption-' + index; + figcaption.innerHTML = imageCaption; + figure.appendChild(figcaption); + } + imageContainer.appendChild(figure); + + // Prepare gallery img element + var image = create('img'); + image.onload = function() { + // Remove loader element + var spinner = document.querySelector('#baguette-img-' + index + ' .baguetteBox-spinner'); + figure.removeChild(spinner); + if (!options.async && callback) { + callback(); + } + }; + image.setAttribute('src', imageSrc); + image.alt = thumbnailElement ? thumbnailElement.alt || '' : ''; + if (options.titleTag && imageCaption) { + image.title = imageCaption; + } + figure.appendChild(image); + + // Run callback + if (options.async && callback) { + callback(); + } + } + + // Get image source location, mostly used for responsive images + function getImageSrc(image) { + // Set default image path from href + var result = image.href; + // If dataset is supported find the most suitable image + if (image.dataset) { + var srcs = []; + // Get all possible image versions depending on the resolution + for (var item in image.dataset) { + if (item.substring(0, 3) === 'at-' && !isNaN(item.substring(3))) { + srcs[item.replace('at-', '')] = image.dataset[item]; + } + } + // Sort resolutions ascending + var keys = Object.keys(srcs).sort(function(a, b) { + return parseInt(a, 10) < parseInt(b, 10) ? -1 : 1; + }); + // Get real screen resolution + var width = window.innerWidth * window.devicePixelRatio; + // Find the first image bigger than or equal to the current width + var i = 0; + while (i < keys.length - 1 && keys[i] < width) { + i++; + } + result = srcs[keys[i]] || result; + } + return result; + } + + // Return false at the right end of the gallery + function showNextImage() { + return show(currentIndex + 1); + } + + // Return false at the left end of the gallery + function showPreviousImage() { + return show(currentIndex - 1); + } + + // Return false at the left end of the gallery + function showFirstImage(event) { + if (event) { + event.preventDefault(); + } + return show(0); + } + + // Return false at the right end of the gallery + function showLastImage(event) { + if (event) { + event.preventDefault(); + } + return show(currentGallery.length - 1); + } + + /** + * Move the gallery to a specific index + * @param `index` {number} - the position of the image + * @param `gallery` {array} - gallery which should be opened, if omitted assumes the currently opened one + * @return {boolean} - true on success or false if the index is invalid + */ + function show(index, gallery) { + if (!isOverlayVisible && index >= 0 && index < gallery.length) { + prepareOverlay(gallery, options); + showOverlay(index); + return true; + } + if (index < 0) { + if (options.animation) { + bounceAnimation('left'); + } + return false; + } + if (index >= imagesElements.length) { + if (options.animation) { + bounceAnimation('right'); + } + return false; + } + + currentIndex = index; + loadImage(currentIndex, function() { + preloadNext(currentIndex); + preloadPrev(currentIndex); + }); + updateOffset(); + + if (options.onChange) { + options.onChange(currentIndex, imagesElements.length); + } + + return true; + } + + /** + * Triggers the bounce animation + * @param {('left'|'right')} direction - Direction of the movement + */ + function bounceAnimation(direction) { + slider.className = 'bounce-from-' + direction; + setTimeout(function() { + slider.className = ''; + }, 400); + } + + function updateOffset() { + var offset = -currentIndex * 100 + '%'; + if (options.animation === 'fadeIn') { + slider.style.opacity = 0; + setTimeout(function() { + supports.transforms ? + slider.style.transform = slider.style.webkitTransform = 'translate3d(' + offset + ',0,0)' + : slider.style.left = offset; + slider.style.opacity = 1; + }, 400); + } else { + supports.transforms ? + slider.style.transform = slider.style.webkitTransform = 'translate3d(' + offset + ',0,0)' + : slider.style.left = offset; + } + } + + // CSS 3D Transforms test + function testTransformsSupport() { + var div = create('div'); + return typeof div.style.perspective !== 'undefined' || typeof div.style.webkitPerspective !== 'undefined'; + } + + // Inline SVG test + function testSvgSupport() { + var div = create('div'); + div.innerHTML = '<svg/>'; + return (div.firstChild && div.firstChild.namespaceURI) === 'http://www.w3.org/2000/svg'; + } + + // Borrowed from https://github.com/seiyria/bootstrap-slider/pull/680/files + /* eslint-disable getter-return */ + function testPassiveEventsSupport() { + var passiveEvents = false; + try { + var opts = Object.defineProperty({}, 'passive', { + get: function() { + passiveEvents = true; + } + }); + window.addEventListener('test', null, opts); + } catch (e) { /* Silence the error and continue */ } + + return passiveEvents; + } + /* eslint-enable getter-return */ + + function preloadNext(index) { + if (index - currentIndex >= options.preload) { + return; + } + loadImage(index + 1, function() { + preloadNext(index + 1); + }); + } + + function preloadPrev(index) { + if (currentIndex - index >= options.preload) { + return; + } + loadImage(index - 1, function() { + preloadPrev(index - 1); + }); + } + + function bind(element, event, callback, options) { + if (element.addEventListener) { + element.addEventListener(event, callback, options); + } else { + // IE8 fallback + element.attachEvent('on' + event, function(event) { + // `event` and `event.target` are not provided in IE8 + event = event || window.event; + event.target = event.target || event.srcElement; + callback(event); + }); + } + } + + function unbind(element, event, callback, options) { + if (element.removeEventListener) { + element.removeEventListener(event, callback, options); + } else { + // IE8 fallback + element.detachEvent('on' + event, callback); + } + } + + function getByID(id) { + return document.getElementById(id); + } + + function create(element) { + return document.createElement(element); + } + + function destroyPlugin() { + unbindEvents(); + clearCachedData(); + unbind(document, 'keydown', keyDownHandler); + document.getElementsByTagName('body')[0].removeChild(document.getElementById('baguetteBox-overlay')); + data = {}; + currentGallery = []; + currentIndex = 0; + } + + return { + run: run, + show: show, + showNext: showNextImage, + showPrevious: showPreviousImage, + hide: hideOverlay, + destroy: destroyPlugin + }; +})); diff --git a/npm_assets/node_modules/baguettebox.js/src/baguetteBox.scss b/npm_assets/node_modules/baguettebox.js/src/baguetteBox.scss new file mode 100644 index 0000000..5fa0760 --- /dev/null +++ b/npm_assets/node_modules/baguettebox.js/src/baguetteBox.scss @@ -0,0 +1,196 @@ +/*! + * baguetteBox.js + * @author feimosi + * @version %%INJECT_VERSION%% + * @url https://github.com/feimosi/baguetteBox.js + */ + +#baguetteBox-overlay { + display: none; + opacity: 0; + position: fixed; + overflow: hidden; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1000000; + background-color: #222; + background-color: rgba(0,0,0,.8); + transition: opacity .5s ease; + + &.visible { + opacity: 1; + } + + .full-image { + display: inline-block; + position: relative; + width: 100%; + height: 100%; + text-align: center; + + figure { + display: inline; + margin: 0; // needed for mobile + height: 100%; // Opera 12 image stretching fix + } + + img { + // IE8 fix + display: inline-block; + width: auto; + height: auto; + + max-height: 100%; + max-width: 100%; + vertical-align: middle; + box-shadow: 0 0 8px rgba(0,0,0,.6); + } + + figcaption { + display: block; + position: absolute; + bottom: 0; + width: 100%; + text-align: center; + line-height: 1.8; + white-space: normal; + color: #ccc; + background-color: #000; + background-color: rgba(0,0,0,.6); + font-family: sans-serif; + } + + &:before { + content: ""; + display: inline-block; + height: 50%; + width: 1px; + margin-right:-1px; + } + } +} + +#baguetteBox-slider { + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; + white-space: nowrap; + transition: left .4s ease, transform .4s ease; + + &.bounce-from-right { + animation: bounceFromRight .4s ease-out; + } + + &.bounce-from-left { + animation: bounceFromLeft .4s ease-out; + } +} + +@keyframes bounceFromRight{ + 0% { margin-left: 0; } + 50% { margin-left: -30px; } + 100% { margin-left: 0; } +} + +@keyframes bounceFromLeft{ + 0% { margin-left: 0; } + 50% { margin-left: 30px; } + 100% { margin-left: 0; } +} + +%arrow-button { + top: 50%; + top: calc(50% - 30px); + width: 44px; + height: 60px; +} + +.baguetteBox-button { + position: absolute; + cursor: pointer; + outline: none; + padding: 0; + margin: 0; + border: 0; + border-radius: 15%; + background-color: #323232; + background-color: rgba(50,50,50,.5); + color: #ddd; + font: 1.6em sans-serif; + transition: background-color .4s ease; + + &:focus, + &:hover { + background-color: rgba(50,50,50,.9); + } + + &#next-button { + @extend %arrow-button; + right: 2%; + } + + &#previous-button { + @extend %arrow-button; + left: 2%; + } + + &#close-button { + top: 20px; + right: 2%; + right: calc(2% + 6px); + width: 30px; + height: 30px; + } + + // Firefox fix + svg { + position: absolute; + left: 0; + top: 0; + } +} + +/* + Preloader + Borrowed from http://tobiasahlin.com/spinkit/ +*/ + +.baguetteBox-spinner { + width: 40px; + height: 40px; + display: inline-block; + position: absolute; + top: 50%; + left: 50%; + margin-top: -20px; + margin-left: -20px; +} + +.baguetteBox-double-bounce1, +.baguetteBox-double-bounce2 { + width: 100%; + height: 100%; + border-radius: 50%; + background-color: #fff; + opacity: .6; + position: absolute; + top: 0; + left: 0; + animation: bounce 2s infinite ease-in-out; +} + +.baguetteBox-double-bounce2 { + animation-delay: -1s; +} + +@keyframes bounce { + 0%, 100% { + transform: scale(0); + } 50% { + transform: scale(1); + } +} |