From 778403d4b47a40edd5dc50bafdd98b434cdbd5be Mon Sep 17 00:00:00 2001 From: haruyan-hopemucci <68041476+haruyan-hopemucci@users.noreply.github.com> Date: Mon, 20 Nov 2023 23:13:14 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20contentEditable=E3=82=92=E4=BD=BF?= =?UTF-8?q?=E3=82=8F=E3=81=AA=E3=81=8F=E3=81=A6=E3=82=82paste=E3=81=A7?= =?UTF-8?q?=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=81=AA=E3=81=A3?= =?UTF-8?q?=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/css/style.css | 4 ++-- docs/css/style.css.map | 2 +- docs/css/style.scss | 11 ++++++++++- docs/index.html | 7 +++---- docs/js/app.js | 17 ++++++++++++----- 5 files changed, 28 insertions(+), 13 deletions(-) diff --git a/docs/css/style.css b/docs/css/style.css index 39e0599..10bf6da 100644 --- a/docs/css/style.css +++ b/docs/css/style.css @@ -1,9 +1,9 @@ #paste-area { + position: relative; border: 1px solid #888888; border-radius: 0.5rem; - padding: 1em; + padding: 1rem; } - img#pasted-image { max-width: 400px; max-height: 400px; diff --git a/docs/css/style.css.map b/docs/css/style.css.map index 81624df..174fd7a 100644 --- a/docs/css/style.css.map +++ b/docs/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,yBAAA;EACA,qBAAA;EACA,YAAA;ACCF;;ADEA;EAEE,gBAAA;EACA,iBAAA;ACAF;;ADGA;EACE,YAAA;EACA,aAAA;ACAF;;ADGA;EACE,aAAA;ACAF","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,kBAAA;EACA,yBAAA;EACA,qBAAA;EACA,aAAA;ACCF;ADUA;EAEE,gBAAA;EACA,iBAAA;ACTF;;ADYA;EACE,YAAA;EACA,aAAA;ACTF;;ADYA;EACE,aAAA;ACTF","file":"style.css"} \ No newline at end of file diff --git a/docs/css/style.scss b/docs/css/style.scss index 9b6544c..59e12c8 100644 --- a/docs/css/style.scss +++ b/docs/css/style.scss @@ -1,7 +1,16 @@ #paste-area { + position: relative; border: 1px solid #888888; border-radius: 0.5rem; - padding: 1em; + padding: 1rem; + + #paste-area-message { + // position: absolute; + // top: 1em; + // left: 1em; + // z-index: -100; + } + } img#pasted-image { diff --git a/docs/index.html b/docs/index.html index bd6c3c2..00f476b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -25,10 +25,9 @@
-

LGTN Generator v0.1.0

- -
- ここをクリックした後画像をペーストしてください。 +

LGTN Generator v0.2.0

+
+
クリップボードにコピーした画像をペーストしてください。
diff --git a/docs/js/app.js b/docs/js/app.js index 5228e58..2a26dfe 100644 --- a/docs/js/app.js +++ b/docs/js/app.js @@ -1,7 +1,14 @@ 'use strict' $(function (){ - document.querySelector('#paste-area').addEventListener('paste', (event) => { + + const setMessage = message => { + const elem = document.querySelector("#paste-area-message") + elem.textContent = message + } + + // document.querySelector('#paste-area').addEventListener('paste', (event) => { + document.addEventListener('paste', (event) => { event.preventDefault() @@ -9,11 +16,11 @@ $(function (){ || !event.clipboardData.types || (event.clipboardData.types.length != 1) || (event.clipboardData.types[0] != "Files")) { - event.target.innerHTML = 'ペーストされたデータが画像ではありません' + setMessage('ペーストされたデータが画像ではありません') return true; } - event.target.innerHTML = 'LGTN画像を生成しています...' + setMessage('LGTN画像を生成しています...') generateLGTN(event.clipboardData.items[0]) @@ -51,11 +58,11 @@ $(function (){ const item = new ClipboardItem({ 'image/png': blob}) navigator.clipboard.write([item]) .then( () => { - pasteArea.innerHTML = 'クリップボードにLGTN画像がコピーされました！' + setMessage('クリップボードにLGTN画像がコピーされました！') }) .catch( ex => { console.error(ex) - pasteArea.innerHTML = 'クリップボードの書き込み時にエラーが発生しました' + setMessage('クリップボードの書き込み時にエラーが発生しました') }) });