Skip to content

Remove IE detection because it disables features unnecessarily #100

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
cmwelsh wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Remove IE detection because it disables features unnecessarily #100

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
117 changes: 53 additions & 64 deletions guiders-1.3.0.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@

var guiders = (function($) {
var guiders = {};

guiders.version = "1.3.0";

guiders._defaultSettings = {
Expand All @@ -37,7 +37,7 @@ var guiders = (function($) {
top: null,
left: null
},
onClose: null,
onClose: null,
onHide: null,
onShow: null,
overlay: false,
Expand Down Expand Up @@ -89,20 +89,15 @@ var guiders = (function($) {
"leftTop": 10
};
guiders._windowHeight = 0;

// Basic IE browser detection
var ieBrowserMatch = navigator.userAgent.match('MSIE (.)');
guiders._isIE = ieBrowserMatch && ieBrowserMatch.length > 1;
guiders._ieVersion = ieBrowserMatch && ieBrowserMatch.length > 1 ? Number(ieBrowserMatch[1]) : -1;


guiders._addButtons = function(myGuider) {
var guiderButtonsContainer = myGuider.elem.find(".guiders_buttons_container");

if (myGuider.buttons === null || myGuider.buttons.length === 0) {
guiderButtonsContainer.remove();
return;
}

for (var i = myGuider.buttons.length - 1; i >= 0; i--) {
var thisButton = myGuider.buttons[i];
var thisButtonElem = $(guiders._buttonElement,
Expand All @@ -112,9 +107,9 @@ var guiders = (function($) {
if (typeof thisButton.classString !== "undefined" && thisButton.classString !== null) {
thisButtonElem.addClass(thisButton.classString);
}

guiderButtonsContainer.append(thisButtonElem);

var thisButtonName = thisButton.name.toLowerCase();
if (thisButton.onclick) {
thisButtonElem.bind(guiders._buttonClickEvent, thisButton.onclick);
Expand All @@ -141,12 +136,12 @@ var guiders = (function($) {
}
}
}

if (myGuider.buttonCustomHTML !== "") {
var myCustomHTML = $(myGuider.buttonCustomHTML);
myGuider.elem.find(".guiders_buttons_container").append(myCustomHTML);
}

if (myGuider.buttons.length === 0) {
guiderButtonsContainer.remove();
}
Expand Down Expand Up @@ -176,39 +171,36 @@ var guiders = (function($) {
}
return false;
}
});
});
};

guiders._unWireEscape = function (myGuider) {
$(document).unbind("keydown");
};

guiders._attach = function(myGuider) {
if (typeof myGuider !== 'object') {
return;
}

var attachTo = $(myGuider.attachTo);

var myHeight = myGuider.elem.innerHeight();
var myWidth = myGuider.elem.innerWidth();

if (myGuider.position === 0 || attachTo.length === 0) {
var fixedOrAbsolute = "fixed";
if (guiders._isIE && guiders._ieVersion < 9) {
fixedOrAbsolute = "absolute";
}
myGuider.elem.css("position", fixedOrAbsolute);
myGuider.elem.css("top", ($(window).height() - myHeight) / 3 + "px");
myGuider.elem.css("left", ($(window).width() - myWidth) / 2 + "px");
return;
}

// Otherwise, the guider is positioned relative to the attachTo element.
var base = attachTo.offset();
var top = base.top;
var left = base.left;

// topMarginOfBody corrects positioning if body has a top margin set on it.
var topMarginOfBody = $("body").outerHeight(true) - $("body").outerHeight(false);
top -= topMarginOfBody;
Expand All @@ -219,11 +211,11 @@ var guiders = (function($) {
// As an alternative to the clock model, you can also use keywords to position the guider.
myGuider.position = guiders._offsetNameMapping[myGuider.position];
}

var attachToHeight = attachTo.innerHeight();
var attachToWidth = attachTo.innerWidth();
var attachToWidth = attachTo.innerWidth();
var bufferOffset = 0.9 * guiders._arrowSize;

// offsetMap follows the form: [height, width]
var offsetMap = {
1: [-bufferOffset - myHeight, attachToWidth - myWidth],
Expand All @@ -239,11 +231,11 @@ var guiders = (function($) {
11: [-bufferOffset - myHeight, 0],
12: [-bufferOffset - myHeight, attachToWidth/2 - myWidth/2]
};

var offset = offsetMap[myGuider.position];
top += offset[0];
left += offset[1];

var positionType = "absolute";
// If the element you are attaching to is position: fixed, then we will make the guider
// position: fixed as well.
Expand All @@ -252,24 +244,24 @@ var guiders = (function($) {
top -= $(window).scrollTop();
left -= $(window).scrollLeft();
}

// If you specify an additional offset parameter when you create the guider, it gets added here.
if (myGuider.offset.top !== null) {
top += myGuider.offset.top;
}
if (myGuider.offset.left !== null) {
left += myGuider.offset.left;
}

guiders._styleArrow(myGuider);

// Finally, set the style of the guider and return it!
myGuider.elem.css({
"position": positionType,
"top": top,
"left": left
});

return myGuider;
};

Expand All @@ -289,9 +281,6 @@ var guiders = (function($) {
this.style.removeAttribute("filter");
}
});
if (guiders._isIE) {
$("#guiders_overlay").css("position", "absolute");
}
};

guiders._highlightElement = function(selector) {
Expand Down Expand Up @@ -333,7 +322,7 @@ var guiders = (function($) {
12: "guiders_arrow_down"
};
myGuiderArrow.addClass(newClass[position]);

var myHeight = myGuider.elem.innerHeight();
var myWidth = myGuider.elem.innerWidth();
var arrowOffset = guiders._arrowSize / 2;
Expand Down Expand Up @@ -380,7 +369,7 @@ var guiders = (function($) {
var currentGuider = guiders._guiders[guiders._currentGuiderID];
guiders._attach(currentGuider);
};

guiders.next = function() {
var currentGuider = guiders._guiders[guiders._currentGuiderID];
if (typeof currentGuider === "undefined") {
Expand Down Expand Up @@ -417,10 +406,10 @@ var guiders = (function($) {
// no previous to look at
return;
}

var prevGuider = guiders._guiders[currentGuider.prev];
prevGuider.elem.data("locked", true);

// Note we use prevGuider.id as "prevGuider" is _already_ looking at the previous guider
var prevGuiderId = prevGuider.id || null;
if (prevGuiderId !== null && prevGuiderId !== "") {
Expand All @@ -438,46 +427,46 @@ var guiders = (function($) {
if (passedSettings === null || passedSettings === undefined) {
passedSettings = {};
}

// Extend those settings with passedSettings
myGuider = $.extend({}, guiders._defaultSettings, passedSettings);
myGuider.id = myGuider.id || String(Math.floor(Math.random() * 1000));

var guiderElement = $(guiders._htmlSkeleton);
myGuider.elem = guiderElement;
if (typeof myGuider.classString !== "undefined" && myGuider.classString !== null) {
myGuider.elem.addClass(myGuider.classString);
}
myGuider.elem.css("width", myGuider.width + "px");

var guiderTitleContainer = guiderElement.find(".guiders_title");
guiderTitleContainer.html(myGuider.title);

guiderElement.find(".guiders_description").html(myGuider.description);

guiders._addButtons(myGuider);

if (myGuider.xButton) {
guiders._addXButton(myGuider);
}

guiderElement.hide();
guiderElement.appendTo("body");
guiderElement.attr("id", myGuider.id);

// Ensure myGuider.attachTo is a jQuery element.
if (typeof myGuider.attachTo !== "undefined" && myGuider !== null) {
guiders._attach(myGuider);
}

guiders._initializeOverlay();

guiders._guiders[myGuider.id] = myGuider;
if (guiders._lastCreatedGuiderID != null) {
myGuider.prev = guiders._lastCreatedGuiderID;
}
guiders._lastCreatedGuiderID = myGuider.id;

/**
* If the URL of the current window is of the form
* http://www.myurl.com/mypage.html#guider=id
Expand All @@ -486,9 +475,9 @@ var guiders = (function($) {
if (myGuider.isHashable) {
guiders._showIfHashed(myGuider);
}

return guiders;
};
};

guiders.hideAll = function(omitHidingOverlay, next) {
next = next || false;
Expand Down Expand Up @@ -516,7 +505,7 @@ var guiders = (function($) {
if (!id && guiders._lastCreatedGuiderID) {
id = guiders._lastCreatedGuiderID;
}

var myGuider = guiders._guiderById(id);
if (myGuider.overlay) {
guiders._showOverlay();
Expand All @@ -525,57 +514,57 @@ var guiders = (function($) {
guiders._highlightElement(myGuider.highlight);
}
}

if (myGuider.closeOnEscape) {
guiders._wireEscape(myGuider);
} else {
guiders._unWireEscape(myGuider);
}

// You can use an onShow function to take some action before the guider is shown.
if (myGuider.onShow) {
myGuider.onShow(myGuider);
}
guiders._attach(myGuider);
myGuider.elem.fadeIn("fast").data("locked", false);

guiders._currentGuiderID = id;

var windowHeight = guiders._windowHeight = $(window).height();
var scrollHeight = $(window).scrollTop();
var guiderOffset = myGuider.elem.offset();
var guiderElemHeight = myGuider.elem.height();

var isGuiderBelow = (scrollHeight + windowHeight < guiderOffset.top + guiderElemHeight); /* we will need to scroll down */
var isGuiderAbove = (guiderOffset.top < scrollHeight); /* we will need to scroll up */

if (myGuider.autoFocus && (isGuiderBelow || isGuiderAbove)) {
// Sometimes the browser won't scroll if the person just clicked,
// so let's do this in a setTimeout.
setTimeout(guiders.scrollToCurrent, 10);
}

$(myGuider.elem).trigger("guiders.show");

return guiders;
};

guiders.scrollToCurrent = function() {
var currentGuider = guiders._guiders[guiders._currentGuiderID];
if (typeof currentGuider === "undefined") {
return;
}

var windowHeight = guiders._windowHeight;
var scrollHeight = $(window).scrollTop();
var guiderOffset = currentGuider.elem.offset();
var guiderElemHeight = currentGuider.elem.height();

// Scroll to the guider's position.
var scrollToHeight = Math.round(Math.max(guiderOffset.top + (guiderElemHeight / 2) - (windowHeight / 2), 0));
window.scrollTo(0, scrollToHeight);
};

// Change the bubble position after browser gets resized
var _resizing = undefined;
$(window).resize(function() {
Expand All @@ -589,6 +578,6 @@ var guiders = (function($) {
}
}, 20);
});

return guiders;
}).call(this, jQuery);