[gnome-shell/wip/carlosg/osk-emoji-and-keypad: 37/40] appDisplay: Add PageIndicators API to cater for OSK emoji panel usage

[Carlos Garnacho <carlosg src gnome org>]

commit 0ee4fc778613129adcba38b3d485ea41a2597627
Author: Carlos Garnacho <carlosg gnome org>
Date:   Tue Jan 22 12:10:51 2019 +0100

    appDisplay: Add PageIndicators API to cater for OSK emoji panel usage
    
    We want something exactly like this, except:
    - It should have horizontal disposition
    - It should not be animatable (?)
    - It should not be reactive
    
    The two first are set at construct time, the latter is done through an
    extra method.

 js/ui/appDisplay.js | 34 ++++++++++++++++++++++++----------
 1 file changed, 24 insertions(+), 10 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 8b9429762..e717c1a1a 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -248,12 +248,12 @@ Signals.addSignalMethods(BaseAppView.prototype);
 
 var PageIndicatorsActor = GObject.registerClass(
 class PageIndicatorsActor extends St.BoxLayout {
-    _init() {
+    _init(vertical) {
         super._init({ style_class: 'page-indicators',
-                      vertical: true,
+                      vertical,
                       x_expand: true, y_expand: true,
-                      x_align: Clutter.ActorAlign.END,
-                      y_align: Clutter.ActorAlign.CENTER,
+                      x_align: vertical ? Clutter.ActorAlign.END : Clutter.ActorAlign.CENTER,
+                      y_align: vertical ? Clutter.ActorAlign.CENTER : Clutter.ActorAlign.END,
                       reactive: true,
                       clip_to_allocation: true });
     }
@@ -268,15 +268,28 @@ class PageIndicatorsActor extends St.BoxLayout {
     }
 });
 
-class PageIndicators {
-    constructor() {
-        this.actor = new PageIndicatorsActor();
+var PageIndicators = class PageIndicators {
+    constructor(vertical = true, animated = true) {
+        this.actor = new PageIndicatorsActor(vertical);
         this._nPages = 0;
         this._currentPage = undefined;
+        this._reactive = true;
+        this._animated = animated;
+        this._reactive = true;
 
-        this.actor.connect('notify::mapped', () => {
-            this.animateIndicators(IconGrid.AnimationDirection.IN);
-        });
+        if (this._animated) {
+            this.actor.connect('notify::mapped', () => {
+                this.animateIndicators(IconGrid.AnimationDirection.IN);
+            });
+        }
+    }
+
+    setReactive(reactive) {
+        let children = this.actor.get_children();
+        for (let i = 0; i < children.length; i++)
+            children[i].reactive = reactive;
+
+        this._reactive = reactive;
     }
 
     setNPages(nPages) {
@@ -292,6 +305,7 @@ class PageIndicators {
                                                              St.ButtonMask.TWO |
                                                              St.ButtonMask.THREE,
                                                 toggle_mode: true,
+                                                reactive: this._reactive,
                                                 checked: pageIndex == this._currentPage });
                 indicator.child = new St.Widget({ style_class: 'page-indicator-icon' });
                 indicator.connect('clicked', () => {