annotate index.html @ 2:f27dbbc6e978

Now with debounce
author nanaya <me@myconan.net>
date Sun, 15 Jan 2017 19:13:30 +0900
parents 30cd1768611b
children 6875be47fb24
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
0
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
1 <!doctype html>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
2 <head>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
3 <meta charset="utf-8">
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
4 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
5 <title>QR Code Generator</title>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
6
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
7 <style type="text/css">
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
8 * {
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
9 position: relative;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
10 box-sizing: border-box;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
11 }
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
12
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
13 html {
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
14 height: 100%;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
15 margin: 0;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
16 padding: 0;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
17 font-family: sans-serif;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
18 font-size: 12px;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
19 }
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
20
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
21 body {
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
22 margin: 0;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
23 padding: 10px;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
24 height: 100%;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
25 }
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
26
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
27 .inputbox {
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
28 width: 100%;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
29 margin-bottom: 10px;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
30 resize: vertical;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
31 font-family: monospace;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
32 }
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
33
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
34 .page {
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
35 width: 100%;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
36 height: 100%;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
37 max-width: 600px;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
38 margin: 0 auto;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
39 display: flex;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
40 flex-direction: column;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
41 padding: 10px;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
42 }
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
43
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
44 .page__main {
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
45 flex: 1;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
46 }
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
47
1
30cd1768611b Hide when box is empty
nanaya <me@myconan.net>
parents: 0
diff changeset
48 .outputbox {
30cd1768611b Hide when box is empty
nanaya <me@myconan.net>
parents: 0
diff changeset
49 will-change: opacity;
30cd1768611b Hide when box is empty
nanaya <me@myconan.net>
parents: 0
diff changeset
50 }
30cd1768611b Hide when box is empty
nanaya <me@myconan.net>
parents: 0
diff changeset
51
30cd1768611b Hide when box is empty
nanaya <me@myconan.net>
parents: 0
diff changeset
52 .outputbox.js-hidden {
30cd1768611b Hide when box is empty
nanaya <me@myconan.net>
parents: 0
diff changeset
53 opacity: 0;
30cd1768611b Hide when box is empty
nanaya <me@myconan.net>
parents: 0
diff changeset
54 }
30cd1768611b Hide when box is empty
nanaya <me@myconan.net>
parents: 0
diff changeset
55
0
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
56 .title {
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
57 font-size: 16px;
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
58 }
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
59 </style>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
60 </head>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
61 <body>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
62 <div class="page">
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
63 <div class="page__main">
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
64 <h1>QR Code Generator</h1>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
65
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
66 <p>
2
f27dbbc6e978 Now with debounce
nanaya <me@myconan.net>
parents: 1
diff changeset
67 Type something and get its QR code (almost) immediately.
0
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
68 </p>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
69
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
70 <textarea class="inputbox js-qr-input" rows="4" autofocus></textarea>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
71
1
30cd1768611b Hide when box is empty
nanaya <me@myconan.net>
parents: 0
diff changeset
72 <div class="outputbox js-qr-output"></div>
0
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
73 </div>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
74
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
75 <div>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
76 <hr>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
77
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
78 <a href="https://bitbucket.org/nanaya1/qr-html">Source</a>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
79 </div>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
80 </div>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
81
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
82 <script src="jquery.min.js"></script>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
83 <script src="qrcode.min.js"></script>
2
f27dbbc6e978 Now with debounce
nanaya <me@myconan.net>
parents: 1
diff changeset
84 <script src="lodash.min.js"></script>
0
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
85
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
86 <script>
2
f27dbbc6e978 Now with debounce
nanaya <me@myconan.net>
parents: 1
diff changeset
87 var outputDom = document.getElementsByClassName("js-qr-output")[0]
f27dbbc6e978 Now with debounce
nanaya <me@myconan.net>
parents: 1
diff changeset
88 var qr = new QRCode(outputDom)
0
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
89
2
f27dbbc6e978 Now with debounce
nanaya <me@myconan.net>
parents: 1
diff changeset
90 var refreshCode = function(e) {
f27dbbc6e978 Now with debounce
nanaya <me@myconan.net>
parents: 1
diff changeset
91 var text = e.target.value
0
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
92
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
93 if (text !== "") {
2
f27dbbc6e978 Now with debounce
nanaya <me@myconan.net>
parents: 1
diff changeset
94 qr.makeCode(text)
f27dbbc6e978 Now with debounce
nanaya <me@myconan.net>
parents: 1
diff changeset
95 outputDom.classList.remove('js-hidden')
1
30cd1768611b Hide when box is empty
nanaya <me@myconan.net>
parents: 0
diff changeset
96 } else {
2
f27dbbc6e978 Now with debounce
nanaya <me@myconan.net>
parents: 1
diff changeset
97 outputDom.classList.add('js-hidden')
0
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
98 }
2
f27dbbc6e978 Now with debounce
nanaya <me@myconan.net>
parents: 1
diff changeset
99 }
f27dbbc6e978 Now with debounce
nanaya <me@myconan.net>
parents: 1
diff changeset
100
f27dbbc6e978 Now with debounce
nanaya <me@myconan.net>
parents: 1
diff changeset
101 $(".js-qr-input").on("input", _.debounce(refreshCode, 100))
0
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
102 </script>
6b5cab0b3f91 Initial
nanaya <me@myconan.net>
parents:
diff changeset
103 </body>