paper-article.html

<!--
Copyright (c) 2017 wasc GbR. All rights reserved.
This code may only be used under the BSD style license found at https://wasc-io.github.io/LICENSE.txt
-->
<link rel="import" href="../polymer/polymer-element.html">
<!--
Simple paper Article element. This element is useful for seperating your content visually with color.
The element is able to display every material style color as background.

This example creates a contrastet article with a blue-600 background:

    <paper-article contrast color="blue-600">Basic Article</paper-article>

@demo demo/index.html
@polymer
@customElement
-->

<dom-module id="paper-article">
  <template>
    <style>
       :host {
        display: block;
      }

       :host([contrast]) {
        background-color: var(--contrast-background-color, #90A4AE);
        color: var(--contrast-color, #424242);
      }

      @media only screen and (min-width: 960px) {
        .article {
          padding: 10px 163px;
          margin: 0;
        }

         :host([slim]) .article {
          padding: 10px 273px;
          margin: 0;
        }
      }

      @media only screen and (min-width: 600px) and (max-width: 960px) {
        .article {
          padding: 10px 63px;
          margin: 0;
        }

         :host([slim]) .article {
          padding: 10px 103px;
          margin: 0;
        }
      }

      @media only screen and (max-width: 600px) {
        .article {
          padding: 10px 23px;
          margin: 0;
        }
      }
    </style>
    <div class="article">
      <section>
        <slot></slot>
      </section>
    </div>
  </template>

  <script>
    /** @polymerElement */
    class PaperArticle extends Polymer.Element {
      static get is() {
        return 'paper-article';
      }
      static get properties() {
        return {
          /** Wether or not the Element should inherit the background or set a custom one. */
          contrast: {
            type: Boolean,
            observer: '_colorChanged',
            value: false,
          },

          /** The Background-Color of the Element. */
          color: {
            type: String,
            observer: '_colorChanged',
            value: 'grey-300',
          },

          /** The Text-Color of the Element's content. */
          textColor: {
            type: String,
            observer: '_colorChanged',
            value: 'grey-200',
          },
        };
      }
      _colorChanged(newValue, oldValue) {
        // Dirty check change 
        if (newValue === oldValue) {
          return;
        }

        // Check if value is hex value
        if (this.color.includes('#')) {
          // Set background color to value
          const backgroundColor = this.color;
          let color = '';

          // strip hash from string
          const colorBuffer = this.color.substring(1);
          // convert rrggbb to decimal
          const rgb = parseInt(colorBuffer, 16);
          // extract RGB
          const r = (rgb >> 16) & 0xff;
          const g = (rgb >> 8) & 0xff;
          const b = (rgb >> 0) & 0xff;

          // calculate luma
          const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709

          // if the luma is to low switch to white text
          if (luma < 141) {
            color = '#fff';
          } else {
            color = '#424242';
          }

          // Set color and background color vars
          this.style.setProperty('--contrast-background-color', backgroundColor);
          this.style.setProperty('--contrast-color', color);

          // If the color is a CSS custom property
        } else if (this.color.includes('--')) {
          // Compute CSS Vars
          const backgroundColor = 'var(' + this.color + ')';
          const color = 'var(--paper-' + this.textColor + ')';

          // Set CSS Vars
          this.style.setProperty('--contrast-background-color', backgroundColor);
          this.style.setProperty('--contrast-color', color);
          // Fallback to paper-color           
        } else {
          // Prepare strings
          const backgroundColorBuffer = this.color.split('-')[0];
          const backgroundColorGradeBuffer = this.color.split('-')[1];
          let colorBuffer;

          // Switch text-color to white or black depending on background
          if (backgroundColorBuffer == 'grey' || backgroundColorBuffer == 'yellow') {
            colorBuffer = 'grey-800';
          } else {
            colorBuffer = 'grey-200';
          }

          // Compute CSS Vars
          const backgroundColor = 'var(--paper-' + backgroundColorBuffer + '-' + backgroundColorGradeBuffer + ')';
          const color = 'var(--paper-' + colorBuffer + ')';

          // Set CSS Vars
          this.style.setProperty('--contrast-background-color', backgroundColor);
          this.style.setProperty('--contrast-color', color);
        }
      }
    }


    window.customElements.define(PaperArticle.is, PaperArticle);
  </script>
</dom-module>