})
var el = document.createElement('div')
document.body.appendChild(el)
function render() {
var story = tree.select('story')
var colors = tree.select('colors').get()
var storyHTML = `<div style="font-size: 20px; margin: 20px">The story "<strong style="background-color:${tree.select('colors', story.select('color').get(), 'hexValue').get()}">${story.select('title').get()}</strong>" was written by "${story.select('author').get()}"</div>`
var colorsHTML = colors.reduce(function (acc, color) {
acc += `<div style="background: ${color.hexValue}; color: #fff; text-align:center; width: 120px; padding: 30px 0 30px 0; font-size: 20px; text-transform: uppercase; font-weight: bold; font-family: Helvetica; float:left; margin-left: 10px;"><strong>${color.colorName}</strong></div>`
return acc
}, '')
var content = storyHTML + colorsHTML
el.innerHTML = content
}
tree.on('update', render)
render()
window.tree = tree
baobabJsonEditor(tree)
states: ['states'],
view: ['view']
}
});
storageFacet.on('update', function() {
localStorage.setItem(
config.storageKey,
JSON.stringify(storageFacet.get())
);
});
// Bindings
tree.client = bindClient(tree);
bindFetching(tree);
tree.on(actions);
// Debugging
const EVENT_BLACK_LIST = new Set([
'update',
'get',
'select',
'invalid',
'buffer:change'
]);
tree.on(function(e){
if (!EVENT_BLACK_LIST.has(e.type))
console.log(
'[Event]',
e.type,
var model = function (controller) {
controller.on('modulesLoaded', function () {
initialState = tree.toJSON()
})
function onUpdate(event) {
var changes = event.data.paths.reduce(update, {})
controller.emit('flush', changes);
}
tree.on('update', onUpdate);
controller.on('change', function () {
tree.commit();
});
controller.on('reset', function () {
tree.set(initialState)
tree.commit();
var forcedChanges = createForcedChange(initialState, {})
controller.emit('flush', forcedChanges)
});
controller.on('seek', function (seek, recording) {
recording.initialState.forEach(function (state) {
tree.set(state.path, state.value)
});
tree.commit();
var forcedChanges = createForcedChange(tree.get(), {})
controller.emit('flush', forcedChanges)
});
return {
tree: tree,
logModel: function () {
return tree.get();
},
accessors: {
get: function (path) {
return tree.get(path);
},
toJSON: function () {
return tree.toJSON();
},
toJS: function (path) {
return tree.get(path);
},
serialize: function (path) {
return tree.serialize(path);
},
export: function () {
return tree.serialize();
},
keys: function (path) {
return Object.keys(tree.get(path));
},
findWhere: function (path, obj) {
var keysCount = Object.keys(obj).length;
return tree.get(path).filter(function (item) {
return Object.keys(item).filter(function (key) {
return key in obj && obj[key] === item[key];
}).length === keysCount;
}).pop();
}
},
mutators: {
set: function (path, value) {
tree.set(path, value);
},
import: function (newState) {
var newState = deepmerge(initialState, newState);
tree.set(newState);
},
unset: function (path, keys) {
if (keys) {
keys.forEach(function (key) {
tree.unset(path.concat(key));
})
} else {
tree.unset(path);
}
},
push: function (path, value) {
tree.push(path, value);
},
splice: function () {
var args = [].slice.call(arguments);
tree.splice.call(tree, args.shift(), args);
},
merge: function (path, value) {
tree.merge(path, value);
},
concat: function (path, value) {
tree.apply(path, function (existingValue) {
return existingValue.concat(value);
});
},
pop: function (path) {
var val;
tree.apply(path, function (existingValue) {
var copy = existingValue.slice();
val = copy.pop();
return copy;
});
return val;
},
shift: function (path) {
var val;
tree.apply(path, function (existingValue) {
var copy = existingValue.slice();
val = copy.shift();
return copy;
});
return val;
},
unshift: function (path, value) {
tree.unshift(path, value);
}
}
};
};