From 78c185a05adb58da92cdb872f95eaaa2113183f7 Mon Sep 17 00:00:00 2001 From: syuilo Date: Wed, 23 Jan 2019 05:20:28 +0900 Subject: [PATCH] [Client] Improve usability --- .../app/common/scripts/copy-to-clipboard.ts | 30 +++++++++++++++---- .../app/common/views/components/note-menu.vue | 8 +++++ 2 files changed, 33 insertions(+), 5 deletions(-) diff --git a/src/client/app/common/scripts/copy-to-clipboard.ts b/src/client/app/common/scripts/copy-to-clipboard.ts index 3d2741f8d..ab13cab97 100644 --- a/src/client/app/common/scripts/copy-to-clipboard.ts +++ b/src/client/app/common/scripts/copy-to-clipboard.ts @@ -2,12 +2,32 @@ * Clipboardに値をコピー(TODO: 文字列以外も対応) */ export default val => { - const form = document.createElement('textarea'); - form.textContent = val; - document.body.appendChild(form); - form.select(); + // 空div 生成 + const tmp = document.createElement('div'); + // 選択用のタグ生成 + const pre = document.createElement('pre'); + + // 親要素のCSSで user-select: none だとコピーできないので書き換える + pre.style.webkitUserSelect = 'auto'; + pre.style.userSelect = 'auto'; + + tmp.appendChild(pre).textContent = val; + + // 要素を画面外へ + const s = tmp.style; + s.position = 'fixed'; + s.right = '200%'; + + // body に追加 + document.body.appendChild(tmp); + // 要素を選択 + document.getSelection().selectAllChildren(tmp); + + // クリップボードにコピー const result = document.execCommand('copy'); - document.body.removeChild(form); + + // 要素削除 + document.body.removeChild(tmp); return result; }; diff --git a/src/client/app/common/views/components/note-menu.vue b/src/client/app/common/views/components/note-menu.vue index f7223b962..750d240e3 100644 --- a/src/client/app/common/views/components/note-menu.vue +++ b/src/client/app/common/views/components/note-menu.vue @@ -87,10 +87,18 @@ export default Vue.extend({ copyContent() { copyToClipboard(this.note.text); + this.$root.dialog({ + type: 'success', + splash: true + }); }, copyLink() { copyToClipboard(`${url}/notes/${this.note.id}`); + this.$root.dialog({ + type: 'success', + splash: true + }); }, pin() {