internal api sketches

_.md

[ Launch: internal api sketches ] 5589881 by enjalot

config.json

{"description":"internal api sketches","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/aAVJpS0.png"}

inlet.js

/*
 Proposed API
*/
model = new Tributary.Model({
});

//We want to live update javascript
//we create a model scoped to the inlet.js object
//which can look something like
/* {
  code: "var x...",
  filename: "inlet.js",
  type:"javascript"
} */
var jsmodel = model.at('inlet.js')
var jscontext = new Tributary.JSContext(jsmodel);

var jseditor = new CodeMirror()
//registering returns the event handler for changes made to the editor
var jsChange = jsmodel.register({
  setter: jseditor.setValue,
  getter: jseditor.getValue 
});
//when the code is edited by the user, tributary will get the latest
//state of the code from the editor and set it on the model
jseditor.on("change", jsChange);


var jsonmodel = model.at('name.json');
var jsoncontext = new JSONContext(jsonmodel)

//the jsoneditor has a slightly different api from codemirror
//but it works pretty much the same way
jsoneditor = new JSONEditor()
var jsonChange = jsonmodel.register({
  setter: jsoneditor.set,
  getter: jsoneditor.get
})
jsoneditor.editor.on("change", jsonChange)

//Let's have some data from somewhere else stored in name.json
//this creates nice control for downloading and redownloading data from a external source
//this should be a component
var jsonlink = new Tributary.JSONLink("name.json", "http://cooldata.json", jsonmodel);


/*
model.id
model.name
model.path: function() { return id; }

model.at: function(path) { }
model.on: function("change", path, cb ) { }
model.set function(path, value) { }
model.get function(path) { }

*/


//internal implementation sketches

Model = function () {
  
}



Model.prototype.register = function(options) {
  this.on('set', 'code', function() {
    this._setter = this.path();
    options.setter(this.get('code'))
  })
  return function changeCallback() {
    if(this._setter === this.path()) {
      this._setter = null;
    } else {
      this.set('code', options.getter());
    }
  }
}

//when anything in the overall model changes, it calls the execute functions of everyone
model.listen({
  "execute:pre": [jsoncontext, htmlcontext, csscontext]
, "execute": [jscontext, coffeecontext]
})
//each context calls listen to build up the event queues above
Model.listen = function(name, context) {
  events[name].push(context);
}


JSContext = function(model) {
  var context = function() {}
  var dispatch = d3.dispatch("change");

  //define the special control function
  tributary.$controls = function(value, options) {
    //replace range when controls change
    context.values[options.name] = value;
    //update code on control change options.pos 
    //use char based?
    
    context._changeFn()
  }
  console.logJack = function() {};
 
  var code;
  var parsed;
  function parse() { //esprima
    //this will go over the AST and change things like
    //console.log -> console.logJack and $controls -> tributary.$controls
  }
  
  //execute code
  context.execute = function() {
    parsed = parse()
    //new Function
  }
  
  model.root().listen("execute", context)
  return context;
}

Context = function(model) {
  var context = function() {}
  
  function execute() {
    context.parse();
    //can be:
    //evaluating coffeescript
    //setting css style on the page
    //set data on the model
  }
  context.execute = execute;
  function parse() {
    //can be:
    //compile coffeescript
    //compile stylus/LESS
    //turn csv/tsv -> json
  }
  
  model.root().listen("execute", context)
  //model.root().listen("execute:pre", context)
  //will be change in the future
  return context;
}