rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.html

<link rel="import" href="../../../../../../bower_components/paper-button/paper-button.html">
<link rel="import"
      href="../../../../../../bower_components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<link rel="import" href="../rhodecode-unsafe-html/rhodecode-unsafe-html.html">
<dom-module id="rhodecode-toast">
    <template>
        <style include="shared-styles">
            /* inset border for buttons - does not work in ie */
            /* rounded borders */
            /* rounded borders - bottom only */
            /* rounded borders - top only */
            /* text shadow */
            /* centers text in a circle - input diameter of circle and color */
            /* pill version of the circle */
            .absolute-center {
                margin: auto;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
            }

            .top-left-rounded-corner {
                -webkit-border-top-left-radius: 2px;
                -khtml-border-radius-topleft: 2px;
                border-top-left-radius: 2px;
            }

            .top-right-rounded-corner {
                -webkit-border-top-right-radius: 2px;
                -khtml-border-radius-topright: 2px;
                border-top-right-radius: 2px;
            }

            .bottom-left-rounded-corner {
                -webkit-border-bottom-left-radius: 2px;
                -khtml-border-radius-bottomleft: 2px;
                border-bottom-left-radius: 2px;
            }

            .bottom-right-rounded-corner {
                -webkit-border-bottom-right-radius: 2px;
                -khtml-border-radius-bottomright: 2px;
                border-bottom-right-radius: 2px;
            }

            .top-left-rounded-corner-mid {
                -webkit-border-top-left-radius: 2px;
                -khtml-border-radius-topleft: 2px;
                border-top-left-radius: 2px;
            }

            .top-right-rounded-corner-mid {
                -webkit-border-top-right-radius: 2px;
                -khtml-border-radius-topright: 2px;
                border-top-right-radius: 2px;
            }

            .bottom-left-rounded-corner-mid {
                -webkit-border-bottom-left-radius: 2px;
                -khtml-border-radius-bottomleft: 2px;
                border-bottom-left-radius: 2px;
            }

            .bottom-right-rounded-corner-mid {
                -webkit-border-bottom-right-radius: 2px;
                -khtml-border-radius-bottomright: 2px;
                border-bottom-right-radius: 2px;
            }

            .alert {
                margin: 10px 0;
            }

            .toast-close {
                margin: 0;
                float: right;
                cursor: pointer;
            }

            .toast-message-holder {
                background: rgba(255, 255, 255, 0.25);
            }

            .toast-message-holder.fixed {
                position: fixed;
                padding: 10px 0;
                margin-left: 10px;
                margin-right: 10px;
                top: 0;
                left: 0;
                right: 0;
                z-index: 100;
            }
        </style>

        <template is="dom-if" if="[[hasToasts]]">
            <div class$="container toast-message-holder [[conditionalClass(isFixed)]]">
                <template is="dom-repeat" items="[[toasts]]">
                    <div class$="alert alert-[[item.level]]">
                        <div on-click="dismissNotification" class="toast-close" index-pos="[[index]]">
                            <span>[[_gettext('Close')]]</span>
                        </div>
                        <rhodecode-unsafe-html text="[[item.message]]"></rhodecode-unsafe-html>
                    </div>
                </template>
            </div>
        </template>
    </template>

    <script>

        class RhodecodeToast extends Polymer.mixinBehaviors([Polymer.IronA11yKeysBehavior], Polymer.Element) {

            static get is() {
                return 'rhodecode-toast';
            }

            static get properties() {
                return {
                    toasts: {
                        type: Array,
                        value() {
                            return []
                        }
                    },
                    isFixed: {
                        type: Boolean,
                        value: false
                    },
                    hasToasts: {
                        type: Boolean,
                        computed: '_computeHasToasts(toasts.*)'
                    },
                    keyEventTarget: {
                        type: Object,
                        value() {
                            return document.body;
                        }
                    }
                }
            }

            get keyBindings() {
                return {
                    'esc:keyup': '_hideOnEsc'
                }
            }

            static get observers() {
                return [
                    '_changedToasts(toasts.splices)'
                ]
            }

            _hideOnEsc(event) {
                return this.dismissNotifications();
            }

            _computeHasToasts() {
                return this.toasts.length > 0;
            }

            _debouncedCalc() {
                // calculate once in a while
                this.debounce('debouncedCalc', this.toastInWindow, 25);
            }

            conditionalClass() {
                return this.isFixed ? 'fixed' : '';
            }

            toastInWindow() {
                if (!this._headerNode) {
                    return true
                }
                var headerHeight = this._headerNode.offsetHeight;
                var scrollPosition = window.scrollY;

                if (this.isFixed) {
                    this.isFixed = 1 <= scrollPosition;
                }
                else {
                    this.isFixed = headerHeight <= scrollPosition;
                }
            }

            connectedCallback() {
                super.connectedCallback();
                this._headerNode = document.querySelector('.header', document);
                this.listen(window, 'scroll', '_debouncedCalc');
                this.listen(window, 'resize', '_debouncedCalc');
                this._debouncedCalc();
            }

            _changedToasts(newValue, oldValue) {
                $.Topic('/favicon/update').publish({count: this.toasts.length});
            }

            dismissNotification(e) {
                $.Topic('/favicon/update').publish({count: this.toasts.length - 1});
                var idx = e.target.parentNode.indexPos
                this.splice('toasts', idx, 1);

            }

            dismissNotifications() {
                $.Topic('/favicon/update').publish({count: 0});
                this.splice('toasts', 0);
            }

            handleNotification(data) {
                if (!templateContext.rhodecode_user.notification_status && !data.message.force) {
                    // do not act if notifications are disabled
                    return
                }
                this.push('toasts', {
                    level: data.message.level,
                    message: data.message.message
                });
            }

            _gettext(x){
                return _gettext(x)
            }

        }

        customElements.define(RhodecodeToast.is, RhodecodeToast);

    </script>
</dom-module>