paper-card.html

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-ripple/paper-ripple.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-image/iron-image.html">
<link rel="import" href="../paper-styles/element-styles/paper-material-styles.html">
<link rel="import" href="../paper-styles/default-theme.html">

<!--
Material design: [Cards](https://www.google.com/design/spec/components/cards.html)

`paper-card` is a container with a drop shadow.

Example:

<paper-card heading="Card Title">
<div class="card-content">Some content</div>
<div class="card-actions">
<paper-button>Some action</paper-button>
</div>
</paper-card>

Example - top card image:

<paper-card heading="Card Title" image="/path/to/image.png" alt="image">
...
</paper-card>

### Accessibility

By default, the `aria-label` will be set to the value of the `heading` attribute.

### Styling

The following custom properties and mixins are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--paper-card-background-color` | The background color of the card | `--primary-background-color`
`--paper-card-header-color` | The color of the header text | `#000`
`--paper-card-header` | Mixin applied to the card header section | `{}`
`--paper-card-header-text` | Mixin applied to the title in the card header section | `{}`
`--paper-card-header-image` | Mixin applied to the image in the card header section | `{}`
`--paper-card-header-image-text` | Mixin applied to the text overlapping the image in the card header section | `{}`
`--paper-card-content` | Mixin applied to the card content section| `{}`
`--paper-card-actions` | Mixin applied to the card action section | `{}`
`--paper-card` | Mixin applied to the card | `{}`

@group Paper Elements
@element paper-card
@demo demo/index.html
-->

<dom-module id="paper-card">
    <template>
        <style include="paper-material-styles">
            :host {
                display: inline-block;
                position: relative;
                box-sizing: border-box;
                background-color: var(--paper-card-background-color, var(--primary-background-color));
                border-radius: 2px;

                @apply --paper-font-common-base;
                @apply --paper-card;
            }

            /* IE 10 support for HTML5 hidden attr */
            [hidden] {
                display: none !important;
            }

            .header {
                position: relative;
                border-top-left-radius: inherit;
                border-top-right-radius: inherit;
                overflow: hidden;

                @apply --paper-card-header;
            }

            .header iron-image {
                display: block;
                width: 100%;
                height: 240px;
                --iron-image-width: 100%;
                --iron-image-height: 100%;
                pointer-events: none;

                @apply --paper-card-header-image;
            }

            .header .title-text {
                padding: 16px;
                font-size: 24px;
                font-weight: 400;
                color: var(--paper-card-header-color, #000);

                @apply --paper-card-header-text;
            }

            .header .title-text.over-image {
                position: absolute;
                bottom: 0;

                @apply --paper-card-header-image-text;
            }
            :host(:not([href])) paper-ripple{
                display: none;
            }
            
            paper-ripple{
                color: var(--paper-card-header-color, --paper-card-background-color);
            }
            
            a{
                text-decoration: none;
                position: absolute;
                width: 100%;
                height: 100%
            }
            :host ::slotted(.card-content) {
                padding: 16px;
                position: relative;

                @apply --paper-card-content;
            }

            :host ::slotted(.card-actions) {
                border-top: 1px solid #e8e8e8;
                padding: 5px 16px;
                position: relative;

                @apply --paper-card-actions;
            }

            :host([elevation="1"]) {
                @apply --paper-material-elevation-1;
            }

            :host([elevation="2"]) {
                @apply --paper-material-elevation-2;
            }

            :host([elevation="3"]) {
                @apply --paper-material-elevation-3;
            }

            :host([elevation="4"]) {
                @apply --paper-material-elevation-4;
            }

            :host([elevation="5"]) {
                @apply --paper-material-elevation-5;
            }
        </style>

        <div class="header">
            <a href="[[href]]"></a>
            <iron-image
                        hidden$="[[!image]]"
                        aria-hidden$="[[_isHidden(image)]]"
                        src="[[image]]"
                        alt="[[alt]]"
                        placeholder="[[placeholderImage]]"
                        preload="[[preloadImage]]"
                        fade="[[fadeImage]]"
                        sizing="[[imageSizing]]"></iron-image>
            <div hidden$="[[!heading]]" class$="title-text [[_computeHeadingClass(image)]]">[[heading]]</div>
            <paper-ripple></paper-ripple>
        </div>

        <slot></slot>
    </template>

    <script>
        Polymer({
            is: 'paper-card',

            properties: {
                /**
                 * The title of the card.
                 */
                heading: {
                    type: String,
                    value: '',
                    observer: '_headingChanged'
                },

                /**
                 * The url of the title image of the card.
                 */
                image: {
                    type: String,
                    value: ''
                },

                /**
                 * The text alternative of the card's title image.
                 */
                alt: {
                    type: String
                },
                /**
                 * If set, the card would use the hyper-ref to redirect the page.
                 */
                href: {
                    type: String,
                    value: ''
                },

                /**
                 * When `true`, any change to the image url property will cause the
                 * `placeholder` image to be shown until the image is fully rendered.
                 */
                preloadImage: {
                    type: Boolean,
                    value: false
                },

                /**
                 * When `preloadImage` is true, setting `fadeImage` to true will cause the
                 * image to fade into place.
                 */
                fadeImage: {
                    type: Boolean,
                    value: false
                },

                /**
                 * This image will be used as a background/placeholder until the src image has
                 * loaded. Use of a data-URI for placeholder is encouraged for instant rendering.
                 */
                placeholderImage: {
                    type: String,
                    value: null
                },

                /**
                 * The background-size of the image.
                 */
                imageSizing: {
                    type: String,
                    value: 'cover'
                },

                /**
                 * The z-depth of the card, from 0-5.
                 */
                elevation: {
                    type: Number,
                    value: 1,
                    reflectToAttribute: true
                },

                /**
                 * Set this to true to animate the card shadow when setting a new
                 * `z` value.
                 */
                animatedShadow: {
                    type: Boolean,
                    value: false
                },

                /**
                 * Read-only property used to pass down the `animatedShadow` value to
                 * the underlying paper-material style (since they have different names).
                 */
                animated: {
                    type: Boolean,
                    reflectToAttribute: true,
                    readOnly: true,
                    computed: '_computeAnimated(animatedShadow)'
                }
            },

            /**
             * Format function for aria-hidden. Use the ! operator results in the
             * empty string when given a falsy value.
             */
            _isHidden: function(image) {
                return image ? 'false' : 'true';
            },

            _headingChanged: function(heading) {
                var currentHeading = this.getAttribute('heading'),
                    currentLabel = this.getAttribute('aria-label');

                if (typeof currentLabel !== 'string' || currentLabel === currentHeading) {
                    this.setAttribute('aria-label', heading);
                }
            },

            _computeHeadingClass: function(image) {
                return image ? ' over-image' : '';
            },

            _computeAnimated: function(animatedShadow) {
                return animatedShadow;
            }
        });

    </script>
</dom-module>