Merge pull request #38 from simplygoodwork/craft-3-develop

Fix #31 and add nicety to improve editing experience
simplygoodwork · Aug 31, 2022 · 2cd523a · 2cd523a
2 parents db69221 + a4b82e3
commit 2cd523a
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Donkeytail Changelog
 
+## 2.0.7 - 2022-08-30
+
+#### Added
+- Add feature that shows pin in canvas when related element is selected (control panel)
+
+#### Fixed
+- Fix bug that could sometimes cause canvas image to not load ([#31](https://github.com/simplygoodwork/craft-donkeytail/issues/31))
+
 ## 2.0.6 - 2021-12-09
 
 ### Added

diff --git a/composer.json b/composer.json
@@ -2,7 +2,7 @@
   "name": "simplygoodwork/craft-donkeytail",
   "description": "Fieldtype that allows you to quickly and easily content manage points on images. You can use it for locations on a faux map, showcasing multiple products within an image, or even pinning the tail on a donkey.",
   "type": "craft-plugin",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "keywords": [
     "craft",
     "cms",

diff --git a/src/assetbundles/donkeytail/dist/js/app.js b/src/assetbundles/donkeytail/dist/js/app.js
diff --git a/src/assetbundles/donkeytail/src/components/DonkeytailCanvas.vue b/src/assetbundles/donkeytail/src/components/DonkeytailCanvas.vue
@@ -36,6 +36,11 @@
         :name="`${name}[meta][${pin.id}][y]`"
         :value="pin.y"
       />
+      <input
+        type="hidden"
+        :name="`${name}[meta][${pin.id}][showTippy]`"
+        :value="pin.showTippy"
+      />
     </div>
   </div>
 </template>
@@ -54,6 +59,9 @@ export default {
     value: {
       type: Number,
     },
+    image: {
+      type: String,
+    },
     meta: {
       type: [Object, Array],
     },
@@ -71,7 +79,7 @@ export default {
       window
         .axios({
           method: 'post',
-          url: '/actions/donkeytail/default/get-asset',
+          url: window.Craft.getActionUrl('donkeytail/default/get-asset'),
           data: {
             assetId: assetId,
             requestId: 1,
@@ -108,10 +116,15 @@ export default {
   },
   mounted() {
     const self = this
-    // If we already have a canvas asset ID, download it and plot it now
-    // Perf TODO: Do this in Twig
+
     if (self.value) {
-      self.getCanvasUrl(self.value)
+
+      if(self.image){
+        self.canvasUrl = self.image
+	      self.showPins = true
+      }else {
+        self.getCanvasUrl(self.value)
+      }
 
       // If meta prop is passed, then transform data & preset pins
       if (self.meta && Object.keys(self.meta).length) {
@@ -120,6 +133,7 @@ export default {
           self.meta[i].id = Number(self.meta[i].id)
           self.meta[i].x = Number(self.meta[i].x)
           self.meta[i].y = Number(self.meta[i].y)
+          self.meta[i].showTippy = false
           initialPins.push(self.meta[i])
         }
         self.pins = initialPins
@@ -130,7 +144,6 @@ export default {
       $(`#${self.namespacedId}-canvasId`)
         .data('elementSelect')
         .on('selectElements', function(e) {
-          console.log(e)
           self.getCanvasUrl(e.elements[0].id)
         })
 
@@ -164,10 +177,49 @@ export default {
               label: element.label,
               x: 50,
               y: 50,
+              showTippy: false,
             })
           })
         })
 
+      // Listen for ac
+      const pinInputElementButtons = Array.from(
+        $(`#${self.namespacedId}-pins .element`),
+      )
+      const pinElementObserverOptions = {
+        attributes: true,
+      }
+
+      const pinElementObserverCallback = (mutationList, observer) => {
+        mutationList.forEach(mutation => {
+          if (
+            mutation.type === 'attributes' &&
+            mutation.attributeName === 'class'
+          ) {
+            const el = mutation.target
+            if (el.classList.contains('sel')) {
+              const pinId = el.dataset.id
+              let pinToUpdate = self.pins.findIndex(
+                pin => pin.id === parseInt(pinId),
+              )
+              Object.assign(self.pins[pinToUpdate], { showTippy: true })
+            } else {
+              const pinId = el.dataset.id
+              let pinToUpdate = self.pins.findIndex(
+                pin => pin.id === parseInt(pinId),
+              )
+              Object.assign(self.pins[pinToUpdate], { showTippy: false })
+            }
+          }
+        })
+      }
+      const pinElementObserver = new MutationObserver(
+        pinElementObserverCallback,
+      )
+      pinInputElementButtons.forEach(button => {
+        pinElementObserver.observe(button, pinElementObserverOptions)
+      })
+
       // On Pin Removal
       $(`#${self.namespacedId}-pins`)
         .data('elementSelect')

diff --git a/src/assetbundles/donkeytail/src/components/DonkeytailPin.vue b/src/assetbundles/donkeytail/src/components/DonkeytailPin.vue
@@ -20,12 +20,26 @@ export default {
     return {
       draggie: null,
       canvas: null,
+      tippy: null,
+      showTippy: false,
       position: {
         x: 0,
         y: 0,
       },
     }
   },
+  watch: {
+    pin: {
+      deep: true,
+      handler(newPinVal, oldPinVal) {
+        if (newPinVal.showTippy) {
+          this.tippy.show()
+        } else {
+          this.tippy.hide()
+        }
+      },
+    },
+  },
   methods: {
     setPosition() {
       const canvasWidth = this.canvas.getBoundingClientRect().width
@@ -42,11 +56,12 @@ export default {
 
     this.position.x = this.pin.x
     this.position.y = this.pin.y
+    this.showTippy = this.pin.showTippy
 
     this.draggie = new Draggabilly(this.$refs.pin, {
       containment: self.canvas,
     })
-    tippy(self.$refs.pin, {
+    this.tippy = tippy(self.$refs.pin, {
       content: self.pin.label,
       moveTransition: 'transform 0.35s ease-in-out',
     })