https://www.nestleschool.net/wp-content/themes/envision/lib/js/retina_ver-2.1.0.js

1/* ============================================================
2 * retina-replace.js v1.0
3 * http://github.com/leonsmith/retina-replace-js
4 * ============================================================
5 * Author: Leon Smith
6 * Twitter: @nullUK
7 *
8 * Licensed under the Apache License, Version 2.0 (the "License");
9 * you may not use this file except in compliance with the License.
10 * You may obtain a copy of the License at
11 *
12 * http://www.apache.org/licenses/LICENSE-2.0
13 *
14 * Unless required by applicable law or agreed to in writing, software
15 * distributed under the License is distributed on an "AS IS" BASIS,
16 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17 * See the License for the specific language governing permissions and
18 * limitations under the License.
19 * ============================================================ */
20 (function($) {
21		"use strict";
22		
23		var retinaReplace = function(element, options) {
24
25				this.options = options;
26				var $el = $(element);
27				var is_image = $el.is('img');
28				var normal_url = is_image ? $el.attr('src') : $el.backgroundImageUrl();
29				var retina_url = $el.attr('data-at2x') ? $el.attr('data-at2x') : '';;
30
31				if ( retina_url == '' ) {
32					if ( $el.attr('data-retina-auto') ) {
33						retina_url = this.options.generateUrl($el, normal_url);
34					} else {
35						return true;
36					}
37				}		
38
39				try {
40
41					$('<img/>').attr('src', retina_url).load(function() {
42
43						if (is_image) {
44
45							$el.css({ width: $el.width(), height: $el.height() });
46							$el.attr('data-orginal-src', $el.attr('src'));
47							$el.attr('src', $(this).attr('src'));
48
49						} else {
50
51							$el.backgroundImageUrl($(this).attr('src'));
52							$el.backgroundSize($(this)[0].width, $(this)[0].height);
53						
54						}
55
56						$el.attr('data-retina', 'complete');
57
58					});
59					
60				} catch (e) {}
61						
62
63		}
64
65		retinaReplace.prototype = {
66				constructor: retinaReplace
67		}
68
69		$.fn.retinaReplace = function(option) {
70				// Finish if we arn't a retina device
71				return this.each(function() {
72					var $this = $(this);
73					var data = $this.data('retinaReplace');
74					var options = $.extend({}, $.fn.retinaReplace.defaults, $this.data(), typeof option == 'object' && option);
75					if (!data) { $this.data('retinaReplace', (data = new retinaReplace(this, options))); }
76					if (typeof option == 'string') { data[option](); }
77				});
78		}
79		
80		$.fn.retinaReplace.defaults = {
81				suffix: '@2x', 
82				generateUrl: function(element, url) {
83					var dot_index = url.lastIndexOf('.');
84					var extension = url.substr(dot_index + 1);
85					var file = url.substr(0, dot_index);
86					return file + this.suffix + '.' + extension;
87				}
88		}
89
90		$.fn.retinaReplace.Constructor = retinaReplace;
91
92		$.fn.backgroundImageUrl = function(url) {
93			return url ? this.each(function () { 
94				$(this).css("background-image", 'url("' + url + '")')
95			}) : $(this).css("background-image").replace(/url\(|\)|"|'/g, "");
96		}
97
98		$.fn.backgroundSize = function(retinaWidth, retinaHeight) {
99			var sizeValue = Math.floor(retinaWidth/2) + 'px ' + Math.floor(retinaHeight/2) + 'px';
100			$(this).css("background-size", sizeValue);
101			$(this).css("-webkit-background-size", sizeValue);
102		}
103
104		// Trigger replacement on elements that hav been marked up
105		var init = function(){
106			$(":not([data-at2x='']):visible").retinaReplace();
107		}
108
109
110		// Check is retina
111		var isRetina = function(){
112			var root = (typeof exports == 'undefined' ? window : exports);
113			var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\
114							(min--moz-device-pixel-ratio: 1.5),\
115							(-o-min-device-pixel-ratio: 3/2),\
116							(min-resolution: 1.5dppx)";
117
118			if (root.devicePixelRatio > 1) {
119				return true;
120			}
121
122			if (root.matchMedia && root.matchMedia(mediaQuery).matches) {
123				return true;
124			}
125
126			//return true;
127			return false;
128		};
129
130
131		if ( isRetina() ) {
132			//$(init);
133			$('html').removeClass('no-retina').addClass('retina');
134			$(window).load( init );
135			$(window).smartresize( init );
136			$(window).bind( 'make@2x', init );
137		}
138
139
140})(window.jQuery);