diff --git a/js/ui/sidebar.js b/js/ui/sidebar.js index e85cad079..6ec527651 100644 --- a/js/ui/sidebar.js +++ b/js/ui/sidebar.js @@ -76,7 +76,7 @@ Sidebar.prototype = { addWidget: function(widget) { let widgetBox; try { - widgetBox = new WidgetBox.WidgetBox(widget); + widgetBox = new WidgetBox.WidgetBox(widget, this.expanded); } catch(e) { logError(e, "Failed to add widget '" + widget + "'"); return; diff --git a/js/ui/widget.js b/js/ui/widget.js index 0984c5de1..ba97c4417 100644 --- a/js/ui/widget.js +++ b/js/ui/widget.js @@ -31,12 +31,22 @@ function Widget() { Widget.prototype = { // _init(): // - // Your widget constructor. Receives no arguments. Must define a - // field named "actor" containing the Clutter.Actor to show in - // expanded mode. This actor will be clipped to - // Widget.EXPANDED_WIDTH. Most widgets will also define a field - // named "title" containing the title string to show above the - // widget in the sidebar. + // Your widget constructor. Your constructor function should look + // like: + // + // function MyWidgetType() { + // this._init.apply(this, arguments); + // } + // + // and your _init method should start by doing: + // + // Widget.Widget.prototype._init.apply(this, arguments); + // + // The _init method must define a field named "actor" containing + // the Clutter.Actor to show in expanded mode. This actor will be + // clipped to Widget.EXPANDED_WIDTH. Most widgets will also define + // a field named "title" containing the title string to show above + // the widget in the sidebar. // // If you want to have a separate collapsed view, you can define a // field "collapsedActor" containing the Clutter.Actor to show in @@ -51,6 +61,9 @@ Widget.prototype = { // the sidebar is collapsed, the widget's expanded view will pop // out of the sidebar until either the cursor moves out of it, // or else the widget calls this.activated() on itself. + _init: function (initialState) { + this.state = initialState; + }, // destroy(): // @@ -81,23 +94,22 @@ Widget.prototype = { // state: // // A field set on your widget by the sidebar. Will contain one of - // the Widget.STATE_* values. (Eg, Widget.STATE_EXPANDED). Note - // that this will not be set until *after* _init() is called, so - // you cannot rely on it being set at that point. The widget will - // always initially be in STATE_EXPANDED. + // the Widget.STATE_* values. (Eg, Widget.STATE_EXPANDED). }; Signals.addSignalMethods(Widget.prototype); function ClockWidget() { - this._init(); + this._init.apply(this, arguments); } ClockWidget.prototype = { __proto__ : Widget.prototype, _init: function() { + Widget.prototype._init.apply(this, arguments); + this.actor = new Clutter.Text({ font_name: "Sans Bold 16px", text: "", // Give an explicit height to ensure @@ -168,7 +180,7 @@ const ITEM_NAME_COLOR = new Clutter.Color(); ITEM_NAME_COLOR.from_pixel(0x000000ff); function LauncherWidget() { - this._init(); + this._init.apply(this, arguments); } LauncherWidget.prototype = { @@ -273,13 +285,15 @@ LauncherWidget.prototype = { }; function AppsWidget() { - this._init(); + this._init.apply(this, arguments); } AppsWidget.prototype = { __proto__ : LauncherWidget.prototype, _init : function() { + Widget.prototype._init.apply(this, arguments); + this.title = "Applications"; this.actor = new Big.Box({ spacing: 2 }); this.collapsedActor = new Big.Box({ spacing: 2}); @@ -291,13 +305,15 @@ AppsWidget.prototype = { }; function DocsWidget() { - this._init(); + this._init.apply(this, arguments); } DocsWidget.prototype = { __proto__ : LauncherWidget.prototype, _init : function() { + Widget.prototype._init.apply(this, arguments); + this.title = "Recent Docs"; this.actor = new Big.Box({ spacing: 2 }); diff --git a/js/ui/widgetBox.js b/js/ui/widgetBox.js index 50e16d599..5eab6e5f1 100644 --- a/js/ui/widgetBox.js +++ b/js/ui/widgetBox.js @@ -19,17 +19,20 @@ const WIDGETBOX_PADDING = 2; const ANIMATION_TIME = 0.5; const POP_IN_LAG = 250; /* milliseconds */ -function WidgetBox(widget) { - this._init(widget); +function WidgetBox(widget, expanded) { + this._init(widget, expanded); } WidgetBox.prototype = { - _init: function(widget) { - if (widget instanceof Widget.Widget) + _init: function(widget, expanded) { + this.state = expanded ? Widget.STATE_EXPANDED : Widget.STATE_COLLAPSED; + + if (widget instanceof Widget.Widget) { this._widget = widget; - else { + this._widget.state = this.state; + } else { let ctor = this._ctorFromName(widget); - this._widget = new ctor(); + this._widget = new ctor(this.state); } if (!this._widget.actor) @@ -37,7 +40,7 @@ WidgetBox.prototype = { 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; + this.state = expanded ? Widget.STATE_EXPANDED : Widget.STATE_COLLAPSED; // The structure of a WidgetBox: // @@ -128,7 +131,6 @@ WidgetBox.prototype = { 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); @@ -148,6 +150,11 @@ WidgetBox.prototype = { } this._ebox.append(this._widget.actor, Big.BoxPackFlags.NONE); + + if (expanded) + this._setWidgetExpanded(); + else + this._setWidgetCollapsed(); }, // Given a name like "imports.ui.widget.ClockWidget", turn that @@ -184,16 +191,25 @@ WidgetBox.prototype = { this.state = this._widget.state = Widget.STATE_EXPANDING; }, - _expandPart1Complete: function() { + _setWidgetExpanded: function() { this._cgroup.hide(); - this._cbox.x = 0; + this._egroup.show(); if (this._singleActor) { - log(this._widget.actor); this._widget.actor.unparent(); this._ebox.append(this._widget.actor, Big.BoxPackFlags.NONE); } + if (this._htitle) { + this._htitle.show(); + this._hline.show(); + } + }, + + _expandPart1Complete: function() { + this._cbox.x = 0; + this._setWidgetExpanded(); + if (this._widget.expand) { try { this._widget.expand(); @@ -202,11 +218,6 @@ WidgetBox.prototype = { } } - 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, @@ -228,19 +239,27 @@ WidgetBox.prototype = { this.state = this._widget.state = Widget.STATE_COLLAPSING; }, - _collapsePart1Complete: function() { + _setWidgetCollapsed: function() { this._egroup.hide(); - this._ebox.x = 0; + this._cgroup.show(); + + if (this._singleActor) { + this._widget.actor.unparent(); + this._cbox.append(this._widget.actor, Big.BoxPackFlags.NONE); + } + 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._vtitle) + this._cbox.height = this._ebox.height; + }, + + _collapsePart1Complete: function() { + this._ebox.x = 0; + this._setWidgetCollapsed(); if (this._widget.collapse) { try { @@ -250,10 +269,7 @@ WidgetBox.prototype = { } } - 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",