@textback/notification-widget 2.0.3 → 2.0.4-110501

package/release/builds/textback/notificationwidget/src/widget/components/tb-notification-button/styles.scss

@@ -1,657 +0,0 @@
-$color-fb: #3b5998;
-$color-fb-gradient: #6077a6;
-
-$color-vk: #4a76a8;
-$color-vk-gradient: #0f65c6;
-
-$color-tg: #61A8DE;
-$color-tg-gradient:#408AC2;
-
-$color-skype: #00aff0;
-$color-skype-gradient:#00d0e7;
-
-$color-viber: #574e92;
-$color-viber-gradient:#655bab;
-
-$color-whatsapp: #25D366;
-$color-whatsappb: #25D366;
-$color-whatsapp-gradient:#2fc368;
-
-@mixin shadow-on-hover() {
-  transition: box-shadow 0.4s;
-
-  &:hover {
-    box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.4);
-  }
-}
-
-@mixin shadow-on-hover-gradient() {
-  transition: box-shadow 0.4s;
-
-  &:hover {
-    box-shadow:inset 0 0 3px 3px rgba(0, 0, 0, 0.4);
-  }
-}
-
-@mixin set-channel-button-brand-color($color) {
-  .tb-notification-button__inner > a {
-    background-color: $color;
-  }
-
-  tb-notification-button__icon > svg path {
-    fill: $color;
-  }
-}
-
-@mixin set-channel-button-brand-linear-gradient-color($color, $color-gradient) {
-  background: linear-gradient(309.02deg, $color -6.45%, $color-gradient 111.08%);
-}
-
-tb-notification-widget {
-  #tb-notification-widget-inner.tb-notification-widget-inner {
-    tb-notification-button a {
-      cursor: pointer !important;
-    }
-
-    .tb-notification-button__tip {
-      position: absolute;
-      font-size: 10px;
-      text-align: center;
-      margin-top: 19px;
-      left: 0;
-      width: 100%;
-      color: #6f7b8a;
-    }
-
-    .tb-btn-align-center {
-      text-align: center;
-    }
-
-    .tb-btn-align-left {
-      text-align: left;
-    }
-
-    .tb-btn-align-right {
-      text-align: right;
-    }
-  }
-
-  /* new design */
-
-  #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-square {
-    /* inline & popup */
-    tb-notification-button {
-      display: block;
-      width: 100%;
-      margin: 0px 0px 20px;
-      padding: 0px;
-      background-color: transparent;
-      height: 30px;
-
-
-
-      &[channel="skype"] {
-        @include set-channel-button-brand-color($color-skype);
-      }
-
-      &[channel="facebook"] {
-        @include set-channel-button-brand-color($color-fb);
-      }
-
-      &[channel="vk"] {
-        @include set-channel-button-brand-color($color-vk);
-
-        .tb-notification-button__inner > div {
-          @include shadow-on-hover();
-        }
-      }
-
-      &[authorized="true"] tb-notification-button__text[for="login"], &[authorized="false"] tb-notification-button__text[for="subscribe"] {
-        display: none;
-      }
-
-      &[channel="viber"] {
-        // @include set-channel-button-brand-color($color-viber);
-        .tb-notification-button__inner > a {
-          background-color: $color-viber;
-        }
-      }
-
-      &[channel="tg"] {
-        @include set-channel-button-brand-color($color-tg);
-      }
-
-      &[channel="whatsapp"] {
-        .tb-notification-button__inner > a {
-          background-color: $color-whatsapp;
-        }
-      }
-
-      &[channel="whatsappb"] {
-        .tb-notification-button__inner > a {
-          background-color: $color-whatsappb;
-        }
-      }
-
-      &[loading] {
-        color: transparent;
-        &:after {
-          content: "";
-          border-radius: 100%;
-          border: 3px solid #fff;
-          border-bottom-color: transparent;
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          width: 16px;
-          height: 16px;
-          margin: -11px 0 0 -11px;
-          animation-name: spin;
-          animation-duration: 1000ms;
-          animation-iteration-count: infinite;
-        }
-      }
-
-
-
-      .tb-notification-button__inner {
-        position: relative;
-        display: inline-block;
-        box-sizing: border-box;
-        width: 219px;
-        padding-left: 35px;
-        float: initial;
-
-        > a {
-          all: initial;
-          display: block;
-          box-sizing: content-box;
-          border-radius: 4px;
-          cursor: pointer;
-          color: #fff;
-          position: relative;
-          font-size: 12px;
-          font-family: Arial,Helvetica,sans-serif;
-          padding: 0px;
-          line-height: 29px;
-          height: 30px;
-          text-align: center;
-          text-decoration: none !important;
-          &:hover {
-            color: #fff;
-          }
-
-          @include shadow-on-hover();
-        }
-
-        tb-notification-button__text {
-          display: inline-block;
-          vertical-align: middle;
-        }
-
-        tb-notification-button__icon {
-          position: absolute;
-          top: 0px;
-          left: 0px;
-          width: 30px;
-          height: 30px;
-          margin: 0px;
-          > svg {
-            width: 100%;
-            height: 100%;
-          }
-        }
-
-      }
-    }
-  }
-
-  /* old design */
-  #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-rounded {
-
-    /* inline */
-    tb-notification-button {
-      @include shadow-on-hover();
-
-      box-sizing: content-box;
-      padding: 10px 20px;
-      border-radius: 25px;
-      cursor: pointer;
-      background-color: #2979FF;
-      color: #fff;
-      display: inline-block;
-      margin: 0 13px 45px 0;
-      position: relative;
-
-      &[channel="skype"] {
-        background-color: $color-skype;
-      }
-      &[channel="facebook"] {
-        background-color: $color-fb;
-      }
-      &[channel="vk"] {
-        background-color: $color-vk;
-      }
-      &[authorized="true"] tb-notification-button__text[for="login"], &[authorized="false"] tb-notification-button__text[for="subscribe"] {
-        display: none;
-      }
-      &[channel="viber"] {
-        background-color: $color-viber;
-      }
-      &[channel="tg"] {
-        background-color: $color-tg;
-      }
-      &[channel="whatsapp"] {
-        background-color: $color-whatsapp;
-      }
-      &[channel="whatsappb"] {
-        background-color: $color-whatsappb;
-      }
-      &[loading] {
-        color: transparent;
-        &:after {
-          content: "";
-          border-radius: 100%;
-          border: 3px solid #fff;
-          border-bottom-color: transparent;
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          width: 16px;
-          height: 16px;
-          margin: -11px 0 0 -11px;
-          animation-name: spin;
-          animation-duration: 1000ms;
-          animation-iteration-count: infinite;
-        }
-      }
-      > a {
-        all: initial;
-        display: block;
-        text-decoration: none;
-        color: #fff;
-        font-family: inherit;
-        //font-size: 17px;
-        margin: -10px -20px;
-        //padding: 10px 20px;
-        text-decoration: none !important;
-
-        padding: 6px 30px 8px;
-        min-width: 110px;
-        text-align: center;
-        font-size: 15px;
-
-        &:hover {
-          color: #fff;
-        }
-      }
-    }
-
-    tb-notification-button__text {
-      display: inline-block;
-      vertical-align: middle;
-    }
-
-    tb-notification-button__icon {
-      display: inline-block;
-      vertical-align: middle;
-      //width: 40px;
-      //height: 40px;
-      width: 30px;
-      height: 30px;
-      margin: -10px 0 -10px -15px;
-      > svg {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-
-  &.tb-no-api-call #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-rounded tb-notification-button {
-    margin-bottom: 13px;
-  }
-
-  /* popup */
-  #tb-notification-widget-inner.tb-notification-widget-inner tb-notification-widget-overlay .tb-widget-buttons.tb-btn-style-rounded {
-    tb-notification-button {
-      display: inline-block;
-      width: 120px;
-      height: 24px;
-      padding: 0px;
-      margin: 0px 0px 18px 0px;
-
-      > a {
-        position: relative;
-        text-align: center;
-        font-size: 12px;
-        padding: 5px 20px;
-        margin: 0px;
-      }
-    }
-    tb-notification-button__icon {
-      display: block;
-      position: absolute;
-      left: 8px;
-      top: 2px;
-      width: 20px;
-      height: 20px;
-      margin: 0px;
-      padding: 0px;
-    }
-    tb-notification-button__text {
-      vertical-align: baseline;
-      width: 60px;
-      text-align: center;
-      color: #fff;
-    }
-  }
-
-  /* old design */
-  #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-gradient {
-
-    /* inline */
-    tb-notification-button {
-      @include shadow-on-hover-gradient();
-
-      box-sizing: content-box;
-      padding: 21px 36px;
-      border-radius: 5px;
-      cursor: pointer;
-      background-color: #2979FF;
-      color: #fff;
-      display: inline-block;
-      margin: 0 13px 45px 0;
-      position: relative;
-
-      &[channel="skype"] {
-        @include set-channel-button-brand-linear-gradient-color($color-skype, $color-skype-gradient);
-      }
-      &[channel="facebook"] {
-        @include set-channel-button-brand-linear-gradient-color($color-fb, $color-fb-gradient);
-      }
-      &[channel="vk"] {
-        @include set-channel-button-brand-linear-gradient-color($color-vk, $color-vk-gradient);
-        padding: 19px 36px;
-      }
-      &[authorized="true"] tb-notification-button__text[for="login"], &[authorized="false"] tb-notification-button__text[for="subscribe"] {
-        display: none;
-      }
-      &[channel="viber"] {
-        @include set-channel-button-brand-linear-gradient-color($color-viber, $color-viber-gradient);
-      }
-      &[channel="tg"] {
-        @include set-channel-button-brand-linear-gradient-color($color-tg, $color-tg-gradient);
-      }
-      &[channel="whatsapp"] {
-        @include set-channel-button-brand-linear-gradient-color($color-whatsapp, $color-whatsapp-gradient);
-      }
-      &[channel="whatsappb"] {
-        @include set-channel-button-brand-linear-gradient-color($color-whatsappb, $color-whatsapp-gradient);
-      }
-      &[loading] {
-        color: transparent;
-        &:after {
-          content: "";
-          border-radius: 100%;
-          border: 3px solid #fff;
-          border-bottom-color: transparent;
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          width: 16px;
-          height: 16px;
-          margin: -11px 0 0 -11px;
-          animation-name: spin;
-          animation-duration: 1000ms;
-          animation-iteration-count: infinite;
-        }
-      }
-      > a {
-        all: initial;
-        display: block;
-        text-decoration: none;
-        color: #fff;
-        font-family: inherit;
-        //font-size: 17px;
-        margin: -10px -20px;
-        //padding: 10px 20px;
-        text-decoration: none !important;
-
-        padding: 6px 30px 8px;
-        min-width: 110px;
-        text-align: center;
-        font-size: 15px;
-
-        &:hover {
-          color: #fff;
-        }
-      }
-
-      &[channel="viber"] tb-notification-button__icon {
-        > svg {
-          width: 110%;
-          height: 110%;
-        }
-      }
-    }
-
-    tb-notification-button__text {
-      display: inline-block;
-      vertical-align: middle;
-    }
-
-    tb-notification-button__icon {
-      display: inline-block;
-      vertical-align: middle;
-      //width: 40px;
-      //height: 40px;
-      width: 30px;
-      height: 30px;
-      margin: -10px 0 -10px -15px;
-      > svg {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-
-  &.tb-no-api-call #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-gradient tb-notification-button {
-    margin-bottom: 13px;
-  }
-
-  /* popup */
-  #tb-notification-widget-inner.tb-notification-widget-inner tb-notification-widget-overlay .tb-widget-buttons.tb-btn-style-gradient {
-    tb-notification-button {
-      display: inline-block;
-      width: 120px;
-      height: 24px;
-      padding: 0px;
-      margin: 0px 0px 18px 0px;
-
-      > a {
-        position: relative;
-        text-align: center;
-        font-size: 12px;
-        padding: 5px 20px;
-        margin: 0px;
-      }
-    }
-    tb-notification-button__icon {
-      display: block;
-      position: absolute;
-      left: 8px;
-      top: 2px;
-      width: 20px;
-      height: 20px;
-      margin: 0px;
-      padding: 0px;
-    }
-    tb-notification-button__text {
-      vertical-align: baseline;
-      width: 60px;
-      text-align: center;
-      color: #fff;
-    }
-  }
-
-
-  /* circle icons design */
-  #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-icons {
-
-    /* inline */
-    tb-notification-button {
-      display: inline-block;
-      position: relative;
-      margin: 0px 13px 13px 0px;
-
-      &:hover {
-        cursor: pointer;
-      }
-
-      &[loading] {
-        color: transparent;
-        &:after {
-          content: "";
-          border-radius: 100%;
-          border: 3px solid #fff;
-          border-bottom-color: transparent;
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          width: 16px;
-          height: 16px;
-          margin: -11px 0 0 -11px;
-          animation-name: spin;
-          animation-duration: 1000ms;
-          animation-iteration-count: infinite;
-        }
-      }
-      > a {
-        all: initial;
-        display: block;
-        text-decoration: none;
-        font-family: inherit;
-        text-decoration: none !important;
-
-        min-width: 80px;
-        text-align: center;
-        font-size: 15px;
-        color: #333;
-
-        &:hover {
-          cursor: pointer;
-        }
-      }
-
-      &[channel="whatsappb"] tb-notification-button__icon, &[channel="whatsapp"] tb-notification-button__icon {
-        background: $color-whatsapp;
-      }
-
-      &[channel="viber"] tb-notification-button__icon {
-        background: $color-viber;
-      }
-
-      &[channel="tg"] tb-notification-button__icon {
-        background: $color-tg;
-      }
-
-      &[channel="facebook"] tb-notification-button__icon {
-        background: $color-fb;
-      }
-    }
-
-    tb-notification-button__text {
-      display: block;
-      margin-top: 4px;
-    }
-
-    tb-notification-button__icon {
-      display: block;
-      position: relative;
-      width: 50px;
-      height: 50px;
-      margin: 0 auto;
-      transition: all .3s ease;
-      border-radius: 50%;
-      box-shadow: 0 6px 12px rgba(0,0,0,.25);
-      > svg {
-        width: 100%;
-        height: 100%;
-      }
-
-      &[channel="whatsappb"] svg {
-        display: block;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        margin: auto;
-        width: 50%;
-        height: 50%;
-      }
-
-      &:hover {
-        -webkit-transform: scale(1.3);
-        -ms-transform: scale(1.3);
-        transform: scale(1.3);
-      }
-     }
-    }
-  }
-
-  /*styles for non mobile*/
-  @media only screen and (min-device-width: 736px) {
-
-    /* new design */
-
-    #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-square {
-      tb-notification-button {
-        .tb-notification-button__inner {
-          padding-left: 55px;
-          width: 239px;
-
-          tb-notification-button__icon {
-            top: -5px;
-            left: 0px;
-            width: 40px;
-            height: 40px;
-          }
-        }
-      }
-    }
-
-    /* old design*/
-
-    #tb-notification-widget-inner.tb-notification-widget-inner tb-notification-widget-overlay .tb-widget-buttons.tb-btn-style-rounded {
-      tb-notification-button {
-        margin: 0px 19px 24px 0px;
-        width: 206px;
-        height: 50px;
-
-        > a {
-          padding: 10px 20px;
-          font-size: 20px;
-        }
-      }
-
-      tb-notification-button__icon {
-        width: 40px;
-        height: 40px;
-        left: 15px;
-        top: 5px;
-      }
-
-      tb-notification-button__text {
-        width: 100px;
-        line-height: 30px;
-      }
-    }
-  }
-
-  // Dirty crutch. There is no other way now *'(
-  tb-notification-widget-popup.tb-popup-with-image .tb-widget-buttons > div:last-child {
-    tb-notification-button {
-      margin-bottom: 0 !important;
-    }
-  }

package/release/builds/textback/notificationwidget/src/widget/components/tb-notification-button/telegram.js

@@ -1,55 +0,0 @@
-import Button from './index.js';
-import icon from '../../icons/icon_tg.svg';
-import iconCircle from '../../icons/icon_tg_circle.svg';
-import constants from '../../../sdk/utils/constants.js';
-
-class TelegramButton extends Button {
-    render() {
-        super.render();
-
-        const link = this.element.querySelector('a');
-        link.addEventListener('click', (event) => {
-            event.preventDefault();
-            this.channelAPI.subscribe();
-        });
-    }
-
-    get template() {
-        if (this.config.type === constants.WIDGET_TYPE_API_CALL) {
-            return `
-                <a target="_blank" href="https://telegram.me/${this.config.id}?start=${this.deepLink}">
-                    <tb-notification-button__icon>${icon}</tb-notification-button__icon> 
-                    <tb-notification-button__text>${this.text('telegram')}</tb-notification-button__text>
-                </a>
-                <p class="tb-notification-button__tip">
-                    ${this.text('telegramTip')}
-                </p>
-            `;
-        } else if(this.config.markUp.style === 'gradient') {
-            return `
-                <a target="_blank" href="https://telegram.me/${this.config.id}?start=${this.deepLink}">
-                    <tb-notification-button__icon>${icon}</tb-notification-button__icon> 
-                    <tb-notification-button__text>${this.text('telegram')}</tb-notification-button__text>
-                </a>
-            `;
-        } else if (this.config.markUp.style !== 'square') {
-            return `
-                <a target="_blank" href="https://telegram.me/${this.config.id}?start=${this.deepLink}">
-                    <tb-notification-button__icon>${ (this.config.markUp.style === 'rounded' ? icon : iconCircle) }</tb-notification-button__icon> 
-                    <tb-notification-button__text>${this.text('telegram')}</tb-notification-button__text>
-                </a>
-            `;
-        } else {
-            return `
-                <div class="tb-notification-button__inner">
-                    <tb-notification-button__icon>${icon}</tb-notification-button__icon> 
-                    <a target="_blank" href="https://telegram.me/${this.config.id}?start=${this.deepLink}">
-                        <tb-notification-button__text>${this.text('telegramExtended')}</tb-notification-button__text>
-                    </a>
-                </div>
-            `;
-        }
-    }
-};
-
-module.exports = TelegramButton;