Skip to content
Snippets Groups Projects
Commit a9a526b3 authored by Helena Jank's avatar Helena Jank
Browse files

- removed all of Helena's simulator and timeline stuff (do not belong in this branch)

parent 474eeca9
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
css/timeline.css deleted 100644 → 0
+ 0
− 89
View file @ 474eeca9
#timelineContainer {
position: relative;
width: 100%;
height: 100%;
}
#timelineTable {
position: inherit;
top: 0px;
left: 0px;
overflow: visible;
}
#timelineTable text {
font-size: medium;
padding: 0px;
margin: 0px;
}
#timelineTable,
#timelineTable tbody,
#timelineTable tr,
#timelineTable td {
margin: 0px;
padding: 0px;
height: inherit;
overflow: visible;
}
#timelineTable .timelineStep {
height: 30px !important;
max-height: 30px;
}
#timelineTable .timelineStep > .timelineStepLabel {
width: 30px;
height: inherit;
border: none;
font-size: small;
text-align: right;
vertical-align: text-top;
}
#timelineTable .timelineScale {
width: 10px;
height: inherit;
border-style: solid none solid;
}
#timelineTable .timelineStep > .timelineCell {
width: 50px;
height: inherit;
border-bottom: 1px solid gainsboro;
border-top: 1px solid gainsboro;
border-left: 2px solid gainsboro;
border-right: 2px solid gainsboro;
}
#timelineTable .timelineCellMarked {
width: 10px;
height: inherit;
background-color: #1ABC9C;
}
#timelineContainer .resizableEvent {
height: inherit;
min-height: inherit;
width: inherit;
background-color: #1ABC9C;
border: 1px solid gray;
position: absolute;
top: inherit;
left: inherit;
}
#timelineTable .ui-draggable-handle {
cursor: move;
}
#timelineTable .ui-resizable-s {
position: absolute;
cursor: s-resize;
height: 7px;
width: 100%;
bottom: -5px;
left: 0;
cursor: s-resize;
}
index.html
+ 0
− 15
View file @ a9a526b3
......@@ -49,8 +49,6 @@
<script type="text/javascript" src="js/authoring/controllers/saveScenarioController.js"></script>
<script type="text/javascript" src="js/authoring/controllers/sliderController.js"></script>
<script type="text/javascript" src="js/authoring/controllers/unitController.js"></script>
<script type="text/javascript" src="js/authoring/controllers/simulator/simulationController.js"></script>
<script type="text/javascript" src="js/authoring/controllers/simulator/timelineController.js"></script>
<!-- tab controllers -->
<script type="text/javascript" src="js/authoring/controllers/tabs/contextTabController.js"></script>
......@@ -98,7 +96,6 @@
<link rel="stylesheet" href="css/tabs.css">
<link rel="stylesheet" href="css/navigation.css">
<link rel="stylesheet" href="css/timeline.css">
<!-- google maps api -->
......@@ -140,15 +137,6 @@
</li>
<!--<li><a href="#test"><b class="fui-exit"></b> Testen</a></li>-->
<!--<li id="navHeadStatistic"><a href="#statistic"><img src="img/Icons/iconmonstr-bar-chart-icon-32.png"> Statistiken</a></li>-->
<li class="dropdown">
<a id="contextSimulation" href="#" class="dropdown-toggle" data-toggle="dropdown"><b class="fui-play"></b> Kontextsimulation <b class="caret"></b></a>
<ul class="dropdown-menu">
<li id="createSimulation"><a href="#">Erstellen <b class="fui-plus" style="float: right"></b></a></li>
<li id="openSimulation"><a href="#">Öffnen <b class="fui-folder-open" style="float: right"></b></a></li>
<li id="deleteSimulation"><a href="#">Löschen <b class="fui-trash" style="float: right"></b></a></li>
<li id="importSimulation"><a href="#">Importieren <b class="fui-upload" style="float: right"></b></a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
......@@ -208,9 +196,6 @@
<!-- Property area -->
<div class="properties">
<div id="simulatorContainer"></div>
<!-- tabs header-->
<div class="tab-Container">
<ul>
......
js/authoring/controllers/simulator/simulationController.js deleted 100644 → 0
+ 0
− 36
View file @ 474eeca9
/**
* Created by Helena on 06.01.2016.
*/
/**
* Initialize timeline
*/
$(function() {
// event handler listening for click on "Kontextsimulation" in horizontal menu (top)
// TODO: Consider switching between scenarios!
$("#contextSimulation").on("click", function() {
var currentScenarioName = $("#lname")[0].innerHTML;
var scenarioContextList;
if (currentScenarioName) {
// get a list of all context information items added in this scenario, with chosen values reset to ""
scenarioContextList = authorSystemContent.getScenario(currentScenarioName).getScenarioContext();
}
// init the simulation editor timeline
$.get( "simulator.html", function( data ) {
$( "#simulatorContainer" ).html( data );
// create a column for each ContextInformation object
createColumns(scenarioContextList ? scenarioContextList.length : 0);
// set event handlers for these generated cells
setCellEventHandlers();
});
});
});
\ No newline at end of file
js/authoring/controllers/simulator/timelineController.js deleted 100644 → 0
+ 0
− 237
View file @ 474eeca9
/**
* Created by Helena on 29.12.2015.
*
* Adding of events inspired by:
* http://stackoverflow.com/questions/10591747/making-a-google-calendar-like-dragging-interface
*
*/
var down, dragging; // Boolean: mouse down?, mouse down and moving?
var xOnMousedown, yOnMousedown; // click coordinates (in px)
var xFirstCellLeft, yFirstCellTop; // coordinates of clicked cell (in px)
var horizontalBorderPx = 2; // a marked cell's top and bottom border sum in px
var verticalBorderPx = 4; // a marked cell's left and right border sum in px
/**
* Create one column per (unique) context item
* @param contextList An array containing all context items (incl. duplicates) added in the author system
*/
function createColumns(contextListLength) {
// in case no context has been added to any unit in the scenario yet
if (contextListLength == 0 || typeof contextListLength == "undefined")
contextListLength = 5;
for (var i = 0; i < contextListLength; i++) {
// add one column for each context item
$(".timelineStep").each(function() {
var newCell = $("<td>").addClass("timelineCell");
$(this).append(newCell);
});
}
}
/** *
* Sets handlers for mouse events on table cells and on document, consequently
*/
function setCellEventHandlers() {
$(".timelineCell").on("mousedown", _mousedown);
$(document).mousemove(_mousemove);
$(document).mouseup(_mouseup);
}
/**
* Triggered if the user clicks on a cell: sets down to true and records click coordinates.
*
* @param event
* @private
*/
function _mousedown(event) {
down = true;
yOnMousedown = event.pageY;
xOnMousedown = event.pageX;
xFirstCellLeft = $(this).offset().left;
yFirstCellTop = $(this).offset().top;
}
/**
* If a cell has been clicked, all cells where the mouse is dragged over will be marked.
*
* @param event The mousemove event. Not restricted to cells because cursor may leave the table.
* @private
*/
function _mousemove(event) {
event.preventDefault();
if (down) {
dragging = true;
_mark(event);
}
}
/**
* When down stops: create a new DIV where cells have been marked and attach context CRUD functionality.
*
* @param event The mouseup event. Can occur anywhere in the document.
* @private
*/
function _mouseup(event) {
event.preventDefault();
// if the mouse has been down, and is now released
if (down) {
// get height of marked area
var height = _getHeight(event);
// prevent erroneous behavior when cursor is dragged beyond top
if (event.pageY > yFirstCellTop) {
// create and add the draggable, resizable information container
var eventDiv = _createEventDiv(height);
//var popoverDiv = _createPopover();
// TODO: just a mock-up for now, will be replaced by formatting in author system
var contextColor = "#"+((1<<24)*Math.random()|0).toString(16);
eventDiv.css("background-color", contextColor)
.css("z-index", 1000);
// add new div to timeline
$("#timelineContainer").append(eventDiv);
}
}
down = false;
dragging = false;
_unmark();
}
/**
* Creates a new div as interactable for adding, editing, removing, copying, hiding context in the timeline.
*
* @param height The height of the div to be created.
* @returns {*|jQuery} The new div with set style and features: drag, resize, tooltip, popover, quick edit buttons...
*/
function _createEventDiv(height) {
// get width and height of a cell
var cellWidth = $(".timelineCell").width() + verticalBorderPx;
var cellHeight = $(".timelineCell").height() + horizontalBorderPx;
// in case no height was provided
height = height || cellHeight;
// create a new div with style and functionality
return $("<div>")
.addClass("resizableEvent")
.css("height", height+"px")
.css("min-height", cellHeight+"px")
.css("width", cellWidth+"px")
.css("background-color", "#1ABC9C")
.css("border", "1px solid gray")
.css("position", "absolute")
.css("top", yFirstCellTop+"px")
.css("left", xFirstCellLeft+"px")
.resizable({
handles: "s",
grid: [cellWidth, cellHeight],
containment: "table",
distance: 0,
resize: function(event, ui) {
ui.size.height += horizontalBorderPx;
}
})
.draggable({
grid: [cellWidth, cellHeight],
axis: "y",
cursor: "move",
containment: "table"
})
.tooltip({
hide: false,
show: false,
content: "awesome",
items: ".resizable",
track: true
});
}
/**
* Create a popover for adding/editing/deleting a context "event"
*
* @returns {*|jQuery}
* @private
*/
function _createPopover () {
return $("<div>").popover(); // TODO
}
/**
* Goes through all cells and marks those that were selected, restricted to the column clicked.
*
* @param event The mousemove or mouseup event (only triggered after mousedown on a cell).
* @private
*/
function _mark(event) {
$('.timelineCell').each(function () {
var top = $(this).offset().top;
var bottom = top + $(this).height()+horizontalBorderPx;
var left = $(this).offset().left;
var right = left + $(this).width()+verticalBorderPx;
if( bottom > yOnMousedown && event.pageY >= top && xOnMousedown >= left && xOnMousedown < right)
$(this).addClass( 'timelineCellMarked' );
else
$(this).removeClass( 'timelineCellMarked' );
});
}
/**
* Removes the markup from all cells.
*
* @private
*/
function _unmark() {
$('.timelineCell').each(function () {
$(this).removeClass( 'timelineCellMarked' );
});
}
/**
* Returns the Y coordinate of the element's bottom.
*
* @param element The DOM element whose bottom is searched.
* @returns {*} A number representing the y coordinate (in px).
* @private
*/
function _bottom(element){
return $(element).offset().top + $(element).height()+horizontalBorderPx;
}
/**
*
* @returns {number} The height of the selected, i.e. marked area in px
* @private
*/
function _getHeight(event) {
// if a single cell was clicked, without dragging, mark it (to access it afterwards)
if (!dragging)
_mark(event);
// get the y coordinate of the lowest selected cell's bottom
var yEnd = 0;
$('.timelineCellMarked').each(function() {
var y = _bottom(this);
yEnd = y > yEnd ? y : yEnd;
});
// calculate the distance between start and end y coordinates, i.e. height of the marked area
return yEnd - yFirstCellTop;
}
\ No newline at end of file
simulator.html deleted 100644 → 0
+ 0
− 42
View file @ 474eeca9
<div id="timelineContainer">
<table id="timelineTable" class="ui-widget">
<tbody>
<tr class="timelineStep">
<td class="timelineStepLabel">
0
</td>
<td class="timelineScale"></td>
</tr>
<tr class="timelineStep">
<td class="timelineStepLabel">1</td>
<td class="timelineScale"></td>
</tr>
<tr class="timelineStep">
<td class="timelineStepLabel">2</td>
<td class="timelineScale"></td>
</tr>
<tr class="timelineStep">
<td class="timelineStepLabel">3</td>
<td class="timelineScale"></td>
</tr>
<tr class="timelineStep">
<td class="timelineStepLabel">4</td>
<td class="timelineScale"></td>
</tr>
<tr class="timelineStep">
<td class="timelineStepLabel">5</td>
<td class="timelineScale"></td>
</tr>
<tr class="timelineStep">
<td class="timelineStepLabel">6</td>
<td class="timelineScale"></td>
</tr>
<tr class="timelineStep">
<td class="timelineStepLabel">
7
</td>
<td class="timelineScale"></td>
</tr>
</tbody>
</table>
</div>
\ No newline at end of file
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