From 798d6437b19f99c81d8f3e71cba34c9f87a85638 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Mon, 6 Apr 2015 21:54:15 -0700
Subject: [PATCH] Add pop-up menu of "show me" values

---
 examples/users.js | 83 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)

diff --git a/examples/users.js b/examples/users.js
index fd7a92b942..72189705a4 100644
--- a/examples/users.js
+++ b/examples/users.js
@@ -62,6 +62,9 @@ var usersWindow = (function () {
         DISPLAY_PROMPT_WIDTH = 60,
         displayValues = ["everyone", "friends"],
         displayControl,
+        DISPLAY_OPTIONS_BACKGROUND_COLOR = { red: 40, green: 40, blue: 40 },
+        DISPLAY_OPTIONS_BACKGROUND_ALPHA = 0.95,
+        displayOptions = [],
         isShowingDisplayOptions = false,
 
         VISIBILITY_SPACER = 6,                             // Space before visibility controls
@@ -148,6 +151,56 @@ var usersWindow = (function () {
         }
     }
 
+    function deleteDisplayOptions() {
+        var i;
+
+        for (i = 0; i < displayOptions.length; i += 1) {
+            Overlays.deleteOverlay(displayOptions[i]);
+        }
+
+        isShowingDisplayOptions = false;
+    }
+
+    function positionDisplayOptions() {
+        var y,
+            i;
+
+        y = viewportHeight
+                - windowTextHeight
+                - VISIBILITY_SPACER - 4 * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN
+                - (displayValues.length - 1) * windowLineHeight;
+        for (i = 0; i < displayValues.length; i += 1) {
+            Overlays.editOverlay(displayOptions[i], { y: y });
+            y += windowLineHeight;
+        }
+    }
+
+    function showDisplayOptions() {
+        var i;
+
+        for (i = 0; i < displayValues.length; i += 1) {
+            displayOptions[i] = Overlays.addOverlay("text", {
+                x: WINDOW_MARGIN + DISPLAY_PROMPT_WIDTH,
+                y: viewportHeight,
+                width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN - DISPLAY_PROMPT_WIDTH,
+                height: windowTextHeight + OPTION_MARGIN,  // Only need to add margin at top to balance descenders
+                topMargin: OPTION_MARGIN,
+                leftMargin: OPTION_MARGIN,
+                color: WINDOW_FOREGROUND_COLOR,
+                alpha: WINDOW_FOREGROUND_ALPHA,
+                backgroundColor: DISPLAY_OPTIONS_BACKGROUND_COLOR,
+                backgroundAlpha: DISPLAY_OPTIONS_BACKGROUND_ALPHA,
+                text: displayValues[i],
+                font: WINDOW_FONT,
+                visible: true
+            });
+        }
+
+        positionDisplayOptions();
+
+        isShowingDisplayOptions = true;
+    }
+
     function updateOverlayPositions() {
         var i,
             y;
@@ -186,6 +239,10 @@ var usersWindow = (function () {
         Overlays.editOverlay(displayControl.valueOverlay, { y: y - OPTION_MARGIN });
         Overlays.editOverlay(displayControl.buttonOverlay, { y: y - OPTION_MARGIN + 1 });
 
+        if (isShowingDisplayOptions) {
+            positionDisplayOptions();
+        }
+
         Overlays.editOverlay(visibilityHeading, {
             y: viewportHeight - 4 * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN
         });
@@ -412,6 +469,23 @@ var usersWindow = (function () {
 
         clickedOverlay = Overlays.getOverlayAtPoint({ x: event.x, y: event.y });
 
+        if (isShowingDisplayOptions) {
+            userClicked = false;
+            for (i = 0; i < displayOptions.length; i += 1) {
+                if (clickedOverlay === displayOptions[i]) {
+                    displayControl.value = displayValues[i];
+                    Overlays.editOverlay(displayControl.valueOverlay, { text: displayValues[i] });
+                    userClicked = true;
+                }
+            }
+
+            deleteDisplayOptions();
+
+            if (userClicked) {
+                return;
+            }
+        }
+
         if (clickedOverlay === windowPane) {
 
             overlayX = event.x - WINDOW_MARGIN;
@@ -437,6 +511,11 @@ var usersWindow = (function () {
             return;
         }
 
+        if (clickedOverlay === displayControl.valueOverlay || clickedOverlay === displayControl.buttonOverlay) {
+            showDisplayOptions();
+            return;
+        }
+
         for (i = 0; i < visibilityControls.length; i += 1) {
             // Don't need to test radioOverlay if it us under textOverlay.
             if (clickedOverlay === visibilityControls[i].textOverlay && event.x <= visibilityControls[i].optionWidth) {
@@ -789,6 +868,10 @@ var usersWindow = (function () {
         Overlays.deleteOverlay(displayControl.promptOverlay);
         Overlays.deleteOverlay(displayControl.valueOverlay);
         Overlays.deleteOverlay(displayControl.buttonOverlay);
+        print("isShowingDisplayOptions = " + isShowingDisplayOptions);
+        if (isShowingDisplayOptions) {
+            deleteDisplayOptions();
+        }
         Overlays.deleteOverlay(visibilityHeading);
         for (i = 0; i <= visibilityControls.length; i += 1) {
             Overlays.deleteOverlay(visibilityControls[i].textOverlay);