gnome-shell/js/ui/widgetBox.js

/* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */

const Big = imports.gi.Big;
const Clutter = imports.gi.Clutter;
const Shell = imports.gi.Shell;
const Lang = imports.lang;
const Mainloop = imports.mainloop;

const Main = imports.ui.main;
const Tweener = imports.ui.tweener;
const Widget = imports.ui.widget;

const WIDGETBOX_BG_COLOR = new Clutter.Color();
WIDGETBOX_BG_COLOR.from_pixel(0xf0f0f0ff);
const BLACK = new Clutter.Color();
BLACK.from_pixel(0x000000ff);

const WIDGETBOX_PADDING = 2;
const ANIMATION_TIME = 0.5;
const POP_IN_LAG = 250; /* milliseconds */

function WidgetBox(widget) {
    this._init(widget);
}

WidgetBox.prototype = {
    _init: function(widget) {
	if (widget instanceof Widget.Widget)
	    this._widget = widget;
	else {
	    let ctor = this._ctorFromName(widget);
            this._widget = new ctor();
	}

        if (!this._widget.actor)
            throw new Error("widget has no actor");
        else if (!this._widget.title && !this._widget.collapsedActor)
            throw new Error("widget has neither title nor collapsedActor");

        this.state = this._widget.state = Widget.STATE_EXPANDED;

        // The structure of a WidgetBox:
        //
        // The top level is a Clutter.Group, which exists to make
        // pop-out work correctly; when another widget pops out, its
        // width will increase, which will in turn cause the sidebar's
        // width to increase, which will cause the sidebar to increase
        // the width of each of its children (the WidgetBoxes). But we
        // don't want the non-popped-out widgets to expand, so we make
        // the top-level actor be a Clutter.Group, which will accept
        // the new width from the Sidebar, but not impose it on its
        // own child.
        //
        // Inside the toplevel group is a horizontal Big.Box
        // containing 2 Clutter.Groups; one for the collapsed state
        // (cgroup) and one for the expanded state (egroup). Each
        // group contains a single vertical Big.Box (cbox and ebox
        // respectively), which have the appropriate fixed width. The
        // cbox contains either the collapsed widget actor or else the
        // rotated title. The ebox contains the horizontal title (if
        // any), separator line, and the expanded widget actor. (If
        // the widget doesn't have a collapsed actor, and therefore
        // supports pop-out, then it will also have a vertical line
        // between the two groups, which will only be shown during
        // pop-out.)
        //
        // In the expanded view, cgroup is hidden and egroup is shown.
        // When animating to the collapsed view, first the ebox is
        // slid offscreen by giving it increasingly negative x
        // coordinates within egroup. Then once it's fully offscreen,
        // we hide egroup, show cgroup, and slide cbox back in in the
        // same way.
        //
        // The pop-out view works similarly to the second half of the
        // collapsed-to-expanded transition, except that the
        // horizontal title gets hidden to avoid duplication.

        this.actor = new Clutter.Group();
        this._hbox = new Big.Box({ background_color: WIDGETBOX_BG_COLOR,
                                   padding_top: WIDGETBOX_PADDING,
                                   padding_bottom: WIDGETBOX_PADDING,
                                   padding_right: WIDGETBOX_PADDING,
                                   // Left padding is here to make up for
                                   // the X offset used for the sidebar
                                   // to hide its rounded corners
                                   padding_left: 2 * WIDGETBOX_PADDING,
                                   spacing: WIDGETBOX_PADDING,
                                   corner_radius: WIDGETBOX_PADDING,
                                   orientation: Big.BoxOrientation.HORIZONTAL,
                                   reactive: true });
        this.actor.add_actor(this._hbox);

        this._cgroup = new Clutter.Group({ clip_to_allocation: true });
        this._hbox.append(this._cgroup, Big.BoxPackFlags.NONE);

        this._cbox = new Big.Box({ width: Widget.COLLAPSED_WIDTH,
                                   clip_to_allocation: true });
        this._cgroup.add_actor(this._cbox);

        if (this._widget.collapsedActor) {
            if (this._widget.collapsedActor == this._widget.actor)
                this._singleActor = true;
            else {
                this._cbox.append(this._widget.collapsedActor,
                                  Big.BoxPackFlags.NONE);
            }
        } else {
            let vtitle = new Clutter.Text({ font_name: "Sans 16px",
                                            text: this._widget.title,
                                            rotation_angle_z: -90.0 });
            let signalId = vtitle.connect('notify::allocation',
                                          function () {
                                              vtitle.disconnect(signalId);
                                              vtitle.set_anchor_point(vtitle.natural_width, 0);
                                              vtitle.set_size(vtitle.natural_height,
                                                              vtitle.natural_width);
                                          });
            this._vtitle = vtitle;
            this._cbox.append(this._vtitle, Big.BoxPackFlags.NONE);

            this._vline = new Clutter.Rectangle({ color: BLACK, width: 1 });
            this._hbox.append(this._vline, Big.BoxPackFlags.NONE);
            this._vline.hide();

            // Set up pop-out
            this._eventHandler = this._hbox.connect('captured-event',
                                                    Lang.bind(this, this._popEventHandler));
            this._activationHandler = this._widget.connect('activated',
                                                           Lang.bind(this, this._activationHandler));
        }
        this._cgroup.hide();

        this._egroup = new Clutter.Group({ clip_to_allocation: true });
        this._hbox.append(this._egroup, Big.BoxPackFlags.NONE);

        this._ebox = new Big.Box({ spacing: WIDGETBOX_PADDING,
                                   width: Widget.EXPANDED_WIDTH,
                                   clip_to_allocation: true });
        this._egroup.add_actor(this._ebox);

        if (this._widget.title) {
            this._htitle = new Clutter.Text({ font_name: "Sans 16px",
                                              text: this._widget.title });
            this._ebox.append(this._htitle, Big.BoxPackFlags.NONE);

            this._hline = new Clutter.Rectangle({ color: BLACK, height: 1 });
            this._ebox.append(this._hline, Big.BoxPackFlags.NONE);
        }

        this._ebox.append(this._widget.actor, Big.BoxPackFlags.NONE);
    },

    // Given a name like "imports.ui.widget.ClockWidget", turn that
    // into a constructor function
    _ctorFromName: function(name) {
        // Make sure it's a valid import
        if (!name.match(/^imports(\.[a-zA-Z0-9_]+)+$/))
            throw new Error("widget name must start with 'imports.'");
        if (name.match(/^imports\.gi\./))
            throw new Error("cannot import widget from GIR");

        let ctor = eval(name);

        // Make sure it's really a constructor
        if (!ctor || typeof(ctor) != "function")
            throw new Error("widget name is not a constructor");

        // Make sure it's a widget
        let proto = ctor.prototype;
        while (proto && proto != Widget.Widget.prototype)
            proto = proto.__proto__;
        if (!proto)
            throw new Error("widget does not inherit from Widget prototype");

        return ctor;
    },

    expand: function() {
        Tweener.addTween(this._cbox, { x: -Widget.COLLAPSED_WIDTH,
                                       time: ANIMATION_TIME / 2,
                                       transition: "easeOutQuad",
                                       onComplete: this._expandPart1Complete,
                                       onCompleteScope: this });
        this.state = this._widget.state = Widget.STATE_EXPANDING;
    },

    _expandPart1Complete: function() {
        this._cgroup.hide();
        this._cbox.x = 0;

        if (this._singleActor) {
            log(this._widget.actor);
            this._widget.actor.unparent();
            this._ebox.append(this._widget.actor, Big.BoxPackFlags.NONE);
        }

        if (this._widget.expand) {
            try {
                this._widget.expand();
            } catch (e) {
                logError(e, 'Widget failed to expand');
            }
        }

        this._egroup.show();
        if (this._htitle) {
            this._htitle.show();
            this._hline.show();
        }
        this._ebox.x = -Widget.EXPANDED_WIDTH;
        Tweener.addTween(this._ebox, { x: 0,
                                       time: ANIMATION_TIME / 2,
                                       transition: "easeOutQuad",
                                       onComplete: this._expandComplete,
                                       onCompleteScope: this });
    },

    _expandComplete: function() {
        this.state = this._widget.state = Widget.STATE_EXPANDED;
    },

    collapse: function() {
        Tweener.addTween(this._ebox, { x: -Widget.EXPANDED_WIDTH,
                                       time: ANIMATION_TIME / 2,
                                       transition: "easeOutQuad",
                                       onComplete: this._collapsePart1Complete,
                                       onCompleteScope: this });
        this.state = this._widget.state = Widget.STATE_COLLAPSING;
    },

    _collapsePart1Complete: function() {
        this._egroup.hide();
        this._ebox.x = 0;
        if (this._htitle) {
            this._htitle.hide();
            this._hline.hide();
        }

        if (this._singleActor) {
            log(this._widget.actor);
            this._widget.actor.unparent();
            this._cbox.append(this._widget.actor, Big.BoxPackFlags.NONE);
        }

        if (this._widget.collapse) {
            try {
                this._widget.collapse();
            } catch (e) {
                logError(e, 'Widget failed to collapse');
            }
        }

        this._cgroup.show();
        this._cbox.x = -Widget.COLLAPSED_WIDTH;
        if (this._vtitle)
            this._cbox.height = this._ebox.height;
        Tweener.addTween(this._cbox, { x: 0,
                                       time: ANIMATION_TIME / 2,
                                       transition: "easeOutQuad",
                                       onComplete: this._collapseComplete,
                                       onCompleteScope: this });
    },

    _collapseComplete: function() {
        this.state = this._widget.state = Widget.STATE_COLLAPSED;
    },

    _popEventHandler: function(actor, event) {
        let type = event.type();

        if (type == Clutter.EventType.ENTER) {
            this._clearPopInTimeout();
            if (this.state == Widget.STATE_COLLAPSED ||
                this.state == Widget.STATE_COLLAPSING) {
                this._popOut();
                return false;
            }
        } else if (type == Clutter.EventType.LEAVE &&
                   (this.state == Widget.STATE_POPPED_OUT ||
                    this.state == Widget.STATE_POPPING_OUT)) {
            // If moving into another actor within this._hbox, let the
            // event be propagated
            let into = Shell.get_event_related(event);
            while (into) {
                if (into == this._hbox)
                    return false;
                into = into.get_parent();
            }

            // Else, moving out of this._hbox
            this._setPopInTimeout();
            return false;
        }

        return false;
    },

    _activationHandler: function() {
        if (this.state == Widget.STATE_POPPED_OUT)
            this._popIn();
    },

    _popOut: function() {
        if (this.state != Widget.STATE_COLLAPSED &&
            this.state != Widget.STATE_COLLAPSING)
            return;

        this._vline.show();
        this._egroup.show();
        this._ebox.x = -Widget.EXPANDED_WIDTH;
        Tweener.addTween(this._ebox, { x: 0,
                                       time: ANIMATION_TIME / 2,
                                       transition: "easeOutQuad",
                                       onComplete: this._popOutComplete,
                                       onCompleteScope: this });
        this.state = this._widget.state = Widget.STATE_POPPING_OUT;

        Main.chrome.addInputRegionActor(this._hbox);
    },

    _popOutComplete: function() {
        this.state = this._widget.state = Widget.STATE_POPPED_OUT;
    },

    _setPopInTimeout: function() {
        this._clearPopInTimeout();
        this._popInTimeout = Mainloop.timeout_add(POP_IN_LAG, Lang.bind(this, function () { this._popIn(); return false; }));
    },

    _clearPopInTimeout: function() {
        if (this._popInTimeout) {
            Mainloop.source_remove(this._popInTimeout);
            delete this._popInTimeout;
        }
    },

    _popIn: function() {
        this._clearPopInTimeout();

        if (this.state != Widget.STATE_POPPED_OUT &&
            this.state != Widget.STATE_POPPING_OUT)
            return;

        Tweener.addTween(this._ebox, { x: -Widget.EXPANDED_WIDTH,
                                       time: ANIMATION_TIME / 2,
                                       transition: "easeOutQuad",
                                       onComplete: this._popInComplete,
                                       onCompleteScope: this });
    },

    _popInComplete: function() {
        this.state = this._widget.state = Widget.STATE_COLLAPSED;
        this._vline.hide();
        this._egroup.hide();
        this._ebox.x = 0;

        Main.chrome.removeInputRegionActor(this._hbox);
    },

    destroy: function() {
        if (this._widget.destroy)
            this._widget.destroy();
    }
};