[gnome-maps/wip/zoom-control: 9/9] MapView: add a zoom control

[Mattias Bengtsson <mattiasb src gnome org>]

commit be6799aa6b7a4aa2d7dd46446c7dbec8061526a7
Author: Mattias Bengtsson <mattias jc bengtsson gmail com>
Date:   Tue Jun 18 17:02:16 2013 +0200

    MapView: add a zoom control
    
    Add a zoom control widget based on two buttons. WIP, needs styling.

 src/control.js               |   47 +++++++++++++++++++++++++++++++++++++++
 src/gnome-maps.gresource.xml |    1 +
 src/mapView.js               |   26 +++++++++++++++++++++
 src/zoom-control.ui          |   50 ++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 124 insertions(+), 0 deletions(-)
---
diff --git a/src/control.js b/src/control.js
new file mode 100644
index 0000000..a008120
--- /dev/null
+++ b/src/control.js
@@ -0,0 +1,47 @@
+/* -*- Mode: JS2; indent-tabs-mode: nil; js2-basic-offset: 4 -*- */
+/* vim: set et ts=4 sw=4: */
+/*
+ * Copyright (c) 2011, 2012, 2013 Red Hat, Inc.
+ *
+ * GNOME Maps is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by the
+ * Free Software Foundation; either version 2 of the License, or (at your
+ * option) any later version.
+ *
+ * GNOME Maps is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with GNOME Maps; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
+ *
+ * Author: Mattias Bengtsson <mattias jc bengtsson gmail com>
+ */
+
+const Clutter = imports.gi.Clutter;
+const Gtk = imports.gi.Gtk;
+const GtkClutter = imports.gi.GtkClutter;
+
+const Lang = imports.lang;
+
+const Utils = imports.utils;
+
+const Zoom = new Lang.Class({
+       Name: 'Zoom',
+       Extends: GtkClutter.Actor,
+       
+       _init: function(mapView, props) {
+        Utils.copyProperties(props, this);
+               let ui = Utils.getUIObject('zoom-control', ['zoom-control',
+                                                                                                       
'zoom-in-button',
+                                                                                                       
'zoom-out-button'
+                                                                                                  ]);
+               
+        ui.zoomInButton.connect('clicked', mapView.zoom_in.bind(mapView));
+        ui.zoomOutButton.connect('clicked', mapView.zoom_out.bind(mapView));
+
+               this.contents = ui.zoomControl;
+       }
+});
diff --git a/src/gnome-maps.gresource.xml b/src/gnome-maps.gresource.xml
index 5916d8f..e6c29b5 100644
--- a/src/gnome-maps.gresource.xml
+++ b/src/gnome-maps.gresource.xml
@@ -3,6 +3,7 @@
   <gresource prefix="/org/gnome/maps">
     <file preprocess="xml-stripblanks">app-menu.ui</file>
     <file preprocess="xml-stripblanks">main-window.ui</file>
+    <file preprocess="xml-stripblanks">map-view.ui</file>
     <file alias="application.css">../data/gnome-maps.css</file>
   </gresource>
 </gresources>
diff --git a/src/mapView.js b/src/mapView.js
index 0bfe944..2bbf2fb 100644
--- a/src/mapView.js
+++ b/src/mapView.js
@@ -25,6 +25,7 @@ const Cogl = imports.gi.Cogl;
 const Gdk = imports.gi.Gdk;
 const GdkPixbuf = imports.gi.GdkPixbuf;
 const Gtk = imports.gi.Gtk;
+const GtkClutter = imports.gi.GtkClutter;
 const GtkChamplain = imports.gi.GtkChamplain;
 const Champlain = imports.gi.Champlain;
 const Geocode = imports.gi.GeocodeGlib;
@@ -39,6 +40,7 @@ const Path = imports.path;
 const MapLocation = imports.mapLocation;
 const UserLocation = imports.userLocation;
 const Geoclue = imports.geoclue;
+const Control = imports.control;
 const _ = imports.gettext.gettext;
 
 const MapType = {
@@ -77,6 +79,8 @@ const MapView = new Lang.Class({
         this._factory = Champlain.MapSourceFactory.dup_default();
         this.setMapType(MapType.STREET);
 
+        this.view.add_child(this._createZoomControl());
+        
         this._showUserLocation();
     },
 
@@ -185,6 +189,28 @@ const MapView = new Lang.Class({
 
     _onViewMoved: function() {
         this.emit('view-moved');
+    },
+
+    _createZoomControl: function() {
+        return new Control.Zoom(this.view, {
+            x_align: Clutter.ActorAlign.END
+        });
+        // let builder = new Gtk.Builder();
+        // builder.add_from_resource('/org/gnome/maps/map-view.ui');
+        // let zoomControl = builder.get_object('zoom-control');
+        // let zoomInButton = builder.get_object('zoom-in-button');
+        // let zoomOutButton = builder.get_object('zoom-out-button');
+        
+        // zoomInButton.connect('clicked', Lang.bind(this, function() {
+        //     this.view.zoom_in();
+        // }));
+        // zoomOutButton.connect('clicked', Lang.bind(this, function() {
+        //     this.view.zoom_out();
+        // }));
+        // return new GtkClutter.Actor({
+        //     contents: zoomControl,
+        //     x_align: Clutter.ActorAlign.END
+        // });
     }
 });
 Signals.addSignalMethods(MapView.prototype);
diff --git a/src/zoom-control.ui b/src/zoom-control.ui
new file mode 100644
index 0000000..c26418f
--- /dev/null
+++ b/src/zoom-control.ui
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <!-- interface-requires gtk+ 3.6 -->
+  <object class="GtkImage" id="zoom-in-image">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="stock">gtk-zoom-in</property>
+    <property name="icon_size">0</property>
+  </object>
+  <object class="GtkImage" id="zoom-out-image">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="stock">gtk-zoom-out</property>
+  </object>
+  <object class="GtkButtonBox" id="zoom-control">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="orientation">vertical</property>
+    <property name="spacing">2</property>
+    <property name="layout_style">start</property>
+    <child>
+      <object class="GtkButton" id="zoom-in-button">
+        <property name="visible">True</property>
+        <property name="can_focus">True</property>
+        <property name="receives_default">True</property>
+        <property name="image">zoom-in-image</property>
+        <property name="image_position">bottom</property>
+      </object>
+      <packing>
+        <property name="expand">False</property>
+        <property name="fill">True</property>
+        <property name="position">0</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkButton" id="zoom-out-button">
+        <property name="visible">True</property>
+        <property name="can_focus">True</property>
+        <property name="receives_default">True</property>
+        <property name="image">zoom-out-image</property>
+        <property name="image_position">bottom</property>
+      </object>
+      <packing>
+        <property name="expand">False</property>
+        <property name="fill">True</property>
+        <property name="position">1</property>
+      </packing>
+    </child>
+  </object>
+</interface>