type-write.html

<link rel="import" href="../polymer/polymer.html">
<dom-module id="type-write">
    <template>
        <style>
         :host {
            display: block;
            color: black;
        }

        .cursorAnimation {
            -webkit-animation: 1s blink step-end infinite;
            -moz-animation: 1s blink step-end infinite;
            -ms-animation: 1s blink step-end infinite;
            -o-animation: 1s blink step-end infinite;
            animation: 1s blink step-end infinite;
        }

        @keyframes "blink" {
            from,
            to {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
        }

        @-moz-keyframes blink {
            from,
            to {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
        }

        @-webkit-keyframes "blink" {
            from,
            to {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
        }

        @-ms-keyframes "blink" {
            from,
            to {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
        }

        @-o-keyframes "blink" {
            from,
            to {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
        }
        </style>
        <!-- Element content -->
        <span style$="color:[[color]];">
            <!-- inline binding for custom css -->
            <span class="wrap" style$="color:[[color]];">
                [[_txt]]
                <span class$="[[animationClass]]" style$="color:[[color]];display:[[hide]]" hidden="[[_completedRun]]">[[cursorType]]</span>
        </span>
        </span>
    </template>
    <script>
    Polymer({
        is: 'type-write',
        properties: {
            /* 
            Properties for the Customization of the element
            */

            // Text array to display
            textArray: {
                type: Array,
                value: function() {
                    return ["The type-write webcomponent", "Feel free to use or improve this element"]
                }
            },

            // Loop control
            loop: {
                type: Boolean,
                value: true
            },

            // Time untill remove starts (milliseconds)
            timeTillRemove: {
                type: Number,
                value: 800
            },

            // Time untill write starts (milliseconds)
            timeTillWrite: {
                type: Number,
                value: 400
            },

            // Writing speed (milliseconds)
            writeSpeed: {
                type: Number,
                value: 80
            },

            // Remove speed (milliseconds)
            removeSpeed: {
                type: Number,
                value: 3
            },

            // Cursor
            cursorType: {
                type: String,
                value: '|'
            },

            // Togle blinking cursor
            cursorAnimation: {
                type: Boolean,
                value: true,
                observer: '_setCursorAnimation'
            },
            // Cursor and text color (white, rgb(255,255,255, #ffffff)
            color: {
                type: String,
                value: 'black'
            },

            // Stop the animation
            stop: {
                type: Boolean,
                value: false,
                observer: '_toggleAnimation'
            },

            /* 
                Properties that are function related 
            */
            // Array counter
            _loopTracker: {
                type: Number,
                value: 0
            },

            // Fires after write is complete (no loop)
            completedRun: {
                type: Boolean,
                value: false,
                notify: true,
                readOnly: true
            },

            // Text item
            _txt: {
                type: String,
                value: ''
            },

            // Deletig state
            _isDeleting: {
                type: Boolean,
                value: false
            },

            // Fully written item
            _fullTxt: {
                type: String
            }
        },

        attached: function() {
            if (this.textArray) {
                this._controlWrite();
            }
        },

        _toggleAnimation: function() {
            this._controlWrite();
        },

        // Controls the write and remove 
        _controlWrite: function() {
            
            if (this.stop == true) {
                this.hide = 'none';
                return
            } else {
                this.hide = 'initial';
            }
            if (!this.textArray || isNaN(this._loopTracker)) {return}
            
            var that = this;

            var i = this._loopTracker % this.textArray.length;
            if (this._loopTracker >= this.textArray.length) {
                if (!this.loop) {
                    // if loop is set to falls stop after one run
                    this.set('_completedRun', true);
                    return
                }
                this._loopTracker = 0;
                var i = this._loopTracker % this.textArray.length;
            }
            this._fullTxt = this.textArray[i];

            if (!this._isDeleting && this._txt === this._fullTxt) {
                // text is fully written start deleting
                setTimeout(function() {
                    that._isDeleting = true;
                    that._delete();
                    return
                }, this.timeTillRemove);

            } else if (this._isDeleting && this._txt === '') {
                // text is fully removed start writing the next item
                setTimeout(function() {
                    that._isDeleting = false;
                    that._loopTracker++;
                    that._controlWrite();
                    return
                }, this.timeTillWrite);

            } else if (this._isDeleting) {
                // not finished deleting go on
                if (this.removeSpeed <= 1) {
                    var instand = true;
                }
                setTimeout(function() {
                    that._delete(instand);
                    return
                }, this.removeSpeed);

            } else if (!this._isDeleting) {
                // not finished writing go on
                setTimeout(function() {
                    that._write();
                    return
                }, this.writeSpeed);
            }
        },

        // Writes characters 
        _write: function() {
            this._txt = this._fullTxt.substring(0, this._txt.length + 1);
            this._controlWrite();
        },

        // Removes characters
        _delete: function(instand) {
            if (!this._fullTxt) {return}
            if (instand == true) {
                this._txt = '';
            } else {
                this._txt = this._fullTxt.substring(0, this._txt.length - 1);
            }
            this._controlWrite();
        },

        // Toggle the cursor animtion
        _setCursorAnimation: function(animation) {
            if (animation) {
                this.set('animationClass', 'cursorAnimation');
            } else {
                this.set('animationClass', '');
            }
        }

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