[gnome-maps/wip/mlundblad/place-thumbnails: 9/9] WIP: placeBubble: Fetch Wikipedia thumbnails for place

[Marcus Lundblad <mlundblad src gnome org>]

commit b9a723af2ff3dcc5f47b74bd6ef00b7076825ed6
Author: Marcus Lundblad <ml update uu se>
Date:   Mon Feb 27 23:22:57 2017 +0100

    WIP: placeBubble: Fetch Wikipedia thumbnails for place

 data/ui/map-bubble.ui |   32 +++++++++++++++++++++++++++-----
 src/mapBubble.js      |   12 ++++++++++++
 src/placeBubble.js    |   23 ++++++++++++++++++++---
 3 files changed, 59 insertions(+), 8 deletions(-)
---
diff --git a/data/ui/map-bubble.ui b/data/ui/map-bubble.ui
index 3f7d961..8d83bae 100644
--- a/data/ui/map-bubble.ui
+++ b/data/ui/map-bubble.ui
@@ -11,16 +11,38 @@
     <property name="margin_bottom">10</property>
     <property name="orientation">vertical</property>
     <child>
-      <object class="GtkImage" id="bubble-image">
+      <object class="GtkStack" id="bubble-icon-stack">
         <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="valign">start</property>
-        <property name="pixel_size">0</property>
-        <property name="icon_size">16</property>
+        <property name="transition-type">GTK_STACK_TRANSITION_TYPE_CROSSFADE</property>
+        <child>
+          <object class="GtkImage" id="bubble-image">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="valign">start</property>
+            <property name="pixel_size">0</property>
+            <property name="icon_size">16</property>
+          </object>
+          <packing>
+            <property name="name">icon</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkImage" id="bubble-thumbnail">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="valign">start</property>
+            <property name="pixel_size">0</property>
+            <property name="icon_size">16</property>
+          </object>
+          <packing>
+            <property name="name">thumbnail</property>
+          </packing>
+        </child>
       </object>
       <packing>
         <property name="left_attach">0</property>
         <property name="top_attach">0</property>
+        <property name="height">2</property>
       </packing>
     </child>
     <child>
diff --git a/src/mapBubble.js b/src/mapBubble.js
index 6dc6d0b..28aae2a 100644
--- a/src/mapBubble.js
+++ b/src/mapBubble.js
@@ -70,6 +70,8 @@ const MapBubble = new Lang.Class({
         this.parent(params);
         let ui = Utils.getUIObject('map-bubble', [ 'bubble-main-grid',
                                                    'bubble-image',
+                                                   'bubble-thumbnail',
+                                                   'bubble-icon-stack',
                                                    'bubble-content-area',
                                                    'bubble-button-area',
                                                    'bubble-route-button',
@@ -78,6 +80,8 @@ const MapBubble = new Lang.Class({
                                                    'bubble-check-in-button',
                                                    'bubble-favorite-button-image']);
         this._image = ui.bubbleImage;
+        this._thumbnail = ui.bubbleThumbnail;
+        this._iconStack = ui.bubbleIconStack;
         this._content = ui.bubbleContentArea;
 
         if (!buttonFlags)
@@ -100,6 +104,14 @@ const MapBubble = new Lang.Class({
         return this._image;
     },
 
+    get thumbnail() {
+        return this._thumbnail;
+    },
+
+    get iconStack() {
+        return this._iconStack;
+    },
+
     get place() {
         return this._place;
     },
diff --git a/src/placeBubble.js b/src/placeBubble.js
index b437e2d..7ea7ff7 100644
--- a/src/placeBubble.js
+++ b/src/placeBubble.js
@@ -35,6 +35,9 @@ const Place = imports.place;
 const PlaceFormatter = imports.placeFormatter;
 const PlaceStore = imports.placeStore;
 const Utils = imports.utils;
+const Wikipedia = imports.wikipedia;
+
+const THUMBNAIL_SIZE = 128;
 
 const PlaceBubble = new Lang.Class({
     Name: 'PlaceBubble',
@@ -104,9 +107,8 @@ const PlaceBubble = new Lang.Class({
     },
 
     _formatWikiLink: function(wiki) {
-        let tokens = wiki.split(':');
-        let lang = tokens[0];
-        let article = GLib.markup_escape_text(tokens.splice(1).join(':'), -1);
+        let lang = Wikipedia.getLanguage(wiki);
+        let article = Wikipedia.getArticle(wiki);
 
         return Format.vprintf('https://%s.wikipedia.org/wiki/%s', [ lang, article ]);
     },
@@ -231,6 +233,21 @@ const PlaceBubble = new Lang.Class({
         this._title.label = formatter.title;
         this._expandButton.visible = expandedContent.length > 0;
         this._stack.visible_child = this._gridContent;
+
+        if (place.wiki)
+            this._requestWikipediaThumbnail(place.wiki);
+    },
+
+    _requestWikipediaThumbnail: function(wiki) {
+        Wikipedia.fetchArticleThumbnail(wiki, THUMBNAIL_SIZE,
+                                        this._onThumbnailComplete.bind(this));
+    },
+
+    _onThumbnailComplete: function(thumbnail) {
+        if (thumbnail) {
+            this.thumbnail.pixbuf = thumbnail;
+            this.iconStack.visible_child_name = 'thumbnail';
+        }
     },
 
     // clear the view widgets to be able to re-populate an updated place