WIP - add extractor, generate snippet_data
This commit is contained in:
Stefan Fejes
12
node_modules/object-fit-images/CHANGELOG.md
generated
vendored
Normal file
12
node_modules/object-fit-images/CHANGELOG.md
generated
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
# Changelog
|
||||
|
||||
* 3.1.0 Use SVG as a size placeholder instead of canvas
|
||||
* 3.0.0 Improved edge cases with `srcset`, `currentSrc`, unsetting `object-fit`, ...
|
||||
* 2.5.0 Add support `object-position` where `object-fit` is supported
|
||||
* 2.4.0 Add support for `getAttribute`/`setAttribute`
|
||||
* 2.4.0 Add support `scale-down`
|
||||
* 2.2.0 Don't override the `<img>`'s `background-color`
|
||||
* 2.1.0 Further byte savings
|
||||
* 2.0.0 Flipped `onresize` default: the values rarely change with media queries, so only enable them when needed with `{watchMQ:true}`
|
||||
* 1.1.0 Added `srcset` support
|
||||
* 1.0.0 First public release
|
||||
190
node_modules/object-fit-images/README.md
generated
vendored
Normal file
190
node_modules/object-fit-images/README.md
generated
vendored
Normal file
@ -0,0 +1,190 @@
|
||||
# object-fit-images [![gzipped size][badge-gzip]](#no-link) [![build status][badge-travis]][link-travis] [![npm][badge-version]][link-npm] [![CDNJS][badge-cdnjs]][link-cdnjs] [![jsDelivr][badge-jsdelivr]][link-jsdelivr]
|
||||
|
||||
[badge-gzip]: https://badges.herokuapp.com/size/github/bfred-it/object-fit-images/master/dist/ofi.min.js?gzip=true&label=gzipped%20size
|
||||
[badge-travis]: https://api.travis-ci.org/bfred-it/object-fit-images.svg
|
||||
[badge-version]: https://img.shields.io/npm/v/object-fit-images.svg
|
||||
[badge-cdnjs]: https://img.shields.io/cdnjs/v/object-fit-images.svg
|
||||
[badge-jsdelivr]: https://data.jsdelivr.com/v1/package/npm/object-fit-images/badge?style=rounded
|
||||
[link-travis]: https://travis-ci.org/bfred-it/object-fit-images
|
||||
[link-npm]: https://www.npmjs.com/package/object-fit-images
|
||||
[link-cdnjs]: https://cdnjs.com/libraries/object-fit-images
|
||||
[link-jsdelivr]: https://www.jsdelivr.com/package/npm/object-fit-images
|
||||
|
||||
> 🗻 Polyfill object-fit/object-position on `<img>`: IE9, IE10, IE11, Edge, Safari, ...
|
||||
|
||||
- Fast and lightweight ([demo](http://bfred-it.github.io/object-fit-images/demo/))
|
||||
- No additional elements are created
|
||||
- Setup is done via CSS
|
||||
- Scaling is taken care by the browser (it uses `background-size`)
|
||||
- `srcset` support
|
||||
- `src` and `srcset` properties and attributes keep working: `img.src = 'other-image.jpg'`
|
||||
|
||||
## Alternative solutions
|
||||
|
||||
|
||||
Comparison | bfred-it<br>/object-fit-images🌟 | [constancecchen<br>/object-fit-polyfill](https://github.com/constancecchen/object-fit-polyfill) | [tonipinel<br>/object-fit-polyfill](https://github.com/tonipinel/object-fit-polyfill)
|
||||
--- | --- | --- | ---
|
||||
Browsers | <sub>IEdge 9-14, Android<5, Safari<10</sub> | <- Same | "All browsers"
|
||||
Tags | `img` | `image` `video` `picture` | `img`
|
||||
`cover/contain` | 💚 | 💚 | 💚
|
||||
`fill` | 💚 | 💚 | 💚
|
||||
`none` | 💚 | 💚 | 💚
|
||||
`scale-down` | 💚 <sub>using [`{watchMQ:true}`](#apply-on-resize)</sub> | 💚 | 💔
|
||||
`object-position` | 💚 | 💚 | 💔
|
||||
`srcset` support | 💚 Native or [picturefill](https://github.com/scottjehl/picturefill) <sub>[notes](detailed-support-tables.md)</sub> | 💚 | 💔
|
||||
Extra elements | 💚 No | 💔 Yes | 💔 Yes
|
||||
Settings | 💚 via CSS | 💔 via HTML | 💔 via HTML
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
You will need 3 things
|
||||
|
||||
1. one or more `<img>` elements with `src` or `srcset`
|
||||
|
||||
```html
|
||||
<img class='your-favorite-image' src='image.jpg'>
|
||||
```
|
||||
|
||||
2. CSS defining `object-fit` and a special `font-family` property to allow IE to read the correct value
|
||||
|
||||
```css
|
||||
.your-favorite-image {
|
||||
object-fit: contain;
|
||||
font-family: 'object-fit: contain;';
|
||||
}
|
||||
```
|
||||
|
||||
or, if you also need `object-position`
|
||||
|
||||
```css
|
||||
.your-favorite-image {
|
||||
object-fit: cover;
|
||||
object-position: bottom;
|
||||
font-family: 'object-fit: cover; object-position: bottom;';
|
||||
}
|
||||
```
|
||||
|
||||
To generate the `font-family` automatically, you can use the [PostCSS plugin](https://github.com/ronik-design/postcss-object-fit-images) or the [SCSS/SASS/Less mixins.](/preprocessors)
|
||||
|
||||
If you set the `font-family` via JavaScript (which must be followed by calling `objectFitImages()`), make sure to include the quotes [**in** the property.](https://github.com/bfred-it/object-fit-images/issues/29#issuecomment-227491892)
|
||||
|
||||
3. <a name="activation"></a> the activation call before `</body>`, or _on DOM ready_
|
||||
|
||||
```js
|
||||
objectFitImages();
|
||||
// if you use jQuery, the code is: $(function () { objectFitImages() });
|
||||
```
|
||||
|
||||
This will fix all the images on the page **and** also all the images added later (auto mode).
|
||||
|
||||
Alternatively, only fix the images you want, once:
|
||||
|
||||
```js
|
||||
// pass a selector
|
||||
objectFitImages('img.some-image');
|
||||
```
|
||||
|
||||
```js
|
||||
// an array/NodeList
|
||||
var someImages = document.querySelectorAll('img.some-image');
|
||||
objectFitImages(someImages);
|
||||
```
|
||||
|
||||
```js
|
||||
// a single element
|
||||
var oneImage = document.querySelector('img.some-image');
|
||||
objectFitImages(oneImage);
|
||||
```
|
||||
|
||||
```js
|
||||
// or with jQuery
|
||||
var $someImages = $('img.some-image');
|
||||
objectFitImages($someImages);
|
||||
```
|
||||
|
||||
You can call `objectFitImages()` on the same elements more than once without issues, for example to manually request an update of the `object-fit` value.
|
||||
|
||||
## Apply on `resize`
|
||||
|
||||
You don't need to re-apply it on `resize`, unless:
|
||||
|
||||
* You're using `scale-down`, or
|
||||
* <a id="media-query-affects-object-fit-value">your media queries change the value of `object-fit`,</a> like this
|
||||
|
||||
```css
|
||||
img { object-fit: cover; }
|
||||
@media (max-width: 500px) { img { object-fit: contain; } }
|
||||
```
|
||||
|
||||
In one of those cases, use the `watchMQ` option:
|
||||
|
||||
```js
|
||||
objectFitImages('img.some-image', {watchMQ: true});
|
||||
// or objectFitImages(null, {watchMQ: true}); // for the auto mode
|
||||
```
|
||||
|
||||
## Install
|
||||
|
||||
Pick your favorite:
|
||||
|
||||
```html
|
||||
<script src="dist/ofi.min.js"></script>
|
||||
<!-- CDN is also available, but I suggest you concatenate JS files instead -->
|
||||
<!-- Visit https://cdnjs.com/libraries/object-fit-images -->
|
||||
```
|
||||
|
||||
```sh
|
||||
npm install --save object-fit-images
|
||||
```
|
||||
|
||||
```js
|
||||
var objectFitImages = require('object-fit-images');
|
||||
```
|
||||
|
||||
```js
|
||||
import objectFitImages from 'object-fit-images';
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### `objectFitImages(images, options)`
|
||||
|
||||
Both parameters are optional.
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>parameter</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>images</code></th>
|
||||
<td>
|
||||
Type: <code>string</code>, <code>element</code>, <code>array</code>, <code>NodeList</code>, <code>null</code><br>
|
||||
Default: <code>null</code><br><br>
|
||||
The images to fix. More info in the <a href="#usage">Usage</a> section
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>options</code></th>
|
||||
<td>
|
||||
Type: <code>object</code><br>
|
||||
Default: <code>{}</code><br>
|
||||
Example: <code>{watchMQ:true}</code><br><br>
|
||||
<table>
|
||||
<tr>
|
||||
<th><code>watchMQ</code></th>
|
||||
<td>
|
||||
Type: <code>boolean</code><br>
|
||||
Default: <code>false</code><br><br>
|
||||
This enables the automatic re-fix of the selected images when the window resizes. You only need it <a href="#apply-on-resize">in some cases</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## License
|
||||
|
||||
MIT © [Federico Brigante](http://twitter.com/bfred_it)
|
||||
231
node_modules/object-fit-images/dist/ofi.common-js.js
generated
vendored
Normal file
231
node_modules/object-fit-images/dist/ofi.common-js.js
generated
vendored
Normal file
@ -0,0 +1,231 @@
|
||||
/*! npm.im/object-fit-images 3.2.4 */
|
||||
'use strict';
|
||||
|
||||
var OFI = 'bfred-it:object-fit-images';
|
||||
var propRegex = /(object-fit|object-position)\s*:\s*([-.\w\s%]+)/g;
|
||||
var testImg = typeof Image === 'undefined' ? {style: {'object-position': 1}} : new Image();
|
||||
var supportsObjectFit = 'object-fit' in testImg.style;
|
||||
var supportsObjectPosition = 'object-position' in testImg.style;
|
||||
var supportsOFI = 'background-size' in testImg.style;
|
||||
var supportsCurrentSrc = typeof testImg.currentSrc === 'string';
|
||||
var nativeGetAttribute = testImg.getAttribute;
|
||||
var nativeSetAttribute = testImg.setAttribute;
|
||||
var autoModeEnabled = false;
|
||||
|
||||
function createPlaceholder(w, h) {
|
||||
return ("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='" + w + "' height='" + h + "'%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
function polyfillCurrentSrc(el) {
|
||||
if (el.srcset && !supportsCurrentSrc && window.picturefill) {
|
||||
var pf = window.picturefill._;
|
||||
// parse srcset with picturefill where currentSrc isn't available
|
||||
if (!el[pf.ns] || !el[pf.ns].evaled) {
|
||||
// force synchronous srcset parsing
|
||||
pf.fillImg(el, {reselect: true});
|
||||
}
|
||||
|
||||
if (!el[pf.ns].curSrc) {
|
||||
// force picturefill to parse srcset
|
||||
el[pf.ns].supported = false;
|
||||
pf.fillImg(el, {reselect: true});
|
||||
}
|
||||
|
||||
// retrieve parsed currentSrc, if any
|
||||
el.currentSrc = el[pf.ns].curSrc || el.src;
|
||||
}
|
||||
}
|
||||
|
||||
function getStyle(el) {
|
||||
var style = getComputedStyle(el).fontFamily;
|
||||
var parsed;
|
||||
var props = {};
|
||||
while ((parsed = propRegex.exec(style)) !== null) {
|
||||
props[parsed[1]] = parsed[2];
|
||||
}
|
||||
return props;
|
||||
}
|
||||
|
||||
function setPlaceholder(img, width, height) {
|
||||
// Default: fill width, no height
|
||||
var placeholder = createPlaceholder(width || 1, height || 0);
|
||||
|
||||
// Only set placeholder if it's different
|
||||
if (nativeGetAttribute.call(img, 'src') !== placeholder) {
|
||||
nativeSetAttribute.call(img, 'src', placeholder);
|
||||
}
|
||||
}
|
||||
|
||||
function onImageReady(img, callback) {
|
||||
// naturalWidth is only available when the image headers are loaded,
|
||||
// this loop will poll it every 100ms.
|
||||
if (img.naturalWidth) {
|
||||
callback(img);
|
||||
} else {
|
||||
setTimeout(onImageReady, 100, img, callback);
|
||||
}
|
||||
}
|
||||
|
||||
function fixOne(el) {
|
||||
var style = getStyle(el);
|
||||
var ofi = el[OFI];
|
||||
style['object-fit'] = style['object-fit'] || 'fill'; // default value
|
||||
|
||||
// Avoid running where unnecessary, unless OFI had already done its deed
|
||||
if (!ofi.img) {
|
||||
// fill is the default behavior so no action is necessary
|
||||
if (style['object-fit'] === 'fill') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Where object-fit is supported and object-position isn't (Safari < 10)
|
||||
if (
|
||||
!ofi.skipTest && // unless user wants to apply regardless of browser support
|
||||
supportsObjectFit && // if browser already supports object-fit
|
||||
!style['object-position'] // unless object-position is used
|
||||
) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// keep a clone in memory while resetting the original to a blank
|
||||
if (!ofi.img) {
|
||||
ofi.img = new Image(el.width, el.height);
|
||||
ofi.img.srcset = nativeGetAttribute.call(el, "data-ofi-srcset") || el.srcset;
|
||||
ofi.img.src = nativeGetAttribute.call(el, "data-ofi-src") || el.src;
|
||||
|
||||
// preserve for any future cloneNode calls
|
||||
// https://github.com/bfred-it/object-fit-images/issues/53
|
||||
nativeSetAttribute.call(el, "data-ofi-src", el.src);
|
||||
if (el.srcset) {
|
||||
nativeSetAttribute.call(el, "data-ofi-srcset", el.srcset);
|
||||
}
|
||||
|
||||
setPlaceholder(el, el.naturalWidth || el.width, el.naturalHeight || el.height);
|
||||
|
||||
// remove srcset because it overrides src
|
||||
if (el.srcset) {
|
||||
el.srcset = '';
|
||||
}
|
||||
try {
|
||||
keepSrcUsable(el);
|
||||
} catch (err) {
|
||||
if (window.console) {
|
||||
console.warn('https://bit.ly/ofi-old-browser');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
polyfillCurrentSrc(ofi.img);
|
||||
|
||||
el.style.backgroundImage = "url(\"" + ((ofi.img.currentSrc || ofi.img.src).replace(/"/g, '\\"')) + "\")";
|
||||
el.style.backgroundPosition = style['object-position'] || 'center';
|
||||
el.style.backgroundRepeat = 'no-repeat';
|
||||
el.style.backgroundOrigin = 'content-box';
|
||||
|
||||
if (/scale-down/.test(style['object-fit'])) {
|
||||
onImageReady(ofi.img, function () {
|
||||
if (ofi.img.naturalWidth > el.width || ofi.img.naturalHeight > el.height) {
|
||||
el.style.backgroundSize = 'contain';
|
||||
} else {
|
||||
el.style.backgroundSize = 'auto';
|
||||
}
|
||||
});
|
||||
} else {
|
||||
el.style.backgroundSize = style['object-fit'].replace('none', 'auto').replace('fill', '100% 100%');
|
||||
}
|
||||
|
||||
onImageReady(ofi.img, function (img) {
|
||||
setPlaceholder(el, img.naturalWidth, img.naturalHeight);
|
||||
});
|
||||
}
|
||||
|
||||
function keepSrcUsable(el) {
|
||||
var descriptors = {
|
||||
get: function get(prop) {
|
||||
return el[OFI].img[prop ? prop : 'src'];
|
||||
},
|
||||
set: function set(value, prop) {
|
||||
el[OFI].img[prop ? prop : 'src'] = value;
|
||||
nativeSetAttribute.call(el, ("data-ofi-" + prop), value); // preserve for any future cloneNode
|
||||
fixOne(el);
|
||||
return value;
|
||||
}
|
||||
};
|
||||
Object.defineProperty(el, 'src', descriptors);
|
||||
Object.defineProperty(el, 'currentSrc', {
|
||||
get: function () { return descriptors.get('currentSrc'); }
|
||||
});
|
||||
Object.defineProperty(el, 'srcset', {
|
||||
get: function () { return descriptors.get('srcset'); },
|
||||
set: function (ss) { return descriptors.set(ss, 'srcset'); }
|
||||
});
|
||||
}
|
||||
|
||||
function hijackAttributes() {
|
||||
function getOfiImageMaybe(el, name) {
|
||||
return el[OFI] && el[OFI].img && (name === 'src' || name === 'srcset') ? el[OFI].img : el;
|
||||
}
|
||||
if (!supportsObjectPosition) {
|
||||
HTMLImageElement.prototype.getAttribute = function (name) {
|
||||
return nativeGetAttribute.call(getOfiImageMaybe(this, name), name);
|
||||
};
|
||||
|
||||
HTMLImageElement.prototype.setAttribute = function (name, value) {
|
||||
return nativeSetAttribute.call(getOfiImageMaybe(this, name), name, String(value));
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function fix(imgs, opts) {
|
||||
var startAutoMode = !autoModeEnabled && !imgs;
|
||||
opts = opts || {};
|
||||
imgs = imgs || 'img';
|
||||
|
||||
if ((supportsObjectPosition && !opts.skipTest) || !supportsOFI) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// use imgs as a selector or just select all images
|
||||
if (imgs === 'img') {
|
||||
imgs = document.getElementsByTagName('img');
|
||||
} else if (typeof imgs === 'string') {
|
||||
imgs = document.querySelectorAll(imgs);
|
||||
} else if (!('length' in imgs)) {
|
||||
imgs = [imgs];
|
||||
}
|
||||
|
||||
// apply fix to all
|
||||
for (var i = 0; i < imgs.length; i++) {
|
||||
imgs[i][OFI] = imgs[i][OFI] || {
|
||||
skipTest: opts.skipTest
|
||||
};
|
||||
fixOne(imgs[i]);
|
||||
}
|
||||
|
||||
if (startAutoMode) {
|
||||
document.body.addEventListener('load', function (e) {
|
||||
if (e.target.tagName === 'IMG') {
|
||||
fix(e.target, {
|
||||
skipTest: opts.skipTest
|
||||
});
|
||||
}
|
||||
}, true);
|
||||
autoModeEnabled = true;
|
||||
imgs = 'img'; // reset to a generic selector for watchMQ
|
||||
}
|
||||
|
||||
// if requested, watch media queries for object-fit change
|
||||
if (opts.watchMQ) {
|
||||
window.addEventListener('resize', fix.bind(null, imgs, {
|
||||
skipTest: opts.skipTest
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
fix.supportsObjectFit = supportsObjectFit;
|
||||
fix.supportsObjectPosition = supportsObjectPosition;
|
||||
|
||||
hijackAttributes();
|
||||
|
||||
module.exports = fix;
|
||||
229
node_modules/object-fit-images/dist/ofi.es-modules.js
generated
vendored
Normal file
229
node_modules/object-fit-images/dist/ofi.es-modules.js
generated
vendored
Normal file
@ -0,0 +1,229 @@
|
||||
/*! npm.im/object-fit-images 3.2.4 */
|
||||
var OFI = 'bfred-it:object-fit-images';
|
||||
var propRegex = /(object-fit|object-position)\s*:\s*([-.\w\s%]+)/g;
|
||||
var testImg = typeof Image === 'undefined' ? {style: {'object-position': 1}} : new Image();
|
||||
var supportsObjectFit = 'object-fit' in testImg.style;
|
||||
var supportsObjectPosition = 'object-position' in testImg.style;
|
||||
var supportsOFI = 'background-size' in testImg.style;
|
||||
var supportsCurrentSrc = typeof testImg.currentSrc === 'string';
|
||||
var nativeGetAttribute = testImg.getAttribute;
|
||||
var nativeSetAttribute = testImg.setAttribute;
|
||||
var autoModeEnabled = false;
|
||||
|
||||
function createPlaceholder(w, h) {
|
||||
return ("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='" + w + "' height='" + h + "'%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
function polyfillCurrentSrc(el) {
|
||||
if (el.srcset && !supportsCurrentSrc && window.picturefill) {
|
||||
var pf = window.picturefill._;
|
||||
// parse srcset with picturefill where currentSrc isn't available
|
||||
if (!el[pf.ns] || !el[pf.ns].evaled) {
|
||||
// force synchronous srcset parsing
|
||||
pf.fillImg(el, {reselect: true});
|
||||
}
|
||||
|
||||
if (!el[pf.ns].curSrc) {
|
||||
// force picturefill to parse srcset
|
||||
el[pf.ns].supported = false;
|
||||
pf.fillImg(el, {reselect: true});
|
||||
}
|
||||
|
||||
// retrieve parsed currentSrc, if any
|
||||
el.currentSrc = el[pf.ns].curSrc || el.src;
|
||||
}
|
||||
}
|
||||
|
||||
function getStyle(el) {
|
||||
var style = getComputedStyle(el).fontFamily;
|
||||
var parsed;
|
||||
var props = {};
|
||||
while ((parsed = propRegex.exec(style)) !== null) {
|
||||
props[parsed[1]] = parsed[2];
|
||||
}
|
||||
return props;
|
||||
}
|
||||
|
||||
function setPlaceholder(img, width, height) {
|
||||
// Default: fill width, no height
|
||||
var placeholder = createPlaceholder(width || 1, height || 0);
|
||||
|
||||
// Only set placeholder if it's different
|
||||
if (nativeGetAttribute.call(img, 'src') !== placeholder) {
|
||||
nativeSetAttribute.call(img, 'src', placeholder);
|
||||
}
|
||||
}
|
||||
|
||||
function onImageReady(img, callback) {
|
||||
// naturalWidth is only available when the image headers are loaded,
|
||||
// this loop will poll it every 100ms.
|
||||
if (img.naturalWidth) {
|
||||
callback(img);
|
||||
} else {
|
||||
setTimeout(onImageReady, 100, img, callback);
|
||||
}
|
||||
}
|
||||
|
||||
function fixOne(el) {
|
||||
var style = getStyle(el);
|
||||
var ofi = el[OFI];
|
||||
style['object-fit'] = style['object-fit'] || 'fill'; // default value
|
||||
|
||||
// Avoid running where unnecessary, unless OFI had already done its deed
|
||||
if (!ofi.img) {
|
||||
// fill is the default behavior so no action is necessary
|
||||
if (style['object-fit'] === 'fill') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Where object-fit is supported and object-position isn't (Safari < 10)
|
||||
if (
|
||||
!ofi.skipTest && // unless user wants to apply regardless of browser support
|
||||
supportsObjectFit && // if browser already supports object-fit
|
||||
!style['object-position'] // unless object-position is used
|
||||
) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// keep a clone in memory while resetting the original to a blank
|
||||
if (!ofi.img) {
|
||||
ofi.img = new Image(el.width, el.height);
|
||||
ofi.img.srcset = nativeGetAttribute.call(el, "data-ofi-srcset") || el.srcset;
|
||||
ofi.img.src = nativeGetAttribute.call(el, "data-ofi-src") || el.src;
|
||||
|
||||
// preserve for any future cloneNode calls
|
||||
// https://github.com/bfred-it/object-fit-images/issues/53
|
||||
nativeSetAttribute.call(el, "data-ofi-src", el.src);
|
||||
if (el.srcset) {
|
||||
nativeSetAttribute.call(el, "data-ofi-srcset", el.srcset);
|
||||
}
|
||||
|
||||
setPlaceholder(el, el.naturalWidth || el.width, el.naturalHeight || el.height);
|
||||
|
||||
// remove srcset because it overrides src
|
||||
if (el.srcset) {
|
||||
el.srcset = '';
|
||||
}
|
||||
try {
|
||||
keepSrcUsable(el);
|
||||
} catch (err) {
|
||||
if (window.console) {
|
||||
console.warn('https://bit.ly/ofi-old-browser');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
polyfillCurrentSrc(ofi.img);
|
||||
|
||||
el.style.backgroundImage = "url(\"" + ((ofi.img.currentSrc || ofi.img.src).replace(/"/g, '\\"')) + "\")";
|
||||
el.style.backgroundPosition = style['object-position'] || 'center';
|
||||
el.style.backgroundRepeat = 'no-repeat';
|
||||
el.style.backgroundOrigin = 'content-box';
|
||||
|
||||
if (/scale-down/.test(style['object-fit'])) {
|
||||
onImageReady(ofi.img, function () {
|
||||
if (ofi.img.naturalWidth > el.width || ofi.img.naturalHeight > el.height) {
|
||||
el.style.backgroundSize = 'contain';
|
||||
} else {
|
||||
el.style.backgroundSize = 'auto';
|
||||
}
|
||||
});
|
||||
} else {
|
||||
el.style.backgroundSize = style['object-fit'].replace('none', 'auto').replace('fill', '100% 100%');
|
||||
}
|
||||
|
||||
onImageReady(ofi.img, function (img) {
|
||||
setPlaceholder(el, img.naturalWidth, img.naturalHeight);
|
||||
});
|
||||
}
|
||||
|
||||
function keepSrcUsable(el) {
|
||||
var descriptors = {
|
||||
get: function get(prop) {
|
||||
return el[OFI].img[prop ? prop : 'src'];
|
||||
},
|
||||
set: function set(value, prop) {
|
||||
el[OFI].img[prop ? prop : 'src'] = value;
|
||||
nativeSetAttribute.call(el, ("data-ofi-" + prop), value); // preserve for any future cloneNode
|
||||
fixOne(el);
|
||||
return value;
|
||||
}
|
||||
};
|
||||
Object.defineProperty(el, 'src', descriptors);
|
||||
Object.defineProperty(el, 'currentSrc', {
|
||||
get: function () { return descriptors.get('currentSrc'); }
|
||||
});
|
||||
Object.defineProperty(el, 'srcset', {
|
||||
get: function () { return descriptors.get('srcset'); },
|
||||
set: function (ss) { return descriptors.set(ss, 'srcset'); }
|
||||
});
|
||||
}
|
||||
|
||||
function hijackAttributes() {
|
||||
function getOfiImageMaybe(el, name) {
|
||||
return el[OFI] && el[OFI].img && (name === 'src' || name === 'srcset') ? el[OFI].img : el;
|
||||
}
|
||||
if (!supportsObjectPosition) {
|
||||
HTMLImageElement.prototype.getAttribute = function (name) {
|
||||
return nativeGetAttribute.call(getOfiImageMaybe(this, name), name);
|
||||
};
|
||||
|
||||
HTMLImageElement.prototype.setAttribute = function (name, value) {
|
||||
return nativeSetAttribute.call(getOfiImageMaybe(this, name), name, String(value));
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function fix(imgs, opts) {
|
||||
var startAutoMode = !autoModeEnabled && !imgs;
|
||||
opts = opts || {};
|
||||
imgs = imgs || 'img';
|
||||
|
||||
if ((supportsObjectPosition && !opts.skipTest) || !supportsOFI) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// use imgs as a selector or just select all images
|
||||
if (imgs === 'img') {
|
||||
imgs = document.getElementsByTagName('img');
|
||||
} else if (typeof imgs === 'string') {
|
||||
imgs = document.querySelectorAll(imgs);
|
||||
} else if (!('length' in imgs)) {
|
||||
imgs = [imgs];
|
||||
}
|
||||
|
||||
// apply fix to all
|
||||
for (var i = 0; i < imgs.length; i++) {
|
||||
imgs[i][OFI] = imgs[i][OFI] || {
|
||||
skipTest: opts.skipTest
|
||||
};
|
||||
fixOne(imgs[i]);
|
||||
}
|
||||
|
||||
if (startAutoMode) {
|
||||
document.body.addEventListener('load', function (e) {
|
||||
if (e.target.tagName === 'IMG') {
|
||||
fix(e.target, {
|
||||
skipTest: opts.skipTest
|
||||
});
|
||||
}
|
||||
}, true);
|
||||
autoModeEnabled = true;
|
||||
imgs = 'img'; // reset to a generic selector for watchMQ
|
||||
}
|
||||
|
||||
// if requested, watch media queries for object-fit change
|
||||
if (opts.watchMQ) {
|
||||
window.addEventListener('resize', fix.bind(null, imgs, {
|
||||
skipTest: opts.skipTest
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
fix.supportsObjectFit = supportsObjectFit;
|
||||
fix.supportsObjectPosition = supportsObjectPosition;
|
||||
|
||||
hijackAttributes();
|
||||
|
||||
export default fix;
|
||||
234
node_modules/object-fit-images/dist/ofi.js
generated
vendored
Normal file
234
node_modules/object-fit-images/dist/ofi.js
generated
vendored
Normal file
@ -0,0 +1,234 @@
|
||||
/*! npm.im/object-fit-images 3.2.4 */
|
||||
var objectFitImages = (function () {
|
||||
'use strict';
|
||||
|
||||
var OFI = 'bfred-it:object-fit-images';
|
||||
var propRegex = /(object-fit|object-position)\s*:\s*([-.\w\s%]+)/g;
|
||||
var testImg = typeof Image === 'undefined' ? {style: {'object-position': 1}} : new Image();
|
||||
var supportsObjectFit = 'object-fit' in testImg.style;
|
||||
var supportsObjectPosition = 'object-position' in testImg.style;
|
||||
var supportsOFI = 'background-size' in testImg.style;
|
||||
var supportsCurrentSrc = typeof testImg.currentSrc === 'string';
|
||||
var nativeGetAttribute = testImg.getAttribute;
|
||||
var nativeSetAttribute = testImg.setAttribute;
|
||||
var autoModeEnabled = false;
|
||||
|
||||
function createPlaceholder(w, h) {
|
||||
return ("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='" + w + "' height='" + h + "'%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
function polyfillCurrentSrc(el) {
|
||||
if (el.srcset && !supportsCurrentSrc && window.picturefill) {
|
||||
var pf = window.picturefill._;
|
||||
// parse srcset with picturefill where currentSrc isn't available
|
||||
if (!el[pf.ns] || !el[pf.ns].evaled) {
|
||||
// force synchronous srcset parsing
|
||||
pf.fillImg(el, {reselect: true});
|
||||
}
|
||||
|
||||
if (!el[pf.ns].curSrc) {
|
||||
// force picturefill to parse srcset
|
||||
el[pf.ns].supported = false;
|
||||
pf.fillImg(el, {reselect: true});
|
||||
}
|
||||
|
||||
// retrieve parsed currentSrc, if any
|
||||
el.currentSrc = el[pf.ns].curSrc || el.src;
|
||||
}
|
||||
}
|
||||
|
||||
function getStyle(el) {
|
||||
var style = getComputedStyle(el).fontFamily;
|
||||
var parsed;
|
||||
var props = {};
|
||||
while ((parsed = propRegex.exec(style)) !== null) {
|
||||
props[parsed[1]] = parsed[2];
|
||||
}
|
||||
return props;
|
||||
}
|
||||
|
||||
function setPlaceholder(img, width, height) {
|
||||
// Default: fill width, no height
|
||||
var placeholder = createPlaceholder(width || 1, height || 0);
|
||||
|
||||
// Only set placeholder if it's different
|
||||
if (nativeGetAttribute.call(img, 'src') !== placeholder) {
|
||||
nativeSetAttribute.call(img, 'src', placeholder);
|
||||
}
|
||||
}
|
||||
|
||||
function onImageReady(img, callback) {
|
||||
// naturalWidth is only available when the image headers are loaded,
|
||||
// this loop will poll it every 100ms.
|
||||
if (img.naturalWidth) {
|
||||
callback(img);
|
||||
} else {
|
||||
setTimeout(onImageReady, 100, img, callback);
|
||||
}
|
||||
}
|
||||
|
||||
function fixOne(el) {
|
||||
var style = getStyle(el);
|
||||
var ofi = el[OFI];
|
||||
style['object-fit'] = style['object-fit'] || 'fill'; // default value
|
||||
|
||||
// Avoid running where unnecessary, unless OFI had already done its deed
|
||||
if (!ofi.img) {
|
||||
// fill is the default behavior so no action is necessary
|
||||
if (style['object-fit'] === 'fill') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Where object-fit is supported and object-position isn't (Safari < 10)
|
||||
if (
|
||||
!ofi.skipTest && // unless user wants to apply regardless of browser support
|
||||
supportsObjectFit && // if browser already supports object-fit
|
||||
!style['object-position'] // unless object-position is used
|
||||
) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// keep a clone in memory while resetting the original to a blank
|
||||
if (!ofi.img) {
|
||||
ofi.img = new Image(el.width, el.height);
|
||||
ofi.img.srcset = nativeGetAttribute.call(el, "data-ofi-srcset") || el.srcset;
|
||||
ofi.img.src = nativeGetAttribute.call(el, "data-ofi-src") || el.src;
|
||||
|
||||
// preserve for any future cloneNode calls
|
||||
// https://github.com/bfred-it/object-fit-images/issues/53
|
||||
nativeSetAttribute.call(el, "data-ofi-src", el.src);
|
||||
if (el.srcset) {
|
||||
nativeSetAttribute.call(el, "data-ofi-srcset", el.srcset);
|
||||
}
|
||||
|
||||
setPlaceholder(el, el.naturalWidth || el.width, el.naturalHeight || el.height);
|
||||
|
||||
// remove srcset because it overrides src
|
||||
if (el.srcset) {
|
||||
el.srcset = '';
|
||||
}
|
||||
try {
|
||||
keepSrcUsable(el);
|
||||
} catch (err) {
|
||||
if (window.console) {
|
||||
console.warn('https://bit.ly/ofi-old-browser');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
polyfillCurrentSrc(ofi.img);
|
||||
|
||||
el.style.backgroundImage = "url(\"" + ((ofi.img.currentSrc || ofi.img.src).replace(/"/g, '\\"')) + "\")";
|
||||
el.style.backgroundPosition = style['object-position'] || 'center';
|
||||
el.style.backgroundRepeat = 'no-repeat';
|
||||
el.style.backgroundOrigin = 'content-box';
|
||||
|
||||
if (/scale-down/.test(style['object-fit'])) {
|
||||
onImageReady(ofi.img, function () {
|
||||
if (ofi.img.naturalWidth > el.width || ofi.img.naturalHeight > el.height) {
|
||||
el.style.backgroundSize = 'contain';
|
||||
} else {
|
||||
el.style.backgroundSize = 'auto';
|
||||
}
|
||||
});
|
||||
} else {
|
||||
el.style.backgroundSize = style['object-fit'].replace('none', 'auto').replace('fill', '100% 100%');
|
||||
}
|
||||
|
||||
onImageReady(ofi.img, function (img) {
|
||||
setPlaceholder(el, img.naturalWidth, img.naturalHeight);
|
||||
});
|
||||
}
|
||||
|
||||
function keepSrcUsable(el) {
|
||||
var descriptors = {
|
||||
get: function get(prop) {
|
||||
return el[OFI].img[prop ? prop : 'src'];
|
||||
},
|
||||
set: function set(value, prop) {
|
||||
el[OFI].img[prop ? prop : 'src'] = value;
|
||||
nativeSetAttribute.call(el, ("data-ofi-" + prop), value); // preserve for any future cloneNode
|
||||
fixOne(el);
|
||||
return value;
|
||||
}
|
||||
};
|
||||
Object.defineProperty(el, 'src', descriptors);
|
||||
Object.defineProperty(el, 'currentSrc', {
|
||||
get: function () { return descriptors.get('currentSrc'); }
|
||||
});
|
||||
Object.defineProperty(el, 'srcset', {
|
||||
get: function () { return descriptors.get('srcset'); },
|
||||
set: function (ss) { return descriptors.set(ss, 'srcset'); }
|
||||
});
|
||||
}
|
||||
|
||||
function hijackAttributes() {
|
||||
function getOfiImageMaybe(el, name) {
|
||||
return el[OFI] && el[OFI].img && (name === 'src' || name === 'srcset') ? el[OFI].img : el;
|
||||
}
|
||||
if (!supportsObjectPosition) {
|
||||
HTMLImageElement.prototype.getAttribute = function (name) {
|
||||
return nativeGetAttribute.call(getOfiImageMaybe(this, name), name);
|
||||
};
|
||||
|
||||
HTMLImageElement.prototype.setAttribute = function (name, value) {
|
||||
return nativeSetAttribute.call(getOfiImageMaybe(this, name), name, String(value));
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function fix(imgs, opts) {
|
||||
var startAutoMode = !autoModeEnabled && !imgs;
|
||||
opts = opts || {};
|
||||
imgs = imgs || 'img';
|
||||
|
||||
if ((supportsObjectPosition && !opts.skipTest) || !supportsOFI) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// use imgs as a selector or just select all images
|
||||
if (imgs === 'img') {
|
||||
imgs = document.getElementsByTagName('img');
|
||||
} else if (typeof imgs === 'string') {
|
||||
imgs = document.querySelectorAll(imgs);
|
||||
} else if (!('length' in imgs)) {
|
||||
imgs = [imgs];
|
||||
}
|
||||
|
||||
// apply fix to all
|
||||
for (var i = 0; i < imgs.length; i++) {
|
||||
imgs[i][OFI] = imgs[i][OFI] || {
|
||||
skipTest: opts.skipTest
|
||||
};
|
||||
fixOne(imgs[i]);
|
||||
}
|
||||
|
||||
if (startAutoMode) {
|
||||
document.body.addEventListener('load', function (e) {
|
||||
if (e.target.tagName === 'IMG') {
|
||||
fix(e.target, {
|
||||
skipTest: opts.skipTest
|
||||
});
|
||||
}
|
||||
}, true);
|
||||
autoModeEnabled = true;
|
||||
imgs = 'img'; // reset to a generic selector for watchMQ
|
||||
}
|
||||
|
||||
// if requested, watch media queries for object-fit change
|
||||
if (opts.watchMQ) {
|
||||
window.addEventListener('resize', fix.bind(null, imgs, {
|
||||
skipTest: opts.skipTest
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
fix.supportsObjectFit = supportsObjectFit;
|
||||
fix.supportsObjectPosition = supportsObjectPosition;
|
||||
|
||||
hijackAttributes();
|
||||
|
||||
return fix;
|
||||
|
||||
}());
|
||||
2
node_modules/object-fit-images/dist/ofi.min.js
generated
vendored
Normal file
2
node_modules/object-fit-images/dist/ofi.min.js
generated
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
/*! npm.im/object-fit-images 3.2.4 */
|
||||
var objectFitImages=function(){"use strict";function t(t,e){return"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='"+t+"' height='"+e+"'%3E%3C/svg%3E"}function e(t){if(t.srcset&&!p&&window.picturefill){var e=window.picturefill._;t[e.ns]&&t[e.ns].evaled||e.fillImg(t,{reselect:!0}),t[e.ns].curSrc||(t[e.ns].supported=!1,e.fillImg(t,{reselect:!0})),t.currentSrc=t[e.ns].curSrc||t.src}}function i(t){for(var e,i=getComputedStyle(t).fontFamily,r={};null!==(e=u.exec(i));)r[e[1]]=e[2];return r}function r(e,i,r){var n=t(i||1,r||0);b.call(e,"src")!==n&&h.call(e,"src",n)}function n(t,e){t.naturalWidth?e(t):setTimeout(n,100,t,e)}function c(t){var c=i(t),o=t[l];if(c["object-fit"]=c["object-fit"]||"fill",!o.img){if("fill"===c["object-fit"])return;if(!o.skipTest&&f&&!c["object-position"])return}if(!o.img){o.img=new Image(t.width,t.height),o.img.srcset=b.call(t,"data-ofi-srcset")||t.srcset,o.img.src=b.call(t,"data-ofi-src")||t.src,h.call(t,"data-ofi-src",t.src),t.srcset&&h.call(t,"data-ofi-srcset",t.srcset),r(t,t.naturalWidth||t.width,t.naturalHeight||t.height),t.srcset&&(t.srcset="");try{s(t)}catch(t){window.console&&console.warn("https://bit.ly/ofi-old-browser")}}e(o.img),t.style.backgroundImage='url("'+(o.img.currentSrc||o.img.src).replace(/"/g,'\\"')+'")',t.style.backgroundPosition=c["object-position"]||"center",t.style.backgroundRepeat="no-repeat",t.style.backgroundOrigin="content-box",/scale-down/.test(c["object-fit"])?n(o.img,function(){o.img.naturalWidth>t.width||o.img.naturalHeight>t.height?t.style.backgroundSize="contain":t.style.backgroundSize="auto"}):t.style.backgroundSize=c["object-fit"].replace("none","auto").replace("fill","100% 100%"),n(o.img,function(e){r(t,e.naturalWidth,e.naturalHeight)})}function s(t){var e={get:function(e){return t[l].img[e?e:"src"]},set:function(e,i){return t[l].img[i?i:"src"]=e,h.call(t,"data-ofi-"+i,e),c(t),e}};Object.defineProperty(t,"src",e),Object.defineProperty(t,"currentSrc",{get:function(){return e.get("currentSrc")}}),Object.defineProperty(t,"srcset",{get:function(){return e.get("srcset")},set:function(t){return e.set(t,"srcset")}})}function o(){function t(t,e){return t[l]&&t[l].img&&("src"===e||"srcset"===e)?t[l].img:t}d||(HTMLImageElement.prototype.getAttribute=function(e){return b.call(t(this,e),e)},HTMLImageElement.prototype.setAttribute=function(e,i){return h.call(t(this,e),e,String(i))})}function a(t,e){var i=!y&&!t;if(e=e||{},t=t||"img",d&&!e.skipTest||!m)return!1;"img"===t?t=document.getElementsByTagName("img"):"string"==typeof t?t=document.querySelectorAll(t):"length"in t||(t=[t]);for(var r=0;r<t.length;r++)t[r][l]=t[r][l]||{skipTest:e.skipTest},c(t[r]);i&&(document.body.addEventListener("load",function(t){"IMG"===t.target.tagName&&a(t.target,{skipTest:e.skipTest})},!0),y=!0,t="img"),e.watchMQ&&window.addEventListener("resize",a.bind(null,t,{skipTest:e.skipTest}))}var l="bfred-it:object-fit-images",u=/(object-fit|object-position)\s*:\s*([-.\w\s%]+)/g,g="undefined"==typeof Image?{style:{"object-position":1}}:new Image,f="object-fit"in g.style,d="object-position"in g.style,m="background-size"in g.style,p="string"==typeof g.currentSrc,b=g.getAttribute,h=g.setAttribute,y=!1;return a.supportsObjectFit=f,a.supportsObjectPosition=d,o(),a}();
|
||||
21
node_modules/object-fit-images/license
generated
vendored
Normal file
21
node_modules/object-fit-images/license
generated
vendored
Normal file
@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) Federico Brigante <bfred-it@users.noreply.github.com> (twitter.com/bfred_it)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
94
node_modules/object-fit-images/package.json
generated
vendored
Normal file
94
node_modules/object-fit-images/package.json
generated
vendored
Normal file
@ -0,0 +1,94 @@
|
||||
{
|
||||
"_from": "object-fit-images@^3.2.4",
|
||||
"_id": "object-fit-images@3.2.4",
|
||||
"_inBundle": false,
|
||||
"_integrity": "sha512-G+7LzpYfTfqUyrZlfrou/PLLLAPNC52FTy5y1CBywX+1/FkxIloOyQXBmZ3Zxa2AWO+lMF0JTuvqbr7G5e5CWg==",
|
||||
"_location": "/object-fit-images",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"type": "range",
|
||||
"registry": true,
|
||||
"raw": "object-fit-images@^3.2.4",
|
||||
"name": "object-fit-images",
|
||||
"escapedName": "object-fit-images",
|
||||
"rawSpec": "^3.2.4",
|
||||
"saveSpec": null,
|
||||
"fetchSpec": "^3.2.4"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"/gatsby-image"
|
||||
],
|
||||
"_resolved": "https://registry.npmjs.org/object-fit-images/-/object-fit-images-3.2.4.tgz",
|
||||
"_shasum": "6c299d38fdf207746e5d2d46c2877f6f25d15b52",
|
||||
"_spec": "object-fit-images@^3.2.4",
|
||||
"_where": "/Users/stefanfejes/Projects/30-seconds-of-python-code/node_modules/gatsby-image",
|
||||
"author": {
|
||||
"name": "Federico Brigante",
|
||||
"email": "bfred-it@users.noreply.github.com",
|
||||
"url": "twitter.com/bfred_it"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/bfred-it/object-fit-images/issues"
|
||||
},
|
||||
"bundleDependencies": false,
|
||||
"dependencies": {},
|
||||
"deprecated": false,
|
||||
"description": "Polyfill object-fit and object-position on images on IE9, IE10, IE11, Edge, Safari, ...",
|
||||
"devDependencies": {
|
||||
"bfred-npm-bundler": "^8.0.3",
|
||||
"browser-sync": "^2.17.5",
|
||||
"npm-run-all": "^4.0.0",
|
||||
"onchange": "^3.0.2",
|
||||
"xo": "^0.17.0"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"preprocessors"
|
||||
],
|
||||
"homepage": "https://github.com/bfred-it/object-fit-images#readme",
|
||||
"keywords": [
|
||||
"polyfill",
|
||||
"object-fit",
|
||||
"covers",
|
||||
"contains",
|
||||
"css",
|
||||
"styles",
|
||||
"internet",
|
||||
"explorer",
|
||||
"ies",
|
||||
"shim",
|
||||
"shiv",
|
||||
"fills",
|
||||
"images",
|
||||
"srcset",
|
||||
"backgrounds"
|
||||
],
|
||||
"license": "MIT",
|
||||
"main": "dist/ofi.common-js.js",
|
||||
"name": "object-fit-images",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/bfred-it/object-fit-images.git"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "npm-run-all --silent jsfix build:*",
|
||||
"build:js": "bfred-npm-bundler ofi objectFitImages",
|
||||
"jsfix": "xo --fix",
|
||||
"prepublish": "npm run build",
|
||||
"test": "npm run build",
|
||||
"version": "npm run build; git add dist",
|
||||
"watch": "npm-run-all --parallel --silent watch:*",
|
||||
"watch:build": "onchange 'index.js' --initial -- npm run build -- --continue-on-error",
|
||||
"watch:server": "browser-sync start --startPath demo --no-ghost-mode --reload-delay 300 --no-open --server --files 'dist/*.min.js,demo/**'"
|
||||
},
|
||||
"version": "3.2.4",
|
||||
"xo": {
|
||||
"esnext": true,
|
||||
"env": [
|
||||
"browser"
|
||||
],
|
||||
"rules": {
|
||||
"prefer-template": 0
|
||||
}
|
||||
}
|
||||
}
|
||||
20
node_modules/object-fit-images/preprocessors/mixin.less
generated
vendored
Normal file
20
node_modules/object-fit-images/preprocessors/mixin.less
generated
vendored
Normal file
@ -0,0 +1,20 @@
|
||||
/*
|
||||
This mixin can be used to set the object-fit:
|
||||
.object-fit(contain);
|
||||
|
||||
or object-fit and object-position:
|
||||
.object-fit(cover, top);
|
||||
*/
|
||||
.object-fit(@fit: fill, @position) {
|
||||
-o-object-fit: @fit;
|
||||
object-fit: @fit;
|
||||
-o-object-position: @position;
|
||||
object-position: @position;
|
||||
font-family: 'object-fit: @{fit}; object-position: @{position}';
|
||||
}
|
||||
|
||||
.object-fit(@fit: fill){
|
||||
-o-object-fit: @fit;
|
||||
object-fit: @fit;
|
||||
font-family: 'object-fit: @{fit}';
|
||||
}
|
||||
3
node_modules/object-fit-images/preprocessors/mixin.postcss
generated
vendored
Normal file
3
node_modules/object-fit-images/preprocessors/mixin.postcss
generated
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
/*
|
||||
Use this postcss plugin: https://github.com/ronik-design/postcss-object-fit-images
|
||||
*/
|
||||
16
node_modules/object-fit-images/preprocessors/mixin.sass
generated
vendored
Normal file
16
node_modules/object-fit-images/preprocessors/mixin.sass
generated
vendored
Normal file
@ -0,0 +1,16 @@
|
||||
//
|
||||
This mixin can be used to set the object-fit:
|
||||
+object-fit(contain)
|
||||
|
||||
or object-fit and object-position:
|
||||
+object-fit(cover, top)
|
||||
|
||||
=object-fit($fit: fill, $position: null)
|
||||
-o-object-fit: $fit
|
||||
object-fit: $fit
|
||||
@if $position
|
||||
-o-object-position: $position
|
||||
object-position: $position
|
||||
font-family: 'object-fit: #{$fit}; object-position: #{$position}'
|
||||
@else
|
||||
font-family: 'object-fit: #{$fit}'
|
||||
18
node_modules/object-fit-images/preprocessors/mixin.scss
generated
vendored
Normal file
18
node_modules/object-fit-images/preprocessors/mixin.scss
generated
vendored
Normal file
@ -0,0 +1,18 @@
|
||||
/*
|
||||
This mixin can be used to set the object-fit:
|
||||
@include object-fit(contain);
|
||||
|
||||
or object-fit and object-position:
|
||||
@include object-fit(cover, top);
|
||||
*/
|
||||
@mixin object-fit($fit: fill, $position: null){
|
||||
-o-object-fit: $fit;
|
||||
object-fit: $fit;
|
||||
@if $position {
|
||||
-o-object-position: $position;
|
||||
object-position: $position;
|
||||
font-family: 'object-fit: #{$fit}; object-position: #{$position}';
|
||||
} @else {
|
||||
font-family: 'object-fit: #{$fit}';
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user