@textback/notification-widget/src/widget/components/tb-notification-button/vk.js

TODO: Give a short introduction of your project. Let this section explain the objectives or the motivation behind this project.

/* eslint no-console: "off" */

import Button from './index.js';
import UUID from 'uuid-js';
import icon from '../../icons/icon_vk.svg';
import iconCircle from '../../icons/icon_vk_circle.svg';
import constants from '../../../sdk/utils/constants.js';

class VKButton extends Button {
  constructor() {
    super(...arguments);

    this.useVkApp = this.widget.config.useVkApp;
    this.landingUrl = this.config.additionalProperties ? this.config.additionalProperties.landingUrl : undefined;
    this.element.setAttribute('type', this.config.type || 'widget');

    this.buttonContainerId = UUID.create(4).hex;

    if (this.config.type === constants.WIDGET_TYPE_API_CALL) {
      this.element.setAttribute('authorized', this.channelAPI.authorized);
      this.element.addEventListener('click', event => {
        event.preventDefault();
        this.channelAPI.subscribeViaApi();
      });

      this.set({
        ready: true
      });
    } else if (this.useVkApp || this.config.markUp.style !== 'square'|| this.config.markUp.style === 'gradient' || this.landingUrl) {
      this.element.addEventListener('click', event => {
        event.preventDefault();
        this.channelAPI.subscribe();
      });

      this.set({
        ready: true
      });
    } else {
      this.set({
        ready: true
      });

      this.channelAPI.renderVKSubscriptionButton(30, this.buttonContainerId);
    }
  }


  get template() {
    if (this.ready) {
      if (this.config.type === constants.WIDGET_TYPE_API_CALL) {
        return `
                    <a href="javascript:void(0)">
                        <tb-notification-button__icon>${icon}</tb-notification-button__icon>
                        <tb-notification-button__text for="login">${this.text('vkontakteLogin')}</tb-notification-button__text>
                        <tb-notification-button__text for="subscribe">${this.text('vkontakte')}</tb-notification-button__text>
                    </a>
                    <p class="tb-notification-button__tip">
                        ${this.text('vkontakteTip')}
                    </p>
                `;
      } else if(this.config.markUp.style === 'gradient') {
        return `
                    <a class="vk-app-link" href="#">
                        <tb-notification-button__icon>${icon}</tb-notification-button__icon>
                        <tb-notification-button__text>${this.text('vkontakte')}</tb-notification-button__text>
                    </a>
                `;
      } else if (this.config.markUp.style !== 'square') {
        return `
                    <a href="#">
                        <tb-notification-button__icon>${(this.config.markUp.style === 'rounded' ? icon : iconCircle)}</tb-notification-button__icon>
                        <tb-notification-button__text>${this.text('vkontakte')}</tb-notification-button__text>
                    </a>
                `;
      } else {
        return `
                    <div class="tb-notification-button__inner">
                      <tb-notification-button__icon>${icon}</tb-notification-button__icon>
                      <a id="${this.buttonContainerId}">
                      ${
                        this.useVkApp || this.landingUrl ? this.text('vkontakteExtended') : ''
                      }
                      </a>
                    </div>
                `
      }
    }
    return '';
  }
}

module.exports = VKButton;