add copy event

senelway · Sep 30, 2018 · bfa99bd · bfa99bd
1 parent 7033581
commit bfa99bd
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 19 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -1 +1 @@
-<html> <head> <title>markmoji</title> <meta charset="UTF-8"> <link rel="“manifest”" href="/manifest.json"> <link href="/style.6624ae52.css"> </head> <body> <div id="app"></div> <script src="/src.7123e05a.js"></script> </body> </html>
+<html> <head> <title>markmoji</title> <meta charset="UTF-8"> <link rel="“manifest”" href="/manifest.json"> <link rel="stylesheet" href="/style.fd97e3e6.css"> </head> <body> <div id="app">loading...</div> <script src="/src.7f75be0a.js"></script> </body> </html>
diff --git a/dist/src.7123e05a.js → dist/src.7f75be0a.js b/dist/src.7123e05a.js → dist/src.7f75be0a.js
diff --git a/dist/style.6624ae52.css → dist/style.fd97e3e6.css b/dist/style.6624ae52.css → dist/style.fd97e3e6.css
diff --git a/index.html b/index.html
@@ -3,10 +3,10 @@
 		<title>markmoji</title>
 		<meta charset="UTF-8" />
 		<link rel=“manifest” href="./manifest.json" />
-		<link href="./src/style.css" />
+		<link rel="stylesheet" href="./src/style.css" />
 	</head>
 	<body>
-		<div id="app"></div>
+		<div id="app">loading...</div>
 		<script src="./src/index.js"></script>
 	</body>
 </html>
diff --git a/src/emoji.json b/src/emoji.json
@@ -863,18 +863,18 @@
   "small_red_triangle": ":small_red_triangle:",
   "small_red_triangle_down": ":small_red_triangle_down:",
   "shipit": ":shipit:",
-  "info": "info",
-  "warning": "warning",
-  "note": "note",
-  "tip": "tip",
-  "parking": "parking",
-  "restroom": "restroom",
-  "speedboat": "speedboat",
-  "handbag": "handbag",
+  "info": ":info:",
+  "warning": ":warning:",
+  "note": ":note:",
+  "tip": ":tip:",
+  "parking": ":parking:",
+  "restroom": ":restroom:",
+  "speedboat": ":speedboat:",
+  "handbag": ":handbag:",
   "roll_eyes": ":roll_eyes:",
   "thermometer": ":thermometer:",
   "nerd_face": ":nerd_face:",
-  "old_key": "old_key",
+  "old_key": ":old_key:",
   "man_facepalming": ":man_facepalming:",
   "woman_facepalming": ":woman_facepalming:"
-}
+}
diff --git a/src/index.js b/src/index.js
@@ -7,8 +7,20 @@ const root = document.body;
 
 const toLowerCase = e => e.toLowerCase();
 
+const copyTextToClipboard = text => {
+  const copyFrom = document.createElement("textarea");
+  copyFrom.textContent = text;
+  document.body.appendChild(copyFrom);
+  copyFrom.select();
+  document.execCommand('copy');
+  copyFrom.blur();
+  document.body.removeChild(copyFrom);
+  console.log(text);
+}
+
 const markmoji = {
   search: '',
+  onCopy: copyTextToClipboard,
   onChange: ({ currentTarget }) => markmoji.search = currentTarget.value,
   onFiltrate: data => {
     const keys = Object.keys(data);
@@ -23,7 +35,7 @@ const markmoji = {
       m('div', { class: 'b-flex' }, [
         markmoji.onFiltrate(json).length
           ? markmoji.onFiltrate(json).map(e => (
-            m('p', { class: 'gitmoji-element' }, [
+            m('p', { class: 'gitmoji-element', onclick: () => markmoji.onCopy(json[e]) }, [
               m('span', translate.translate(e)),
               m('code', json[e])
             ])

diff --git a/src/style.css b/src/style.css
@@ -1,7 +1,7 @@
 @import 'normalize.css';
 
 :root {
-  --grey: #eee,
+  --grey: #eee;
 }
 
 * {
@@ -11,8 +11,12 @@
 html, body {
   font-size: 14px;
 }
+body {
+  padding: 20px;
+}
 
 .b-flex {
+  width: 600px;
   display: flex;
   flex-wrap: wrap;
   padding: 10px;
@@ -27,7 +31,7 @@ html, body {
 
 .gitmoji-element:hover {
   transition: 0.6s;
-  transform: translateX(20px) scale(1.2);
+  transform: translateX(20px) scale(1.1);
 }
 
 code {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<html> <head> <title>markmoji</title> <meta charset="UTF-8"> <link rel="“manifest”" href="/manifest.json"> <link href="/style.6624ae52.css"> </head> <body> <div id="app"></div> <script src="/src.7123e05a.js"></script> </body> </html>
		<html> <head> <title>markmoji</title> <meta charset="UTF-8"> <link rel="“manifest”" href="/manifest.json"> <link rel="stylesheet" href="/style.fd97e3e6.css"> </head> <body> <div id="app">loading...</div> <script src="/src.7f75be0a.js"></script> </body> </html>