Attempts to update

owlwatch · Dec 13, 2021 · 9a36b66 · 9a36b66
1 parent 1acc83d
commit 9a36b66
Show file tree

Hide file tree

Showing 12 changed files with 425 additions and 417 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -2,6 +2,7 @@
 .app
   page-intro
   image-search(
+    :isTouch="isTouch"
     :items="items"
   )
   page-footer
@@ -14,6 +15,11 @@ import PageFooter from './components/PageFooter.vue'
 
 export default {
   name: 'App',
+
+  data(){
+    const isTouch = window.matchMedia("(pointer: coarse)").matches;
+    return {isTouch};
+  },
   
   props: {
     items: Array,

diff --git a/src/components/ImageSearch.vue b/src/components/ImageSearch.vue
@@ -35,68 +35,33 @@ main.image-search
 
         vue-photo-zoom-pro(
             :disabled="false"
-            :high-url="imageFile"
             type="circle"
+            :outZoomer="isTouch"
             :scale="1.5"
             ref="photoZoom"
             :activeItem="activeItem"
             :isSelected="isSelected"
             @found="found"
         )
-            svg(
-                viewBox="0 0 1567 2475"
-                xmlns="http://www.w3.org/2000/svg"
-                ref="svg"
-            )
-                symbol(
-                    id="check"
-                    viewBox="0 0 24 24"
-                )
-                    path(
-                        d="M0 0h24v24H0V0z" fill="none"
-                    )
-                    path(
-                        d="M12 4c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8zm-2 13l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"
-                    )
-                    path(
-                        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z" fill="#ffffff"
-                    )
-
-                image(
-                    :href="imageFile"
-                    width="1567"
-                    height="2475"
-                )
-
-                template(
-                    v-for="item in items"
-                )
-                    polygon(
-                        ref="polygons"
-                        v-bind="polygonAttrs(item)"
-                        @mouseenter="highlight(item);"
-                        @mouseleave="unhighlight(item)"
-                    )
 
-                    use.checkmark(
-                        v-if="item.found"
-                        v-bind="checkboxAttrs(item)"
-                        href="#check"
-                        fill="#629f37"
-                        width="40"
-                        height="40"
-                        transform="translate(-20 -50)"
-                    )
+            image-svg.preview(
+                :items="items"
+                :imageFile="imageFile"
+                @enter="enter"
+                @leave="leave"
+            )
 </template>
 
 <script>
 import confetti from 'canvas-confetti';
 import VuePhotoZoomPro from './VuePhotoZoomPro/VuePhotoZoomPro.vue';
+import ImageSvg from './ImageSvg.vue';
 const dingUrl = require("../assets/335908__littlerainyseasons__correct.mp3");
 const finishUrl = require("../assets/171671__leszek-szary__success-1.wav");
 export default {
     components: {
-        VuePhotoZoomPro
+        VuePhotoZoomPro,
+        ImageSvg
     },
     data(){
         const ding = new Audio(dingUrl);
@@ -121,7 +86,11 @@ export default {
         }
     },
     props: {
-        items: Array
+        items: Array,
+        isTouch: {
+            type: Boolean,
+            default: false
+        }
     },
     computed: {
 
@@ -163,71 +132,16 @@ export default {
         }
     },
     methods: {
-        polygonAttrs(item){
-            
-            const div = document.createElement('div');
-            div.innerHTML = item.image_map;
-            const area = div.querySelector('area');
-            if( !area || !area.hasAttributes() ){
-                return {};
-            }
-            const points = area.getAttribute('coords');
-            return {points};
-        },
-        areaAttrs(item){
-            const div = document.createElement('div');
-            div.innerHTML = item.image_map;
-            const area = div.querySelector('area');
-            if( !area || !area.hasAttributes() ){
-                return {};
-            }
-            const a = area.attributes;
-            const attrs = {};
-            for(let i=0; i<a.length; i++){
-                attrs[a.name] = a.value;
-            }
-            return attrs;
-        },
-        checkboxAttrs(item){
-            if( !item.checkboxPosition ){
-                const coords = this.getCoords(item);
-                let xys = coords.split(',');
-                let xmin, xmax, ymin, ymax;
-                xys.forEach( (v,i) => {
-                    if( i%2 == 0 ){
-                        xmin = xmin ? Math.min(xmin, v) : v;
-                        xmax = xmax ? Math.max(xmax, v) : v;
-                    }
-                    else{
-                        ymin = ymin ? Math.min(ymin, v) : v;
-                        ymax = ymax ? Math.max(ymax, v) : v;
-                    }
-                });
-                let x = xmin + (xmax-xmin) / 2;
-                let y = ymin + (ymax-ymin) / 2;
-                return {x,y};
-            }
-        },
-        getCoords(item){
-            const div = document.createElement('div');
-            div.innerHTML = item.image_map;
-            const area = div.querySelector('area');
-            if( !area || !area.hasAttributes() ){
-                return {};
-            }
-            const coordinates = area.getAttribute('coords');
-            return coordinates;
-        },
         select(item){
             item.found = true;
         },
         isSelected(item){
             return this.selected.includes(item);
         },
-        highlight(item){
+        enter(item){
             this.activeItem = item;
         },
-        unhighlight(){
+        leave(){
             this.activeItem = null;
         },
         found(item){
@@ -339,22 +253,13 @@ export default {
         display: block;
         z-index: 1;
     }
-    svg {
+    .preview {
         position: relative;
         max-width: 100%;
         width: 100%;
         height: auto;
         display: block;
         z-index: 1;
-        polygon {
-            // fill: rgba(#f00, 0.4);
-            fill: transparent;
-            cursor: pointer;
-            // stroke-width: 0.15%;
-        }
-        .checkmark {
-            filter: drop-shadow(0 0 10px #629f37);
-        }
     }
 }
 .image-items {

diff --git a/src/components/ImageSvg.vue b/src/components/ImageSvg.vue
@@ -0,0 +1,118 @@
+<template lang="pug">
+svg(
+    viewBox="0 0 1567 2475"
+    xmlns="http://www.w3.org/2000/svg"
+    ref="svg"
+)
+    symbol(
+        id="check"
+        viewBox="0 0 24 24"
+    )
+        path(
+            d="M0 0h24v24H0V0z" fill="none"
+        )
+        path(
+            d="M12 4c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8zm-2 13l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"
+        )
+        path(
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z" fill="#ffffff"
+        )
+
+    image(
+        :href="imageFile"
+        width="1567"
+        height="2475"
+    )
+
+    template(
+        v-for="item in items"
+    )
+        polygon(
+            ref="polygons"
+            v-bind="polygonAttrs(item)"
+            @mouseenter="$emit('enter', item)"
+            @mouseleave="$emit('leave', item)"
+        )
+
+        use.checkmark(
+            v-if="item.found"
+            v-bind="checkboxAttrs(item)"
+            href="#check"
+            fill="#629f37"
+            width="40"
+            height="40"
+            transform="translate(-20 -50)"
+        )
+</template>
+
+<script>
+export default {
+    props: {
+        imageFile: {
+            type: String,
+            default: ''
+        },
+        items: {
+            type: Array,
+            default: ()=>[]
+        }
+    },
+    methods: {
+        polygonAttrs(item){
+            
+            const div = document.createElement('div');
+            div.innerHTML = item.image_map;
+            const area = div.querySelector('area');
+            if( !area || !area.hasAttributes() ){
+                return {};
+            }
+            const points = area.getAttribute('coords');
+            return {points};
+        },
+
+        checkboxAttrs(item){
+            if( !item.checkboxPosition ){
+                const coords = this.getCoords(item);
+                let xys = coords.split(',');
+                let xmin, xmax, ymin, ymax;
+                xys.forEach( (v,i) => {
+                    if( i%2 == 0 ){
+                        xmin = xmin ? Math.min(xmin, v) : v;
+                        xmax = xmax ? Math.max(xmax, v) : v;
+                    }
+                    else{
+                        ymin = ymin ? Math.min(ymin, v) : v;
+                        ymax = ymax ? Math.max(ymax, v) : v;
+                    }
+                });
+                let x = xmin + (xmax-xmin) / 2;
+                let y = ymin + (ymax-ymin) / 2;
+                return {x,y};
+            }
+        },
+        getCoords(item){
+            const div = document.createElement('div');
+            div.innerHTML = item.image_map;
+            const area = div.querySelector('area');
+            if( !area || !area.hasAttributes() ){
+                return {};
+            }
+            const coordinates = area.getAttribute('coords');
+            return coordinates;
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+polygon {
+    // fill: rgba(#f00, 0.4);
+    fill: transparent;
+    cursor: pointer;
+    // stroke-width: 0.15%;
+}
+.checkmark {
+    filter: drop-shadow(0 0 10px #629f37);
+}
+
+</style>