feat: improve browser compatibility for TypeIt and object-fit (#293)

* object-fit polyfill
* TypeIt 7.0.3 -> 6.5.1
This commit is contained in:
Dillon 2020-04-30 23:21:52 +08:00 committed by GitHub
parent 3096ff6235
commit 3040ffa107
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
27 changed files with 65 additions and 31 deletions

View file

@ -156,6 +156,7 @@ Thanks to the authors of following resources included in the theme:
* [Lunr.js](https://lunrjs.com/)
* [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
* [lazysizes](https://github.com/aFarkas/lazysizes)
* [object-fit-images](https://github.com/fregante/object-fit-images)
* [Twemoji](https://github.com/twitter/twemoji)
* [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
* [clipboard.js](https://github.com/zenorocha/clipboard.js)

View file

@ -151,6 +151,7 @@ LoveIt 主题中用到了以下项目,感谢它们的作者:
* [Lunr.js](https://lunrjs.com/)
* [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
* [lazysizes](https://github.com/aFarkas/lazysizes)
* [object-fit-images](https://github.com/fregante/object-fit-images)
* [Twemoji](https://github.com/twitter/twemoji)
* [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
* [clipboard.js](https://github.com/zenorocha/clipboard.js)

View file

@ -41,13 +41,14 @@ body {
}
}
@import "../_partial/mask";
@include ms;
@include link(true, true);
@import "../_partial/mask";
@import "../_partial/icon";
@import "../_partial/details";
@import "../_partial/fixed-button";
a {
text-decoration: none;
img {
@include object-fit(contain);
}

View file

@ -96,3 +96,15 @@
-ms-line-break: $value;
line-break: $value;
}
@mixin ms {
input::-ms-clear {
display: none;
}
}
@mixin object-fit($value) {
-o-object-fit: $value;
object-fit: $value;
font-family: 'object-fit: #{$value};';
}

View file

@ -1,5 +1,7 @@
@mixin link($light, $dark) {
a, a::before, a::after {
text-decoration: none;
color: if($light, $global-link-color, $single-link-color);
[theme=dark] & {

View file

@ -23,7 +23,7 @@
height: 100%;
left: 0;
top: 0;
object-fit: cover;
@include object-fit(cover);
}
&:hover {

View file

@ -234,7 +234,7 @@
}
.lazyloading {
object-fit: none;
@include object-fit(none);
}
blockquote {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -7,13 +7,14 @@ autocomplete.js@0.37.1 https://github.com/algolia/autocomplete.js
lunr.js@2.3.8 https://lunrjs.com/
algoliasearch@4.2.0 https://github.com/algolia/algoliasearch-client-javascript
lazysizes@5.2.0 https://github.com/aFarkas/lazysizes
object-fit-images@3.2.4 https://github.com/fregante/object-fit-images
twemoji@12.1.5 https://github.com/twitter/twemoji
lightgallery.js@1.1.3 https://github.com/sachinchoolur/lightgallery.js
lg-thumbnail.js@1.1.0 https://github.com/sachinchoolur/lg-thumbnail.js
lg-zoom.js@1.0.1 https://github.com/sachinchoolur/lg-zoom.js
clipboard.js@2.0.6 https://github.com/zenorocha/clipboard.js
sharer.js@0.4.0 https://github.com/ellisonleao/sharer.js
typeit@7.0.3 https://github.com/alexmacarthur/typeit
typeit@6.5.1 https://github.com/alexmacarthur/typeit
katex@0.11.1 https://katex.org/
mermaid@8.5.0 https://github.com/knsv/mermaid
echarts@4.7.0 https://echarts.apache.org/

View 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}();

File diff suppressed because one or more lines are too long

View file

@ -1,18 +1,19 @@
{{- /* https://img.shields.io/badge/$label-$version-$color?style=flat-square&labelColor=403c3d */ -}}
{{- $labelLength := strings.RuneCount .label | mul 64 | add 100 -}}
{{- $versionLength := strings.RuneCount .version | mul 60 -}}
<svg xmlns="http://www.w3.org/2000/svg" width="{{ add $labelLength $versionLength | add 200 | mul 0.1 }}" height="20">
{{- $width := add $labelLength $versionLength | add 200 -}}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {{ $width }} 200">
<g shape-rendering="crispEdges">
{{- $x1 := add $labelLength 100 | mul 0.1 -}}
{{- $x2 := add $versionLength 100 | mul 0.1 -}}
<path fill="#403c3d" d="M0 0h{{ $x1 }}v20H0z"/>
<path fill="#{{ .color }}" d="M{{ $x1 }} 0h{{ $x2 }}v20H{{ $x1 }}z"/>
{{- $x1 := add $labelLength 100 -}}
{{- $x2 := add $versionLength 100 -}}
<path fill="#403c3d" d="M0 0h{{ $x1 }}v200H0z"/>
<path fill="#{{ .color }}" d="M{{ $x1 }} 0h{{ $x2 }}v200H{{ $x1 }}z"/>
</g>
<g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110">
<text x="{{ div $labelLength 2 | add 60 }}" y="140" textLength="{{ $labelLength }}" transform="scale(.1)">
<text x="{{ div $labelLength 2 | add 60 }}" y="140" textLength="{{ $labelLength }}">
{{- .label -}}
</text>
<text x="{{ div $versionLength 2 | add $labelLength | add 140 }}" y="140" textLength="{{ $versionLength }}" transform="scale(.1)">
<text x="{{ div $versionLength 2 | add $labelLength | add 140 }}" y="140" textLength="{{ $versionLength }}">
{{- .version -}}
</text>
</g>

View file

@ -947,6 +947,8 @@ enableEmoji = true
algoliasearchJS = ""
# lazysizes@5.2.0 https://github.com/aFarkas/lazysizes
lazysizesJS = ""
# object-fit-images@3.2.4 https://github.com/fregante/object-fit-images
objectFitImagesJS = ""
# twemoji@12.1.5 https://github.com/twitter/twemoji
twemojiJS = ""
# lightgallery.js@1.1.3 https://github.com/sachinchoolur/lightgallery.js
@ -960,7 +962,7 @@ enableEmoji = true
clipboardJS = ""
# sharer.js@0.4.0 https://github.com/ellisonleao/sharer.js
sharerJS = ""
# typeit@7.0.3 https://github.com/alexmacarthur/typeit
# typeit@6.5.1 https://github.com/alexmacarthur/typeit
typeitJS = ""
# katex@0.11.1 https://katex.org/
katexCSS = ""

View file

@ -97,6 +97,7 @@ Thanks to the authors of following resources included in the theme:
* [Lunr.js](https://lunrjs.com/)
* [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
* [lazysizes](https://github.com/aFarkas/lazysizes)
* [object-fit-images](https://github.com/fregante/object-fit-images)
* [Twemoji](https://github.com/twitter/twemoji)
* [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
* [clipboard.js](https://github.com/zenorocha/clipboard.js)

View file

@ -102,6 +102,7 @@ Thanks to the authors of following resources included in the theme:
* [Lunr.js](https://lunrjs.com/)
* [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
* [lazysizes](https://github.com/aFarkas/lazysizes)
* [object-fit-images](https://github.com/fregante/object-fit-images)
* [Twemoji](https://github.com/twitter/twemoji)
* [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
* [clipboard.js](https://github.com/zenorocha/clipboard.js)

View file

@ -97,6 +97,7 @@ LoveIt 主题中用到了以下项目,感谢它们的作者:
* [Lunr.js](https://lunrjs.com/)
* [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
* [lazysizes](https://github.com/aFarkas/lazysizes)
* [object-fit-images](https://github.com/fregante/object-fit-images)
* [Twemoji](https://github.com/twitter/twemoji)
* [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
* [clipboard.js](https://github.com/zenorocha/clipboard.js)

View file

@ -587,6 +587,8 @@ Please open the code block below to view the complete sample configuration :(far
algoliasearchJS = ""
# {{< link "https://github.com/aFarkas/lazysizes" "lazysizes" >}}@5.2.0
lazysizesJS = ""
# {{< version 0.2.3 >}} {{< link "https://github.com/fregante/object-fit-images" "object-fit-images" >}}@3.2.4
objectFitImagesJS = ""
# {{< version 0.2.0 >}} {{< link "https://github.com/twitter/twemoji" "twemoji" >}}@12.1.5
twemojiJS = ""
# {{< link "https://github.com/sachinchoolur/lightgallery.js" "lightgallery.js" >}}@1.1.3
@ -600,7 +602,7 @@ Please open the code block below to view the complete sample configuration :(far
clipboardJS = ""
# {{< link "https://github.com/ellisonleao/sharer.js" "sharer.js" >}}@0.4.0
sharerJS = ""
# {{< link "https://github.com/alexmacarthur/typeit" "typeit" >}}@7.0.3
# {{< link "https://github.com/alexmacarthur/typeit" "typeit" >}}@6.5.1
typeitJS = ""
# {{< link "https://github.com/KaTeX/KaTeX" "katex" >}}@0.11.1
katexCSS = ""

View file

@ -592,6 +592,8 @@ Please open the code block below to view the complete sample configuration :(far
algoliasearchJS = ""
# {{< link "https://github.com/aFarkas/lazysizes" "lazysizes" >}}@5.2.0
lazysizesJS = ""
# {{< version 0.2.3 >}} {{< link "https://github.com/fregante/object-fit-images" "object-fit-images" >}}@3.2.4
objectFitImagesJS = ""
# {{< version 0.2.0 >}} {{< link "https://github.com/twitter/twemoji" "twemoji" >}}@12.1.5
twemojiJS = ""
# {{< link "https://github.com/sachinchoolur/lightgallery.js" "lightgallery.js" >}}@1.1.3
@ -605,7 +607,7 @@ Please open the code block below to view the complete sample configuration :(far
clipboardJS = ""
# {{< link "https://github.com/ellisonleao/sharer.js" "sharer.js" >}}@0.4.0
sharerJS = ""
# {{< link "https://github.com/alexmacarthur/typeit" "typeit" >}}@7.0.3
# {{< link "https://github.com/alexmacarthur/typeit" "typeit" >}}@6.5.1
typeitJS = ""
# {{< link "https://github.com/KaTeX/KaTeX" "katex" >}}@0.11.1
katexCSS = ""

View file

@ -590,6 +590,8 @@ hugo
algoliasearchJS = ""
# {{< link "https://github.com/aFarkas/lazysizes" "lazysizes" >}}@5.2.0
lazysizesJS = ""
# {{< version 0.2.3 >}} {{< link "https://github.com/fregante/object-fit-images" "object-fit-images" >}}@3.2.4
objectFitImagesJS = ""
# {{< version 0.2.0 >}} {{< link "https://github.com/twitter/twemoji" "twemoji" >}}@12.1.5
twemojiJS = ""
# {{< link "https://github.com/sachinchoolur/lightgallery.js" "lightgallery.js" >}}@1.1.3
@ -603,7 +605,7 @@ hugo
clipboardJS = ""
# {{< link "https://github.com/ellisonleao/sharer.js" "sharer.js" >}}@0.4.0
sharerJS = ""
# {{< link "https://github.com/alexmacarthur/typeit" "typeit" >}}@7.0.3
# {{< link "https://github.com/alexmacarthur/typeit" "typeit" >}}@6.5.1
typeitJS = ""
# {{< link "https://github.com/KaTeX/KaTeX" "katex" >}}@0.11.1
katexCSS = ""

Binary file not shown.

Before

Width:  |  Height:  |  Size: 442 KiB

After

Width:  |  Height:  |  Size: 222 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 442 KiB

After

Width:  |  Height:  |  Size: 222 KiB

View file

@ -38,6 +38,10 @@
{{- $source := $cdn.lazysizesJS | default "lib/lazysizes/lazysizes.min.js" -}}
{{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" $.Scratch "data" | partial "scratch/script.html" -}}
{{- /* object-fit-images */ -}}
{{- $source := $cdn.objectFitImagesJS | default "lib/object-fit-images/ofi.min.js" -}}
{{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" $.Scratch "data" | partial "scratch/script.html" -}}
{{- /* twemoji */ -}}
{{- if $params.twemoji -}}
{{- $source := $cdn.twemojiJS | default "lib/twemoji/twemoji.min.js" -}}

View file

@ -40,6 +40,7 @@ class Theme {
this.resizeEventSet = new Set();
this.switchThemeEventSet = new Set();
this.clickMaskEventSet = new Set();
if (objectFitImages) objectFitImages();
}
initSVGIcon() {
@ -56,7 +57,7 @@ class Theme {
if ($titleElements.length) $svg.removeChild($titleElements[0]);
$icon.parentElement.replaceChild($svg, $icon);
})
.catch(console.error.bind(console));
.catch(err => { console.error(err); });
});
}
@ -586,12 +587,7 @@ class Theme {
}
initSmoothScroll() {
if ((!this.util.isMobile() && this.config.headerMode.desktop === 'normal')
|| (this.util.isMobile() && this.config.headerMode.mobile === 'normal')) {
new SmoothScroll('[href^="#"]', {speed: 300, speedAsDuration: true});
} else {
new SmoothScroll('[href^="#"]', {speed: 300, speedAsDuration: true, header: '#header-desktop'});
}
if (SmoothScroll) new SmoothScroll('[href^="#"]', { speed: 300, speedAsDuration: true, header: '#header-desktop' });
}
onScroll() {