{"version":3,"file":"social-CsWlQiPq.js","sources":["../../../resources/js/vue/social/components/Modal.vue","../../../resources/js/vue/social/components/Social.vue","../../../resources/js/vue/social/social.js"],"sourcesContent":["<template>\n  <Transition name=\"fade\">\n    <div\n      v-if=\"showing\"\n      class=\"fixed inset-0 flex items-center justify-center w-full h-screen bg-smoke-800\"\n      :class=\"options.background\"\n      @click.self=\"close\"\n    >\n      <div\n        class=\"relative flex w-full max-w-sm max-h-screen p-8 px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl dark:bg-gray-800 sm:my-8 sm:align-middle sm:w-full sm:p-6\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"modal-headline\"\n        :class=\"options.modal\"\n      >\n        <div class=\"w-full max-h-screenoverflow-auto\">\n          <slot />\n          <div class=\"flex items-center justify-between w-full\">\n            <slot name=\"footer\" />\n            <button\n              type=\"button\"\n              class=\"inline-flex justify-center text-white bg-black border border-transparent btn dark:bg-gray-600 hover:bg-gray-700 focus:outline-none\"\n              @click.prevent=\"close\"\n            >\n              Lukk\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<script>\nexport default {\n  props: {\n    showing: {\n      required: true,\n      type: Boolean,\n    },\n    options: {\n      type: Object,\n      required: false,\n      default: () => {},\n    },\n  },\n  watch: {\n    showing(value) {\n      if (value) {\n        return document.querySelector(\"body\").classList.add(\"overflow-hidden\");\n      }\n      document.querySelector(\"body\").classList.remove(\"overflow-hidden\");\n    },\n  },\n  mounted: function () {\n    document.addEventListener(\"keydown\", (e) => {\n      if (e.keyCode === 27) {\n        this.close();\n      }\n    });\n  },\n  methods: {\n    close() {\n      this.$emit(\"close\");\n    },\n  },\n};\n</script>\n\n<style>\n.fade-enter-active,\n.fade-leave-active {\n  transition: all 0.6s;\n}\n.fade-enter,\n.fade-leave-to {\n  opacity: 0;\n}\n</style>\n","<template>\n    <section>\n        <!-- <div\n      v-if=\"isMobile\"\n      class=\"flex items-center w-full mt-4 border-t dark:border-gray-700 dark:text-gray-500 dark:hover:text-gray-300\"\n    >\n      <button\n        class=\"block p-3 text-gray-700 border-r dark:border-gray-700 dark:text-gray-500 dark:hover:text-gray-300 dark:hover:bg-gray-800 hover:text-gray-800 hover:bg-gray-50\"\n        @click=\"share()\"\n      >\n        Del artikkel\n      </button>\n    </div> -->\n        <div class=\"flex items-center w-full mt-4 border-t dark:border-gray-700 dark:text-gray-500 dark:hover:text-gray-300\">\n            <div class=\"flex\">\n                <!-- <button\n          class=\"block p-3 text-gray-700 border-r dark:border-gray-700 dark:text-gray-500 dark:hover:text-gray-300 dark:hover:bg-gray-800 hover:text-gray-800 hover:bg-gray-50\"\n          @click=\"share()\"\n        >\n          Del artikkel\n        </button> -->\n                <ShareNetwork\n                    v-for=\"network in networks\"\n                    :key=\"network.network\"\n                    :network=\"network.network\"\n                    :style=\"{backgroundColor: network.color}\"\n                    :url=\"sharing.url\"\n                    :title=\"sharing.title\"\n                    :description=\"sharing.description\"\n                    :quote=\"sharing.quote\"\n                    :hashtags=\"sharing.hashtags\"\n                    :twitter-user=\"sharing.twitterUser\"\n                    class=\"block w-10 h-10 p-3 text-gray-700 border-r cursor-pointer dark:border-gray-700 dark:text-gray-300 dark:hover:text-gray-200 dark:hover:bg-gray-800 hover:text-gray-800 hover:bg-gray-100\">\n                    <svg v-if=\"network.network == 'linkedin'\" role=\"img\" fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <title>LinkedIn icon</title>\n                        <path\n                            d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\" />\n                    </svg>\n                    <svg v-if=\"network.network == 'twitter'\" role=\"img\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                        <title>Twitter icon</title>\n                        <path\n                            d=\"M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z\" />\n                    </svg>\n                    <svg v-if=\"network.network == 'facebook'\" role=\"img\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                        <title>Facebook icon</title>\n                        <path\n                            d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\" />\n                    </svg>\n                </ShareNetwork>\n            </div>\n            <button\n                v-if=\"authenticated == 'y' && !isOpen\"\n                class=\"flex items-center h-10 pr-3 text-gray-700 border-r cursor-pointer bg-indigo-50 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:text-gray-200 dark:hover:bg-gray-700 hover:text-gray-800\"\n                @click=\"createShareUrl\">\n                <div class=\"block w-10 h-10 p-3\">\n                    <svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        fill=\"none\"\n                        viewBox=\"0 0 24 24\"\n                        stroke=\"currentColor\"\n                        class=\"animate-spin\"\n                        :class=\"[loading ? 'flex' : 'hidden']\">\n                        <path\n                            stroke-linecap=\"round\"\n                            stroke-linejoin=\"round\"\n                            stroke-width=\"2\"\n                            d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\" />\n                    </svg>\n                    <svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        fill=\"none\"\n                        viewBox=\"0 0 24 24\"\n                        stroke=\"currentColor\"\n                        :class=\"[loading ? 'hidden' : 'flex']\">\n                        <path\n                            stroke-linecap=\"round\"\n                            stroke-linejoin=\"round\"\n                            stroke-width=\"2\"\n                            d=\"M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1\" />\n                    </svg>\n                </div>\n                <span class=\"text-sm font-semibold\">Åpne i 24 timer</span>\n            </button>\n        </div>\n        <modal :showing=\"showModal\" :options=\"modalOptions\" @close=\"showModal = false\">\n            <label for=\"email\" class=\"flex flex-col\">\n                <div class=\"flex flex-col mb-4\">\n                    <span class=\"mb-2 text-xl font-semibold prose dark:prose-invert\">Lag åpen artikkel</span>\n                    <div class=\"text-sm prose dark:prose-invert\">\n                        <p>Klikk på linken og kopier adressen til den åpne artikkelen.</p>\n                        <p>\n                            <strong>Den delte artikkelen er gyldig i 24 timer.</strong>\n                        </p>\n                    </div>\n                </div>\n\n                <input\n                    ref=\"copyText\"\n                    v-model=\"shareUrl\"\n                    type=\"text\"\n                    readonly\n                    :class=\"{'bg-purple-100': copied}\"\n                    class=\"block w-full p-2 px-2 mt-1 mb-4 text-sm text-gray-900 border border-gray-200 rounded cursor-pointer form-input\"\n                    @click=\"copyToClip\" />\n            </label>\n\n            <template #footer>\n                <div class=\"flex items-center\">\n                    <span v-if=\"copied\" class=\"flex items-center justify-center text-sm text-black dark:text-white\">\n                        <svg\n                            class=\"h-6 mr-2 text-purple-600\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            fill=\"none\"\n                            viewBox=\"0 0 24 24\"\n                            stroke=\"currentColor\">\n                            <path\n                                stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\"\n                                stroke-width=\"2\"\n                                d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\" />\n                        </svg>\n                        Adressen er kopiert. Du kan lukke vinduet!</span\n                    >\n                </div>\n            </template>\n        </modal>\n    </section>\n</template>\n\n<script>\nimport Modal from './Modal'\nimport axios from '../../../plugins/axios'\n\nexport default {\n    components: {\n        Modal,\n    },\n    props: {\n        entry: {\n            type: Number,\n            required: true,\n            default: null,\n        },\n        url: {\n            type: String,\n            required: true,\n            default: '',\n        },\n        title: {\n            type: String,\n            required: true,\n            default: '',\n        },\n        text: {\n            type: String,\n            required: false,\n            default: '',\n        },\n        authenticated: {\n            type: String,\n            required: true,\n            default: 'n',\n        },\n        isOpen: {\n            type: Boolean,\n            required: false,\n            default: false,\n        },\n    },\n\n    data() {\n        return {\n            token: window.csrfTokenValue,\n            showModal: false,\n            modalOptions: {\n                modal: 'max-w-xl mx-4',\n            },\n            loading: false,\n            shareUrl: '',\n            copied: false,\n            sharing: {\n                url: this.url,\n                title: this.title,\n                description: this.text,\n            },\n            networks: [\n                {\n                    network: 'facebook',\n                    name: 'Facebook',\n                    icon: 'fab fah fa-lg fa-facebook-f',\n                    color: 'transparent',\n                },\n                {\n                    network: 'linkedin',\n                    name: 'LinkedIn',\n                    icon: 'fab fah fa-lg fa-linkedin',\n                    color: 'transparent',\n                },\n                {\n                    network: 'twitter',\n                    name: 'Twitter',\n                    icon: 'fab fah fa-lg fa-twitter',\n                    color: 'transparent',\n                },\n            ],\n        }\n    },\n    computed: {\n        isMobile() {\n            // return true\n            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {\n                return true\n            }\n\n            return false\n        },\n    },\n\n    methods: {\n        copyToClip() {\n            this.$refs['copyText'].focus()\n            this.$refs['copyText'].select()\n\n            try {\n                var successful = document.execCommand('copy')\n                this.copied = true\n                setTimeout(() => {\n                    this.copied = false\n                }, 10000)\n            } catch (err) {\n                this.copied = false\n            }\n        },\n        async createShareUrl(payload) {\n            this.loading = true\n            await axios\n                .postForm('/actions/site/share/create', {\n                    CRAFT_CSRF_TOKEN: this.token,\n                    entryId: this.entry,\n                })\n                .then(({data}) => {\n                    this.showModal = true\n                    this.shareUrl = data.url\n                })\n                .catch(() => {})\n                .finally(() => {\n                    this.loading = false\n                })\n        },\n        share() {\n            if (navigator.share === undefined) {\n                console.log('Error: Unsupported feature: navigator.share()')\n                return\n            }\n\n            const title = this.title\n            const text = this.preamble\n            let url = document.location.href\n            const canonicalElement = document.querySelector('link[rel=canonical]')\n            if (canonicalElement !== null) {\n                url = canonicalElement.href\n            }\n\n            navigator\n                .share({title, text, url})\n                .then(() => {})\n                .catch((error) => {\n                    window.location.reload(true)\n                })\n        },\n    },\n}\n</script>\n","\nimport Vue from '../../plugins/vue';\nimport Social from './components/Social';\n\nconst el = document.getElementById('social');\nif (el !== null) {\n\tnew Vue({\n\t\tname: 'Social',\n\t\trender: h => h(Social, {\n\t\t\tprops: {\n\t\t\t\ttitle: el.dataset.title ?? '',\n\t\t\t\tentry: Number.parseInt(el.dataset.entry ?? 0),\n\t\t\t\ttext: el.dataset.text ?? null,\n\t\t\t\turl: el.dataset.url ?? null,\n\t\t\t\tauthenticated: el.dataset.authenticated ?? 'n',\n\t\t\t\tisOpen: el.dataset.isOpen == \"true\"\n\t\t\t}\n\t\t})\n\t}).$mount(el);\n}\n"],"names":["_sfc_main","value","e","Modal","successful","payload","axios","data","title","text","url","canonicalElement","error","el","Vue","h","Social"],"mappings":"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"}