lentil 0.6.0 → 0.7.1

data/app/views/lentil/thisorthat/_battle_form.html.erb

@@ -4,53 +4,58 @@
       <div class="battle-image-wrap grid__cell">
         <%= semantic_fields_for "image[#{image.id}]", image do |f| %>
           <div id="image_<%= image.id %>" class="battle-image-tile">
+            <div>
               <% unless image.media_type == "video" %>
                 <a href="<%= url_for(image) %>" data-fancybox-href= "<%= image.jpeg %>" class="fancybox">
-                <%= image_tag(image.jpeg, :class => "battle-img instagram-img", :data => {:battles_count => image.battles_count, :win_pct => image.win_pct, :popularity => image.popular_score, :staff_like => image.staff_like, :like_votes_count => image.like_votes_count, :media_type => image.media_type}) %>
-              <% else %>
-                <a href="<%= url_for(image) %>" data-fancybox-href= "<%= image.video_url %>" class="fancybox">
-                <%= video_tag(image.video_url, :class => "instagram-img " + image.id.to_s, :height => "100%", :width => "100%", :poster => image.jpeg, :controls => "controls", :data => {:battles_count => image.battles_count, :win_pct => image.win_pct, :popularity => image.popular_score, :staff_like => image.staff_like, :like_votes_count => image.like_votes_count, :media_type => image.media_type}) %>
-              <% end %>
+                  <%= image_tag(image.jpeg, :class => "square-media battle-img instagram-img", :data => {:battles_count => image.battles_count, :win_pct => image.win_pct, :popularity => image.popular_score, :staff_like => image.staff_like, :like_votes_count => image.like_votes_count, :media_type => image.media_type}) %>
+                <% else %>
+                  <a href="<%= url_for(image) %>" data-fancybox-href= "<%= image.video_url %>" class="fancybox">
+                    <%= video_tag(image.video_url, :class => "square-media battle-img instagram-img " + image.id.to_s, :height => "100%", :width => "100%", :poster => image.jpeg, :controls => "controls", :data => {:battles_count => image.battles_count, :win_pct => image.win_pct, :popularity => image.popular_score, :staff_like => image.staff_like, :like_votes_count => image.like_votes_count, :media_type => image.media_type}) %>
+                  <% end %>
+                </a>
+              </div>
               <div class="battle-image-desc trunc-small"><div class="battle-image-inner-desc"><%= truncate(image.description, :length => 35) %></div></div>
               <div class="battle-image-desc trunc-medium"><div class="battle-image-inner-desc"><%= truncate(image.description, :length => 50) %></div></div>
               <div class="battle-image-desc trunc-large"><div class="battle-image-inner-desc"><%= truncate(image.description, :length => 70) %></div></div>
-            </a>
-            <%= render "/layouts/lentil/image_popup", :image => image  %>
-            <%= f.input :id, :as => :hidden %>
+              <%= render "/layouts/lentil/image_popup", :image => image  %>
+              <%= f.input :id, :as => :hidden %>
 
-          </div>
-          <div class="battle-submit-tile">
-            <%= f.action :submit, :as => :button, :label => t('lentil.battle.pick_me'), :button_html => {:value => "#{image.id}", :name => "vote", :class => "btn btn-large battle-form"} %>
-          </div>
-        <% end -%>
-      </div>
+            </div>
+            <div class="battle-submit-tile">
+              <%= f.action :submit, :as => :button, :label => t('lentil.battle.pick_me'), :button_html => {:value => "#{image.id}", :name => "vote", :class => "btn btn-large battle-form"} %>
+            </div>
+          <% end -%>
+        </div>
+      <% end -%>
     <% end -%>
-  <% end -%>
-  <% @prev_images.each do |image| %>
+    <% @prev_images.each do |image| %>
       <div class="battle-image-wrap grid__cell" style="background:#e6e6e6">
-          <div id="image_<%= image.id %>" class="battle-image-tile">
-              <% unless image.media_type == "video" %>
-                <a href="<%= url_for(image) %>" data-fancybox-href= "<%= image.jpeg %>" class="fancybox">
-                <%= image_tag(image.jpeg, :class => "battle-img instagram-img", :data => {:battles_count => image.battles_count, :win_pct => image.win_pct, :popularity => image.popular_score, :staff_like => image.staff_like, :like_votes_count => image.like_votes_count, :media_type => image.media_type}) %>
+        <div id="image_<%= image.id %>" class="battle-image-tile">
+          <div>
+            <% unless image.media_type == "video" %>
+              <a href="<%= url_for(image) %>" data-fancybox-href= "<%= image.jpeg %>" class="fancybox">
+                <%= image_tag(image.jpeg, :class => "square-media battle-img instagram-img", :data => {:battles_count => image.battles_count, :win_pct => image.win_pct, :popularity => image.popular_score, :staff_like => image.staff_like, :like_votes_count => image.like_votes_count, :media_type => image.media_type}) %>
               <% else %>
                 <a href="<%= url_for(image) %>" data-fancybox-href= "<%= image.video_url %>" class="fancybox">
-                <%= video_tag(image.video_url, :class => "instagram-img " + image.id.to_s, :height => "100%", :width => "100%", :poster => image.jpeg, :controls => "controls", :data => {:battles_count => image.battles_count, :win_pct => image.win_pct, :popularity => image.popular_score, :staff_like => image.staff_like, :like_votes_count => image.like_votes_count, :media_type => image.media_type}) %>
-              <% end %>
-              <div class="battle-image-desc trunc-small"><div class="battle-image-inner-desc"><%= truncate(image.description, :length => 35) %></div></div>
-              <div class="battle-image-desc trunc-medium"><div class="battle-image-inner-desc"><%= truncate(image.description, :length => 50) %></div></div>
-              <div class="battle-image-desc trunc-large"><div class="battle-image-inner-desc"><%= truncate(image.description, :length => 70) %></div></div>
-            </a>
-            <%= render "/layouts/lentil/image_popup", :image => image  %>
-          </div>
-          <div class="battle-submit-tile battle-result-tile">
-            <h4><%= t('lentil.battle.win_pct') %></h4>
-            <h4><%= number_to_percentage(image.win_pct, :precision => 0) %></h4>
-            <% if image.id == @prev_winner %>
-              <div class="battle-result-arrow-wrap">
-                <p><i class="icon-arrow-left winner-left"></i> <%= t 'lentil.battle.you_picked' %> <i class="icon-arrow-right winner-right"></i></p>
-              </div>
-            <% end %>
-          </div>
+                  <%= video_tag(image.video_url, :class => "square-media battle-img instagram-img " + image.id.to_s, :height => "100%", :width => "100%", :poster => image.jpeg, :controls => "controls", :data => {:battles_count => image.battles_count, :win_pct => image.win_pct, :popularity => image.popular_score, :staff_like => image.staff_like, :like_votes_count => image.like_votes_count, :media_type => image.media_type}) %>
+                <% end %>
+              </a>
+            </div>
+            <div class="battle-image-desc trunc-small"><div class="battle-image-inner-desc"><%= truncate(image.description, :length => 35) %></div></div>
+            <div class="battle-image-desc trunc-medium"><div class="battle-image-inner-desc"><%= truncate(image.description, :length => 50) %></div></div>
+            <div class="battle-image-desc trunc-large"><div class="battle-image-inner-desc"><%= truncate(image.description, :length => 70) %></div></div>
+          </a>
+          <%= render "/layouts/lentil/image_popup", :image => image  %>
+        </div>
+        <div class="battle-submit-tile battle-result-tile">
+          <h4><%= t('lentil.battle.win_pct') %></h4>
+          <h4><%= number_to_percentage(image.win_pct, :precision => 0) %></h4>
+          <% if image.id == @prev_winner %>
+            <div class="battle-result-arrow-wrap">
+              <p><i class="icon-arrow-left winner-left"></i> <%= t 'lentil.battle.you_picked' %> <i class="icon-arrow-right winner-right"></i></p>
+            </div>
+          <% end %>
+        </div>
       </div>
     <% end -%>
-</div>
+  </div>

data/lib/lentil/version.rb

@@ -1,3 +1,3 @@
 module Lentil
-  VERSION = "0.6.0"
+  VERSION = "0.7.1"
 end

data/vendor/assets/javascripts/polyfill.object-fit/polyfill.object-fit.js

@@ -0,0 +1,711 @@
+(function (ELEMENT) {
+	ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector || function matches(selector) {
+		var
+		element = this,
+		elements = (element.document || element.ownerDocument).querySelectorAll(selector),
+		index = 0;
+
+		while (elements[index] && elements[index] !== element) {
+			++index;
+		}
+
+		return elements[index] ? true : false;
+	};
+
+	ELEMENT.closest = ELEMENT.closest || function closest(selector) {
+		var element = this;
+
+		while (element) {
+			if (element.matches(selector)) {
+				break;
+			}
+
+			element = element.parentElement;
+		}
+
+		return element;
+	};
+}(Element.prototype));
+
+/*!
+ * A polyfill for Webkit's window.getMatchedCSSRules, based on
+ * https://gist.github.com/ydaniv/3033012
+ *
+ * @author: Yehonatan Daniv
+ * @author: ssafejava
+ * @author: Christian "Schepp" Schaefer <schaepp@gmx.de>
+ *
+ */
+
+'use strict';
+
+(function () {
+	// polyfill window.getMatchedCSSRules() in FireFox 6+
+	if (typeof window.getMatchedCSSRules === 'function') {
+		return;
+	}
+
+	var ELEMENT_RE = /[\w-]+/g,
+		ID_RE = /#[\w-]+/g,
+		CLASS_RE = /\.[\w-]+/g,
+		ATTR_RE = /\[[^\]]+\]/g,
+		// :not() pseudo-class does not add to specificity, but its content does as if it was outside it
+		PSEUDO_CLASSES_RE = /\:(?!not)[\w-]+(\(.*\))?/g,
+		PSEUDO_ELEMENTS_RE = /\:\:?(after|before|first-letter|first-line|selection)/g;
+
+	// convert an array-like object to array
+	var toArray = function (list) {
+		var items = [];
+		var i = 0;
+		var listLength = list.length;
+
+		for (; i < listLength; i++) {
+			items.push(list[i]);
+		}
+
+		return items;
+	};
+
+	// get host of stylesheet
+	var getCSSHost = function (href) {
+		var fakeLinkOfSheet = document.createElement('a');
+
+		fakeLinkOfSheet.href = href;
+
+		return fakeLinkOfSheet.host;
+	};
+
+	// handles extraction of `cssRules` as an `Array` from a stylesheet or something that behaves the same
+	var getSheetRules = function (stylesheet) {
+		var sheetMedia = stylesheet.media && stylesheet.media.mediaText;
+		var sheetHost;
+
+		// if this sheet is cross-origin and option is set skip it
+		if (objectFit.disableCrossDomain == 'true') {
+			sheetHost = getCSSHost(stylesheet.href);
+
+			if ((sheetHost !== window.location.host)) {
+				return [];
+			}
+		}
+
+
+		// if this sheet is disabled skip it
+		if (stylesheet.disabled) {
+			return [];
+		}
+
+		if (!window.matchMedia) {
+			if (sheetMedia && sheetMedia.length) {
+				return [];
+			}
+		}
+		// if this sheet's media is specified and doesn't match the viewport then skip it
+		else if (sheetMedia && sheetMedia.length && ! window.matchMedia(sheetMedia).matches) {
+			return [];
+		}
+
+		// get the style rules of this sheet
+		return toArray(stylesheet.cssRules);
+	};
+
+	var _find = function (string, re) {
+		var matches = string.match(re);
+
+		return re ? re.length : 0;
+	};
+
+	// calculates the specificity of a given `selector`
+	var calculateScore = function (selector) {
+		var score = [0, 0, 0];
+		var parts = selector.split(' ');
+		var part;
+		var match;
+
+		//TODO: clean the ':not' part since the last ELEMENT_RE will pick it up
+		while (part = parts.shift(), typeof part === 'string') {
+			// find all pseudo-elements
+			match = _find(part, PSEUDO_ELEMENTS_RE);
+			score[2] = match;
+			// and remove them
+			match && (part = part.replace(PSEUDO_ELEMENTS_RE, ''));
+			// find all pseudo-classes
+			match = _find(part, PSEUDO_CLASSES_RE);
+			score[1] = match;
+			// and remove them
+			match && (part = part.replace(PSEUDO_CLASSES_RE, ''));
+			// find all attributes
+			match = _find(part, ATTR_RE);
+			score[1] += match;
+			// and remove them
+			match && (part = part.replace(ATTR_RE, ''));
+			// find all IDs
+			match = _find(part, ID_RE);
+			score[0] = match;
+			// and remove them
+			match && (part = part.replace(ID_RE, ''));
+			// find all classes
+			match = _find(part, CLASS_RE);
+			score[1] += match;
+			// and remove them
+			match && (part = part.replace(CLASS_RE, ''));
+			// find all elements
+			score[2] += _find(part, ELEMENT_RE);
+		}
+
+		return parseInt(score.join(''), 10);
+	};
+
+	// returns the heights possible specificity score an element can get from a give rule's selectorText
+	var getSpecificityScore = function (element, selectorText) {
+		var selectors = selectorText.split(','),
+			selector, score, result = 0;
+
+		while (selector = selectors.shift()) {
+			if (element.closest(selector)) {
+				score = calculateScore(selector);
+				result = score > result ? score : result;
+			}
+		}
+
+		return result;
+	};
+
+	var sortBySpecificity = function (element, rules) {
+		// comparing function that sorts CSSStyleRules according to specificity of their `selectorText`
+		var compareSpecificity = function (a, b) {
+			return getSpecificityScore(element, b.selectorText) - getSpecificityScore(element, a.selectorText);
+		};
+
+		return rules.sort(compareSpecificity);
+	};
+
+	//TODO: not supporting 2nd argument for selecting pseudo elements
+	//TODO: not supporting 3rd argument for checking author style sheets only
+	window.getMatchedCSSRules = function (element) {  /*, pseudo, author_only*/
+		var styleSheets;
+		var result = [];
+		var sheet;
+		var rules;
+		var rule;
+
+		// get stylesheets and convert to a regular Array
+		styleSheets = toArray(window.document.styleSheets);
+
+		// assuming the browser hands us stylesheets in order of appearance
+		// we iterate them from the beginning to follow proper cascade order
+		while (sheet = styleSheets.shift()) {
+			// get the style rules of this sheet
+			rules = getSheetRules(sheet);
+
+			// loop the rules in order of appearance
+			while (rule = rules.shift()) {
+				// if this is an @import rule
+				if (rule.styleSheet) {
+					// insert the imported stylesheet's rules at the beginning of this stylesheet's rules
+					rules = getSheetRules(rule.styleSheet).concat(rules);
+					// and skip this rule
+					continue;
+				}
+				// if there's no stylesheet attribute BUT there IS a media attribute it's a media rule
+				else if (rule.media) {
+					// insert the contained rules of this media rule to the beginning of this stylesheet's rules
+					rules = getSheetRules(rule).concat(rules);
+					// and skip it
+					continue;
+				}
+
+				// check if this element matches this rule's selector
+				if (element.closest(rule.selectorText)) {
+					// push the rule to the results set
+					result.push(rule);
+				}
+			}
+		}
+		// sort according to specificity
+		return sortBySpecificity(element, result);
+	};
+}());
+
+/*
+ * raf.js
+ * https://github.com/ngryman/raf.js
+ *
+ * original requestAnimationFrame polyfill by Erik Möller
+ * inspired from paul_irish gist and post
+ *
+ * Copyright (c) 2013 ngryman
+ * Licensed under the MIT license.
+ */
+
+(function(window) {
+	var lastTime = 0,
+		vendors = ['webkit', 'moz'],
+		requestAnimationFrame = window.requestAnimationFrame,
+		cancelAnimationFrame = window.cancelAnimationFrame,
+		i = vendors.length;
+
+	// try to un-prefix existing raf
+	while (--i >= 0 && !requestAnimationFrame) {
+		requestAnimationFrame = window[vendors[i] + 'RequestAnimationFrame'];
+		cancelAnimationFrame = window[vendors[i] + 'CancelAnimationFrame'];
+	}
+
+	// polyfill with setTimeout fallback
+	// heavily inspired from @darius gist mod: https://gist.github.com/paulirish/1579671#comment-837945
+	if (!requestAnimationFrame || !cancelAnimationFrame) {
+		requestAnimationFrame = function(callback) {
+			var now = +new Date(), nextTime = Math.max(lastTime + 16, now);
+			return setTimeout(function() {
+				callback(lastTime = nextTime);
+			}, nextTime - now);
+		};
+
+		cancelAnimationFrame = clearTimeout;
+	}
+
+	// export to window
+	window.requestAnimationFrame = requestAnimationFrame;
+	window.cancelAnimationFrame = cancelAnimationFrame;
+}(window));
+
+/*!
+ * Polyfill CSS object-fit
+ * http://helloanselm.com/object-fit
+ *
+ * @author: Anselm Hannemann <hello@anselm-hannemann.com>
+ * @author: Christian "Schepp" Schaefer <schaepp@gmx.de>
+ * @version: 0.3.4
+ *
+ */
+
+(function (global) {
+
+	'use strict';
+
+	// Storage variable
+	var objectFit = {};
+
+	objectFit._debug = false;
+
+	objectFit.observer = null;
+
+	objectFit.disableCrossDomain = 'false';
+
+	objectFit.getComputedStyle = function(element, context) {
+		context = context || window;
+
+		if (context.getComputedStyle) {
+			return context.getComputedStyle(element, null);
+		}
+		else {
+			return element.currentStyle;
+		}
+	};
+
+	objectFit.getDefaultComputedStyle = function(element){
+		var newelement = element.cloneNode(true);
+		var styles = {};
+		var iframe = document.createElement('iframe');
+		document.body.appendChild(iframe);
+		iframe.contentWindow.document.open();
+		iframe.contentWindow.document.write('<body></body>');
+		iframe.contentWindow.document.body.appendChild(newelement);
+		iframe.contentWindow.document.close();
+
+		var defaultElement = iframe.contentWindow.document.querySelectorAll(element.nodeName.toLowerCase())[0];
+		var defaultComputedStyle = this.getComputedStyle(defaultElement, iframe.contentWindow);
+		var value;
+		var property;
+
+		for (property in defaultComputedStyle) {
+			if (defaultComputedStyle.getPropertyValue === true) {
+				value = defaultComputedStyle.getPropertyValue(property);
+			} else {
+				value = defaultComputedStyle[property];
+			}
+
+			if (value !== null) {
+				switch (property) {
+					default:
+						styles[property] = value;
+					break;
+
+					case 'width':
+					case 'height':
+					case 'minWidth':
+					case 'minHeight':
+					case 'maxWidth':
+					case 'maxHeight':
+					break;
+				}
+			}
+		}
+
+		document.body.removeChild(iframe);
+
+		return styles;
+	};
+
+	objectFit.getMatchedStyle = function(element, property){
+		// element property has highest priority
+		var val = null;
+		var inlineval = null;
+
+		if (element.style.getPropertyValue) {
+			inlineval = element.style.getPropertyValue(property);
+		} else if (element.currentStyle) {
+			inlineval = element.currentStyle[property];
+		}
+
+		// get matched rules
+		var rules = window.getMatchedCSSRules(element);
+		var i = rules.length;
+		var r;
+		var important;
+
+		if (i) {
+			// iterate the rules backwards
+			// rules are ordered by priority, highest last
+			for (; i --> 0;) {
+				r = rules[i];
+				important = r.style.getPropertyPriority(property);
+
+				// if set, only reset if important
+				if (val === null || important) {
+					val = r.style.getPropertyValue(property);
+
+					// done if important
+					if (important) {
+						break;
+					}
+				}
+			}
+		}
+
+		// if it's important, we are done
+		if (!val && inlineval !== null) {
+			val = inlineval;
+		}
+
+		return val;
+	};
+
+	// Detects orientation
+	objectFit.orientation = function(replacedElement) {
+		if (replacedElement.parentNode && replacedElement.parentNode.nodeName.toLowerCase() === 'x-object-fit') {
+			var width = replacedElement.naturalWidth || replacedElement.clientWidth;
+			var height = replacedElement.naturalHeight || replacedElement.clientHeight;
+			var parentWidth = replacedElement.parentNode.clientWidth;
+			var parentHeight = replacedElement.parentNode.clientHeight;
+
+			if (!height || width / height > parentWidth / parentHeight) {
+				if (replacedElement.getAttribute('data-x-object-relation') !== 'wider') {
+					replacedElement.setAttribute('data-x-object-relation','wider');
+					replacedElement.className += ' x-object-fit-wider';
+
+					if (this._debug && window.console) {
+						console.log('x-object-fit-wider');
+					}
+				}
+			} else {
+				if (replacedElement.getAttribute('data-x-object-relation') !== 'taller') {
+					replacedElement.setAttribute('data-x-object-relation','taller');
+					replacedElement.className += ' x-object-fit-taller';
+
+					if (this._debug && window.console) {
+						console.log('x-object-fit-taller');
+					}
+				}
+			}
+		}
+	};
+
+	objectFit.process = function(args) {
+		if (!args.selector || !args.replacedElements) {
+			return;
+		}
+
+		// Set option objectFit.disableCrossDomain
+		objectFit.disableCrossDomain = args.disableCrossDomain || 'false';
+
+		// Set option fit-type
+		args.fittype = args.fittype || 'none';
+
+		switch (args.fittype) {
+			default:
+				return;
+
+			case 'none':
+			case 'fill':
+			case 'contain':
+			case 'cover':
+			break;
+		}
+
+		// Set option replacedElements
+		var replacedElements = args.replacedElements;
+
+		if(!replacedElements.length) {
+			return;
+		}
+
+		for (var i = 0, replacedElementsLength = replacedElements.length; i < replacedElementsLength; i++) {
+			this.processElement(replacedElements[i], args);
+		}
+	};
+
+	objectFit.processElement = function(replacedElement, args) {
+		var property;
+		var value;
+		var replacedElementStyles = objectFit.getComputedStyle(replacedElement);
+		var replacedElementDefaultStyles = objectFit.getDefaultComputedStyle(replacedElement);
+		var wrapperElement = document.createElement('x-object-fit');
+
+		if (objectFit._debug && window.console) {
+			console.log('Applying to WRAPPER-------------------------------------------------------');
+		}
+
+		for (property in replacedElementStyles) {
+			switch (property) {
+				default:
+					value = objectFit.getMatchedStyle(replacedElement, property);
+
+					if (value !== null && value !== '') {
+						if (objectFit._debug && window.console) {
+							console.log(property + ': ' + value);
+						}
+
+						wrapperElement.style[property] = value;
+					}
+				break;
+
+				case 'length':
+				case 'parentRule':
+				break;
+			}
+		}
+
+		if (objectFit._debug && window.console) {
+			console.log('Applying to REPLACED ELEMENT-------------------------------------------------------');
+		}
+		for (property in replacedElementDefaultStyles) {
+			switch (property) {
+				default:
+					value = replacedElementDefaultStyles[property];
+
+					if (objectFit._debug && window.console && value !== '') {
+						console.log(property + ': ' + value);
+
+						if (replacedElement.style[property] === undefined) {
+							console.log('Indexed style properties (`' + property + '`) not supported in: ' + window.navigator.userAgent);
+						}
+					}
+
+					if (replacedElement.style[property]) {
+						replacedElement.style[property] = value; // should work in Firefox 35+ and all other browsers
+					} else {
+						replacedElement.style.property = value;
+					}
+				break;
+
+				case 'length':
+				case 'parentRule':
+				break;
+			}
+		}
+
+		wrapperElement.setAttribute('class','x-object-fit-' + args.fittype);
+		replacedElement.parentNode.insertBefore(wrapperElement, replacedElement);
+		wrapperElement.appendChild(replacedElement);
+
+		objectFit.orientation(replacedElement);
+
+		var resizeTimer = null;
+		var resizeAction = function () {
+			if (resizeTimer !== null) {
+				window.cancelAnimationFrame(resizeTimer);
+			}
+			resizeTimer = window.requestAnimationFrame(function(){
+				objectFit.orientation(replacedElement);
+			});
+		};
+
+		switch (args.fittype) {
+			default:
+			break;
+
+			case 'contain':
+			case 'cover':
+				if (window.addEventListener) {
+					replacedElement.addEventListener('load', resizeAction, false);
+					window.addEventListener('resize', resizeAction, false);
+					window.addEventListener('orientationchange', resizeAction, false);
+				} else {
+					replacedElement.attachEvent('onload', resizeAction);
+					window.attachEvent('onresize', resizeAction);
+				}
+			break;
+		}
+	};
+
+	objectFit.listen = function (args) {
+		var domInsertedAction = function (element){
+			var i = 0;
+			var argsLength = args.length;
+
+			for (; i < argsLength; i++) {
+				if ((element.mozMatchesSelector && element.mozMatchesSelector(args[i].selector)) ||
+					(element.msMatchesSelector && element.msMatchesSelector(args[i].selector)) ||
+					(element.oMatchesSelector && element.oMatchesSelector(args[i].selector)) ||
+					(element.webkitMatchesSelector && element.webkitMatchesSelector(args[i].selector))
+				) {
+					args[i].replacedElements = [element];
+					objectFit.process(args[i]);
+
+					if (objectFit._debug && window.console) {
+						console.log('Matching node inserted: ' + element.nodeName);
+					}
+				}
+			}
+		};
+
+		var domInsertedObserverFunction = function (element) {
+			objectFit.observer.disconnect();
+			domInsertedAction(element);
+			objectFit.observer.observe(document.documentElement, {
+				childList: true,
+				subtree: true
+			});
+		};
+
+		var domInsertedEventFunction = function (event) {
+			window.removeEventListener('DOMNodeInserted', domInsertedEventFunction, false);
+			domInsertedAction(event.target);
+			window.addEventListener('DOMNodeInserted', domInsertedEventFunction, false);
+		};
+
+		var domRemovedAction = function (element) {
+			if (element.nodeName.toLowerCase() === 'x-object-fit') {
+				element.parentNode.removeChild(element);
+
+				if (objectFit._debug && window.console) {
+					console.log('Matching node removed: ' + element.nodeName);
+				}
+			}
+		};
+
+		var domRemovedObserverFunction = function (element) {
+			objectFit.observer.disconnect();
+			domRemovedAction(element);
+			objectFit.observer.observe(document.documentElement, {
+				childList: true,
+				subtree: true
+			});
+		};
+
+		var domRemovedEventFunction = function (event) {
+			window.removeEventListener('DOMNodeRemoved', domRemovedEventFunction, false);
+			domRemovedAction(event.target.parentNode);
+			window.addEventListener('DOMNodeRemoved', domRemovedEventFunction, false);
+		};
+
+		if (window.MutationObserver) {
+			if (objectFit._debug && window.console) {
+				console.log('DOM MutationObserver');
+			}
+
+			this.observer = new MutationObserver(function(mutations) {
+				mutations.forEach(function(mutation) {
+					if (mutation.addedNodes && mutation.addedNodes.length) {
+						var nodes = mutation.addedNodes;
+						for (var i = 0, nodesLength = nodes.length; i < nodesLength; i++) {
+							domInsertedObserverFunction(nodes[i]);
+						}
+					}
+					if (mutation.removedNodes && mutation.removedNodes.length) {
+						domRemovedObserverFunction(mutation.target);
+					}
+				});
+			});
+
+			this.observer.observe(document.documentElement, {
+				childList: true,
+				subtree: true
+			});
+		} else if (window.addEventListener) {
+			if (objectFit._debug && window.console) {
+				console.log('DOM Mutation Events');
+			}
+
+			window.addEventListener('DOMNodeInserted', domInsertedEventFunction, false);
+			window.addEventListener('DOMNodeRemoved', domRemovedEventFunction, false);
+		}
+	};
+
+	objectFit.init = function (args) {
+		if (!args) {
+			return;
+		}
+
+		if (!(args instanceof Array)) {
+			args = [args];
+		}
+
+		var i = 0;
+		var argsLength = args.length;
+
+		for (; i < argsLength; i++) {
+			args[i].replacedElements = document.querySelectorAll(args[i].selector);
+			this.process(args[i]);
+		}
+
+		this.listen(args);
+	};
+
+	objectFit.polyfill = function (args) {
+		if('objectFit' in document.documentElement.style === false) {
+			if (objectFit._debug && window.console) {
+				console.log('object-fit not natively supported');
+			}
+
+			// If the library is loaded after document onload event
+			if (document.readyState === 'complete') {
+				objectFit.init(args);
+			} else {
+				// Otherwise attach event listeners
+				if (window.addEventListener) {
+					window.addEventListener('load', function(){
+						objectFit.init(args);
+					}, false);
+				} else {
+					window.attachEvent('onload', function(){
+						objectFit.init(args);
+					});
+				}
+			}
+		} else {
+			if (objectFit._debug && window.console) {
+				console.log('object-fit natively supported');
+			}
+		}
+	};
+
+	/*
+	 * AMD, module loader, global registration
+	 */
+
+	// Expose modal for loaders that implement the Node module pattern.
+	if (typeof module === 'object' && module && typeof module.exports === 'object') {
+		module.exports = objectFit;
+
+	// Register as an AMD module
+	} else if (typeof define === 'function' && define.amd) {
+		define([], function () { return objectFit; });
+
+	// Export into global space
+	} else if (typeof global === 'object' && typeof global.document === 'object') {
+		global.objectFit = objectFit;
+	}
+
+}(window));