Completed the view for GTK

I refactored more of the code so that it conforms with the MVP paradigm. All view related stuff is in the view files.
[endlessm/eos-sdk#171]

5 files changed, 170 insertions, 10 deletions

diff --git a/wikipedia/src/endless_brazil.js b/wikipedia/src/endless_brazil.js
index 21726fd..8e73b82 100644
--- a/wikipedia/src/endless_brazil.js
+++ b/wikipedia/src/endless_brazil.js
@@ -12,6 +12,6 @@ let resource = Gio.Resource.load(Endless.getCurrentFileDir() + '/../data/endless
 resource._register();
 
 let app = new EndlessWikipedia.PrebuiltWikipediaApplication({
-    categories_uri: 'resource:///com/endlessm/brazil/brazil_categories.json'
+    application_uri: 'resource:///com/endlessm/brazil/brazil_categories.json'
 });
 app.run(ARGV);
diff --git a/wikipedia/src/endless_wikipedia/ArticleList.js b/wikipedia/src/endless_wikipedia/ArticleList.js
index b79e2e8..9406181 100644
--- a/wikipedia/src/endless_wikipedia/ArticleList.js
+++ b/wikipedia/src/endless_wikipedia/ArticleList.js
@@ -7,7 +7,7 @@ const ArticleList = new Lang.Class({
     Extends: Gtk.ScrolledWindow,
     Signals: {
         'article-chosen': {
-            param_types: [GObject.TYPE_STRING, GObject.TYPE_STRING]
+            param_types: [GObject.TYPE_STRING, GObject.TYPE_INT]
         }
     },
 
@@ -24,7 +24,7 @@ const ArticleList = new Lang.Class({
         this.add(this._grid);
     },
 
-    // Takes a list of dictionaries with keys 'title' and 'url'
+    // Takes a list of dictionaries with keys 'title' and 'uri'
     setArticles: function(articles) {
         // Remove all existing article links
         this._grid.get_children().forEach(function(element, index, obj) {
@@ -32,16 +32,15 @@ const ArticleList = new Lang.Class({
         }, this);
 
         // Create new ones
-        articles.forEach(function(element, index, obj) {
-            var button = Gtk.Button.new_with_label(element.title.toUpperCase());
+        articles.forEach(function(title, index, obj) {
+            var button = Gtk.Button.new_with_label(title.toUpperCase());
             button.image = Gtk.Image.new_from_icon_name('go-next-symbolic',
                 Gtk.IconSize.BUTTON);
             button.always_show_image = true; // Don't do this, see BackButton.js
             button.image_position = Gtk.PositionType.RIGHT;
             button.xalign = 0;
-
             button.connect('clicked', Lang.bind(this, function() {
-                this.emit('article-chosen', element.title, element.url);
+                this.emit('article-chosen', title, index);
             }));
             button.show();
             this._grid.add(button);
diff --git a/wikipedia/src/endless_wikipedia/PrebuiltWikipediaApplication.js b/wikipedia/src/endless_wikipedia/PrebuiltWikipediaApplication.js
index 6187b05..40e6bc7 100644
--- a/wikipedia/src/endless_wikipedia/PrebuiltWikipediaApplication.js
+++ b/wikipedia/src/endless_wikipedia/PrebuiltWikipediaApplication.js
@@ -21,7 +21,7 @@ const PrebuiltWikipediaApplication = new Lang.Class({
     vfunc_startup: function() {
         this.parent();
 
-        this._view = new WikipediaView.WikipediaView(this);
+        //this._view = new WikipediaView.WikipediaView(this);
         //this._presenter = new WikipediaPresenter.WikipediaPresenter(this._model, this._view);
 
         // Front page
diff --git a/wikipedia/src/endless_wikipedia/WikipediaApplication.js b/wikipedia/src/endless_wikipedia/WikipediaApplication.js
index dddec46..2893203 100644
--- a/wikipedia/src/endless_wikipedia/WikipediaApplication.js
+++ b/wikipedia/src/endless_wikipedia/WikipediaApplication.js
@@ -1,7 +1,7 @@
 const Lang = imports.lang;
 const GObject = imports.gi.GObject;
 const Gio = imports.gi.Gio;
-const WikipediaModel = imports.models.WikipediaModel;
+const DomainWikiModel = imports.models.domain_wiki_model;
 
 GObject.ParamFlags.READWRITE = GObject.ParamFlags.READABLE | GObject.ParamFlags.WRITABLE;
 
@@ -51,7 +51,7 @@ const WikipediaApplication = new Lang.Class({
 
     vfunc_startup: function() {
         this.parent();
-        this._model = new WikipediaModel.WikipediaModel(this._application_uri);
+        this._domain_wiki_model = new DomainWikiModel.DomainWikiModel(this._application_uri);
         //let category_file = Gio.File.new_for_uri(this._application_uri);
         //let [success, category_json, etag] = category_file.load_contents(null);
         //this._categories = JSON.parse(category_json);
diff --git a/wikipedia/src/views/domain_wiki_view.js b/wikipedia/src/views/domain_wiki_view.js
new file mode 100644
index 0000000..e56d69d
--- /dev/null
+++ b/wikipedia/src/views/domain_wiki_view.js
@@ -0,0 +1,161 @@
+const Gettext = imports.gettext;
+const Lang = imports.lang;
+const GObject = imports.gi.GObject;
+const Gtk = imports.gi.Gtk;
+const Endless = imports.gi.Endless;
+
+const _ = Gettext.gettext;
+
+const DomainWikiView = new Lang.Class({
+    Name: "DomainWikiView",
+    Extends: GObject.Object,
+    Signals: {
+        'category-chosen': {
+            param_types: [GObject.TYPE_STRING, GObject.TYPE_INT]
+        },
+        'article-chosen': {
+            param_types: [GObject.TYPE_STRING, GObject.TYPE_INT]
+        }
+    },
+
+    _init: function(application) {
+        this.parent();
+        this._presenter = null;
+
+        this._window = new Endless.Window({
+            application: application,
+            title: _("Endless Domain Wikis")
+        });
+
+        // These need to be called first
+        this.create_front_page();
+        this.create_category_page();
+        this.create_article_page();
+
+        this._window.page_manager.transition_duration = 200;  // ms
+        this._window.page_manager.add(this._front_page, {
+            name: 'front'
+        });
+
+        // Add category page to page manager
+        this._window.page_manager.add(this._category_page, {
+            name: 'category',
+            left_topbar_widget: this._category_back_button
+        });
+        
+        this._window.page_manager.add(this._article_page, {
+            name: 'article',
+            left_topbar_widget: this._article_back_button
+        })
+
+        // Build window
+     
+        this._window.show_all();
+    },
+
+    create_front_page: function(){
+        this._front_page = new EndlessWikipedia.PrebuiltFrontPage({
+            title: "Brazil App"
+        });
+
+        this._front_page.connect('category-chosen',
+            Lang.bind(this, this._onCategoryClicked));
+    },
+
+    create_article_page: function(){
+        // Article page
+        this._article_page = new Gtk.Grid({
+            orientation: Gtk.Orientation.HORIZONTAL
+        });
+        this._article_view = new EndlessWikipedia.PrebuiltArticlesPage();
+        this._article_list = new EndlessWikipedia.ArticleList({
+            halign: Gtk.Align.START,
+            hexpand: false
+        });
+        this._article_page.add(this._article_list);
+        this._article_page.add(this._article_view);
+
+        this._article_back_button = new EndlessWikipedia.BackButton();
+        this._article_back_button.show();
+
+        this._article_list.connect('article-chosen',
+            Lang.bind(this, this._onArticleClicked));
+        this._article_back_button.connect('clicked',
+            Lang.bind(this, this._onArticleBackClicked));
+    },
+
+    create_category_page: function(){
+        // Category page
+        this._category_page = new Gtk.Grid({
+            orientation: Gtk.Orientation.HORIZONTAL
+        });
+        this._category_view = new EndlessWikipedia.PrebuiltCategoryPage();
+        // _category_article_list is eventually going to be the same widget as
+        // _article_list, so that's why it's not built into the
+        // PrebuiltCategoryPage
+        this._category_article_list = new EndlessWikipedia.ArticleList({
+            halign: Gtk.Align.END,
+            hexpand: false
+        });
+        this._category_page.add(this._category_view);
+        this._category_page.add(this._category_article_list);
+
+        this._category_back_button = new EndlessWikipedia.BackButton({
+            label: _('START')
+        });
+        this._category_back_button.show();
+
+
+        this._category_article_list.connect('article-chosen',
+            Lang.bind(this, this._onArticleClicked));
+
+        this._category_back_button.connect('clicked',
+            Lang.bind(this, this._onCategoryBackClicked));
+    },
+
+    set_presenter: function(presenter) {
+        this._presenter = presenter;
+    },
+
+    set_category_info: function(category, articles) {
+        this._category_view.title = category.title;
+        this._category_view.description = category.description;
+
+        this._category_article_list.setArticles(articles);
+        this._article_list.setArticles(articles);
+        this._article_back_button.label = category.title.toUpperCase();
+    },
+
+    set_article_info: function(article){
+        this._article_view.title = article.title;
+        this._article_view.article_uri = article.uri;
+
+    },
+
+    transition_page: function(transition_type, page_name){
+        this._window.page_manager.transition_type = transition_type;
+        this._window.page_manager.visible_page_name = page_name;
+    },
+
+    set_categories: function(categories){
+        this._front_page.setCategories(categories);
+    },
+
+    _onCategoryClicked: function(page, title, index) {
+        this.emit('category-chosen', title, index);
+    },
+
+    _onArticleClicked: function(article_list, title, index) {
+        this.emit('article-chosen', title, index);
+    },
+
+    _onCategoryBackClicked: function(button) {
+        this._window.page_manager.transition_type = Endless.PageManagerTransitionType.SLIDE_RIGHT;
+        this._window.page_manager.visible_page_name = 'front';
+    },
+
+    _onArticleBackClicked: function(button) {
+        this._window.page_manager.transition_type = Endless.PageManagerTransitionType.SLIDE_RIGHT;
+        this._window.page_manager.visible_page_name = 'category';
+    }
+});