From 991f7fe873564c4bbe10db504bcc35bb0478a864 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Fri, 13 May 2016 10:20:50 +1200 Subject: [PATCH 1/7] Fix up syntax per JSLint --- scripts/system/users.js | 45 ++++++++++++++++++++++++----------------- 1 file changed, 27 insertions(+), 18 deletions(-) diff --git a/scripts/system/users.js b/scripts/system/users.js index 9612a19eee..55729726f1 100644 --- a/scripts/system/users.js +++ b/scripts/system/users.js @@ -9,7 +9,7 @@ // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // -var PopUpMenu = function(properties) { +var PopUpMenu = function (properties) { var value = properties.value, promptOverlay, valueOverlay, @@ -21,9 +21,8 @@ var PopUpMenu = function(properties) { MIN_MAX_BUTTON_SVG_WIDTH = 17.1, MIN_MAX_BUTTON_SVG_HEIGHT = 32.5, MIN_MAX_BUTTON_WIDTH = 14, - MIN_MAX_BUTTON_HEIGHT = MIN_MAX_BUTTON_WIDTH; - - MIN_MAX_BUTTON_SVG = Script.resolvePath("assets/images/tools/min-max-toggle.svg"); + MIN_MAX_BUTTON_HEIGHT = MIN_MAX_BUTTON_WIDTH, + MIN_MAX_BUTTON_SVG = Script.resolvePath("assets/images/tools/min-max-toggle.svg"); function positionDisplayOptions() { var y, @@ -218,11 +217,10 @@ var PopUpMenu = function(properties) { }; }; -var usersWindow = (function() { +var usersWindow = (function () { - var baseURL = Script.resolvePath("assets/images/tools/"); - - var WINDOW_WIDTH = 260, + var baseURL = Script.resolvePath("assets/images/tools/"), + WINDOW_WIDTH = 260, WINDOW_MARGIN = 12, WINDOW_BASE_MARGIN = 6, // A little less is needed in order look correct WINDOW_FONT = { @@ -383,7 +381,9 @@ var usersWindow = (function() { } // Reserve space for title, friends button, and option controls - nonUsersHeight = WINDOW_MARGIN + windowLineHeight + FRIENDS_BUTTON_SPACER + FRIENDS_BUTTON_HEIGHT + DISPLAY_SPACER + windowLineHeight + VISIBILITY_SPACER + windowLineHeight + WINDOW_BASE_MARGIN; + nonUsersHeight = WINDOW_MARGIN + windowLineHeight + FRIENDS_BUTTON_SPACER + FRIENDS_BUTTON_HEIGHT + DISPLAY_SPACER + + windowLineHeight + VISIBILITY_SPACER + + windowLineHeight + WINDOW_BASE_MARGIN; // Limit window to height of viewport minus VU meter and mirror if displayed windowHeight = linesOfUsers.length * windowLineHeight - windowLineSpacing + nonUsersHeight; @@ -422,12 +422,15 @@ var usersWindow = (function() { Overlays.editOverlay(scrollbarBackground, { y: scrollbarBackgroundPosition.y }); - scrollbarBarPosition.y = scrollbarBackgroundPosition.y + 1 + scrollbarValue * (scrollbarBackgroundHeight - scrollbarBarHeight - 2); + scrollbarBarPosition.y = scrollbarBackgroundPosition.y + 1 + + scrollbarValue * (scrollbarBackgroundHeight - scrollbarBarHeight - 2); Overlays.editOverlay(scrollbarBar, { y: scrollbarBarPosition.y }); - y = viewportHeight - FRIENDS_BUTTON_HEIGHT - DISPLAY_SPACER - windowLineHeight - VISIBILITY_SPACER - windowLineHeight - WINDOW_BASE_MARGIN; + y = viewportHeight - FRIENDS_BUTTON_HEIGHT - DISPLAY_SPACER + - windowLineHeight - VISIBILITY_SPACER + - windowLineHeight - WINDOW_BASE_MARGIN; Overlays.editOverlay(friendsButton, { y: y }); @@ -512,7 +515,7 @@ var usersWindow = (function() { usersRequest.send(); } - processUsers = function() { + processUsers = function () { var response, myUsername, user, @@ -565,7 +568,7 @@ var usersWindow = (function() { } }; - pollUsersTimedOut = function() { + pollUsersTimedOut = function () { print("Error: Request for users status timed out"); usersTimer = Script.setTimeout(pollUsers, HTTP_GET_TIMEOUT); // Try again after a longer delay. }; @@ -683,7 +686,8 @@ var usersWindow = (function() { userClicked = firstUserToDisplay + lineClicked; - if (0 <= userClicked && userClicked < linesOfUsers.length && 0 <= overlayX && overlayX <= usersOnline[linesOfUsers[userClicked]].textWidth) { + if (0 <= userClicked && userClicked < linesOfUsers.length && 0 <= overlayX + && overlayX <= usersOnline[linesOfUsers[userClicked]].textWidth) { //print("Go to " + usersOnline[linesOfUsers[userClicked]].username); location.goToUser(usersOnline[linesOfUsers[userClicked]].username); } @@ -740,8 +744,12 @@ var usersWindow = (function() { function onMouseMoveEvent(event) { if (isMovingScrollbar) { - if (scrollbarBackgroundPosition.x - WINDOW_MARGIN <= event.x && event.x <= scrollbarBackgroundPosition.x + SCROLLBAR_BACKGROUND_WIDTH + WINDOW_MARGIN && scrollbarBackgroundPosition.y - WINDOW_MARGIN <= event.y && event.y <= scrollbarBackgroundPosition.y + scrollbarBackgroundHeight + WINDOW_MARGIN) { - scrollbarValue = (event.y - scrollbarBarClickedAt * scrollbarBarHeight - scrollbarBackgroundPosition.y) / (scrollbarBackgroundHeight - scrollbarBarHeight - 2); + if (scrollbarBackgroundPosition.x - WINDOW_MARGIN <= event.x + && event.x <= scrollbarBackgroundPosition.x + SCROLLBAR_BACKGROUND_WIDTH + WINDOW_MARGIN + && scrollbarBackgroundPosition.y - WINDOW_MARGIN <= event.y + && event.y <= scrollbarBackgroundPosition.y + scrollbarBackgroundHeight + WINDOW_MARGIN) { + scrollbarValue = (event.y - scrollbarBarClickedAt * scrollbarBarHeight - scrollbarBackgroundPosition.y) + / (scrollbarBackgroundHeight - scrollbarBarHeight - 2); scrollbarValue = Math.min(Math.max(scrollbarValue, 0.0), 1.0); firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay)); updateOverlayPositions(); @@ -773,7 +781,8 @@ var usersWindow = (function() { isMirrorDisplay = Menu.isOptionChecked(MIRROR_MENU_ITEM); isFullscreenMirror = Menu.isOptionChecked(FULLSCREEN_MIRROR_MENU_ITEM); - if (viewportHeight !== oldViewportHeight || isMirrorDisplay !== oldIsMirrorDisplay || isFullscreenMirror !== oldIsFullscreenMirror) { + if (viewportHeight !== oldViewportHeight || isMirrorDisplay !== oldIsMirrorDisplay + || isFullscreenMirror !== oldIsFullscreenMirror) { calculateWindowHeight(); updateUsersDisplay(); updateOverlayPositions(); @@ -991,4 +1000,4 @@ var usersWindow = (function() { setUp(); Script.scriptEnding.connect(tearDown); -}()); \ No newline at end of file +}()); From 54d658798aca0021278f368553f927eddfa15ca1 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Fri, 13 May 2016 11:22:10 +1200 Subject: [PATCH 2/7] Add border overlay --- scripts/system/users.js | 42 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/scripts/system/users.js b/scripts/system/users.js index 55729726f1..6b8040fae8 100644 --- a/scripts/system/users.js +++ b/scripts/system/users.js @@ -202,7 +202,7 @@ var PopUpMenu = function (properties) { width: MIN_MAX_BUTTON_SVG_WIDTH, height: MIN_MAX_BUTTON_SVG_HEIGHT / 2 }, - color: properties.buttonColor, + //color: properties.buttonColor, alpha: properties.buttonAlpha, visible: properties.visible }); @@ -246,6 +246,17 @@ var usersWindow = (function () { WINDOW_BACKGROUND_ALPHA = 0.8, windowPane, windowHeading, + + // Window border is similar to that of edit.js. + WINDOW_BORDER_WIDTH = WINDOW_WIDTH + 2 * WINDOW_BASE_MARGIN, + WINDOW_BORDER_TOP_MARGIN = 2 * WINDOW_BASE_MARGIN, + WINDOW_BORDER_BOTTOM_MARGIN = WINDOW_BASE_MARGIN, + WINDOW_BORDER_LEFT_MARGIN = WINDOW_BASE_MARGIN, + WINDOW_BORDER_RADIUS = 4, + WINDOW_BORDER_COLOR = { red: 255, green: 255, blue: 255 }, + WINDOW_BORDER_ALPHA = 0.5, + windowBorder, + MIN_MAX_BUTTON_SVG = baseURL + "min-max-toggle.svg", MIN_MAX_BUTTON_SVG_WIDTH = 17.1, MIN_MAX_BUTTON_SVG_HEIGHT = 32.5, @@ -329,6 +340,7 @@ var usersWindow = (function () { visibilityControl, windowHeight, + windowBorderHeight, windowTextHeight, windowLineSpacing, windowLineHeight, // = windowTextHeight + windowLineSpacing @@ -357,6 +369,7 @@ var usersWindow = (function () { isVisible = true, isMinimized = false, + isBorderVisible = false, viewportHeight, isMirrorDisplay = false, @@ -377,6 +390,7 @@ var usersWindow = (function () { if (isMinimized) { windowHeight = windowTextHeight + WINDOW_MARGIN + WINDOW_BASE_MARGIN; + windowBorderHeight = windowHeight + WINDOW_BORDER_TOP_MARGIN + WINDOW_BORDER_BOTTOM_MARGIN; return; } @@ -392,6 +406,7 @@ var usersWindow = (function () { maxWindowHeight -= MIRROR_HEIGHT; } windowHeight = Math.max(Math.min(windowHeight, maxWindowHeight), nonUsersHeight); + windowBorderHeight = windowHeight + WINDOW_BORDER_TOP_MARGIN + WINDOW_BORDER_BOTTOM_MARGIN; // Corresponding number of users to actually display numUsersToDisplay = Math.max(Math.round((windowHeight - nonUsersHeight) / windowLineHeight), 0); @@ -407,6 +422,9 @@ var usersWindow = (function () { function updateOverlayPositions() { var y; + Overlays.editOverlay(windowBorder, { + y: viewportHeight - windowHeight - WINDOW_BORDER_TOP_MARGIN + }); Overlays.editOverlay(windowPane, { y: viewportHeight - windowHeight }); @@ -490,6 +508,10 @@ var usersWindow = (function () { }); } + Overlays.editOverlay(windowBorder, { + height: windowBorderHeight + }); + Overlays.editOverlay(windowPane, { height: windowHeight, text: displayText @@ -574,6 +596,10 @@ var usersWindow = (function () { }; function updateOverlayVisibility() { + // TODO + //Overlays.editOverlay(windowBorder, { + // visible: isVisible && isBorderVisible + //}); Overlays.editOverlay(windowPane, { visible: isVisible }); @@ -805,6 +831,19 @@ var usersWindow = (function () { calculateWindowHeight(); + windowBorder = Overlays.addOverlay("rectangle", { + x: -WINDOW_BORDER_LEFT_MARGIN, + y: viewportHeight, + width: WINDOW_BORDER_WIDTH, + height: windowBorderHeight, + radius: WINDOW_BORDER_RADIUS, + color: WINDOW_BORDER_COLOR, + alpha: WINDOW_BORDER_ALPHA, + // TODO + //visible: isVisible && isBorderVisible + visible: true + }); + windowPane = Overlays.addOverlay("text", { x: 0, y: viewportHeight, // Start up off-screen @@ -988,6 +1027,7 @@ var usersWindow = (function () { Menu.removeMenuItem(MENU_NAME, MENU_ITEM); Script.clearTimeout(usersTimer); + Overlays.deleteOverlay(windowBorder); Overlays.deleteOverlay(windowPane); Overlays.deleteOverlay(windowHeading); Overlays.deleteOverlay(minimizeButton); From 93ead174aaf04d45e8b11926f4e5172e70859112 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Fri, 13 May 2016 12:51:39 +1200 Subject: [PATCH 3/7] Click and drag border to move users window --- scripts/system/users.js | 122 +++++++++++++++++++++++++++++----------- 1 file changed, 90 insertions(+), 32 deletions(-) diff --git a/scripts/system/users.js b/scripts/system/users.js index 6b8040fae8..420f6a6bfe 100644 --- a/scripts/system/users.js +++ b/scripts/system/users.js @@ -375,6 +375,10 @@ var usersWindow = (function () { isMirrorDisplay = false, isFullscreenMirror = false, + windowPosition = { }, // Bottom left corner of window pane. + isMovingWindow = false, + movingClickOffset = { x: 0, y: 0 }, + isUsingScrollbars = false, isMovingScrollbar = false, scrollbarBackgroundPosition = {}, @@ -420,44 +424,57 @@ var usersWindow = (function () { } function updateOverlayPositions() { - var y; + // Overlay positions are all relative to windowPosition; windowPosition is the position of the windowPane overlay. + var windowLeft = windowPosition.x, + windowTop = windowPosition.y - windowHeight, + x, + y; Overlays.editOverlay(windowBorder, { - y: viewportHeight - windowHeight - WINDOW_BORDER_TOP_MARGIN + x: windowPosition.x - WINDOW_BORDER_LEFT_MARGIN, + y: windowTop - WINDOW_BORDER_TOP_MARGIN }); Overlays.editOverlay(windowPane, { - y: viewportHeight - windowHeight + x: windowLeft, + y: windowTop }); Overlays.editOverlay(windowHeading, { - y: viewportHeight - windowHeight + WINDOW_MARGIN + x: windowLeft + WINDOW_MARGIN, + y: windowTop + WINDOW_MARGIN }); Overlays.editOverlay(minimizeButton, { - y: viewportHeight - windowHeight + WINDOW_MARGIN / 2 + x: windowLeft + WINDOW_WIDTH - WINDOW_MARGIN / 2 - MIN_MAX_BUTTON_WIDTH, + y: windowTop + WINDOW_MARGIN / 2 }); - scrollbarBackgroundPosition.y = viewportHeight - windowHeight + WINDOW_MARGIN + windowTextHeight; + scrollbarBackgroundPosition.x = windowLeft + WINDOW_WIDTH - 0.5 * WINDOW_MARGIN - SCROLLBAR_BACKGROUND_WIDTH; + scrollbarBackgroundPosition.y = windowTop + WINDOW_MARGIN + windowTextHeight; Overlays.editOverlay(scrollbarBackground, { + x: scrollbarBackgroundPosition.x, y: scrollbarBackgroundPosition.y }); scrollbarBarPosition.y = scrollbarBackgroundPosition.y + 1 + scrollbarValue * (scrollbarBackgroundHeight - scrollbarBarHeight - 2); Overlays.editOverlay(scrollbarBar, { + x: scrollbarBackgroundPosition.x + 1, y: scrollbarBarPosition.y }); - y = viewportHeight - FRIENDS_BUTTON_HEIGHT - DISPLAY_SPACER + x = windowLeft + WINDOW_MARGIN; + y = windowPosition.y - FRIENDS_BUTTON_HEIGHT - DISPLAY_SPACER - windowLineHeight - VISIBILITY_SPACER - windowLineHeight - WINDOW_BASE_MARGIN; Overlays.editOverlay(friendsButton, { + x: x, y: y }); y += FRIENDS_BUTTON_HEIGHT + DISPLAY_SPACER; - displayControl.updatePosition(WINDOW_MARGIN, y); + displayControl.updatePosition(x, y); y += windowLineHeight + VISIBILITY_SPACER; - visibilityControl.updatePosition(WINDOW_MARGIN, y); + visibilityControl.updatePosition(x, y); } function updateUsersDisplay() { @@ -596,10 +613,9 @@ var usersWindow = (function () { }; function updateOverlayVisibility() { - // TODO - //Overlays.editOverlay(windowBorder, { - // visible: isVisible && isBorderVisible - //}); + Overlays.editOverlay(windowBorder, { + visible: isVisible && isBorderVisible + }); Overlays.editOverlay(windowPane, { visible: isVisible }); @@ -765,10 +781,22 @@ var usersWindow = (function () { friendsWindow.setURL(FRIENDS_WINDOW_URL); friendsWindow.setVisible(true); friendsWindow.raise(); + return; + } + + if (clickedOverlay === windowBorder) { + movingClickOffset = { + x: event.x - windowPosition.x, + y: event.y - windowPosition.y + }; + + isMovingWindow = true; } } function onMouseMoveEvent(event) { + var isVisible; + if (isMovingScrollbar) { if (scrollbarBackgroundPosition.x - WINDOW_MARGIN <= event.x && event.x <= scrollbarBackgroundPosition.x + SCROLLBAR_BACKGROUND_WIDTH + WINDOW_MARGIN @@ -787,13 +815,44 @@ var usersWindow = (function () { isMovingScrollbar = false; } } + + + if (isMovingWindow) { + windowPosition = { + x: event.x - movingClickOffset.x, + y: event.y - movingClickOffset.y + }; + updateOverlayPositions(); + + } else { + + isVisible = isBorderVisible; + if (isVisible) { + isVisible = windowPosition.x - WINDOW_BORDER_LEFT_MARGIN <= event.x + && event.x <= windowPosition.x - WINDOW_BORDER_LEFT_MARGIN + WINDOW_BORDER_WIDTH + && windowPosition.y - windowHeight - WINDOW_BORDER_TOP_MARGIN <= event.y + && event.y <= windowPosition.y + WINDOW_BORDER_BOTTOM_MARGIN; + } else { + isVisible = windowPosition.x <= event.x && event.x <= windowPosition.x + WINDOW_WIDTH + && windowPosition.y - windowHeight <= event.y && event.y <= windowPosition.y; + } + if (isVisible !== isBorderVisible) { + isBorderVisible = isVisible; + Overlays.editOverlay(windowBorder, { + visible: isBorderVisible + }); + } + } } function onMouseReleaseEvent() { - Overlays.editOverlay(scrollbarBar, { - backgroundAlpha: SCROLLBAR_BAR_ALPHA - }); - isMovingScrollbar = false; + if (isMovingScrollbar) { + Overlays.editOverlay(scrollbarBar, { + backgroundAlpha: SCROLLBAR_BAR_ALPHA + }); + isMovingScrollbar = false; + } + isMovingWindow = false; } function onScriptUpdate() { @@ -828,25 +887,24 @@ var usersWindow = (function () { Overlays.deleteOverlay(textSizeOverlay); viewportHeight = Controller.getViewportDimensions().y; + windowPosition = { x: 0, y: viewportHeight }; calculateWindowHeight(); windowBorder = Overlays.addOverlay("rectangle", { - x: -WINDOW_BORDER_LEFT_MARGIN, - y: viewportHeight, + x: 0, + y: viewportHeight, // Start up off-screen width: WINDOW_BORDER_WIDTH, height: windowBorderHeight, radius: WINDOW_BORDER_RADIUS, color: WINDOW_BORDER_COLOR, alpha: WINDOW_BORDER_ALPHA, - // TODO - //visible: isVisible && isBorderVisible - visible: true + visible: isVisible && isBorderVisible }); windowPane = Overlays.addOverlay("text", { x: 0, - y: viewportHeight, // Start up off-screen + y: viewportHeight, width: WINDOW_WIDTH, height: windowHeight, topMargin: WINDOW_MARGIN + windowLineHeight, @@ -861,7 +919,7 @@ var usersWindow = (function () { }); windowHeading = Overlays.addOverlay("text", { - x: WINDOW_MARGIN, + x: 0, y: viewportHeight, width: WINDOW_WIDTH - 2 * WINDOW_MARGIN, height: windowTextHeight, @@ -876,7 +934,7 @@ var usersWindow = (function () { }); minimizeButton = Overlays.addOverlay("image", { - x: WINDOW_WIDTH - WINDOW_MARGIN / 2 - MIN_MAX_BUTTON_WIDTH, + x: 0, y: viewportHeight, width: MIN_MAX_BUTTON_WIDTH, height: MIN_MAX_BUTTON_HEIGHT, @@ -893,11 +951,11 @@ var usersWindow = (function () { }); scrollbarBackgroundPosition = { - x: WINDOW_WIDTH - 0.5 * WINDOW_MARGIN - SCROLLBAR_BACKGROUND_WIDTH, + x: 0, y: viewportHeight }; scrollbarBackground = Overlays.addOverlay("text", { - x: scrollbarBackgroundPosition.x, + x: 0, y: scrollbarBackgroundPosition.y, width: SCROLLBAR_BACKGROUND_WIDTH, height: windowTextHeight, @@ -908,11 +966,11 @@ var usersWindow = (function () { }); scrollbarBarPosition = { - x: WINDOW_WIDTH - 0.5 * WINDOW_MARGIN - SCROLLBAR_BACKGROUND_WIDTH + 1, + x: 0, y: viewportHeight }; scrollbarBar = Overlays.addOverlay("text", { - x: scrollbarBarPosition.x, + x: 0, y: scrollbarBarPosition.y, width: SCROLLBAR_BACKGROUND_WIDTH - 2, height: windowTextHeight, @@ -923,7 +981,7 @@ var usersWindow = (function () { }); friendsButton = Overlays.addOverlay("image", { - x: WINDOW_MARGIN, + x: 0, y: viewportHeight, width: FRIENDS_BUTTON_WIDTH, height: FRIENDS_BUTTON_HEIGHT, @@ -943,7 +1001,7 @@ var usersWindow = (function () { value: DISPLAY_VALUES[0], values: DISPLAY_VALUES, displayValues: DISPLAY_DISPLAY_VALUES, - x: WINDOW_MARGIN, + x: 0, y: viewportHeight, width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN, promptWidth: DISPLAY_PROMPT_WIDTH, @@ -976,7 +1034,7 @@ var usersWindow = (function () { value: myVisibility, values: VISIBILITY_VALUES, displayValues: VISIBILITY_DISPLAY_VALUES, - x: WINDOW_MARGIN, + x: 0, y: viewportHeight, width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN, promptWidth: VISIBILITY_PROMPT_WIDTH, From 8445c9fbc7bef4ffe9fe7d5b3a5f1c5c48214fa7 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Fri, 13 May 2016 13:08:45 +1200 Subject: [PATCH 4/7] Update max window height before it scrolls, according to its position --- scripts/system/users.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/scripts/system/users.js b/scripts/system/users.js index 420f6a6bfe..f3f74e303a 100644 --- a/scripts/system/users.js +++ b/scripts/system/users.js @@ -403,9 +403,9 @@ var usersWindow = (function () { + windowLineHeight + VISIBILITY_SPACER + windowLineHeight + WINDOW_BASE_MARGIN; - // Limit window to height of viewport minus VU meter and mirror if displayed + // Limit window to height of viewport above window position minus VU meter and mirror if displayed windowHeight = linesOfUsers.length * windowLineHeight - windowLineSpacing + nonUsersHeight; - maxWindowHeight = viewportHeight - AUDIO_METER_HEIGHT; + maxWindowHeight = windowPosition.y - AUDIO_METER_HEIGHT; if (isMirrorDisplay && !isFullscreenMirror) { maxWindowHeight -= MIRROR_HEIGHT; } @@ -715,7 +715,7 @@ var usersWindow = (function () { if (clickedOverlay === windowPane) { overlayX = event.x - WINDOW_MARGIN; - overlayY = event.y - viewportHeight + windowHeight - WINDOW_MARGIN - windowLineHeight; + overlayY = event.y - windowPosition.y + windowHeight - WINDOW_MARGIN - windowLineHeight; numLinesBefore = Math.round(overlayY / windowLineHeight); minY = numLinesBefore * windowLineHeight; @@ -822,7 +822,9 @@ var usersWindow = (function () { x: event.x - movingClickOffset.x, y: event.y - movingClickOffset.y }; + calculateWindowHeight(); updateOverlayPositions(); + updateUsersDisplay(); } else { From ec74cb4aec53d51ba25379e29f84419a2a6a1497 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Fri, 13 May 2016 13:22:03 +1200 Subject: [PATCH 5/7] Maintain offset of bottom with nearest display edge if Interface resized --- scripts/system/users.js | 47 +++++++++++++++++++++++++++-------------- 1 file changed, 31 insertions(+), 16 deletions(-) diff --git a/scripts/system/users.js b/scripts/system/users.js index f3f74e303a..3b97b9d685 100644 --- a/scripts/system/users.js +++ b/scripts/system/users.js @@ -371,7 +371,7 @@ var usersWindow = (function () { isMinimized = false, isBorderVisible = false, - viewportHeight, + viewport, isMirrorDisplay = false, isFullscreenMirror = false, @@ -858,22 +858,37 @@ var usersWindow = (function () { } function onScriptUpdate() { - var oldViewportHeight = viewportHeight, + var oldViewport = viewport, oldIsMirrorDisplay = isMirrorDisplay, oldIsFullscreenMirror = isFullscreenMirror, MIRROR_MENU_ITEM = "Mirror", FULLSCREEN_MIRROR_MENU_ITEM = "Fullscreen Mirror"; - viewportHeight = Controller.getViewportDimensions().y; + viewport = Controller.getViewportDimensions(); isMirrorDisplay = Menu.isOptionChecked(MIRROR_MENU_ITEM); isFullscreenMirror = Menu.isOptionChecked(FULLSCREEN_MIRROR_MENU_ITEM); - if (viewportHeight !== oldViewportHeight || isMirrorDisplay !== oldIsMirrorDisplay + if (viewport.y !== oldViewport.y || isMirrorDisplay !== oldIsMirrorDisplay || isFullscreenMirror !== oldIsFullscreenMirror) { calculateWindowHeight(); updateUsersDisplay(); - updateOverlayPositions(); } + + if (viewport.y !== oldViewport.y) { + if (windowPosition.y > oldViewport.y / 2) { + // Maintain position w.r.t. bottom of window. + windowPosition.y = viewport.y - (oldViewport.y - windowPosition.y); + } + } + + if (viewport.x !== oldViewport.x) { + if (windowPosition.x + (WINDOW_WIDTH / 2) > oldViewport.x / 2) { + // Maintain position w.r.t. right of window. + windowPosition.x = viewport.x - (oldViewport.x - windowPosition.x); + } + } + + updateOverlayPositions(); } function setUp() { @@ -888,14 +903,14 @@ var usersWindow = (function () { windowLineHeight = windowTextHeight + windowLineSpacing; Overlays.deleteOverlay(textSizeOverlay); - viewportHeight = Controller.getViewportDimensions().y; - windowPosition = { x: 0, y: viewportHeight }; + viewport = Controller.getViewportDimensions(); + windowPosition = { x: 0, y: viewport.y }; calculateWindowHeight(); windowBorder = Overlays.addOverlay("rectangle", { x: 0, - y: viewportHeight, // Start up off-screen + y: viewport.y, // Start up off-screen width: WINDOW_BORDER_WIDTH, height: windowBorderHeight, radius: WINDOW_BORDER_RADIUS, @@ -906,7 +921,7 @@ var usersWindow = (function () { windowPane = Overlays.addOverlay("text", { x: 0, - y: viewportHeight, + y: viewport.y, width: WINDOW_WIDTH, height: windowHeight, topMargin: WINDOW_MARGIN + windowLineHeight, @@ -922,7 +937,7 @@ var usersWindow = (function () { windowHeading = Overlays.addOverlay("text", { x: 0, - y: viewportHeight, + y: viewport.y, width: WINDOW_WIDTH - 2 * WINDOW_MARGIN, height: windowTextHeight, topMargin: 0, @@ -937,7 +952,7 @@ var usersWindow = (function () { minimizeButton = Overlays.addOverlay("image", { x: 0, - y: viewportHeight, + y: viewport.y, width: MIN_MAX_BUTTON_WIDTH, height: MIN_MAX_BUTTON_HEIGHT, imageURL: MIN_MAX_BUTTON_SVG, @@ -954,7 +969,7 @@ var usersWindow = (function () { scrollbarBackgroundPosition = { x: 0, - y: viewportHeight + y: viewport.y }; scrollbarBackground = Overlays.addOverlay("text", { x: 0, @@ -969,7 +984,7 @@ var usersWindow = (function () { scrollbarBarPosition = { x: 0, - y: viewportHeight + y: viewport.y }; scrollbarBar = Overlays.addOverlay("text", { x: 0, @@ -984,7 +999,7 @@ var usersWindow = (function () { friendsButton = Overlays.addOverlay("image", { x: 0, - y: viewportHeight, + y: viewport.y, width: FRIENDS_BUTTON_WIDTH, height: FRIENDS_BUTTON_HEIGHT, imageURL: FRIENDS_BUTTON_SVG, @@ -1004,7 +1019,7 @@ var usersWindow = (function () { values: DISPLAY_VALUES, displayValues: DISPLAY_DISPLAY_VALUES, x: 0, - y: viewportHeight, + y: viewport.y, width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN, promptWidth: DISPLAY_PROMPT_WIDTH, lineHeight: windowLineHeight, @@ -1037,7 +1052,7 @@ var usersWindow = (function () { values: VISIBILITY_VALUES, displayValues: VISIBILITY_DISPLAY_VALUES, x: 0, - y: viewportHeight, + y: viewport.y, width: WINDOW_WIDTH - 1.5 * WINDOW_MARGIN, promptWidth: VISIBILITY_PROMPT_WIDTH, lineHeight: windowLineHeight, From 1928f51b3e61f2c53ab6198de494b722b18d0485 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Fri, 13 May 2016 13:56:31 +1200 Subject: [PATCH 6/7] Restore window position at script start --- scripts/system/users.js | 31 +++++++++++++++++++++++++++---- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/scripts/system/users.js b/scripts/system/users.js index 3b97b9d685..08c354be87 100644 --- a/scripts/system/users.js +++ b/scripts/system/users.js @@ -366,6 +366,8 @@ var usersWindow = (function () { MENU_ITEM_AFTER = "Chat...", SETTING_USERS_WINDOW_MINIMIZED = "UsersWindow.Minimized", + SETINGS_USERS_WINDOW_OFFSET = "UsersWindow.Offset", + // +ve x, y values are offset from left, top of screen; -ve from right, bottom. isVisible = true, isMinimized = false, @@ -816,7 +818,6 @@ var usersWindow = (function () { } } - if (isMovingWindow) { windowPosition = { x: event.x - movingClickOffset.x, @@ -848,13 +849,22 @@ var usersWindow = (function () { } function onMouseReleaseEvent() { + var offset = {}; + if (isMovingScrollbar) { Overlays.editOverlay(scrollbarBar, { backgroundAlpha: SCROLLBAR_BAR_ALPHA }); isMovingScrollbar = false; } - isMovingWindow = false; + + if (isMovingWindow) { + // Save offset of bottom of window to nearest edge of the window. + offset.x = (windowPosition.x + WINDOW_WIDTH / 2 < viewport.x / 2) ? windowPosition.x : windowPosition.x - viewport.x; + offset.y = (windowPosition.y < viewport.y / 2) ? windowPosition.y : windowPosition.y - viewport.y; + Settings.setValue(SETINGS_USERS_WINDOW_OFFSET, JSON.stringify(offset)); + isMovingWindow = false; + } } function onScriptUpdate() { @@ -892,7 +902,9 @@ var usersWindow = (function () { } function setUp() { - var textSizeOverlay; + var textSizeOverlay, + offsetSetting, + offset = {}; textSizeOverlay = Overlays.addOverlay("text", { font: WINDOW_FONT, @@ -904,7 +916,18 @@ var usersWindow = (function () { Overlays.deleteOverlay(textSizeOverlay); viewport = Controller.getViewportDimensions(); - windowPosition = { x: 0, y: viewport.y }; + + offsetSetting = Settings.getValue(SETINGS_USERS_WINDOW_OFFSET); + if (offsetSetting !== "") { + offset = JSON.parse(Settings.getValue(SETINGS_USERS_WINDOW_OFFSET)); + } + if (offset.hasOwnProperty("x") && offset.hasOwnProperty("y")) { + windowPosition.x = offset.x < 0 ? viewport.x + offset.x : offset.x; + windowPosition.y = offset.y <= 0 ? viewport.y + offset.y : offset.y; + + } else { + windowPosition = { x: 0, y: viewport.y }; + } calculateWindowHeight(); From 33e2cde266c0cf814ce7b1d994f6a9b096be0a14 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Sat, 14 May 2016 12:08:19 +1200 Subject: [PATCH 7/7] Change default position to be bottom left of HMD recommended rectangle --- scripts/system/users.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/scripts/system/users.js b/scripts/system/users.js index 08c354be87..d935dd23ca 100644 --- a/scripts/system/users.js +++ b/scripts/system/users.js @@ -904,7 +904,8 @@ var usersWindow = (function () { function setUp() { var textSizeOverlay, offsetSetting, - offset = {}; + offset = {}, + hmdViewport; textSizeOverlay = Overlays.addOverlay("text", { font: WINDOW_FONT, @@ -926,7 +927,11 @@ var usersWindow = (function () { windowPosition.y = offset.y <= 0 ? viewport.y + offset.y : offset.y; } else { - windowPosition = { x: 0, y: viewport.y }; + hmdViewport = Controller.getRecommendedOverlayRect(); + windowPosition = { + x: (viewport.x - hmdViewport.width) / 2, // HMD viewport is narrower than screen. + y: hmdViewport.height // HMD viewport starts at top of screen but only extends down so far. + }; } calculateWindowHeight();