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
#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;
}
......@@ -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>
......
/**
* 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
/**
* 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
<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% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment