templates/ProfileList/_favorite-button.partial.script.js line 1

Open in your IDE?
  1. customElements.define('favorite-button', class extends HTMLElement {
  2.     static observedAttributes = ['text', 'liked'];
  4.     constructor () {
  5.         super();
  7.         this.apiCheck = this.getAttribute('api-check');
  8.         if (!this.apiCheck) return;
  10.         this.apiLike = this.getAttribute('api-like');
  11.         this.apiUnlike = this.getAttribute('api-unlike');
  12.         this.isLiked = false;
  13.         this.tippyData = {
  14.             'false': 'Добавить в избранное',
  15.             'true': 'Удалить из избранного' 
  16.         }
  17.         this.alternativeDesign = this.hasAttribute('alternative');
  19.         this.alternativeSvg = {
  20.             like: '<path d="m20 35.58-2.42-2.16c-2.8-2.53-5.12-4.71-6.95-6.55a46.04 46.04 0 0 1-4.38-4.93 15.65 15.65 0 0 1-2.27-4.02 11.25 11.25 0 0 1-.65-3.75c0-2.61.88-4.8 2.63-6.54A8.88 8.88 0 0 1 12.5 5 9.88 9.88 0 0 1 20 8.5 9.88 9.88 0 0 1 27.5 5c2.61 0 4.8.88 6.54 2.63a8.88 8.88 0 0 1 2.63 6.54c0 1.27-.22 2.52-.65 3.75a15.63 15.63 0 0 1-2.27 4.02 46.03 46.03 0 0 1-4.38 4.93 188.43 188.43 0 0 1-6.95 6.55L20 35.58Z"/>',
  21.             unlike: '<path d="m20 35.58-2.42-2.16a188.5 188.5 0 0 1-6.95-6.55 46.04 46.04 0 0 1-4.38-4.93 15.65 15.65 0 0 1-2.27-4.02 11.25 11.25 0 0 1-.65-3.75c0-2.61.88-4.8 2.63-6.54A8.88 8.88 0 0 1 12.5 5 9.88 9.88 0 0 1 20 8.5 9.88 9.88 0 0 1 27.5 5c2.61 0 4.8.88 6.54 2.63a8.88 8.88 0 0 1 2.63 6.54c0 1.27-.22 2.52-.65 3.75a15.63 15.63 0 0 1-2.27 4.02 46.05 46.05 0 0 1-4.38 4.93 188.52 188.52 0 0 1-6.95 6.55L20 35.58Zm0-4.5c2.67-2.39 4.86-4.43 6.58-6.14 1.73-1.7 3.09-3.2 4.09-4.46 1-1.26 1.7-2.39 2.08-3.38.39-.98.58-1.96.58-2.93a5.65 5.65 0 0 0-5.83-5.83c-1.3 0-2.51.36-3.63 1.1a5.67 5.67 0 0 0-2.29 2.81h-3.16a5.67 5.67 0 0 0-2.3-2.81 6.45 6.45 0 0 0-3.62-1.1 5.65 5.65 0 0 0-5.83 5.83c0 .97.2 1.95.58 2.94.39.98 1.08 2.1 2.08 3.37a52.1 52.1 0 0 0 4.09 4.46c1.72 1.7 3.91 3.76 6.58 6.14Z"/>'
  22.         };
  24.         this.isAuthUser = userData.user;
  26.         this.createHeart();
  28.         this.setAttribute('liked', false);
  30.         if (this.isAuthUser) {
  31.             this.getLikeStatus().then(res=>{
  32.                 if (res.needAuth) {
  33.                     return
  34.                 };
  35.                 this.isLiked = res.is_in_favourites;
  37.                 this.setAttribute('liked', this.isLiked);
  39.                 if (res.is_in_favourites) {
  40.                     if (this.alternativeDesign) {
  41.                         this.button.classList.toggle('like');
  42.                         this.button.classList.toggle('unlike');
  43.                     } else {
  44.                         this.button.classList.add('active');
  45.                     }
  47.                     if (this.isLiked) {
  48.                         this.button.title = this.tippyData[this.isLiked];
  49.                         this.button.setAttribute('data-tippy-main', this.tippyData[this.isLiked]);
  50.                         document.dispatchEvent(new CustomEvent('tippy:update', {detail:{
  51.                             element: this.button,
  52.                             text: this.tippyData[this.isLiked]
  53.                         }}));
  54.                     }
  55.                 }
  56.             });
  57.         }
  58.     }
  60.     createHeart() {
  61.         this.button = this.querySelector('button');
  62.         
  63.         if (this.alternativeDesign) {
  64.             this.button.className = `btn btn-favorite favorite ${this.isLiked ? 'like' : 'unlike'}`;
  65.             
  66.             this.button.innerHTML = `<svg class="btn-favorite-icon" width="40" height="40" fill="none">
  67.                     <path data-like d="m20 35.58-2.42-2.16c-2.8-2.53-5.12-4.71-6.95-6.55a46.04 46.04 0 0 1-4.38-4.93 15.65 15.65 0 0 1-2.27-4.02 11.25 11.25 0 0 1-.65-3.75c0-2.61.88-4.8 2.63-6.54A8.88 8.88 0 0 1 12.5 5 9.88 9.88 0 0 1 20 8.5 9.88 9.88 0 0 1 27.5 5c2.61 0 4.8.88 6.54 2.63a8.88 8.88 0 0 1 2.63 6.54c0 1.27-.22 2.52-.65 3.75a15.63 15.63 0 0 1-2.27 4.02 46.03 46.03 0 0 1-4.38 4.93 188.43 188.43 0 0 1-6.95 6.55L20 35.58Z"/>
  68.                     <path data-unlike d="m20 35.58-2.42-2.16a188.5 188.5 0 0 1-6.95-6.55 46.04 46.04 0 0 1-4.38-4.93 15.65 15.65 0 0 1-2.27-4.02 11.25 11.25 0 0 1-.65-3.75c0-2.61.88-4.8 2.63-6.54A8.88 8.88 0 0 1 12.5 5 9.88 9.88 0 0 1 20 8.5 9.88 9.88 0 0 1 27.5 5c2.61 0 4.8.88 6.54 2.63a8.88 8.88 0 0 1 2.63 6.54c0 1.27-.22 2.52-.65 3.75a15.63 15.63 0 0 1-2.27 4.02 46.05 46.05 0 0 1-4.38 4.93 188.52 188.52 0 0 1-6.95 6.55L20 35.58Zm0-4.5c2.67-2.39 4.86-4.43 6.58-6.14 1.73-1.7 3.09-3.2 4.09-4.46 1-1.26 1.7-2.39 2.08-3.38.39-.98.58-1.96.58-2.93a5.65 5.65 0 0 0-5.83-5.83c-1.3 0-2.51.36-3.63 1.1a5.67 5.67 0 0 0-2.29 2.81h-3.16a5.67 5.67 0 0 0-2.3-2.81 6.45 6.45 0 0 0-3.62-1.1 5.65 5.65 0 0 0-5.83 5.83c0 .97.2 1.95.58 2.94.39.98 1.08 2.1 2.08 3.37a52.1 52.1 0 0 0 4.09 4.46c1.72 1.7 3.91 3.76 6.58 6.14Z"/>
  69.                 </svg>`;
  70.         } else {
  71.             this.button.className = `btn btn-profile btn-profile--like ${this.isLiked ? 'active' : ''}`;
  72.             
  73.             this.button.innerHTML = `<svg class="like-fill" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#FF3F40" fill-rule="evenodd" d="M12 4.915c1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.777-3.394 6.855-8.537 11.519l-.013.011-1.45 1.32-1.45-1.31-.04-.036C5.384 15.17 2 12.095 2 8.325c0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09Z" clip-rule="evenodd"/></svg>
  74.                 <svg class="like-border" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill-rule="evenodd" d="M12 4.915c1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.777-3.394 6.855-8.537 11.519l-.013.011-1.45 1.32-1.45-1.31-.04-.036C5.384 15.17 2 12.095 2 8.325c0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09Zm0 13.56.1-.1c4.76-4.31 7.9-7.16 7.9-10.05 0-2-1.5-3.5-3.5-3.5-1.54 0-3.04.99-3.56 2.36h-1.87c-.53-1.37-2.03-2.36-3.57-2.36-2 0-3.5 1.5-3.5 3.5 0 2.89 3.14 5.74 7.9 10.05l.1.1Z" clip-rule="evenodd"/></svg>`
  75.                 ;
  76.         }
  77.         this.button.addEventListener('click', this);
  78.         this.button.title = this.tippyData[this.isLiked];
  79.         this.button.setAttribute('data-tippy-main', this.tippyData[this.isLiked]);
  81.         this.append(this.button);
  83.         // animation-heart-beat
  84.         const profileAvatar = this.button.closest('[data-favorite-button]');
  85.         if (!profileAvatar) return;
  86.         profileAvatar.addEventListener('mouseover', () => {
  87.             this.button.classList.add('animation-heart-beat');
  88.         });
  89.         profileAvatar.addEventListener('mouseout', () => {
  90.             this.button.classList.remove('animation-heart-beat');
  91.         })
  92.     }
  94.     handleEvent (event) {
  95.         event.preventDefault();
  96.         if (event.type !== 'click') return;
  98.         if (this.alternativeDesign) {
  99.             this.button.classList.toggle('like');
  100.             this.button.classList.toggle('unlike');
  101.         } else {
  102.             this.button.classList.toggle('active');
  103.         }
  105.         if (!this.isAuthUser) {
  106.             window.location = this.getAttribute('registration-url');
  107.             return;
  108.         }
  110.         fetch(this.isLiked ? this.apiUnlike : this.apiLike, {
  111.             headers: {
  112.                 'X-Requested-With': 'XMLHttpRequest',
  113.             },
  114.         })
  115.             .then(res => {
  116.                 this.button.classList.remove('is-loading');
  117.                 if (res.status !== 200) return
  118.                 return res.json();
  119.             })
  120.             .then(data => {
  121.                 if (!data.success) return;
  123.                 if (this.alternativeDesign) {
  124.                     this.button.classList.toggle('unlike', this.isLiked)
  125.                     this.isLiked = !this.isLiked;
  126.                     this.button.classList.toggle('like', this.isLiked)
  127.                 } else {
  128.                     this.isLiked = !this.isLiked;
  129.                     this.button.classList.toggle('active', this.isLiked)
  130.                 }
  132.                 this.button.title = this.tippyData[this.isLiked];
  133.                 this.button.setAttribute('data-tippy-main', this.tippyData[this.isLiked]);
  135.                 document.dispatchEvent(new CustomEvent('tippy:update', {detail:{
  136.                     element: this.button,
  137.                     text: this.tippyData[this.isLiked]
  138.                 }}));
  139.             })
  140.     }
  142.     getLikeStatus() {
  143.         return fetch(this.apiCheck, {
  144.             headers: {
  145.                 'X-Requested-With': 'XMLHttpRequest',
  146.             },
  147.         })
  148.             .then(res => {
  149.                 if (res.status !== 200 || res.redirected) {
  150.                     return {needAuth: true}
  151.                 }
  152.                 return res.json();
  153.             })
  154.             .then(data => {
  155.                 return data;
  156.             })
  157.     }
  159.     //attributeChangedCallback (name, oldValue, newValue) {
  160.         //console.log('attribute changed', name, oldValue, newValue, this);
  161.     //}
  162. });