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

[Carlos Garnacho <carlosg src gnome org>]

commit 4c188aee4b4df4d99cf2ca66b52ff6350ea5283f
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 | 32 +++++++++++++++++++++++---------
 1 file changed, 23 insertions(+), 9 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index c705a0d77..8ffb20521 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -251,12 +251,12 @@ var PageIndicatorsActor = new Lang.Class({
     Name:'PageIndicatorsActor',
     Extends: St.BoxLayout,
 
-    _init() {
+    _init(vertical) {
         this.parent({ 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 });
     },
@@ -274,14 +274,27 @@ var PageIndicatorsActor = new Lang.Class({
 var PageIndicators = new Lang.Class({
     Name:'PageIndicators',
 
-    _init() {
-        this.actor = new PageIndicatorsActor();
+    _init(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) {
@@ -297,6 +310,7 @@ var PageIndicators = new Lang.Class({
                                                              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', () => {