Merge pull request #14 from haruyan-hopemucci/feat/disable-edit-text-…

…label contenteditable廃止
haruyan-hopemucci · Nov 20, 2023 · 3173a39 · 3173a39
2 parents 54c72e7 + 778403d
commit 3173a39
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 13 deletions.
diff --git 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
diff --git 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
@@ -25,10 +25,9 @@
   </head>
   <body>
     <main class="container">
-      <h1>LGTN Generator <small>v0.1.0</small></h1>
-
-      <div id="paste-area" contenteditable="true">
-        ここをクリックした後画像をペーストしてください。
+      <h1>LGTN Generator <small>v0.2.0</small></h1>
+      <div id="paste-area">
+        <div id="paste-area-message">クリップボードにコピーした画像をペーストしてください。</div>
       </div>
       <div>
         <div class="form-check form-check-inline">

diff --git a/docs/js/app.js b/docs/js/app.js
@@ -1,19 +1,26 @@
 '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()
 
     if (!event.clipboardData
       || !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('クリップボードの書き込み時にエラーが発生しました')
         })
     });