Commit 8adf940d authored by Stephan Kreutzer's avatar Stephan Kreutzer

sos-grid-1 prototype: Show details. UI improvements.

parent dafc958f
......@@ -17,8 +17,6 @@ file as originally released and distributed.
-->
<SOS xmlns="http://www.untiednations.com/SOS" Language="en" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.untiednations.com/SOS http://www.untiednations.com/XML/SOSMeeting1.xsd">
<POI ID="1" Type="Effect">
<Parent Parent-ID="2"/>
<Parent Parent-ID="4"/>
<Parent Parent-ID="5"/>
<Title>Copyright Law</Title>
<Text>Copyright law has been passed in most given jurisdictions.</Text>
......@@ -44,7 +42,6 @@ file as originally released and distributed.
</POI>
<POI ID="6" Type="Effect">
<Parent Parent-ID="1"/>
<Parent Parent-ID="5"/>
<Title>Copyright law is enforcable</Title>
<Text>Copyright law can be enforced selectively with severe penalties for infringement against companies and individuals.</Text>
</POI>
......
......@@ -23,20 +23,38 @@ body
#causes
{
width: 32%;
height: 18%;
position: absolute;
left: 0%;
top: 0%;
text-align: right;
}
#current
{
width: 32%;
height: 18%;
position: absolute;
left: 34%;
top: 0%;
text-align: center;
}
#effects
{
width: 32%;
height: 18%;
position: absolute;
left: 68%;
top: 0%;
text-align: left;
}
#details
{
width: 96%;
height: 38%;
position: absolute;
left: 2%;
top: 62%;
}
......@@ -50,10 +50,8 @@ window.onload = function () {
window.onhashchange = loadGrid;
}
};
</script></head><body><div id="grid"><div id="causes"/><div id="current"/><div id="effects"/><div id="loadLink"><a href="#" onclick="loadGrid();">Load</a></div></div><div id="sos-input" style="display:none;"><!-- The data contained in this element and sub-elements is not part of this program, it's user data and might be under a different license than this program. This program also doesn't depend on it or link it as a library, it's only processed. --><sos:SOS Language="en" xsi:schemaLocation="http://www.untiednations.com/SOS http://www.untiednations.com/XML/SOSMeeting1.xsd">
</script></head><body><div id="grid"><div id="causes"/><div id="current"/><div id="effects"/><div id="details"/><div id="loadLink"><a href="#" onclick="loadGrid();">Load</a></div></div><div id="sos-input" style="display:none;"><!-- The data contained in this element and sub-elements is not part of this program, it's user data and might be under a different license than this program. This program also doesn't depend on it or link it as a library, it's only processed. --><sos:SOS Language="en" xsi:schemaLocation="http://www.untiednations.com/SOS http://www.untiednations.com/XML/SOSMeeting1.xsd">
<sos:POI ID="1" Type="Effect">
<sos:Parent Parent-ID="2"/>
<sos:Parent Parent-ID="4"/>
<sos:Parent Parent-ID="5"/>
<sos:Title>Copyright Law</sos:Title>
<sos:Text>Copyright law has been passed in most given jurisdictions.</sos:Text>
......@@ -79,7 +77,6 @@ window.onload = function () {
</sos:POI>
<sos:POI ID="6" Type="Effect">
<sos:Parent Parent-ID="1"/>
<sos:Parent Parent-ID="5"/>
<sos:Title>Copyright law is enforcable</sos:Title>
<sos:Text>Copyright law can be enforced selectively with severe penalties for infringement against companies and individuals.</sos:Text>
</sos:POI>
......
......@@ -27,7 +27,7 @@ let gridEngine = new SosGridEngine();
function NavigatePoi(poiId) {
currentPoi = null;
Reset(new Array("causes", "current", "effects"));
Reset();
let poi = gridEngine.getPoiById(poiId);
......@@ -35,7 +35,7 @@ function NavigatePoi(poiId) {
throw "Loading a POI failed.";
}
if (RenderPois(new Array(poi), "current", "Point of Interest", "none") == true) {
if (RenderPoi(poi) == true) {
currentPoi = poiId;
} else {
return false;
......@@ -47,7 +47,7 @@ function NavigatePoi(poiId) {
parents.push(gridEngine.getPoiById(poi.getParents()[i]));
}
if (RenderPois(parents, "causes", "Causes", "post") != true) {
if (RenderCauses(parents) != true) {
return false;
}
......@@ -57,9 +57,28 @@ function NavigatePoi(poiId) {
children.push(gridEngine.getPoiById(poi.getChildren()[i]));
}
if (RenderPois(children, "effects", "Effects", "pre") != true) {
if (RenderEffects(children) != true) {
return false;
}
return true;
}
function ShowDetails(poiId)
{
ResetDetails();
let poi = gridEngine.getPoiById(poiId);
if (poi == null)
{
throw "Loading a POI failed.";
}
if (RenderDetails(poi) != 0)
{
return -1;
}
return 0;
}
......@@ -17,7 +17,24 @@
"use strict";
function RenderPois(pois, targetId, caption, arrowPosition) {
function RenderPoi(poi)
{
return RenderPois(new Array(poi), "current", "Point of Interest");
}
function RenderCauses(pois)
{
// TODO: Properly check if pois is an array.
return RenderPois(pois, "causes", "Causes");
}
function RenderEffects(pois)
{
// TODO: Properly check if pois is an array.
return RenderPois(pois, "effects", "Effects");
}
function RenderPois(pois, targetId, caption) {
// TODO: Properly check if pois is an array.
let target = document.getElementById(targetId);
......@@ -33,7 +50,16 @@ function RenderPois(pois, targetId, caption, arrowPosition) {
container.appendChild(header);
for (let i = 0; i < pois.length; i++) {
if (arrowPosition === "pre") {
if (targetId === "causes") {
let title = document.createTextNode(pois[i].getTitle());
let span = document.createElement("span");
span.setAttribute("onclick", "ShowDetails(\"" + pois[i].getId() + "\");");
span.appendChild(title);
container.appendChild(span);
container.appendChild(document.createTextNode(" "));
let navigationLink = document.createElement("a");
navigationLink.setAttribute("href", "javascript:void(0);");
// TODO: Prevent injection (any maybe at other places, too).
......@@ -42,13 +68,15 @@ function RenderPois(pois, targetId, caption, arrowPosition) {
let arrow = document.createTextNode("➔");
navigationLink.appendChild(arrow);
container.appendChild(navigationLink);
} else if (targetId === "current") {
let title = document.createTextNode(pois[i].getTitle());
let title = document.createTextNode(" " + pois[i].getTitle());
container.appendChild(title);
} else if (arrowPosition === "post") {
let title = document.createTextNode(pois[i].getTitle() + " ");
container.appendChild(title);
let span = document.createElement("span");
span.setAttribute("onclick", "ShowDetails(\"" + pois[i].getId() + "\");");
span.appendChild(title);
container.appendChild(span);
} else if (targetId === "effects") {
let navigationLink = document.createElement("a");
navigationLink.setAttribute("href", "javascript:void(0);");
// TODO: Prevent injection (any maybe at other places, too).
......@@ -57,31 +85,19 @@ function RenderPois(pois, targetId, caption, arrowPosition) {
let arrow = document.createTextNode("➔");
navigationLink.appendChild(arrow);
container.appendChild(navigationLink);
} else {
let title = document.createTextNode(pois[i].getTitle());
container.appendChild(title);
}
/* Earlier, old version. Can be removed.
if (arrowPosition === "pre") {
let arrow = document.createTextNode("➔ ");
container.appendChild(arrow);
}
container.appendChild(document.createTextNode(" "));
let navigationLink = document.createElement("a");
navigationLink.setAttribute("href", "javascript:void(0);");
// TODO: Prevent injection (any maybe at other places, too).
navigationLink.setAttribute("onclick", "NavigatePoi(\"" + pois[i].getId() + "\");");
let title = document.createTextNode(pois[i].getTitle());
let title = document.createTextNode(pois[i].getTitle());
navigationLink.appendChild(title);
container.appendChild(navigationLink);
let span = document.createElement("span");
span.setAttribute("onclick", "ShowDetails(\"" + pois[i].getId() + "\");");
span.appendChild(title);
if (arrowPosition === "post") {
let arrow = document.createTextNode(" ➔");
container.appendChild(arrow);
container.appendChild(span);
} else {
throw "Renderer: Unknown target ID '" + targetId + "'.";
}
*/
/* if (i < pois.length - 1) */ {
container.appendChild(document.createElement("hr"));
......@@ -93,8 +109,8 @@ function RenderPois(pois, targetId, caption, arrowPosition) {
return true;
}
function Reset(targets) {
// TODO: Check properly if targets is an array.
function Reset() {
let targets = new Array("causes", "current", "effects")
for (let i = 0; i < targets.length; i++) {
let target = document.getElementById(targets[i]);
......@@ -108,3 +124,45 @@ function Reset(targets) {
}
}
}
function RenderDetails(poi)
{
let target = document.getElementById("details");
if (target == null)
{
throw "Renderer: Can't find target with ID 'details'.";
}
let container = document.createElement("div");
let header = document.createElement("h3");
header.appendChild(document.createTextNode("Details"));
container.appendChild(header);
let description = poi.getText();
if (description != null)
{
container.appendChild(document.createTextNode(description));
}
target.appendChild(container);
return 0;
}
function ResetDetails()
{
let target = document.getElementById("details");
if (target == null)
{
throw "Renderer: Can't find target with ID 'details'.";
}
while (target.hasChildNodes() == true)
{
target.removeChild(target.lastChild);
}
}
......@@ -94,6 +94,7 @@ window.onload = function () {
<div id="causes"/>
<div id="current"/>
<div id="effects"/>
<div id="details"/>
<div id="loadLink">
<a href="#" onclick="loadGrid();">Load</a>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment