gulp and minify

README.md

@@ -1,2 +1,10 @@
 # owl-aria
 An Owl Carousel v2 accessibility layer
+
+
+
+## License
+
+### Commercial license
+
+If you want to use owl-arai to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. 

dist/js/owl.carousel.aria.js

@@ -0,0 +1,196 @@
+"use strict";
+
+/**
+ * Aria Plugin
+ * Author: Stephan Fischer
+ * @since 2.0.0
+ */
+
+;(function ($, window, document, undefined) {
+    var Aria = function Aria(scope) {
+        var _this = this;
+
+        this._core = scope;
+        this.options = $.extend({}, Aria.Defaults, this._core.options);
+
+        if (!this.options.aria) {
+            return false;
+        }
+
+        this.$element = this._core.$element;
+
+        this._init = false;
+
+        this.$element.on({
+            'initialized.owl.carousel': function initializedOwlCarousel(e) {
+                if (e.namespace && !_this._init) {
+                    _this.$stage = _this._core.$stage;
+
+                    _this.$nav = $('.' + _this.options.navContainerClass + ', .' + _this.options.dotsClass, _this.$element);
+
+                    _this.bind();
+                    _this.setAria();
+                    _this._init = true;
+                }
+            },
+            'changed.owl.carousel': function changedOwlCarousel(e) {
+                return _this.setAria();
+            },
+            'translated.owl.carousel': function translatedOwlCarousel(e) {
+                return _this.setAria();
+            },
+            'refreshed.owl.carousel': function refreshedOwlCarousel(e) {
+                return _this.setAria();
+            },
+            'resized.owl.carousel': function resizedOwlCarousel(e) {
+                return _this.setAria();
+            }
+        });
+    };
+
+    Aria.Defaults = {
+        aria: true
+    };
+
+    Aria.prototype.bind = function () {
+        var _this2 = this;
+
+        this.$element.attr('tabindex', '0');
+        this.$element.on('to.owl.carousel', function (e) {
+            return e.stopPropagation();
+        });
+        this.$element.on('next.owl.carousel', function (e) {
+            return e.stopPropagation();
+        });
+        this.$element.on('prev.owl.carousel', function (e) {
+            return e.stopPropagation();
+        });
+        this.$element.on('destroy.owl.carousel', function (e) {
+            return e.stopPropagation();
+        });
+        this.$element.on('focusin', function (e) {
+            return _this2.focus(e);
+        }).on('focusout', function (e) {
+            return _this2.blur(e);
+        }).on('keyup', function (e) {
+            return _this2.keyUp(e);
+        });
+    };
+
+    Aria.prototype.focus = function () {
+        this.$element.attr({ 'aria-live': 'polite' });
+    };
+
+    Aria.prototype.blur = function () {
+        this.$element.attr({ 'aria-live': 'off' });
+    };
+
+    Aria.prototype.keyUp = function (e) {
+        var action = null;
+
+        if (e.keyCode == 37 || e.keyCode == 38) {
+            action = 'prev.owl.carousel';
+        } else if (e.keyCode == 39 || e.keyCode == 40) {
+            action = 'next.owl.carousel';
+        }
+
+        if (action !== null) {
+            this.$element.trigger(action);
+        }
+
+        return false; // important!
+    };
+
+    Aria.prototype.setAria = function () {
+        var _this3 = this;
+
+        if (!this.$stage || !this.$stage.length) {
+            return false;
+        }
+
+        setTimeout(function () {
+            _this3.$nav.children().each(function (i, el) {
+                var $item = $(el);
+                var isDisabled = $item.hasClass('disabled');
+                var isActive = $item.hasClass('active');
+
+                $item.attr('aria-disabled', isDisabled || isActive ? "true" : "false");
+            });
+
+            _this3.$stage.children().each(function (i, el) {
+                var $item = $(el);
+                var isActive = $item.hasClass('active');
+
+                $item.attr('aria-hidden', !isActive ? "true" : "false");
+                $item.find('*').each(function (i, e) {
+                    var $el = $(e);
+
+                    if (isActive === false) {
+                        $el.storeTabindex();
+                        $el.attr("tabindex", "-1");
+                    } else {
+                        if ($el.is('[data-tabindex]')) {
+                            $el.restoreTabindex();
+                        } else {
+                            $el.removeAttr("tabindex");
+                        }
+                    }
+                });
+            });
+        });
+    };
+
+    Aria.prototype.destroy = function () {
+        var _this4 = this;
+
+        this.$element.removeAttr('aria-live');
+        this.$element.removeAttr('tabindex');
+        this.$element.children().removeAttr('aria-hidden');
+        this.$element.find('[data-store-tabindex]').clearTabindex();
+        this.$element.off('focusin', function (e) {
+            return _this4.focus(e);
+        }).off('focusout', function (e) {
+            return _this4.blur(e);
+        }).off('keyup', function (e) {
+            return _this4.keyUp(e);
+        });
+    };
+
+    $.fn.extend({
+        clearTabindex: function clearTabindex() {
+            return this.each(function () {
+                var $el = $(this);
+
+                if (!$el.is('[data-tabindex]')) {
+                    $el.removeAttr("tabindex");
+                }
+
+                $el.restoreTabindex();
+            });
+        },
+        restoreTabindex: function restoreTabindex() {
+            return this.each(function () {
+                var $el = $(this);
+
+                if ($el.is('[data-tabindex]')) {
+                    $el.attr("tabindex", $el.attr('data-tabindex'));
+                    $el.removeAttr('data-tabindex');
+                }
+
+                $el.removeAttr('data-store-tabindex');
+            });
+        },
+        storeTabindex: function storeTabindex() {
+            return this.each(function () {
+                var $el = $(this);
+                if ($el.is('[tabindex]')) {
+                    $el.attr("data-tabindex", $el.attr('tabindex'));
+                }
+
+                $el.attr('data-store-tabindex', true);
+            });
+        }
+    });
+
+    $.fn.owlCarousel.Constructor.Plugins['Aria'] = Aria;
+})(window.Zepto || window.jQuery, window, document);

gulpfile.js

@@ -0,0 +1,38 @@
+'use strict';
+
+const gulp = require('gulp');
+const concat = require('gulp-concat');
+const babel = require('gulp-babel');
+const sourcemaps = require('gulp-sourcemaps');
+const rename = require('gulp-rename');
+const minify = require('gulp-minifier');
+const source =  'src/js/**';
+const dist = 'dist/js/';
+
+gulp.task('dist', () =>
+{
+    return gulp.src(source)
+    .pipe(sourcemaps.init())
+    .pipe(concat('owl.carousel.aria.js'), {
+      newLine: '\n;'
+    })
+    .pipe(babel({
+      presets: ['es2015']
+    }))
+    .pipe(gulp.dest(dist))
+    .pipe(rename('owl.carousel.aria.min.js'))
+    .pipe(minify({
+        minify: true,
+        minifyJS: {
+          sourceMap: false
+        }
+    }))
+    .pipe(gulp.dest(dist));
+});
+
+
+
+
+
+
+gulp.task('default', ['dist']);

index.html

@@ -6,7 +6,7 @@
         <link rel="stylesheet" href="/node_modules/owl.carousel/dist/assets/owl.carousel.min.css" />
         <script src="/node_modules/jquery/dist/jquery.js"></script>
         <script src="/node_modules/owl.carousel/dist/owl.carousel.min.js"></script>
-        <script src="/owl.carousel.aria.js"></script>
+        <script src="/dist/js/owl.carousel.aria.min.js"></script>
         <script src="/main.js"></script>
         <style>
             .owl-carousel {

package.json

@@ -6,7 +6,10 @@
     "owl",
     "carousel",
     "aria",
-    "a11y"
+    "a11y",
+    "accessibility",
+    "owl.carousel",
+    "layer"
   ],
   "author": {
     "name": "Stephan Fischer",
@@ -15,5 +18,16 @@
   },
   "dependencies": {
     "owl.carousel": "^2.3.3"
+  },
+  "license": "GPL-3.0",
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-preset-es2015": "^6.24.1",
+    "gulp": "^3.9.1",
+    "gulp-babel": "^7.0.1",
+    "gulp-concat": "^2.6.1",
+    "gulp-minifier": "^1.2.2",
+    "gulp-rename": "^1.2.2",
+    "gulp-sourcemaps": "^2.6.4"
   }
-}
+}