From f0d2e6769df5bc4e873fb532711b42dea8b77c22 Mon Sep 17 00:00:00 2001 From: Paul Nechifor Date: Tue, 24 Jan 2012 17:31:08 +0200 Subject: [PATCH] =?UTF-8?q?Am=20f=C4=83cut=20filtrarea.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- WebServer/Content/Timeline.css | 2 +- WebServer/Scripts/timeline.js | 119 +++++++++++++++++++++++---------- 2 files changed, 85 insertions(+), 36 deletions(-) diff --git a/WebServer/Content/Timeline.css b/WebServer/Content/Timeline.css index c05ec5b..a65531a 100644 --- a/WebServer/Content/Timeline.css +++ b/WebServer/Content/Timeline.css @@ -16,7 +16,7 @@ div.tooltip ul li {list-style:none; cursor: pointer; margin:1px; background:#BBD h2 {margin-top:30px;} div#situation {min-height:400px} -#canvasDiv{background:#DDDDEE; -moz-border-radius: 14px;border-radius: 14px; } +#canvasDiv{padding:5px; background:#DDDDEE; -moz-border-radius: 14px;border-radius: 14px;} a.clustersBtn{display:block; float:right; margin:2px; font-size:16px; cursor:pointer; background:#DDDDDD; width: 22px; height:22px; -moz-border-radius: 100px; border-radius: 100px; text-align:center;} /* generat */ diff --git a/WebServer/Scripts/timeline.js b/WebServer/Scripts/timeline.js index 41e395f..176158b 100644 --- a/WebServer/Scripts/timeline.js +++ b/WebServer/Scripts/timeline.js @@ -1,8 +1,11 @@ var doc; var documentId; var clusters = [4, 6, 8, 10, 14, 18, 24, 30, 44]; -var clusterIndex = 1; +var clusterIndex = 4; var toolTip = null; +var situations; +var excludedPlayers = new Object(); +var excludedPlaces = new Object(); $(document).ready(function () { $("body").mousemove(function (e) { @@ -32,26 +35,44 @@ function tryToLoad() { function loaded(xml) { doc.append("

Timeline

"); doc.append("

Characters

"); - var charUl = $("").addClass("selectables"); + var charUl = $("").attr("id", "playerList").addClass("selectables nosel"); xml.find("characters").find("character").each(function () { - charUl.append("
  • " + $(this).attr("name") + "
    • "); + var name = $(this).attr("name"); + charUl.append("
  • " + name + "
    • "); + excludedPlayers[name] = false; }); doc.append(charUl); doc.append($("
    ").css({ clear: "both" })); doc.append("

    Locations

    "); - var locUl = $("").addClass("selectables"); + var locUl = $("").attr("id", "placeList").addClass("selectables nosel"); xml.find("locations").find("location").each(function () { locUl.append("
  • " + $(this).attr("name") + "
    • "); }); doc.append(locUl); doc.append($("
    ").css({ clear: "both" })); - $(".selectables span").click(function () { + $("#playerList span").click(function () { var jThis = $(this); + if (jThis.hasClass("excluded")) jThis.removeClass("excluded"); else jThis.addClass("excluded"); + + excludedPlayers[jThis.text()] = jThis.hasClass("excluded"); + drawSituations(situations, clusters[clusterIndex]); + }); + + $("#placeList span").click(function () { + var jThis = $(this); + + if (jThis.hasClass("excluded")) + jThis.removeClass("excluded"); + else + jThis.addClass("excluded"); + + excludedPlaces[jThis.text()] = jThis.hasClass("excluded"); + drawSituations(situations, clusters[clusterIndex]); }); doc.append("

    Situation clusters

    "); @@ -74,13 +95,31 @@ function loaded(xml) { doc.append("
    "); - var situations = new Array(); + situations = new Array(); + + var getAsArray = function (xml, name) { + var ret = new Array(); + xml.find(name + "s").find(name).each(function () { + ret.push($(this).text()); + }); + return ret; + }; xml.find("situation").each(function () { var jThis = $(this); - var initialTime = dateStringToDate(jThis.attr("initial_time")); - var finalTime = dateStringToDate(jThis.attr("final_time")); - situations.push({ "initialTime": initialTime, "finalTime": finalTime, "xml": jThis }) + var paragraph = jThis.find("paragraph"); + situations.push({ + "initialTime": dateStringToDate(jThis.attr("initial_time")), + "finalTime": dateStringToDate(jThis.attr("final_time")), + "name": jThis.find("name").text(), + "players": getAsArray(jThis, "player"), + "objects": getAsArray(jThis, "object"), + "events": getAsArray(jThis, "event"), + "keywords": getAsArray(jThis, "keyword"), + "places": getAsArray(jThis, "place"), + "pageNumber": paragraph.attr("pageNumber"), + "paragraph": paragraph.text() + }); }); var compare = function (a, b) { @@ -107,7 +146,6 @@ function drawSituations(situations, intervals) { var canvasDiv = $("#canvasDiv"); canvasDiv.empty(); - canvasDiv.css({ padding: "10px" }); var canvasWidth = canvasDiv.width(); var canvasHeight = Math.ceil(canvasWidth / intervals); @@ -115,10 +153,6 @@ function drawSituations(situations, intervals) { canvasDiv.append(canvas); context = canvas[0].getContext("2d"); - //context.fillStyle = "#FFF"; - //context.fillRect(0, 0, canvasWidth, canvasHeight); - context.fillStyle = "#383738"; - var min = situations[0].initialTime.getTime(); var max = situations[situations.length - 1].finalTime.getTime(); var timePeriod = (max - min) / intervals; @@ -129,8 +163,17 @@ function drawSituations(situations, intervals) { interval[i] = new Array(); for (var i = 0; i < situations.length; i++) { - var place = Math.floor((situations[i].initialTime.getTime() - min) / timePeriod); - interval[place].push(situations[i]); + var permitted = true; + for (var j = 0; j < situations[i].players.length; j++) + if (excludedPlayers[situations[i].players[j]]) + permitted = false; + for (var j = 0; j < situations[i].places.length; j++) + if (excludedPlaces[situations[i].places[j]]) + permitted = false; + if (permitted) { + var place = Math.floor((situations[i].initialTime.getTime() - min) / timePeriod); + interval[place].push(situations[i]); + } } var maxSits = 0; @@ -139,6 +182,18 @@ function drawSituations(situations, intervals) { maxSits = interval[i].length; var h = canvasPeriod / 2; + + // The arrow. + context.fillStyle = "#888"; + context.fillRect(0, h - 0.5, canvasWidth - 5, 1); + context.beginPath(); + context.moveTo(canvasWidth, h); + context.lineTo(canvasWidth - 6, h - 3); + context.lineTo(canvasWidth - 6, h + 3); + context.fill(); + + context.fillStyle = "#383738"; + var radius = new Array(interval.length); for (var i = 0; i < interval.length; i++) { if (interval[i].length == 0) @@ -194,32 +249,26 @@ function drawSituations(situations, intervals) { toolTip.append("

    Situations:

    "); var ul = $(""); for (var i = 0; i < interval[currentElement].length; i++) { - var xml = interval[currentElement][i].xml; - var li = $("
  • " + xml.find("name").text() + "
    • "); + var sit = interval[currentElement][i]; + var li = $("
  • " + sit.name + "
    • "); ul.append(li); - li.click(function (xml) { + li.click(function (sit) { return function () { situationDiv.empty(); - situationDiv.append("

    Situation: " + xml.find("name").text() + "

    "); + situationDiv.append("

    Situation: " + sit.name + "

    "); var parag = $("

    "); - var addThings = function (elem, name) { - var p = "" + name + ": "; - xml.find(elem).each(function (i) { - p += ((i > 0) ? ", " : "") + "" + $(this).text() + ""; - }); - parag.append(p + "
    "); - }; - addThings("player", "Players"); - addThings("object", "Objects"); - addThings("event", "Events"); - addThings("keyword", "Keywords"); + var pos = ["Players", "Objects", "Events", "Places", "Keywords"]; + pos.forEach(function (name) { + parag.append("" + name + ": " + + sit[name.toLowerCase()].join(", ") + "
    "); + }); + situationDiv.append(parag); - var paragraph = xml.find("paragraph"); - situationDiv.append("

    From page " + paragraph.attr("pageNumber") - + ": " + paragraph.text() + "

    "); + situationDiv.append("

    From page " + sit.pageNumber + + ": " + sit.paragraph + "

    "); } - } (xml)); + } (sit)); } toolTip.append(ul); toolTip.mouseenter(function () {