snapdrop/app/elements/donate-dialog/donate-dialog.html

<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<dom-module id="donate-dialog-impl">
    <template>
        <style>
        :host {
            display: block;
        }
        
        paper-dialog {
            max-width: 324px;
        }
        
        iron-icon {
            width: 72px;
            height: 72px;
            display: block;
            margin: 0 auto;
            margin-bottom: 4px;
            color: #4285f4;
        }
        
        p {
            padding: 0 48px;
            margin: 4px;
            @apply(--paper-font-subhead);
        }
        
        paper-dialog > a {
            text-decoration: none;
            color: #52524F;
            text-align: center;
        }
        
        @media screen and (max-width: 500px) {
            paper-dialog {
                margin: 24px
            }
        }
        </style>
        <paper-dialog id="dialog" with-backdrop entry-animation="scale-up-animation" exit-animation="fade-out-animation" modal>
            <h2>Do you like Snapdrop?</h2>
            <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&cmd=_donations&business=robin@capira.de&currency_code=USD&item_name=Snapdrop&shipping=0" target="_blank" dialog-confirm>
                <p>
                    <iron-icon icon="chat:local-cafe"></iron-icon>
                    <span>Donate a cup of Coffee <br>to the Developers!</span>
                </p>
            </a>
            <div class="buttons">
                <paper-button dialog-dismiss>No, thanks.</paper-button>
                <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&cmd=_donations&business=robin@capira.de&currency_code=USD&item_name=Snapdrop&shipping=0" target="_blank">
                    <paper-button dialog-confirm>Donate</paper-button>
                </a>
            </div>
        </paper-dialog>
    </template>
    <script>
    'use strict';
    Polymer({
        is: 'donate-dialog-impl',
        open: function() {
            this.$.dialog.open();
        }
    });
    </script>
</dom-module>
<dom-module id="donate-dialog">
    <script>
    'use strict';
    Polymer({
        is: 'donate-dialog',
        properties: {
            chance: {
                value: 1 / 6
            }
        },
        attached: function() {
            window.donateDialog = this;
        },
        get dialog() {
            var dialog = document.querySelector('donate-dialog-impl');
            if (!dialog) {
                dialog = Polymer.Base.create('donate-dialog-impl');
                document.body.appendChild(dialog);
            }
            return dialog;
        },
        open: function() {
            var chance = Math.random() <= this.chance;
            if (chance) {
                this.dialog.open();
            }
        }
    });
    </script>
</dom-module>