1<!--**
2 * 2007-2020 PrestaShop and Contributors
3 *
4 * NOTICE OF LICENSE
5 *
6 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
7 * that is bundled with this package in the file LICENSE.txt.
8 * It is also available through the world-wide-web at this URL:
9 * https://opensource.org/licenses/AFL-3.0
10 * If you did not receive a copy of the license and are unable to
11 * obtain it through the world-wide-web, please send an email
12 * to license@prestashop.com so we can send you a copy immediately.
13 *
14 * @author    PrestaShop SA <contact@prestashop.com>
15 * @copyright 2007-2020 PrestaShop SA and Contributors
16 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
17 * International Registered Trademark & Property of PrestaShop SA
18 *-->
19<script>
20  import EventBus from '@components/EventBus';
21
22  /**
23   * This component display a modal where you can create a wishlist
24   */
25  export default {
26    name: 'Share',
27    props: {
28      url: {
29        type: String,
30        required: true,
31        default: '#',
32      },
33      title: {
34        type: String,
35        required: true,
36        default: 'Share wishlist',
37      },
38      label: {
39        type: String,
40        required: true,
41        default: 'Share link',
42      },
43      cancelText: {
44        type: String,
45        required: true,
46        default: 'Cancel',
47      },
48      copyText: {
49        type: String,
50        required: true,
51        default: 'Copy text',
52      },
53      copiedText: {
54        type: String,
55        required: true,
56        default: 'Copied',
57      },
58    },
59    data() {
60      return {
61        value: '',
62        isHidden: true,
63        actionText: '',
64      };
65    },
66    methods: {
67      /**
68       * Toggle the modal
69       */
70      toggleModal() {
71        this.isHidden = !this.isHidden;
72      },
73      /**
74       * Copy the link in the input value
75       */
76      copyLink() {
77        const shareInput = document.querySelector(
78          '.wishlist-share .form-control',
79        );
80
81        shareInput.select();
82        shareInput.setSelectionRange(0, 99999);
83
84        document.execCommand('copy');
85
86        this.actionText = this.copiedText;
87
88        this.toggleModal();
89
90        EventBus.$emit('showToast', {
91          detail: {
92            type: 'success',
93            message: 'copyText',
94          },
95        });
96      },
97    },
98    mounted() {
99      this.actionText = this.copyText;
100
101      /**
102       * Register to the event showCreateWishlist so others components can toggle this modal
103       *
104       * @param {String} 'showCreateWishlist'
105       */
106      EventBus.$on('showShareWishlist', async (event) => {
107        this.actionText = this.copyText;
108        this.value = event.detail.shareUrl;
109        this.toggleModal();
110      });
111    },
112  };
113</script>
114
115<style lang="scss" type="text/scss" scoped>
116  .wishlist {
117    &-create {
118      .wishlist-modal {
119        display: block;
120        opacity: 0;
121        pointer-events: none;
122        z-index: 0;
123
124        &.show {
125          opacity: 1;
126          pointer-events: all;
127          z-index: 1053;
128        }
129      }
130    }
131  }
132</style>
133