https://www.4meigroningen.nl/bundles/kirraframework/js/responsive-image.js

1/**
2 * Make images responsive.
3 */
4;(function ($) {
5	var $responsive_images = $(),
6		last_update = 0,
7		timeout = undefined;
8
9	/**
10	 * Make images responsive.
11	 */
12	$.fn.responsiveImage = function () {
13		var $this = $(this);
14
15		$this.each(function () {
16			var $this = $(this);
17			var ratio = Math.pow($this.data('aspect-ratio'), -1);
18
19			// add wrapper element when the image isn't already wrapped
20			if ($this.parent('.responsive-image').length === 0) {
21				$this.wrap($('<div class="responsive-image">').css('padding-top', ratio * 100 + '%'));
22			}
23		});
24
25		// add to monitored elements
26		$responsive_images = $().add($this);
27
28		// force update
29		if (timeout) {
30			window.clearTimeout(timeout);
31		}
32		updateResponsiveImages();
33	};
34
35	/**
36	 * Update responsive images.
37	 */
38	function updateResponsiveImages() {
39		// store update timestamp
40		last_update = new Date().getTime();
41		timeout = undefined;
42
43		$responsive_images.each(function (index) {
44			typeof (rasterizerWaitService) !== "undefined" 
45				&& rasterizerWaitService.add('responsive_image' + index, 200);
46
47			// get size and aspect ratio
48			var $this = $(this),
49				$parent = $this.parent(),
50				width = $parent.outerWidth(),
51				height = $parent.outerHeight(),
52				image_width = width,
53				image_height = height,
54				source_set,
55				url,
56				src,
57				conditions,
58				i;
59
60			// Stop when no `srcset` attribute is available (in cases of SVG images).
61			if (typeof $this.data('srcset') === 'undefined') {
62				typeof (rasterizerWaitService) !== "undefined"
63					&& rasterizerWaitService.resolve('responsive_image' + index);
64
65				return;
66			}
67
68			// only run if size changed
69			if ($this.data('currentWidth') != width || $this.data('currentHeight') != height) {
70				// store new size
71				$this.data('currentWidth', width).data('currentWidth', height);
72
73				// parse source set
74				if (!$this.data('sourceSet')) {
75					// split source set property on commas
76					var srcset = $this.data('srcset').trim().split(/,\s*/);
77					source_set = [];
78
79					for (i = 0; i < srcset.length; i++) {
80						// split individual source on spaces and use first component as url
81						src = srcset[i].split(/\s+/);
82						url = src.shift();
83						conditions = {};
84
85						// parse conditions
86						for (var j = 0; j < src.length; j++) {
87							if (src[j].match(/[whx]$/i)) {
88								conditions[src[j].substring(src[j].length - 1).toLowerCase()] = parseFloat(src[j].substring(0, src[j].length - 1));
89							}
90						}
91
92						// add to source set
93						source_set.push({
94							url: url,
95							conditions: conditions
96						});
97					}
98
99					// store source set with image
100					$this.data('sourceSet', source_set);
101				} else {
102					// load source set from image
103					source_set = $this.data('sourceSet');
104				}
105
106				// IE 10 doesn't support window.devicePixelRatio so default it to 1
107				var device_pixel_ratio = typeof window.devicePixelRatio !== 'undefined' ? window.devicePixelRatio : 1;
108
109				// compute target values to match against source set
110				var target = {
111					w: device_pixel_ratio * image_width,
112					h: device_pixel_ratio * image_height,
113					x: device_pixel_ratio
114				};
115
116				// find url
117				for (i = 0; i < source_set.length; i++) {
118					var found = true;
119
120					// compare conditions in source to target
121					for (var key in source_set[i].conditions) {
122						if (source_set[i].conditions[key] <= target[key]) {
123							found = false;
124							break;
125						}
126					}
127
128					// use first url found
129					url = source_set[i].url;
130					if (found) {
131						break;
132					}
133				}
134
135				if (url) {
136					// update url
137					$this.attr('src', url);
138
139					// check if browser doesn't support object-fit, if the object-fit plug-in is available and the image has the object-fit polyfill applied
140					if ('objectFit' in document.documentElement.style === false &&
141						'KirraObjectFitImages' in window === true &&
142						$this.css('font-family').indexOf('object-fit') > -1
143					) {
144						// Apply object fit image polyfill.
145						document.dispatchEvent(new CustomEvent('KirraObjectFitImages:trigger', {
146							detail: {
147								elements: $this
148							}
149						}));
150					}
151				}
152			}
153
154			typeof (rasterizerWaitService) !== "undefined"
155				&& rasterizerWaitService.resolve('responsive_image' + index);
156		});
157	}
158
159	// apply to existing responsive images on load
160	$(document).ready(function () {
161		$('[data-responsive-image]').responsiveImage();
162	});
163
164
165	// trigger update when viewport changes
166	$(window).on('resize orientationchange', function () {
167		// only update once every 200ms
168		if (!timeout) {
169			timeout = window.setTimeout(updateResponsiveImages, Math.max(0, 200 - (new Date().getTime() - last_update)));
170		}
171	});
172})(jQuery);