barcode.js integration

2015-07-19 01:00:54 +02:00 · 2015-07-19 01:00:54 +02:00 · 38e91a20b5
commit 38e91a20b5
parent c5f138a36c
4 changed files with 51 additions and 1 deletions
--- a/Foundation.hs
+++ b/Foundation.hs
@ -117,6 +117,7 @@ instance Yesod App where
                ])
            $(combineScripts 'StaticR
                [ js_crementing_js
+                , js_barcode_js
                ])
            $(widgetFile "default-layout")
        withUrlRenderer $(hamletFile "templates/default-layout-wrapper.hamlet")
--- a/static/css/main.css
+++ b/static/css/main.css
@ -239,3 +239,27 @@ input[type] {
 	      color: black;}
 	100% {-moz-transform: translate(1px, -2px)  rotate(-1deg);}
 }
+
+#barcode {
+    display: none;
+    opacity: 0;
+}
+#barcode.shown {
+    z-index: 1000;
+    display: block;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: black;
+    color: white;
+    font-size: 300%;
+    opacity: 0.9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+#barcodeContent {
+    text-align: center;
+}
--- a/static/js/barcode.js
+++ b/static/js/barcode.js
@ -0,0 +1,22 @@
+var barcodeBuf = ""
+var barcodeShown = false
+
+function showBarcode(text) {
+    if (!barcodeShown) {
+        document.getElementById('barcode').classList.add('shown')
+    }
+    document.getElementById('barcodeContent').textContent = text
+}
+
+function barcodeKeyPress(event) {
+    var key = String.fromCharCode(event.charCode)
+    if (event.keyCode === 13) {
+        // window.location = "" + barcodeBuf
+        barcodeBuf = ""
+        event.preventDefault()
+    } else {
+        barcodeBuf += key
+        showBarcode(barcodeBuf)
+        event.preventDefault()
+    }
+}
--- a/templates/default-layout-wrapper.hamlet
+++ b/templates/default-layout-wrapper.hamlet
@ -22,7 +22,10 @@ $newline never

        <script>
          document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/,'js');
-    <body>
+    <body onkeypress="barcodeKeyPress(event)">
+      <aside #barcode>
+        <p #barcodeContent> 
+
      ^{pageBody pc}

        $maybe analytics <- appAnalytics $ appSettings master