Merge branch 'develop' into production

.eslintrc

@@ -8,6 +8,7 @@
   },
 
   "env": {
+    "browser": true,
     "es6": true,
     "node": true
   },
@@ -28,6 +29,7 @@
   "rules": {
     "accessor-pairs": "error",
     "array-bracket-spacing": ["error", "never"],
+    "arrow-parens": ["error", "always"],
     "arrow-spacing": ["error", { "before": true, "after": true }],
     "block-spacing": ["error", "always"],
     "brace-style": ["error", "1tbs", { "allowSingleLine": true }],

LICENSE.md

@@ -1,6 +1,6 @@
 # The MIT License (MIT)
 
-Copyright (c) 2017-2020 rqrauhvmra
+Copyright (c) 2017-2020 rqrauhvmra, 2021 midzer
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,16 +1,20 @@
 # Tobii
 
-[![Version](https://img.shields.io/badge/Version-2.0.0--beta-1a2a3a.svg)](https://github.com/rqrauhvmra/Tobii/releases)
-[![License](https://img.shields.io/badge/License-MIT-1a2a3a.svg)](https://github.com/rqrauhvmra/Tobii/blob/master/LICENSE.md)
+[![Version](https://img.shields.io/badge/Version-2.0.0-1a2a3a.svg)](https://github.com/midzer/tobii/releases)
+[![License](https://img.shields.io/badge/License-MIT-1a2a3a.svg)](https://github.com/midzer/tobii/blob/master/LICENSE.md)
 ![Dependecies](https://img.shields.io/badge/Dependencies-none-1a2a3a.svg)
+![npm bundle size](https://img.shields.io/bundlephobia/minzip/tobii?color=1a2a3a)
 [![Amazon wishlist](https://img.shields.io/badge/Amazon_wishlist-0366d6.svg)](https://www.amazon.de/hz/wishlist/ls/29WXITO63O0BX)
 
 An accessible, open-source lightbox with no dependencies.
 
+<<<<<<< HEAD
 [See it in Action](https://feuerwehr-eisolzried.de/media/)
 
 ![Open slide with a picture of the Berlin television tower](https://rqrauhvmra.com/tobi/tobi.png)
 
+=======
+>>>>>>> develop
 ## Table of contents
 
 - [Features](#features)
@@ -116,8 +120,33 @@ Instead of a thumbnail, you can also refer to a larger image with a text link:
 </a>
 ```
 
+If you use a Markdown parser or CMS and want to make all images in a post
+automatically viewable in a lightbox, use the following JavaScript code to add
+all images to the same album:
+
+```javascript
+document.addEventListener('DOMContentLoaded', () => {
+  // This assumes your article is wrapped in an element with the class "content-article".
+  document.querySelectorAll('.content-article img').forEach((articleImg) => {
+    // Add lightbox elements in blog articles for Tobii.
+    const lightbox = document.createElement('a');
+    lightbox.href = articleImg.src;
+    lightbox.classList.add('lightbox');
+    lightbox.dataset.group = 'article';
+    articleImg.parentNode.appendChild(lightbox);
+    lightbox.appendChild(articleImg);
+  });
+});
+```
+
+<<<<<<< HEAD
+=======
+Alternatively, depending on your Markdown parser or CMS, it may be possible to
+customize its output to add the markup on the server-side.
+
 ### Inline HTML
 
+>>>>>>> develop
 For inline HTML, create an element with a unique ID:
 
 ```html
@@ -233,6 +262,7 @@ The following options are available:
 | captions | bool | true | Display captions, if available. |
 | captionsSelector | "self", "img" | "img" | Set the element where the caption is. Set it to "self" for the `a` tag itself. |
 | captionAttribute | string | "alt" | Get the caption from given attribute. |
+| captionText | function | null | Custom callback which returns the caption text for the current element. The first argument of the callback is the element. If set, `captionsSelector` and `captionAttribute` are ignored. |
 | nav | bool, "auto" | "auto" | Display navigation buttons. "auto" hides buttons on touch-enabled devices. |
 | navText | string | ["inline svg", "inline svg"] | Text or HTML for the navigation buttons. |
 | navLabel | string | ["Previous", "Next"] | ARIA label for screen readers. |
@@ -311,4 +341,4 @@ Tobii supports the following browser (all the latest versions):
 
 ## License
 
-Tobii is available under the MIT license. See the [LICENSE](https://github.com/rqrauhvmra/Tobii/blob/master/LICENSE.md) file for more info.
+Tobii is available under the MIT license. See the [LICENSE](https://github.com/midzer/Tobii/blob/master/LICENSE.md) file for more info.

demo/index.html

@@ -0,0 +1,23 @@
+
+<!doctype html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<title></title>
+	<meta name="description" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../dist/tobii.min.css">
+</head>
+
+<body>
+	<a href="https://via.placeholder.com/600.jpg" class="lightbox"><img src="https://via.placeholder.com/300.jpg" height="150" width="150"></a>
+	<a href="https://via.placeholder.com/600/09f/fff.jpg" class="lightbox"><img src="https://via.placeholder.com/300/09f/fff.jpg" height="150" width="150"></a>
+
+	<script src="../dist/tobii.min.js"></script>
+	<script>
+		const tobii = new Tobii()
+	</script>
+</body>
+
+</html>

demo/modern.html

@@ -0,0 +1,23 @@
+
+<!doctype html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<title></title>
+	<meta name="description" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../dist/tobii.min.css">
+</head>
+
+<body>
+	<a href="https://via.placeholder.com/600.jpg" class="lightbox"><img src="https://via.placeholder.com/300.jpg" height="150" width="150"></a>
+	<a href="https://via.placeholder.com/600/09f/fff.jpg" class="lightbox"><img src="https://via.placeholder.com/300/09f/fff.jpg" height="150" width="150"></a>
+
+	<script type="module">
+		import Tobii from '../dist/tobii.modern.js';
+		const tobii = new Tobii();
+	</script>
+</body>
+
+</html>