From 90449a43cc98cba58f5b6984b79758bba8c311c0 Mon Sep 17 00:00:00 2001 From: Derek Anderson Date: Sat, 15 Feb 2014 22:06:23 -0600 Subject: [PATCH 1/2] classList.add, classList.remove and addEventListener don't work in IE8/IE9. added workarounds. --- flippant.js | 58 +++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 45 insertions(+), 13 deletions(-) diff --git a/flippant.js b/flippant.js index 31f8c8b..b3867e5 100644 --- a/flippant.js +++ b/flippant.js @@ -2,6 +2,34 @@ return (function(e,t,n){function i(n,s){if(!t[n]){if(!e[n]){var o=typeof require=="function"&&require;if(!s&&o)return o(n,!0);if(r)return r(n,!0);throw new Error("Cannot find module '"+n+"'")}var u=t[n]={exports:{}};e[n][0].call(u.exports,function(t){var r=e[n][1][t];return i(r?r:t)},u,u.exports)}return t[n].exports}var r=typeof require=="function"&&require;for(var s=0;s', + all[0] + ); + return v > 4 ? v : undef; +}()); + +function _flippant_add_class(o, cls) { + if (_flippant_ie_ver < 10) { + o.className += ' '+cls; + } else { + o.classList.add(cls); + } +} + +function _flippant_remove_class(o, cls) { + if (_flippant_ie_ver < 10) { + o.className = (' '+o.className+' ').replace(' '+cls+' ',' '); + } else { + o.classList.remove(cls) + } +} + function flip(flipper, content, type, class_name, timeout) { var position , back @@ -26,9 +54,9 @@ function flip(flipper, content, type, class_name, timeout) { set_styles(back, flipper, position) back.innerHTML = content - flipper.classList.add('flippant') - back.classList.add('flippant-back') - back.classList.add(class_name) + _flippant_add_class(flipper, 'flippant'); + _flippant_add_class(back, 'flippant-back'); + _flippant_add_class(back, class_name); if (position == "absolute") { style_func(back) } else { @@ -37,21 +65,25 @@ function flip(flipper, content, type, class_name, timeout) { }, 0) } window.setTimeout(function () { - back.classList.add('flipper') - back.classList.add('flipped') - flipper.classList.add('flipped') + _flippant_add_class(back, 'flipper'); + _flippant_add_class(back, 'flipped'); + _flippant_add_class(flipper, 'flipped'); }, 0) - back.addEventListener('close', close) + if (!back.addEventListener) { + back.attachEvent('close', close) + } else { + back.addEventListener('close', close) + } back.close = close function close() { set_styles(back, flipper, position) - back.classList.remove('flipped') - back.classList.remove('flipped') - flipper.classList.remove('flipped') + _flippant_remove_class(back, 'flipper') + _flippant_remove_class(back, 'flipped') + _flippant_remove_class(flipper, 'flipped') window.setTimeout(function () { - back.classList.remove(class_name) + _flippant_remove_class(back, class_name) document.body.removeChild(back) }, timeout) } @@ -65,7 +97,7 @@ function set_styles(back, front, position) { back.style.left = front.offsetLeft + "px" back.style['min-height'] = front.offsetHeight + "px" back.style.width = front.offsetWidth + "px" - back.style["z-index"] = 9999 + back.style["z-index"] = 999 } function null_styles(back) { @@ -80,4 +112,4 @@ function card_styles(back) { } },{}]},{},[1])(1) }); -; \ No newline at end of file +; From edb1f1fdb5017d21b09b94f9a9fcc06e00ef4b9a Mon Sep 17 00:00:00 2001 From: Derek Anderson Date: Sat, 15 Feb 2014 22:07:26 -0600 Subject: [PATCH 2/2] read online that rgba isn't respected in older IE versions, and this filter is a good sub. --- flippant.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/flippant.css b/flippant.css index 7f082e3..549ea45 100644 --- a/flippant.css +++ b/flippant.css @@ -57,10 +57,11 @@ box-shadow: 0 0 10px rgba(0,0,0,0.5); } -.flippant-modal-dark, .flippant-modal-dark p { color: white;} +.flippant-modal-dark, .flippant-modal-dark p { color: white; } .flippant-modal-light { background: rgba(230,230,230,0.7); + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#b3e6e6e6', endColorstr='#b3e6e6e6'); box-shadow: 3px 3px 6px rgba(0,0,0,0.3); border-radius: 5px; border: 1px solid #aaa;