chars_counter.js

const St = imports.gi.St;
const Lang = imports.lang;
const Tweener = imports.ui.tweener;

const CharsCounter = new Lang.Class({
    Name: 'CharsCounter',

    _init: function() {
        this.actor = new St.BoxLayout({
            style_class: 'translator-chars-counter-box',
            visible: false
        });

        this._current_length = 0;
        this._max_length = 0;

        this._current_length_label = new St.Label({
            style_class: 'translator-chars-counter-text'
        });
        this._current_length_label.get_clutter_text().set_use_markup(true);

        this._max_length_label = new St.Label({
            style_class: 'translator-chars-counter-text'
        });
        this._max_length_label.get_clutter_text().set_use_markup(true);

        this._separator_label = new St.Label({
            style_class: 'translator-chars-counter-text',
            text: '/'
        });

        this.actor.add_actor(this._current_length_label);
        this.actor.add_actor(this._separator_label);
        this.actor.add_actor(this._max_length_label);
    },

    _show: function() {
        if(this.actor.visible) return;

        this.actor.opacity = 0;
        this.actor.show();

        Tweener.addTween(this.actor, {
            time: 0.3,
            transition: 'easeOutQuad',
            opacity: 255
        });
    },

    _hide: function() {
        if(!this.actor.visible) return;

        Tweener.addTween(this.actor, {
            time: 0.3,
            transition: 'easeOutQuad',
            opacity: 0,
            onComplete: Lang.bind(this, function() {
                this.actor.hide();
                this.actor.opacity = 255;
            })
        });
    },

    _maybe_show: function() {
        if(this._max_length < 1 || this._current_length < 1) {
            this._hide();
            return;
        }

        if(this.actor.visible) return;

        this._show();
    },

    _current_length_changed: function() {
        this._maybe_show();

        let markup;

        if(this._current_length >= this._max_length) {
            markup = '<span color="red"><b>%s</b></span>'.format(
                this._current_length.toString()
            );
        }
        else {
            markup = this._current_length.toString();
        }

        let clutter_text = this._current_length_label.get_clutter_text();

        Tweener.addTween(this._current_length_label, {
            time: 0.2,
            transition: 'easeOutQuad',
            opacity: 100,
            onComplete: Lang.bind(this, function() {
                clutter_text.set_markup(markup);

                Tweener.addTween(this._current_length_label, {
                    time: 0.2,
                    transition: 'easeOutQuad',
                    opacity: 255
                });
            })
        });

        clutter_text.set_markup(markup);
    },

    _max_length_changed: function() {
        this._maybe_show();
        let markup = '<b>%s</b>'.format(this._max_length.toString());
        let clutter_text = this._max_length_label.get_clutter_text();

        Tweener.addTween(this._max_length_label, {
            time: 0.2,
            transition: 'easeOutQuad',
            opacity: 100,
            onComplete: Lang.bind(this, function() {
                clutter_text.set_markup(markup);

                Tweener.addTween(this._max_length_label, {
                    time: 0.2,
                    transition: 'easeOutQuad',
                    opacity: 255
                });
            })
        });

        clutter_text.set_markup(markup);
        this._current_length_changed();
    },

    destroy: function() {
        this.actor.destroy();
    },

    get current_length() {
        return this._current_length;
    },

    set current_length(length) {
        this._current_length = length;
        this._current_length_changed();
    },

    get max_length() {
        return this._max_length;
    },

    set max_length(length) {
        this._max_length = length;
        this._max_length_changed();
    }
});