js/foundation/foundation.js

   1 /*
   2  * Foundation Responsive Library
   3  * http://foundation.zurb.com
   4  * Copyright 2014, ZURB
   5  * Free to use under the MIT license.
   6  * http://www.opensource.org/licenses/mit-license.php
   7  */
   8
   9 (function ($, window, document, undefined) {
  10     'use strict';
  11
  12     var header_helpers = function (class_array) {
  13         var i = class_array.length;
  14         var head = $('head');
  15
  16         while (i--) {
  17             if (head.has('.' + class_array[i]).length === 0) {
  18                 head.append('<meta class="' + class_array[i] + '" />');
  19             }
  20         }
  21     };
  22
  23     header_helpers([
  24         'foundation-mq-small',
  25         'foundation-mq-small-only',
  26         'foundation-mq-medium',
  27         'foundation-mq-medium-only',
  28         'foundation-mq-large',
  29         'foundation-mq-large-only',
  30         'foundation-mq-xlarge',
  31         'foundation-mq-xlarge-only',
  32         'foundation-mq-xxlarge',
  33         'foundation-data-attribute-namespace']);
  34
  35     // Enable FastClick if present
  36
  37     $(function () {
  38         if (typeof FastClick !== 'undefined') {
  39             // Don't attach to body if undefined
  40             if (typeof document.body !== 'undefined') {
  41                 FastClick.attach(document.body);
  42             }
  43         }
  44     });
  45
  46     // private Fast Selector wrapper,
  47     // returns jQuery object. Only use where
  48     // getElementById is not available.
  49     var S = function (selector, context) {
  50         if (typeof selector === 'string') {
  51             if (context) {
  52                 var cont;
  53                 if (context.jquery) {
  54                     cont = context[0];
  55                     if (!cont) return context;
  56                 } else {
  57                     cont = context;
  58                 }
  59                 return $(cont.querySelectorAll(selector));
  60             }
  61
  62             return $(document.querySelectorAll(selector));
  63         }
  64
  65         return $(selector, context);
  66     };
  67
  68     // Namespace functions.
  69
  70     var attr_name = function (init) {
  71         var arr = [];
  72         if (!init) arr.push('data');
  73         if (this.namespace.length > 0) arr.push(this.namespace);
  74         arr.push(this.name);
  75
  76         return arr.join('-');
  77     };
  78
  79     var add_namespace = function (str) {
  80         var parts = str.split('-'),
  81             i = parts.length,
  82             arr = [];
  83
  84         while (i--) {
  85             if (i !== 0) {
  86                 arr.push(parts[i]);
  87             } else {
  88                 if (this.namespace.length > 0) {
  89                     arr.push(this.namespace, parts[i]);
  90                 } else {
  91                     arr.push(parts[i]);
  92                 }
  93             }
  94         }
  95
  96         return arr.reverse().join('-');
  97     };
  98
  99     // Event binding and data-options updating.
 100
 101     var bindings = function (method, options) {
 102         var self = this,
 103             should_bind_events = !S(this).data(this.attr_name(true));
 104
 105         if (S(this.scope).is('[' + this.attr_name() + ']')) {
 106             S(this.scope).data(this.attr_name(true) + '-init', $.extend({}, this.settings, (options || method), this.data_options(S(this.scope))));
 107
 108             if (should_bind_events) {
 109                 this.events(this.scope);
 110             }
 111
 112         } else {
 113             S('[' + this.attr_name() + ']', this.scope).each(function () {
 114                 var should_bind_events = !S(this).data(self.attr_name(true) + '-init');
 115                 S(this).data(self.attr_name(true) + '-init', $.extend({}, self.settings, (options || method), self.data_options(S(this))));
 116
 117                 if (should_bind_events) {
 118                     self.events(this);
 119                 }
 120             });
 121         }
 122         // # Patch to fix #5043 to move this *after* the if/else clause in order for Backbone and similar frameworks to have improved control over event binding and data-options updating.
 123         if (typeof method === 'string') {
 124             return this[method].call(this, options);
 125         }
 126
 127     };
 128
 129     var single_image_loaded = function (image, callback) {
 130         function loaded() {
 131             callback(image[0]);
 132         }
 133
 134         function bindLoad() {
 135             this.one('load', loaded);
 136
 137             if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
 138                 var src = this.attr('src'),
 139                     param = src.match(/\?/) ? '&' : '?';
 140
 141                 param += 'random=' + (new Date()).getTime();
 142                 this.attr('src', src + param);
 143             }
 144         }
 145
 146         if (!image.attr('src')) {
 147             loaded();
 148             return;
 149         }
 150
 151         if (image[0].complete || image[0].readyState === 4) {
 152             loaded();
 153         } else {
 154             bindLoad.call(image);
 155         }
 156     };
 157
 158     /*
 159      https://github.com/paulirish/matchMedia.js
 160      */
 161
 162     window.matchMedia = window.matchMedia || (function (doc) {
 163
 164         'use strict';
 165
 166         var bool,
 167             docElem = doc.documentElement,
 168             refNode = docElem.firstElementChild || docElem.firstChild,
 169         // fakeBody required for <FF4 when executed in <head>
 170             fakeBody = doc.createElement('body'),
 171             div = doc.createElement('div');
 172
 173         div.id = 'mq-test-1';
 174         div.style.cssText = 'position:absolute;top:-100em';
 175         fakeBody.style.background = 'none';
 176         fakeBody.appendChild(div);
 177
 178         return function (q) {
 179
 180             div.innerHTML = '&shy;<style media="' + q + '"> #mq-test-1 { width: 42px; }</style>';
 181
 182             docElem.insertBefore(fakeBody, refNode);
 183             bool = div.offsetWidth === 42;
 184             docElem.removeChild(fakeBody);
 185
 186             return {
 187                 matches: bool,
 188                 media: q
 189             };
 190
 191         };
 192
 193     }(document));
 194
 195     /*
 196      * jquery.requestAnimationFrame
 197      * https://github.com/gnarf37/jquery-requestAnimationFrame
 198      * Requires jQuery 1.8+
 199      *
 200      * Copyright (c) 2012 Corey Frang
 201      * Licensed under the MIT license.
 202      */
 203
 204     (function ($) {
 205
 206         // requestAnimationFrame polyfill adapted from Erik Möller
 207         // fixes from Paul Irish and Tino Zijdel
 208         // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 209         // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 210
 211         var animating,
 212             lastTime = 0,
 213             vendors = ['webkit', 'moz'],
 214             requestAnimationFrame = window.requestAnimationFrame,
 215             cancelAnimationFrame = window.cancelAnimationFrame,
 216             jqueryFxAvailable = 'undefined' !== typeof jQuery.fx;
 217
 218         for (; lastTime < vendors.length && !requestAnimationFrame; lastTime++) {
 219             requestAnimationFrame = window[vendors[lastTime] + 'RequestAnimationFrame'];
 220             cancelAnimationFrame = cancelAnimationFrame ||
 221             window[vendors[lastTime] + 'CancelAnimationFrame'] ||
 222             window[vendors[lastTime] + 'CancelRequestAnimationFrame'];
 223         }
 224
 225         function raf() {
 226             if (animating) {
 227                 requestAnimationFrame(raf);
 228
 229                 if (jqueryFxAvailable) {
 230                     jQuery.fx.tick();
 231                 }
 232             }
 233         }
 234
 235         if (requestAnimationFrame) {
 236             // use rAF
 237             window.requestAnimationFrame = requestAnimationFrame;
 238             window.cancelAnimationFrame = cancelAnimationFrame;
 239
 240             if (jqueryFxAvailable) {
 241                 jQuery.fx.timer = function (timer) {
 242                     if (timer() && jQuery.timers.push(timer) && !animating) {
 243                         animating = true;
 244                         raf();
 245                     }
 246                 };
 247
 248                 jQuery.fx.stop = function () {
 249                     animating = false;
 250                 };
 251             }
 252         } else {
 253             // polyfill
 254             window.requestAnimationFrame = function (callback) {
 255                 var currTime = new Date().getTime(),
 256                     timeToCall = Math.max(0, 16 - (currTime - lastTime)),
 257                     id = window.setTimeout(function () {
 258                         callback(currTime + timeToCall);
 259                     }, timeToCall);
 260                 lastTime = currTime + timeToCall;
 261                 return id;
 262             };
 263
 264             window.cancelAnimationFrame = function (id) {
 265                 clearTimeout(id);
 266             };
 267
 268         }
 269
 270     }(jQuery));
 271
 272
 273     function removeQuotes(string) {
 274         if (typeof string === 'string' || string instanceof String) {
 275             string = string.replace(/^['\\/"]+|(;\s?})+|['\\/"]+$/g, '');
 276         }
 277
 278         return string;
 279     }
 280
 281     window.Foundation = {
 282         name: 'Foundation',
 283
 284         version: '5.5.0',
 285
 286         media_queries: {
 287             'small': S('.foundation-mq-small').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''),
 288             'small-only': S('.foundation-mq-small-only').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''),
 289             'medium': S('.foundation-mq-medium').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''),
 290             'medium-only': S('.foundation-mq-medium-only').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''),
 291             'large': S('.foundation-mq-large').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''),
 292             'large-only': S('.foundation-mq-large-only').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''),
 293             'xlarge': S('.foundation-mq-xlarge').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''),
 294             'xlarge-only': S('.foundation-mq-xlarge-only').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''),
 295             'xxlarge': S('.foundation-mq-xxlarge').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, '')
 296         },
 297
 298         stylesheet: $('<style></style>').appendTo('head')[0].sheet,
 299
 300         global: {
 301             namespace: undefined
 302         },
 303
 304         init: function (scope, libraries, method, options, response) {
 305             var args = [scope, method, options, response],
 306                 responses = [];
 307
 308             // check RTL
 309             this.rtl = /rtl/i.test(S('html').attr('dir'));
 310
 311             // set foundation global scope
 312             this.scope = scope || this.scope;
 313
 314             this.set_namespace();
 315
 316             if (libraries && typeof libraries === 'string' && !/reflow/i.test(libraries)) {
 317                 if (this.libs.hasOwnProperty(libraries)) {
 318                     responses.push(this.init_lib(libraries, args));
 319                 }
 320             } else {
 321                 for (var lib in this.libs) {
 322                     responses.push(this.init_lib(lib, libraries));
 323                 }
 324             }
 325
 326             S(window).load(function () {
 327                 S(window)
 328                     .trigger('resize.fndtn.clearing')
 329                     .trigger('resize.fndtn.dropdown')
 330                     .trigger('resize.fndtn.equalizer')
 331                     .trigger('resize.fndtn.interchange')
 332                     .trigger('resize.fndtn.joyride')
 333                     .trigger('resize.fndtn.magellan')
 334                     .trigger('resize.fndtn.topbar')
 335                     .trigger('resize.fndtn.slider');
 336             });
 337
 338             return scope;
 339         },
 340
 341         init_lib: function (lib, args) {
 342             if (this.libs.hasOwnProperty(lib)) {
 343                 this.patch(this.libs[lib]);
 344
 345                 if (args && args.hasOwnProperty(lib)) {
 346                     if (typeof this.libs[lib].settings !== 'undefined') {
 347                         $.extend(true, this.libs[lib].settings, args[lib]);
 348                     }
 349                     else if (typeof this.libs[lib].defaults !== 'undefined') {
 350                         $.extend(true, this.libs[lib].defaults, args[lib]);
 351                     }
 352                     return this.libs[lib].init.apply(this.libs[lib], [this.scope, args[lib]]);
 353                 }
 354
 355                 args = args instanceof Array ? args : new Array(args);
 356                 return this.libs[lib].init.apply(this.libs[lib], args);
 357             }
 358
 359             return function () {
 360             };
 361         },
 362
 363         patch: function (lib) {
 364             lib.scope = this.scope;
 365             lib.namespace = this.global.namespace;
 366             lib.rtl = this.rtl;
 367             lib['data_options'] = this.utils.data_options;
 368             lib['attr_name'] = attr_name;
 369             lib['add_namespace'] = add_namespace;
 370             lib['bindings'] = bindings;
 371             lib['S'] = this.utils.S;
 372         },
 373
 374         inherit: function (scope, methods) {
 375             var methods_arr = methods.split(' '),
 376                 i = methods_arr.length;
 377
 378             while (i--) {
 379                 if (this.utils.hasOwnProperty(methods_arr[i])) {
 380                     scope[methods_arr[i]] = this.utils[methods_arr[i]];
 381                 }
 382             }
 383         },
 384
 385         set_namespace: function () {
 386
 387             // Description:
 388             //    Don't bother reading the namespace out of the meta tag
 389             //    if the namespace has been set globally in javascript
 390             //
 391             // Example:
 392             //    Foundation.global.namespace = 'my-namespace';
 393             // or make it an empty string:
 394             //    Foundation.global.namespace = '';
 395             //
 396             //
 397
 398             // If the namespace has not been set (is undefined), try to read it out of the meta element.
 399             // Otherwise use the globally defined namespace, even if it's empty ('')
 400             var namespace = ( this.global.namespace === undefined ) ? $('.foundation-data-attribute-namespace').css('font-family') : this.global.namespace;
 401
 402             // Finally, if the namsepace is either undefined or false, set it to an empty string.
 403             // Otherwise use the namespace value.
 404             this.global.namespace = ( namespace === undefined || /false/i.test(namespace) ) ? '' : namespace;
 405         },
 406
 407         libs: {},
 408
 409         // methods that can be inherited in libraries
 410         utils: {
 411
 412             // Description:
 413             //    Fast Selector wrapper returns jQuery object. Only use where getElementById
 414             //    is not available.
 415             //
 416             // Arguments:
 417             //    Selector (String): CSS selector describing the element(s) to be
 418             //    returned as a jQuery object.
 419             //
 420             //    Scope (String): CSS selector describing the area to be searched. Default
 421             //    is document.
 422             //
 423             // Returns:
 424             //    Element (jQuery Object): jQuery object containing elements matching the
 425             //    selector within the scope.
 426             S: S,
 427
 428             // Description:
 429             //    Executes a function a max of once every n milliseconds
 430             //
 431             // Arguments:
 432             //    Func (Function): Function to be throttled.
 433             //
 434             //    Delay (Integer): Function execution threshold in milliseconds.
 435             //
 436             // Returns:
 437             //    Lazy_function (Function): Function with throttling applied.
 438             throttle: function (func, delay) {
 439                 var timer = null;
 440
 441                 return function () {
 442                     var context = this, args = arguments;
 443
 444                     if (timer == null) {
 445                         timer = setTimeout(function () {
 446                             func.apply(context, args);
 447                             timer = null;
 448                         }, delay);
 449                     }
 450                 };
 451             },
 452
 453             // Description:
 454             //    Executes a function when it stops being invoked for n seconds
 455             //    Modified version of _.debounce() http://underscorejs.org
 456             //
 457             // Arguments:
 458             //    Func (Function): Function to be debounced.
 459             //
 460             //    Delay (Integer): Function execution threshold in milliseconds.
 461             //
 462             //    Immediate (Bool): Whether the function should be called at the beginning
 463             //    of the delay instead of the end. Default is false.
 464             //
 465             // Returns:
 466             //    Lazy_function (Function): Function with debouncing applied.
 467             debounce: function (func, delay, immediate) {
 468                 var timeout, result;
 469                 return function () {
 470                     var context = this, args = arguments;
 471                     var later = function () {
 472                         timeout = null;
 473                         if (!immediate) result = func.apply(context, args);
 474                     };
 475                     var callNow = immediate && !timeout;
 476                     clearTimeout(timeout);
 477                     timeout = setTimeout(later, delay);
 478                     if (callNow) result = func.apply(context, args);
 479                     return result;
 480                 };
 481             },
 482
 483             // Description:
 484             //    Parses data-options attribute
 485             //
 486             // Arguments:
 487             //    El (jQuery Object): Element to be parsed.
 488             //
 489             // Returns:
 490             //    Options (Javascript Object): Contents of the element's data-options
 491             //    attribute.
 492             data_options: function (el, data_attr_name) {
 493                 data_attr_name = data_attr_name || 'options';
 494                 var opts = {}, ii, p, opts_arr,
 495                     data_options = function (el) {
 496                         var namespace = Foundation.global.namespace;
 497
 498                         if (namespace.length > 0) {
 499                             return el.data(namespace + '-' + data_attr_name);
 500                         }
 501
 502                         return el.data(data_attr_name);
 503                     };
 504
 505                 var cached_options = data_options(el);
 506
 507                 if (typeof cached_options === 'object') {
 508                     return cached_options;
 509                 }
 510
 511                 opts_arr = (cached_options || ':').split(';');
 512                 ii = opts_arr.length;
 513
 514                 function isNumber(o) {
 515                     return !isNaN(o - 0) && o !== null && o !== '' && o !== false && o !== true;
 516                 }
 517
 518                 function trim(str) {
 519                     if (typeof str === 'string') return $.trim(str);
 520                     return str;
 521                 }
 522
 523                 while (ii--) {
 524                     p = opts_arr[ii].split(':');
 525                     p = [p[0], p.slice(1).join(':')];
 526
 527                     if (/true/i.test(p[1])) p[1] = true;
 528                     if (/false/i.test(p[1])) p[1] = false;
 529                     if (isNumber(p[1])) {
 530                         if (p[1].indexOf('.') === -1) {
 531                             p[1] = parseInt(p[1], 10);
 532                         } else {
 533                             p[1] = parseFloat(p[1]);
 534                         }
 535                     }
 536
 537                     if (p.length === 2 && p[0].length > 0) {
 538                         opts[trim(p[0])] = trim(p[1]);
 539                     }
 540                 }
 541
 542                 return opts;
 543             },
 544
 545             // Description:
 546             //    Adds JS-recognizable media queries
 547             //
 548             // Arguments:
 549             //    Media (String): Key string for the media query to be stored as in
 550             //    Foundation.media_queries
 551             //
 552             //    Class (String): Class name for the generated <meta> tag
 553             register_media: function (media, media_class) {
 554                 if (Foundation.media_queries[media] === undefined) {
 555                     $('head').append('<meta class="' + media_class + '"/>');
 556                     Foundation.media_queries[media] = removeQuotes($('.' + media_class).css('font-family'));
 557                 }
 558             },
 559
 560             // Description:
 561             //    Add custom CSS within a JS-defined media query
 562             //
 563             // Arguments:
 564             //    Rule (String): CSS rule to be appended to the document.
 565             //
 566             //    Media (String): Optional media query string for the CSS rule to be
 567             //    nested under.
 568             add_custom_rule: function (rule, media) {
 569                 if (media === undefined && Foundation.stylesheet) {
 570                     Foundation.stylesheet.insertRule(rule, Foundation.stylesheet.cssRules.length);
 571                 } else {
 572                     var query = Foundation.media_queries[media];
 573
 574                     if (query !== undefined) {
 575                         Foundation.stylesheet.insertRule('@media ' +
 576                         Foundation.media_queries[media] + '{ ' + rule + ' }');
 577                     }
 578                 }
 579             },
 580
 581             // Description:
 582             //    Performs a callback function when an image is fully loaded
 583             //
 584             // Arguments:
 585             //    Image (jQuery Object): Image(s) to check if loaded.
 586             //
 587             //    Callback (Function): Function to execute when image is fully loaded.
 588             image_loaded: function (images, callback) {
 589                 var self = this,
 590                     unloaded = images.length;
 591
 592                 if (unloaded === 0) {
 593                     callback(images);
 594                 }
 595
 596                 images.each(function () {
 597                     single_image_loaded(self.S(this), function () {
 598                         unloaded -= 1;
 599                         if (unloaded === 0) {
 600                             callback(images);
 601                         }
 602                     });
 603                 });
 604             },
 605
 606             // Description:
 607             //    Returns a random, alphanumeric string
 608             //
 609             // Arguments:
 610             //    Length (Integer): Length of string to be generated. Defaults to random
 611             //    integer.
 612             //
 613             // Returns:
 614             //    Rand (String): Pseudo-random, alphanumeric string.
 615             random_str: function () {
 616                 if (!this.fidx) this.fidx = 0;
 617                 this.prefix = this.prefix || [(this.name || 'F'), (+new Date).toString(36)].join('-');
 618
 619                 return this.prefix + (this.fidx++).toString(36);
 620             },
 621
 622             // Description:
 623             //    Helper for window.matchMedia
 624             //
 625             // Arguments:
 626             //    mq (String): Media query
 627             //
 628             // Returns:
 629             //    (Boolean): Whether the media query passes or not
 630             match: function (mq) {
 631                 return window.matchMedia(mq).matches;
 632             },
 633
 634             // Description:
 635             //    Helpers for checking Foundation default media queries with JS
 636             //
 637             // Returns:
 638             //    (Boolean): Whether the media query passes or not
 639
 640             is_small_up: function () {
 641                 return this.match(Foundation.media_queries.small);
 642             },
 643
 644             is_medium_up: function () {
 645                 return this.match(Foundation.media_queries.medium);
 646             },
 647
 648             is_large_up: function () {
 649                 return this.match(Foundation.media_queries.large);
 650             },
 651
 652             is_xlarge_up: function () {
 653                 return this.match(Foundation.media_queries.xlarge);
 654             },
 655
 656             is_xxlarge_up: function () {
 657                 return this.match(Foundation.media_queries.xxlarge);
 658             },
 659
 660             is_small_only: function () {
 661                 return !this.is_medium_up() && !this.is_large_up() && !this.is_xlarge_up() && !this.is_xxlarge_up();
 662             },
 663
 664             is_medium_only: function () {
 665                 return this.is_medium_up() && !this.is_large_up() && !this.is_xlarge_up() && !this.is_xxlarge_up();
 666             },
 667
 668             is_large_only: function () {
 669                 return this.is_medium_up() && this.is_large_up() && !this.is_xlarge_up() && !this.is_xxlarge_up();
 670             },
 671
 672             is_xlarge_only: function () {
 673                 return this.is_medium_up() && this.is_large_up() && this.is_xlarge_up() && !this.is_xxlarge_up();
 674             },
 675
 676             is_xxlarge_only: function () {
 677                 return this.is_medium_up() && this.is_large_up() && this.is_xlarge_up() && this.is_xxlarge_up();
 678             }
 679         }
 680     };
 681
 682     $.fn.foundation = function () {
 683         var args = Array.prototype.slice.call(arguments, 0);
 684
 685         return this.each(function () {
 686             Foundation.init.apply(Foundation, [this].concat(args));
 687             return this;
 688         });
 689     };
 690
 691 }(jQuery, window, window.document));