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

* object-fit polyfill
* TypeIt 7.0.3 -> 6.5.1

README.md

@@ -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)

README.zh-cn.md

@@ -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)

assets/css/_core/_base.scss

@@ -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 {
+img {
-  text-decoration: none;
+  @include object-fit(contain);
 }

assets/css/_mixin/_compatibility.scss

@@ -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};';
+}

assets/css/_mixin/_link.scss

@@ -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] & {

assets/css/_mixin/_summary.scss

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

assets/css/_page/_single.scss

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

assets/lib/VERSION

@@ -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/

assets/lib/object-fit-images/ofi.min.js

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

assets/svg/version.template.svg

@@ -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 -}}
+        {{- $x1 := add $labelLength 100 -}}
-        {{- $x2 := add $versionLength 100 | mul 0.1 -}}
+        {{- $x2 := add $versionLength 100 -}}
-        <path fill="#403c3d" d="M0 0h{{ $x1 }}v20H0z"/>
+        <path fill="#403c3d" d="M0 0h{{ $x1 }}v200H0z"/>
-        <path fill="#{{ .color }}" d="M{{ $x1 }} 0h{{ $x2 }}v20H{{ $x1 }}z"/>
+        <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>

exampleSite/config.toml

@@ -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 = ""

exampleSite/content/about.en.md

@@ -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)

exampleSite/content/about.fr.md

@@ -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)

exampleSite/content/about.zh-cn.md

@@ -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)

exampleSite/content/posts/theme-documentation-basics.en.md

@@ -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 = ""

exampleSite/content/posts/theme-documentation-basics.fr.md

@@ -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 = ""

exampleSite/content/posts/theme-documentation-basics.zh-cn.md

@@ -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 = ""

layouts/partials/assets.html

@@ -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" -}}

src/js/theme.js

@@ -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')
+        if (SmoothScroll) new SmoothScroll('[href^="#"]', { speed: 300, speedAsDuration: true, header: '#header-desktop' });
-          || (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'});
-        }
     }
 
     onScroll() {