🏴󠁧󠁢󠁷󠁬󠁳󠁿

This commit is contained in:
eai04191 2019-11-16 01:31:13 +09:00
parent 3420e053fc
commit 8f58fce1b0
6 changed files with 34 additions and 9 deletions

View File

@ -17,6 +17,7 @@
"chart.js": "^2.7.1", "chart.js": "^2.7.1",
"cross-env": "^5.2.0", "cross-env": "^5.2.0",
"date-fns": "^1.30.1", "date-fns": "^1.30.1",
"grapheme-splitter": "^1.0.4",
"husky": "^1.3.1", "husky": "^1.3.1",
"jquery": "^3.2.1", "jquery": "^3.2.1",
"js-cookie": "^2.2.0", "js-cookie": "^2.2.0",

View File

@ -1,6 +1,7 @@
import Vue from 'vue'; import Vue from 'vue';
import TagInput from "./components/TagInput.vue"; import TagInput from "./components/TagInput.vue";
import MetadataPreview from './components/MetadataPreview.vue'; import MetadataPreview from './components/MetadataPreview.vue';
import GraphemeSplitter from "grapheme-splitter";
export const bus = new Vue({name: "EventBus"}); export const bus = new Vue({name: "EventBus"});
@ -16,6 +17,7 @@ new Vue({
data: { data: {
metadata: null, metadata: null,
metadataLoadState: MetadataLoadState.Inactive, metadataLoadState: MetadataLoadState.Inactive,
noteLength: 0
}, },
components: { components: {
TagInput, TagInput,
@ -28,6 +30,16 @@ new Vue({
this.fetchMetadata(linkInput.value); this.fetchMetadata(linkInput.value);
} }
}, },
watch: {
noteLength: (length: number) => {
const counter = document.querySelector<HTMLElement>(
"#note-character-counter"
);
if (counter) {
counter.innerText = `残り ${500 - length} 文字`;
}
}
},
methods: { methods: {
// オカズリンクの変更時 // オカズリンクの変更時
onChangeLink(event: Event) { onChangeLink(event: Event) {
@ -43,6 +55,14 @@ new Vue({
this.fetchMetadata(url); this.fetchMetadata(url);
} }
}, },
onChangeNote(event: Event) {
if (event.target instanceof HTMLTextAreaElement) {
const splitter = new GraphemeSplitter();
this.noteLength = splitter.splitGraphemes(
event.target.value
).length;
}
},
// メタデータの取得 // メタデータの取得
fetchMetadata(url: string) { fetchMetadata(url: string) {
this.metadataLoadState = MetadataLoadState.Loading; this.metadataLoadState = MetadataLoadState.Loading;

View File

@ -67,8 +67,8 @@
<div class="form-row"> <div class="form-row">
<div class="form-group col-sm-12"> <div class="form-group col-sm-12">
<label for="note"><span class="oi oi-comment-square"></span> ノート</label> <label for="note"><span class="oi oi-comment-square"></span> ノート</label>
<textarea id="note" name="note" class="form-control {{ $errors->has('note') ? ' is-invalid' : '' }}" rows="4">{{ old('note') ?? $defaults['note'] }}</textarea> <textarea id="note" name="note" class="form-control {{ $errors->has('note') ? ' is-invalid' : '' }}" rows="4" v-on:input="onChangeNote">{{ old('note') ?? $defaults['note'] }}</textarea>
<small class="form-text text-muted"> <small id="note-character-counter" class="form-text text-muted">
最大 500 文字 最大 500 文字
</small> </small>
@if ($errors->has('note')) @if ($errors->has('note'))

View File

@ -68,8 +68,8 @@
<div class="form-row"> <div class="form-row">
<div class="form-group col-sm-12"> <div class="form-group col-sm-12">
<label for="note"><span class="oi oi-comment-square"></span> ノート</label> <label for="note"><span class="oi oi-comment-square"></span> ノート</label>
<textarea id="note" name="note" class="form-control {{ $errors->has('note') ? ' is-invalid' : '' }}" rows="4">{{ old('note') ?? $ejaculation->note }}</textarea> <textarea id="note" name="note" class="form-control {{ $errors->has('note') ? ' is-invalid' : '' }}" rows="4" v-on:input="onChangeNote">{{ old('note') ?? $ejaculation->note }}</textarea>
<small class="form-text text-muted"> <small id="note-character-counter" class="form-text text-muted">
最大 500 文字 最大 500 文字
</small> </small>
@if ($errors->has('note')) @if ($errors->has('note'))

View File

@ -5,9 +5,8 @@
"module": "es2015", "module": "es2015",
"moduleResolution": "node", "moduleResolution": "node",
"strict": true, "strict": true,
"experimentalDecorators": true "experimentalDecorators": true,
"allowSyntheticDefaultImports": true
}, },
"include": [ "include": ["resources/assets/js/**/*"]
"resources/assets/js/**/*"
]
} }

View File

@ -3357,6 +3357,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.2.tgz#6f0952605d0140c1cfdb138ed005775b92d67b02" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.2.tgz#6f0952605d0140c1cfdb138ed005775b92d67b02"
integrity sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q== integrity sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q==
grapheme-splitter@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
growly@^1.3.0: growly@^1.3.0:
version "1.3.0" version "1.3.0"
resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081" resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"