waterline-postgresql
Version:
PostgreSQL Adapter for Sails and Waterline
186 lines (159 loc) • 5.3 kB
JavaScript
/**
* @fileOverview Media Query FallBack
* @author Wouter Bos (www.thebrightlines.com)
* @since 1.0 - 2010-09-10
* @version 1.0 - 2010-09-10
*/
if (typeof(wbos) == "undefined") {
/**
* @namespace wbos = Wouter Bos (www.thebrightlines.com)
*/
wbos = {}
}
if (typeof(wbos.CssTools) == "undefined") {
/**
* @namespace Namespace for CSS-related functionality
*/
wbos.CssTools = {}
}
/**
* @namespace Fallback for CSS advanced media query
* @class
* @since 1.0 - 2010-09-10
* @version 1.0 - 2010-09-10
*/
wbos.CssTools.MediaQueryFallBack = ( function() {
var config = {
cssScreen: "/css/screen.css",
cssHandheld: "/css/handheld.css",
mobileMaxWidth: 660,
testDivClass: "cssLoadCheck",
dynamicCssLinkId: "DynCssLink",
resizeDelay: 30
}
var noMediaQuery = false;
var delay;
var currentCssMediaType;
// Adding events to elements in the DOM without overwriting it
function addEvent(element, newFunction, eventType) {
var oldEvent = eval("element." + eventType);
var eventContentType = eval("typeof element." + eventType)
if ( eventContentType != 'function' ) {
eval("element." + eventType + " = newFunction")
} else {
eval("element." + eventType + " = function(e) { oldEvent(e); newFunction(e); }")
}
}
// Get the the inner width of the browser window
function getWindowWidth() {
if (window.innerWidth) {
return window.innerWidth;
} else if (document.documentElement.clientWidth) {
return document.documentElement.clientWidth;
} else if (document.body.clientWidth) {
return document.body.clientWidth;
} else{
return 0;
}
}
function addCssLink(cssHref) {
var cssNode = document.createElement('link');
var windowWidth;
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.media = 'screen, handheld, fallback';
//cssNode.id = config.dynamicCssLinkId;
cssNode.href = cssHref;
document.getElementsByTagName("head")[0].appendChild(cssNode);
}
/* Start public */
return {
/**
* Adds link to CSS in the head if no CSS is loaded
*
* @since 1.0 - 2010-08-21
* @version 1.0 - 2010-08-21
* @param {String|Object} cssScreen URL to CSS file for larger screens
* @param {String|Object} cssHandheld URL to CSS file for smaller screens
* @param {Number} mobileMaxWidth Maximum width for handheld devices
* @example
* wbos.CssTools.MediaQueryFallBack.LoadCss(['screen.css', 'screen2.css'], 'mobile.css', 480)
*/
LoadCss: function(cssScreen, cssHandheld, mobileMaxWidth) {
// Set config values
if (typeof(cssScreen) != "undefined") {
config.cssScreen = cssScreen;
}
if (typeof(cssHandheld) != "undefined") {
config.cssHandheld = cssHandheld;
}
if (typeof(mobileMaxWidth) != "undefined") {
config.mobileMaxWidth = mobileMaxWidth;
}
// Check if CSS is loaded
var cssloadCheckNode = document.createElement('div');
cssloadCheckNode.className = config.testDivClass;
document.getElementsByTagName("body")[0].appendChild(cssloadCheckNode);
if (cssloadCheckNode.offsetWidth != 100 && noMediaQuery == false) {
noMediaQuery = true;
}
cssloadCheckNode.parentNode.removeChild(cssloadCheckNode)
if (noMediaQuery == true) {
// Browser does not support Media Queries, so JavaScript will supply a fallback
var cssHref = "";
// Determines what CSS file to load
if (getWindowWidth() <= config.mobileMaxWidth) {
cssHref = config.cssHandheld;
newCssMediaType = "handheld";
} else {
cssHref = config.cssScreen;
newCssMediaType = "screen";
}
// Add CSS link to <head> of page
if (cssHref != "" && currentCssMediaType != newCssMediaType) {
var currentCssLinks = document.styleSheets
for (var i = 0; i < currentCssLinks.length; i++) {
for (var ii = 0; ii < currentCssLinks[i].media.length; ii++) {
if (typeof(currentCssLinks[i].media) == "object") {
if (currentCssLinks[i].media.item(ii) == "fallback") {
currentCssLinks[i].ownerNode.parentNode.removeChild(currentCssLinks[i].ownerNode)
i--
break;
}
} else {
if (currentCssLinks[i].media.indexOf("fallback") >= 0) {
currentCssLinks[i].owningElement.parentNode.removeChild(currentCssLinks[i].owningElement)
i--
break;
}
}
}
}
if (typeof(cssHref) == "object") {
for (var i = 0; i < cssHref.length; i++) {
addCssLink(cssHref[i])
}
} else {
addCssLink(cssHref)
}
currentCssMediaType = newCssMediaType;
}
// Check screen size again if user resizes window
addEvent(window, wbos.CssTools.MediaQueryFallBack.LoadCssDelayed, 'onresize')
}
},
/**
* Runs LoadCSS after a short delay
*
* @since 1.0 - 2010-08-21
* @version 1.0 - 2010-08-21
* @example
* wbos.CssTools.MediaQueryFallBack.LoadCssDelayed()
*/
LoadCssDelayed: function() {
clearTimeout(delay);
delay = setTimeout( "wbos.CssTools.MediaQueryFallBack.LoadCss()", config.resizeDelay)
}
}
/* End public */
})();