Issue 458: First cut of Auto rotating image carousel example (pull #828)

Initial cut for issue #458.

examples/carousel/carousel-1/css/carousel.css

@@ -0,0 +1,177 @@
+.carousel img {
+  height: 100% !important;
+  width: 100% !important
+}
+
+.carousel-item { /*.carousel*/
+  display: none;
+  max-height: 400px;
+  max-width: 900px;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+}
+
+.carousel .carousel-item.active {
+    display: block;
+}
+
+/* More like bootstrap, less accessible*/
+
+.carousel .carousel-inner {
+  max-width: 900px;
+  position: relative;
+}
+
+
+.carousel button.pause {
+    display: block;
+    font-size: 20px;
+    width: auto;
+    left: -300em;
+    margin-bottom: 10px;
+    height: auto;
+    position: relative;
+    top: 5px;
+    right: -20px;
+}
+
+.carousel button.pause:focus{
+  display: block;
+  position: relative;
+  font-size: 20px;
+  width: auto;
+  left: 0px;
+  margin-bottom: 10px;
+  height: auto;
+  position: relative;
+  top: 5px;
+  right: -20px;
+}
+
+.carousel .carousel-inner .carousel-caption h2 a {
+  color: #fff;
+  font-weight: 600
+}
+
+.carousel .carousel-inner .carousel-caption p {
+  font-size: 1em;
+  line-height: 1.5;
+  margin-bottom: 0
+}
+
+.carousel .carousel-inner .carousel-caption {
+  background-color: rgba(0, 0, 0, 0.4);
+  bottom: 0;
+  left: 0;
+  padding: 3% 3% 50px;
+  right: 0;
+  text-shadow: none
+}
+
+.carousel .carousel-caption {
+  position: absolute;
+  right: 15%;
+  bottom: 0px;
+  left: 15%;
+  z-index: 10;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  color: #fff;
+  text-align: center;
+  text-shadow: 0 1px 2px rgba(0,0,0,.6);
+}
+
+.carousel .carousel-inner,
+.carousel .carousel-item,
+.carousel .carousel-slide {
+  max-height: 400px;
+}
+
+.carousel .carousel-indicators {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 15;
+  text-align: center;
+  list-style: none;
+}
+
+.carousel [role="tab"] {
+  border: 2px solid white;
+	border-radius: 50%;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+  -webkit-box-shadow: 0 0 1px 0px rgb(255, 255, 255);
+  box-shadow: 0 0 1px 0px rgb(255, 255, 255);
+  width: 10px;
+  height: 10px;
+  z-index: 15;
+  bottom: 0;
+  margin: 0 4px;
+  display: inline-block;
+  float: left;
+  padding-right:2px;
+}
+
+.carousel [role="tab"][aria-selected="true"] {
+  background-color: white;
+  border-radius: 50%;
+}
+
+.carousel [role="tab"]:focus {
+  outline-offset: 1px;
+  outline-style: solid;
+  outline-color: white;
+  outline-width: 2px;
+}
+
+.carousel .carousel-control {
+  position: absolute;
+  top: 0;
+  z-index: 10;
+  font-size: 200%;
+  font-weight: bold;
+  color: #fff;
+  text-align: center;
+  text-shadow: 0 1px 2px rgba(0,0,0,.6);
+}
+
+.carousel a.carousel-control span {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  top: 40%;
+  font-size: 200%;
+  opacity:.70;
+}
+
+.carousel a.carousel-control.previous {
+  bottom: 0;
+  width: 15%;
+  background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
+}
+
+.carousel a.carousel-control.next {
+  right: 0;
+  bottom: 0;
+  width: 15%;
+  background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
+}
+
+.carousel a.carousel-control:focus span {
+  opacity:.99;
+}
+
+.carousel a.carousel-control:hover, a.carousel-control:focus {
+  color:#fff;
+  text-decoration:none;
+}
+
+.carousel [role="tab"][aria-selected="true"] {
+    color: white;
+}
+
+.carousel [role="tab"][aria-selected="false"] {
+  color: white;
+}

examples/carousel/carousel-1/js/carouselButtons.js

@@ -0,0 +1,88 @@
+/*
+*   File:   carouselButton.js
+*
+*   Desc:   Carousel Button widget that implements ARIA Authoring Practices
+*
+*   Author(s): Jon Gunderson, Nicholas Hoyt, and Mark McCarthy
+*/
+
+/*
+*   @constructor CarouselButton
+*
+*
+*/
+var CarouselButton = function (domNode, tablist) {
+  this.domNode = domNode;
+
+  this.tablist = tablist;
+
+  this.direction = 'previous';
+
+  if (this.domNode.classList.contains('next')) {
+    this.direction = 'next';
+  }
+
+  this.keyCode = Object.freeze({
+    'RETURN': 13,
+    'SPACE': 32,
+    'END': 35,
+    'HOME': 36,
+    'LEFT': 37,
+    'UP': 38,
+    'RIGHT': 39,
+    'DOWN': 40
+  });
+};
+
+CarouselButton.prototype.init = function () {
+  this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
+  this.domNode.addEventListener('click', this.handleClick.bind(this));
+  this.domNode.addEventListener('focus', this.handleFocus.bind(this));
+  this.domNode.addEventListener('blur', this.handleBlur.bind(this));
+};
+
+CarouselButton.prototype.changeTab = function () {
+  if (this.direction === 'previous') {
+    this.tablist.setSelectedToPreviousItem();
+  }
+  else {
+    this.tablist.setSelectedToNextItem();
+  }
+};
+
+
+/* EVENT HANDLERS */
+
+CarouselButton.prototype.handleKeydown = function (event) {
+  var flag = false;
+
+  switch (event.keyCode) {
+    case this.keyCode.SPACE:
+    case this.keyCode.RETURN:
+      this.changeTab();
+      this.domNode.focus();
+      flag = true;
+      break;
+
+    default:
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+CarouselButton.prototype.handleClick = function (event) {
+  this.changeTab();
+};
+
+CarouselButton.prototype.handleFocus = function (event) {
+  this.domNode.classList.add('focus');
+  this.tablist.toggleRotation(this);
+};
+
+CarouselButton.prototype.handleBlur = function (event) {
+  this.domNode.classList.remove('focus');
+};

examples/carousel/carousel-1/js/carouselTab.js

@@ -0,0 +1,106 @@
+/*
+*   File:   CarouselTab.js
+*
+*   Desc:   Carousel Tab widget that implements ARIA Authoring Practices
+*
+*   Author(s): Jon Gunderson, Nicholas Hoyt, and Mark McCarthy
+*/
+
+/*
+*   @constructor CarouselTab
+*
+*
+*/
+var CarouselTab = function (domNode, groupObj) {
+  this.domNode = domNode;
+  this.tablist = groupObj;
+
+  this.tabpanelDomNode = null;
+
+  this.keyCode = Object.freeze({
+    'RETURN': 13,
+    'SPACE': 32,
+    'END': 35,
+    'HOME': 36,
+    'LEFT': 37,
+    'UP': 38,
+    'RIGHT': 39,
+    'DOWN': 40
+  });
+};
+
+CarouselTab.prototype.init = function () {
+  this.domNode.tabIndex = -1;
+  if (!this.domNode.hasAttribute('aria-selected')) {
+    this.domNode.setAttribute('aria-selected', 'false');
+  }
+  this.tabpanelDomNode = document.getElementById(this.domNode.getAttribute('aria-controls'));
+
+  this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
+  this.domNode.addEventListener('click', this.handleClick.bind(this));
+  this.domNode.addEventListener('focus', this.handleFocus.bind(this));
+  this.domNode.addEventListener('blur', this.handleBlur.bind(this));
+};
+
+CarouselTab.prototype.hideTabPanel = function () {
+  this.tabpanelDomNode.classList.remove('active');
+  this.domNode.setAttribute('aria-selected', 'false');
+  this.domNode.tabIndex = -1;
+  this.domNode.classList.remove('focus');
+};
+
+CarouselTab.prototype.showTabPanel = function () {
+  this.tabpanelDomNode.classList.add('active');
+  this.domNode.setAttribute('aria-selected', 'true');
+  this.domNode.tabIndex = 0;
+  this.domNode.classList.add('focus');
+};
+
+/* EVENT HANDLERS */
+
+CarouselTab.prototype.handleKeydown = function (event) {
+  var flag = false;
+
+  switch (event.keyCode) {
+    case this.keyCode.UP:
+      this.tablist.setSelectedToPreviousItem(this, true);
+      flag = true;
+      break;
+    case this.keyCode.DOWN:
+      this.tablist.setSelectedToNextItem(this, true);
+      flag = true;
+      break;
+    case this.keyCode.LEFT:
+      this.tablist.setSelectedToPreviousItem(this, true);
+      flag = true;
+      break;
+    case this.keyCode.RIGHT:
+      this.tablist.setSelectedToNextItem(this, true);
+      flag = true;
+      break;
+
+    default:
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+CarouselTab.prototype.handleClick = function (event) {
+  this.tablist.setSelected(this);
+  console.log('pause status is ' + this.tablist.rotate);
+};
+
+CarouselTab.prototype.handleFocus = function (event) {
+  this.domNode.classList.add('focus');
+  this.tablist.hasFocus = true;
+  this.tablist.stopRotation();
+};
+
+CarouselTab.prototype.handleBlur = function (event) {
+  this.domNode.classList.remove('focus');
+  this.tablist.startRotation();
+};