promo-tile.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../materializecss-styles/materializecss-styles.html">
<link rel="import" href="../hax-body-behaviors/hax-body-behaviors.html">
<link rel="import" href="../schema-behaviors/schema-behaviors.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../iron-icon/iron-icon.html">

<!--
`promo-tile`
A LRN element

@demo demo/index.html

@microcopy - the mental model for this element
 -
 -

-->

<dom-module id="promo-tile">
  <template>
    <style>
      :host {
        display: block;
        --tile-image: '';
        --font-color: #fff;
        --hover-background-color: #e2801e;
        --hover-link: #e0e0e0;
      }

      a {
        text-decoration: none;
      }

      #container {
        width: 100%;
        height: auto;
      }

      .front_card {
        display: flex;
        flex-direction: column-reverse;
      }

      .back_card {
        background-color: var(--hover-background-color);
        height: 460px;
        opacity: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
      }

      @media screen and (max-width: 700px) {
        .back_card {
          justify-content: flex-start;
          align-items: center;
          padding-top: 25px;
        }
      }

      :host[hover] #container .back_card,
      :host:focus-within #container .back_card {
        opacity: 0.9;
        transition: all .3s ease-in-out;
      }

      :host[hover] #container .front_card .front_title {
        opacity: 0;
        transition: all .3s ease-in-out;
      }

      .image {
        background-image: var(--tile-image);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 100%;
        justify-content: center;
      }

      .front_title {
        opacity: 1;
        font-size: 2.5em;
        color: #fff;
        padding-bottom: 36px;
        position: absolute;
        display: flex;
        align-self: center;
        text-shadow: 1px 1px 2px #000
      }

      @media screen and (max-width: 700px) {
        .front_title {
          font-size: 2em;
          padding-bottom: 14px;
        }
      }

      .back_title {
        opacity: 1;
        font-size: 2.5em;
        color: var(--font-color);
        display: flex;
        justify-content: center;
      }

      @media screen and (max-width: 700px) {
        .back_title {
          font-size: 2em;
          padding-bottom: 5px;
        }
      }

      .back_content {
        color: var(--font-color);
        font-size: 1em;
        text-align: center;
        padding: 0 15px;
        font-size: 1.2em;
        font-weight: 100;
      }

      .learn_more {
        display: flex;
        justify-content: center;
        position: relative;
        bottom: -20px;
      }

      paper-button#learn {
        font-size: 1em;
        color: var(--font-color);
        border: solid 1px #fff;
        border-radius: 0;
      }

      @media screen and (max-width: 700px) {
        paper-button#learn {
          margin-top: 20px;
        }
      }

      paper-button#learn:hover,
      paper-button#learn:focus {
        background-color: #363533;
      }

      :host[hover] .learn_more paper-button {
        color: var(--hover-link);
      }


      @media screen and (max-width: 700px) {
        #container>* {
          overflow: hidden;
          height: 250px;
        }
      }
    </style>

    <div id="container">
      <div class="front_card">
        <div class="front_title">[[title]]</div>
        <div id="front_image" class="image" alt="[[alt]]">
          <div class="back_card" id="cardBack" on-click="activateBtn">
            <div class="back_title">[[title]]</div>
            <div class="back_content">
              <slot></slot>
            </div>
            <div class="learn_more">
              <a href="[[url]]" id="link" target$="[[_urlTarget(url)]]">
                <paper-button id="learn" noink>Learn More
                  <iron-icon icon="chevron-right"></iron-icon>
                </paper-button>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>

  <script>
    Polymer({

      is: 'promo-tile',
      behaviors: [HAXBehaviors.PropertiesBehaviors, MaterializeCSSBehaviors.ColorBehaviors, SchemaBehaviors.Schema],
      properties: {
        /**
         * Image source
         */
        image: {
          type: String,
          value: '',
          reflectToAttribute: true,
        },
        /**
         * Alt text for image
         */
        alt: {
          type: String,
          value: '',
          reflectToAttribute: true,
        },
        /**
         * Title of tile
         */
        title: {
          type: String,
          value: '',
          reflectToAttribute: true,
        },
        /**
          * Url for tile
          */
        url: {
          type: String,
          value: '',
          reflectToAttribute: true,
        },
        /**
          * Hover state
          */
        hover: {
          type: Boolean,
          value: false,
          reflectToAttribute: true,
        },


      },
      observers: [
        '__updateStyles(image)'
      ],

      listeners: {
        'mouseover': '__hoverState',
        'mouseout': '__hoverState',
      },


      /**
       * Attached to the DOM, now fire.
       */
      attached: function () {
        // Establish hax property binding
        let props = {
          'canScale': true,
          'canPosition': true,
          'canEditSource': false,
          'gizmo': {
            'title': 'Promo-Tile',
            'description': 'A tile element for promoting content.',
            'icon': 'icons:dashboard',
            'color': 'orange',
            'groups': ['Content', 'Media'],
            'handles': [
              {
                'type': 'content',
                'source': 'image',
                'title': 'citation',
                'url': 'source',
              }
            ],
            'meta': {
              'author': 'LRNWebComponents'
            }
          },
          'settings': {
            'quick': [
              {
                'property': 'title',
                'title': 'Title',
                'description': 'The title of the tile',
                'inputMethod': 'textfield',
                'icon': 'editor:title',
              },
              {
                'property': 'image',
                'title': 'Image',
                'description': 'The image of the tile',
                'inputMethod': 'textfield',
                'icon': 'editor:insert-photo',
              },
              {
                'property': 'url',
                'title': 'Link',
                'description': 'The link of the tile',
                'inputMethod': 'textfield',
                'icon': 'editor:insert-link',
              },
            ],
            'configure': [
              {
                'property': 'title',
                'title': 'Title',
                'description': 'The title of the tile',
                'inputMethod': 'textfield',
                'icon': 'editor:title',
              },
              {
                'property': 'image',
                'title': 'Image',
                'description': 'The image of the tile',
                'inputMethod': 'textfield',
                'icon': 'editor:insert-photo',
              },
              {
                'property': 'alt',
                'title': 'Alt',
                'description': 'The alt text for the image',
                'inputMethod': 'textfield',
                'icon': 'editor:mode-edit',
              },
              {
                'property': 'url',
                'title': 'Link',
                'description': 'The link of the tile',
                'inputMethod': 'textfield',
                'icon': 'editor:insert-link',
              },
            ],
            'advanced': [
            ]
          }
        };
        this.setHaxProperties(props);
      },

      __updateStyles: function (image) {
        this.customStyle['--tile-image'] = `url(${image})`;
        this.updateStyles();
      },

      /**
       * Internal function to check if a url is external
       */
      _outsideLink: function (url) {
        if (url.indexOf('http') != 0) return false;
        var loc = location.href, path = location.pathname,
          root = loc.substring(0, loc.indexOf(path));
        return url.indexOf(root) != 0;
      },

      /**
       * If url is external, open link in new window, otherwise open link in same window.
       */
      _urlTarget: function (url) {
        if (url) {
          const external = this._outsideLink(url);
          if (external) {
            return "_blank";
          }
        }
        return false;
      },
      activateBtn: function () {
        if (this.hover) {
          const link = this.$.link;
          if (window.innerWidth > 700) {
            link.click();
          }
        }
      },
      __hoverState: function () {
        this.hover = !this.hover;
      }
    });
  </script>
</dom-module>