static/kelmu.editor.js
function() {

      var data = window.kelmu.data[id];
      var elemData = data.definitions['step' + data.stepNumber][data.subStepNumber][data.selectedElementNumber];

      editor.find('.kelmu-editor-pane').remove();

      var arrowEditor = $('<div></div>').addClass('kelmu-arrow-editorr').addClass('kelmu-editor-pane');
      arrowEditor.appendTo(editor);

      arrowEditor.append($('<h4>Arrow</h4>').css('margin', '15px 0px'));

      idCounter += 1;

      // Set the current values
      addComponent('Size:', arrowEditor, 'kelmu-arrow-size', elemData.size, 'text', true);
      addComponent('Width:', arrowEditor, 'kelmu-arrow-width', elemData.width, 'text');
      addComponent('Color:', arrowEditor, 'kelmu-arrow-color', elemData.arrow, 'text');
      addComponent('With sound:', arrowEditor, 'kelmu-arrow-sound-option', elemData.soundOption, 'text');

      // Save the modified properties
      var saveArrow = function() {
        elemData.size = arrowEditor.find('.kelmu-arrow-size').val() || window.kelmu.defaults.arrow.size;
        elemData.width = arrowEditor.find('.kelmu-arrow-width').val() || window.kelmu.defaults.arrow.width;
        elemData.arrow = arrowEditor.find('.kelmu-arrow-color').val() || window.kelmu.defaults.arrow.arrow;
        elemData.soundOption = arrowEditor.find('.kelmu-arrow-sound-option').val() || window.kelmu.defaults.arrow.soundOption;
        window.kelmu.data[id].actions.update();
        updateView(true, true);
        notifyModifications();
      };

      arrowEditor.find('input').keyup(saveArrow);

      var buttonContainer = $('<div></div>').appendTo(arrowEditor);

      createRemoveButton().appendTo(buttonContainer);

      // Save the modified properties
      $('<button></button>').text('Make default').addClass('btn').appendTo(buttonContainer).click(function(e) {
        e.preventDefault();
        window.kelmu.defaults.arrow.width = arrowEditor.find('.kelmu-arrow-width').val() || arrowDefaults.width;
        window.kelmu.defaults.arrow.arrow = arrowEditor.find('.kelmu-arrow-color').val() || arrowDefaults.arrow;
        window.kelmu.defaults.arrow.size = arrowEditor.find('.kelmu-arrow-size').val() || arrowDefaults.size;
        window.kelmu.defaults.arrow.soundOption = arrowEditor.find('.kelmu-arrow-sound-option').val() || arrowDefaults.soundOption;
      });

    }
function() {

      var data = window.kelmu.data[id];
      var elemData = data.definitions['step' + data.stepNumber][data.subStepNumber][data.selectedElementNumber];

      editor.find('.kelmu-editor-pane').remove();

      var arrowEditor = $('<div></div>').addClass('kelmu-arrow-editorr').addClass('kelmu-editor-pane');
      arrowEditor.appendTo(editor);

      arrowEditor.append($('<h4>Arrow</h4>').css('margin', '15px 0px'));

      idCounter += 1;

      // Set the current values
      addComponent('Size:', arrowEditor, 'kelmu-arrow-size', elemData.size, 'text', true);
      addComponent('Width:', arrowEditor, 'kelmu-arrow-width', elemData.width, 'text');
      addComponent('Color:', arrowEditor, 'kelmu-arrow-color', elemData.arrow, 'text');
      addComponent('With sound:', arrowEditor, 'kelmu-arrow-sound-option', elemData.soundOption, 'text');

      // Save the modified properties
      var saveArrow = function() {
        elemData.size = arrowEditor.find('.kelmu-arrow-size').val() || window.kelmu.defaults.arrow.size;
        elemData.width = arrowEditor.find('.kelmu-arrow-width').val() || window.kelmu.defaults.arrow.width;
        elemData.arrow = arrowEditor.find('.kelmu-arrow-color').val() || window.kelmu.defaults.arrow.arrow;
        elemData.soundOption = arrowEditor.find('.kelmu-arrow-sound-option').val() || window.kelmu.defaults.arrow.soundOption;
        window.kelmu.data[id].actions.update();
        updateView(true, true);
        notifyModifications();
      };

      arrowEditor.find('input').keyup(saveArrow);

      var buttonContainer = $('<div></div>').appendTo(arrowEditor);

      createRemoveButton().appendTo(buttonContainer);

      // Save the modified properties
      $('<button></button>').text('Make default').addClass('btn').appendTo(buttonContainer).click(function(e) {
        e.preventDefault();
        window.kelmu.defaults.arrow.width = arrowEditor.find('.kelmu-arrow-width').val() || arrowDefaults.width;
        window.kelmu.defaults.arrow.arrow = arrowEditor.find('.kelmu-arrow-color').val() || arrowDefaults.arrow;
        window.kelmu.defaults.arrow.size = arrowEditor.find('.kelmu-arrow-size').val() || arrowDefaults.size;
        window.kelmu.defaults.arrow.soundOption = arrowEditor.find('.kelmu-arrow-sound-option').val() || arrowDefaults.soundOption;
      });

    }
function ( ) { var data = window . kelmu . data [ id ] ; var elemData = data . definitions [ 'step' + data . stepNumber ] [ data . subStepNumber ] [ data . selectedElementNumber ] ; editor . find ( '.kelmu-editor-pane' ) . remove ( ) ; var arrowEditor = $ ( '<div></div>' ) . addClass ( 'kelmu-arrow-editorr' ) . addClass ( 'kelmu-editor-pane' ) ; arrowEditor . appendTo ( editor ) ; arrowEditor . append ( $ ( '<h4>Arrow</h4>' ) . css ( 'margin' , '15px 0px' ) ) ; idCounter += 1 ; // Set the current values addComponent ( 'Size:' , arrowEditor , 'kelmu-arrow-size' , elemData . size , 'text' , true ) ; addComponent ( 'Width:' , arrowEditor , 'kelmu-arrow-width' , elemData . width , 'text' ) ; addComponent ( 'Color:' , arrowEditor , 'kelmu-arrow-color' , elemData . arrow , 'text' ) ; addComponent ( 'With sound:' , arrowEditor , 'kelmu-arrow-sound-option' , elemData . soundOption , 'text' ) ; // Save the modified properties var saveArrow = function ( ) { elemData . size = arrowEditor . find ( '.kelmu-arrow-size' ) . val ( ) || window . kelmu . defaults . arrow . size ; elemData . width = arrowEditor . find ( '.kelmu-arrow-width' ) . val ( ) || window . kelmu . defaults . arrow . width ; elemData . arrow = arrowEditor . find ( '.kelmu-arrow-color' ) . val ( ) || window . kelmu . defaults . arrow . arrow ; elemData . soundOption = arrowEditor . find ( '.kelmu-arrow-sound-option' ) . val ( ) || window . kelmu . defaults . arrow . soundOption ; window . kelmu . data [ id ] . actions . update ( ) ; updateView ( true , true ) ; notifyModifications ( ) ; } ; arrowEditor . find ( 'input' ) . keyup ( saveArrow ) ; var buttonContainer = $ ( '<div></div>' ) . appendTo ( arrowEditor ) ; createRemoveButton ( ) . appendTo ( buttonContainer ) ; // Save the modified properties $ ( '<button></button>' ) . text ( 'Make default' ) . addClass ( 'btn' ) . appendTo ( buttonContainer ) . click ( function ( e ) { e . preventDefault ( ) ; window . kelmu . defaults . arrow . width = arrowEditor . find ( '.kelmu-arrow-width' ) . val ( ) || arrowDefaults . width ; window . kelmu . defaults . arrow . arrow = arrowEditor . find ( '.kelmu-arrow-color' ) . val ( ) || arrowDefaults . arrow ; window . kelmu . defaults . arrow . size = arrowEditor . find ( '.kelmu-arrow-size' ) . val ( ) || arrowDefaults . size ; window . kelmu . defaults . arrow . soundOption = arrowEditor . find ( '.kelmu-arrow-sound-option' ) . val ( ) || arrowDefaults . soundOption ; } ) ; }
Creates the action editor pane for the selected arrow.
Creates the action editor pane for the selected arrow .