mirror of
https://github.com/dillonzq/LoveIt.git
synced 2024-11-12 18:06:17 +01:00
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:
parent
3096ff6235
commit
3040ffa107
27 changed files with 65 additions and 31 deletions
|
@ -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)
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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};';
|
||||
}
|
||||
|
|
|
@ -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] & {
|
||||
|
|
|
@ -23,7 +23,7 @@
|
|||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
object-fit: cover;
|
||||
@include object-fit(cover);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
@ -234,7 +234,7 @@
|
|||
}
|
||||
|
||||
.lazyloading {
|
||||
object-fit: none;
|
||||
@include object-fit(none);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
|
|
2
assets/js/theme.min.js
vendored
2
assets/js/theme.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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/
|
||||
|
|
2
assets/lib/object-fit-images/ofi.min.js
vendored
Normal file
2
assets/lib/object-fit-images/ofi.min.js
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}();
|
6
assets/lib/typeit/typeit.min.js
vendored
6
assets/lib/typeit/typeit.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -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>
|
||||
|
|
|
@ -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 = ""
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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 = ""
|
||||
|
|
|
@ -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 = ""
|
||||
|
|
|
@ -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 |
|
@ -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" -}}
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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() {
|
||||
|
|
Loading…
Reference in a new issue