Skip to content

Toggling functionality for legacy browser ie8 and ie9 included #113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kzahirag wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Toggling functionality for legacy browser ie8 and ie9 included #113

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3e15f2f
ie8 and ie9 sliding fix
kzahirag Aug 21, 2013
2b2c46e
remove console.log
kzahirag Aug 21, 2013
d08faba
toggling functionality for legacy browser ie8 and ie9 included
kzahirag Aug 22, 2013
1a08e84
Date.now() in IE8 not supported! fix included
kzahirag Aug 26, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
208 changes: 182 additions & 26 deletions snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@
*/
/*jslint browser: true*/
/*global define, module, ender*/
(function(win, doc) {
(function(win, doc) {
'use strict';
var Snap = Snap || function(userOpts) {
var Snap = Snap || function(userOpts) {
var settings = {
element: null,
dragger: null,
Expand Down Expand Up @@ -127,7 +127,7 @@
if (element.addEventListener) {
return element.addEventListener(eventName, func, false);
} else if (element.attachEvent) {
return element.attachEvent("on" + eventName, func);
return element.attachEvent("on" + eventName, func);
}
},
removeEvent: function addEvent(element, eventName, func) {
Expand Down Expand Up @@ -156,7 +156,146 @@
el = el.parentNode;
}
return null;
}
},
/**
* Support for legacy browser IE8 and IE9
*/
legacy : {
init: function() {
utils.legacy.browser.setVersion(utils.legacy.browser.getVersion());
},
navigation: {
//Side Navigation (open or closed)
opened: false,
isOpen: function isOpen() {
return utils.legacy.navigation.opened;
},
setOpen: function setOpen( val ) {
utils.legacy.navigation.opened = val;
},

//Orientation (left or right)
side: '',
setSide: function( val ){
utils.legacy.navigation.side = val;
},
getSide: function() {
return utils.legacy.navigation.side;
}
},
browser: {
version: null,
getVersion: function() {
var ver = -1; // Return value assumes failure.
if (navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
ver = parseFloat( RegExp.$1 );
}
return ver;
},
setVersion: function( val ) {
utils.legacy.browser.version = val;
}
},
handleIE: function() {
var side = utils.legacy.navigation.side;
if (utils.legacy.browser.version == 8 || utils.legacy.browser.version == 9){
if (side === 'left') {
if(utils.legacy.navigation.isOpen()){
menuStyleOpened = { left: '0px' };
utils.legacy.navigation.setOpen(false);
}else {
menuStyleOpened = { left: settings.maxPosition + 'px' };
utils.legacy.navigation.setOpen(true);
}
utils.legacy.animate( settings.element, menuStyleOpened, 500 );
} else if (side === 'right') {
if(utils.legacy.navigation.isOpen()){
menuStyleOpened = { left: '0px' };
utils.legacy.navigation.setOpen(false);
}else {
menuStyleOpened = { left: settings.minPosition + 'px' };
utils.legacy.navigation.setOpen(true);
}
utils.legacy.animate( settings.element, menuStyleOpened, 500 );
}
}
},
handleIETapToClose: function() {
var side = utils.legacy.navigation.side;
if (utils.legacy.browser.version == 8 || utils.legacy.browser.version == 9){
if (side === 'left') {
if(utils.legacy.navigation.isOpen()){
menuStyleOpened = { left: '0px' };
utils.legacy.navigation.setOpen(false);
}
utils.legacy.animate( settings.element, menuStyleOpened, 500 );
} else if (side === 'right') {
if(utils.legacy.navigation.isOpen()){
menuStyleOpened = { left: '0px' };
utils.legacy.navigation.setOpen(false);
}
utils.legacy.animate( settings.element, menuStyleOpened, 500 );
}
}
},
getDateNow: function() {
if (utils.legacy.browser.version == 8) {
return +new Date;
}
return Date.Now();
},
/**
* Helper method, changes an element style over time.
* http://lab.hakim.se/meny/
*/
animate: function( element, properties, duration, callback ) {
return (function() {
// Will hold start/end values for all properties
var interpolations = {};
// Format properties
for( var p in properties ) {
interpolations[p] = {
start: parseFloat( element.style[p] ) || 0,
end: parseFloat( properties[p] ),
unit: ( typeof properties[p] === 'string' && properties[p].match( /px|em|%/gi ) ) ? properties[p].match( /px|em|%/gi )[0] : ''
};
}
var animationStartTime = utils.legacy.getDateNow(),
animationTimeout;
// Takes one step forward in the animation
function step() {
// Ease out
var progress = 1 - Math.pow( 1 - ( ( utils.legacy.getDateNow() - animationStartTime ) / duration ), 5 );
// Set style to interpolated value
for( var p in interpolations ) {
var property = interpolations[p];
element.style[p] = property.start + ( ( property.end - property.start ) * progress ) + property.unit;
}
// Continue as long as we're not done
if( progress < 1 ) {
animationTimeout = setTimeout( step, 1000 / 60 );
}
else {
callback && callback();
stop();
}
}
// Cancels the animation
function stop() {
clearTimeout( animationTimeout );
}
// Starts the animation
step();
return {
stop: stop
};
})();
}
}
},
action = {
translate: {
Expand All @@ -166,16 +305,20 @@
if( !utils.canTransform() ){
return parseInt(settings.element.style.left, 10);
} else {
var matrix = win.getComputedStyle(settings.element)[cache.vendor+'Transform'].match(/\((.*)\)/),
ieOffset = 8;
if (matrix) {
matrix = matrix[1].split(',');
if(matrix.length===16){
index+=ieOffset;
}
return parseInt(matrix[index], 10);
}
return 0;
try {
var matrix = win.getComputedStyle(settings.element)[cache.vendor+'Transform'].match(/\((.*)\)/),
ieOffset = 8;
if (matrix) {
matrix = matrix[1].split(',');
if(matrix.length===16){
index+=ieOffset;
}
return parseInt(matrix[index], 10);
}
return 0;
} catch (err) {
// Silence unimportant errors in IE8 (getComputedStyle not supported)
}
}
}
},
Expand All @@ -199,6 +342,7 @@
cache.translation = n;
action.translate.x(n);
} else {

cache.easing = true;
cache.easingTo = n;

Expand All @@ -207,15 +351,17 @@
cache.animatingInterval = setInterval(function() {
utils.dispatchEvent('animating');
}, 1);
utils.events.addEvent(settings.element, utils.transitionCallback(), action.translate.easeCallback);

action.translate.x(n);
}
if(n===0){
settings.element.style[cache.vendor+'Transform'] = '';
}
},
x: function(n) {

if( (settings.disable==='left' && n>0) ||
(settings.disable==='right' && n<0)
){ return; }
Expand All @@ -233,13 +379,13 @@
n = 0;
}

if( utils.canTransform() ){
var theTranslate = 'translate3d(' + n + 'px, 0,0)';
settings.element.style[cache.vendor+'Transform'] = theTranslate;
if( utils.canTransform() ){
var theTranslate = 'translate3d(' + n + 'px, 0,0)';
settings.element.style[cache.vendor+'Transform'] = theTranslate;
} else {

settings.element.style.width = (win.innerWidth || doc.documentElement.clientWidth)+'px';

settings.element.style.left = n+'px';
settings.element.style.left = n+'px';
settings.element.style.right = '';
}
}
Expand Down Expand Up @@ -417,19 +563,22 @@
if (cache.isDragging) {
utils.dispatchEvent('end');
var translated = action.translate.get.matrix(4);

// Tap Close
if (cache.dragWatchers.current === 0 && translated !== 0 && settings.tapToClose) {
utils.dispatchEvent('close');
utils.events.prevent(e);
action.translate.easeTo(0);
cache.isDragging = false;
cache.isDragging = false;
cache.startDragX = 0;
utils.legacy.handleIETapToClose();
return;
}



// Revealing Left
if (cache.simpleStates.opening === 'left') {

// Halfway, Flicking, or Too Far Out
if ((cache.simpleStates.halfway || cache.simpleStates.hyperExtending || cache.simpleStates.flick)) {
if (cache.simpleStates.flick && cache.simpleStates.towards === 'left') { // Flicking Closed
Expand Down Expand Up @@ -459,14 +608,17 @@
action.translate.easeTo(0); // Close Right
}
}

cache.isDragging = false;
cache.startDragX = utils.page('X', e);

}
}
}
}
},
init = function(opts) {
if (opts.element) {
utils.legacy.init();
utils.deepExtend(settings, opts);
cache.vendor = utils.vendor();
action.drag.listen();
Expand All @@ -479,7 +631,7 @@
utils.dispatchEvent('open');
utils.klass.remove(doc.body, 'snapjs-expand-left');
utils.klass.remove(doc.body, 'snapjs-expand-right');

if (side === 'left') {
cache.simpleStates.opening = 'left';
cache.simpleStates.towards = 'right';
Expand All @@ -493,10 +645,14 @@
utils.klass.add(doc.body, 'snapjs-right');
action.translate.easeTo(settings.minPosition);
}

utils.legacy.navigation.setSide(side);
utils.legacy.handleIE();
};
this.close = function() {
utils.dispatchEvent('close');
action.translate.easeTo(0);

};
this.expand = function(side){
var to = win.innerWidth || doc.documentElement.clientWidth;
Expand Down Expand Up @@ -565,4 +721,4 @@
return Snap;
});
}
}).call(this, window, document);
}).call(this, window, document);