OpenBoard/resources/library/interactivities/Contraste.wgt/scripts/blackYellow.js

/*
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

var sankoreLang = {
    display: "Close", 
    edit: "Edit", 
    add: "Add", 
    enter_data: "Enter data:", 
    enter_result: "Enter result:", 
    ok: "Ok", 
    cancel: "Cancel",
    wgt_name: "Contrast",
    reload: "Reload",
    slate: "slate",
    pad: "pad",
    none: "none",
    help: "Help",
    help_content: 
"<p><h2>Contrast</h2> </p>" +
"<p><h3>Color game</h3> </p>" +

"<p>Hide and show text playing with the background color (yellow or black). Hide and show data dragging and dropping text fields to the right or the left.</p> "+
"<p>“Reload” button resets the exercises.</p>" +
"<p>Enter the “Edit” mode to :</p>" +
"<ul><li>choose the theme of interactivity : pad, slate or none (none by default),</li>" +
"<li>modify an exercise or create a new one.</li></ul>" +

"<p>To create a new label :</p>" +
"<ul><li> click on “+ Add”,</li>" +
"<li>Enter the data for example “3x15”,</li>" +
"<li>Enter the result, for example “15” and click “OK”. </li> </ul>" +
"<p>To modify data or results, click directly on text fields.</p>" +
"<p>To delete a label, click on the “X”.</p>" +
"<p>“Display” button comes back to the activity.</p>",
    theme: "Theme"
};

function init(){

    //variables
    var toggleFlag = false; // detects toggling in toggle button
    var endFlag = false; // ending of toggling in toggle button
    var addToggleStart = false; // detects toggling in add button
    var addToggleEnd = false; // ending of toggling in add button
    var shadowOver = false;
    var mode = false;
    var popupFlag = false
    var flagForSelect = false;
    var dragElement = null; //the element that must be dragging
    var lang = ""; //locale language
    var resizeFlag = true;
    
    var coords = {
        left:0,
        top:0
    }

    var resizeObj = {
        y:false,
        x:false,
        width:0,
        height:0
    }
    
    var opacityChanged = false;
    
    $("#wgt_display").text(sankoreLang.display);
    $("#wgt_edit").text(sankoreLang.edit);
    $("#wgt_add").text(sankoreLang.add);
    $("#wgt_name").text(sankoreLang.wgt_name);
    $("#wgt_reload").text(sankoreLang.reload);
    $("#wgt_help").text(sankoreLang.help);
    $("#help").html(sankoreLang.help_content);
    $("#style_select option[value='1']").text(sankoreLang.slate);
    $("#style_select option[value='2']").text(sankoreLang.pad);
    $("#style_select option[value='3']").text(sankoreLang.none);
    var tmpl = $("div.inline label").html();
    $("div.inline label").html(sankoreLang.theme + tmpl)
    
    if(window.sankore){
        if(sankore.preference("blackYellowData","")){
            var importArray = jQuery.parseJSON(sankore.preference("blackYellowData",""));
            for(var i in importArray){
                var tmpReadyTask = $("<div class='readyTask'>");
                var exprContainer = $("<div class='taskContainer' style='color: yellow;'>" + importArray[i].data1 + "</div>").appendTo(tmpReadyTask);
                var resContainer = $("<div class='taskContainer' style='color: black;'>"+ importArray[i].data2 + "</div>").appendTo(tmpReadyTask);
                tmpReadyTask.width(importArray[i].width)
                .height(importArray[i].height)
                .css("position","absolute")
                .css("top",importArray[i].top)
                .css("left",importArray[i].left);                                
                tmpReadyTask.appendTo("#data");
            }      
        }
        $(document).disableTextSelect();
    }
    
    /* ------------- BUTTONS -------------*/
    
    if(window.sankore){
        if(sankore.preference("by_style","")){
            changeStyle(sankore.preference("by_style",""));
            $("#style_select").val(sankore.preference("by_style",""));
        } else
            changeStyle("3")
    } else
        changeStyle("3")

    $("#wgt_display, #wgt_edit").click(function(event){
        if(this.id == "wgt_display"){
            if(!$(this).hasClass("selected")){                
                $(this).addClass("selected");
                $("#wgt_edit").removeClass("selected");
                $("#parameters").css("display","none");   
                var tmpwh = $(window).height();
                var tmpww = $(window).width();
                resizeFlag = true;
                window.resizeTo(tmpww, tmpwh - 44)
                $("#data").css("padding-bottom","");
                $("#leftDiv").css("border-top-left-radius","7px");
                $("#rightDiv").css("border-top-right-radius","7px");
                $(this).css("display", "none");
                $("#wgt_edit").css("display", "block");
                mode = false;
                $(".leftDiv, .rightDiv").animate({
                    "opacity":"1"
                },"fast",function(){
                    if(opacityChanged){
                        if($(".editContainer").size() != 0){
                            $(".editContainer").each(function(index, domElem){
                                var tmpReadyTask = $(domElem).find(".readyTask");
                                tmpReadyTask.width($(domElem).width())
                                .height($(domElem).height())
                                .css("position","absolute")
                                .css("top",$(domElem).position().top - 40)
                                .css("left",$(domElem).position().left)
                                .find(".taskContainer").removeAttr("contenteditable");                                
                                
                                $(domElem).remove();
                                tmpReadyTask.appendTo("#data");
                            });
                        }
                        opacityChanged = false;
                    }
                });
                
                $(document).disableTextSelect(); 
            }
        } else {            
            if(!$(this).hasClass("selected")){
                $(this).addClass("selected");
                $("#wgt_display").removeClass("selected");
                $("#parameters").css("display","block");   
                tmpwh = $(window).height();
                tmpww = $(window).width();
                resizeFlag = true;
                window.resizeTo(tmpww, tmpwh + 44)
                $("#data").css("padding-bottom","42px");
                $("#leftDiv").css("border-top-left-radius","0px");
                $("#rightDiv").css("border-top-right-radius","0px");
                $(this).css("display", "none");
                $("#wgt_display").css("display", "block");
                mode = true; 
                $(document).enableTextSelect(); 
                $(".leftDiv, .rightDiv").animate({
                    "opacity":"0.4"
                },"fast",function(){
                    if(!opacityChanged){
                        if($(".readyTask").size() != 0){
                            var tmp_arr = [];
                            $(".readyTask").each(function(){
                                tmp_arr.push($(this));
                            })
                            orderItems(tmp_arr);
                            $(".readyTask").each(function(index, domElem){     
                                var editContent = $("<div class='editContainer'>").width($(domElem).width() + 10).height($(domElem) + 10).appendTo("#data");
                                var closeItem = $("<div class='closeItem'>").appendTo(editContent);
                                editContent.css("top", $(domElem).position().top).css("left", $(domElem).position().left);
                                $(domElem).css("position","static")
                                .width("100%")
                                .height("100%")
                                .find(".taskContainer").attr("contenteditable", "true");
                                $(domElem).appendTo(editContent);
                            });
                        }
                        opacityChanged = true;
                    }
                });
            }
        }
    });

    $("#wgt_help").click(function(){
        var tmp = $(this);
        if($(this).hasClass("open")){
            $(this).removeClass("help_pad").removeClass("help_wood")
            $("#help").slideUp("100", function(){
                tmp.removeClass("open");
                $("#data").show();
                ($("#wgt_edit").hasClass("selected"))?$("#parameters").show():'';
            });
        } else {            
            ($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad");
            $("#data, #parameters").hide();
            $("#help").slideDown("100", function(){
                tmp.addClass("open");
            });
        }
    });

    $("#wgt_reload").click(function(){
        reloadItems();
    });
    
    $("#wgt_add").click(function(){
        if($("#wgt_help").hasClass("open")){
            $("#help").slideUp("100", function(){
                $("#wgt_help").removeClass("open");
                $("#data").show();
            });
        }
        shadowDiv.show();
        shadowOver = true;
        popupBack.show("slow");        
        $(document).disableTextSelect();
    });
    
    $("#style_select option[value='1']").text(sankoreLang.slate);
    $("#style_select option[value='2']").text(sankoreLang.pad);
    
    $("#style_select").change(function (event){
        changeStyle($(this).find("option:selected").val());
    })
    
    /* -------------- END OF WORK WITH BUTTONS ---------------*/
    
    //basic divs
    var leftDiv = $("<div id='leftDiv' class='leftDiv'>").appendTo("#data");
    var rightDiv = $("<div id='rightDiv' class='rightDiv'>").appendTo("#data");
    
    //divs for adding a new item
    var shadowDiv = $("<div id='shadowDiv' class='shadowDiv'>").appendTo("html");
    var popupBack = $("<div id='popupBack' class='popupBack'>").appendTo("#data");
    
    //input fields and buttons for a popup window
    var expressionDiv = $("<div id='expressionDiv' class='popupContainers'>").appendTo(popupBack);
    var experssionLabel = $("<span id='experssionLabel' class='popupLabels'><b>" + sankoreLang.enter_data + "</b></span>").appendTo(expressionDiv);
    var expresionText = $("<input type='text' id='expresionText' class='expresionInput'/>").appendTo(expressionDiv);
    
    var resultDiv = $("<div id='resultDiv' class='popupContainers'>").appendTo(popupBack);
    var resultLabel = $("<span id='resultLabel' class='popupLabels'><b>" + sankoreLang.enter_result + "</b></span>").appendTo(resultDiv);
    var resultText = $("<input type='text' id='resultText' class='expresionInput'/>").appendTo(resultDiv);
    
    var popupButtonsDiv= $("<div id='popupButtonsDiv' class='popupContainers'>").appendTo(popupBack);
    var cancelButton = $("<input type='button' id='cancelButton' class='popupButtons' value='" + sankoreLang.cancel + "'/>").appendTo(popupButtonsDiv);
    var okButton = $("<input type='button' id='okButton' class='popupButtons' value='" + sankoreLang.ok + "'/>").appendTo(popupButtonsDiv);
    
    /* -------------- A WORK WITH POPUP BUTTONS AND FIELDS ---------------*/
    
    $("#resultText, #expresionText").keyup(function(){
        if($(this).val()){
            $(this).css("background-color", "#ff9");
        }
    });
    
    cancelButton.click(function(){
        popupBack.hide("slow", function(){
            $("#resultText, #expresionText").val("")
            .css("background-color", "#ffc");
            shadowDiv.hide();
            shadowOver = false; 
            $(document).enableTextSelect();
        });        
    });
    
    okButton.click(function(){
        if(checkEmptyFields(expresionText) && checkEmptyFields(resultText)){
            popupBack.hide("slow", function(){
                shadowDiv.hide();
                shadowOver = false;
                addTask(expresionText.val(), resultText.val());
                exportToSankore();
                $("#resultText, #expresionText").val("")
                .css("background-color", "#ffc");
                $(document).enableTextSelect();
            })
        }
    });
    
    /* -------------- THE END OF WORK WITH POPUP BUTTONS AND FIELDS ---------------*/    
    
    // a work with dragging possibility    
    $("input:text").mouseover(function(){
        $(document).enableTextSelect(); 
    });
                        
    $("input:text").mouseout(function(){
        $(document).disableTextSelect(); 
    });
                    
    $(".readyTask, .editContainer").live("mousedown",function(event){
        if($("#wgt_display").hasClass("selected")){
            if(!shadowOver){
                dragElement = $(this);
                coords.left = event.pageX - $(this).position().left;
                coords.top = event.pageY - $(this).position().top;
                resizeObj.width = $(this).width();
                resizeObj.height = $(this).height();
            }
            $(document).disableTextSelect();
        }
    });
    
    $("body").mouseup(function(event){
        if($("#wgt_display").hasClass("selected")){
            if(!shadowOver){
                if (dragElement) {
                    exportToSankore();
                }
                dragElement = null;
                resizeObj.x = false;
                resizeObj.y = false;
            }
        }
    });
    
    $("body").mousemove(function(event){
        if(dragElement && !shadowOver && $("#wgt_display").hasClass("selected")){ 
            var top = event.pageY - coords.top;
            var left = event.pageX - coords.left;
            var bottom = top + dragElement.height();
            var right = left + dragElement.width();            
            if(resizeObj.x){
                if(right < ($(window).width() - 54))
                    dragElement.width(event.pageX - dragElement.position().left);
            }
            else if(resizeObj.y){   
                if(bottom < ($(window).height() - 54))
                    dragElement.height(event.pageY - dragElement.position().top);
            }
            else {
                if((top > 54) && (bottom < ($(window).height() - 54)))
                    dragElement.css("top",event.pageY - coords.top);
                if((left >= 54) && (right < ($(window).width() - 54))) 
                    dragElement.css("left", event.pageX - coords.left);
            }
        }
    });
    
    //closing item
    $(".closeItem").live("click", function(){
        if(!shadowOver){
            $(this).parent().remove();
            if($(".editContainer").size() > 0){            
                var prev = $(".editContainer:first");
                if((prev.position().left == 54) && (prev.position().top != 60))
                    prev.css("top", "60px");  
                var prevBottom = prev.position().top + prev.height(),
                prevLeft = prev.position().left;
                if(prev.next().length)
                    recursionCall(prevBottom, prevLeft, prev.next());
            }
        }
    });
    
    $(".taskContainer").live("keyup", function(){
        if($(".editContainer").size() > 1){            
            var prev = $(".editContainer:first"),
            prevBottom = prev.position().top + prev.height(),
            prevLeft = prev.position().left;
            recursionCall(prevBottom, prevLeft, prev.next());
        }
    })
    
    function recursionCall(prevBottom, prevLeft, curr){
        var curHeight = curr.height(),
        curLeft = curr.position().left;
        if(prevLeft == curLeft){
            if((prevBottom + 15 + curHeight) < ($(window).height() - 54))
                curr.css("top", prevBottom + 15 + "px");                        
            else
                curr.css("top", "100px").css("left", prevLeft + 255 + "px");            
        } else {
            if((prevBottom + 15 + curHeight) < ($(window).height() - 54))
                curr.css("top", prevBottom + 15 + "px").css("left", prevLeft + "px");           
            else
                curr.css("top", "100px").css("left", prevLeft + 255 + "px");
        }
        prevBottom = curr.position().top + curr.height(),
        prevLeft = curr.position().left;
        if(curr.next().length)
            recursionCall(prevBottom, prevLeft, curr.next());
    }     
    
    //$("#leftDiv,#rightDiv,#shadowDiv").css("height", $(window).height());
    popupBack.css("top", ($(window).height() - 138)*50/$(window).height() + "%");
    popupBack.css("left", ($(window).width() - 360)*50/$(window).width() + "%");
    
    $(window).resize(function(){
        if(!resizeFlag){
            if($("#wgt_edit").hasClass("selected")){
                if($(".editContainer").size() > 1){            
                    var prev = $(".editContainer:first"),
                    prevBottom = prev.position().top + prev.height(),
                    prevLeft = prev.position().left;
                    recursionCall(prevBottom, prevLeft, prev.next());
                }
            } else {
                var tmp_array = [];
                $(".readyTask").each(function(){
                    tmp_array.push($(this));
                });
                orderItems(tmp_array);
            }
            popupBack.css("top", ($(window).height() - 138)*50/$(window).height() + "%");
            popupBack.css("left", ($(window).width() - 360)*50/$(window).width() + "%");
        } else 
            resizeFlag = false;
    });
    
    if (window.widget) {
        window.widget.onleave = function(){
            exportToSankore();
            sankore.setPreference("by_style", $("#style_select").find("option:selected").val());
        }
    }
    
    // export data
    function exportToSankore(){        
               
        var arrayToExport = new Array();        
        if(mode){            
            if($(".editContainer").size() != 0){
                $(".editContainer").each(function(index, domElem){
                    var objToExport = {
                        data1:"",
                        data2:"",
                        width:0,
                        height:0,
                        top:0,
                        left:0
                    } 
                    objToExport.data1 = $(domElem).find(".readyTask").find(":first-child").text();
                    objToExport.data2 = $(domElem).find(".readyTask").find(":last-child").text();
                    objToExport.width = $(domElem).width();
                    objToExport.height = $(domElem).height();
                    objToExport.top = $(domElem).position().top - 40;
                    objToExport.left = $(domElem).position().left;
                    arrayToExport.push(objToExport);
                });
            }
        } else {      
            if($(".readyTask").size() != 0){
                $(".readyTask").each(function(index, domElem){
                    var objToExport = {
                        data1:"",
                        data2:"",
                        width:0,
                        height:0,
                        top:0,
                        left:0
                    } 
                    objToExport.data1 = $(domElem).find(":first-child").text();
                    objToExport.data2 = $(domElem).find(":last-child").text();
                    objToExport.width = $(domElem).width();
                    objToExport.height = $(domElem).height();
                    objToExport.top = $(domElem).position().top;
                    objToExport.left = $(domElem).position().left;
                    arrayToExport.push(objToExport);
                });
            }              
        }
        if(window.sankore)
            sankore.setPreference("blackYellowData", JSON.stringify(arrayToExport));
    }
}

//checking empty fields
function checkEmptyFields(field){
    if(field.val() == ""){
        field.css("background-color", "red");
        return false;
    } else {
        field.css("background-color", "#ff9");
        return true;
    }
}

//reload
function reloadItems(){
    if($("#wgt_edit").hasClass("selected"))
        $("#wgt_display").trigger("click");
    else{
        var tmp_array = [];
        $(".readyTask").each(function(){
            tmp_array.push($(this));
        });
        tmp_array = shuffle(tmp_array);
        orderItems(tmp_array);
    }    
        
}

//order items
function orderItems(items){
    var bottom = ($("#wgt_edit").hasClass("selected"))?85:45,
    lastItemLeft = 54; 
    for (var i in items){
        if((bottom + items[i].height()) < ($(window).height() - 54)){
            items[i].css("top", bottom + 15 + "px").css("left", lastItemLeft + "px").appendTo("#data");
            bottom += items[i].height() + 15;
        } else {
            bottom = 100;
            lastItemLeft += 255;
            items[i].css("top", bottom + "px").css("left", lastItemLeft + "px").appendTo("#data");
            bottom += items[i].height();
        }
    }        
}

//shuffles an array
function shuffle( arr )
{
    var pos, tmp;	
    for( var i = 0; i < arr.length; i++ )
    {
        pos = Math.round( Math.random() * ( arr.length - 1 ) );
        tmp = arr[pos];
        arr[pos] = arr[i];
        arr[i] = tmp;
    }
    return arr;
}

//adding a new task to the page
function addTask(expression, result){
    var lastItem = $(".editContainer:last"),
    lastItemPos = lastItem.length ? lastItem.position().top : 85,
    lastItemHeight = lastItem.length ? lastItem.height() : 0,
    lastItemLeft = lastItem.length ? lastItem.position().left : 54;
    var bottom = lastItemPos + lastItemHeight + 85;
    var editContent = $("<div class='editContainer'>");
    $("<div class='closeItem'>").appendTo(editContent);
    var main = $("<div class='readyTask'>");
    $("<div class='taskContainer' style='color: yellow;' contenteditable='true'>" + expression + "</div>").appendTo(main);
    $("<div class='taskContainer' style='color: black;' contenteditable='true'>"+ result + "</div>").appendTo(main);
    if(bottom < ($(window).height() - 54)){
        editContent.css("top", lastItemPos + lastItemHeight + 15 + "px").css("left", lastItemLeft + "px").appendTo("#data");
    } else {
        lastItemPos = 85;
        editContent.css("top", lastItemPos + 15 + "px").css("left", lastItemLeft + 255 + "px").appendTo("#data");
    }    
    main.appendTo(editContent);
}

//changing the style
function changeStyle(val){
    switch(val){
        case "1":
            $(".b_top_left").removeClass("btl_pad").removeClass("without_back");
            $(".b_top_center").removeClass("btc_pad").removeClass("without_back");
            $(".b_top_right").removeClass("btr_pad").removeClass("without_back");
            $(".b_center_left").removeClass("bcl_pad").removeClass("without_back");
            $(".b_center_right").removeClass("bcr_pad").removeClass("without_back");
            $(".b_bottom_right").removeClass("bbr_pad").removeClass("without_back");
            $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
            $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
            $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
            $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
            $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
            $("#wgt_name").removeClass("pad_color");
            $("#wgt_display").addClass("display_wood");
            $("#style_select").val(val);
            $("body, html").removeClass("without_radius").addClass("radius_ft");
            break;
        case "2":
            $(".b_top_left").addClass("btl_pad").removeClass("without_back");
            $(".b_top_center").addClass("btc_pad").removeClass("without_back");
            $(".b_top_right").addClass("btr_pad").removeClass("without_back");
            $(".b_center_left").addClass("bcl_pad").removeClass("without_back");
            $(".b_center_right").addClass("bcr_pad").removeClass("without_back");
            $(".b_bottom_right").addClass("bbr_pad").removeClass("without_back");
            $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
            $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
            $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
            $("#wgt_help").addClass("pad_color").addClass("pad_help");
            $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
            $("#wgt_name").addClass("pad_color");
            $("#wgt_display").removeClass("display_wood");
            $("#style_select").val(val);
            $("body, html").removeClass("without_radius").removeClass("radius_ft");
            break;
        case "3":
            $(".b_top_left").addClass("without_back").removeClass("btl_pad");
            $(".b_top_center").addClass("without_back").removeClass("btc_pad");
            $(".b_top_right").addClass("without_back").removeClass("btr_pad");
            $(".b_center_left").addClass("without_back").removeClass("bcl_pad");
            $(".b_center_right").addClass("without_back").removeClass("bcr_pad");
            $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
            $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
            $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
            $("#wgt_help").addClass("pad_color").addClass("pad_help");
            $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
            $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
            $("#wgt_name").addClass("pad_color");
            $("#wgt_display").removeClass("display_wood");
            $("#style_select").val(val);
            $("body, html").addClass("without_radius").removeClass("radius_ft");
            break;
    }
    if($("#wgt_edit").hasClass("selected"))
        $(document).enableTextSelect(); 
}