GazeTK

/*

 * Copyright 2015 Thies Pfeiffer and Dimitri Heil and Kevin Taron

 * Blinker is distributed under the terms of the GNU General Public License

 * 

 * This file is part of Blinker.

 * 

 * Blinker 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.

 * 

 * Blinker 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 Blinker. If not, see <http://www.gnu.org/licenses/>.

 */

jQuery(document).ready(function($) {

  jQuery('.save').click(function(event) {

    saveToSettings();

  });

});

self.port.on('getElements', function(htmlelements){ 

  showSettings(htmlelements); 

});

function showSettings(elements) {

  jQuery.each(elements, function(index, val) {

      var newEl = '<li>';  

      var elmodel = '';

      var eltype = '';

      jQuery.each(val, function(mi, mval) {

        switch(mi) {

            case "data-gaze-type":

              eltype = mval;

              break;

            case "data-gaze-model":

              elmodel = mval;

              break;

        }

      }); 

      // Attribut

      newEl += '<div class="deleteCross">&#xd7;</div>';

      newEl += '<label>HTML-Item: </label>';

      newEl += '<input class="elementname" type="text" value="' + index + '" />';

      // Type

      newEl += '<div class="gaze-type-cont tcont"><label>GAZE-Type</label>';

      newEl += '<select class="gaze-type">';

        newEl += getOptionElement('text', eltype);

        newEl += getOptionElement('action', eltype);

        newEl += getOptionElement('choice', eltype);

      newEl += '</select></div>';

      // Modell

      newEl += '<div class="gaze-model-cont tcont"><label>GAZE-Model</label>';

      newEl += '<select class="gaze-model">';

        newEl += getOptionElement('onscreen', elmodel);

        newEl += getOptionElement('piemenu', elmodel);

        newEl += getOptionElement('dwell', elmodel);

      newEl += '</select></div>';

      newEl += '</li>';

     jQuery('ol.settings').append(newEl);

  });

  $('.save').click(function(event) {

    saveToSettings();

  });

  $('.additem').click(function(event) {

    addSettings();

  });

  $('.deleteCross').click(function(event) {

    deleteSettings(this);

  });

  $('.resetToDef').click(function(event) {

    resetToDefault();

  });

}

function getOptionElement(value, selectedValue) {

  var OptionElement = '<option value="';

  OptionElement += value + '"';

  if(value == selectedValue) OptionElement += ' selected';

  OptionElement += '>';

  OptionElement += value;

  OptionElement += '</option>';

  return OptionElement;

}

function saveToSettings() {

  var htmlEles = {};

  jQuery('ol.settings li').each(function(index, el) {

    var inputField = jQuery(this).children('.elementname').val();

    var inputType = jQuery(this).children('.tcont').children('.gaze-type').children('option:selected').attr('value');

    var inputModel = jQuery(this).children('.tcont').children('.gaze-model').children('option:selected').attr('value');

    var htmlEle = {};

    htmlEle['data-gaze'] = 'true';

    htmlEle['data-gaze-type'] = inputType;

    htmlEle['data-gaze-model'] = inputModel;

    htmlEles[inputField] = htmlEle;

  });

  $.notify("Settings updated","success");

  self.port.emit("setElements", htmlEles);

  console.log("Save Options");

  console.log(htmlEles);

}

function addSettings() {

      var newEl = '<li>';  

      // Attribut

      newEl += '<div class="deleteCross">&#xd7;</div>';

      newEl += '<label>HTML-Item: </label>';

      newEl += '<input class="elementname" type="text" value="" />';

      // Type

      newEl += '<div class="gaze-type-cont tcont"><label>GAZE-Model</label>';

      newEl += '<select class="gaze-type">';

        newEl += getOptionElement('text', 'text');

        newEl += getOptionElement('action', 'text');

        newEl += getOptionElement('choice', 'text');

      newEl += '</select></div>';

      // Modell

      newEl += '<div class="gaze-model-cont tcont"><label>GAZE-Model</label>';

      newEl += '<select class="gaze-model">';

        newEl += getOptionElement('onscreen', 'onscreen');

        newEl += getOptionElement('piemenu', 'onscreen');

        newEl += getOptionElement('dwell', 'onscreen');

      newEl += '</select></div>';

      newEl += '</li>';

     jQuery('ol.settings').append(newEl);

      $('.deleteCross').click(function(event) {

        deleteSettings(this);

      });

}

function deleteSettings(element) {

  if (confirm('Do you want delete this item?')) {

    jQuery(element).parent().remove();

  }

}

function resetToDefault() {

  if (confirm('Do you want reset default settings?')) {

    htmlele = {

      a : {

        "data-gaze" : "true",

        "data-gaze-type" : "action",

        "data-gaze-model" : "onscreen"

      },

      button : {

        "data-gaze" : "true",

        "data-gaze-type" : "action",

        "data-gaze-model" : "onscreen"

      },

      img : {

        "data-gaze" : "true",

        "data-gaze-type" : "action",

        "data-gaze-model" : "onscreen"

      },

      audio: {

        "data-gaze" : "true",

        "data-gaze-type" : "action",

        "data-gaze-model" : "onscreen"

      },

      video: {

        "data-gaze" : "true",

        "data-gaze-type" : "action",

        "data-gaze-model" : "onscreen"

      },

      "input\[type=text\]": {

        "data-gaze" : "true",

        "data-gaze-type" : "text",

        "data-gaze-model" : "onscreen"

      },

      "input\[type=submit\]": {

        "data-gaze" : "true",

        "data-gaze-type" : "action",

        "data-gaze-model" : "onscreen"

      },

      "input\[type=reset\]": {

        "data-gaze" : "true",

        "data-gaze-type" : "action",

        "data-gaze-model" : "onscreen"

      },

      "input\[type=email\]": {

        "data-gaze" : "true",

        "data-gaze-type" : "text",

        "data-gaze-model" : "onscreen"

      },

      "input\[type=password\]": {

        "data-gaze" : "true",

        "data-gaze-type" : "text",

        "data-gaze-model" : "onscreen"

      },

      "select": {

        "data-gaze" : "true",

        "data-gaze-type" : "choice",

        "data-gaze-model" : "onscreen"

      },

    };

    self.port.emit("setElements", htmlele);

    location.reload(); 

  }

}