diff --git a/example/css/highlight-default.css b/example/css/highlight-default.css deleted file mode 100644 index f1bfade..0000000 --- a/example/css/highlight-default.css +++ /dev/null @@ -1,99 +0,0 @@ -/* - -Original highlight.js style (c) Ivan Sagalaev - -*/ - -.hljs { - display: block; - overflow-x: auto; - padding: 0.5em; - background: #F0F0F0; -} - - -/* Base color: saturation 0; */ - -.hljs, -.hljs-subst { - color: #444; -} - -.hljs-comment { - color: #888888; -} - -.hljs-keyword, -.hljs-attribute, -.hljs-selector-tag, -.hljs-meta-keyword, -.hljs-doctag, -.hljs-name { - font-weight: bold; -} - - -/* User color: hue: 0 */ - -.hljs-type, -.hljs-string, -.hljs-number, -.hljs-selector-id, -.hljs-selector-class, -.hljs-quote, -.hljs-template-tag, -.hljs-deletion { - color: #880000; -} - -.hljs-title, -.hljs-section { - color: #880000; - font-weight: bold; -} - -.hljs-regexp, -.hljs-symbol, -.hljs-variable, -.hljs-template-variable, -.hljs-link, -.hljs-selector-attr, -.hljs-selector-pseudo { - color: #BC6060; -} - - -/* Language color: hue: 90; */ - -.hljs-literal { - color: #78A960; -} - -.hljs-built_in, -.hljs-bullet, -.hljs-code, -.hljs-addition { - color: #397300; -} - - -/* Meta color: hue: 200 */ - -.hljs-meta { - color: #1f7199; -} - -.hljs-meta-string { - color: #4d99bf; -} - - -/* Misc effects */ - -.hljs-emphasis { - font-style: italic; -} - -.hljs-strong { - font-weight: bold; -} diff --git a/example/css/prism.css b/example/css/prism.css new file mode 100644 index 0000000..367f3eb --- /dev/null +++ b/example/css/prism.css @@ -0,0 +1,139 @@ +/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+jsx */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ + +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, pre[class*="language-"] ::selection, +code[class*="language-"]::selection, code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #a67f59; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} + diff --git a/example/css/styles.css b/example/css/styles.css index 87b0b4c..60929de 100644 --- a/example/css/styles.css +++ b/example/css/styles.css @@ -1,16 +1,5 @@ -#interactive.viewport { - width: 640px; - height: 480px; -} - -#interactive.viewport canvas, video { - float: left; - width: 640px; - height: 480px; -} - -#interactive.viewport canvas.drawingBuffer, video.drawingBuffer { - margin-left: -640px; +.collapsable-source pre { + font-size: small; } .input-field { diff --git a/example/sass/_icons.scss b/example/sass/_icons.scss deleted file mode 100644 index 8e47dd5..0000000 --- a/example/sass/_icons.scss +++ /dev/null @@ -1,10 +0,0 @@ -i.icon-24-scan{ - width: 24px; - height: 24px; - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzFFMjMzNTBFNjcwMTFFMkIzMERGOUMzMzEzM0E1QUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzFFMjMzNTFFNjcwMTFFMkIzMERGOUMzMzEzM0E1QUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDMUUyMzM0RUU2NzAxMUUyQjMwREY5QzMzMTMzQTVBQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDMUUyMzM0RkU2NzAxMUUyQjMwREY5QzMzMTMzQTVBQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtQr90wAAAUuSURBVHjanFVLbFRVGP7ua97T9DGPthbamAYYBNSMVbBpjCliWWGIEBMWsnDJxkh8RDeEDW5MDGticMmGBWnSlRSCwgLFNkqmmrRIqzjTznTazkxn5s7c6/efzm0G0Jhwkj/nP+d/nv91tIWFBTQaDQWapkGW67p4ltUub5qmAi0UCqF/a/U2m81tpmddotwwDGSz2dzi4uKSaOucnJycGhsbe1XXdQiIIcdxEAgEtgXq9brySHCht79UXi/8QheawN27d385fPjwuEl6XyKR6LdtW7t06RLK5TKOHj2K/fv3Q87Dw8OYn5/HiRMnMDs7i5mZGQwODiqlPp8PuVwO6XRaOXb16lXl1OnTp5FMJvtosF8M+MWLarWqGJaWlpBKpRRcu3YN4+PjmJ6exsTEhDJw5coVjI6OKgPhcBiZTAbxeBx+vx+XL19Gd3c3Tp48Ka9zqDYgBlTQxYNgMIhIJKLCILkQb+TZsgvdsiyFi+feWRR7oRNZyanQtvW2V4DEUUBiK2eJpeDirSyhCe7F2QPh8fiEp72i9PbsC5G52DbiKZA771yr1dTuGfJ4PQNPFoAyQNR1aNEmsS5eyB3PgjeooMZd2AWvNmzYci/Gea7TeFOcI93jV/K67noGmi4vdRI9gPSDeMLSdKUBZZczlWm1rTtHjLZ24d+WER2tc8N1m+Y+ID74wx0zGYvhg9UNrJdtHJyZRdQfwPsrq9g99xsGlgsYmr6BNzO/IVwsYfjBQ6XYz6JI/72MV366B5/lw0elOkJWGUM3bmKtWjXSLuLaBWhnPnnp0FfoiFi4+TMfVAb2poBkDLjO845uYLEAjL4ALGWBP5YAOsP4AJYBFDaB1HOSVWD2PuV95H2RdV93Lv74/cf6p6Zxq/h6OofeOPJBC39JtONdwOAAViOs4p4OFGTf0Uc8iiyrr9YdQrUnDLsngrVOC0jQib44HlF2RafRZBz1Qy+vfhgK3NJZBlrm+LEm9qWwzFgLU7Ozg0JxZP06jQSRpQ7EerAWDSt6PuhHPmChEAog56fCLvJT5hHTm3OZkz3DyLx7XNWTGEA1GkV14gjWgwbW0ESVjYRwCOuai03L5E7OUBAV4kXSS4auoGIaKOma4m8EA5R1sMEGLh95C+XuLph0WJWpxepYYLtfT0RRgY1KgNODY6BoaChRuEhDCIZQYseuki5KN6hcQHiq7OZNv4/Zq2O6P4Lfkwn46vZjjaYZrIpvWbpzjLErrc4xUGE4avRedpYJalRcIl5hQius/SrPm9xrNOQYJhao6BvNUeWqtY8KaWuNjHOFAr7mM9f4NA4UbKysoUJ8PV9UzVOx6wxDDWUOxnK1pmCD07fOMAvtIsM3l89Dl3HRGhVma9AZMqjOnz2LQqWCxs6dqr3T7x1DTzKJaG8SekcHhg4cgI/56uKdlKnBV/WndqN3YAB/7tyBd3oT6GBIOzs7kc/nDfFdDFT5bS73cp06dQoaPa/Rw/rtO/resTHxxE2m9rCrbSR27UJCcMf1BpiA5rAAGgdfc868fUR1sMwj0cm9Iu9IctweisViB3hhKTHDcHc5jv/LspbyaZrR1OD82/fIlOkuB9LnEWRmDX2TsddUPg3D5gvuc0je0rZaD5EW6G3yjS+A3eeBEWq3XW/Abw1HhUspXADufQb86oW7tZytkYCN//3hHwBvDALPi8EnSOYK8DAOfCc2h4aGcO7cuafkzampqf9UripH12/DtOZbx8ciVGzYy5OO40o25ascGRl5Ssc/AgwAjW3JwqIUjSYAAAAASUVORK5CYII="); - display: inline-block; - background-repeat: no-repeat; - line-height: 24px; - margin-top: 1px; - vertical-align: text-top; -} diff --git a/example/sass/_overlay.scss b/example/sass/_overlay.scss deleted file mode 100644 index 1de596b..0000000 --- a/example/sass/_overlay.scss +++ /dev/null @@ -1,48 +0,0 @@ -$overlayWidth: $videoWidth; -$overlayHeadline: 16px; -$overlayHeadlineMargin: 14px; -$overlayPadding: 20px; -$overlayHeight: $videoHeight + $overlayHeadlineMargin + $overlayHeadline; - -.scanner-overlay { - display: none; - width: $overlayWidth; - height: $overlayHeight; - position: absolute; - padding: $overlayPadding; - top: 50%; - margin-top: -($overlayHeight)/2 - $overlayPadding; - left: 50%; - margin-left: -($overlayWidth + 2*$overlayPadding)/2; - background-color: $overlayBackground; - @include box-shadow(#333333 0px 4px 10px); - - & > .header{ - position: relative; - margin-bottom: $overlayHeadlineMargin; - h4, .close{ - line-height: $overlayHeadline; - } - h4{ - margin: 0px; - padding: 0px; - } - .close{ - position: absolute; - right: 0px; - top: 0px; - height: $overlayHeadline; - width: $overlayHeadline; - text-align: center; - font-weight: bold; - font-size: 14px; - cursor: pointer; - } - } - - & > .body{ - - - - } -} diff --git a/example/sass/_phone.scss b/example/sass/_phone.scss deleted file mode 100644 index e634c4d..0000000 --- a/example/sass/_phone.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "phone/core"; -@import "phone/viewport"; -@import "phone/overlay"; \ No newline at end of file diff --git a/example/sass/_tablet.scss b/example/sass/_tablet.scss deleted file mode 100644 index fe679f1..0000000 --- a/example/sass/_tablet.scss +++ /dev/null @@ -1,4 +0,0 @@ -@include tablet { - /* tablet styles */ - -} \ No newline at end of file diff --git a/example/sass/_utility.scss b/example/sass/_utility.scss deleted file mode 100644 index bc0d56d..0000000 --- a/example/sass/_utility.scss +++ /dev/null @@ -1,17 +0,0 @@ -$tablet_upper: 1024px; -$phone_upper: 603px; - -@mixin phone { - @media (max-width: $phone_upper) { - @content; - } - -} // @mixin phone - -@mixin tablet { - - @media (min-width: $phone_upper+1) and (max-width: $tablet_upper) { - @content; - } - -} // @mixin tablet \ No newline at end of file diff --git a/example/sass/_variables.scss b/example/sass/_variables.scss deleted file mode 100644 index 785728a..0000000 --- a/example/sass/_variables.scss +++ /dev/null @@ -1,7 +0,0 @@ -$background_color: #FFF; -$overlayBackground: #FFF; -$videoWidth: 640px; -$videoHeight: 480px; - -$text-font: Ubuntu, sans-serif; -$header-font: 'Cabin Condensed', sans-serif; \ No newline at end of file diff --git a/example/sass/_viewport.scss b/example/sass/_viewport.scss deleted file mode 100644 index f0d085b..0000000 --- a/example/sass/_viewport.scss +++ /dev/null @@ -1,89 +0,0 @@ -#interactive.viewport{ - width: $videoWidth; - height: $videoHeight; -} - -#interactive.viewport canvas, video{ - float: left; - width: $videoWidth; - height: $videoHeight; - &.drawingBuffer{ - margin-left: -$videoWidth; - } -} - -.controls { - fieldset { - border: none; - } - .input-group { - float: left; - input, button { - display: block; - } - } - .reader-config-group { - float: right; - - label { - display: block; - span { - width: 11rem; - display: inline-block; - text-align: right; - } - } - } - &:after { - content:''; - display: block; - clear: both; - } -} - -#result_strip{ - margin: 10px 0; - border-top: 1px solid #EEE; - border-bottom: 1px solid #EEE; - padding: 10px 0; - - & > ul { - padding: 0; - margin: 0; - list-style-type: none; - width: auto; - overflow-x: auto; - overflow-y: hidden; - white-space: nowrap; - - & > li{ - display: inline-block; - vertical-align: middle; - width: $videoWidth/4; - .thumbnail{ - padding: 5px; - margin: 4px; - border: 1px dashed #CCC; - - img{ - max-width: $videoWidth/4 - 20px; - } - .caption{ - white-space: normal; - h4{ - text-align: center; - word-wrap: break-word; - height: 40px; - margin: 0px; - } - } - } - } - - &:after{ - content: ""; - display: table; - clear: both; - } - } -} diff --git a/example/sass/colors.scss b/example/sass/colors.scss deleted file mode 100644 index 1af8ab8..0000000 --- a/example/sass/colors.scss +++ /dev/null @@ -1,55 +0,0 @@ -/* LESS - http://lesscss.org style sheet */ -/* Palette color codes */ -/* Palette URL: http://paletton.com/#uid=31g0q0kHZAviRSkrHLOGomVNzac */ - -/* Feel free to copy&paste color codes to your application */ - - -/* MIXINS */ - -/* As hex codes */ - -$color-primary-0: #FFC600; /* Main Primary color */ -$color-primary-1: #FFDD69; -$color-primary-2: #FFCE22; -$color-primary-3: #B78E00; -$color-primary-4: #513F00; - -$color-secondary-1-0: #0A4DB7; /* Main Secondary color (1) */ -$color-secondary-1-1: #6C9CE8; -$color-secondary-1-2: #2E6FD6; -$color-secondary-1-3: #073379; -$color-secondary-1-4: #021636; - -$color-secondary-2-0: #5809BB; /* Main Secondary color (2) */ -$color-secondary-2-1: #A36BE9; -$color-secondary-2-2: #782DD8; -$color-secondary-2-3: #3A077C; -$color-secondary-2-4: #190237; - - - -/* As RGBa codes */ - -$rgba-primary-0: rgba(255,198, 0,1); /* Main Primary color */ -$rgba-primary-1: rgba(255,221,105,1); -$rgba-primary-2: rgba(255,206, 34,1); -$rgba-primary-3: rgba(183,142, 0,1); -$rgba-primary-4: rgba( 81, 63, 0,1); - -$rgba-secondary-1-0: rgba( 10, 77,183,1); /* Main Secondary color (1) */ -$rgba-secondary-1-1: rgba(108,156,232,1); -$rgba-secondary-1-2: rgba( 46,111,214,1); -$rgba-secondary-1-3: rgba( 7, 51,121,1); -$rgba-secondary-1-4: rgba( 2, 22, 54,1); - -$rgba-secondary-2-0: rgba( 88, 9,187,1); /* Main Secondary color (2) */ -$rgba-secondary-2-1: rgba(163,107,233,1); -$rgba-secondary-2-2: rgba(120, 45,216,1); -$rgba-secondary-2-3: rgba( 58, 7,124,1); -$rgba-secondary-2-4: rgba( 25, 2, 55,1); - - - -/* Generated by Paletton.com © 2002-2014 */ -/* http://paletton.com */ \ No newline at end of file diff --git a/example/sass/fonts.scss b/example/sass/fonts.scss deleted file mode 100644 index 2863604..0000000 --- a/example/sass/fonts.scss +++ /dev/null @@ -1 +0,0 @@ -@import url('http://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600'); \ No newline at end of file diff --git a/example/sass/phone/_core.scss b/example/sass/phone/_core.scss deleted file mode 100644 index ce92a02..0000000 --- a/example/sass/phone/_core.scss +++ /dev/null @@ -1,15 +0,0 @@ -@include phone { - #container{ - width: 300px; - margin: 10px auto; - @include box-shadow(none); - - form.voucher-form{ - input{ - &.voucher-code{ - width: 180px; - } - } - } - } -} diff --git a/example/sass/phone/_overlay.scss b/example/sass/phone/_overlay.scss deleted file mode 100644 index 1251062..0000000 --- a/example/sass/phone/_overlay.scss +++ /dev/null @@ -1,28 +0,0 @@ -@include phone { - $overlayWidth: $videoWidth; - $overlayHeadline: 16px; - $overlayHeadlineMargin: 14px; - $overlayPadding: 20px; - $overlayHeight: $videoHeight + $overlayHeadlineMargin + $overlayHeadline; - - .overlay.scanner { - width: $overlayWidth; - height: $overlayHeight; - padding: $overlayPadding; - margin-top: -($overlayHeight)/2 - $overlayPadding; - margin-left: -($overlayWidth + 2*$overlayPadding)/2; - background-color: $overlayBackground; - @include box-shadow(none); - - & > .header{ - margin-bottom: $overlayHeadlineMargin; - h4, .close{ - line-height: $overlayHeadline; - } - .close{ - height: $overlayHeadline; - width: $overlayHeadline; - } - } - } -} \ No newline at end of file diff --git a/example/sass/phone/_viewport.scss b/example/sass/phone/_viewport.scss deleted file mode 100644 index 5c861b5..0000000 --- a/example/sass/phone/_viewport.scss +++ /dev/null @@ -1,42 +0,0 @@ -@include phone { - $videoWidth: 300px; - $videoHeight: 400px; - - #interactive.viewport{ - width: $videoWidth; - height: $videoWidth; - overflow: hidden; - } - - #interactive.viewport canvas, video{ - margin-top: ($videoWidth - $videoHeight)/2; - width: $videoWidth; - height: $videoHeight; - &.drawingBuffer{ - margin-left: -$videoWidth; - } - } - - #result_strip{ - margin-top: 5px; - padding-top: 5px; - ul.thumbnails{ - & > li{ - width: $videoWidth/2; - .thumbnail{ - .imgWrapper{ - width: $videoWidth/2 - 20px; - height: $videoWidth/2 - 20px; - overflow: hidden; - img{ - margin-top: (($videoWidth/2 - 20px) - ($videoHeight/2 - 20px))/2; - width: $videoWidth/2 - 20px; - height: $videoHeight/2 - 20px; - } - } - - } - } - } - } -} \ No newline at end of file diff --git a/example/sass/scanner.scss b/example/sass/scanner.scss deleted file mode 100644 index 223f093..0000000 --- a/example/sass/scanner.scss +++ /dev/null @@ -1,14 +0,0 @@ - -@import "compass/css3"; -@import "variables"; -@import "utility"; - -/* usual styles */ - -@import "fonts"; -@import "viewport"; -@import "overlay"; -@import "icons"; - -@import "tablet"; -@import "phone"; diff --git a/example/sass/styles.scss b/example/sass/styles.scss deleted file mode 100644 index 5638d91..0000000 --- a/example/sass/styles.scss +++ /dev/null @@ -1,56 +0,0 @@ -@import "compass/css3"; -@import "variables"; -@import "utility"; - -/* usual styles */ -@import "colors"; -@import "fonts"; -@import "viewport"; -@import "overlay"; -@import "icons"; - -@import "tablet"; -@import "phone"; - -body{ - background-color: #FFF; - margin: 0px; - font-family: $text-font; - color: #1e1e1e; - font-weight: normal; - padding-top: 0; -} - -h1,h2,h3,h4 { - font-family: $header-font; -} - -header { - background: $color-primary-0; - padding: 1em; - .headline { - width: 640px; - margin: 0 auto; - h1 { - color: $color-primary-1; - font-size: 3em; - margin-bottom: 0; - } - h2 { - margin-top: 0.2em; - } - } -} - -footer { - background: $color-secondary-1-0; - color: $color-secondary-1-1; - padding: 1em 2em 2em; -} - -#container{ - width: 640px; - margin: 20px auto; - padding: 10px; -} - diff --git a/example/scan-to-input/index.html b/example/scan-to-input/index.html index a32ec9f..c26d221 100644 --- a/example/scan-to-input/index.html +++ b/example/scan-to-input/index.html @@ -11,7 +11,7 @@ - + @@ -28,47 +28,118 @@
- +
-

An overlay will pop-up showing the users's back-facing - camera if access is granted.

-
+

This example demonstrates the following features: +

+

+

Source

- 
-                
-
-var scanner = Quagga
-   .decoder({readers: ['ean_reader']})
-   .locator({patchSize: 'medium'})
-   .fromVideo({
-       target: '.overlay__content',
-       constraints: {
-           width: 800,
-           height: 600,
-           facingMode: "environment"
-       }
-   });
+            

+                
+                    
+    var App = {
+        _scanner: null,
+        init: function() {
+            this.attachListeners();
+        },
+        activateScanner: function() {
+            var scanner = this.configureScanner('.overlay__content'),
+                onDetected = function (result) {
+                    document.querySelector('input.isbn').value = result.codeResult.code;
+                    stop();
+                }.bind(this),
+                stop = function() {
+                    scanner.stop();  // should also clear all event-listeners?
+                    scanner.removeEventListener('detected', onDetected);
+                    this.hideOverlay();
+                    this.attachListeners();
+                }.bind(this);
 
-document.querySelector('.input-field input + button.scan')
-   .addEventListener("click", function onClick(e) {
-       e.preventDefault();
-       e.target.removeEventListener("click", onClick);
+            this.showOverlay(stop);
+            scanner.addEventListener('detected', onDetected).start();
+        },
+        attachListeners: function() {
+            var self = this;
 
-       // Start scanning
-       scanner.addEventListener('detected', function detected(result) {
-           // show result and stop scanner
-          document.querySelector('input.isbn').value = result.codeResult.code;
-          scanner.stop();
-          scanner.removeEventListener('detected', detected);
-       }).start();
-   });
+            document.querySelector('.input-field input + button.scan')
+                .addEventListener("click", function onClick(e) {
+                    e.preventDefault();
+                    e.target.removeEventListener("click", onClick);
+                    self.activateScanner();
+                });
+        },
+        showOverlay: function(cancelCb) {
+            if (!this._overlay) {
+                var content = document.createElement('div'),
+                    closeButton = document.createElement('div');
 
-                
-            

+                closeButton.appendChild(document.createTextNode('X'));
+                content.className = 'overlay__content';
+                closeButton.className = 'overlay__close';
+                this._overlay = document.createElement('div');
+                this._overlay.className = 'overlay';
+                this._overlay.appendChild(content);
+                content.appendChild(closeButton);
+                closeButton.addEventListener('click', function closeClick(e) {
+                    e.target.removeEventListener('click', closeClick);
+                    cancelCb();
+                });
+                document.body.appendChild(this._overlay);
+            } else {
+                var closeButton = document.querySelector('.overlay__close');
+                closeButton.addEventListener('click', cancelCb);
+            }
+            this._overlay.style.display = "block";
+        },
+        hideOverlay: function() {
+            if (this._overlay) {
+                this._overlay.style.display = "none";
+            }
+        },
+        configureScanner: function(selector) {
+            if (!this._scanner) {
+                this._scanner = Quagga
+                    .decoder({readers: ['ean_reader']})
+                    .locator({patchSize: 'medium'})
+                    .fromVideo({
+                        target: selector,
+                        constraints: {
+                            width: 800,
+                            height: 600,
+                            facingMode: "environment"
+                        }
+                    });
+            }
+            return this._scanner;
+        }
+    };
+    App.init();
+                    
+
+
+
+ 
+                    
+<form>
+    <div class="input-field">
+        <label for="isbn_input">EAN:</label>
+        <input id="isbn_input" class="isbn" type="text" />
+        <button type="button" class="icon-barcode button scan"> </button>
+    </div>
+</form>
+                    
+
+