Add a table type to a JSON editor

Question

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:

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)...

Answer 1

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.