Source: functionalities.js

/**
 * Created by juliushofler on 13.03.15.
 */

/** -- JSON Structure for the personal author system data --
 *  myAuthorSystem = [scenario1, scenario2, ..., scenarioN, options]
 *      scenario = {name:name, units:[unit1, unit2, ...], connections:[connect1, connect2, ...]}
 *          unit = {name:name, description:text,
 *            contextInformations:[contextInformation1, contextInformation2, ...],
 *            sat:choice,
 *            metaData:[metaData1, metaData2, ...],
 *
 *            posX:number,
 *            posY:number
 *          }
 *              contextInformation = {name:name, operator:name, value:value,
 *                input1:value, input2:value, inputString:value,
 *                parameter1:value, parameter2:value,
 *                icon:path
 *              }
 *              metaData = {name:name, icon:path}
 *      options = {option1:text, option2:text, ...}
 *  **/

var myAuthorSystem = [];


// slider
var valueSlider, scaleSlider, diffSlider;
$(function() {

    // slider properties and functionalities
    $(".slider").slider({max:8, min:0, value:4, orientation: "vertical", step:1,
        // default properties
        create: function() {
            valueSlider = 4;
            scaleSlider = 1;
        },
        // if slider is used, change size of all elements in working place
        change: function(event, ui) {
            diffSlider = ui.value - valueSlider;
            scaleSlider = scaleSlider + (0.1 * diffSlider);     // scale factor
            $("#stm div").css({
                "-webkit-transform":"scale(" + scaleSlider + ")",
                "-moz-transform":"scale(" + scaleSlider + ")",
                "-ms-transform":"scale(" + scaleSlider + ")",
                "-o-transform":"scale(" + scaleSlider + ")",
                "transform":"scale(" + scaleSlider + ")"
            });
            $("#stm svg").css({
                "-webkit-transform":"scale(" + scaleSlider + ")",
                "-moz-transform":"scale(" + scaleSlider + ")",
                "-ms-transform":"scale(" + scaleSlider + ")",
                "-o-transform":"scale(" + scaleSlider + ")",
                "transform":"scale(" + scaleSlider + ")"
            });
            jsPlumb.setZoom(scaleSlider);
            valueSlider = ui.value;
            inst.repaintEverything();
        }})
        // add pips and label to slider
        .slider("pips", {first:"label", last:"label", labels:{"first":"-", "last":"+"}});
});

// events on little menu bar
$(function() {

    // menu hover --> change color
    $("#navmenu").mouseover(function() {
        $(this).css("background", "#48c9b0");
        $(this).css("cursor", "pointer");
        $("#navmenu a").css("color", "#ffffff");
    });
    $("#navmenu").mouseout(function() {
        $(this).css("background", "#ddd");
        $("#navmenu a").css("color", "#666");
    });

    // toggle menu bar
    $("#navmenu").on("click",function() {
        $( "#cssmenu" ).toggle("slide");
        $("#navmenu a").toggleClass("fui-arrow-left fui-arrow-right");
    });

    // add learning unit hover --> change color
    $("#navadd").mouseover(function() {
        $(this).css("background", "#48c9b0");
        $(this).css("color", "#ffffff");
    });
    $("#navadd").mouseout(function() {
        $(this).css("background", "#ddd");
        $(this).css("color", "#666");
    });
    $("#navadd").css("pointer-events", "none");
    $("#navadd").css("color", "rgb(150,150,150)");

    // tab bar hover --> change color
    $("#navtab").mouseover(function() {
        $(this).css("background", "#48c9b0");
        $(this).css("cursor", "pointer");
        $("#navtab a").css("color", "#ffffff");
    });
    $("#navtab").mouseout(function() {
        $(this).css("background", "#ddd");
        $("#navtab a").css("color", "#666");
    });

    // toggle tab bar
    $("#navtab").on("click",function() {
        $( ".properties" ).toggle("slide");
        $("#navtab a").toggleClass("fui-arrow-right fui-arrow-left");
    });

    // change scenario name
    $("#lname").on("click", function(e) {
        // hide label
        $(this).hide();

        // create input field
        var inputName = $("<input>").addClass("form-control");
        var scenarioName = $("#lname")[0].innerHTML;
        inputName.attr("value", scenarioName);
        //$(inputName).css("height", "100%");
        $(inputName).css("height", "30");
        $(inputName).css("width", "200");
        $(inputName).css("display", "inherit");

        // place it in parent DOM and set focus on last position
        $(this).parent().append(inputName);
        inputName.focus();
        $(inputName)[0].setSelectionRange(scenarioName.length, scenarioName.length);

        // triggered if enter was clicked in input field
        $(inputName).keyup(function(e) {
            if (e.keyCode === 13) {

                // save name in JSON structure and in GUI
                saveScenarioName(inputName, scenarioName);
            }
        });
        e.stopPropagation();

        // triggered if body is clicked
        $("body").on("click", function() {

            // only save scenario name if input field is visible
            if ($(inputName).css("display") != "none" && $(inputName).css("display") != "inherit") {

                // save name in JSON structure and in GUI
                saveScenarioName(inputName, scenarioName);
            }
        });
    });

});

// saves the current scenario name and hides input field
function saveScenarioName(inputName, scenarioName) {

    // get new name in label
    $("#lname").html($(inputName).val());

    // show label again
    $("#lname").show();

    // remove input field
    $(inputName).remove();

    // change name in menu bar
    $("#menuScenarios").children("li").children("a").children("span.title").each(function() {
        if ( $(this)[0].innerHTML == scenarioName ) {
            $(this).html($("#lname")[0].innerHTML);
        }
    });

    // update name JSON structure
    for (var m=0; m<myAuthorSystem.length; m++) {
        if (myAuthorSystem[m].name == scenarioName) {
            myAuthorSystem[m].name = $("#lname")[0].innerHTML;
        }
    }

}

// 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();

        // only show tab content if a unit is clicked
        if (bool_unitClicked) {
            $(activeTab).fadeIn();
        }

        return false;
    });
});

// container
$(function() {
    // triggered if unit container is clicked
    $("#container").on("click", function() {

        // clear marking from existing learning units
        for (var l=0; l<list_units.length; l++) {
            $(list_units[l]).css("background", "");
            $(list_units[l]).css("color", "");
        }
        bool_unitClicked = false;

        // clear marking from label connections
        $(".aLabel").css("background-color", "");
        $(".aLabel").css("color", "");

        // clear multi selection bar "Metadaten"
        $("#selectMultiMetaData").empty();
        array_multiSelectionMetaData = [];
        $("#selectMultiMetaData").select2("data", array_multiSelectionMetaData);

        // all tab content invisible
        $(".tabContents").hide();
        $(".tab-Container").hide();
        $("#tabUnitLabel").hide();
    });
});

// big navigation bar
$(function() {
    $("#navbarLearningUnit").css("pointer-events", "none");
    $("#navbarLearningUnit").css("color", "#aaa");
});

// reloading
var loadedData;
$(function() {

    // get URL parameter
    var paramURL = location.search.substr(1);
    paramURL = paramURL.replace(/%20/g, " ");

    // get saved scenario data from loading process
    var savedData = JSON.parse(localStorage.getItem("saveData"));

    // get current scenario data
    if (savedData != null && paramURL == savedData.name) {
        loadedData = savedData;

        // load scenario from JSON file
        loadScenario(loadedData);

        // update scenario list
        updateScenario(loadedData.name);
        myAuthorSystem.splice(-1);

        // update label
        setLabelBtnScenarioDeletion();
    }

    // only needed for testing
    if (paramURL == "Testszenario") {

        jQuery.get('Testszenario.json', function (data) {
            console.log(data);
            //loadedData = data[0];
            loadedData = data;

            // load scenario from JSON file
            loadScenario(loadedData);

            // update scenario list
            updateScenario(loadedData.name);
            myAuthorSystem.splice(-1);

            // update label
            setLabelBtnScenarioDeletion();
        });
    }
});

/**
 * Function loads a scenario which contains all units, connections und functions.
 * @param {Object} data Contains all data from a scenario
 * */
function loadScenario(data) {

    // get scenario in myAuthorSystem
    myAuthorSystem.push(data);

    /* get scenario in menu */
    // create new container to see new scenario in menu bar
    var liScenario;
    if (data["units"].length != 0) {
        liScenario = $('<li>').addClass('has-sub');
        liScenario.addClass("active");
    } else {
        liScenario = $('<li>').addClass('last');
    }
    liScenario.attr("id", "menu-scenario-load");
    var aClass = $('<a>').attr('href', '#');
    var spanClass = $('<span>').addClass('title');

    // append container in html file
    spanClass.append(data.name);
    aClass.append(spanClass);
    liScenario.append(aClass);
    $("#cssmenu > ul").append(liScenario);

    // get the functionalities into the menu bar
    /*liScenario.children("a").click(function() {
        $(this).removeAttr('href');
        var element = $(this).parent('li');

        if (element.hasClass('open')) {
            element.removeClass('open');
            element.find('li').removeClass('open');
            element.find('ul').slideUp();
        }
        else {
            element.addClass('open');
            element.children('ul').slideDown();
            element.siblings('li').children('ul').slideUp();
            element.siblings('li').removeClass('open');
            element.siblings('li').find('li').removeClass('open');
            element.siblings('li').find('ul').slideUp();
        }
    });*/

    // get units in menu
    if (liScenario.hasClass("has-sub")) {

        // append a holder to toggle the menu bar
        liScenario.children("a").append('<span class="holder"></span>');

        ulScenario = $("<ul>").attr("style", "display:none");

        // put all units in scenario in menu bar
        for (var i=0; i<data["units"].length; i++) {
            var ulScenario;
            var liUnit = $("<li>").addClass("last");
            var aUnit = $("<a>").attr("href", "#");
            var spanUnit = $("<span>");

            // append content name on DOM
            spanUnit[0].innerText = data["units"][i].name;
            aUnit.append(spanUnit);
            liUnit.append(aUnit);
            ulScenario.append(liUnit);
        }
        liScenario.append(ulScenario);
    }

    // set container
    jsPlumb.setContainer($("#stm"));

    // load units from scenario
    for (var j=0; j<data["units"].length; j++) {
        var unit = loadUnit(data["units"][j], (j+1).toString(), inst);

        // set event listeners
        activateFunctionalities(unit);
    }

    // set connections
    for (var k=0; k<data["connections"].length; k++) {
        var c = inst.connect({
            source: data["connections"][k].sourceId,
            target: data["connections"][k].targetId,
            anchors: ["Continuous", "Continuous"],
            //overlays: [["Label", {label: "PRE", id: "label", cssClass: "aLabel" }]]
            overlays: [["Label", {label: data["connections"][k].connLabel, id: "label", cssClass: "aLabel" }]]
        });
        // set title for label
        var label = c.getOverlay("label");
        var labelID = $(label)[0].canvas.id;
        $("#" + labelID)[0].setAttribute("title", data["connections"][k].connTitle);
    }

    // activate quick add learning unit button (little navbar right)
    $("#navadd").css("pointer-events", "");
    $("#navadd").css("color", "rgb(102,102,102)");

    // activate learning unit dropdown menu (big navigation bar)
    $("#navbarLearningUnit").css("pointer-events", "");
    $("#navbarLearningUnit").css("color", "");

    // get name in current scenario label
    $("#lname").html(data.name);
}

// global unit instance
var inst;
// initialize jsPlumb instance if jsPlumb is ready
jsPlumb.ready(function () {
    inst = jsPlumb.getInstance({
        Endpoint: ["Dot", {radius: 2}],
        HoverPaintStyle: {strokeStyle: "#1e8151", lineWidth: 2 },
        ConnectionOverlays: [
            [ "Arrow", {
                location: 1,
                id: "arrow",
                length: 14,
                foldback: 0.8
            } ]
            //[ "Label", { label: "connecting", id: "label", cssClass: "aLabel" }]
        ],
        Container: "stm"
    });
});