Rearrange categories on front page

And add layout manager so that the categories are divided into two
columns.

[endlessm/eos-sdk#182]

5 files changed, 78 insertions, 11 deletions

diff --git a/wikipedia/src/endless_wikipedia/EndlessWikipedia.js b/wikipedia/src/endless_wikipedia/EndlessWikipedia.js
index 9028173..398ce1b 100644
--- a/wikipedia/src/endless_wikipedia/EndlessWikipedia.js
+++ b/wikipedia/src/endless_wikipedia/EndlessWikipedia.js
@@ -13,9 +13,6 @@ this.PrebuiltCategoryPage = _PrebuiltCategoryPage.PrebuiltCategoryPage;
 const _PrebuiltArticlesPage = imports.endless_wikipedia.PrebuiltArticlesPage;
 this.PrebuiltArticlesPage = _PrebuiltArticlesPage.PrebuiltArticlesPage;
 
-const _CategorySelector = imports.endless_wikipedia.CategorySelector;
-this.CategorySelector = _CategorySelector.CategorySelector;
-
 const _ArticleList = imports.endless_wikipedia.ArticleList;
 this.ArticleList = _ArticleList.ArticleList;
 
diff --git a/wikipedia/src/endless_wikipedia/PrebuiltFrontPage.js b/wikipedia/src/endless_wikipedia/PrebuiltFrontPage.js
index fed6a75..38b6250 100644
--- a/wikipedia/src/endless_wikipedia/PrebuiltFrontPage.js
+++ b/wikipedia/src/endless_wikipedia/PrebuiltFrontPage.js
@@ -3,6 +3,7 @@ const Gtk = imports.gi.Gtk;
 const Lang = imports.lang;
 
 const EndlessWikipedia = imports.endless_wikipedia.EndlessWikipedia;
+const CategorySelectorView = imports.views.category_selector_view;
 
 GObject.ParamFlags.READWRITE = GObject.ParamFlags.READABLE | GObject.ParamFlags.WRITABLE;
 
@@ -34,10 +35,10 @@ const PrebuiltFrontPage = new Lang.Class({
         context.add_class(EndlessWikipedia.STYLE_CLASS_TITLE);
         context.add_class(EndlessWikipedia.STYLE_CLASS_PREBUILT);
         context.add_class(EndlessWikipedia.STYLE_CLASS_FRONT_PAGE);
-        this._category_selector = new EndlessWikipedia.CategorySelector();
+        this._category_selector = new CategorySelectorView.CategorySelectorView();
 
         props = props || {};
-        props.orientation = Gtk.Orientation.VERTICAL;
+        props.orientation = Gtk.Orientation.HORIZONTAL;
         this.parent(props);
 
         this.add(this._title_label);
diff --git a/wikipedia/src/endless_wikipedia/CategoryButton.js b/wikipedia/src/views/category_button.js
index 8df4e18..8df4e18 100644
--- a/wikipedia/src/endless_wikipedia/CategoryButton.js
+++ b/wikipedia/src/views/category_button.js
diff --git a/wikipedia/src/views/category_layout_manager.js b/wikipedia/src/views/category_layout_manager.js
new file mode 100644
index 0000000..a7be3bb
--- /dev/null
+++ b/wikipedia/src/views/category_layout_manager.js
@@ -0,0 +1,65 @@
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const CategoryLayoutManager = new Lang.Class({
+    Name: 'CategoryLayoutManager',
+    Extends: Gtk.Grid,
+
+    _init: function(props) {
+        props = props || {};
+        props.column_homogeneous = true;
+        props.row_homogeneous = true;
+        this.parent(props);
+
+        this._childWidgets = [];
+    },
+
+    // Distribute children in two columns, except for the last one if an odd
+    // number; that should span two columns
+    _redistributeChildren: function() {
+        let numChildren = this._childWidgets.length;
+        let oddNumber = numChildren % 2 == 1;
+        this._childWidgets.forEach(function(child, index) {
+            let column = index % 2;
+            let row = Math.floor(index / 2);
+
+            if(child.get_parent() === this)
+                Gtk.Container.prototype.remove.call(this,
+                    this._childWidgets[index]);
+
+            if(oddNumber && index == numChildren - 1)
+                this.attach(child, 0, row, 2, 1);
+            else
+                this.attach(child, column, row, 1, 1);
+        }, this);
+    },
+
+    add: function(child) {
+        this._childWidgets.push(child);
+        this._redistributeChildren();
+    },
+
+    remove: function(child) {
+        let index = this._childWidgets.indexOf(child);
+        if(index == -1) {
+            printerr('Widget', System.addressOf(child),
+                'is not contained in CategoryLayoutManager');
+            return;
+        }
+        this._childWidgets.splice(index, 1); // remove
+        this._redistributeChildren();
+    }
+});
+
+// Gtk.init(null);
+// let w = new Gtk.Window();
+// let g = new CategoryLayoutManager();
+// let count = 7;
+// for(let i = 0; i < count; i++) {
+//     let widget = new Gtk.Button({label: 'Widget ' + i});
+//     g.add(widget);
+// }
+// w.add(g);
+// w.connect('destroy', Gtk.main_quit);
+// w.show_all();
+// Gtk.main();
diff --git a/wikipedia/src/endless_wikipedia/CategorySelector.js b/wikipedia/src/views/category_selector_view.js
index f5b7b14..fa34aa1 100644
--- a/wikipedia/src/endless_wikipedia/CategorySelector.js
+++ b/wikipedia/src/views/category_selector_view.js
@@ -2,11 +2,15 @@ const GObject = imports.gi.GObject;
 const Gtk = imports.gi.Gtk;
 const Lang = imports.lang;
 
-const CategoryButton = imports.endless_wikipedia.CategoryButton;
+const CategoryButton = imports.views.category_button;
+const CategoryLayoutManager = imports.views.category_layout_manager;
 
-const CategorySelector = new Lang.Class({
-    Name: 'CategorySelector',
-    Extends: Gtk.Grid,
+const CATEGORY_COLUMN_SPACING = 10;  // pixels
+const CATEGORY_ROW_SPACING = 10;  // pixels
+
+const CategorySelectorView = new Lang.Class({
+    Name: 'CategorySelectorView',
+    Extends: CategoryLayoutManager.CategoryLayoutManager,
     Signals: {
         'category-chosen': {
             param_types: [GObject.TYPE_STRING, GObject.TYPE_INT]
@@ -15,8 +19,8 @@ const CategorySelector = new Lang.Class({
 
     _init: function(props) {
         props = props || {};
-        props.row_homogeneous = true;
-        props.column_homogeneous = true;
+        props.column_spacing = CATEGORY_COLUMN_SPACING;
+        props.row_spacing = CATEGORY_ROW_SPACING;
         this.parent(props);
     },