Add compatiblity for IE8

.jshintrc

@@ -20,6 +20,7 @@
  "globals": {
  "jQuery": true,
  "define": true,
- "module": true
+ "module": true,
+ "bean": true
  }
 }

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## HEAD
 
+* Add compatiblity for IE8 (use "bean" library for event handling)
 * Allow the content with id 0 to be selected
 
 * Fix max height of modal content

index.html

@@ -11,6 +11,7 @@
 
  <!--[if lt IE 9]>
  <script src="test/lib/html5shiv.js"></script>
+ <script src="//cdnjs.cloudflare.com/ajax/libs/bean/1.0.6/bean.min.js"></script>
  <![endif]-->
 
  <style>

modal.js

@@ -9,26 +9,11 @@
 
  'use strict';
 
- /*
- * Polyfill CustomEvent
- */
- var CustomEvent = function (event, params) {
- var evt = document.createEvent('CustomEvent');
-
- params = params || {
- bubbles: false,
- cancelable: false,
- detail: undefined
- };
-
- evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
-
- return evt;
- };
-
- if (!window.CustomEvent) {
- CustomEvent.prototype = window.Event.prototype;
- window.CustomEvent = CustomEvent;
+ // We use bean if the browser doesn't support CustomEvents
+ if (window.CustomEvent) {
+ if (!window.bean) {
+ throw new Error('This browser doesn\'t support CustomEvent - please include bean: https://github.com/fat/bean');
+ }
  }
 
  /*
@@ -53,6 +38,7 @@
  * @param callback {function} gets fired if event is triggered
  */
  on: function (event, element, callback) {
+
  if (typeof event !== 'string') {
  throw new Error('Type error: `error` has to be a string');
  }
@@ -65,10 +51,10 @@
  return;
  }
 
- if (element.addEventListener) {
- element.addEventListener(event, callback, false);
+ if (window.bean) {
+ bean.on(element, event, callback);
  } else {
- element.attachEvent('on' + event, callback);
+ element.addEventListener(event, callback, false);
  }
  },
 
@@ -78,13 +64,24 @@
  * @param modal {string} id of modal that the event is triggered on
  */
  trigger: function (event, modal) {
- var eventTrigger = new CustomEvent(event,{
- detail: {
- 'modal': modal
- }
- });
+ var eventTrigger;
+
+ if (window.bean) {
+ eventTrigger = {
+ detail: {
+ 'modal': modal
+ }
+ };
+ bean.fire(document, event, eventTrigger);
+ } else {
+ eventTrigger = new CustomEvent(event,{
+ detail: {
+ 'modal': modal
+ }
+ });
 
- document.dispatchEvent(eventTrigger);
+ document.dispatchEvent(eventTrigger);
+ }
  },
 
  /*
@@ -138,7 +135,16 @@
  * @param element {node} element to keep focus in
  */
  keepFocus: function (element) {
- var allTabbableElements = element.querySelectorAll(modal.tabbableElements);
+ var allTabbableElements = [];
+
+ // Don't keep the focus if the browser is unable to support
+ // CSS3 selectors
+ try {
+ allTabbableElements = element.querySelectorAll(modal.tabbableElements);
+ } catch (ex) {
+ return;
+ }
+
  var firstTabbableElement = allTabbableElements[0];
  var lastTabbableElement = allTabbableElements[allTabbableElements.length - 1];
 

plugins/gallery.js

@@ -80,7 +80,7 @@
  * @return {Object} The detail image
  */
  var _getDetailView = function (element) {
- var container = element.getElementsByClassName('modal-detail')[0];
+ var container = element.querySelectorAll('.modal-detail')[0];
 
  if (!container) {
  throw new Error('".modal-detail" not found!');
@@ -145,8 +145,8 @@
  var i = 0;
 
  // Setup touch / click events
- _prev = element.getElementsByClassName('modal--gallery-navigation-prev')[0];
- _next = element.getElementsByClassName('modal--gallery-navigation-next')[0];
+ _prev = element.querySelectorAll('.modal--gallery-navigation-prev')[0];
+ _next = element.querySelectorAll('.modal--gallery-navigation-next')[0];
 
  for (; i < events.length; i++) {
  CSSModal.on(events[i], _prev, showPrevious);
@@ -167,7 +167,7 @@
  * @return {void}
  */
  var _readContent = function (element) {
- var contentList = element.getElementsByClassName('modal-content-list')[0];
+ var contentList = element.querySelectorAll('.modal-content-list')[0];
  return contentList.getElementsByTagName('li');
  };
 

plugins/modal-resize.js

@@ -187,17 +187,19 @@
  };
 
  var getHorizontalOffset = function () {
+ var innerWidth = global.innerWidth ? global.innerWidth : document.body.clientWidth;
  var element = CSSModal.activeElement.querySelector('.modal-inner');
  var elementWidth = parseInt(global.getComputedStyle(element).getPropertyValue('width'), 10);
- var offset = (global.innerWidth - elementWidth) / 2;
+ var offset = (innerWidth - elementWidth) / 2;
 
  return offset;
  };
 
  var getVerticalOffset = function () {
+ var innerHeight = global.innerHeight ? global.innerWidth : document.body.clientHeight;
  var element = CSSModal.activeElement.querySelector('.modal-inner');
  var elementHeight = parseInt(global.getComputedStyle(element).getPropertyValue('height'), 10);
- var offset = (global.innerHeight - elementHeight) / 2;
+ var offset = (innerHeight - elementHeight) / 2;
 
  return offset;
  };