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

* object-fit polyfill * TypeIt 7.0.3 -> 6.5.1
dillonzq · Apr 30, 2020 · 3040ffa · 3040ffa
1 parent 3096ff6
commit 3040ffa
Show file tree

Hide file tree

Showing 27 changed files with 65 additions and 31 deletions.
diff --git a/README.md b/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)

diff --git a/README.zh-cn.md b/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)

diff --git a/assets/css/_core/_base.scss b/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 {
-  text-decoration: none;
+img {
+  @include object-fit(contain);
 }
diff --git a/assets/css/_mixin/_compatibility.scss b/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};';
+}
diff --git a/assets/css/_mixin/_link.scss b/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] & {

diff --git a/assets/css/_mixin/_summary.scss b/assets/css/_mixin/_summary.scss
@@ -23,7 +23,7 @@
         height: 100%;
         left: 0;
         top: 0;
-        object-fit: cover;
+        @include object-fit(cover);
       }
 
       &:hover {

diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss
@@ -234,7 +234,7 @@
     }
 
     .lazyloading {
-      object-fit: none;
+      @include object-fit(none);
     }
 
     blockquote {

diff --git a/assets/js/theme.min.js b/assets/js/theme.min.js
diff --git a/assets/js/theme.min.js.map b/assets/js/theme.min.js.map
diff --git a/assets/lib/VERSION b/assets/lib/VERSION
@@ -7,13 +7,14 @@ [email protected] https://github.com/algolia/autocomplete.js
 [email protected] https://lunrjs.com/
 [email protected] https://github.com/algolia/algoliasearch-client-javascript
 [email protected] https://github.com/aFarkas/lazysizes
+[email protected] https://github.com/fregante/object-fit-images
 [email protected] https://github.com/twitter/twemoji
 [email protected] https://github.com/sachinchoolur/lightgallery.js
 [email protected] https://github.com/sachinchoolur/lg-thumbnail.js
 [email protected] https://github.com/sachinchoolur/lg-zoom.js
 [email protected] https://github.com/zenorocha/clipboard.js
 [email protected] https://github.com/ellisonleao/sharer.js
-typeit@7.0.3 https://github.com/alexmacarthur/typeit
+typeit@6.5.1 https://github.com/alexmacarthur/typeit
 [email protected] https://katex.org/
 [email protected] https://github.com/knsv/mermaid
 [email protected] https://echarts.apache.org/

diff --git a/assets/lib/object-fit-images/ofi.min.js b/assets/lib/object-fit-images/ofi.min.js
diff --git a/assets/lib/typeit/typeit.min.js b/assets/lib/typeit/typeit.min.js
diff --git a/assets/svg/version.template.svg b/assets/svg/version.template.svg
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -947,6 +947,8 @@ enableEmoji = true
     algoliasearchJS = ""
     # [email protected] https://github.com/aFarkas/lazysizes
     lazysizesJS = ""
+    # [email protected] https://github.com/fregante/object-fit-images
+    objectFitImagesJS = ""
     # [email protected] https://github.com/twitter/twemoji
     twemojiJS = ""
     # [email protected] https://github.com/sachinchoolur/lightgallery.js
@@ -960,7 +962,7 @@ enableEmoji = true
     clipboardJS = ""
     # [email protected] 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 = ""
     # [email protected] https://katex.org/
     katexCSS = ""

diff --git a/exampleSite/content/about.en.md b/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)

diff --git a/exampleSite/content/about.fr.md b/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)

diff --git a/exampleSite/content/about.zh-cn.md b/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)

diff --git a/exampleSite/content/posts/theme-documentation-basics.en.md b/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 = ""

diff --git a/exampleSite/content/posts/theme-documentation-basics.fr.md b/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 = ""

diff --git a/exampleSite/content/posts/theme-documentation-basics.zh-cn.md b/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 = ""

diff --git a/exampleSite/static/images/Apple-Devices-Preview.png b/exampleSite/static/images/Apple-Devices-Preview.png
diff --git a/images/Apple-Devices-Preview.png b/images/Apple-Devices-Preview.png
diff --git a/layouts/partials/assets.html b/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" -}}

diff --git a/resources/_gen/assets/scss/css/style.template.scss_788c4a23da05f3aa3e03b28055a2e5f9.content b/resources/_gen/assets/scss/css/style.template.scss_788c4a23da05f3aa3e03b28055a2e5f9.content
diff --git a/resources/_gen/assets/scss/css/style.template.scss_84a735b886b24531b6e80c5fb2060510.content b/resources/_gen/assets/scss/css/style.template.scss_84a735b886b24531b6e80c5fb2060510.content
diff --git a/resources/_gen/assets/scss/css/style.template.scss_d40178ffcb058d725849178b0a7a43cc.content b/resources/_gen/assets/scss/css/style.template.scss_d40178ffcb058d725849178b0a7a43cc.content
diff --git a/src/js/theme.js b/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')
-          || (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() {