server-connection-viz.html

<!--
  Copyright 2018 The Outline Authors

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<link rel="import" href="../bower_components/polymer/polymer-element.html" />

<dom-module id="server-connection-viz">
  <template>
    <style>
      /* Do not mirror animation for RTL languages */
      /* rtl:begin:ignore */
      @keyframes rotate-with-pause {
        0% {
          transform: rotate(0deg);
        }
        60%,
        100% {
          transform: rotate(360deg);
        }
      }
      @keyframes rotate-backward-with-pause {
        0% {
          transform: rotate(360deg);
        }
        60%,
        100% {
          transform: rotate(0deg);
        }
      }

      :host {
        margin: 0 auto;
      }

      #container {
        border-radius: 80px;
        margin: 0 auto;
        position: relative;
      }

      img {
        position: absolute;
        display: inline-block;
        transition-timing-function: ease-out;
        transition-duration: 1s;
      }

      .grey.DISCONNECTED {
        opacity: 1;
      }

      .grey.CONNECTED {
        opacity: 0;
      }

      .grey.DISCONNECTING {
        opacity: 0.8;
      }

      .grey.ZERO_STATE,
      .green.ZERO_STATE,
      .green.DISCONNECTED,
      .green.CONNECTING,
      .green.RECONNECTING,
      .green.DISCONNECTING {
        opacity: 0;
      }

      .green.CONNECTED {
        opacity: 1;
      }

      #small.CONNECTING,
      #small-grey.CONNECTING,
      #small.RECONNECTING,
      #small-grey.RECONNECTING {
        animation: rotate-with-pause 1.75s ease-out infinite;
      }

      #medium.CONNECTING,
      #medium-grey.CONNECTING,
      #medium.RECONNECTING,
      #medium-grey.RECONNECTING {
        animation: rotate-with-pause 1.75s ease-out 250ms infinite;
      }

      #large.CONNECTING,
      #large-grey.CONNECTING,
      #large.RECONNECTING,
      #large-grey.RECONNECTING {
        animation: rotate-with-pause 1.75s ease-out 500ms infinite;
      }

      #small.DISCONNECTING,
      #small-grey.DISCONNECTING {
        animation: rotate-backward-with-pause 1.75s ease-out infinite;
      }

      #medium.DISCONNECTING,
      #medium-grey.DISCONNECTING {
        animation: rotate-backward-with-pause 1.75s ease-out 250ms infinite;
      }

      #large.DISCONNECTING,
      #large-grey.DISCONNECTING {
        animation: rotate-backward-with-pause 1.75s ease-out 500ms infinite;
      }

      #small,
      #small-grey {
        top: 16px;
        left: 16px;
        height: 16px;
        width: 16px;
        z-index: 300;
      }
      #medium,
      #medium-grey {
        top: 8px;
        left: 8px;
        height: 32px;
        width: 32px;
        transition-delay: 250ms;
        z-index: 200;
      }
      #large,
      #large-grey,
      #large-zero {
        top: 0;
        left: 0;
        height: 48px;
        width: 48px;
        transition-delay: 500ms;
        z-index: 100;
      }

      .expanded #small,
      .expanded #small-grey {
        top: 60px;
        left: 60px;
        height: 40px;
        width: 40px;
      }
      .expanded #medium,
      .expanded #medium-grey {
        top: 30px;
        left: 30px;
        height: 100px;
        width: 100px;
      }
      .expanded #large,
      .expanded #large-grey,
      .expanded #large-zero {
        top: 0;
        left: 0;
        height: 160px;
        width: 160px;
      }

      #large {
        position: relative;
      }

      #large-zero {
        opacity: 0;
      }

      #large-zero.ZERO_STATE {
        opacity: 1;
      }

      @media (max-width: 360px) {
        #small,
        #small-grey {
          top: 12px;
          left: 12px;
          height: 8px;
          width: 8px;
        }
        #medium,
        #medium-grey {
          top: 8px;
          left: 8px;
          height: 16px;
          width: 16px;
        }
        #large,
        #large-grey,
        #large-zero {
          top: 0;
          left: 0;
          height: 32px;
          width: 32px;
        }
      }

      @media (min-height: 600px) {
        .expanded #small,
        .expanded #small-grey {
          top: 72px;
          left: 72px;
          height: 48px;
          width: 48px;
        }
        .expanded #medium,
        .expanded #medium-grey {
          top: 36px;
          left: 36px;
          height: 120px;
          width: 120px;
        }
        .expanded #large,
        .expanded #large-grey,
        .expanded #large-zero {
          top: 0;
          left: 0;
          height: 192px;
          width: 192px;
        }
      }
      /* rtl:end:ignore */
    </style>
    <div id="container" class$="[[_computeExpandedClassName(expanded)]]">
      <img id="small-grey" src$="[[rootPath]]assets/disc_grey.png" class$="grey {{animationState}}" />
      <img id="small" src$="[[rootPath]]assets/disc_color.png" class$="green {{animationState}}" />
      <img id="medium-grey" src$="[[rootPath]]assets/disc_grey.png" class$="grey {{animationState}}" />
      <img id="medium" src$="[[rootPath]]assets/disc_color.png" class$="green {{animationState}}" />
      <img id="large-grey" src$="[[rootPath]]assets/disc_grey.png" class$="grey {{animationState}}" />
      <img id="large-zero" src$="[[rootPath]]assets/disc_empty.png" class$="{{state}}" />
      <img id="large" src$="[[rootPath]]assets/disc_color.png" class$="green {{animationState}}" />
    </div>
  </template>
  <script>
    "use strict";

    Polymer({
      is: "server-connection-viz",
      properties: {
        rootPath: String,
        state: {
          type: String,
          observer: "_onStateChanged",
        },
        animationState: {
          type: String,
          notify: true,
          value: "ZERO_STATE",
        },
        expanded: {
          type: Boolean,
          value: false,
        },
      },
      _onStateChanged: function _onStateChanged(newState) {
        this._updateAnimationState();
      },
      _ANIMATION_DURATION_MS: 1750, // Update CSS when modifying the animation duration.
      _animationStartMs: null,
      _updateAnimationState: function() {
        if (this._isAnimating(this.state)) {
          this._animationStartMs = new Date().getTime();
        }
        if (this.state === "CONNECTED" || this.state === "DISCONNECTED") {
          if (this._isAnimating(this.animationState)) {
            var now = new Date().getTime();
            var elapsedAnimationMs = now - this._animationStartMs;
            var remainingAnimationMs = this._ANIMATION_DURATION_MS - (elapsedAnimationMs % this._ANIMATION_DURATION_MS);
            // Update the state only after the animation cycle has finished to avoid jumpiness.
            var _this = this;
            this.async(function() {
              _this.animationState = _this.state;
            }, remainingAnimationMs);
            return;
          }
        }
        this.animationState = this.state;
      },
      _isAnimating: function(state) {
        return state === "CONNECTING" || state === "DISCONNECTING" || state === "RECONNECTING";
      },
      _computeExpandedClassName: function(expanded) {
        return expanded ? "expanded" : "";
      },
    });
  </script>
</dom-module>