[gnome-documents] preview: integrate a GdThumbNav in a preview overlay

[Cosimo Cecchi <cosimoc src gnome org>]

commit 158d7357124d36a0bb8ec5b2530002180a3b1442
Author: Cosimo Cecchi <cosimoc gnome org>
Date:   Sun Mar 4 23:43:39 2012 -0500

    preview: integrate a GdThumbNav in a preview overlay

 src/embed.js   |   26 ++++++++++++++--
 src/preview.js |   87 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 109 insertions(+), 4 deletions(-)
---
diff --git a/src/embed.js b/src/embed.js
index 43bb81a..e9eb929 100644
--- a/src/embed.js
+++ b/src/embed.js
@@ -171,15 +171,20 @@ ViewEmbed.prototype  = {
     },
 
     _onFullscreenChanged: function(controller, fullscreen) {
-        this._motionTimeoutId = 0;
+        if (this._motionTimeoutId != 0) {
+            Mainloop.source_remove(this._motionTimeoutId);
+            this._motionTimeoutId = 0;
+        }
 
         if (fullscreen)
             this._filter.start();
         else
             this._filter.stop();
 
-        if (!fullscreen)
+        if (!fullscreen) {
             this._destroyFullscreenToolbar();
+            this._destroyPreviewEmbed();
+        }
 
         Gtk.Settings.get_default().gtk_application_prefer_dark_theme = fullscreen;
         this._toolbar.widget.visible = !fullscreen;
@@ -215,6 +220,13 @@ ViewEmbed.prototype  = {
         this._fsToolbar = null;
     },
 
+    _destroyPreviewEmbed: function() {
+        if (this._previewEmbed) {
+            this._previewEmbed.actor.destroy();
+            this._previewEmbed = null;
+        }
+    },
+
     _moveOutBackground: function() {
         Tweener.addTween(this._background, { opacity: 0,
                                              time: 0.20,
@@ -300,6 +312,8 @@ ViewEmbed.prototype  = {
         this._spinnerBox.moveOut();
         Global.modeController.setCanFullscreen(true);
         this._preview = new Preview.PreviewView(this._docModel);
+        this._previewEmbed = new Preview.PreviewEmbed(this._docModel,
+            this._overlayLayout, this._contentsActor);
         this._createFullscreenToolbar();
 
         this._scrolledWinPreview.add(this._preview.widget);
@@ -312,10 +326,12 @@ ViewEmbed.prototype  = {
 
         // if we were idle fade in the toolbar, otherwise reset
         // the timeout
-        if (this._motionTimeoutId == 0)
+        if (this._motionTimeoutId == 0) {
             this._fsToolbar.show();
-        else
+            this._previewEmbed.thumbBar.show();
+        } else {
             Mainloop.source_remove(this._motionTimeoutId);
+        }
 
         this._motionTimeoutId = Mainloop.timeout_add_seconds
             (_FULLSCREEN_TOOLBAR_TIMEOUT, Lang.bind(this,
@@ -325,6 +341,8 @@ ViewEmbed.prototype  = {
                     if (this._fsToolbar)
                         this._fsToolbar.hide();
 
+                    this._previewEmbed.thumbBar.hide();
+
                     return false;
             }));
     },
diff --git a/src/preview.js b/src/preview.js
index bf817b8..468c2b0 100644
--- a/src/preview.js
+++ b/src/preview.js
@@ -19,13 +19,17 @@
  *
  */
 
+const Clutter = imports.gi.Clutter;
 const EvView = imports.gi.EvinceView;
+const Gd = imports.gi.Gd;
 const Gdk = imports.gi.Gdk;
 const Gtk = imports.gi.Gtk;
+const GtkClutter = imports.gi.GtkClutter;
 
 const Lang = imports.lang;
 
 const Global = imports.global;
+const Tweener = imports.util.tweener;
 const View = imports.view;
 
 function PreviewView(model) {
@@ -90,3 +94,86 @@ PreviewView.prototype = {
         this.widget.destroy();
     }
 };
+
+function PreviewThumbnails(model) {
+    this._init(model);
+}
+
+PreviewThumbnails.prototype = {
+    _init: function(model) {
+        this.view = new Gd.SidebarThumbnails({ model: model });
+        this.widget = new Gd.ThumbNav({ thumbview: this.view });
+        this.actor = new GtkClutter.Actor({ contents: this.widget,
+                                            opacity: 0 });
+
+        this.widget.show_all();
+    },
+
+    show: function() {
+        if (this.actor.opacity != 0)
+            return;
+
+        this.actor.opacity = 0;
+        this.actor.show();
+
+        Tweener.addTween(this.actor,
+            { opacity: 255,
+              time: 0.30,
+              transition: 'easeOutQuad' });
+    },
+
+    hide: function() {
+        Tweener.addTween(this.actor,
+            { opacity: 0,
+              time: 0.30,
+              transition: 'easeOutQuad',
+              onComplete: function() {
+                  this.actor.hide();
+              },
+              onCompleteScope: this });
+    }
+};
+
+function PreviewEmbed(model, layout, parentActor) {
+    this._init(model, layout, parentActor);
+}
+
+PreviewEmbed.prototype = {
+    _init: function(model, layout, parentActor) {
+        this._layout = layout;
+        this._parentActor = parentActor;
+
+        this.thumbBar = new PreviewThumbnails(model);
+        this.actor = this.thumbBar.actor;
+
+        this._layout.add(this.actor,
+            Clutter.BinAlignment.FIXED, Clutter.BinAlignment.FIXED);
+
+        let widthConstraint =
+            new Clutter.BindConstraint({ source: this._parentActor,
+                                         coordinate: Clutter.BindCoordinate.WIDTH,
+                                         offset: - 300 });
+        this.actor.add_constraint(widthConstraint);
+        this.actor.connect('notify::width', Lang.bind(this,
+            function() {
+                let width = this._parentActor.width;
+                let offset = 300;
+
+                if (width > 1000)
+                    offset += (width - 1000);
+                else if (width < 600)
+                    offset -= (600 - width);
+
+                widthConstraint.offset = - offset;
+            }));
+
+        this.actor.add_constraint(
+            new Clutter.AlignConstraint({ align_axis: Clutter.AlignAxis.X_AXIS,
+                                          source: this._parentActor,
+                                          factor: 0.50 }));
+        this.actor.add_constraint(
+            new Clutter.AlignConstraint({ align_axis: Clutter.AlignAxis.Y_AXIS,
+                                          source: this._parentActor,
+                                          factor: 0.95 }));
+    }
+};