file-uploader-progress-overlay.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../app-localize-mixin/app-localize-mixin.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../offthread-image/offthread-image.html">
<link rel="import" href="../overlay-container/animated-overlay-mixin.html">
<link rel="import" href="../paper-progress/paper-progress.html">

<!--
`file-uploader-progress-overlay`

@demo demo/index.html
-->
<dom-module id="file-uploader-progress-overlay">
  <template>
    <style>
      :host {
        background: white;
        border-radius: 4px;
        bottom: 30px;
        box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.2);
        display: inline-block;
        height: 100px;
        left: 30px;
        overflow: hidden;
        position: fixed;
        right: 30px;
        z-index: 9999;
      }

      @media(min-width: 642px) {
        :host {
          bottom: 50px;
          left: 30px;
          right: auto;
          width: 320px;
        }
      }

      #paperProgress {
        bottom: 0;
        height: 4px;
        left: 0;
        position: absolute;
        width: 100%;
        --paper-progress-active-color: var(--file-uploader-progress-overlay-color, #2196f3);
      }

      #container {
        @apply --layout-horizontal;
        height: 100%;
      }

      offthread-image {
        width: 100px;
        height: 100%;
      }

      .detail {
        @apply --layout-vertical;
        @apply --layout-flex;
        box-sizing: border-box;
        color: #666;
        font-size: 13px;
        padding: 12px 25px 16px;
        position: relative;
      }

      .detail__destination {
        @apply --layout-flex;
        color: initial;
        font-size: 16px;
        margin: 2px 0;
      }

      .detail__button {
        background: none;
        border-radius: 3px;
        border: none;
        bottom: 12px;
        color: var(--file-uploader-progress-overlay-color, #2196f3);
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
        outline: 0;
        padding: 6px 10px;
        position: absolute;
        right: 20px;
        text-transform: uppercase;
      }

      .detail__button:hover {
        background: #f2f2f2;
      }

    </style>

    <div id="container">
      <offthread-image sizing="cover" src="[[_computeImageUrl(currentFile)]]"></offthread-image>

      <div class="detail">
        <div>[[_computeUploadingTitle(destinationText, localize)]]</div>
        <div class="detail__destination">[[destinationText]]</div>
        <div>[[_computeLoadedDetail(currentFile, uploadingFiles.size, localize)]]</div>
        <button class="detail__button" on-click="_stopClicked">[[localize('stop')]]</button>
        <paper-progress id="paperProgress" indeterminate></paper-progress>
      </div>
    </div>

  </template>

  <script>

    class FileUploaderProgressOverlay extends AnimatedOverlayMixin(AppLocalizeMixin(Polymer.Element)) {
      
      static get is() {return 'file-uploader-progress-overlay';}

      static get properties() {
        return {

          // @override AnimatedOverlayBehavior
          noCancelOnEscKey: {
            type: Boolean,
            value: true
          },

          // @override AnimatedOverlayBehavior
          noCancelOnPopState: {
            type: Boolean,
            value: true
          },

          uploadingFiles: Map,

          // The file that is being currently uploaded.
          currentFile: Object,

          destinationText: {
            type: String,
            value: null
          },

          language: {
            type: String,
            value: 'en'
          },

          // localize resources
          resources: {
            value: _ => {
              return {
                'en': {
                  'UploadingTo': 'Uploading to',
                  'Uploading': 'Uploading...',
                  'LoadedDetail': '{current} of {total}',
                  'stop': 'Stop'
                },
                'es': {
                  'UploadingTo': 'Subiendo a',
                  'Uploading': 'Subiendo...',
                  'LoadedDetail': '{current} de {total}',
                  'stop': 'Detener'
                }
              };
            }
          }

        };
      }

      _stopClicked() {
        this.dispatchEvent(new CustomEvent('stop'));
      }

      _computeImageUrl(currentFile) {
        if (currentFile) {
          const isImage = /image\/.*/.exec(currentFile.type);

          if (isImage) {
            return URL.createObjectURL(currentFile);
          }
        }
      }

      _computeUploadingTitle(destinationText) {
        if (destinationText) {
          return this.localize('UploadingTo');
        }
        return this.localize('Uploading');
      }

      _computeLoadedDetail(currentFile, uploadingFilesSize) {
        let current = 1;

        for (let [file, detail] of this.uploadingFiles) {
          if (detail.state !== 'queued') {
            current += 1;
          }
        }

        return this.localize('LoadedDetail',
          'current', String(current),
          'total', uploadingFilesSize);
      }

    }

    customElements.define(FileUploaderProgressOverlay.is, FileUploaderProgressOverlay);

  </script>
</dom-module>