Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Upgraded Foundation files to version 5.5.0
- Loading branch information
Showing
12 changed files
with
2,917 additions
and
10,155 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,348 @@ | ||
;(function ($, window, document, undefined) { | ||
'use strict'; | ||
|
||
Foundation.libs.interchange = { | ||
name : 'interchange', | ||
|
||
version : '5.5.0', | ||
|
||
cache : {}, | ||
|
||
images_loaded : false, | ||
nodes_loaded : false, | ||
|
||
settings : { | ||
load_attr : 'interchange', | ||
|
||
named_queries : { | ||
'default' : 'only screen', | ||
'small' : Foundation.media_queries['small'], | ||
'small-only' : Foundation.media_queries['small-only'], | ||
'medium' : Foundation.media_queries['medium'], | ||
'medium-only' : Foundation.media_queries['medium-only'], | ||
'large' : Foundation.media_queries['large'], | ||
'large-only' : Foundation.media_queries['large-only'], | ||
'xlarge' : Foundation.media_queries['xlarge'], | ||
'xlarge-only' : Foundation.media_queries['xlarge-only'], | ||
'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(this.data_attr + '-last-path'), | ||
self = this; | ||
|
||
if (last_path == path) return; | ||
|
||
if (/\.(gif|jpg|jpeg|tiff|png)([?#].*)?/i.test(path)) { | ||
$(el).css('background-image', 'url('+path+')'); | ||
el.data('interchange-last-path', path); | ||
return trigger(path); | ||
} | ||
|
||
return $.get(path, function (response) { | ||
el.html(response); | ||
el.data(self.data_attr + '-last-path', path); | ||
trigger(); | ||
}); | ||
|
||
} | ||
} | ||
}, | ||
|
||
init : function (scope, method, options) { | ||
Foundation.inherit(this, 'throttle random_str'); | ||
|
||
this.data_attr = this.set_data_attr(); | ||
$.extend(true, this.settings, method, options); | ||
this.bindings(method, options); | ||
this.load('images'); | ||
this.load('nodes'); | ||
}, | ||
|
||
get_media_hash : function() { | ||
var mediaHash=''; | ||
for (var queryName in this.settings.named_queries ) { | ||
mediaHash += matchMedia(this.settings.named_queries[queryName]).matches.toString(); | ||
} | ||
return mediaHash; | ||
}, | ||
|
||
events : function () { | ||
var self = this, prevMediaHash; | ||
|
||
$(window) | ||
.off('.interchange') | ||
.on('resize.fndtn.interchange', self.throttle(function () { | ||
var currMediaHash = self.get_media_hash(); | ||
if (currMediaHash !== prevMediaHash) { | ||
self.resize(); | ||
} | ||
prevMediaHash = currMediaHash; | ||
}, 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]].call(this, 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('[' + this.add_namespace('data-uuid') + '="' + uuid + '"]'); | ||
|
||
while (count--) { | ||
var mq, rule = scenarios[count][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[count]}; | ||
} | ||
} | ||
} | ||
|
||
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, | ||
i = count, | ||
loaded_count = 0, | ||
data_attr = this.data_attr; | ||
|
||
this.cache = {}; | ||
this.cached_images = []; | ||
this.images_loaded = (count === 0); | ||
|
||
while (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, | ||
i = count, | ||
loaded_count = 0, | ||
data_attr = this.data_attr; | ||
|
||
this.cached_nodes = []; | ||
this.nodes_loaded = (count === 0); | ||
|
||
|
||
while (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 i = this['cached_' + type].length; | ||
|
||
while (i--) { | ||
this.object($(this['cached_' + type][i])); | ||
} | ||
|
||
return $(window).trigger('resize').trigger('resize.fndtn.interchange'); | ||
}, | ||
|
||
convert_directive : function (directive) { | ||
|
||
var trimmed = this.trim(directive); | ||
|
||
if (trimmed.length > 0) { | ||
return trimmed; | ||
} | ||
|
||
return 'replace'; | ||
}, | ||
|
||
parse_scenario : function (scenario) { | ||
// This logic had to be made more complex since some users were using commas in the url path | ||
// So we cannot simply just split on a comma | ||
var directive_match = scenario[0].match(/(.+),\s*(\w+)\s*$/), | ||
media_query = scenario[1]; | ||
|
||
if (directive_match) { | ||
var path = directive_match[1], | ||
directive = directive_match[2]; | ||
} | ||
else { | ||
var cached_split = scenario[0].split(/,\s*$/), | ||
path = cached_split[0], | ||
directive = ''; | ||
} | ||
|
||
return [this.trim(path), this.convert_directive(directive), this.trim(media_query)]; | ||
}, | ||
|
||
object : function(el) { | ||
var raw_arr = this.parse_data_attr(el), | ||
scenarios = [], | ||
i = raw_arr.length; | ||
|
||
if (i > 0) { | ||
while (i--) { | ||
var split = raw_arr[i].split(/\((.*?)(\))$/); | ||
|
||
if (split.length > 1) { | ||
var params = this.parse_scenario(split); | ||
scenarios.push(params); | ||
} | ||
} | ||
} | ||
|
||
return this.store(el, scenarios); | ||
}, | ||
|
||
store : function (el, scenarios) { | ||
var uuid = this.random_str(), | ||
current_uuid = el.data(this.add_namespace('uuid', true)); | ||
|
||
if (this.cache[current_uuid]) return this.cache[current_uuid]; | ||
|
||
el.attr(this.add_namespace('data-uuid'), uuid); | ||
|
||
return this.cache[uuid] = scenarios; | ||
}, | ||
|
||
trim : function(str) { | ||
|
||
if (typeof str === 'string') { | ||
return $.trim(str); | ||
} | ||
|
||
return str; | ||
}, | ||
|
||
set_data_attr: function (init) { | ||
if (init) { | ||
if (this.namespace.length > 0) { | ||
return this.namespace + '-' + this.settings.load_attr; | ||
} | ||
|
||
return this.settings.load_attr; | ||
} | ||
|
||
if (this.namespace.length > 0) { | ||
return 'data-' + this.namespace + '-' + this.settings.load_attr; | ||
} | ||
|
||
return 'data-' + this.settings.load_attr; | ||
}, | ||
|
||
parse_data_attr : function (el) { | ||
var raw = el.attr(this.attr_name()).split(/\[(.*?)\]/), | ||
i = raw.length, | ||
output = []; | ||
|
||
while (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, window, window.document)); |
Oops, something went wrong.