diff --git a/css/main.css b/css/main.css
index 710e2b08d0e251e4baf944ab740d5de16bb33345..9d38da9462a54d45d6dedadd795b9b272642dbdc 100644
--- a/css/main.css
+++ b/css/main.css
@@ -148,9 +148,9 @@ textarea {
width: 275px;
overflow-y: auto;
overflow-x: hidden;
+ background: #eee;
}
-
body {
font-family: sans-serif;
font-size: 10px;
@@ -288,10 +288,6 @@ ul#navbar-right {
background: #ffffff;
}
-.properties {
- background: #eee;
-}
-
#tabs > ul {
position: fixed;
width: 250px;
diff --git a/css/tabs.css b/css/tabs.css
index 910b3767be28ea0f8d7ed05315421672541bd78b..c776fdde026d578838afb926c01f9cdd7366c60e 100644
--- a/css/tabs.css
+++ b/css/tabs.css
@@ -1,9 +1,9 @@
-.tab-Container{
+.tabBar {
position:relative;
width: inherit;
height: 30px;
}
-.tab-Container ul{
+.tabBar ul{
overflow:hidden;
height: 30px;
z-index:100;
@@ -13,12 +13,12 @@
width: inherit;
text-align: center;
}
-.tab-Container li{
+.tabBar li{
float:left;
list-style:none;
- width: 33.33%;
+ width: 16.666%;
}
-.tab-Container li a{
+.tabBar li a{
background:#ccc;
border-right:0;
color:#666;
@@ -29,10 +29,10 @@
text-decoration:none;
text-transform:uppercase;
}
-.tab-Container li a:hover{
+.tabBar li a:hover{
background:#ddd;
}
-.tab-Container li a.active{
+.tabBar li a.active{
background: #48c9b0;
border-right:0;
color: #ffffff;
@@ -150,21 +150,6 @@
}
/* end google search box */
-.tabRelation {
- display: none;
-}
-#tabRelationHead {
- height: 30px;
- text-align: center;
- background: #48c9b0;
-}
-#tabRelationHead a {
- color: #ffffff;
-}
-#tabRelationBody {
- padding: 20px;
-}
-
#preLabelRelations {
font-size: 18px;
font-weight: 400;
diff --git a/index.html b/index.html
index 39391e00c300d177ea3469357ff50f65aeed8961..0c8a2c36c2bdd95e512ef4e17808e241b3498721 100644
--- a/index.html
+++ b/index.html
@@ -19,8 +19,8 @@
<!-- general javascript scripts -->
<!--<script src="//code.jquery.com/jquery-2.0.3.js"></script>-->
<!--<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>-->
- <script type="text/javascript" src="js/vendor/jquery-2.0.3.min.js"></script>
- <script type="text/javascript" src="js/vendor/jquery-ui-1.11.4.min.js"></script>
+ <script type="text/javascript" src="js/vendor/jquery-ui-1.11.4.custom/external/jquery/jquery-2.1.4.js"></script>
+ <script type="text/javascript" src="js/vendor/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<script type="text/javascript" src="js/vendor/jquery.ui.touch-punch-0.2.2.min.js"></script>
<!--<script type="text/javascript" src="js/vendor/jquery.jsPlumb-1.7.2.js"/>-->
<script type="text/javascript" src="js/vendor/jsPlumb-1.7.10.js"></script>
@@ -52,8 +52,8 @@
<script type="text/javascript" src="js/authoring/controllers/unitController.js"></script>
<!-- tab controllers -->
+ <script type="text/javascript" src="js/authoring/controllers/tabs/tabBarController.js"></script>
<script type="text/javascript" src="js/authoring/controllers/tabs/contextTabController.js"></script>
- <script type="text/javascript" src="js/authoring/controllers/tabs/generalTabController.js"></script>
<script type="text/javascript" src="js/authoring/controllers/tabs/locationInfoMapViewController.js"></script>
<script type="text/javascript" src="js/authoring/controllers/tabs/propertiesTabController.js"></script>
<script type="text/javascript" src="js/authoring/controllers/tabs/relationTabController.js"></script>
@@ -121,7 +121,7 @@
<ul class="nav navbar-nav">
<!--<li class="active"><a href="#">Home</a></li>-->
<li class="dropdown">
- <a id="navbarScenario" href="#" class="dropdown-toggle" data-toggle="dropdown"><b class="fui-credit-card"></b> Szenario <b class="caret"></b></a>
+ <a id="navbarScenario" href="#" class="dropdown-toggle" data-toggle="dropdown"><b class="fui-window"></b> Szenario <b class="caret"></b></a>
<ul class="dropdown-menu">
<li id="showNewScenario"><a href="#">Erstellen <b class="fui-plus" style="float: right"></b></a></li>
<li id="deleteScenario"><a href="#">Löschen <b class="fui-trash" style="float: right"></b></a></li>
@@ -198,17 +198,21 @@
<div class="properties">
<!-- tabs header-->
- <div class="tab-Container">
+ <div class="tabBar">
<ul>
- <li><a id="firstTab" href="#tab1" title="Eigenschaften" class="fui-gear"></a> </li>
- <li><a href="#tab2" title="Kontextinformationen">K</a></li>
- <li><a href="#tab3" title="Metadaten">M</a></li>
+ <li><a href="#tab0" title="Szenario" class="active scenarioTab fui-window"></a></li>
+ <li><a href="#tab1" title="Lerneinheit" class="unitTab fui-new"></a></li>
+ <li><a href="#tab2" title="Metadaten" class="unitTab">M</a></li>
+ <li><a href="#tab3" title="Kontextinformationen" class="unitTab">K</a></li>
+ <li><a href="#tab4" title="Relation" class="relationTab">R</a></li>
+ <li><a href="#tab5" title="Simulator" class="simulatorTab fui-play2"></a></li>
</ul>
</div>
<!-- content of the tabs -->
<div class="tabDetails">
- <div id="tab1" class="tabContents">
+ <div id="tab0" class="tabContents scenarioTab"></div>
+ <div id="tab1" class="tabContents unitTab">
<div id="formProperties">
<div>
<label for="inputUnitName" class="label-tabs label">Name</label>
@@ -225,7 +229,31 @@
</div>
</div>
</div>
- <div id="tab2" class="tabContents">
+ <div id="tab2" class="tabContents unitTab">
+ <form>
+ <div>
+ <div style="padding-bottom: 20px">
+ <label class="label-tabs label">Gewählt</label>
+ <select id="selectMultiMetaData" class="form-control multiselect multiselect-info" multiple="multiple" style="min-width: 235px">
+ </select>
+ </div>
+ <div>
+ <label class="label-tabs label">Auswahl Metadaten</label>
+ <select id="selectMetaData" class="form-control select select-primary select-block mbl" style="min-width: 235px;">
+ <option disabled selected>METADATEN</option>
+ <!--<option value="0">Bild</option>
+ <option value="1">Film</option>
+ <option value="2">Text</option>
+ <option value="3">Navigation</option>
+ <option value="4">Test</option>
+ <option value="5">Audio</option>-->
+ </select>
+ </div>
+ </div>
+
+ </form>
+ </div>
+ <div id="tab3" class="tabContents unitTab">
<form id="formContextInformation">
<div id="mainContextInfo">
<div id="mainContextInfoSAT">
@@ -289,56 +317,29 @@
</div>
</form>
</div>
- <div id="tab3" class="tabContents">
- <form>
- <div>
- <div style="padding-bottom: 20px">
- <label class="label-tabs label">Gewählt</label>
- <select id="selectMultiMetaData" class="form-control multiselect multiselect-info" multiple="multiple" style="min-width: 235px">
- </select>
- </div>
+ <!-- content of label relations -->
+ <div id="tab4" class="tabContents relationTab">
+ <div id="divSelectRelations">
+ <div id="tabRelationBody">
+ <p id="preLabelRelations" class="label-tabs label">Ist eine</p>
+ <select id="selectRelations" class="form-control select select-primary select-block mbl">
+ <option value="pre">Voraussetzung (PRE)</option>
+ <option value="alt">Alternative (ALT)</option>
+ <option value="bas">Grundlage (BAS)</option>
+ <option value="ref">Referenz (REF)</option>
+ <option value="ext">Erweiterung (EXT)</option>
+ <option value="hlp">Hilfe (HLP)</option>
+ </select>
+ <p id="postLabelRelations" class="label-tabs label">Für</p>
<div>
- <label class="label-tabs label">Auswahl Metadaten</label>
- <select id="selectMetaData" class="form-control select select-primary select-block mbl" style="min-width: 235px;">
- <option disabled selected>METADATEN</option>
- <!--<option value="0">Bild</option>
- <option value="1">Film</option>
- <option value="2">Text</option>
- <option value="3">Navigation</option>
- <option value="4">Test</option>
- <option value="5">Audio</option>-->
- </select>
- </div>
- </div>
-
- </form>
- </div>
- </div>
-
- <!-- content of label relations -->
- <div id="tabUnitLabel" class="tabRelation">
- <div id="divSelectRelations">
- <div id="tabRelationHead">
- <a title="Relation der Lerneinheiten">Relation</a>
- </div>
- <div id="tabRelationBody">
- <p id="preLabelRelations" class="label-tabs label">Ist eine</p>
- <select id="selectRelations" class="form-control select select-primary select-block mbl">
- <option value="pre">Voraussetzung (PRE)</option>
- <option value="alt">Alternative (ALT)</option>
- <option value="bas">Grundlage (BAS)</option>
- <option value="ref">Referenz (REF)</option>
- <option value="ext">Erweiterung (EXT)</option>
- <option value="hlp">Hilfe (HLP)</option>
- </select>
- <p id="postLabelRelations" class="label-tabs label">Für</p>
- <div>
- <div id="tabBtnDeleteConnection" class="btn btn-danger">
- <b class="fui-trash" ></b>Verbindung löschen
+ <div id="tabBtnDeleteConnection" class="btn btn-danger">
+ <b class="fui-trash" ></b>Verbindung löschen
+ </div>
</div>
</div>
</div>
</div>
+ <div id="tab5" class="tabContents simulatorTab"></div>
</div>
</div>
diff --git a/js/authoring/controllers/canvasController.js b/js/authoring/controllers/canvasController.js
index b0f96227cb3aa9e7b0d8bd6edabd94b67b343a81..2299c6e94a6f85c4de6d6b82323f5f32391e3538 100644
--- a/js/authoring/controllers/canvasController.js
+++ b/js/authoring/controllers/canvasController.js
@@ -3,6 +3,7 @@
*/
var currentConnectionID;
+var connectionIsClicked = false;
function initPlumbCanvas() {
@@ -34,7 +35,8 @@ function initPlumbCanvas() {
// triggered if a connection was drawn between to units
- inst.bind("connection", function (con) {
+ inst.bind("connection", function (con, e) {
+ e.stopPropagation();
// only use if scenario name is set (don't access at loading scenario)
if ( $("#lname")[0].innerHTML.length != 0 ) {
@@ -59,8 +61,9 @@ function initPlumbCanvas() {
var label = con.connection.getOverlay("label");
var labelID = $(label)[0].canvas.id;
$("#" + labelID)[0].setAttribute("title", "Vorausetzung (PRE)");
- }
+ activateConnection(con.connection);
+ }
}
});
@@ -69,8 +72,7 @@ function initPlumbCanvas() {
// c = connection element
// e = event
inst.bind("click", function (c, e) {
-
- fillRelationTab(c);
+ activateConnection(c);
// needed to prevent clicking the container as well
e.stopPropagation();
@@ -79,20 +81,20 @@ function initPlumbCanvas() {
// triggered if unit container, i.e. canvas is clicked
$("#container").on("click", function() {
+ if (connectionIsClicked)
+ return false;
// clear marking from existing learning units
clearMarkingFromLearningUnits();
+ // clear marking from label connections
+ clearMarkingFromConnections();
bool_unitClicked = false;
-
- // clear marking from label connections
- $(".aLabel").css("background-color", "");
- $(".aLabel").css("color", "");
+ connectionIsClicked = false;
// all tab content invisible
- $(".tabContents").hide();
- $(".tab-Container").hide();
- $("#tabUnitLabel").hide();
+ showScenarioTab();
+
});
@@ -105,13 +107,20 @@ function initPlumbCanvas() {
});
}
-
+function activateConnection(conn) {
+ // for tab bar
+ connectionIsClicked = true;
+ bool_unitClicked = false;
+ fillRelationTab(conn);
+}
function clearMarkingFromLearningUnits () {
- for (var l in list_units) {
- $("#"+list_units[l]).css("background", "");
- $("#"+list_units[l]).css("color", "");
- }
+ $("#stm").children("div.w").css("background", "").css("color", "");
+}
+
+function clearMarkingFromConnections () {
+ // clear marking from label connections
+ $(".aLabel").css("background-color", "").css("color", "");
}
diff --git a/js/authoring/controllers/menuController.js b/js/authoring/controllers/menuController.js
index 83ac82507ce8a6ed53e1d1437505d2b85252fac7..71914e15dd7a3dcec5dbbd64706d9b6aab2cc2b3 100644
--- a/js/authoring/controllers/menuController.js
+++ b/js/authoring/controllers/menuController.js
@@ -16,6 +16,7 @@ $(function() {
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
+ showScenarioTab();
});
$('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');
diff --git a/js/authoring/controllers/modalWindows/deleteUnitModalWindowController.js b/js/authoring/controllers/modalWindows/deleteUnitModalWindowController.js
index a71206ee78f3270752814419b31c8995f22900e9..0577b21fff3f063969f849cebb6ef1394f9fdf00 100644
--- a/js/authoring/controllers/modalWindows/deleteUnitModalWindowController.js
+++ b/js/authoring/controllers/modalWindows/deleteUnitModalWindowController.js
@@ -22,11 +22,6 @@ $(function() {
// and delete it and its traces
removeUnitFromScenario(unitUUID, selectedScenarioName);
}
-
- // all tab content invisible
- $(".tabContents").hide();
- $(".tab-Container").hide();
- $("#tabUnitLabel").hide();
});
// for button: delete unit = NO
diff --git a/js/authoring/controllers/modalWindows/newScenarioModalWindowController.js b/js/authoring/controllers/modalWindows/newScenarioModalWindowController.js
index 59a6d59863609d37a63df17e933e47c2484749cf..9db6117da085487a05757b3fc500146743e82476 100644
--- a/js/authoring/controllers/modalWindows/newScenarioModalWindowController.js
+++ b/js/authoring/controllers/modalWindows/newScenarioModalWindowController.js
@@ -100,6 +100,8 @@ function createScenario() {
// activate learning unit dropdown menu (big navigation bar)
learningUnitDropdownMenuElement.css("pointer-events", "");
learningUnitDropdownMenuElement.css("color", "");
+
+ showScenarioTab();
}
/**
diff --git a/js/authoring/controllers/tabs/contextTabController.js b/js/authoring/controllers/tabs/contextTabController.js
index 1c1c11b26f162645313314e393615420e0b3e95c..eb634f0cce05ea363d30d46e9bb4e87082638346 100644
--- a/js/authoring/controllers/tabs/contextTabController.js
+++ b/js/authoring/controllers/tabs/contextTabController.js
@@ -665,7 +665,6 @@ function confirmContextInformation() {
// get name into multi selection
//$("#selectMultiContextInfos").append(option);
array_multiSelectionContextInfos[unitContextIndex] = {id: unitContextIndex.toString(), text: contextInfoName};
- // TODO: This just doesn't work anymore... O:
$(selectMultiContextInfos).select2("data", array_multiSelectionContextInfos);
// re-color each choice and add editing functionality
diff --git a/js/authoring/controllers/tabs/generalTabController.js b/js/authoring/controllers/tabs/generalTabController.js
deleted file mode 100644
index b6ecf1851ad7adde7ed909b97094812db81a9723..0000000000000000000000000000000000000000
--- a/js/authoring/controllers/tabs/generalTabController.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Created by Julius Höfler on 30.03.15.
- */
-
-
-// tabs
-$(function() {
-
- // default hide tabs
- $(".tab-Container").hide();
- $(".tabContents").hide();
- $("#firstTab").addClass("active");
-
- // if one tab is clicked show this one
- $(".tab-Container ul li a").click(function() {
-
- // hide other tab content
- var activeTab = $(this).attr("href");
- $(".tab-Container ul li a").removeClass("active");
- $(this).addClass("active");
- $(".tabContents").hide();
-
- // TODO: For each newly created unit show firstTab on first click --> see $(unit).click(...)
- // TODO: For each follow-up click of existing unit show tab that was last opened
- // only show tab content if a unit is clicked
- if (bool_unitClicked) {
- $(activeTab).fadeIn();
- }
-
- return false;
- });
-});
-
-
-
-// cleans selection bars
-/**
- * Function cleans a selection bar.
- * @param {String} s Contains a selection bar id.
- * */
-function cleanSection(s) {
- $(s).empty();
- $(s).select2("data", {id:"\r",text:"\r"});
-}
\ No newline at end of file
diff --git a/js/authoring/controllers/tabs/propertiesTabController.js b/js/authoring/controllers/tabs/propertiesTabController.js
index 482a04dc6bc7b11f203d0186c3219211f2794394..a9b2dc90b6d13816c6bbb42ed9ea8965e1c10932 100644
--- a/js/authoring/controllers/tabs/propertiesTabController.js
+++ b/js/authoring/controllers/tabs/propertiesTabController.js
@@ -57,8 +57,7 @@ $(function() {
removeUnitFromScenario(currentUnitUUID, currentScenarioName);
// all tab content invisible
- $(".tabContents").hide();
- $(".tab-Container").hide();
+ deactivateAllTabs();
});
@@ -66,6 +65,22 @@ $(function() {
$("#tabBtnDeleteUnit").on("click", showDeleteUnitConfirm);
});
+
+/**
+ * Prepare property tab content for clicked unit.
+ */
+function fillUnitPropertiesTab() {
+ // get current unit's data model (if existent)
+ var current_unit = authorSystemContent.getUnitByUUID(currentUnitUUID);
+
+ // put name into the input field
+ //var formObject = document.forms["formProperties"];
+ $("#inputUnitName")[0].value = current_unit.getName();
+ // set description field
+ $("#inputUnitDescription")[0].value = current_unit.getDescription();
+}
+
+
/**
* Function shows delete unit confirmation modal window.
* Triggered in tab properties after clicking the unit delete button
diff --git a/js/authoring/controllers/tabs/relationTabController.js b/js/authoring/controllers/tabs/relationTabController.js
index fc4f90b3a8f3ade544c3377940a8bc3f4afceb71..81e06b319a6d9ff757eea3f3aaa8e377af698787 100644
--- a/js/authoring/controllers/tabs/relationTabController.js
+++ b/js/authoring/controllers/tabs/relationTabController.js
@@ -14,6 +14,7 @@ $(function() {
// unmark label
$("#" + currentConnectionID).css("background-color", "");
$("#" + currentConnectionID).css("color", "");
+ connectionIsClicked = false;
// get connection id and scenario name
var connID = $("#" + currentConnectionID)[0]._jsPlumb.component.id;
@@ -25,8 +26,6 @@ $(function() {
thisConnection.setLabel(e.val.toUpperCase());
thisConnection.setTitle(e.choice.text);
- // hide property in tab
- $("#tabUnitLabel").hide();
});
@@ -46,11 +45,13 @@ $(function() {
var thisScenario = authorSystemContent.getScenario(currentScenario);
thisScenario.removeConnection(connID);
- // hide tab after connection was deleted
- $("#tabUnitLabel").hide();
+ // hide relation tab after connection was deleted
+ deactivateAllTabs();
+ connectionIsClicked = false;
});
});
+
function fillRelationTab(connection) {
var label = connection.getOverlay("label");
@@ -68,20 +69,16 @@ function fillRelationTab(connection) {
$("#postLabelRelations").html("für " + targetUnit);
// clear markings from connection labels
- $(".aLabel").css("background-color", "");
- $(".aLabel").css("color", "");
+ clearMarkingFromConnections();
// set label connection mark
$("#" + currentConnectionID).css("background-color", "#1e8151");
$("#" + currentConnectionID).css("color", "white");
- // clear unit marking and hide unit properties
- $(".w").css("background", "");
- $(".w").css("color", "");
- $(".tabContents").hide();
- $(".tab-Container").hide();
+ // clear unit marking
+ clearMarkingFromLearningUnits();
// show relations tab: set label connection property visible
- $("#tabUnitLabel").css("display", "block");
+ showRelationTab();
// show right selection of the current label in selection bar
$("#selectRelations").children("option").each(function() {
diff --git a/js/authoring/controllers/tabs/tabBarController.js b/js/authoring/controllers/tabs/tabBarController.js
new file mode 100644
index 0000000000000000000000000000000000000000..35ce1a446bf4081117d95d806d9aff3a95c19da2
--- /dev/null
+++ b/js/authoring/controllers/tabs/tabBarController.js
@@ -0,0 +1,112 @@
+/**
+ * Created by Julius Höfler on 30.03.15.
+ */
+
+var lastOpenedUnitTab;
+
+// tabs
+$(function() {
+
+ // default hide tab content
+ $(".tabBar").hide();
+ $(".tabContents").hide();
+
+ //showScenarioTab();
+
+ // if one tab is clicked show this one
+ $(".tabBar ul li a").click(function() {_showTab(this);});
+});
+
+// activate the 3 unit tabs only when there are units
+function activateUnitTabs() {
+ $(".tabBar ul li a .unitTab").css("color","").css("pointer-events","");
+}
+
+// activate the 3 unit tabs only when there are units
+function deactivateUnitTabs() {
+ $(".tabBar ul li a .unitTab").css("color","#aaa").css("pointer-events","none");
+}
+
+
+// show first tab which displays the scenario's settings and properties
+function showScenarioTab() {
+ _showTab($(".tabBar ul li a")[0]);
+}
+
+// show second tab which displays a unit's properties
+function showUnitTab() {
+ _showTab(lastOpenedUnitTab || $(".tabBar ul li a")[1]);
+}
+
+// show second tab which displays a unit's properties
+function showUnitPropertiesTab() {
+ _showTab($(".tabBar ul li a")[1]);
+}
+
+// show fifth tab which displays a unit's metadata or content
+function showMetadataTab() {
+ _showTab($(".tabBar ul li a")[2]);
+}
+
+// show second tab which displays a unit's properties
+function showContextTab() {
+ _showTab($(".tabBar ul li a")[3]);
+}
+
+// show fourth tab which displays relation options
+function showRelationTab() {
+ _showTab($(".tabBar ul li a")[4]);
+}
+
+// show sixth tab which displays the simulator
+function showSimulatorTab() {
+ _showTab($(".tabBar ul li a")[5]);
+}
+
+/**
+ *
+ * @param tab A jQuery selectee (the tab, i.e. link to the tab content to be shown).
+ * @private
+ */
+function _showTab(tab) {
+ // make sure tab bar is visible
+ $(".tabBar").show();
+ // deactivate all tabs and hide their content
+ deactivateAllTabs();
+ // activate selected tab
+ $(tab).addClass("active");
+ // show active tab content
+ _showActiveTabContent(tab);
+}
+
+
+// hide other tab content
+function deactivateAllTabs() {
+ $(".tabBar ul li a").removeClass("active");
+ $(".tabContents").hide();
+}
+
+/**
+ * Display active tab's content in the panel on the right
+ */
+function _showActiveTabContent(tab) {
+ // if no connection or unit has been clicked, show empty panel
+ if ($(tab).hasClass("relationTab") && !connectionIsClicked) return false;
+ if ($(tab).hasClass("unitTab")) {
+ // keep track of last opened tab
+ lastOpenedUnitTab = tab;
+ if (!bool_unitClicked) return false;
+ }
+ $($(tab).attr("href")).show();
+}
+
+
+// cleans selection bars
+/**
+ * Function cleans a selection bar.
+ * @param {String} s Contains a selection bar id.
+ * */
+function cleanSection(s) {
+ $(s).empty();
+ $(s).select2("data", {id:"\r",text:"\r"});
+}
\ No newline at end of file
diff --git a/js/authoring/controllers/unitController.js b/js/authoring/controllers/unitController.js
index 88dc7d826a9a1d4fa473770036a6a88c15452c8b..b89168ae5caeb3125cc36095bbb17e7eef680cfc 100644
--- a/js/authoring/controllers/unitController.js
+++ b/js/authoring/controllers/unitController.js
@@ -5,6 +5,9 @@
function createUnit() {
+ // hide tabs because all units will be unmarked
+ deactivateAllTabs();
+
// lname := scenario name in navBar
var nameCurrentScenario = $("#lname")[0].innerText;
@@ -15,10 +18,9 @@ function createUnit() {
// get new unit DOM
var newState = buildUnitDOM(uuid, stateName);
- var nameSet = false;
-
- // if the unit name was written and enter was clicked
+ // if the unit name was written and enter was pressed
stateName.keyup(function(e) {
+
if (e.keyCode == 13) {
var unitName = this.value;
@@ -31,34 +33,27 @@ function createUnit() {
// set unit name
$(this).parent().text(unitName);
-
// update JSON structure: get new unit in its scenario
var newUnit = new Unit();
newUnit.setUUID(uuid);
newUnit.setName(unitName);
authorSystemContent.getScenario(nameCurrentScenario).addUnit(newUnit);
- // get newState id in unit list // TODO: check this list
- list_units.push(currentUnitUUID);
-
// clear marking from existing learning units
clearMarkingFromLearningUnits();
// add learning unit in menu bar
addUnitToMenu(nameCurrentScenario);
- // hide tabs because all units will be unmarked
- $(".tabContents").hide();
- nameSet = true;
- }
+ // show first unit tab
+ lastOpenedUnitTab = null;
+ activateUnit(newState);
- // to set the source and target points, it is necessary to wait until the name was entered
- // --> prevent the wrong placement of the dots
- if (nameSet) {
+ // to set the source and target points, it is necessary to wait until the name was entered
+ // --> prevent the wrong placement of the dots
plumbUnit(newState);
// set event handler listening for click
initUnitClickEventHandler();
- nameSet = false;
}
});
// set focus on input field
@@ -173,6 +168,10 @@ function plumbUnit(newState) {
}
+/**
+ * Sets click event handler for every newly created unit.
+ * NOTE: Event handler cannot be set at document load, because units do not exist then.
+ */
function initUnitClickEventHandler () {
// triggered if learning unit is clicked
@@ -181,41 +180,8 @@ function initUnitClickEventHandler () {
// update global variable: UUID of the clicked unit
currentUnitUUID = $(this)[0].getAttribute("id");
- bool_unitClicked = true;
-
- // clear marking from all units
- clearMarkingFromLearningUnits();
- // unit is marked --> change color
- $(this).css("background", "#16a085");
- $(this).css("color", "white");
- // clear marking from label connections
- $(".aLabel").css("background-color", "");
- $(".aLabel").css("color", "");
-
- // show tab content of the current active tab
- var activeTab = $(".tab-Container > ul > li").children("a.active").attr("href");
- $(activeTab).fadeIn();
- $(".tab-Container").show();
- // hide tab from unit label connection
- $("#tabUnitLabel").hide();
-
- // get current unit's data model (if existent)
- var current_unit = authorSystemContent.getUnitByUUID(currentUnitUUID);
-
- // make sure this unit has got a name and data model
- if (current_unit) {
- /* tab "Eigenschaften"*/
-
- // put name into the input field
- //var formObject = document.forms["formProperties"];
- $("#inputUnitName")[0].value = current_unit.getName();
-
- // set description field
- $("#inputUnitDescription")[0].value = current_unit.getDescription();
-
- /* tab "Kontextinformation" */
- loadContextTabForUnit();
- }
+ // highlight unit and load its data for tabs
+ activateUnit(this);
// prevents that underlying container is also clicked (needed for unit marking)
event.stopPropagation();
@@ -225,6 +191,32 @@ function initUnitClickEventHandler () {
});
}
+/**
+ * Highlights unit and loads its tab contents.
+ * Called when unit is clicked or created.
+ */
+function activateUnit(unit) {
+
+ // clear marking from all units
+ clearMarkingFromLearningUnits();
+ // unit is marked --> change color
+ $(unit).css("background", "#16a085");
+ $(unit).css("color", "white");
+
+ // clear marking from label connections
+ clearMarkingFromConnections();
+ connectionIsClicked = false;
+ bool_unitClicked = true;
+
+ /* tab "Eigenschaften"*/
+ fillUnitPropertiesTab();
+ /* tab "Kontextinformation" */
+ loadContextTabForUnit();
+
+ // show tab content of the currently active tab
+ showUnitTab();
+}
+
/**
* This function adds the given meta datum to the given unit's DOM element.
@@ -337,6 +329,8 @@ function removeUnitFromScenario(unitUUID, scenarioName) {
removeUnitFromMenu(scenarioName, currentUnit.getName());
currentScenario.removeUnit(currentUnit);
+ // hide tab content and un-select all tabs in right panel
+ deactivateAllTabs();
}
diff --git a/js/main.js b/js/main.js
index 21847df4a787fd19bb3971a82f535ab7e7cf9be4..eef60daf08f51d04f62d9cc3cdfbaeb25df6ade2 100644
--- a/js/main.js
+++ b/js/main.js
@@ -6,12 +6,8 @@
// global unit instance
var inst;
var bool_unitClicked = false;
-var list_units = [];
var currentUnitUUID = "";
-var global_currentScenarioName = "";
var contextList = new ContextInfoList();
-// will be deleted once refactoring is complete
-//var myAuthorSystem = [];
var authorSystemContent = new AuthorSystemContent();
// reloading