Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-04-20 03:44:02 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #4541 from ctrlaltdavid/20428

Browse source 
CR for Job #20428 - Add the ability to minimize/maximize users.js
This commit is contained in:
Brad Hefta-Gaub 2015-03-31 13:09:46 -07:00
commit 434349d947
1 changed files with 115 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

168
examples/users.js
View file

@ -11,8 +11,11 @@
var usersWindow = (function () {
var WINDOW_WIDTH_2D = 160,
var HIFI_PUBLIC_BUCKET = "http://s3.amazonaws.com/hifi-public/",
WINDOW_WIDTH_2D = 160,
WINDOW_MARGIN_2D = 12,
WINDOW_BASE_MARGIN_2D = 6, // A little less is needed in order look correct
WINDOW_FONT_2D = { size: 12 },
WINDOW_FOREGROUND_COLOR_2D = { red: 240, green: 240, blue: 240 },
WINDOW_FOREGROUND_ALPHA_2D = 0.9,
@ -22,6 +25,14 @@ var usersWindow = (function () {
WINDOW_BACKGROUND_ALPHA_2D = 0.7,
windowPane2D,
windowHeading2D,
MINIMIZE_BUTTON_SVG = HIFI_PUBLIC_BUCKET + "images/tools/min-max-toggle.svg",
MINIMIZE_BUTTON_SVG_WIDTH = 17.1,
MINIMIZE_BUTTON_SVG_HEIGHT = 32.5,
MINIMIZE_BUTTON_WIDTH_2D = 14,
MINIMIZE_BUTTON_HEIGHT_2D = MINIMIZE_BUTTON_WIDTH_2D,
MINIMIZE_BUTTON_COLOR_2D = { red: 255, green: 255, blue: 255 },
MINIMIZE_BUTTON_ALPHA_2D = 0.9,
minimizeButton2D,
SCROLLBAR_BACKGROUND_WIDTH_2D = 12,
SCROLLBAR_BACKGROUND_COLOR_2D = { red: 80, green: 80, blue: 80 },
SCROLLBAR_BACKGROUND_ALPHA_2D = 0.8,
@ -65,6 +76,7 @@ var usersWindow = (function () {
MENU_ITEM_AFTER = "Chat...",
isVisible = true,
isMinimized = false,
viewportHeight,
isMirrorDisplay = false,
@ -77,7 +89,6 @@ var usersWindow = (function () {
scrollbarBarClickedAt, // 0.0 .. 1.0
scrollbarValue = 0.0, // 0.0 .. 1.0
HIFI_PUBLIC_BUCKET = "http://s3.amazonaws.com/hifi-public/",
RADIO_BUTTON_SVG = HIFI_PUBLIC_BUCKET + "images/radio-button.svg",
RADIO_BUTTON_SVG_DIAMETER = 14,
RADIO_BUTTON_DISPLAY_SCALE = 0.7, // 1.0 = windowTextHeight
@ -89,9 +100,15 @@ var usersWindow = (function () {
nonUsersHeight,
maxWindowHeight;
if (isMinimized) {
windowHeight = windowTextHeight + WINDOW_MARGIN_2D + WINDOW_BASE_MARGIN_2D;
return;
}
// Reserve 5 lines for window heading plus visibility heading and controls
// Subtract windowLineSpacing for both end of user list and end of controls
nonUsersHeight = 5 * windowLineHeight - 2 * windowLineSpacing + VISIBILITY_SPACER_2D + 2 * WINDOW_MARGIN_2D;
nonUsersHeight = 5 * windowLineHeight - 2 * windowLineSpacing + VISIBILITY_SPACER_2D + WINDOW_MARGIN_2D
+ WINDOW_BASE_MARGIN_2D;
// Limit window to height of viewport minus VU meter and mirror if displayed
windowHeight = linesOfUsers.length * windowLineHeight + nonUsersHeight;
@ -102,7 +119,7 @@ var usersWindow = (function () {
windowHeight = Math.max(Math.min(windowHeight, maxWindowHeight), nonUsersHeight);
// Corresponding number of users to actually display
numUsersToDisplay = Math.max(Math.round((windowHeight - nonUsersHeight) / windowLineHeight), 0);
numUsersToDisplay = Math.max(Math.floor((windowHeight - nonUsersHeight) / windowLineHeight), 0);
isUsingScrollbars = 0 < numUsersToDisplay && numUsersToDisplay < linesOfUsers.length;
if (isUsingScrollbars) {
firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay));
@ -123,6 +140,10 @@ var usersWindow = (function () {
y: viewportHeight - windowHeight + WINDOW_MARGIN_2D
});
Overlays.editOverlay(minimizeButton2D, {
y: viewportHeight - windowHeight + WINDOW_MARGIN_2D / 2
});
scrollbarBackgroundPosition.y = viewportHeight - windowHeight + WINDOW_MARGIN_2D + windowTextHeight;
Overlays.editOverlay(scrollbarBackground2D, {
y: scrollbarBackgroundPosition.y
@ -133,10 +154,10 @@ var usersWindow = (function () {
y: scrollbarBarPosition.y
});
Overlays.editOverlay(visibilityHeading2D, {
y: viewportHeight - 4 * windowLineHeight + windowLineSpacing - WINDOW_MARGIN_2D
y: viewportHeight - 4 * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN_2D
});
for (i = 0; i < visibilityControls2D.length; i += 1) {
y = viewportHeight - (3 - i) * windowLineHeight + windowLineSpacing - WINDOW_MARGIN_2D;
y = viewportHeight - (3 - i) * windowLineHeight + windowLineSpacing - WINDOW_BASE_MARGIN_2D;
Overlays.editOverlay(visibilityControls2D[i].radioOverlay, { y: y });
Overlays.editOverlay(visibilityControls2D[i].textOverlay, { y: y });
}
@ -166,29 +187,43 @@ var usersWindow = (function () {
reducedTextWidth,
i;
maxTextWidth = WINDOW_WIDTH_2D - (isUsingScrollbars ? SCROLLBAR_BACKGROUND_WIDTH_2D : 0) - 2 * WINDOW_MARGIN_2D;
ellipsisWidth = Overlays.textSize(windowPane2D, "...").width;
reducedTextWidth = maxTextWidth - ellipsisWidth;
if (!isMinimized) {
maxTextWidth = WINDOW_WIDTH_2D - (isUsingScrollbars ? SCROLLBAR_BACKGROUND_WIDTH_2D : 0) - 2 * WINDOW_MARGIN_2D;
ellipsisWidth = Overlays.textSize(windowPane2D, "...").width;
reducedTextWidth = maxTextWidth - ellipsisWidth;
for (i = 0; i < numUsersToDisplay; i += 1) {
user = usersOnline[linesOfUsers[firstUserToDisplay + i]];
userText = user.text;
textWidth = user.textWidth;
for (i = 0; i < numUsersToDisplay; i += 1) {
user = usersOnline[linesOfUsers[firstUserToDisplay + i]];
userText = user.text;
textWidth = user.textWidth;
if (textWidth > maxTextWidth) {
// Trim and append "..." to fit window width
maxTextWidth = maxTextWidth - Overlays.textSize(windowPane2D, "...").width;
while (textWidth > reducedTextWidth) {
userText = userText.slice(0, -1);
textWidth = Overlays.textSize(windowPane2D, userText).width;
if (textWidth > maxTextWidth) {
// Trim and append "..." to fit window width
maxTextWidth = maxTextWidth - Overlays.textSize(windowPane2D, "...").width;
while (textWidth > reducedTextWidth) {
userText = userText.slice(0, -1);
textWidth = Overlays.textSize(windowPane2D, userText).width;
}
userText += "...";
}
userText += "...";
displayText += "\n" + userText;
}
displayText += "\n" + userText;
}
displayText = displayText.slice(1); // Remove leading "\n".
displayText = displayText.slice(1); // Remove leading "\n".
scrollbarBackgroundHeight = numUsersToDisplay * windowLineHeight - windowLineSpacing / 2;
Overlays.editOverlay(scrollbarBackground2D, {
height: scrollbarBackgroundHeight,
visible: isUsingScrollbars
});
scrollbarBarHeight = Math.max(numUsersToDisplay / linesOfUsers.length * scrollbarBackgroundHeight,
SCROLLBAR_BAR_MIN_HEIGHT);
Overlays.editOverlay(scrollbarBar2D, {
height: scrollbarBarHeight,
visible: isUsingScrollbars
});
}
Overlays.editOverlay(windowPane2D, {
height: windowHeight,
@ -198,20 +233,6 @@ var usersWindow = (function () {
Overlays.editOverlay(windowHeading2D, {
text: linesOfUsers.length > 0 ? "Users online" : "No users online"
});
scrollbarBackgroundHeight = numUsersToDisplay * windowLineHeight - windowLineSpacing / 2;
Overlays.editOverlay(scrollbarBackground2D, {
height: scrollbarBackgroundHeight,
visible: isUsingScrollbars
});
scrollbarBarHeight = Math.max(numUsersToDisplay / linesOfUsers.length * scrollbarBackgroundHeight,
SCROLLBAR_BAR_MIN_HEIGHT);
Overlays.editOverlay(scrollbarBar2D, {
height: scrollbarBarHeight,
visible: isUsingScrollbars
});
updateOverlayPositions();
}
function pollUsers() {
@ -264,6 +285,7 @@ var usersWindow = (function () {
calculateWindowHeight();
updateUsersDisplay();
updateOverlayPositions();
} else {
print("Error: Request for users status returned " + usersRequest.status + " " + usersRequest.statusText);
@ -289,9 +311,22 @@ var usersWindow = (function () {
}
}
function setVisible(visible) {
function updateOverlayVisibility() {
var i;
Overlays.editOverlay(windowPane2D, { visible: isVisible });
Overlays.editOverlay(windowHeading2D, { visible: isVisible });
Overlays.editOverlay(minimizeButton2D, { visible: isVisible });
Overlays.editOverlay(scrollbarBackground2D, { visible: isVisible && isUsingScrollbars && !isMinimized });
Overlays.editOverlay(scrollbarBar2D, { visible: isVisible && isUsingScrollbars && !isMinimized });
Overlays.editOverlay(visibilityHeading2D, { visible: isVisible && !isMinimized });
for (i = 0; i < visibilityControls2D.length; i += 1) {
Overlays.editOverlay(visibilityControls2D[i].radioOverlay, { visible: isVisible && !isMinimized });
Overlays.editOverlay(visibilityControls2D[i].textOverlay, { visible: isVisible && !isMinimized });
}
}
function setVisible(visible) {
isVisible = visible;
if (isVisible) {
@ -303,15 +338,15 @@ var usersWindow = (function () {
usersTimer = null;
}
Overlays.editOverlay(windowPane2D, { visible: isVisible });
Overlays.editOverlay(windowHeading2D, { visible: isVisible });
Overlays.editOverlay(scrollbarBackground2D, { visible: isVisible && isUsingScrollbars });
Overlays.editOverlay(scrollbarBar2D, { visible: isVisible && isUsingScrollbars });
Overlays.editOverlay(visibilityHeading2D, { visible: isVisible });
for (i = 0; i < visibilityControls2D.length; i += 1) {
Overlays.editOverlay(visibilityControls2D[i].radioOverlay, { visible: isVisible });
Overlays.editOverlay(visibilityControls2D[i].textOverlay, { visible: isVisible });
}
updateOverlayVisibility();
}
function setMinimized(minimized) {
isMinimized = minimized;
Overlays.editOverlay(minimizeButton2D, {
subImage: { y: isMinimized ? MINIMIZE_BUTTON_SVG_HEIGHT / 2 : 0 }
});
updateOverlayVisibility();
}
function onMenuItemEvent(event) {
@ -360,6 +395,8 @@ var usersWindow = (function () {
//print("Go to " + usersOnline[linesOfUsers[userClicked]].username);
location.goToUser(usersOnline[linesOfUsers[userClicked]].username);
}
return;
}
visibilityChanged = false;
@ -376,6 +413,15 @@ var usersWindow = (function () {
visibilityControls2D[i].selected = clickedOverlay === visibilityControls2D[i].textOverlay;
}
updateVisibilityControls();
return;
}
if (clickedOverlay === minimizeButton2D) {
setMinimized(!isMinimized);
calculateWindowHeight();
updateOverlayPositions();
updateUsersDisplay();
return;
}
if (clickedOverlay === scrollbarBar2D) {
@ -384,6 +430,7 @@ var usersWindow = (function () {
backgroundAlpha: SCROLLBAR_BAR_SELECTED_ALPHA_2D
});
isMovingScrollbar = true;
return;
}
if (clickedOverlay === scrollbarBackground2D) {
@ -398,6 +445,7 @@ var usersWindow = (function () {
firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay));
updateOverlayPositions();
updateUsersDisplay();
return;
}
}
@ -492,7 +540,19 @@ var usersWindow = (function () {
backgroundAlpha: 0.0,
text: "No users online",
font: WINDOW_FONT_2D,
visible: isVisible
visible: isVisible && !isMinimized
});
minimizeButton2D = Overlays.addOverlay("image", {
x: WINDOW_WIDTH_2D - WINDOW_MARGIN_2D / 2 - MINIMIZE_BUTTON_WIDTH_2D,
y: viewportHeight,
width: MINIMIZE_BUTTON_WIDTH_2D,
height: MINIMIZE_BUTTON_HEIGHT_2D,
imageURL: MINIMIZE_BUTTON_SVG,
subImage: { x: 0, y: 0, width: MINIMIZE_BUTTON_SVG_WIDTH, height: MINIMIZE_BUTTON_SVG_HEIGHT / 2 },
color: MINIMIZE_BUTTON_COLOR_2D,
alpha: MINIMIZE_BUTTON_ALPHA_2D,
visible: isVisible && !isMinimized
});
scrollbarBackgroundPosition = {
@ -507,7 +567,7 @@ var usersWindow = (function () {
backgroundColor: SCROLLBAR_BACKGROUND_COLOR_2D,
backgroundAlpha: SCROLLBAR_BACKGROUND_ALPHA_2D,
text: "",
visible: isVisible && isUsingScrollbars
visible: isVisible && isUsingScrollbars && !isMinimized
});
scrollbarBarPosition = {
@ -522,7 +582,7 @@ var usersWindow = (function () {
backgroundColor: SCROLLBAR_BAR_COLOR_2D,
backgroundAlpha: SCROLLBAR_BAR_ALPHA_2D,
text: "",
visible: isVisible && isUsingScrollbars
visible: isVisible && isUsingScrollbars && !isMinimized
});
visibilityHeading2D = Overlays.addOverlay("text", {
@ -537,7 +597,7 @@ var usersWindow = (function () {
backgroundAlpha: 0.0,
text: "I am visible to:",
font: WINDOW_FONT_2D,
visible: isVisible
visible: isVisible && !isMinimized
});
myVisibility = GlobalServices.findableBy;
@ -561,7 +621,8 @@ var usersWindow = (function () {
height: RADIO_BUTTON_SVG_DIAMETER
},
color: WINDOW_HEADING_COLOR_2D,
alpha: WINDOW_FOREGROUND_ALPHA_2D
alpha: WINDOW_FOREGROUND_ALPHA_2D,
visible: isVisible && !isMinimized
}),
textOverlay: Overlays.addOverlay("text", {
x: WINDOW_MARGIN_2D,
@ -575,7 +636,7 @@ var usersWindow = (function () {
backgroundAlpha: 0.0,
text: optionText,
font: WINDOW_FONT_2D,
visible: isVisible
visible: isVisible && !isMinimized
}),
selected: myVisibility === VISIBILITY_VALUES[0]
}];
@ -634,6 +695,7 @@ var usersWindow = (function () {
Script.clearTimeout(usersTimer);
Overlays.deleteOverlay(windowPane2D);
Overlays.deleteOverlay(windowHeading2D);
Overlays.deleteOverlay(minimizeButton2D);
Overlays.deleteOverlay(scrollbarBackground2D);
Overlays.deleteOverlay(scrollbarBar2D);
Overlays.deleteOverlay(visibilityHeading2D);