codo.js/codo.js at master · Coocla33/codo.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
// Global Variables
let names = 0;

// Create Codo Object
function Codo(query) {
    // Setup Basic Variables
    this.queue = [];
    this.animating = false;

    // Get Codo Element
    this.parent = $(query);

    // Generate Seperate Codo Name
    this.name = names;
    names++;

    // Update Codo HTML
    this.parent.html(`
        <div class="codo-container codo-${this.name}">
            <div class="codo codo-${this.name} old">
                ${this.parent.html()}
            </div>
            <div class="codo codo-${this.name} new">
                ${this.parent.html()}
            </div>
        </div>
    `);

    // Update Variables
    this.codo_container = $('.codo-container.codo-' + this.name);
    this.codo_old = $('.codo.codo-' + this.name + '.old');
    this.codo_new = $('.codo.codo-' + this.name + '.new');

    // Update Codo To New Text
    this.update = function (text) {
        if (text != undefined) {
            // Update Queue
            this.queue.push(text);
        }

        // Check if already animating
        if (!this.animating) {
            // Update animating
            this.animating = true;

            // Update text to be upcoming of queue
            text = this.queue[0];
            this.queue.shift();

            // Update New Text
            this.codo_new.html(text);

            // Update Dimensions
            this.update_dim();

            // Update Animation Classes
            this.codo_new.addClass('in');
            this.codo_old.addClass('out');

            // Change this to that
            let that = this;

            // Wait until animation is done (1.5 seconds)
            setTimeout(function () {
                // Update Old Text
                that.codo_old.html(text);

                // Update Size
                that.update_dim();

                // Remove Classes
                that.codo_old.removeClass('out');
                that.codo_new.removeClass('in');

                // Update Animating Variable
                that.animating = false;

                if (that.queue.length > 0) {
                    that.update();
                }
            }, 1500);
        }
    }

    // Update Dimension Of Codo
    this.update_dim = function () {
        // Reset Width/Height to max-content
        this.codo_old.width('max-content');
        this.codo_new.width('max-content');

        // Check if new text is bigger then old
        if (this.codo_new.width() > this.codo_old.width()) {
            this.codo_container.width(this.codo_new.width() + 'px');
            this.codo_container.height(this.codo_new.height() + 'px');
            this.codo_old.width(this.codo_new.width() + 'px');
            this.codo_old.height(this.codo_new.height() + 'px');
        } else {
            this.codo_container.width(this.codo_old.width() + 'px');
            this.codo_container.height(this.codo_old.height() + 'px');
            this.codo_new.width(this.codo_old.width() + 'px');
            this.codo_new.height(this.codo_old.height() + 'px');
        }
    }

    // Update Codo Dimensions
    this.update_dim();
}