docs: include docs in master branch

Author: gruhn

.travis.yml

@@ -6,6 +6,7 @@ install:
 
 script:
   - npm run build
+  - npm run build:docs
 
 cache: npm
 
@@ -17,3 +18,10 @@ deploy:
       condition: $TRAVIS_BRANCH =~ ^(master|alpha)$
     script:
       - npx semantic-release
+  - provider: pages
+    skip_cleanup: true
+    keep_history: true
+    github_token: $GITHUB_TOKEN
+    on:
+      branch: master
+    local_dir: /docs/.vuepress/dist

demos/Demo.vue

@@ -0,0 +1,54 @@
+<template>
+  <component :is="currentDemo" />
+</template>
+
+<script>
+import CustomTracking from './demos/CustomTracking.vue'
+import DecodeAll from './demos/DecodeAll.vue'
+import SwitchCamera from './demos/SwitchCamera.vue'
+import DragDrop from './demos/DragDrop.vue'
+import Upload from './demos/Upload.vue'
+import Fallback from './demos/Fallback.vue'
+import Fullscreen from './demos/Fullscreen.vue'
+import LoadingIndicator from './demos/LoadingIndicator.vue'
+import Torch from './demos/Torch.vue'
+import Validate from './demos/Validate.vue'
+
+export default {
+  components: {
+    DecodeAll,
+    CustomTracking,
+    SwitchCamera,
+    DragDrop,
+    Upload,
+    Fallback,
+    Fullscreen,
+    LoadingIndicator,
+    Torch,
+    Validate
+  },
+
+  props: {
+    component: String
+  },
+
+  data () {
+    return {
+      currentDemo: null
+    }
+  },
+
+  mounted () {
+    this.currentDemo = this.component
+  }
+
+}
+</script>
+
+<style>
+.decode-result {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

demos/index.js

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <p>
+      Track function:
+      <select v-model="selected">
+        <option v-for="option in options" :value="option">
+          {{ option.text }}
+        </option>
+      </select>
+    </p>
+
+    <p class="decode-result">
+      Last result: <b>{{ result }}</b>
+    </p>
+
+    <qrcode-stream :key="_uid" :track="selected.value" @decode="onDecode" @init="logErrors" />
+  </div>
+</template>
+
+<script>
+import { QrcodeStream } from '../../../../src'
+
+export default {
+
+  components: { QrcodeStream },
+
+  data () {
+    const options = [
+      { text: "None", value: false },
+      { text: "Red square (default)", value: true },
+      { text: "Green text", value: this.paintGreenText },
+      { text: "Blue dots", value: this.paintBlueDots },
+    ]
+
+    const selected = options[2]
+
+    return { selected, options, result: null }
+  },
+
+  methods: {
+    paintBlueDots (location, ctx) {
+      const {
+        topLeftFinderPattern,
+        topRightFinderPattern,
+        bottomLeftFinderPattern
+      } = location
+
+      const pointArray = [
+        topLeftFinderPattern,
+        topRightFinderPattern,
+        bottomLeftFinderPattern
+      ]
+
+      ctx.fillStyle = '#007bff'
+
+      pointArray.forEach(({ x, y }) => {
+        ctx.fillRect(x - 5, y - 5, 10, 10)
+      })
+    },
+
+    paintGreenText (location, ctx) {
+      const {
+        topLeftCorner,
+        topRightCorner,
+        bottomLeftCorner,
+        bottomRightCorner
+      } = location
+
+      const pointArray = [
+        topLeftCorner,
+        topRightCorner,
+        bottomLeftCorner,
+        bottomRightCorner
+      ]
+
+      const centerX = pointArray.reduce((sum, { x }) => x + sum, 0) / 4
+      const centerY = pointArray.reduce((sum, { y }) => y + sum, 0) / 4
+
+      ctx.font = "bold 24px sans-serif"
+      ctx.textAlign = "center"
+
+      ctx.lineWidth = 3
+      ctx.strokeStyle = '#35495e'
+      ctx.strokeText(this.result, centerX, centerY)
+
+      ctx.fillStyle = '#5cb984'
+      ctx.fillText(this.result, centerX, centerY)
+    },
+
+    onDecode (result) {
+      this.result = result
+    },
+
+    logErrors (promise) {
+      promise.catch(console.error)
+    }
+  }
+
+}
+</script>

docs/.vuepress/components/DemoWrapper.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <p class="error">{{ error }}</p>
+
+    <p class="decode-result">Last result: <b>{{ result }}</b></p>
+
+    <qrcode-stream @decode="onDecode" @init="onInit" />
+  </div>
+</template>
+
+<script>
+import { QrcodeStream } from '../../../../src'
+
+export default {
+
+  components: { QrcodeStream },
+
+  data () {
+    return {
+      result: '',
+      error: ''
+    }
+  },
+
+  methods: {
+    onDecode (result) {
+      this.result = result
+    },
+
+    async onInit (promise) {
+      try {
+        await promise
+      } catch (error) {
+        if (error.name === 'NotAllowedError') {
+          this.error = "ERROR: you need to grant camera access permisson"
+        } else if (error.name === 'NotFoundError') {
+          this.error = "ERROR: no camera on this device"
+        } else if (error.name === 'NotSupportedError') {
+          this.error = "ERROR: secure context required (HTTPS, localhost)"
+        } else if (error.name === 'NotReadableError') {
+          this.error = "ERROR: is the camera already in use?"
+        } else if (error.name === 'OverconstrainedError') {
+          this.error = "ERROR: installed cameras are not suitable"
+        } else if (error.name === 'StreamApiNotSupportedError') {
+          this.error = "ERROR: Stream API is not supported in this browser"
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.error {
+  font-weight: bold;
+  color: red;
+}
+</style>

docs/.vuepress/components/demos/CustomTracking.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <p class="decode-result">Last result: <b>{{ result }}</b></p>
+
+    <p v-if="error !== null" class="drop-error">
+      {{ error }}
+    </p>
+
+    <qrcode-drop-zone @detect="onDetect" @dragover="onDragOver" @init="logErrors">
+      <div class="drop-area" :class="{ 'dragover': dragover }">
+        DROP SOME IMAGES HERE
+      </div>
+    </qrcode-drop-zone>
+  </div>
+</template>
+
+<script>
+import { QrcodeDropZone } from '../../../../src'
+
+export default {
+
+  components: { QrcodeDropZone },
+
+  data () {
+    return {
+      result: null,
+      error: null,
+      dragover: false
+    }
+  },
+
+  methods: {
+    async onDetect (promise) {
+      try {
+        const { content } = await promise
+
+        this.result = content
+        this.error = null
+      } catch (error) {
+        if (error.name === 'DropImageFetchError') {
+          this.error = 'Sorry, you can\'t load cross-origin images :/'
+        } else if (error.name === 'DropImageDecodeError') {
+          this.error = 'Ok, that\'s not an image. That can\'t be decoded.'
+        } else {
+          this.error = 'Ups, what kind of error is this?! ' + error.message
+        }
+      }
+    },
+
+    logErrors (promise) {
+      promise.catch(console.error)
+    },
+
+    onDragOver (isDraggingOver) {
+      this.dragover = isDraggingOver
+    }
+  }
+}
+</script>
+
+<style>
+.drop-area {
+  height: 300px;
+  color: #fff;
+  text-align: center;
+  font-weight: bold;
+  padding: 10px;
+
+  background-color: rgba(0,0,0,.5);
+}
+
+.dragover {
+  background-color: rgba(0,0,0,.8);
+}
+
+.drop-error {
+  color: red;
+  font-weight: bold;
+}
+</style>