Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-06-21 22:20:26 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

refactor system html to split js/css

Browse source
This commit is contained in:
Zach Pomerantz 2016-08-09 14:15:06 -07:00
parent 093d80e102
commit 6965fb0520
13 changed files with 3121 additions and 1785 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
scripts/system/html/edit-style.css → scripts/system/html/css/edit-style.css
View file

@ -10,51 +10,51 @@
@font-face { @font-face {
font-family: Raleway-Regular; font-family: Raleway-Regular;
src: url(../../../resources/fonts/Raleway-Regular.ttf), /* Windows production */ src: url(../../../../resources/fonts/Raleway-Regular.ttf), /* Windows production */
url(../../../fonts/Raleway-Regular.ttf), /* OSX production */ url(../../../../fonts/Raleway-Regular.ttf), /* OSX production */
url(../../../interface/resources/fonts/Raleway-Regular.ttf); /* Development, running script in /HiFi/examples */ url(../../../../interface/resources/fonts/Raleway-Regular.ttf); /* Development, running script in /HiFi/examples */
} }
@font-face { @font-face {
font-family: Raleway-Light; font-family: Raleway-Light;
src: url(../../../resources/fonts/Raleway-Light.ttf), src: url(../../../../resources/fonts/Raleway-Light.ttf),
url(../../../fonts/Raleway-Light.ttf), url(../../../../fonts/Raleway-Light.ttf),
url(../../../interface/resources/fonts/Raleway-Light.ttf); url(../../../../interface/resources/fonts/Raleway-Light.ttf);
} }
@font-face { @font-face {
font-family: Raleway-Bold; font-family: Raleway-Bold;
src: url(../../../resources/fonts/Raleway-Bold.ttf), src: url(../../../../resources/fonts/Raleway-Bold.ttf),
url(../../../fonts/Raleway-Bold.ttf), url(../../../../fonts/Raleway-Bold.ttf),
url(../../../interface/resources/fonts/Raleway-Bold.ttf); url(../../../../interface/resources/fonts/Raleway-Bold.ttf);
} }
@font-face { @font-face {
font-family: Raleway-SemiBold; font-family: Raleway-SemiBold;
src: url(../../../resources/fonts/Raleway-SemiBold.ttf), src: url(../../../../resources/fonts/Raleway-SemiBold.ttf),
url(../../../fonts/Raleway-SemiBold.ttf), url(../../../../fonts/Raleway-SemiBold.ttf),
url(../../../interface/resources/fonts/Raleway-SemiBold.ttf); url(../../../../interface/resources/fonts/Raleway-SemiBold.ttf);
} }
@font-face { @font-face {
font-family: FiraSans-SemiBold; font-family: FiraSans-SemiBold;
src: url(../../../resources/fonts/FiraSans-SemiBold.ttf), src: url(../../../../resources/fonts/FiraSans-SemiBold.ttf),
url(../../../fonts/FiraSans-SemiBold.ttf), url(../../../../fonts/FiraSans-SemiBold.ttf),
url(../../../interface/resources/fonts/FiraSans-SemiBold.ttf); url(../../../../interface/resources/fonts/FiraSans-SemiBold.ttf);
} }
@font-face { @font-face {
font-family: AnonymousPro-Regular; font-family: AnonymousPro-Regular;
src: url(../../../resources/fonts/AnonymousPro-Regular.ttf), src: url(../../../../resources/fonts/AnonymousPro-Regular.ttf),
url(../../../fonts/AnonymousPro-Regular.ttf), url(../../../../fonts/AnonymousPro-Regular.ttf),
url(../../../interface/resources/fonts/AnonymousPro-Regular.ttf); url(../../../../interface/resources/fonts/AnonymousPro-Regular.ttf);
} }
@font-face { @font-face {
font-family: HiFi-Glyphs; font-family: HiFi-Glyphs;
src: url(../../../resources/fonts/hifi-glyphs.ttf), src: url(../../../../resources/fonts/hifi-glyphs.ttf),
url(../../../fonts/hifi-glyphs.ttf), url(../../../../fonts/hifi-glyphs.ttf),
url(../../../interface/resources/fonts/hifi-glyphs.ttf); url(../../../../interface/resources/fonts/hifi-glyphs.ttf);
} }
* { * {
@ -1077,10 +1077,6 @@ input#dimension-rescale-button {
input#reset-to-natural-dimensions { input#reset-to-natural-dimensions {
margin-right: 0; margin-right: 0;
} }
input#preview-camera-button {
margin-left: 1px;
margin-right: 0;
}
#animation-fps { #animation-fps {
margin-top: 48px; margin-top: 48px;

314
scripts/system/html/entityList.html
View file

@ -10,314 +10,12 @@
<html> <html>
<head> <head>
<link rel="stylesheet" type="text/css" href="edit-style.css"> <link rel="stylesheet" type="text/css" href="css/edit-style.css">
<script src="list.min.js"></script> <script src="js/list.min.js"></script>
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script> <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script type="text/javascript" src="eventBridgeLoader.js"></script> <script type="text/javascript" src="js/eventBridgeLoader.js"></script>
<script type="text/javascript" src="spinButtons.js"></script> <script type="text/javascript" src="js/spinButtons.js"></script>
<script> <script type="text/javascript" src="js/entityList.js"></script>
var entities = {};
var selectedEntities = [];
var currentSortColumn = 'type';
var currentSortOrder = 'des';
var entityList = null;
var refreshEntityListTimer = null;
const ASCENDING_STRING = '&#x25BE;';
const DESCENDING_STRING = '&#x25B4;';
const LOCKED_GLYPH = "&#xe006;";
const VISIBLE_GLYPH = "&#xe007;";
const DELETE = 46; // Key code for the delete key.
const MAX_ITEMS = Number.MAX_VALUE; // Used to set the max length of the list of discovered entities.
debugPrint = function (message) {
console.log(message);
};
function loaded() {
openEventBridge(function() {
entityList = new List('entity-list', { valueNames: ['name', 'type', 'url', 'locked', 'visible'], page: MAX_ITEMS});
entityList.clear();
elEntityTable = document.getElementById("entity-table");
elEntityTableBody = document.getElementById("entity-table-body");
elRefresh = document.getElementById("refresh");
elToggleLocked = document.getElementById("locked");
elToggleVisible = document.getElementById("visible");
elDelete = document.getElementById("delete");
elTeleport = document.getElementById("teleport");
elRadius = document.getElementById("radius");
elFooter = document.getElementById("footer-text");
elNoEntitiesMessage = document.getElementById("no-entities");
elNoEntitiesRadius = document.getElementById("no-entities-radius");
elEntityTableScroll = document.getElementById("entity-table-scroll");
document.getElementById("entity-name").onclick = function() {
setSortColumn('name');
};
document.getElementById("entity-type").onclick = function() {
setSortColumn('type');
};
document.getElementById("entity-url").onclick = function() {
setSortColumn('url');
};
document.getElementById("entity-locked").onclick = function () {
setSortColumn('locked');
};
document.getElementById("entity-visible").onclick = function () {
setSortColumn('visible');
};
function onRowClicked(clickEvent) {
var id = this.dataset.entityId;
var selection = [this.dataset.entityId];
if (clickEvent.ctrlKey) {
selection = selection.concat(selectedEntities);
} else if (clickEvent.shiftKey && selectedEntities.length > 0) {
var previousItemFound = -1;
var clickedItemFound = -1;
for (var entity in entityList.visibleItems) {
if (clickedItemFound === -1 && this.dataset.entityId == entityList.visibleItems[entity].values().id) {
clickedItemFound = entity;
} else if(previousItemFound === -1 && selectedEntities[0] == entityList.visibleItems[entity].values().id) {
previousItemFound = entity;
}
}
if (previousItemFound !== -1 && clickedItemFound !== -1) {
var betweenItems = [];
var toItem = Math.max(previousItemFound, clickedItemFound);
// skip first and last item in this loop, we add them to selection after the loop
for (var i = (Math.min(previousItemFound, clickedItemFound) + 1); i < toItem; i++) {
entityList.visibleItems[i].elm.className = 'selected';
betweenItems.push(entityList.visibleItems[i].values().id);
}
if (previousItemFound > clickedItemFound) {
// always make sure that we add the items in the right order
betweenItems.reverse();
}
selection = selection.concat(betweenItems, selectedEntities);
}
}
selectedEntities = selection;
this.className = 'selected';
EventBridge.emitWebEvent(JSON.stringify({
type: "selectionUpdate",
focus: false,
entityIds: selection,
}));
}
function onRowDoubleClicked() {
EventBridge.emitWebEvent(JSON.stringify({
type: "selectionUpdate",
focus: true,
entityIds: [this.dataset.entityId],
}));
}
function addEntity(id, name, type, url, locked, visible) {
var urlParts = url.split('/');
var filename = urlParts[urlParts.length - 1];
if (entities[id] === undefined) {
entityList.add([{ id: id, name: name, type: type, url: filename, locked: locked, visible: visible }],
function (items) {
var currentElement = items[0].elm;
var id = items[0]._values.id;
entities[id] = {
id: id,
name: name,
el: currentElement,
item: items[0]
};
currentElement.setAttribute('id', 'entity_' + id);
currentElement.setAttribute('title', url);
currentElement.dataset.entityId = id;
currentElement.onclick = onRowClicked;
currentElement.ondblclick = onRowDoubleClicked;
});
if (refreshEntityListTimer) {
clearTimeout(refreshEntityListTimer);
}
refreshEntityListTimer = setTimeout(refreshEntityListObject, 50);
} else {
var item = entities[id].item;
item.values({ name: name, url: filename, locked: locked, visible: visible });
}
}
function clearEntities() {
entities = {};
entityList.clear();
}
var elSortOrder = {
name: document.querySelector('#entity-name .sort-order'),
type: document.querySelector('#entity-type .sort-order'),
url: document.querySelector('#entity-url .sort-order'),
locked: document.querySelector('#entity-locked .sort-order'),
visible: document.querySelector('#entity-visible .sort-order')
}
function setSortColumn(column) {
if (currentSortColumn == column) {
currentSortOrder = currentSortOrder == "asc" ? "desc" : "asc";
} else {
elSortOrder[currentSortColumn].innerHTML = "";
currentSortColumn = column;
currentSortOrder = "asc";
}
elSortOrder[column].innerHTML = currentSortOrder == "asc" ? ASCENDING_STRING : DESCENDING_STRING;
entityList.sort(currentSortColumn, { order: currentSortOrder });
}
setSortColumn('type');
function refreshEntities() {
clearEntities();
EventBridge.emitWebEvent(JSON.stringify({ type: 'refresh' }));
}
function refreshEntityListObject() {
refreshEntityListTimer = null;
entityList.sort(currentSortColumn, { order: currentSortOrder });
entityList.search(document.getElementById("filter").value);
}
function updateSelectedEntities(selectedEntities) {
var notFound = false;
for (var id in entities) {
entities[id].el.className = '';
}
for (var i = 0; i < selectedEntities.length; i++) {
var id = selectedEntities[i];
if (id in entities) {
var entity = entities[id];
entity.el.className = 'selected';
} else {
notFound = true;
}
}
if (selectedEntities.length > 1) {
elFooter.firstChild.nodeValue = selectedEntities.length + " entities selected";
} else if (selectedEntities.length === 1) {
elFooter.firstChild.nodeValue = "1 entity selected";
} else if (entityList.visibleItems.length === 1) {
elFooter.firstChild.nodeValue = "1 entity found";
} else {
elFooter.firstChild.nodeValue = entityList.visibleItems.length + " entities found";
}
// HACK: Fixes the footer and header text sometimes not displaying after adding or deleting entities.
// The problem appears to be a bug in the Qt HTML/CSS rendering (Qt 5.5).
document.getElementById("radius").focus();
document.getElementById("radius").blur();
return notFound;
}
elRefresh.onclick = function() {
refreshEntities();
}
elToggleLocked.onclick = function () {
EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleLocked' }));
}
elToggleVisible.onclick = function () {
EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleVisible' }));
}
elTeleport.onclick = function () {
EventBridge.emitWebEvent(JSON.stringify({ type: 'teleport' }));
}
elDelete.onclick = function() {
EventBridge.emitWebEvent(JSON.stringify({ type: 'delete' }));
refreshEntities();
}
document.addEventListener("keydown", function (keyDownEvent) {
if (keyDownEvent.target.nodeName === "INPUT") {
return;
}
var keyCode = keyDownEvent.keyCode;
if (keyCode === DELETE) {
EventBridge.emitWebEvent(JSON.stringify({ type: 'delete' }));
refreshEntities();
}
}, false);
elRadius.onchange = function () {
elRadius.value = Math.max(elRadius.value, 0);
EventBridge.emitWebEvent(JSON.stringify({ type: 'radius', radius: elRadius.value }));
refreshEntities();
elNoEntitiesRadius.firstChild.nodeValue = elRadius.value;
}
if (window.EventBridge !== undefined) {
EventBridge.scriptEventReceived.connect(function(data) {
data = JSON.parse(data);
if (data.type === "clearEntityList") {
clearEntities();
} else if (data.type == "selectionUpdate") {
var notFound = updateSelectedEntities(data.selectedIDs);
if (notFound) {
refreshEntities();
}
} else if (data.type == "update") {
var newEntities = data.entities;
if (newEntities.length == 0) {
elNoEntitiesMessage.style.display = "block";
elFooter.firstChild.nodeValue = "0 entities found";
} else {
elNoEntitiesMessage.style.display = "none";
for (var i = 0; i < newEntities.length; i++) {
var id = newEntities[i].id;
addEntity(id, newEntities[i].name, newEntities[i].type, newEntities[i].url,
newEntities[i].locked ? LOCKED_GLYPH : null,
newEntities[i].visible ? VISIBLE_GLYPH : null);
}
updateSelectedEntities(data.selectedIDs);
resize();
}
}
});
setTimeout(refreshEntities, 1000);
}
function resize() {
// Take up available window space
elEntityTableScroll.style.height = window.innerHeight - 207;
var tds = document.querySelectorAll("#entity-table-body tr:first-child td");
var ths = document.querySelectorAll("#entity-table thead th");
if (tds.length >= ths.length) {
// Update the widths of the header cells to match the body
for (var i = 0; i < ths.length; i++) {
ths[i].width = tds[i].offsetWidth;
}
} else {
// Reasonable widths if nothing is displayed
var tableWidth = document.getElementById("entity-table").offsetWidth;
ths[0].width = 0.16 * tableWidth;
ths[1].width = 0.34 * tableWidth;
ths[2].width = 0.34 * tableWidth;
ths[3].width = 0.08 * tableWidth;
ths[4].width = 0.08 * tableWidth;
}
};
window.onresize = resize;
resize();
});
augmentSpinButtons();
// Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked
document.addEventListener("contextmenu", function (event) {
event.preventDefault();
}, false);
}
</script>
</head> </head>
<body onload='loaded();'> <body onload='loaded();'>
<div id="entity-list-header"> <div id="entity-list-header">
@ -378,4 +76,4 @@
</div> </div>
</div> </div>
</body> </body>
</html> </html>

1322
scripts/system/html/entityProperties.html
View file

File diff suppressed because it is too large Load diff

1317
scripts/system/html/entityProperties.js Normal file
View file

File diff suppressed because it is too large Load diff

142
scripts/system/html/gridControls.html
View file

@ -10,144 +10,14 @@
<html> <html>
<head> <head>
<link rel="stylesheet" type="text/css" href="edit-style.css"> <link rel="stylesheet" type="text/css" href="css/edit-style.css">
<link rel="stylesheet" type="text/css" href="css/colpick.css"> <link rel="stylesheet" type="text/css" href="css/colpick.css">
<script src="jquery-2.1.4.min.js"></script> <script src="js/jquery-2.1.4.min.js"></script>
<script src="colpick.js"></script> <script src="js/colpick.js"></script>
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script> <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script type="text/javascript" src="eventBridgeLoader.js"></script> <script type="text/javascript" src="js/eventBridgeLoader.js"></script>
<script type="text/javascript" src="spinButtons.js"></script> <script type="text/javascript" src="js/spinButtons.js"></script>
<script> <script type="text/javascript" src="js/gridControls.js"></script>
function loaded() {
openEventBridge(function() {
elPosY = document.getElementById("horiz-y");
elMinorSpacing = document.getElementById("minor-spacing");
elMajorSpacing = document.getElementById("major-spacing");
elSnapToGrid = document.getElementById("snap-to-grid");
elHorizontalGridVisible = document.getElementById("horiz-grid-visible");
elMoveToSelection = document.getElementById("move-to-selection");
elMoveToAvatar = document.getElementById("move-to-avatar");
if (window.EventBridge !== undefined) {
EventBridge.scriptEventReceived.connect(function(data) {
data = JSON.parse(data);
if (data.origin) {
var origin = data.origin;
elPosY.value = origin.y;
}
if (data.minorGridEvery !== undefined) {
elMinorSpacing.value = data.minorGridEvery;
}
if (data.majorGridEvery !== undefined) {
elMajorSpacing.value = data.majorGridEvery;
}
if (data.gridColor) {
gridColor = data.gridColor;
}
if (data.snapToGrid !== undefined) {
elSnapToGrid.checked = data.snapToGrid == true;
}
if (data.visible !== undefined) {
elHorizontalGridVisible.checked = data.visible == true;
}
});
function emitUpdate() {
EventBridge.emitWebEvent(JSON.stringify({
type: "update",
origin: {
y: elPosY.value,
},
minorGridEvery: elMinorSpacing.value,
majorGridEvery: elMajorSpacing.value,
gridColor: gridColor,
snapToGrid: elSnapToGrid.checked,
visible: elHorizontalGridVisible.checked,
}));
}
}
elPosY.addEventListener("change", emitUpdate);
elMinorSpacing.addEventListener("change", emitUpdate);
elMajorSpacing.addEventListener("change", emitUpdate);
elSnapToGrid.addEventListener("change", emitUpdate);
elHorizontalGridVisible.addEventListener("change", emitUpdate);
elMoveToAvatar.addEventListener("click", function() {
EventBridge.emitWebEvent(JSON.stringify({
type: "action",
action: "moveToAvatar",
}));
});
elMoveToSelection.addEventListener("click", function() {
EventBridge.emitWebEvent(JSON.stringify({
type: "action",
action: "moveToSelection",
}));
});
var gridColor = { red: 255, green: 255, blue: 255 };
var elColor = document.getElementById("grid-color");
var elColorRed = document.getElementById("grid-color-red");
var elColorGreen = document.getElementById("grid-color-green");
var elColorBlue = document.getElementById("grid-color-blue");
elColor.style.backgroundColor = "rgb(" + gridColor.red + "," + gridColor.green + "," + gridColor.blue + ")";
elColorRed.value = gridColor.red;
elColorGreen.value = gridColor.green;
elColorBlue.value = gridColor.blue;
var colorChangeFunction = function () {
gridColor = { red: elColorRed.value, green: elColorGreen.value, blue: elColorBlue.value };
elColor.style.backgroundColor = "rgb(" + gridColor.red + "," + gridColor.green + "," + gridColor.blue + ")";
emitUpdate();
};
var colorPickFunction = function (red, green, blue) {
elColorRed.value = red;
elColorGreen.value = green;
elColorBlue.value = blue;
gridColor = { red: red, green: green, blue: blue };
emitUpdate();
}
elColorRed.addEventListener('change', colorChangeFunction);
elColorGreen.addEventListener('change', colorChangeFunction);
elColorBlue.addEventListener('change', colorChangeFunction);
$('#grid-color').colpick({
colorScheme: 'dark',
layout: 'hex',
color: { r: gridColor.red, g: gridColor.green, b: gridColor.blue },
onShow: function (colpick) {
$('#grid-color').attr('active', 'true');
},
onHide: function (colpick) {
$('#grid-color').attr('active', 'false');
},
onSubmit: function (hsb, hex, rgb, el) {
$(el).css('background-color', '#' + hex);
$(el).colpickHide();
colorPickFunction(rgb.r, rgb.g, rgb.b);
}
});
augmentSpinButtons();
EventBridge.emitWebEvent(JSON.stringify({ type: 'init' }));
});
// Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked
document.addEventListener("contextmenu", function (event) {
event.preventDefault();
}, false);
}
</script>
</head> </head>
<body onload='loaded();'> <body onload='loaded();'>
<div id="grid-section"> <div id="grid-section">

0
scripts/system/html/colpick.js → scripts/system/html/js/colpick.js
View file

310
scripts/system/html/js/entityList.js Normal file
View file

@ -0,0 +1,310 @@
// entityList.js
//
// Created by Ryan Huffman on 19 Nov 2014
// Copyright 2014 High Fidelity, Inc.
//
// Distributed under the Apache License, Version 2.0.
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
var entities = {};
var selectedEntities = [];
var currentSortColumn = 'type';
var currentSortOrder = 'des';
var entityList = null;
var refreshEntityListTimer = null;
const ASCENDING_STRING = '&#x25BE;';
const DESCENDING_STRING = '&#x25B4;';
const LOCKED_GLYPH = "&#xe006;";
const VISIBLE_GLYPH = "&#xe007;";
const DELETE = 46; // Key code for the delete key.
const MAX_ITEMS = Number.MAX_VALUE; // Used to set the max length of the list of discovered entities.
debugPrint = function (message) {
console.log(message);
};
function loaded() {
openEventBridge(function() {
entityList = new List('entity-list', { valueNames: ['name', 'type', 'url', 'locked', 'visible'], page: MAX_ITEMS});
entityList.clear();
elEntityTable = document.getElementById("entity-table");
elEntityTableBody = document.getElementById("entity-table-body");
elRefresh = document.getElementById("refresh");
elToggleLocked = document.getElementById("locked");
elToggleVisible = document.getElementById("visible");
elDelete = document.getElementById("delete");
elTeleport = document.getElementById("teleport");
elRadius = document.getElementById("radius");
elFooter = document.getElementById("footer-text");
elNoEntitiesMessage = document.getElementById("no-entities");
elNoEntitiesRadius = document.getElementById("no-entities-radius");
elEntityTableScroll = document.getElementById("entity-table-scroll");
document.getElementById("entity-name").onclick = function() {
setSortColumn('name');
};
document.getElementById("entity-type").onclick = function() {
setSortColumn('type');
};
document.getElementById("entity-url").onclick = function() {
setSortColumn('url');
};
document.getElementById("entity-locked").onclick = function () {
setSortColumn('locked');
};
document.getElementById("entity-visible").onclick = function () {
setSortColumn('visible');
};
function onRowClicked(clickEvent) {
var id = this.dataset.entityId;
var selection = [this.dataset.entityId];
if (clickEvent.ctrlKey) {
selection = selection.concat(selectedEntities);
} else if (clickEvent.shiftKey && selectedEntities.length > 0) {
var previousItemFound = -1;
var clickedItemFound = -1;
for (var entity in entityList.visibleItems) {
if (clickedItemFound === -1 && this.dataset.entityId == entityList.visibleItems[entity].values().id) {
clickedItemFound = entity;
} else if(previousItemFound === -1 && selectedEntities[0] == entityList.visibleItems[entity].values().id) {
previousItemFound = entity;
}
}
if (previousItemFound !== -1 && clickedItemFound !== -1) {
var betweenItems = [];
var toItem = Math.max(previousItemFound, clickedItemFound);
// skip first and last item in this loop, we add them to selection after the loop
for (var i = (Math.min(previousItemFound, clickedItemFound) + 1); i < toItem; i++) {
entityList.visibleItems[i].elm.className = 'selected';
betweenItems.push(entityList.visibleItems[i].values().id);
}
if (previousItemFound > clickedItemFound) {
// always make sure that we add the items in the right order
betweenItems.reverse();
}
selection = selection.concat(betweenItems, selectedEntities);
}
}
selectedEntities = selection;
this.className = 'selected';
EventBridge.emitWebEvent(JSON.stringify({
type: "selectionUpdate",
focus: false,
entityIds: selection,
}));
}
function onRowDoubleClicked() {
EventBridge.emitWebEvent(JSON.stringify({
type: "selectionUpdate",
focus: true,
entityIds: [this.dataset.entityId],
}));
}
function addEntity(id, name, type, url, locked, visible) {
var urlParts = url.split('/');
var filename = urlParts[urlParts.length - 1];
if (entities[id] === undefined) {
entityList.add([{ id: id, name: name, type: type, url: filename, locked: locked, visible: visible }],
function (items) {
var currentElement = items[0].elm;
var id = items[0]._values.id;
entities[id] = {
id: id,
name: name,
el: currentElement,
item: items[0]
};
currentElement.setAttribute('id', 'entity_' + id);
currentElement.setAttribute('title', url);
currentElement.dataset.entityId = id;
currentElement.onclick = onRowClicked;
currentElement.ondblclick = onRowDoubleClicked;
});
if (refreshEntityListTimer) {
clearTimeout(refreshEntityListTimer);
}
refreshEntityListTimer = setTimeout(refreshEntityListObject, 50);
} else {
var item = entities[id].item;
item.values({ name: name, url: filename, locked: locked, visible: visible });
}
}
function clearEntities() {
entities = {};
entityList.clear();
}
var elSortOrder = {
name: document.querySelector('#entity-name .sort-order'),
type: document.querySelector('#entity-type .sort-order'),
url: document.querySelector('#entity-url .sort-order'),
locked: document.querySelector('#entity-locked .sort-order'),
visible: document.querySelector('#entity-visible .sort-order')
}
function setSortColumn(column) {
if (currentSortColumn == column) {
currentSortOrder = currentSortOrder == "asc" ? "desc" : "asc";
} else {
elSortOrder[currentSortColumn].innerHTML = "";
currentSortColumn = column;
currentSortOrder = "asc";
}
elSortOrder[column].innerHTML = currentSortOrder == "asc" ? ASCENDING_STRING : DESCENDING_STRING;
entityList.sort(currentSortColumn, { order: currentSortOrder });
}
setSortColumn('type');
function refreshEntities() {
clearEntities();
EventBridge.emitWebEvent(JSON.stringify({ type: 'refresh' }));
}
function refreshEntityListObject() {
refreshEntityListTimer = null;
entityList.sort(currentSortColumn, { order: currentSortOrder });
entityList.search(document.getElementById("filter").value);
}
function updateSelectedEntities(selectedEntities) {
var notFound = false;
for (var id in entities) {
entities[id].el.className = '';
}
for (var i = 0; i < selectedEntities.length; i++) {
var id = selectedEntities[i];
if (id in entities) {
var entity = entities[id];
entity.el.className = 'selected';
} else {
notFound = true;
}
}
if (selectedEntities.length > 1) {
elFooter.firstChild.nodeValue = selectedEntities.length + " entities selected";
} else if (selectedEntities.length === 1) {
elFooter.firstChild.nodeValue = "1 entity selected";
} else if (entityList.visibleItems.length === 1) {
elFooter.firstChild.nodeValue = "1 entity found";
} else {
elFooter.firstChild.nodeValue = entityList.visibleItems.length + " entities found";
}
// HACK: Fixes the footer and header text sometimes not displaying after adding or deleting entities.
// The problem appears to be a bug in the Qt HTML/CSS rendering (Qt 5.5).
document.getElementById("radius").focus();
document.getElementById("radius").blur();
return notFound;
}
elRefresh.onclick = function() {
refreshEntities();
}
elToggleLocked.onclick = function () {
EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleLocked' }));
}
elToggleVisible.onclick = function () {
EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleVisible' }));
}
elTeleport.onclick = function () {
EventBridge.emitWebEvent(JSON.stringify({ type: 'teleport' }));
}
elDelete.onclick = function() {
EventBridge.emitWebEvent(JSON.stringify({ type: 'delete' }));
refreshEntities();
}
document.addEventListener("keydown", function (keyDownEvent) {
if (keyDownEvent.target.nodeName === "INPUT") {
return;
}
var keyCode = keyDownEvent.keyCode;
if (keyCode === DELETE) {
EventBridge.emitWebEvent(JSON.stringify({ type: 'delete' }));
refreshEntities();
}
}, false);
elRadius.onchange = function () {
elRadius.value = Math.max(elRadius.value, 0);
EventBridge.emitWebEvent(JSON.stringify({ type: 'radius', radius: elRadius.value }));
refreshEntities();
elNoEntitiesRadius.firstChild.nodeValue = elRadius.value;
}
if (window.EventBridge !== undefined) {
EventBridge.scriptEventReceived.connect(function(data) {
data = JSON.parse(data);
if (data.type === "clearEntityList") {
clearEntities();
} else if (data.type == "selectionUpdate") {
var notFound = updateSelectedEntities(data.selectedIDs);
if (notFound) {
refreshEntities();
}
} else if (data.type == "update") {
var newEntities = data.entities;
if (newEntities.length == 0) {
elNoEntitiesMessage.style.display = "block";
elFooter.firstChild.nodeValue = "0 entities found";
} else {
elNoEntitiesMessage.style.display = "none";
for (var i = 0; i < newEntities.length; i++) {
var id = newEntities[i].id;
addEntity(id, newEntities[i].name, newEntities[i].type, newEntities[i].url,
newEntities[i].locked ? LOCKED_GLYPH : null,
newEntities[i].visible ? VISIBLE_GLYPH : null);
}
updateSelectedEntities(data.selectedIDs);
resize();
}
}
});
setTimeout(refreshEntities, 1000);
}
function resize() {
// Take up available window space
elEntityTableScroll.style.height = window.innerHeight - 207;
var tds = document.querySelectorAll("#entity-table-body tr:first-child td");
var ths = document.querySelectorAll("#entity-table thead th");
if (tds.length >= ths.length) {
// Update the widths of the header cells to match the body
for (var i = 0; i < ths.length; i++) {
ths[i].width = tds[i].offsetWidth;
}
} else {
// Reasonable widths if nothing is displayed
var tableWidth = document.getElementById("entity-table").offsetWidth;
ths[0].width = 0.16 * tableWidth;
ths[1].width = 0.34 * tableWidth;
ths[2].width = 0.34 * tableWidth;
ths[3].width = 0.08 * tableWidth;
ths[4].width = 0.08 * tableWidth;
}
};
window.onresize = resize;
resize();
});
augmentSpinButtons();
// Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked
document.addEventListener("contextmenu", function (event) {
event.preventDefault();
}, false);
}

1317
scripts/system/html/js/entityProperties.js Normal file
View file

File diff suppressed because it is too large Load diff

0
scripts/system/html/eventBridgeLoader.js → scripts/system/html/js/eventBridgeLoader.js
View file

138
scripts/system/html/js/gridControls.js Normal file
View file

@ -0,0 +1,138 @@
// gridControls.js
//
// Created by Ryan Huffman on 6 Nov 2014
// Copyright 2014 High Fidelity, Inc.
//
// Distributed under the Apache License, Version 2.0.
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
function loaded() {
openEventBridge(function() {
elPosY = document.getElementById("horiz-y");
elMinorSpacing = document.getElementById("minor-spacing");
elMajorSpacing = document.getElementById("major-spacing");
elSnapToGrid = document.getElementById("snap-to-grid");
elHorizontalGridVisible = document.getElementById("horiz-grid-visible");
elMoveToSelection = document.getElementById("move-to-selection");
elMoveToAvatar = document.getElementById("move-to-avatar");
if (window.EventBridge !== undefined) {
EventBridge.scriptEventReceived.connect(function(data) {
data = JSON.parse(data);
if (data.origin) {
var origin = data.origin;
elPosY.value = origin.y;
}
if (data.minorGridEvery !== undefined) {
elMinorSpacing.value = data.minorGridEvery;
}
if (data.majorGridEvery !== undefined) {
elMajorSpacing.value = data.majorGridEvery;
}
if (data.gridColor) {
gridColor = data.gridColor;
}
if (data.snapToGrid !== undefined) {
elSnapToGrid.checked = data.snapToGrid == true;
}
if (data.visible !== undefined) {
elHorizontalGridVisible.checked = data.visible == true;
}
});
function emitUpdate() {
EventBridge.emitWebEvent(JSON.stringify({
type: "update",
origin: {
y: elPosY.value,
},
minorGridEvery: elMinorSpacing.value,
majorGridEvery: elMajorSpacing.value,
gridColor: gridColor,
snapToGrid: elSnapToGrid.checked,
visible: elHorizontalGridVisible.checked,
}));
}
}
elPosY.addEventListener("change", emitUpdate);
elMinorSpacing.addEventListener("change", emitUpdate);
elMajorSpacing.addEventListener("change", emitUpdate);
elSnapToGrid.addEventListener("change", emitUpdate);
elHorizontalGridVisible.addEventListener("change", emitUpdate);
elMoveToAvatar.addEventListener("click", function() {
EventBridge.emitWebEvent(JSON.stringify({
type: "action",
action: "moveToAvatar",
}));
});
elMoveToSelection.addEventListener("click", function() {
EventBridge.emitWebEvent(JSON.stringify({
type: "action",
action: "moveToSelection",
}));
});
var gridColor = { red: 255, green: 255, blue: 255 };
var elColor = document.getElementById("grid-color");
var elColorRed = document.getElementById("grid-color-red");
var elColorGreen = document.getElementById("grid-color-green");
var elColorBlue = document.getElementById("grid-color-blue");
elColor.style.backgroundColor = "rgb(" + gridColor.red + "," + gridColor.green + "," + gridColor.blue + ")";
elColorRed.value = gridColor.red;
elColorGreen.value = gridColor.green;
elColorBlue.value = gridColor.blue;
var colorChangeFunction = function () {
gridColor = { red: elColorRed.value, green: elColorGreen.value, blue: elColorBlue.value };
elColor.style.backgroundColor = "rgb(" + gridColor.red + "," + gridColor.green + "," + gridColor.blue + ")";
emitUpdate();
};
var colorPickFunction = function (red, green, blue) {
elColorRed.value = red;
elColorGreen.value = green;
elColorBlue.value = blue;
gridColor = { red: red, green: green, blue: blue };
emitUpdate();
}
elColorRed.addEventListener('change', colorChangeFunction);
elColorGreen.addEventListener('change', colorChangeFunction);
elColorBlue.addEventListener('change', colorChangeFunction);
$('#grid-color').colpick({
colorScheme: 'dark',
layout: 'hex',
color: { r: gridColor.red, g: gridColor.green, b: gridColor.blue },
onShow: function (colpick) {
$('#grid-color').attr('active', 'true');
},
onHide: function (colpick) {
$('#grid-color').attr('active', 'false');
},
onSubmit: function (hsb, hex, rgb, el) {
$(el).css('background-color', '#' + hex);
$(el).colpickHide();
colorPickFunction(rgb.r, rgb.g, rgb.b);
}
});
augmentSpinButtons();
EventBridge.emitWebEvent(JSON.stringify({ type: 'init' }));
});
// Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked
document.addEventListener("contextmenu", function (event) {
event.preventDefault();
}, false);
}

0
scripts/system/html/jquery-2.1.4.min.js → scripts/system/html/js/jquery-2.1.4.min.js vendored
View file

0
scripts/system/html/list.min.js → scripts/system/html/js/list.min.js vendored
View file

0
scripts/system/html/spinButtons.js → scripts/system/html/js/spinButtons.js
View file