Последняя версия с сервера прошлого разработчика

resources/js/Shared/Overlay/ModalShare.vue

@@ -0,0 +1,175 @@
+<template>
+  <TransitionRoot as="template" :show="open">
+    <Dialog as="div" static
+            class="fixed z-[1000] inset-0 overflow-y-auto" :open="open"
+            @close="staticCloseModal"
+    >
+      <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+        <TransitionChild as="template" enter="ease-out duration-300"
+                         enter-from="opacity-0" enter-to="opacity-100"
+                         leave="ease-in duration-200" leave-from="opacity-100"
+                         leave-to="opacity-0"
+        >
+          <DialogOverlay class="fixed inset-0 bg-indigo-200 bg-opacity-75 transition-opacity" />
+        </TransitionChild>
+
+        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+        <TransitionChild as="template" enter="ease-out duration-300"
+                         enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enter-to="opacity-100 translate-y-0 sm:scale-100"
+                         leave="ease-in duration-200" leave-from="opacity-100 translate-y-0 sm:scale-100"
+                         leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        >
+          <div class="inline-block align-bottom bg-indigo-300 rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
+            <div class="">
+              <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                <DialogTitle as="h3" class="text-lg leading-6 font-medium text-gray-light">
+                  Поделиться
+                </DialogTitle>
+                <div class="my-4">
+                  <input :value="route(`${entity.type}.show`, entity.slug)" class="js-input-text-share w-full focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light"
+                         type="text" readonly
+                  >
+                </div>
+                <div class="flex items-center justify-end -mx-1">
+                  <div class="transition-shadow shadow-none hover:shadow-classic2 p-2 bg-[#4C75A3] text-white mx-1 cursor-pointer" title="Скопировать текст"
+                       @click="copyText"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24"
+                         height="24" viewBox="0 0 24 24"
+                         fill="none" stroke="currentColor"
+                         stroke-width="2" stroke-linecap="round"
+                         stroke-linejoin="round" class="feather feather-copy"
+                    ><rect x="9" y="9"
+                           width="13" height="13"
+                           rx="2" ry="2"
+                    ></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+                  </div>
+
+                  <div class="transition-shadow shadow-none hover:shadow-classic2 p-2 bg-[#4C75A3] text-white mx-1 cursor-pointer" @click="shareVK">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24"
+                         height="24" viewBox="0 0 576 512"
+                    ><path fill="currentColor" d="M545 117.7c3.7-12.5 0-21.7-17.8-21.7h-58.9c-15 0-21.9 7.9-25.6 16.7 0 0-30 73.1-72.4 120.5-13.7 13.7-20 18.1-27.5 18.1-3.7 0-9.4-4.4-9.4-16.9V117.7c0-15-4.2-21.7-16.6-21.7h-92.6c-9.4 0-15 7-15 13.5 0 14.2 21.2 17.5 23.4 57.5v86.8c0 19-3.4 22.5-10.9 22.5-20 0-68.6-73.4-97.4-157.4-5.8-16.3-11.5-22.9-26.6-22.9H38.8c-16.8 0-20.2 7.9-20.2 16.7 0 15.6 20 93.1 93.1 195.5C160.4 378.1 229 416 291.4 416c37.5 0 42.1-8.4 42.1-22.9 0-66.8-3.4-73.1 15.4-73.1 8.7 0 23.7 4.4 58.7 38.1 40 40 46.6 57.9 69 57.9h58.9c16.8 0 25.3-8.4 20.4-25-11.2-34.9-86.9-106.7-90.3-111.5-8.7-11.2-6.2-16.2 0-26.2 .1-.1 72-101.3 79.4-135.6z"></path></svg>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="mt-5 sm:mt-4 sm:flex">
+              <button type="button"
+                      class="mx-3 my-1 transition shadow-none hover:shadow-classic inline-flex items-center px-8 py-3 justify-center  text-base rounded-md text-white bg-indigo-300 focus:outline-none"
+                      @click="staticCloseModal"
+              >
+                Отменить
+              </button>
+            </div>
+          </div>
+        </TransitionChild>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script>
+import {
+    Dialog,
+    DialogOverlay,
+    DialogTitle,
+    TransitionChild,
+    TransitionRoot,
+} from '@headlessui/vue'
+
+export default {
+    components: {
+        Dialog,
+        DialogOverlay,
+        DialogTitle,
+        TransitionChild,
+        TransitionRoot,
+    },
+    //   emits: {
+    //     close: null,
+    //   },
+    props: {
+        entity: Object,
+    },
+
+    data() {
+        return {
+            open: false,
+        }
+    },
+
+    methods: {
+        openModal() {
+            this.open = true
+        },
+        staticCloseModal() {
+            this.open = false
+        },
+        copyText(){
+            const text = document.querySelector('.js-input-text-share')
+            text.select()
+            text.setSelectionRange(0, 99999)
+            navigator.clipboard.writeText(text.value)
+        },
+        shareTwitter() {
+            const urlInner = route(`${this.entity.type}.show`, this.entity.slug)
+            const body = this.entity.body ?? ''
+            const url = `https://twitter.com/intent/tweet?text=${body}&url=${urlInner}`
+            this.openWindow(url)
+        },
+
+        shareFB() {
+            const urlInner = route(`${this.entity.type}.show`, this.entity.slug)
+            const body = this.entity.body ?? ''
+            const url = `https://www.facebook.com/sharer.php?u=${urlInner}&t=${body}`
+            this.openWindow(url)
+        },
+
+        shareVK() {
+            const urlInner = route(`${this.entity.type}.show`, this.entity.slug)
+            const title = this.entity.title ?? ''
+            const url = `https://vk.com/share.php?url=${urlInner}&title=${title}`
+            this.openWindow(url)
+        },
+
+        openWindow(url) {
+            this.popupCenter({url, title: 'share', w: 600, h: 400})
+        },
+
+        popupCenter({ url, title, w, h }) {
+            const dualScreenLeft =
+        window.screenLeft !== undefined ? window.screenLeft : window.screenX
+            const dualScreenTop =
+        window.screenTop !== undefined ? window.screenTop : window.screenY
+
+            const width = window.innerWidth
+                ? window.innerWidth
+                : document.documentElement.clientWidth
+                    ? document.documentElement.clientWidth
+                    : screen.width
+            const height = window.innerHeight
+                ? window.innerHeight
+                : document.documentElement.clientHeight
+                    ? document.documentElement.clientHeight
+                    : screen.height
+
+            const systemZoom = width / window.screen.availWidth
+            const left = (width - w) / 2 / systemZoom + dualScreenLeft
+            const top = (height - h) / 2 / systemZoom + dualScreenTop
+            const newWindow = window.open(
+                url,
+                title,
+                `
+      scrollbars=yes,
+      width=${w / systemZoom},
+      height=${h / systemZoom},
+      top=${top},
+      left=${left}
+      `
+            )
+
+            if (window.focus) newWindow.focus()
+        },
+    },
+}
+</script>