bugfixes and refactorings

nextapps-de · May 2, 2021 · b9c4e82 · b9c4e82
1 parent a89bf70
commit b9c4e82
Show file tree

Hide file tree

Showing 11 changed files with 414 additions and 204 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,39 @@
 # Changelog
 
-#### v0.0.1
+> The changelog just includes breaking changes along with its migration instructions.
+
+## v0.7.0
+
+<!--This version includes tons of fixes, new features and improvements which was collected over the last two years.-->
+
+List of new features:
+
+- Added video support
+- Added support for mounting HTML node fragments as slides (now you can add everything as a slide)
+- Added download feature
+- Added support for adaptive responsive images (by viewport size, pixel ratio and available internet bandwidth)
+- Added support for a customizable button in the footer section of a slide
+- Added support for additional callbacks `onclick` (for the footer button), `onshow` and `onclose`
+- Added new feature `fit` which can autofit the image as "cover" or as "contain"
+- Added support for adding and removing custom controls via `addControl` and `removeControl`
+
+List of improvements:
+
+- Greatly improves performance, this lib is definitely the web's most performant gallery library.
+- Improve rendering, style recalculations and layout reflow
+- Improve memory usage and listener bindings
+- Improve event flow
+- Improve event delegation for touchable pointers
+- Improve animation handler
+- Improve options and group options inheritance
+- Improve prevention of css class collision
+- Improve initialization and build-up
+- Improve markup declaration and parsing
+- Improve the history handler to catch the "back" button
+- Improve scheduling of the menu auto-hide
+- Improve handling of custom themes
+- Fixed a lot of bugs
+
+## v0.0.1
 
 - Initial Release
diff --git a/README.md b/README.md
@@ -1,11 +1,14 @@
-<h1 align="center"><img src="https://cdn.jsdelivr.net/gh/nextapps-de/spotlight@master/demo/spotlight.svg" alt="Spotlight.js: Modern HTML5 Gallery for Images, Videos and Media" width="80%"></h1>
+<p></p>
+<h1 align="center"><img src="https://cdn.jsdelivr.net/gh/nextapps-de/spotlight@master/demo/spotlight.svg" alt="Spotlight.js: Modern HTML5 Gallery for Images, Videos and Media" width="500px"><p></p></h1>
 <h3>Web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.</h3>
 
 <a target="_blank" href="https://www.npmjs.com/package/spotlight.js"><img src="https://img.shields.io/npm/v/spotlight.js.svg"></a>
 <a target="_blank" href="https://github.com/nextapps-de/spotlight/issues"><img src="https://img.shields.io/github/issues/nextapps-de/spotlight.svg"></a>
 <a target="_blank" href="https://github.com/nextapps-de/spotlight/blob/master/LICENSE.md"><img src="https://img.shields.io/npm/l/spotlight.js.svg"></a>
 
-<a href="https://nextapps-de.github.io/spotlight/">Demo</a> &ensp;&bull;&ensp; <a href="#started">Getting Started</a> &ensp;&bull;&ensp; <a href="#groups">Gallery Groups</a> &ensp;&bull;&ensp; <a href="#options">Options</a> &ensp;&bull;&ensp; <a href="#styling">Styling</a> &ensp;&bull;&ensp; <a href="#api">API</a> &ensp;&bull;&ensp; <a href="#builds">Custom Builds</a>
+<a href="https://nextapps-de.github.io/spotlight/">Demo</a> &ensp;&bull;&ensp; <a href="#started">Getting Started</a> &ensp;&bull;&ensp; <a href="#groups">Gallery Groups</a> &ensp;&bull;&ensp; <a href="#options">Options</a> &ensp;&bull;&ensp; <a href="#styling">Styling</a> &ensp;&bull;&ensp; <a href="#api">API</a> &ensp;&bull;&ensp; <a href="#builds">Custom Builds</a> &ensp;&bull;&ensp; <a href="CHANGELOG.md">Changelog</a>
+
+<h3>Live Demo:<br><br><a href="https://nextapps-de.github.io/spotlight/">https://nextapps-de.github.io/spotlight/ </a></h3>
 
 Spotlight runs out of the box:
 
@@ -15,13 +18,15 @@ Spotlight runs out of the box:
 - No additional icons/assets
 - No additional handling of dynamic content and event listener
 
-<a href="https://nextapps-de.github.io/spotlight/"><b>Show Demo</b></a>
-
 Alternatively you can:
 
 1. use the non-bundled version of this library (classically contains css files, image files, js files)
 2. use the source files (compatible for the ES6 module system)
 
+## Whats new in 0.7.1?
+
+The new version includes tons of fixes, new features and improvements which was collected over the last two years. Read the <a href="CHANGELOG.md">Changelog</a> to get all new features.
+
 <a name="features" id="features"></a>
 ## Features
 
@@ -103,8 +108,8 @@ __Get Latest Build (Stable):__
     </tr>
     <tr>
         <td>spotlight.bundle.js</td>
-        <td><a href="https://github.com/nextapps-de/spotlight/raw/0.7.0/dist/spotlight.bundle.js" target="_blank">Download</a></td>
-        <td><a href="https://rawcdn.githack.com/nextapps-de/spotlight/0.7.0/dist/spotlight.bundle.js" target="_blank">https://rawcdn.githack.com/nextapps-de/spotlight/0.7.0/dist/spotlight.bundle.js</a></td>
+        <td><a href="https://github.com/nextapps-de/spotlight/raw/0.7.1/dist/spotlight.bundle.js" target="_blank">Download</a></td>
+        <td><a href="https://rawcdn.githack.com/nextapps-de/spotlight/0.7.1/dist/spotlight.bundle.js" target="_blank">https://rawcdn.githack.com/nextapps-de/spotlight/0.7.1/dist/spotlight.bundle.js</a></td>
     </tr>
     <tr>
         <td colspan=3">
@@ -113,8 +118,8 @@ __Get Latest Build (Stable):__
     </tr>
     <tr>
         <td>spotlight.cdn.js</td>
-        <td><a href="https://github.com/nextapps-de/spotlight/raw/0.7.0/dist/spotlight.cdn.js" target="_blank">Download</a></td>
-        <td><a href="https://rawcdn.githack.com/nextapps-de/spotlight/0.7.0/dist/spotlight.cdn.js" target="_blank">https://rawcdn.githack.com/nextapps-de/spotlight/0.7.0/dist/spotlight.cdn.js</a></td>
+        <td><a href="https://github.com/nextapps-de/spotlight/raw/0.7.1/dist/spotlight.cdn.js" target="_blank">Download</a></td>
+        <td><a href="https://rawcdn.githack.com/nextapps-de/spotlight/0.7.1/dist/spotlight.cdn.js" target="_blank">https://rawcdn.githack.com/nextapps-de/spotlight/0.7.1/dist/spotlight.cdn.js</a></td>
     </tr>
     <tr>
         <td colspan=3">
@@ -123,19 +128,19 @@ __Get Latest Build (Stable):__
     </tr>
     <tr>
         <td>spotlight.min.js</td>
-        <td><a href="https://github.com/nextapps-de/spotlight/raw/0.7.0/dist/js/spotlight.min.js" target="_blank">Download</a></td>
-        <td><a href="https://rawcdn.githack.com/nextapps-de/spotlight/0.7.0/dist/js/spotlight.min.js" target="_blank">https://rawcdn.githack.com/nextapps-de/spotlight/0.7.0/dist/js/spotlight.min.js</a></td>
+        <td><a href="https://github.com/nextapps-de/spotlight/raw/0.7.1/dist/js/spotlight.min.js" target="_blank">Download</a></td>
+        <td><a href="https://rawcdn.githack.com/nextapps-de/spotlight/0.7.1/dist/js/spotlight.min.js" target="_blank">https://rawcdn.githack.com/nextapps-de/spotlight/0.7.1/dist/js/spotlight.min.js</a></td>
     </tr>
     <tr></tr>
     <tr>
         <td>spotlight.css</td>
-        <td><a href="https://github.com/nextapps-de/spotlight/raw/0.7.0/dist/css/spotlight.css" target="_blank">Download</a></td>
-        <td><a href="https://rawcdn.githack.com/nextapps-de/spotlight/0.7.0/dist/css/spotlight.css" target="_blank">https://rawcdn.githack.com/nextapps-de/spotlight/0.7.0/dist/css/spotlight.css</a></td>
+        <td><a href="https://github.com/nextapps-de/spotlight/raw/0.7.1/dist/css/spotlight.css" target="_blank">Download</a></td>
+        <td><a href="https://rawcdn.githack.com/nextapps-de/spotlight/0.7.1/dist/css/spotlight.css" target="_blank">https://rawcdn.githack.com/nextapps-de/spotlight/0.7.1/dist/css/spotlight.css</a></td>
     </tr>
     <tr></tr>
     <tr>
         <td>img.zip</td>
-        <td><a href="https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/nextapps-de/spotlight/tree/0.7.0/dist/img" target="_blank">Download</a></td>
+        <td><a href="https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/nextapps-de/spotlight/tree/0.7.1/dist/img" target="_blank">Download</a></td>
         <td>Alternatively when using non-bundled version you can download icons from <i>/dist/img/</i>.</td>
     </tr>
     <tr>
@@ -145,14 +150,14 @@ __Get Latest Build (Stable):__
     </tr>
     <tr>
         <td>src.zip</td>
-        <td><a href="https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/nextapps-de/spotlight/tree/0.7.0/src" target="_blank">Download</a></td>
+        <td><a href="https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/nextapps-de/spotlight/tree/0.7.1/src" target="_blank">Download</a></td>
         <td>The folder <i>"src"</i> of this Github repository.</td>
     </tr>
 </table>
 
 __Get Latest Build (Nightly):__
 
-Just exchange the version number from the URLs above with "master", e.g.: "/spotlight/0.7.0/dist/" into "/spotlight/__master__/dist".
+Just exchange the version number from the URLs above with "master", e.g.: "/spotlight/0.7.1/dist/" into "/spotlight/__master__/dist".
 
 __Get Latest (NPM):__
 

diff --git a/demo/style.css b/demo/style.css
@@ -7,6 +7,12 @@ html, body{
     font-family: Aral, Helvetica, sans-serif;
     text-align: center;
     -webkit-tap-highlight-color: rgba(0,0,0,0);
+    background: #f8f9fa;
+}
+main{
+    position: relative;
+    max-width: 800px;
+    margin: auto;
 }
 a, b{
     display: inline-block;
@@ -51,22 +57,76 @@ hr{
     padding-top: 20px;
 }
 h1 img{
-    width: 400px;
-    max-width: 61.8vw;
+    width: 500px;
+    max-width: 70vw;
 }
-label{
+label, button{
     display: inline-block;
     padding: 5px 10px;
     margin-bottom: 5px;
     border: 1px solid #ddd;
-    background: #f5f5f5;
+    background: #e9ecef;
     font-size: 12px;
     line-height: 20px;
     vertical-align: middle;
     cursor: pointer;
     border-radius: 5px;
 }
+button{
+    border:0;
+    outline: 0;
+    padding: 10px 15px;
+    font-weight: 500;
+    background-color: #6c757d;
+    color: #fff;
+}
 label input{
     float: left;
     margin-right: 10px;
-}
+}
+
+pre{
+    display: inline-block;
+    margin: auto;
+    text-align: left;
+    width: 100%;
+    max-width: calc(100vw - 1.7em);
+}
+pre code.hljs{
+    background: #fff;
+    padding: 1em 1.5em;
+    border-radius: 10px;
+    width: 100%;
+    max-width: calc(100vw - 1.7em);
+}
+
+.hljs{
+    color: #000;
+}
+.hljs-attr {
+    color:#79c0ff
+}
+.hljs-name,
+.hljs-built_in {
+    color: #ffa657;
+}
+.hljs-attribute{
+    color: #e0e7ff
+}
+.hljs-selector-class {
+    color: #79c0ff
+}
+
+.hljs-keyword,
+.hljs-selector-tag {
+    color: #f92672
+}
+
+.hljs-bullet,
+.hljs-link,
+.hljs-literal,
+.hljs-number,
+.hljs-quote,
+.hljs-regexp {
+    color: #d2a8ff
+}