/*****************************************************************/ /* 5grid 0.4 by n33.co | MIT+GPLv2 license licensed */ /* init.js: Init script */ /*****************************************************************/ /*********************/ /* Settings */ /*********************/ var _5grid_settings = { breakpoint_1000px: 1200, breakpoint_mobile: 480, prefix: 'style', use: 'mobile,desktop', viewport_is1000px: 1040, viewport_is1200px: 1280, //////////////////////////////////////////////////////// mobileUI: 0, mobileUI_hideAddressBar: 0, mobileUI_openerText: '=', mobileUI_openerWidth: 60, mobileUI_slideSpeed: 200, mobileUI_theme: 'modern', mobileUI_themeNavColor: '#1f1f1f', mobileUI_themeTitleBarColor: '#444444', mobileUI_titleBarFixed: 1, mobileUI_titleBarHeight: 44, mobileUI_titleBarOverlaid: 0, //////////////////////////////////////////////////////// mobileUI_navInnerPad: 0, mobileUI_force: 0, mobileUI_tapDelay: 200, debug_noExtLoad: 0 }; /*********************/ /* Helper plugins */ /*********************/ /* jQuery resize event - v1.1 - 3/14/2010 http://benalman.com/projects/jquery-resize-plugin/ | Copyright (c) 2010 "Cowboy" Ben Alman | Dual licensed under the MIT and GPL licenses. | http://benalman.com/about/license/ */ (function(jQuery,h,c){var a=jQuery([]),e=jQuery.resize=jQuery.extend(jQuery.resize,{}),i,k="setTimeout",j="resize",d=j+"-special-event",b="delay",f="throttleWindow";e[b]=250;e[f]=true;jQuery.event.special[j]={setup:function(){if(!e[f]&&this[k]){return false}var l=jQuery(this);a=a.add(l);jQuery.data(this,d,{w:l.width(),h:l.height()});if(a.length===1){g()}},teardown:function(){if(!e[f]&&this[k]){return false}var l=jQuery(this);a=a.not(l);l.removeData(d);if(!a.length){clearTimeout(i)}},add:function(l){if(!e[f]&&this[k]){return false}var n;function m(s,o,p){var q=jQuery(this),r=jQuery.data(this,d);r.w=o!==c?o:q.width();r.h=p!==c?p:q.height();n.apply(this,arguments)}if(jQuery.isFunction(l)){n=l;return m}else{n=l.handler;l.handler=m}}};function g(){i=h[k](function(){a.each(function(){var n=jQuery(this),m=n.width(),l=n.height(),o=jQuery.data(this,d);if(m!==o.w||l!==o.h){n.trigger(j,[o.w=m,o.h=l])}});g()},e[b])}})(jQuery,this); /*********************/ /* Object Setup */ /*********************/ var _5gridC = function() { this.events = new Array(); this.readyWait = false; this.isReady = false; this.isMobile = false; this.isDesktop = false; this.isFluid = false; this.is1000px = false; this.is1200px = false; } _5gridC.prototype.bind = function(name, f) { if (!this.events[name]) this.events[name] = new Array(); this.events[name].push(f); } _5gridC.prototype.trigger = function(name) { if (!this.isReady || !this.events[name] || this.events[name].length < 1) return; for (i in this.events[name]) (this.events[name][i])(); } _5gridC.prototype.ready = function(f, wait) { if (wait) this.readyWait = true; this.bind('ready', f); } // Custom events _5gridC.prototype.orientationChange = function(f) { this.bind('orientationChange', f); } _5gridC.prototype.mobileUINavOpen = function(f) { this.bind('mobileUINavOpen', f); } _5gridC.prototype.mobileUINavClose = function(f) { this.bind('mobileUINavClose', f); } _5gridC.prototype.readyCheck = function() { var x = this; window.setTimeout(function() { if (x.isReady) x.trigger('ready'); else x.readyCheck(); }, 50); } var _5grid = new _5gridC; (function() { /*********************/ /* Initialize */ /*********************/ // Vars var _settings = _5grid_settings, _window = jQuery(window), _head = jQuery('head'), _document = jQuery(document); var baseURL, doFluid, do1000px, do1200px, doMobile, doDesktop, doMobileOnly, isLocked = false, isTapLocked = false, tapId, isTouch = !!('ontouchstart' in window), headQueue = new Array(); var v, w, wk, wv, x, y; // Tap handling jQuery.fn.tap_5grid = function(f, suffix, noMove) { var target = jQuery(this); if (isTouch) { target .bind('touchstart' + (suffix ? '.' + suffix : ''), function() { if (!isTapLocked) { isTapLocked = true; if (_settings.mobileUI_tapDelay > -1) tapId = window.setTimeout(function() { window.clearTimeout(tapId); isTapLocked = false; }, _settings.mobileUI_tapDelay); } }) .bind('touchend' + (suffix ? '.' + suffix : ''), function(e) { if (isTapLocked) { isTapLocked = false; window.clearTimeout(tapId); (f)(e); } }); if (noMove) target .bind('touchmove' + (suffix ? '.' + suffix : ''), function(e) { isTapLocked = false; window.clearTimeout(tapId); }); } else target.bind('click' + (suffix ? '.' + suffix : ''), f); return target; }; jQuery.fn.untap_5grid = function(suffix) { var target = jQuery(this); if (isTouch) { target .unbind('touchstart' + (suffix ? '.' + suffix : '')) .unbind('touchend' + (suffix ? '.' + suffix : '')) .unbind('touchmove' + (suffix ? '.' + suffix : '')); } else target.unbind('click' + (suffix ? '.' + suffix : '')); return target; }; // Shortcut methods headQueue.pushI_5grid = function(s) { headQueue.push({ type: 'i', value: s }); }; headQueue.pushE_5grid = function(s) { headQueue.push({ type: 'e', value: s }); }; headQueue.process_5grid = function() { var doE; if (document.createStyleSheet) doE = function(s) { document.createStyleSheet(s); }; else doE = function(s) { _head.append(''); }; for (x in headQueue) { if (headQueue[x].type == 'i') _head.append(''); else if (headQueue[x].type == 'e') (doE)(headQueue[x].value); } }; jQuery.fn.disableSelection_5grid = function() { return jQuery(this).css('user-select', 'none').css('-khtml-user-select', 'none').css('-moz-user-select', 'none').css('-o-user-select', 'none').css('-webkit-user-select', 'none'); } jQuery.fn.enableSelection_5grid = function() { return jQuery(this).css('user-select', 'auto').css('-khtml-user-select', 'auto').css('-moz-user-select', 'auto').css('-o-user-select', 'auto').css('-webkit-user-select', 'auto'); } jQuery.fn.accelerate_5grid = function() { return jQuery(this).css('-webkit-transform', 'translateZ(0)').css('-webkit-backface-visibility', 'hidden').css('-webkit-perspective', '500'); } // Determine base URL, settings x = jQuery('script').filter(function() { return this.src.match(/5grid\/init\.js/); }).first(); y = x.attr('src').split('?'); baseURL = y[0].replace(/5grid\/init\.js/, ''); // Override settings if (y.length > 1) { x = y[1].split('&'); for (v in x) { w = x[v].split('='); wk = w[0].replace(/\./, '_'); wv = w[1]; // Thanks, @cmsalvado! :) if (!isNaN(parseFloat(wv)) && isFinite(wv)) wv = parseInt(wv); _settings[wk] = wv; } } // Debug settings if (_settings.debug_noExtLoad == 1) headQueue.pushE_5grid = function(s) { }; // Determine viewing modes doDesktop = doMobile = doFluid = do1000px = do1200px = doMobileOnly = false; v = _settings.use.split(','); if (jQuery.inArray('fluid', v) > -1) doFluid = true; if (jQuery.inArray('desktop', v) > -1) doDesktop = true; if (jQuery.inArray('1000px', v) > -1) do1000px = true; if (jQuery.inArray('1200px', v) > -1) do1200px = true; if (jQuery.inArray('mobile', v) > -1) doMobile = true; if (doMobile && !doFluid && !do1000px && !do1200px && !doDesktop) doMobileOnly = true; // Apply workarounds for broken/old browsers // Android, Webkit <= 534 if (navigator.userAgent.match(/Android.+AppleWebKit\/534/)) _settings.mobileUI_titleBarFixed = 0; // IE <= 8 if (jQuery.browser.msie) { // HTML5 Shiv if (jQuery.browser.version < 9) _head.append(''); // Versions that don't support CSS3 pseudo classes if (jQuery.browser.version < 8) { jQuery(function() { jQuery('.5grid, .5grid-layout, .do-5grid').after('
'); jQuery('.5grid-layout').css('position', 'relative'); jQuery('.5grid, .do-5grid').css('position', 'relative'); jQuery('.5grid > .row > :first-child, .5grid-layout > .row > :first-child, .do-5grid > .row > :first-child').css('margin-left', '0'); jQuery('.5grid > .row:first-child, .5grid-layout > .row:first-child, .do-5grid > .row:first-child').css('margin-top', '0'); jQuery('.5grid > .row:last-child, .5grid-layout > .row:last-child, .do-5grid > .row:last-child').css('margin-bottom', '0'); }); } } // Insert stylesheets headQueue.pushE_5grid(baseURL + '5grid/core.css') headQueue.pushE_5grid(baseURL + _settings.prefix + '.css'); /*********************/ /* Responsive */ /*********************/ (function() { var ww = _window.width(), sw = screen.width, orientation = window.orientation; // Fix: On iOS, screen.width is always the width of the device held in portrait mode. // Android, however, sets it to the width of the device in its current orientation. // This ends up breaking our detection on HD devices held in landscape mode, so we // do a little trick here to detect this condition and make things right. if (screen.width > screen.height && Math.abs(orientation) == 90) sw = screen.height; // Mobile (exclusive) if ((doMobile && (ww <= _settings.breakpoint_mobile || sw <= _settings.breakpoint_mobile)) || doMobileOnly) { _5grid.isMobile = true; _head.prepend(''); headQueue.pushE_5grid(baseURL + '5grid/core-mobile.css'); if (_settings.mobileUI == 1) { _settings.mobileUI_force = 1; if (_settings.mobileUI_theme != 'none') { headQueue.pushE_5grid(baseURL + '5grid/mobileUI-' + _settings.mobileUI_theme + '.css'); if (_settings.mobileUI_themeTitleBarColor) headQueue.pushI_5grid('#mobileUI-site-titlebar { background-color: ' + _settings.mobileUI_themeTitleBarColor + '; }'); if (_settings.mobileUI_themeNavColor) headQueue.pushI_5grid('#mobileUI-site-nav { background-color: ' + _settings.mobileUI_themeNavColor + '; }'); } } headQueue.pushE_5grid(baseURL + _settings.prefix + '-mobile.css'); } else { // Fluid (exclusive) if (doFluid) { _5grid.isFluid = true; _head.prepend(''); headQueue.pushE_5grid(baseURL + '5grid/core-desktop.css'); headQueue.pushE_5grid(baseURL + '5grid/core-fluid.css'); headQueue.pushE_5grid(baseURL + _settings.prefix + '-fluid.css'); } // Desktop else if (doDesktop) { _5grid.isDesktop = true; headQueue.pushE_5grid(baseURL + '5grid/core-desktop.css'); headQueue.pushE_5grid(baseURL + _settings.prefix + '-desktop.css'); // 1200px if (ww >= _settings.breakpoint_1000px) { _5grid.is1200px = true; _head.prepend(''); headQueue.pushE_5grid(baseURL + '5grid/core-1200px.css'); // Load 1200px stylesheet if 1200px was explicitly enabled if (do1200px) headQueue.pushE_5grid(baseURL + _settings.prefix + '-1200px.css'); } // 1000px else { _5grid.is1000px = true; _head.prepend(''); headQueue.pushE_5grid(baseURL + '5grid/core-1000px.css'); // Load 1000px stylesheet if 1000px was explicitly enabled if (do1000px) headQueue.pushE_5grid(baseURL + _settings.prefix + '-1000px.css'); } } else { // 1000px (exclusive) if (do1000px && (ww < _settings.breakpoint_1000px || !do1200px)) { _5grid.isDesktop = true; _5grid.is1000px = true; _head.prepend(''); headQueue.pushE_5grid(baseURL + '5grid/core-desktop.css'); headQueue.pushE_5grid(baseURL + '5grid/core-1000px.css'); headQueue.pushE_5grid(baseURL + _settings.prefix + '-1000px.css'); } // 1200px (exclusive) else if (do1200px && (ww >= _settings.breakpoint_1000px || !do1000px)) { _5grid.isDesktop = true; _5grid.is1200px = true; _head.prepend(''); headQueue.pushE_5grid(baseURL + '5grid/core-desktop.css'); headQueue.pushE_5grid(baseURL + '5grid/core-1200px.css'); headQueue.pushE_5grid(baseURL + _settings.prefix + '-1200px.css'); } } } jQuery(function() { var _body = jQuery('body'); if (_5grid.isFluid) _body.addClass('is-fluid'); if (_5grid.isDesktop) _body.addClass('is-desktop'); if (_5grid.is1000px) _body.addClass('is-1000px'); if (_5grid.is1200px) _body.addClass('is-1200px'); if (_5grid.isMobile) _body.addClass('is-mobile'); jQuery('.5grid-layout').addClass('5grid'); }); })(); /*********************/ /* MobileUI */ /*********************/ if (_settings.mobileUI_force == 1) jQuery(function() { var _body = jQuery('body'), _viewer, _wrapper, _nav, _nav_inner, _opener, _titlebar, _content; var speed = _settings.mobileUI_slideSpeed, easing = 'swing', ww = _window.width(), wh = _window.height(), _nav_isActing = false, _nav_isOpen = false; _body.wrapInner(''); _body.wrapInner(''); _body.wrapInner(''); // Move primary content var _main_content = jQuery('.mobileUI-main-content'), _main_content_target = jQuery('.mobileUI-main-content-target'); if (_main_content.length > 0) if (_main_content_target.length > 0) _main_content.prependTo(_main_content_target); else _main_content.prependTo(_main_content.parent()); // Get site name, nav options var x = jQuery('.mobileUI-site-name'), site_name = (x.length > 0 ? x.html() : ''), site_nav_options = new Array(); jQuery('.mobileUI-site-nav a').each(function() { var t = jQuery(this), indent; indent = Math.max(0,t.parents('li').length - 1); site_nav_options.push( '