noticeable-words-carousel.html

gistfile1.txt

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<dom-module id="noticeable-words-carousel">
    <template>
        <style>
            :host {
                box-sizing: border-box;
                @apply(--typed-text-options);
            }

            .blink {
                -webkit-animation: 1s blink infinite;
                -moz-animation: 1s blink infinite;
                -ms-animation: 1s blink infinite;
                -o-animation: 1s blink infinite;
                animation: 1s blink infinite;
                @apply(--typed-text-cursor-blink);
            }

            @keyframes blink {
                0% {
                    opacity: 1;
                    @apply(--typed-text-cursor-blink-0);
                }
                50% {
                    opacity: 0;
                    @apply(--typed-text-cursor-blink-50);
                }
                100% {
                    opacity: 1;
                    @apply(--typed-text-cursor-blink-100);
                }
            }

            @-webkit-keyframes blink {
                0% {
                    opacity: 1;
                    @apply(--typed-text-cursor-blink-0);
                }
                50% {
                    opacity: 0;
                    @apply(--typed-text-cursor-blink-50);
                }
                100% {
                    opacity: 1;
                    @apply(--typed-text-cursor-blink-100);
                }
            }

            @-moz-keyframes blink {
                0% {
                    opacity: 1;
                    @apply(--typed-text-cursor-blink-0);
                }
                50% {
                    opacity: 0;
                    @apply(--typed-text-cursor-blink-50);
                }
                100% {
                    opacity: 1;
                    @apply(--typed-text-cursor-blink-100);
                }
            }

            .cursor {
                @apply(--typed-text-cursor);
            }
        </style>
        <div style="display: inline; display: none;">
            <slot id="words"></slot>
        </div>
        <div style="display: inline-block; opacity: 0.5">{{typed}}<span class$="cursor [[blink]]">{{cursor}}</span>
        </div>
    </template>

    <script>
        class NoticeableWordsCarousel extends Polymer.Element {

            static get is() {
                return 'noticeable-words-carousel';
            }

            static get observedAttributes() {
                return ['data-texts'];
            }

            static get properties() {
                return {
                    blink: {
                        type: Boolean,
                        value: true
                    },
                    cursor: {
                        type: String,
                        value: ''
                    },
                    delay: {
                        type: Number,
                        value: 2500
                    },
                    deletionDelay: {
                        type: Number,
                        value: 40
                    },
                    delimiter: {
                        type: String,
                        value: ', '
                    },
                    loop: {
                        type: Boolean,
                        value: true
                    },
                    words: {
                        type: Array,
                        value: []
                    },
                    writingDelay: {
                        type: Number,
                        value: 60
                    },
                    typed: {
                        type: String
                    },

                    _enabled: {
                        type: Boolean,
                        value: true
                    },
                    _text: {
                        type: String,
                        value: ''
                    },
                    _textIndex: {
                        type: Number,
                        value: -1
                    },
                    _timer: {
                        type: Object
                    },
                    _wordIndex: {
                        type: Number,
                        value: 0
                    }
                }
            }

            ready() {
                super.ready();

                this.words = this.$.words.assignedNodes()[0].data.trim().split(this.delimiter);
                this.typed = this.words[0];

                this._timer = this.async(this._typing, 500);
            }

            async(method, timeout) {
                return setTimeout(() => method.bind(this)(), timeout);
            }

            disable() {
                if (this._enabled) {
                    this._enabled = false;

                    clearTimeout(this._timer);

                    this._wordIndex = 0;
                    this._timer = null;

                    this.typed = this.words[0];
                }
            }

            enable() {
                if (!this._enabled) {
                    this._enabled = true;
                    this._timer = this.async(this._deleting, 1500);
                }
            }

            _typing() {
                if (this._enabled) {
                    requestAnimationFrame(() => {
                        this._textIndex += 1;

                        const word = this.words[this._wordIndex];

                        this.typed = word.substr(0, this._textIndex);

                        if (this._enabled) {
                            if (this._textIndex <= word.length) {
                                this._timer = this.async(this._typing, this.writingDelay);
                            } else {
                                if (this.loop || this._wordIndex !== this.words.length - 1) {
                                    this._timer = this.async(this._deleting, this.delay);
                                }
                            }
                        }
                    });
                }
            }

            _deleting() {
                requestAnimationFrame(() => {
                    this._textIndex -= 1;
                    if (this._textIndex >= 0) {
                        this.typed = this.words[this._wordIndex].substr(0, this._textIndex - 1);
                        this._timer = this.async(this._deleting, this.deletionDelay);
                    } else {
                        this._wordIndex = (this._wordIndex + 1) % this.words.length;
                        this._typing();
                    }
                });
            }


        }

        window.customElements.define(NoticeableWordsCarousel.is, NoticeableWordsCarousel);
    </script>
</dom-module>