mirror of
https://github.com/Xevion/calligraphy.git
synced 2025-12-06 05:14:40 -06:00
new FontItem component for displaying and loading WebFonts (WebFontLoader implementation)
This commit is contained in:
Xevion
@@ -1 +0,0 @@
|
|||||||
#font-dialog .md-content>div{margin:0 1em}#font-dialog #spinner-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#font-dialog.md-dialog>.md-dialog-container{min-height:15em}#font-dialog .md-progress-spinner{align-content:center}#font-dialog .md-list{max-height:15em}#font-dialog .scroll-area{position:relative}.md-menu-content{z-index:11!important}body,html{font-family:Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center}#app,.md-app,.md-list,.page-container,body{height:100%}.hljs{background-color:transparent!important}.md-list-item-content>.md-icon:last-child{margin-left:0!important}
|
|
||||||
File diff suppressed because one or more lines are too long
BIN
docs/favicon.ico
BIN
docs/favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
@@ -1 +0,0 @@
|
|||||||
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=stylesheet href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons"><link rel=icon href=/calligraphy/favicon.ico><title>calligraphy</title><link href=/calligraphy/js/chunk-2d216214.e238e43d.js rel=prefetch><link href=/calligraphy/js/chunk-2d216257.256ee085.js rel=prefetch><link href=/calligraphy/js/chunk-442e92d4.62be7804.js rel=prefetch><link href=/calligraphy/css/app.a112045f.css rel=preload as=style><link href=/calligraphy/css/chunk-vendors.f0c5b23d.css rel=preload as=style><link href=/calligraphy/js/app.8309da9b.js rel=preload as=script><link href=/calligraphy/js/chunk-vendors.56893718.js rel=preload as=script><link href=/calligraphy/css/chunk-vendors.f0c5b23d.css rel=stylesheet><link href=/calligraphy/css/app.a112045f.css rel=stylesheet></head><body><noscript><strong>We're sorry but calligraphy doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/calligraphy/js/chunk-vendors.56893718.js></script><script src=/calligraphy/js/app.8309da9b.js></script></body></html>
|
|
||||||
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
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
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
File diff suppressed because one or more lines are too long
5
package-lock.json
generated
5
package-lock.json
generated
@@ -12095,6 +12095,11 @@
|
|||||||
"defaults": "^1.0.3"
|
"defaults": "^1.0.3"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"webfontloader": {
|
||||||
|
"version": "1.6.28",
|
||||||
|
"resolved": "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz",
|
||||||
|
"integrity": "sha1-23hhKSU8tujq5UwvsF+HCvZnW64="
|
||||||
|
},
|
||||||
"webpack": {
|
"webpack": {
|
||||||
"version": "4.44.1",
|
"version": "4.44.1",
|
||||||
"resolved": "https://registry.npm.taobao.org/webpack/download/webpack-4.44.1.tgz?cache=0&sync_timestamp=1597916627918&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwebpack%2Fdownload%2Fwebpack-4.44.1.tgz",
|
"resolved": "https://registry.npm.taobao.org/webpack/download/webpack-4.44.1.tgz?cache=0&sync_timestamp=1597916627918&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwebpack%2Fdownload%2Fwebpack-4.44.1.tgz",
|
||||||
|
|||||||
@@ -17,7 +17,8 @@
|
|||||||
"vue-custom-scrollbar": "^1.3.0",
|
"vue-custom-scrollbar": "^1.3.0",
|
||||||
"vue-highlightjs": "^1.3.3",
|
"vue-highlightjs": "^1.3.3",
|
||||||
"vue-infinite-loading": "^2.4.5",
|
"vue-infinite-loading": "^2.4.5",
|
||||||
"vue-material-design-icons": "^4.9.0"
|
"vue-material-design-icons": "^4.9.0",
|
||||||
|
"webfontloader": "^1.6.28"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/cli-plugin-babel": "~4.5.0",
|
"@vue/cli-plugin-babel": "~4.5.0",
|
||||||
|
|||||||
37
src/components/FontItem.vue
Normal file
37
src/components/FontItem.vue
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
<template>
|
||||||
|
<md-list-item @click="selectFont(font.index)" :style="fontStyle">
|
||||||
|
{{ font.family }}
|
||||||
|
</md-list-item>
|
||||||
|
</template>
|
||||||
|
<style lang="css">
|
||||||
|
#font-dialog .md-list-item-content {
|
||||||
|
font-size: 22px !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
import WebFontLoader from 'webfontloader';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'FontItem',
|
||||||
|
props: {
|
||||||
|
font: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
fontStyle() {
|
||||||
|
return {
|
||||||
|
'font-family': this.font.family
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
WebFontLoader.load({
|
||||||
|
google: {
|
||||||
|
families: [this.font.family]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -24,9 +24,7 @@
|
|||||||
<vue-custom-scrollbar :distance="20"
|
<vue-custom-scrollbar :distance="20"
|
||||||
:settings="{suppressScrollX: true, suppressScrollY: false}"
|
:settings="{suppressScrollX: true, suppressScrollY: false}"
|
||||||
class="scroll-area">
|
class="scroll-area">
|
||||||
<md-list-item v-for="font in shown" @click="selectFont(font.index)" :key="font.index">
|
<FontItem v-for="font in shown" :key="font.index" :font="font"></FontItem>
|
||||||
{{ font.family }}
|
|
||||||
</md-list-item>
|
|
||||||
<infinite-loading :identifier="search + sort" force-use-infinite-wrapper=".scroll-area"
|
<infinite-loading :identifier="search + sort" force-use-infinite-wrapper=".scroll-area"
|
||||||
@infinite="infiniteHandler">
|
@infinite="infiniteHandler">
|
||||||
<div slot="spinner"></div>
|
<div slot="spinner"></div>
|
||||||
@@ -90,6 +88,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
import FontItem from "@/components/FontItem";
|
||||||
import InfiniteLoading from 'vue-infinite-loading';
|
import InfiniteLoading from 'vue-infinite-loading';
|
||||||
import vueCustomScrollbar from 'vue-custom-scrollbar'
|
import vueCustomScrollbar from 'vue-custom-scrollbar'
|
||||||
import {gsap} from "gsap";
|
import {gsap} from "gsap";
|
||||||
@@ -101,6 +100,7 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
vueCustomScrollbar,
|
vueCustomScrollbar,
|
||||||
InfiniteLoading,
|
InfiniteLoading,
|
||||||
|
FontItem
|
||||||
},
|
},
|
||||||
data: () => ({
|
data: () => ({
|
||||||
fonts: null,
|
fonts: null,
|
||||||
|
|||||||
Reference in New Issue
Block a user