https://tennis-hsc.de/clubdesk/webpage/fixes/ofi.js

1/*! npm.im/object-fit-images 3.2.4 */
2var objectFitImages = (function () {
3    'use strict';
4
5    var OFI = 'fregante:object-fit-images';
6    var propRegex = /(object-fit|object-position)\s*:\s*([-.\w\s%]+)/g;
7    var testImg = typeof Image === 'undefined' ? {style: {'object-position': 1}} : new Image();
8    var supportsObjectFit = 'object-fit' in testImg.style;
9    var supportsObjectPosition = 'object-position' in testImg.style;
10    var supportsOFI = 'background-size' in testImg.style;
11    var supportsCurrentSrc = typeof testImg.currentSrc === 'string';
12    var nativeGetAttribute = testImg.getAttribute;
13    var nativeSetAttribute = testImg.setAttribute;
14    var autoModeEnabled = false;
15
16    function createPlaceholder(w, h) {
17        return ("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='" + w + "' height='" + h + "'%3E%3C/svg%3E");
18    }
19
20    function polyfillCurrentSrc(el) {
21        if (el.srcset && !supportsCurrentSrc && window.picturefill) {
22            var pf = window.picturefill._;
23            // parse srcset with picturefill where currentSrc isn't available
24            if (!el[pf.ns] || !el[pf.ns].evaled) {
25                // force synchronous srcset parsing
26                pf.fillImg(el, {reselect: true});
27            }
28
29            if (!el[pf.ns].curSrc) {
30                // force picturefill to parse srcset
31                el[pf.ns].supported = false;
32                pf.fillImg(el, {reselect: true});
33            }
34
35            // retrieve parsed currentSrc, if any
36            el.currentSrc = el[pf.ns].curSrc || el.src;
37        }
38    }
39
40    function getStyle(el) {
41        var style = getComputedStyle(el).fontFamily;
42        var parsed;
43        var props = {};
44        while ((parsed = propRegex.exec(style)) !== null) {
45            props[parsed[1]] = parsed[2];
46        }
47        return props;
48    }
49
50    function setPlaceholder(img, width, height) {
51        // Default: fill width, no height
52        var placeholder = createPlaceholder(width || 1, height || 0);
53
54        // Only set placeholder if it's different
55        if (nativeGetAttribute.call(img, 'src') !== placeholder) {
56            nativeSetAttribute.call(img, 'src', placeholder);
57        }
58    }
59
60    function onImageReady(img, callback) {
61        // naturalWidth is only available when the image headers are loaded,
62        // this loop will poll it every 100ms.
63        if (img.naturalWidth) {
64            callback(img);
65        } else {
66            setTimeout(onImageReady, 100, img, callback);
67        }
68    }
69
70    function fixOne(el) {
71        var style = getStyle(el);
72        var ofi = el[OFI];
73        style['object-fit'] = style['object-fit'] || 'fill'; // default value
74
75        // Avoid running where unnecessary, unless OFI had already done its deed
76        if (!ofi.img) {
77            // fill is the default behavior so no action is necessary
78            if (style['object-fit'] === 'fill') {
79                return;
80            }
81
82            // Where object-fit is supported and object-position isn't (Safari < 10)
83            if (
84                !ofi.skipTest && // unless user wants to apply regardless of browser support
85                supportsObjectFit && // if browser already supports object-fit
86                !style['object-position'] // unless object-position is used
87            ) {
88                return;
89            }
90        }
91
92        // keep a clone in memory while resetting the original to a blank
93        if (!ofi.img) {
94            ofi.img = new Image(el.width, el.height);
95            ofi.img.srcset = nativeGetAttribute.call(el, "data-ofi-srcset") || el.srcset;
96            ofi.img.src = nativeGetAttribute.call(el, "data-ofi-src") || el.src;
97
98            // preserve for any future cloneNode calls
99            // https://github.com/fregante/object-fit-images/issues/53
100            nativeSetAttribute.call(el, "data-ofi-src", el.src);
101            if (el.srcset) {
102                nativeSetAttribute.call(el, "data-ofi-srcset", el.srcset);
103            }
104
105            setPlaceholder(el, el.naturalWidth || el.width, el.naturalHeight || el.height);
106
107            // remove srcset because it overrides src
108            if (el.srcset) {
109                el.srcset = '';
110            }
111            try {
112                keepSrcUsable(el);
113            } catch (err) {
114                if (window.console) {
115                    console.warn('https://bit.ly/ofi-old-browser');
116                }
117            }
118        }
119
120        polyfillCurrentSrc(ofi.img);
121
122        el.style.backgroundImage = "url(\"" + ((ofi.img.currentSrc || ofi.img.src).replace(/"/g, '\\"')) + "\")";
123        el.style.backgroundPosition = style['object-position'] || 'center';
124        el.style.backgroundRepeat = 'no-repeat';
125        el.style.backgroundOrigin = 'content-box';
126
127        if (/scale-down/.test(style['object-fit'])) {
128            onImageReady(ofi.img, function () {

129                if (ofi.img.naturalWidth > el.width || ofi.img.naturalHeight > el.height) {
130                    el.style.backgroundSize = 'contain';
131                } else {
132                    el.style.backgroundSize = 'auto';
133                }
134            });
135        } else {
136            el.style.backgroundSize = style['object-fit'].replace('none', 'auto').replace('fill', '100% 100%');
137        }
138
139        onImageReady(ofi.img, function (img) {
140            setPlaceholder(el, img.naturalWidth, img.naturalHeight);
141        });
142    }
143
144    function keepSrcUsable(el) {
145        var descriptors = {
146            get: function get(prop) {
147                return el[OFI].img[prop ? prop : 'src'];
148            },
149            set: function set(value, prop) {
150                el[OFI].img[prop ? prop : 'src'] = value;
151                nativeSetAttribute.call(el, ("data-ofi-" + prop), value); // preserve for any future cloneNode
152                fixOne(el);
153                return value;
154            }
155        };
156        Object.defineProperty(el, 'src', descriptors);
157        Object.defineProperty(el, 'currentSrc', {
158            get: function () {
159                return descriptors.get('currentSrc');
160            }
161        });
162        Object.defineProperty(el, 'srcset', {
163            get: function () {
164                return descriptors.get('srcset');
165            },
166            set: function (ss) {
167                return descriptors.set(ss, 'srcset');
168            }
169        });
170    }
171
172    function hijackAttributes() {
173        function getOfiImageMaybe(el, name) {
174            return el[OFI] && el[OFI].img && (name === 'src' || name === 'srcset') ? el[OFI].img : el;
175        }
176
177        if (!supportsObjectPosition) {
178            HTMLImageElement.prototype.getAttribute = function (name) {
179                return nativeGetAttribute.call(getOfiImageMaybe(this, name), name);
180            };
181
182            HTMLImageElement.prototype.setAttribute = function (name, value) {
183                return nativeSetAttribute.call(getOfiImageMaybe(this, name), name, String(value));
184            };
185        }
186    }
187
188    function fix(imgs, opts) {
189        var startAutoMode = !autoModeEnabled && !imgs;
190        opts = opts || {};
191        imgs = imgs || 'img';
192
193        if ((supportsObjectPosition && !opts.skipTest) || !supportsOFI) {
194            return false;
195        }
196

197        // use imgs as a selector or just select all images
198        if (imgs === 'img') {
199            imgs = document.getElementsByTagName('img');
200        } else if (typeof imgs === 'string') {
201            imgs = document.querySelectorAll(imgs);
202        } else if (!('length' in imgs)) {
203            imgs = [imgs];
204        }
205
206        // apply fix to all
207        for (var i = 0; i < imgs.length; i++) {
208            imgs[i][OFI] = imgs[i][OFI] || {
209                skipTest: opts.skipTest
210            };
211            fixOne(imgs[i]);
212        }
213
214        if (startAutoMode) {
215            document.body.addEventListener('load', function (e) {
216                if (e.target.tagName === 'IMG') {
217                    fix(e.target, {
218                        skipTest: opts.skipTest
219                    });
220                }
221            }, true);
222            autoModeEnabled = true;
223            imgs = 'img'; // reset to a generic selector for watchMQ
224        }
225
226        // if requested, watch media queries for object-fit change
227        if (opts.watchMQ) {
228            window.addEventListener('resize', fix.bind(null, imgs, {
229                skipTest: opts.skipTest
230            }));
231        }
232    }
233
234    fix.supportsObjectFit = supportsObjectFit;
235    fix.supportsObjectPosition = supportsObjectPosition;
236
237    hijackAttributes();
238
239    return fix;
240
241}());