9

I want to understand the code of this JSON editor and modify it.

In directives.js, there is a piece of code that tries to construct templates:

var switchTemplate = 
    '<span ng-switch on="getType(val)" >'
        ... ...
        + '<span ng-switch-when="Boolean" type="boolean">'
            + '<input type="checkbox" ng-model="val" ng-model-onblur ng-change="child[key] = val">'
        + '</span>'
        ... ...
    + '</span>';

// display either "plus button" or "key-value inputs"
var addItemTemplate = 
'<div ng-switch on="showAddKey" class="block" >'
    + '<span ng-switch-when="true">';
        if (scope.type == "object"){
           // input key
            addItemTemplate += '<input placeholder="Name" type="text" ui-keyup="{\'enter\':\'addItem(child)\'}" '
                + 'class="form-control input-sm addItemKeyInput" ng-model="$parent.keyName" /> ';
        }
        addItemTemplate += 
        // value type dropdown
        '<select ng-model="$parent.valueType" ng-options="option for option in valueTypes" class="form-control input-sm"'
            + 'ng-init="$parent.valueType=\''+stringName+'\'" ui-keydown="{\'enter\':\'addItem(child)\'}"></select>'
        // input value
        + '<span ng-show="$parent.valueType == \''+stringName+'\'"> : <input type="text" placeholder="Value" '
            + 'class="form-control input-sm addItemValueInput" ng-model="$parent.valueName" ui-keyup="{\'enter\':\'addItem(child)\'}"/></span> '
        + '<span ng-show="$parent.valueType == \''+numberName+'\'"> : <input type="text" placeholder="Value" '
            + 'class="form-control input-sm addItemValueInput" ng-model="$parent.valueName" ui-keyup="{\'enter\':\'addItem(child)\'}"/></span> '
        // Add button
        + '<button type="button" class="btn btn-primary btn-sm" ng-click="addItem(child)">Add</button> '
        + '<button type="button" class="btn btn-default btn-sm" ng-click="$parent.showAddKey=false">Cancel</button>'
    + '</span>'
    + '<span ng-switch-default>'
        // plus button
        + '<button type="button" class="addObjectItemBtn" ng-click="$parent.showAddKey = true"><i class="glyphicon glyphicon-plus"></i></button>'
    + '</span>'
+ '</div>';

The first thing I don't understand is the purpose of ui-keyup="{\'enter\':\'addItem(child)\'}", given we have already ng-click="addItem(child)" for the Add button. If I delete it ui-keyup="{\'enter\':\'addItem(child)\'}", it seems that the code still works. The second thing I don't understand is ng-change="child[key] = val", where does key come from?

Actually what I want to realise is adding a handsontable type along with the existing types, so that people could fill in a table and add it to the JSON object:

enter image description here

Here is the entire project I have at the moment: plnkr, all the table-related modifications are in directives.js. By adding the following code in addItemTemplate, it does show the above table. But I don't know how to do the rest, i.e., adding the instance to the JSON object after pressing the Add button. Note that we could get the data of a handsontable instance from its hot-id like this.

`+ '<span ng-show="$parent.valueType == \'' +tableName+'\'"> : 
 <div ng-controller="MainCtrl as ctrl"><hot-table hot-id="mytable" datarows="ctrl.db.items" height="50" width="100"></hot-table></div>'`

Does anyone know what to do for the rest? The original code is hard to understand (it is a recursion), I have been struggling with this for several days (that's why I put a 100 bounty)...

  • Please add a jsbin link where you are trying to add a table template. Answering your questions: `ui-keyup` is most probably calls `addItem` method when `Enter` key is up; `key` comes from parent `ng-repeat`, for instance https://github.com/mb21/JSONedit/blob/gh-pages/js/directives.js#L256 – sbedulin Jan 06 '17 at 19:57
  • @sbedulin I just uploaded the version I have to plunker, and updated the OP. Thanks in advance for your help. –  Jan 07 '17 at 06:42
  • This code is very disturbing. My eyes are bleeding.... `ui-keyup="{\'enter\':\'addItem(child)\'}"` responds to Enter and does the same thing as clicking the Add button with the mouse. `ng-change="child[key] = val"` updates the value in the array on the fly. – kuhnroyal Jan 09 '17 at 12:32
  • What is your goal with the table, a 2x2 table is nothing more than an object. – kuhnroyal Jan 09 '17 at 12:36
  • @kuhnroyal 1) why is `ui-keyup=...` needed given we have `... ng-click="addItem(child)">Add`? deleting `ui-keyup=...` does not seem to change anything. 2) i guess one reason why the code is hard to read is the way he codes the templates. Do you think it is a good idea to use `templateUrl` to dynamically construct those templates? 3) sometimes a 2x2 table is more convenient to enter than an object. For example, we could copy a table from google sheets, and paste directly into handsontable. Do you have any idea about how to advance? Thank you. –  Jan 10 '17 at 06:50
  • `ui-keyup` and `ng-click` respond to different events, one keyboard events and one mouse clicks , I don't know if you need both, that's up to you. I would start with restructuring the code with some angular best practices in mind. – kuhnroyal Jan 10 '17 at 11:08
  • So do you think if it is possible (and a best practice) to use `templateUrl` to dynamically construct those templates? –  Jan 10 '17 at 13:35
  • @Thomas Using templateUrl is a good idea. It makes the code easy to read. – Iman Sedighi Jan 14 '17 at 07:55

1 Answers1

2

ui-keyup detects pressing Enter key on keyboard, while ng-click detects mouse click event.

The developer used both so the application can detect events by both mouse and keyboard. This is a best practice to write accessible applications. Some people with disabilities can't work with a mouse but they can work with a keyboard. Also, some other people prefer to use a keyboard to do some actions faster.

Certain users navigate the internet using the keyboard rather than the mouse. Expert “power” users prefer keyboard commands for efficiency, while users with certain disabilities have no choice but to use the keyboard. For example, people with a motor impairment have difficulty with the fine motor movements required for using a mouse; blind users rely on assistive technology such as screen readers and can’t see where to click the mouse.

Even the most fancy or wonderful site is completely useless to someone who cannot access its controls and interact with it. Keyboard-friendly websites make these interactions possible for users who cannot use the mouse. So it's a good practice to detect both click and key up events.

Iman Sedighi
  • 7,624
  • 4
  • 48
  • 55