Skip to content

Commit

Permalink
Init
Browse files Browse the repository at this point in the history
  • Loading branch information
@stephan-fischer
stephan-fischer committed Apr 4, 2018
0 parents commit 5456f90
Show file tree
Hide file tree
Showing 6 changed files with 288 additions and 0 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules
62 changes: 62 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel Aria</title>
<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="/main.js"></script>
<style>
.owl-carousel {
background: #ccc;
}

.owl-carousel .owl-carousel {
background: blue;
}

.owl-carousel div[aria-hidden=false] {
background: green;
}

.owl-carousel button.owl-dot {
width: 30px;
height: 30px;
border: 2px solid red;
background: green !important;
display: inline-block;
margin: 5px;
}
</style>
</head>
<body>
<h1>Single</h1>
<div class="owl-carousel owl-main">
<div> 1 </div>
<div> 2 </div>
<div> <button>Klick mich</button></div>
<div> 4 </div>
<div> 5</div>
<div> 6 </div>
<div> 7 </div>
</div>

<h1>Nested</h1>
<div class="owl-carousel owl-main">
<div>
<div class="owl-carousel owl-nested">
<div> Sub 1 </div>
<div> Sub 2 </div>
<div> Sub 3 </div>
</div>
</div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
</div>

<button id="destroy">destroy owl carousel</button>
</body>
</html>
17 changes: 17 additions & 0 deletions main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
$(document).ready(function(){
$('.owl-main').owlCarousel({
items: 2
});

$('.owl-nested').owlCarousel({
items: 1,
nav: true,
touchDrag: false,
pullDrag: false
});

$('#destroy').on("click", function() {
$('.owl-nested').owlCarousel('destroy');
$('.owl-main').owlCarousel('destroy');
});
});
189 changes: 189 additions & 0 deletions owl.carousel.aria.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
"use strict";

/**
* Aria Plugin
* Author: Stephan Fischer
* @since 2.0.0
*/
;(function ($, window, document, undefined)
{
let Aria = function(scope)
{
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': 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': e => this.setAria(),
'translated.owl.carousel': e => this.setAria(),
'refreshed.owl.carousel': e => this.setAria(),
'resized.owl.carousel': e => this.setAria()
});
}

Aria.Defaults =
{
aria: true
};

Aria.prototype.bind = function()
{
this.$element.attr('tabindex', '0');
this.$element.on('to.owl.carousel', (e) => e.stopPropagation());
this.$element.on('next.owl.carousel', (e) => e.stopPropagation());
this.$element.on('prev.owl.carousel', (e) => e.stopPropagation());
this.$element.on('destroy.owl.carousel', (e) => e.stopPropagation());
this.$element
.on('focusin', (e) => this.focus(e))
.on('focusout', (e) => this.blur(e))
.on('keyup', (e) => this.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)
{
let 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()
{
if (!this.$stage || !this.$stage.length) {
return false;
}

setTimeout(() =>
{
this.$nav.children().each((i, el) =>
{
const $item = $(el);
const isDisabled = $item.hasClass('disabled');
const isActive = $item.hasClass('active');

$item.attr('aria-disabled', isDisabled || isActive ? "true": "false");

});

this.$stage.children().each((i, el) =>
{
const $item = $(el);
const isActive = $item.hasClass('active');

$item.attr('aria-hidden', !isActive ? "true": "false");
$item.find('*').each((i, e) =>
{
const $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()
{
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', (e) => this.focus(e))
.off('focusout', (e) => this.blur(e))
.off('keyup', (e) => this.keyUp(e));
};

$.fn.extend({
clearTabindex: function()
{
return this.each(function()
{
const $el = $(this);

if (!$el.is('[data-tabindex]')) {
$el.removeAttr("tabindex");
}

$el.restoreTabindex();
});
},
restoreTabindex: function()
{
return this.each(function()
{
const $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() {
return this.each(function()
{
const $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 );
19 changes: 19 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"name": "owl-aria",
"version": "1.0.1",
"description": "Owl Carousel v2 accessibility layer",
"keywords": [
"owl",
"carousel",
"aria",
"a11y"
],
"author": {
"name": "Stephan Fischer",
"email": "[email protected]",
"url": "http://www.mrfischer.de"
},
"dependencies": {
"owl.carousel": "^2.3.3"
}
}
Empty file added readme.txt
Empty file.

0 comments on commit 5456f90

Please sign in to comment.