hexagon-card.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../proportional-height-box/proportional-height-box.html">
<!--
`hexagon-card`
A Hexagon-shaped card

If you desire a background color or image other than the white default you should add this to a child element with 100% width and height inserted using the slot mechanism like the demo.

Originally based upon the code by Brenna O'Brien at https://github.com/brenna/csshexagon (Brenna's website is http://brennaobrien.com)

Subsequently refactored using http://codepen.io/4dgaurav/pen/KDbBe/ by Geoffrey Crofte (http://twitter.com/geoffrey_crofte)

Subsequently refactored using an SVG-based clip-path applied with CSS.

@demo demo/index.html
-->

<dom-module id="hexagon-card">
    <template>
        <style>
            :host {
                display: block;
                overflow: hidden;
            }

            .hexagon.rounded {
              -webkit-clip-path: url(#rounded-hexclip);
              -moz-clip-path: url(#rounded-hexclip);
              clip-path: url(#rounded-hexclip);
            }
            .hexagon.pointy {
              -webkit-clip-path: url(#pointy-hexclip);
              -moz-clip-path: url(#pointy-hexclip);
              clip-path: url(#pointy-hexclip);
            }
            #hexagon {
                will-change: transform;
            }
            #inner-hexagon {
                background-color: white;
                position: relative;
            }
            #content {
                /*will-change: transform;*/
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
            }
        </style>
        <svg width="0" height="0">
            <defs>
                <clipPath id="rounded-hexclip" clipPathUnits="objectBoundingBox">
                    <path d="M.9232051.4l.0147334.031596.0090231.0336744L.95.5.9469616.5347296.9379385.568404.9232051.6l-.125.2165064-.0199962.0285575-.0246514.0246513L.725.8897114.693404.9044449l-.0336744.009023L.625.9165064h-.25L.3402704.9134679.306596.9044449.275.8897114.2464425.8697152.2217911.8450639.2017949.8165064.0767949.6.0620615.568404.0530384.5347296.05.5.0530384.4652704.0620615.431596.0767949.4l.125-.2165064.0199962-.0285575.0246514-.0246513L.275.1102886.306596.0955551l.0336744-.009023L.375.0834936h.25l.0347296.0030385.0336744.009023L.725.1102886l.0285575.0199962.0246514.0246513.0199962.0285575"/>
                </clipPath>
                <clipPath id="pointy-hexclip" clipPathUnits="objectBoundingBox">
                    <path d="M.95.5L.725.8897114h-.45L.05.5.275.1102886h.45z"/>
                </clipPath>
            </defs>
        </svg>
        <proportional-height-box width="200" height="200">
            <div id="hexagon" class="hexagon">
                <div id="inner-hexagon" class="hexagon">
                    <div id="content">
                        <content></content>
                    </div>
                </div>
            </div>
        </proportional-height-box>
    </template>

    <script>
        (function() {
            'use strict';

            Polymer({

                is: 'hexagon-card',

                properties: {
                    /* Number of degrees to rotate the hexagon */
                    rotate: {
                        type: Number,
                        value: 0,
                        observer: '_onRotate'
                    },

                    /* Number of pixels for the width of the border around the hexagon */
                    borderWidth: {
                        type: Number,
                        value: '1',
                        observer: '_onBorderWidth'
                    },
                    /* Color of the border around the hexagon. Any valid CSS Color is acceptible. */
                    borderColor: {
                        type: String,
                        value: '#000',
                        observer: '_onBorderColor'
                    },
                    /* Hexagon corner-style can be either `pointy` or `rounded` */
                    hexagonType: {
                        type: String,
                        value: 'rounded',
                        observer: '_onHexType'
                    }
                },

                _onRotate: function(newValue, oldValue) {
                    var hex = this.$['hexagon'];
                    var content = this.$['content'];
                    function doRotate() {
                        hex.style.transform = `rotate(${newValue}deg)`;
                        content.style.transform = `rotate(-${newValue}deg)`;
                    }
                    window.requestAnimationFrame(doRotate);
                },
                _onBorderWidth: function(newValue, oldValue) {
                    var hex = this.$['hexagon'];
                    var content = this.$['inner-hexagon'];
                    function doBorder() {
                        var borderWidth = `${newValue}px`;
                        var innerHeight = (hex.offsetHeight - (newValue * 2)) + 'px';
                        content.style.top = borderWidth;
                        content.style.left = borderWidth;
                        content.style.width = innerHeight;
                        content.style.height = innerHeight;
                    }
                    window.requestAnimationFrame(doBorder);
                },
                _onBorderColor: function(newValue, oldValue) {
                  var hex = this.$['hexagon'];
                  function doColor() {
                    hex.style.background = newValue;
                  }
                  window.requestAnimationFrame(doColor);
                },

                _onHexType: function(newValue, oldValue) {
                  if ((newValue !== 'rounded' && newValue !== 'pointy') || newValue === oldValue) {
                    return;
                  }
                  var hexagons = [this.$['hexagon'],this.$['inner-hexagon']];
                  function changeType() {
                    for (let hexagon of hexagons) {
                      hexagon.classList.remove(oldValue);
                      hexagon.classList.add(newValue);
                    }
                  }
                  window.requestAnimationFrame(changeType);
                }

            });

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