diff options
Diffstat (limited to 'zurb-F5-basic/static/js/foundation/foundation.interchange.js')
| -rw-r--r-- | zurb-F5-basic/static/js/foundation/foundation.interchange.js | 304 |
1 files changed, 304 insertions, 0 deletions
diff --git a/zurb-F5-basic/static/js/foundation/foundation.interchange.js b/zurb-F5-basic/static/js/foundation/foundation.interchange.js new file mode 100644 index 0000000..73b46a2 --- /dev/null +++ b/zurb-F5-basic/static/js/foundation/foundation.interchange.js @@ -0,0 +1,304 @@ +;(function ($, window, document, undefined) { + 'use strict'; + + Foundation.libs.interchange = { + name : 'interchange', + + version : '5.0.0', + + cache : {}, + + images_loaded : false, + nodes_loaded : false, + + settings : { + load_attr : 'interchange', + + named_queries : { + 'default' : Foundation.media_queries.small, + small : Foundation.media_queries.small, + medium : Foundation.media_queries.medium, + large : Foundation.media_queries.large, + xlarge : Foundation.media_queries.xlarge, + xxlarge: Foundation.media_queries.xxlarge, + landscape : 'only screen and (orientation: landscape)', + portrait : 'only screen and (orientation: portrait)', + retina : 'only screen and (-webkit-min-device-pixel-ratio: 2),' + + 'only screen and (min--moz-device-pixel-ratio: 2),' + + 'only screen and (-o-min-device-pixel-ratio: 2/1),' + + 'only screen and (min-device-pixel-ratio: 2),' + + 'only screen and (min-resolution: 192dpi),' + + 'only screen and (min-resolution: 2dppx)' + }, + + directives : { + replace: function (el, path, trigger) { + // The trigger argument, if called within the directive, fires + // an event named after the directive on the element, passing + // any parameters along to the event that you pass to trigger. + // + // ex. trigger(), trigger([a, b, c]), or trigger(a, b, c) + // + // This allows you to bind a callback like so: + // $('#interchangeContainer').on('replace', function (e, a, b, c) { + // console.log($(this).html(), a, b, c); + // }); + + if (/IMG/.test(el[0].nodeName)) { + var orig_path = el[0].src; + + if (new RegExp(path, 'i').test(orig_path)) return; + + el[0].src = path; + + return trigger(el[0].src); + } + var last_path = el.data('interchange-last-path'); + + if (last_path == path) return; + + return $.get(path, function (response) { + el.html(response); + el.data('interchange-last-path', path); + trigger(); + }); + + } + } + }, + + init : function (scope, method, options) { + Foundation.inherit(this, 'throttle'); + + this.data_attr = 'data-' + this.settings.load_attr; + + this.bindings(method, options); + this.load('images'); + this.load('nodes'); + }, + + events : function () { + var self = this; + + $(window) + .off('.interchange') + .on('resize.fndtn.interchange', self.throttle(function () { + self.resize.call(self); + }, 50)); + + return this; + }, + + resize : function () { + var cache = this.cache; + + if(!this.images_loaded || !this.nodes_loaded) { + setTimeout($.proxy(this.resize, this), 50); + return; + } + + for (var uuid in cache) { + if (cache.hasOwnProperty(uuid)) { + var passed = this.results(uuid, cache[uuid]); + + if (passed) { + this.settings.directives[passed + .scenario[1]](passed.el, passed.scenario[0], function () { + if (arguments[0] instanceof Array) { + var args = arguments[0]; + } else { + var args = Array.prototype.slice.call(arguments, 0); + } + + passed.el.trigger(passed.scenario[1], args); + }); + } + } + } + + }, + + results : function (uuid, scenarios) { + var count = scenarios.length; + + if (count > 0) { + var el = this.S('[data-uuid="' + uuid + '"]'); + + for (var i = count - 1; i >= 0; i--) { + var mq, rule = scenarios[i][2]; + if (this.settings.named_queries.hasOwnProperty(rule)) { + mq = matchMedia(this.settings.named_queries[rule]); + } else { + mq = matchMedia(rule); + } + if (mq.matches) { + return {el: el, scenario: scenarios[i]}; + } + } + } + + return false; + }, + + load : function (type, force_update) { + if (typeof this['cached_' + type] === 'undefined' || force_update) { + this['update_' + type](); + } + + return this['cached_' + type]; + }, + + update_images : function () { + var images = this.S('img[' + this.data_attr + ']'), + count = images.length, + loaded_count = 0, + data_attr = this.data_attr; + + this.cache = {}; + this.cached_images = []; + this.images_loaded = (count === 0); + + for (var i = count - 1; i >= 0; i--) { + loaded_count++; + if (images[i]) { + var str = images[i].getAttribute(data_attr) || ''; + + if (str.length > 0) { + this.cached_images.push(images[i]); + } + } + + if(loaded_count === count) { + this.images_loaded = true; + this.enhance('images'); + } + } + + return this; + }, + + update_nodes : function () { + var nodes = this.S('[' + this.data_attr + ']:not(img)'), + count = nodes.length, + loaded_count = 0, + data_attr = this.data_attr; + + this.cached_nodes = []; + // Set nodes_loaded to true if there are no nodes + // this.nodes_loaded = false; + this.nodes_loaded = (count === 0); + + + for (var i = count - 1; i >= 0; i--) { + loaded_count++; + var str = nodes[i].getAttribute(data_attr) || ''; + + if (str.length > 0) { + this.cached_nodes.push(nodes[i]); + } + + if(loaded_count === count) { + this.nodes_loaded = true; + this.enhance('nodes'); + } + } + + return this; + }, + + enhance : function (type) { + var count = this['cached_' + type].length; + + for (var i = count - 1; i >= 0; i--) { + this.object($(this['cached_' + type][i])); + } + + return $(window).trigger('resize'); + }, + + parse_params : function (path, directive, mq) { + return [this.trim(path), this.convert_directive(directive), this.trim(mq)]; + }, + + convert_directive : function (directive) { + var trimmed = this.trim(directive); + + if (trimmed.length > 0) { + return trimmed; + } + + return 'replace'; + }, + + object : function(el) { + var raw_arr = this.parse_data_attr(el), + scenarios = [], count = raw_arr.length; + + if (count > 0) { + for (var i = count - 1; i >= 0; i--) { + var split = raw_arr[i].split(/\((.*?)(\))$/); + + if (split.length > 1) { + var cached_split = split[0].split(','), + params = this.parse_params(cached_split[0], + cached_split[1], split[1]); + + scenarios.push(params); + } + } + } + + return this.store(el, scenarios); + }, + + uuid : function (separator) { + var delim = separator || "-"; + + function S4() { + return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); + } + + return (S4() + S4() + delim + S4() + delim + S4() + + delim + S4() + delim + S4() + S4() + S4()); + }, + + store : function (el, scenarios) { + var uuid = this.uuid(), + current_uuid = el.data('uuid'); + + if (current_uuid) return this.cache[current_uuid]; + + el.attr('data-uuid', uuid); + + return this.cache[uuid] = scenarios; + }, + + trim : function(str) { + if (typeof str === 'string') { + return $.trim(str); + } + + return str; + }, + + parse_data_attr : function (el) { + var raw = el.data(this.settings.load_attr).split(/\[(.*?)\]/), + count = raw.length, output = []; + + for (var i = count - 1; i >= 0; i--) { + if (raw[i].replace(/[\W\d]+/, '').length > 4) { + output.push(raw[i]); + } + } + + return output; + }, + + reflow : function () { + this.load('images', true); + this.load('nodes', true); + } + + }; + +}(jQuery, this, this.document)); |