offthread-image.html

<link rel="import" href="../polymer/polymer-element.html">

<!--
`offthread-image`

@demo demo/index.html
-->
<dom-module id="offthread-image">
  <template>
    <style>
      :host {
        display: inline-block;
      }
    </style>
  </template>


  <script>

    (function() {

      // requestIdleCallback polyfill
      const requestIdleCallback = window.requestIdleCallback || function(callback) {
        requestAnimationFrame(_ => {
          callback({timeRemaining: _ => Infinity});
        });
      };

      // Whether this element can do its magic or fallback to an image.
      const canvasSupported = typeof createImageBitmap !== 'undefined' && typeof fetch !== 'undefined';
      let worker;

      /**
      * Create the offthread-image-worker from the supplied
      * resolved URL.
      */
      function createWorker(url) {
        worker = new Worker(url);
        worker.onmessage = function(event) {
          if (event.data.error) {
            document.dispatchEvent(new CustomEvent('offthread-image-worker-error', {
              detail: {
                error: event.data.error,
                url: event.data.url,
              },
              composed: true,
            }));
          } else if (event.data.imageBitmap) {
            document.dispatchEvent(new CustomEvent('offthread-image-worker-message', {
              detail: {
                imageBitmap: event.data.imageBitmap,
                url: event.data.url,
              },
              composed: true,
            }));
          }
        };
      }

      class OffthreadImage extends Polymer.Element {

        static get is() {return 'offthread-image';}

        static get properties() {
          return {

            /**
            * The URL of the image.
            */
            src: {
              type: String,
              reflectToAttribute: true,
              observer: '_srcChanged'
            },

            /**
            * Sets a sizing option for the image.  Valid values are `contain` (full
            * aspect ratio of the image is contained within the element and
            * letterboxed) or `cover` (image is cropped in order to fully cover the
            * bounds of the element), or `null` (default: image takes natural size).
            */
            sizing: {
              type: String,
              value: null
            },

            fadein: {
              type: Boolean,
              value: true,
            },

            _imageBitmap: Object,

            _ironImageLoaded: Boolean,

            _element: Object,

            _isAttached: Boolean,

          };
        }

        static get observers() {
          return [
            '_imageBitmapChanged(_imageBitmap, _isAttached)'
          ];
        }

        constructor() {
          super();
          this._onWorkerMessageReceived = this._onWorkerMessageReceived.bind(this);

          if (canvasSupported && !worker) {
            createWorker(this.resolveUrl('offthread-image-worker.js'));
          }
        }

        connectedCallback() {
          super.connectedCallback();
          document.addEventListener('offthread-image-worker-message',
            this._onWorkerMessageReceived);
          this._isAttached = true;
        }

        disconnectedCallback() {
          this._isAttached = false;
          document.removeEventListener('offthread-image-worker-message',
            this._onWorkerMessageReceived);
          super.disconnectedCallback();
        }

        /**
         * When a message is received from the worker, check if the url
         * bitmap is for our src first and update instance bitmap
         */
        _onWorkerMessageReceived(event) {
          const url = event.detail.url;
          if (url === this.src) {
            this._imageBitmap = event.detail.imageBitmap;
          }
        }

        /**
         * This needs to happend Attached
         */
        _imageBitmapChanged(imageBitmap, isAttached) {
          if (imageBitmap && isAttached) {
            Polymer.RenderStatus.afterNextRender(null, _ => {
              this._renderCanvas(imageBitmap);
            });
          }
        }

        /**
         * This can happend detached
         */
        _srcChanged(src) {
          if (!src) {
            return;
          }

          if (canvasSupported) {
            fetch(src).then(response => {
              if (!response.ok) {
                this.dispatchEvent(new CustomEvent('error', {
                  composed: true,
                  detail: {
                    error: {
                      status: response.status,
                      text: response.statusText,
                    }
                  },
                }));
                throw new Error('Image not found: ' + src);
              }
              return response.blob();
            }).then(blob => {
              worker.postMessage({
                blob: blob,
                url: src,
              });
            });
          } else {
            this._renderImage(src);
          }
        }

        _renderCanvas(imageBitmap) {
          const renderCanvas = (deadline) => {
            if (deadline.timeRemaining() < 0) {
              return requestIdleCallback(renderCanvas);
            }

            if (this._element) {
              this._element.remove();
            }

            const rect = this.getBoundingClientRect();
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');

            canvas.width = rect.width;
            canvas.height = rect.height;

            if (this.fadein) {
              this.style.opacity = 0;
            }
            this.shadowRoot.appendChild(canvas);

            switch (this.sizing) {
              case 'cover':
                this._drawImageFitted(ctx, imageBitmap);
                break;
              case 'contain':
                this._drawImageScaled(ctx, imageBitmap);
                break;
              default:
                this._drawImageFitted(ctx, imageBitmap, 0, 0, imageBitmap.width, imageBitmap.height);
            }

            if (this.fadein) {
              const animation = this.animate([{
                  opacity: '0',
                }, {
                  opacity:'1',
                }
              ], {duration: 100});
              animation.onfinish = _ => this.style.opacity = 1;
            }

            this._element = canvas;
            this.dispatchEvent(new CustomEvent('render', {composed: true}));
          };

          requestIdleCallback(renderCanvas);
        }

        _renderImage(src) {
          if (!this._ironImageLoaded) {
            Polymer.Base.importHref(this.resolveUrl('../iron-image/iron-image.html'));
            this._ironImageLoaded = true;
          }

          const renderImage = (deadline) => {
            if (deadline.timeRemaining() < 16) {
              return requestIdleCallback(renderImage);
            }

            if (this._element) {
              this._element.remove();
            }

            const ironImage = document.createElement('iron-image');
            const notify = _ => this.dispatchEvent(new CustomEvent('render', {composed: true}));
            ironImage.addEventListener('loaded-changed', notify);
            ironImage.src = src;
            ironImage.sizing = this.sizing;
            ironImage.style.height = '100%';
            ironImage.style.width = '100%';

            this.shadowRoot.appendChild(ironImage);
            this._element = ironImage;
          };

          requestIdleCallback(renderImage);
        }

        // Source: http://stackoverflow.com/a/23105310
        _drawImageScaled(ctx, img) {
          const canvas = ctx.canvas;
          const hRatio = canvas.width / img.width;
          const vRatio = canvas.height / img.height;
          const ratio = Math.min (hRatio, vRatio);
          const centerShift_x = (canvas.width - img.width * ratio) / 2;
          const centerShift_y = (canvas.height - img.height * ratio) / 2;

          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.drawImage(img, 0,0, img.width, img.height,
            centerShift_x, centerShift_y, img.width * ratio, img.height * ratio);
        }

        // Source: http://stackoverflow.com/a/21961894
        _drawImageFitted(ctx, img, x, y, w, h, offsetX, offsetY) {
          if (arguments.length === 2) {
            x = y = 0;
            w = ctx.canvas.width;
            h = ctx.canvas.height;
          }

          // default offset is center
          offsetX = typeof offsetX === "number" ? offsetX : 0.5;
          offsetY = typeof offsetY === "number" ? offsetY : 0.5;

          // keep bounds [0.0, 1.0]
          if (offsetX < 0) offsetX = 0;
          if (offsetY < 0) offsetY = 0;
          if (offsetX > 1) offsetX = 1;
          if (offsetY > 1) offsetY = 1;

          let iw = img.width,
              ih = img.height,
              r = Math.min(w / iw, h / ih),
              nw = iw * r,   // new prop. width
              nh = ih * r,   // new prop. height
              cx, cy, cw, ch, ar = 1;

          // decide which gap to fill
          if (nw < w) ar = w / nw;
          if (Math.abs(ar - 1) < 1e-14 && nh < h) ar = h / nh;  // updated
          nw *= ar;
          nh *= ar;

          // calc source rectangle
          cw = iw / (nw / w);
          ch = ih / (nh / h);

          cx = (iw - cw) * offsetX;
          cy = (ih - ch) * offsetY;

          // make sure source rectangle is valid
          if (cx < 0) cx = 0;
          if (cy < 0) cy = 0;
          if (cw > iw) cw = iw;
          if (ch > ih) ch = ih;

          // fill image in dest. rectangle
          ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h);
        }

      }

      customElements.define(OffthreadImage.is, OffthreadImage);

    }());
  </script>
</dom-module>