x/merlin
Code Issues Proposed changes

Poor man's 2-way data binding between name and container keys

Browse Source 
If Array/FluidContainer has a Container with 'name' element as its
subitem, establish a kind of 2-way data binding between Array's label
for that subitem / FluidContainer's key and subitem's 'name' field.

In order to do proper event handling, working with labels has been refactored.

Change-Id: I53f834cb052adf5121e4adf398ed5aa5bd08174c
This commit is contained in:
Timur Sufiev 2014-09-30 23:40:51 +04:00
parent 34e0078b0d
commit 1dd2ebb743
1 changed files with 80 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
js/merlin.js
View File

@ -13,12 +13,18 @@
under the License. under the License.
*/ */
var workbook, var workbook;
counter = 0;
$(function() { $(function() {
function drawBaseNode(label, item, type, converter) { var __counter = 0;
function getNextCounter() {
__counter++;
return __counter;
}
function drawBaseNode($label, item, type, converter) {
var $item = $('<div></div>'), var $item = $('<div></div>'),
$label = $('<label></label>').text(label),
$input = $('<input>'), $input = $('<input>'),
$set = $('<button>').text('Set'); $set = $('<button>').text('Set');
converter = converter || function(x) { return x;}; converter = converter || function(x) { return x;};
@ -42,9 +48,8 @@ $(function() {
return $input; return $input;
} }
function drawSelectNode(label, item) { function drawSelectNode($label, item) {
var $item = $('<div></div>'), var $item = $('<div></div>'),
$label = $('<label></label>').text(label),
$set = $('<button>').text('Set'); $set = $('<button>').text('Set');
$set.click(function() { $set.click(function() {
item.set($input.val()); item.set($input.val());
@ -56,24 +61,29 @@ $(function() {
} }
function drawTextNode(label, item) { function drawTextNode($label, item) {
return drawBaseNode(label, item, 'text'); return drawBaseNode($label, item, 'text');
} }
function drawNumberNode(label, item) { function drawNumberNode($label, item) {
return drawBaseNode(label, item, 'number', Number); return drawBaseNode($label, item, 'number', Number);
} }
function drawBooleanNode(label, item) { function drawBooleanNode($label, item) {
return drawBaseNode(label, item, 'checkbox'); return drawBaseNode($label, item, 'checkbox');
} }
function drawArrayNode(label, item) { function createNewLabel(text) {
var labelId = 'label-' + getNextCounter();
return $('<label></label>').text(text).attr('id', labelId);
}
function drawArrayNode($label, item) {
var $item = $('<div class="inner-node"></div>'), var $item = $('<div class="inner-node"></div>'),
$label = $('<label></label>').text(label).toggleClass('expandable'),
$addAction = $('<button>').text('Add').toggleClass('container-action'), $addAction = $('<button>').text('Add').toggleClass('container-action'),
$container = $('<div></div>').hide(); $container = $('<div></div>').hide();
$label.toggleClass('expandable');
$item.append($label); $item.append($label);
$label.after($addAction); $label.after($addAction);
drawArray($container, item); drawArray($container, item);
@ -88,19 +98,31 @@ $(function() {
}); });
$addAction.click(function() { $addAction.click(function() {
item.push(); item.push();
var length = item.length(); var length = item.length(),
drawTypedNode($container, 'Element #'+length, item.get(length-1)); subItem = item.get(length-1),
nameEntity = extractNameSubItem(subItem),
label = 'Element #'+length,
$label = createNewLabel(label);
if ( nameEntity ) {
nameEntity.set(label);
nameEntity.on('change', function() {
var newName = this.get();
$label.text(newName);
});
}
drawTypedNode($container, $label, subItem);
}); });
return $item; return $item;
} }
function drawContainerNode(label, item) { function drawContainerNode($label, item) {
var $item = $('<div class="inner-node"></div>'), var $item = $('<div class="inner-node"></div>'),
labelId = 'label-' + counter, labelId = $label.attr('id'),
containerId = 'container-' + counter, containerId = 'container-' + labelId,
$label = $('<label></label>').attr('id', labelId).text(label).toggleClass('expandable'),
$container = $('<div></div>').attr('id', containerId).hide(); $container = $('<div></div>').attr('id', containerId).hide();
counter++; $label.toggleClass('expandable');
$item.append($label); $item.append($label);
drawContainer($container, item); drawContainer($container, item);
$item.append($container); $item.append($container);
@ -115,16 +137,19 @@ $(function() {
return $item; return $item;
} }
function drawFluidContainerNode(label, item) { function extractNameSubItem(item) {
return item.instanceof(Barricade.Container) && item.get('name');
}
function drawFluidContainerNode($label, item) {
var $item = $('<div class="inner-node"></div>'), var $item = $('<div class="inner-node"></div>'),
labelId = 'label-' + counter, labelId = $label.attr('id'),
containerId = 'container-' + counter, containerId = 'container-' + labelId,
$label = $('<label></label>').attr('id', labelId).text(label).toggleClass('expandable'),
$keyName = $('<input>'), $keyName = $('<input>'),
$addAction = $('<button>').text('Add').attr('disabled', true), $addAction = $('<button>').text('Add').attr('disabled', true),
$container = $('<div></div>').attr('id', containerId).hide(), $container = $('<div></div>').attr('id', containerId).hide(),
$typeSelector; $typeSelector;
counter++; $label.toggleClass('expandable');
$item.append($label); $item.append($label);
$item.append($keyName); $item.append($keyName);
if ( item.instanceof(types.base.AcceptsMixin) ) { if ( item.instanceof(types.base.AcceptsMixin) ) {
@ -143,13 +168,27 @@ $(function() {
} }
}); });
$addAction.click(function() { $addAction.click(function() {
var key = $keyName.val(), child, cls; var key = $keyName.val(),
$label = createNewLabel(key),
child, cls;
if ( item.instanceof(types.base.AcceptsMixin) ) { if ( item.instanceof(types.base.AcceptsMixin) ) {
cls = item.getValue($typeSelector.val()); cls = item.getValue($typeSelector.val());
child = cls.create(undefined, {id: key}); child = cls.create(undefined, {id: key});
} else {
child = item._elementClass.create(undefined, {id: key});
} }
item.push(child, {id: key}); item.push(child, {id: key});
drawTypedNode($container, key, item.getByID(key));
var nameEntity = extractNameSubItem(child);
if ( nameEntity ) {
nameEntity.set(key);
nameEntity.on('change', function() {
var newName = this.get();
child.setID(newName);
$label.text(newName);
});
}
drawTypedNode($container, $label, child);
}); });
$label.click(function() { $label.click(function() {
$label.toggleClass('expanded'); $label.toggleClass('expanded');
@ -172,28 +211,28 @@ $(function() {
}); });
} }
function drawTypedNode($canvas, label, item) { function drawTypedNode($canvas, $label, item) {
var $node; var $node;
if ( item.instanceof(Barricade.Enumerated) ) { if ( item.instanceof(Barricade.Enumerated) ) {
$node = drawSelectNode(label, item); $node = drawSelectNode($label, item);
$canvas.append($node); $canvas.append($node);
} else if ( isPrimitiveType(item, Number) ) { } else if ( isPrimitiveType(item, Number) ) {
$node = drawNumberNode(label, item); $node = drawNumberNode($label, item);
$canvas.append($node); $canvas.append($node);
} else if ( isPrimitiveType(item, String) ) { } else if ( isPrimitiveType(item, String) ) {
$node = drawTextNode(label, item); $node = drawTextNode($label, item);
$canvas.append($node); $canvas.append($node);
} else if ( isPrimitiveType(item, Boolean) ) { } else if ( isPrimitiveType(item, Boolean) ) {
$node = drawBooleanNode(label, item); $node = drawBooleanNode($label, item);
$canvas.append($node); $canvas.append($node);
} else if ( item.instanceof(Barricade.Array) ) { } else if ( item.instanceof(Barricade.Array) ) {
$node = drawArrayNode(label, item); $node = drawArrayNode($label, item);
$canvas.append($node); $canvas.append($node);
} else if ( item.instanceof(Barricade.MutableObject) ) { } else if ( item.instanceof(Barricade.MutableObject) ) {
$node = drawFluidContainerNode(label, item); $node = drawFluidContainerNode($label, item);
$canvas.append($node); $canvas.append($node);
} else if ( item.instanceof(Barricade.Container) ) { } else if ( item.instanceof(Barricade.Container) ) {
$node = drawContainerNode(label, item); $node = drawContainerNode($label, item);
$canvas.append($node); $canvas.append($node);
} else { } else {
$node = $('<label></label>').text('Unknown elt'); $node = $('<label></label>').text('Unknown elt');
@ -204,16 +243,18 @@ $(function() {
function drawContainer($canvas, container) { function drawContainer($canvas, container) {
container.each(function(key, item) { container.each(function(key, item) {
drawTypedNode($canvas, key, item); var $label = createNewLabel(key);
drawTypedNode($canvas, $label, item);
}); });
} }
$('button#create-workbook').click(function() { $('button#create-workbook').click(function() {
var $controls = $('div#controls'); var $controls = $('div#controls'),
$label = createNewLabel('Mistral Workbook');
$controls.empty(); $controls.empty();
workbook = types.Mistral.Workbook.create(); workbook = types.Mistral.Workbook.create();
drawTypedNode($controls, 'Mistral Workbook', workbook).find('label').click(); drawTypedNode($controls, $label, workbook).find('label').click();
}); });
$('button#save-workbook').click(function() { $('button#save-workbook').click(function() {