Vanilla JS version

Gruntfile.js

@@ -63,35 +63,12 @@ module.exports = function(grunt) {
         },
         postcss: {
             options: {
+                discardComments: true,
                 processors: [
-                    require('postcss-cssnext')({
-                        browsers: [
-                            'Android 2.3',
-                            'Android >= 4',
-                            'Chrome >= 20',
-                            'Firefox >= 24',
-                            'Explorer >= 8',
-                            'iOS >= 6',
-                            'Opera >= 12',
-                            'Safari >= 6'
-                        ]
-                    }),
-                    require('postcss-remove-root'),
                     require('stylefmt')
                 ]
             },
             css: {
-                expand: true,
-                cwd: 'dist/',
-                src: '**/*.css',
-                dest: 'dist/'
-            }
-        },
-        cssnano: {
-            min: {
-                options: {
-                    discardComments: true
-                },
                 expand: true,
                 cwd: 'dist/',
                 src: '**/*.css',
@@ -117,10 +94,9 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-contrib-concat');
     grunt.loadNpmTasks('grunt-contrib-uglify');
     grunt.loadNpmTasks('grunt-postcss');
-    grunt.loadNpmTasks('grunt-cssnano');
     grunt.loadNpmTasks('grunt-contrib-watch');
 
-    grunt.registerTask('dist-css', ['clean:css', 'concat:css', 'postcss', 'cssnano']);
+    grunt.registerTask('dist-css', ['clean:css', 'concat:css', 'postcss']);
     grunt.registerTask('dist-js', ['clean:js', 'concat:js', 'uglify', 'replace']);
     grunt.registerTask('default', ['dist-css', 'dist-js']);
 };

README.md

@@ -6,11 +6,16 @@ supports images, iframes and inline content out of the box.
 
 Minified and gzipped, its total footprint weights about 3kB.
 
-It requires [jQuery](https://jquery.com) or [Zepto](http://zeptojs.com)
-(with the [callbacks](https://github.com/madrobby/zepto/blob/master/src/callbacks.js), 
-[data](https://github.com/madrobby/zepto/blob/master/src/data.js), 
-[deferred](https://github.com/madrobby/zepto/blob/master/src/deferred.js) and 
-[event](https://github.com/madrobby/zepto/blob/master/src/event.js) modules).
+Version 4.0.0 (a.k.a "vanilla branch")
+--------------------------------------
+This version does *not* require jQuery anymore.
+
+### Other changes
+
+- TIFF files are not supported anymore (did we ever use them?). However, AVIF support is added instead.
+- IE support is gone as more current ECMAScript is being used.
+- Grunt is still there but updated (as are all of its plugins). And, it does not remove the CSS `:root` stuff anymore.
+- Inline `max-height` styling is not set anymore. If you need this there are (better) CSS only ways to achieve this.
 
 Installation
 ------------
@@ -22,7 +27,6 @@ document:
 
 ```html
 <link href="dist/lity.css" rel="stylesheet">
-<script src="vendor/jquery.js"></script>
 <script src="dist/lity.js"></script>
 ```
 
@@ -82,8 +86,15 @@ A [`Lity`](#the-lity-instance) instance.
 lity('https://www.youtube.com/watch?v=XSGBVzeBUbk');
 lity('<p>Some content to show...</p>');
 
-// Bind as an event handler
-$(document).on('click', '[data-my-lightbox]', lity);
+// Bind as an event handler (vanilla version of jQuery’s .on() delegation)
+document.addEventListener('click', function(e) {
+    for (var target = e.target; target && target != this; target = target.parentNode) {
+        if (target.matches('[data-lightbox]')) {
+            lity.call(target, e);
+            break;
+        }
+    }
+}, false);
 ```
 
 The Lity instance
@@ -181,29 +192,29 @@ argument.
 Triggered before the lightbox is opened.
 
 ```javascript
-$(document).on('lity:open', function(event, instance) {
+document.addEventListener('lity:open', function(event, instance) {
     console.log('Lightbox opened');
-});
+}, false);
 ```
 
 #### lity:ready
 
 Triggered when the lightbox is ready.
 
 ```javascript
-$(document).on('lity:ready', function(event, instance) {
+document.addEventListener('lity:ready', function(event, instance) {
     console.log('Lightbox ready');
-});
+}, false);
 ```
 
 #### lity:close
 
 Triggered before the lightbox is closed.
 
 ```javascript
-$(document).on('lity:close', function(event, instance) {
+document.addEventListener('lity:close', function(event, instance) {
     console.log('Lightbox closed');
-});
+}, false);
 ```
 
 #### lity:remove
@@ -212,9 +223,9 @@ Triggered when the closing animation is finished and just before the lightbox
 is removed from the DOM.
 
 ```javascript
-$(document).on('lity:remove', function(event, instance) {
+document.addEventListener('lity:remove', function(event, instance) {
     console.log('Lightbox removed');
-});
+}, false);
 ```
 
 #### lity:resize
@@ -223,13 +234,13 @@ Triggered when the instance is resized, usually when the user resizes the
 window.
 
 ```javascript
-$(document).on('lity:resize', function(event, instance) {
+document.addEventListener('lity:resize', function(event, instance) {
     console.log('Lightbox resized');
-});
+}, false);
 ```
 
 License
 -------
 
-Copyright (c) 2015-2020 Jan Sorgalla.
+Copyright (c) 2015-2022 Jan Sorgalla, Anton Andreasson.
 Released under the [MIT](LICENSE?raw=1) license.