Merge pull request #46 from anycable/chore/v1.5

v1.5 updates

src/index.html

@@ -6,7 +6,7 @@
       {{> header}}
       <main class="content">
         {{> slides/main-slide}} {{> slides/about-slide}}
-        {{> slides/trusted-slide}} {{> slides/plans-slide}}
+        {{> slides/cases-slide}} {{> slides/plans-slide}}
         {{> slides/resources-slide}}
       </main>
       {{> footer }}

src/index.scss

@@ -17,7 +17,7 @@
 @import './modules/blocks/video-tip.scss';
 @import './modules/blocks/chart.scss';
 @import './modules/blocks/illustration.scss';
-@import './modules/blocks/trusted-slide.scss';
+@import './modules/blocks/cases-slide.scss';
 @import './modules/blocks/plans-slide.scss';
 @import './modules/blocks/plan-card.scss';
 @import './modules/blocks/resources-slide.scss';

src/index.ts

@@ -1,7 +1,6 @@
 import './js/components/header-show-hide';
 import './js/components/popups-show-hide';
 import './js/components/learn-more-scroll';
-import './js/components/slide-show';
 import './js/components/demo';
-import './js/components/carousel';
+import './js/components/tabs';
 import './index.scss';

src/js/components/DemoController.ts

@@ -20,6 +20,8 @@ type TDemoControllerOptions = {
   scenario: Event[];
 };
 
+const PUBSUBS = ['Action Cable', 'Pusher', 'Socket.io'];
+
 class Chat {
   private readonly _el: HTMLElement;
   private readonly _header: HTMLElement;
@@ -59,7 +61,7 @@ class Chat {
       let type = () => {
         setTimeout(() => {
           if (chars.length) {
-            input.focus();
+            input.focus({ preventScroll: true });
             if (input.setSelectionRange) {
               input.setSelectionRange(pos, pos);
             }
@@ -108,7 +110,7 @@ class Chat {
   markOnline() {
     this._header.classList.remove('demo__chat__header_offline');
     this._header.classList.add('demo__chat__header_online');
-    this._statusLink.textContent = 'online';
+    this._statusLink.textContent = 'Online';
     this._isOnline = true;
     this.addStatusMessage('Connection restored');
 
@@ -122,7 +124,7 @@ class Chat {
   markOffline() {
     this._header.classList.remove('demo__chat__header_online');
     this._header.classList.add('demo__chat__header_offline');
-    this._statusLink.textContent = 'offline';
+    this._statusLink.textContent = 'Offline';
     this._isOnline = false;
     this.addStatusMessage('No connection');
   }
@@ -145,6 +147,8 @@ export default class DemoController {
   private readonly _roomId: string;
   private readonly _anyChat: Chat;
   private readonly _actionChat: Chat;
+  private readonly _pubsubLabel: HTMLElement;
+  private _pubsubs: string[] = [];
   private readonly _scenario: Event[];
   private _currentScenario: Event[];
 
@@ -158,6 +162,9 @@ export default class DemoController {
     this._actionChat = new Chat(
       this._el.querySelector('[data-demo-target="action"]')!
     );
+    this._pubsubLabel = this._el.querySelector(
+      '[data-demo-target="another-pubsub"]'
+    )!;
 
     this._scenario = options.scenario;
   }
@@ -173,9 +180,22 @@ export default class DemoController {
 
   private playScenario(): void {
     this._currentScenario = this._scenario.slice();
+    this._setNextPubsub();
     this.scheduleNextEvent();
   }
 
+  private _setNextPubsub() {
+    if (!this._pubsubs.length) {
+      this._pubsubs = PUBSUBS.slice();
+    }
+
+    const pubsub =
+      this._pubsubs[Math.floor(Math.random() * this._pubsubs.length)];
+    this._pubsubs = this._pubsubs.filter(p => p !== pubsub);
+
+    this._pubsubLabel.textContent = `via ${pubsub}`;
+  }
+
   private scheduleNextEvent(): void {
     if (this._currentScenario.length === 0) {
       setTimeout(() => {

src/js/components/TabsController.ts

@@ -0,0 +1,53 @@
+export default class TabsController {
+  private readonly el: HTMLElement;
+
+  constructor(el: HTMLElement) {
+    this.el = el;
+  }
+
+  init() {
+    const buttons = Array.from(
+      this.el.querySelectorAll('button[data-tabs-target]')
+    );
+
+    buttons.forEach(button => {
+      button.addEventListener('click', this._handleButtonClick);
+    });
+  }
+
+  private _handleButtonClick = (e: Event) => {
+    const target = e.target as HTMLElement;
+    const tabId = target.dataset.tabsTarget;
+
+    if (!tabId) {
+      return;
+    }
+
+    this._showTab(tabId);
+  };
+
+  private _showTab(tabId: string) {
+    const tabs = Array.from(this.el.querySelectorAll('[data-tabs-id]'));
+    const buttons = Array.from(
+      this.el.querySelectorAll('button[data-tabs-target]')
+    );
+
+    tabs.forEach(tab => {
+      const tabEl = tab as HTMLElement;
+      if (tabEl.dataset.tabsId === tabId) {
+        tabEl.style.display = 'block';
+      } else {
+        tabEl.style.display = 'none';
+      }
+    });
+
+    buttons.forEach(button => {
+      const buttonEl = button as HTMLElement;
+      if (buttonEl.dataset.tabsTarget === tabId) {
+        buttonEl.classList.add('active-tab');
+      } else {
+        buttonEl.classList.remove('active-tab');
+      }
+    });
+  }
+}

src/js/components/tabs.js

@@ -0,0 +1,8 @@
+import TabsController from './TabsController';
+
+const tabs = document.querySelectorAll("[data-controller='tabs']");
+
+tabs.forEach(tab => {
+  const controller = new TabsController(tab);
+  controller.init();
+});

src/modules/blocks/about-slide.scss

@@ -9,85 +9,100 @@ $className: 'about-slide';
     width: 100%;
     max-width: 1920px;
     display: flex;
+    flex-direction: column;
+  }
+
+  &__section {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    align-items: stretch;
+    position: relative;
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+
+    @include mediaMax($tablet) {
+      padding: 0 24px;
+      background-color: $backgroundSecondaryColor;
+    }
   }
 
   &__content {
+    width: 50%;
     display: flex;
     flex-direction: column;
-    width: 50%;
+    align-items: stretch;
+    height: auto;
     background-color: $backgroundSecondaryColor;
     border-right: 1px solid $borderPrimaryColor;
-    padding: 120px 64px;
+    padding: 0px 64px;
     z-index: 2;
-
-    &_type {
-      &_slide-show {
-        padding: 0 64px 34px 0;
-        background-color: $backgroundPrimaryColor;
-        z-index: 1;
-
-        @include mediaMax($tablet) {
-          display: none;
-        }
-      }
-    }
+    position: relative;
 
     @include mediaMax($tablet) {
       width: 100%;
       border-right: none;
-      padding: 88px 64px;
-    }
+      padding: 0;
 
-    @include mediaMax($mobile) {
-      padding: 88px 0px;
+      &:first-child {
+        padding-top: 48px;
+      }
     }
   }
 
-  &__section {
+  &__media {
+    width: 50%;
+    padding: 0 64px;
+    background-color: $backgroundPrimaryColor;
+    z-index: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-bottom: 156px;
+    justify-content: center;
 
-    &:last-of-type {
-      margin-bottom: 0;
-    }
+    &-top {
+      margin-top: 120px;
 
-    &_type {
-      &_no-padding {
-        padding: 0;
+      @include mediaMax($tablet) {
+        margin-top: 24px;
       }
     }
 
-    @include mediaMax($mobile) {
-      padding: 0 24px;
+    &-align-top {
+      align-self: flex-start;
+      margin-bottom: 48px;
+    }
 
-      &_type {
-        &_no-padding {
-          padding: 0;
-        }
-      }
+    @include mediaMax($tablet) {
+      display: none;
+    }
+  }
+
+  &__arrow {
+    position: absolute;
+    top: 120px;
+    left: calc(100% - 120px);
+
+    @include mediaMax($tablet) {
+      display: none;
     }
   }
 
   &__title {
     font-size: 46px;
     line-height: 1.2;
     font-weight: 700;
+    margin-top: 120px;
     margin-bottom: 56px;
 
-    &_type {
-      &_with-padding {
-        @include mediaMax($mobile) {
-          padding: 0 24px;
-        }
-      }
-    }
 
     @include mediaMax($mobile) {
       font-size: 40px;
       line-height: 1.3;
       margin-bottom: 24px;
+      margin-top: 24px;
     }
   }
 
@@ -97,28 +112,17 @@ $className: 'about-slide';
     font-weight: 700;
     align-self: flex-start;
     margin-bottom: 24px;
-
-    &_type {
-      &_with-padding {
-        @include mediaMax($mobile) {
-          padding: 0 24px;
-        }
-      }
-    }
   }
 
   &__text {
     font-size: 20px;
     line-height: 1.6;
     align-self: flex-start;
-    margin-bottom: 24px;
+    margin-bottom: 84px;
 
-    &_type {
-      &_with-padding {
-        @include mediaMax($mobile) {
-          padding: 0 24px;
-        }
-      }
+
+    @include mediaMax($mobile) {
+      margin-bottom: 48px;
     }
   }
 
@@ -132,14 +136,23 @@ $className: 'about-slide';
   &__btn {
     padding: 0 12px;
     box-shadow: none;
+    background-color: $accentSecondaryColor;
+    color: black;
   }
 
-  &__btn-inactive {
-    background-color: $accentSecondaryColor !important;
-    color: black !important;
+  &__btn-ruby.active-tab {
+    background-color: $accentPrimaryColor;
+    color: $backgroundPrimaryColor;
+  }
+
+  &__btn-pubsub.active-tab {
+    box-shadow: none;
+    background-color: transparent;
+    color: $accentPrimaryColor;
+    border: 2px solid $accentPrimaryColor;
   }
 
-  &__btn-js {
+  &__btn-js.active-tab {
     // js logo yellow color
     background-color: #f7df1e;
     color: black;