https://www.nippn.co.jp/assets/js/lib/ofi.js

1/*! npm.im/object-fit-images 3.2.4 */
2var objectFitImages = (function () {
3'use strict';
4
5var OFI = 'bfred-it:object-fit-images';
6var propRegex = /(object-fit|object-position)\s*:\s*([-.\w\s%]+)/g;
7var testImg = typeof Image === 'undefined' ? {style: {'object-position': 1}} : new Image();
8var supportsObjectFit = 'object-fit' in testImg.style;
9var supportsObjectPosition = 'object-position' in testImg.style;
10var supportsOFI = 'background-size' in testImg.style;
11var supportsCurrentSrc = typeof testImg.currentSrc === 'string';
12var nativeGetAttribute = testImg.getAttribute;
13var nativeSetAttribute = testImg.setAttribute;
14var autoModeEnabled = false;
15
16function 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
20function 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
40function 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
50function 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
60function 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
70function 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/bfred-it/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
144function 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 () { return descriptors.get('currentSrc'); }
159  });
160  Object.defineProperty(el, 'srcset', {
161    get: function () { return descriptors.get('srcset'); },
162    set: function (ss) { return descriptors.set(ss, 'srcset'); }
163  });
164}
165
166function hijackAttributes() {
167  function getOfiImageMaybe(el, name) {
168    return el[OFI] && el[OFI].img && (name === 'src' || name === 'srcset') ? el[OFI].img : el;
169  }
170  if (!supportsObjectPosition) {
171    HTMLImageElement.prototype.getAttribute = function (name) {
172      return nativeGetAttribute.call(getOfiImageMaybe(this, name), name);
173    };
174
175    HTMLImageElement.prototype.setAttribute = function (name, value) {
176      return nativeSetAttribute.call(getOfiImageMaybe(this, name), name, String(value));
177    };
178  }
179}
180
181function fix(imgs, opts) {
182  var startAutoMode = !autoModeEnabled && !imgs;
183  opts = opts || {};
184  imgs = imgs || 'img';
185
186  if ((supportsObjectPosition && !opts.skipTest) || !supportsOFI) {
187    return false;
188  }
189

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