{"_id":"tobii","_rev":"3-caf77757ef7ad66e63e9e71e604108bc","name":"tobii","dist-tags":{"latest":"2.0.0-alpha"},"versions":{"2.0.0-alpha":{"name":"tobii","version":"2.0.0-alpha","description":"An accessible, open-source lightbox with no dependencies.","main":"dist/js/tobii.js","style":"dist/css/tobii.css","devDependencies":{"@babel/core":"^7.8.6","@babel/preset-env":"^7.8.6","@rollup/plugin-commonjs":"^11.0.2","@rollup/plugin-node-resolve":"^7.1.1","autoprefixer":"^9.7.4","rollup":"^1.32.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-babel-minify":"^9.1.1","standard":"^14.3.1"},"browserslist":["last 2 versions","not <= 1%","not IE 10"],"scripts":{"build":"rollup -c","dev":"rollup -c -w","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git://github.com/rqrauhvmra/tobii.git"},"keywords":["lightbox","accessible","a11y","javascript","vanilla","scss","css"],"author":{"name":"rqrauhvmra"},"license":"MIT","bugs":{"url":"https://github.com/rqrauhvmra/tobii/issues"},"homepage":"https://github.com/rqrauhvmra/tobii","gitHead":"7d205368360c350da1683e44feeba639bfe2c5cf","_id":"tobii@2.0.0-alpha","_nodeVersion":"13.6.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-pPBdmay5bCMO4wW/8JTc2eSsS2ivfHmtCp5ypy/q6B9czL4EcnlRR7G08shwxgB8UGBglTdzT4rxKdJtPXjZCQ==","shasum":"90b6c4961046e453e16b2ca3c6803499b4352270","tarball":"https://registry.npmjs.org/tobii/-/tobii-2.0.0-alpha.tgz","fileCount":14,"unpackedSize":166620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2+DMCRA9TVsSAnZWagAAOKgP/39Sev7bTTHhpJ2pqVrw\nF2uHSBZYgeeXMacY5rBWR9E/QhidLCU93wLHxmuEy82R2AP87OitutqkJMfC\npAwdbsoxJDFwk9pSej/4k6OX3lYQE8rm872hxEY8V5IQzL6HaHxPGjTK3WOA\nGH268NH78n31YhGHbn9PcC9SIwKRUL9oK99+7Z/GjbvvamaqCxCjDN/6ciHa\np/RStLkUaek2XVe1qtXxULiN/4ga8E/dszQCoJaT9QQxr2qw4PyTQSpQ2GIe\nDEvxUEBEvTe4iTMaVeaUSxmm0Mq1lg6W1HAb95SD/na6DUdwOf6V1Pnas8zu\n011kPUHnQf9/g0zttJa/n/LiclgAoBSxSTGphM9Xeu5U2VGRFlGg4figPVuv\n/HZOYAtlgYbLXipqNJCRdzvRntO6+nkUFM9+mBd0gkTXXUlZ1c3xqmLHVxdT\n+KFpMCbZ5i9sHOeRb8JLfb8gI+MEl3XA1vEvZBjIGBEfhpQuazgePTJybJ1s\nQa6I6qREER2Gn//lWbwf/1mHfjV9ejOrrRycQsv66yn1jVySuo7z4+FOQBNm\n58xTGVJePnTpAv8axY7ywhDdvznth+RrRdaXxclnB3VgiiswKi0Zanb9WZsW\nc0zkqwD8QPrurXnmJ09m1fxZwv5MRkF/f84AD0X6bP19D4QGiQNNvfMml3pJ\nM0aZ\r\n=d3zR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBCdZ7AvJv/6wUuHeXCFdF871uUc9qHiRx/fqUYr13zIAiAfN6hDGHHA44zd/RAjYICDRUyTG2s91miCDnuzqq002A=="}]},"maintainers":[{"name":"rqrauhvmra","email":"npm@rqrauhvmra.com"}],"_npmUser":{"name":"rqrauhvmra","email":"npm@rqrauhvmra.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tobii_2.0.0-alpha_1583230043936_0.5059197753849833"},"_hasShrinkwrap":false}},"time":{"created":"2020-03-03T10:07:23.935Z","2.0.0-alpha":"2020-03-03T10:07:24.119Z","modified":"2022-05-22T00:11:48.839Z"},"maintainers":[{"email":"npm@rqrauhvmra.com","name":"rqrauhvmra"},{"email":"mail@midzer.de","name":"midzer"}],"description":"An accessible, open-source lightbox with no dependencies.","homepage":"https://github.com/rqrauhvmra/tobii","keywords":["lightbox","accessible","a11y","javascript","vanilla","scss","css"],"repository":{"type":"git","url":"git://github.com/rqrauhvmra/tobii.git"},"author":{"name":"rqrauhvmra"},"bugs":{"url":"https://github.com/rqrauhvmra/tobii/issues"},"license":"MIT","readme":"# Tobii\r\n\r\n[![Version](https://img.shields.io/badge/Version-2.0.0--alpha-1a2a3a.svg)](https://github.com/rqrauhvmra/Tobii/releases)\r\n[![License](https://img.shields.io/badge/License-MIT-1a2a3a.svg)](https://github.com/rqrauhvmra/Tobii/blob/master/LICENSE.md)\r\n![Dependecies](https://img.shields.io/badge/Dependencies-none-1a2a3a.svg)\r\n[![Amazon wishlist](https://img.shields.io/badge/Amazon_wishlist-0366d6.svg)](https://www.amazon.de/hz/wishlist/ls/29WXITO63O0BX)\r\n\r\nAn accessible, open-source lightbox with no dependencies.\r\n\r\n[Play on CodePen](https://codepen.io/collection/nbqJVV)\r\n\r\n![Open slide with a picture of the Berlin television tower](https://rqrauhvmra.com/tobi/tobi.png)\r\n\r\n## Table of contents\r\n\r\n- [Features](#features)\r\n- [Get Tobii](#get-Tobii)\r\n  - [Download](#download)\r\n  - [Package managers](#package-managers)\r\n- [Usage](#usage)\r\n- [Media types](#media-types)\r\n  - [Image](#image)\r\n  - [Inline HTML](#inline-html)\r\n  - [Iframe](#iframe)\r\n  - [YouTube](#youtube)\r\n- [Grouping](#grouping)\r\n- [Options](#options)\r\n- [API](#api)\r\n- [Browser support](#browser-support)\r\n- [To do](#to-do)\r\n- [Contributing](#contributing)\r\n- [License](#license)\r\n\r\n## Features\r\n\r\n- No dependencies\r\n- Accessible:\r\n  - ARIA roles\r\n  - Keyboard navigation:\r\n    - `Prev`/ `Next` Keys: Navigate through slides\r\n    - `ESCAPE` Key: Close Tobii\r\n    - `TAB` Key: Focus elements within Tobii, not outside\r\n  - User preference media features:\r\n    - `prefers-reduced-motion` media query\r\n  - When Tobii opens, focus is set to the first focusable element in Tobii\r\n  - When Tobii closes, focus returns to what was in focus before Tobii opened\r\n- Touch & Mouse drag support:\r\n  - Drag/ Swipe horizontal to navigate through slides\r\n  - Drag/ Swipe vertical to close Tobii\r\n- Responsive\r\n- Support iframes\r\n- Support inline HTML\r\n\r\n## Get Tobii\r\n\r\n### Download\r\n\r\nCSS: `css/tobii.min.css` minified, or `css/Totii.css` un-minified\r\n\r\nJavaScript: `js/tobii.min.js` minified, or `js/tobii.js` un-minified\r\n\r\n### Package managers\r\n\r\nTobii is also available on npm.\r\n\r\n`npm install tobii --save`\r\n\r\n## Usage\r\n\r\nYou can install Tobii by linking the `.css` and `.js` files to your html file. The HTML code may look like this:\r\n\r\n```html\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n  <title>Your page title</title>\r\n\r\n  <!-- CSS -->\r\n  <link href=\"tobii.min.css\" rel=\"stylesheet\">\r\n</head>\r\n<body>\r\n  <!-- Your HTML content -->\r\n\r\n  <!-- JS -->\r\n  <script src=\"tobii.min.js\"></script>\r\n</body>\r\n</html>\r\n```\r\n\r\nInitialize the script by running:\r\n\r\n```js\r\nconst tobii = new Tobii()\r\n```\r\n\r\n## Media types\r\n\r\n### Image\r\n\r\n[Play on CodePen](https://codepen.io/rqrauhvmra/pen/ZRZdwG)\r\n\r\nThe standard way of using Tobii is a linked thumbnail image with the class name `lightbox` to a larger image:\r\n\r\n```html\r\n<a href=\"path/to/image.jpg\" class=\"lightbox\">\r\n  <img src=\"path/to/thumbnail.jpg\" alt=\"I am a caption\">\r\n</a>\r\n```\r\n\r\nInstead of a thumbnail, you can also refer to a larger image with a textlink:\r\n\r\n```html\r\n<a href=\"path/to/image.jpg\" class=\"lightbox\">\r\n  Open image\r\n</a>\r\n```\r\n\r\n### Inline HTML\r\n\r\n[Play on CodePen](https://codepen.io/rqrauhvmra/pen/BOLxqj)\r\n\r\nFor inline HTML, create an element with a unique ID:\r\n\r\n```html\r\n<div id=\"selector\">\r\n  <!-- Your HTML content -->\r\n</div>\r\n```\r\n\r\nThen create a link with the class name `lightbox` and a `href` attribute that matches the ID of the element:\r\n\r\n```html\r\n<a href=\"#selector\" data-type=\"html\" class=\"lightbox\">\r\n  Open HTML content\r\n</a>\r\n```\r\n\r\nor a button with the class name `lightbox` and a `data-target` attribute that matches the ID of the element:\r\n\r\n```html\r\n<button type=\"button\" data-type=\"html\" data-target=\"#selector\" class=\"lightbox\">\r\n  Open HTML content\r\n</button>\r\n```\r\n\r\nIn both ways, the attribute `data-type` with the value `html` must be added.\r\n\r\n### Iframe\r\n\r\n[Play on CodePen](https://codepen.io/rqrauhvmra/pen/GXJwar)\r\n\r\nFor an iframe, create a link with the class name `lightbox`:\r\n\r\n```html\r\n<a href=\"https://www.wikipedia.org\" data-type=\"iframe\" class=\"lightbox\">\r\n  Open Wikipedia\r\n</a>\r\n```\r\n\r\nor a button with the class name `lightbox` and a `data-target` attribute:\r\n\r\n```html\r\n<button type=\"button\" data-type=\"iframe\" data-target=\"https://www.wikipedia.org\" class=\"lightbox\">\r\n  Open Wikipedia\r\n</button>\r\n```\r\n\r\nIn both ways, the attribute `data-type` with the value `iframe` must be added.\r\n\r\n#### Optional attributes\r\n\r\n- `data-height` set the height and `data-width` the width of the iframe.\r\n\r\n### YouTube\r\n\r\n[Play on CodePen](https://codepen.io/rqrauhvmra/pen/rgpjXE)\r\n\r\nFor an YouTube video, create a link with the class name `lightbox` and a `data-id` attribute with the YouTube video ID:\r\n\r\n```html\r\n<a href=\"#\" data-type=\"youtube\" data-id=\"KU2sSZ_90PY\" class=\"lightbox\">\r\n  Open YouTube video\r\n</a>\r\n```\r\n\r\nor a button with the class name `lightbox` and a `data-id` attribute with the YouTube video ID:\r\n\r\n```html\r\n<button type=\"button\" data-type=\"youtube\" data-id=\"KU2sSZ_90PY\" class=\"lightbox\">\r\n  Open YouTube video\r\n</button>\r\n```\r\n\r\nIn both ways, the attribute `data-type` with the value `youtube` must be added.\r\n\r\n#### Optional attributes\r\n\r\n- `data-controls` indicates whether the video player controls are displayed: `0` do not display and `1` display controls in the player.\r\n- `data-height` set the height and `data-width` the width of the player. I recommend using an external library for responsive iframes.\r\n\r\n## Grouping\r\n\r\n[Play on CodePen](https://codepen.io/rqrauhvmra/pen/PvKVxp)\r\n\r\nIf you have a group of related types that you would like to combine into a set, add the `data-group` attribute:\r\n\r\n```html\r\n<a href=\"path/to/image_1.jpg\" class=\"lightbox\" data-group=\"vacation\">\r\n  <img src=\"path/to/thumbnail_1.jpg\" alt=\"I am a caption\">\r\n</a>\r\n\r\n<a href=\"path/to/image_2.jpg\" class=\"lightbox\" data-group=\"vacation\">\r\n  <img src=\"path/to/thumbnail_2.jpg\" alt=\"I am a caption\">\r\n</a>\r\n\r\n// ...\r\n\r\n<a href=\"path/to/image_4.jpg\" class=\"lightbox\" data-group=\"birthday\">\r\n  <img src=\"path/to/thumbnail_4.jpg\" alt=\"I am a caption\">\r\n</a>\r\n\r\n// ...\r\n```\r\n\r\n## Options\r\n\r\n[Play on CodePen](https://codepen.io/rqrauhvmra/pen/MBYEog)\r\n\r\nYou can pass an object with custom options as an argument.\r\n\r\n```js\r\nconst tobii = new Tobii({\r\n  captions: false\r\n})\r\n```\r\n\r\nThe following options are available:\r\n\r\n| Property | Type | Default | Description |\r\n| --- | --- | --- | --- |\r\n| selector | string | \".lightbox\" | All elements with this class triggers Tobii. |\r\n| captions | bool | true | Display captions, if available. |\r\n| captionsSelector | \"self\", \"img\" | \"img\" | Set the element where the caption is. Set it to \"self\" for the `a` tag itself. |\r\n| captionAttribute | string | \"alt\" | Get the caption from given attribute. |\r\n| nav | bool, \"auto\" | \"auto\" | Display navigation buttons. \"auto\" hides buttons on touch-enabled devices. |\r\n| navText | string | [\"inline svg\", \"inline svg\"] | Text or HTML for the navigation buttons. |\r\n| navLabel | string | [\"Previous\", \"Next\"] | ARIA label for screen readers. |\r\n| close | bool | true | Display close button. |\r\n| closeText | string | \"inline svg\" | Text or HTML for the close button. |\r\n| closeLabel | string | \"Close\" | ARIA label for screen readers. |\r\n| loadingIndicatorLabel | string | \"Image loading\" | ARIA label for screen readers. |\r\n| counter | bool | true | Display current image index. |\r\n| keyboard | bool | true | Allow keyboard navigation. |\r\n| zoom | bool | true | Display zoom icon. |\r\n| zoomText | string | \"inline svg\" | Text or HTML for the zoom icon. |\r\n| docClose | bool | true | Click outside to close Tobii. |\r\n| swipeClose | bool | true | Swipe up to close Tobii. |\r\n| hideScrollbar | bool | true | Hide browser scrollbars if Tobii is displayed. |\r\n| draggable | bool | true | Use dragging and touch swiping. |\r\n| threshold | number | 100 | Touch and mouse dragging threshold (in px). |\r\n| autoplayVideo | bool | false | Videos will automatically start playing as soon as they can do so without stopping to finish loading the data. |\r\n\r\n## API\r\n\r\n| Function | Description |\r\n| --- | --- |\r\n| `open(index, callback)` | Open Tobii. Optional with a specific slide with `index` (number). Optional `callback` (function) as a second argument. |\r\n| `next(callback)` | Show the next slide. Optional `callback` (function). |\r\n| `prev(callback)` | Show the previous slide. Optional `callback` (function). |\r\n| `close(callback)` | Close Tobii. Optional `callback` (function). |\r\n| `add(element, callback)` | Add an `element` (DOM element) ([example on CodePen](https://codepen.io/rqrauhvmra/pen/vzbXxQ)). Optional `callback` (function) as a second argument ([example on CodePen](https://codepen.io/rqrauhvmra/pen/qyEmXR)). |\r\n| `remove(element, callback)` | Remove an `element` (DOM element). Optional `callback` (function) as a second argument. |\r\n| `isOpen()` | Check if Tobii is open. |\r\n| `currentSlide()` | Return the current slide index. |\r\n| `selectGroup()` | Select a specific group. |\r\n| `currentGroup()` | Return the current group. |\r\n| `destroy()` | Destroy Tobii. Optional `callback` (function). |\r\n\r\n## Browser support\r\n\r\nTobii has been tested in the following browsers (all the latest versions):\r\n\r\n- Chrome\r\n- Firefox\r\n- Internet Explorer\r\n- Edge\r\n- Safari\r\n\r\n## To do\r\n\r\n- [ ] Support for `srcset` and `picture`\r\n\r\n## Contributing\r\n\r\n- Open an issue or a pull request to suggest changes or additions\r\n- Spread the word\r\n\r\n## License\r\n\r\nTobii is available under the MIT license. See the [LICENSE](https://github.com/rqrauhvmra/Tobii/blob/master/LICENSE.md) file for more info.\r\n","readmeFilename":"README.md"}