1 files changed, 146 insertions, 0 deletions
diff --git a/wikipedia/widgets/category_button.js b/wikipedia/widgets/category_button.js
new file mode 100644
index 0000000..77812f1
--- /dev/null
+++ b/wikipedia/widgets/category_button.js
@@ -0,0 +1,146 @@
+const Gdk = imports.gi.Gdk;
+const GdkPixbuf = imports.gi.GdkPixbuf;
+const GObject = imports.gi.GObject;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const Utils = imports.wikipedia.utils;
+
+const CATEGORY_LABEL_LEFT_MARGIN = 25;  // pixels
+const CATEGORY_LABEL_BOTTOM_MARGIN = 20;  // pixels
+const CATEGORY_BUTTON_RIGHT_MARGIN = 20;  // pixels
+const CATEGORY_BUTTON_BOTTOM_MARGIN = 20;  // pixels
+const CATEGORY_LABEL_BENTON_SANS_CORRECTION = 0; // pixels
+const _HOVER_ARROW_URI = '/com/endlessm/wikipedia-domain/assets/category_hover_arrow.png';
+
+GObject.ParamFlags.READWRITE = GObject.ParamFlags.READABLE | GObject.ParamFlags.WRITABLE;
+
+const CategoryButton = new Lang.Class({
+    Name: 'CategoryButton',
+    Extends: Gtk.EventBox,
+    Properties: {
+        // resource URI for the category's accompanying image
+        'image-uri': GObject.ParamSpec.string('image-uri',
+            'Image URI',
+            'Resource URI for the image file accompanying the category',
+            GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
+            ''),
+
+        // Title of the category to display
+        'category-title': GObject.ParamSpec.string('category-title',
+            'Category title',
+            'Display name for the category',
+            GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT,
+            '')
+    },
+    Signals: {
+        'clicked': {}
+    },
+
+    _init: function(props) {
+        // Get ready for property construction
+        this._image_uri = null;
+        this._category_title = null;
+
+        this._overlay = new Gtk.Overlay();
+        this._eventbox = new Gtk.EventBox({
+            expand: true
+        });
+        this._eventbox_grid = new Gtk.Grid({
+            orientation: Gtk.Orientation.HORIZONTAL,
+            hexpand: true,
+            valign: Gtk.Align.END
+        });
+        this._label = new Gtk.Label({
+            margin_left: CATEGORY_LABEL_LEFT_MARGIN,
+            margin_bottom: CATEGORY_LABEL_BOTTOM_MARGIN - CATEGORY_LABEL_BENTON_SANS_CORRECTION,
+            hexpand: true,
+            halign: Gtk.Align.START
+        });
+        this._arrow = new Gtk.Image({
+            resource: _HOVER_ARROW_URI,
+            margin_right: CATEGORY_BUTTON_RIGHT_MARGIN,
+            margin_bottom: CATEGORY_BUTTON_BOTTOM_MARGIN - CATEGORY_LABEL_BENTON_SANS_CORRECTION,
+            halign: Gtk.Align.END,
+            no_show_all: true
+        });
+
+        this._eventbox.add_events(Gdk.EventMask.ENTER_NOTIFY_MASK |
+            Gdk.EventMask.LEAVE_NOTIFY_MASK);
+        this._eventbox.connect('enter-notify-event',
+            Lang.bind(this, function(widget, event) {
+                this._eventbox.set_state_flags(Gtk.StateFlags.PRELIGHT, false);
+                this._arrow.show();
+            }));
+        this._eventbox.connect('leave-notify-event',
+            Lang.bind(this, function(widget, event) {
+                this._eventbox.unset_state_flags(Gtk.StateFlags.PRELIGHT);
+                this._arrow.hide();
+            }));
+
+        let context = this._label.get_style_context();
+        context.add_class(EndlessWikipedia.STYLE_CLASS_TITLE);
+        context.add_class(EndlessWikipedia.STYLE_CLASS_CATEGORY);
+        context.add_class(EndlessWikipedia.STYLE_CLASS_FRONT_PAGE);
+        this._image = new Gtk.Image({
+            expand: true,
+            halign: Gtk.Align.FILL,
+            valign: Gtk.Align.FILL
+        });
+
+        // Parent constructor sets all properties
+        this.parent(props);
+
+        // Put widgets together
+        this.add(this._overlay);
+        this._overlay.add(this._image);
+        this._eventbox_grid.add(this._label);
+        this._eventbox_grid.add(this._arrow);
+        this._eventbox.add(this._eventbox_grid);
+        this._overlay.add_overlay(this._eventbox);
+        this.show_all();
+
+        // Connect signals
+        this.connect('button-press-event',
+            Lang.bind(this, this._onButtonPress));
+    },
+
+    get image_uri() {
+        return this._image_uri;
+    },
+
+    set image_uri(value) {
+        this._image_uri = value;
+        if(this._image) {
+            let allocation = this.get_allocation();
+            let new_pixbuf = Utils.load_pixbuf_cover(Utils.resourceUriToPath(this._image_uri),
+                allocation.width, allocation.height);
+            this._image.set_from_pixbuf(new_pixbuf);
+        }
+    },
+
+    get category_title() {
+        return this._category_title;
+    },
+
+    set category_title(value) {
+        this._category_title = value;
+        if(this._label)
+            this._label.set_text(value.toUpperCase());
+    },
+
+    // OVERRIDES
+
+    vfunc_size_allocate: function(allocation) {
+        this.parent(allocation);
+        let new_pixbuf = Utils.load_pixbuf_cover(Utils.resourceUriToPath(this._image_uri),
+            allocation.width, allocation.height);
+        this._image.set_from_pixbuf(new_pixbuf);
+    },
+
+    // HANDLERS
+
+    _onButtonPress: function(widget, event) {
+        this.emit('clicked')
+    }
+});