abulka

// Extract systems - pull info from model into component 'finalstr' field for later manipulation by other systems
// Tip - the variables receiving the component must be named exactly the same as the registered component name string

world.system('extract-model-ref', ['c_model_ref'], (entity, {c_model_ref}) => {
  c_model_ref.finalstr = c_model_ref.val
});
world.system('extract-multi-model-ref-system', ['c_multi_model_ref'], (entity, {c_multi_model_ref}) => {
  for (const c of c_multi_model_ref.refs)  // each 'c' is a ModelRef component 
    c.finalstr = c.val
});

abulka

const entity_welcome = world.entity('entity_welcome')
entity_welcome.setComponent('c_model_ref', new ModelRef(model, ['welcomemsg']))
entity_welcome.setComponent('c_gui_ref', new GuiControlRef($('#welcome'), 'div'))  // id of div to hold welcome message, top left
entity_welcome.setComponent('c_display_options', new DisplayOptions())

const entity_welcome_user = world.entity('entity_welcome_user')
entity_welcome_user.setComponent('c_multi_model_ref', new MultiModelRef(
  [
    new ModelRef(model, ['welcomemsg']),
    new ModelRef(model, ["user", "firstname"]),

abulka

//
// Components
//

class ModelRef extends NestedDictAccess {  // Reference to a shared model object
  constructor(model, keys) {
    super(model, keys)
    this.finalstr = "";
  }
}

abulka

class NestedDictAccess {  // Reference to a shared model object
    constructor(model, keys) {
      this.model = model;  // any object/dict
      this.keys = keys;  // ['a', 'b'] would refer to model.a.b
      this.finalstr = "";
    }
  
    // dynamically access or set nested dictionary keys
  
    get val() {

abulka

var model = {
  welcomemsg: "Welcome", 
  user: {
    firstname: "Sam", 
    surname: "Smith"
  }
}

abulka

class MediatorEditUserFirstName {
  constructor(user_model, id) {
    this.user_model = user_model
    this.gui_input = id
  }

  on_keychar_firstname(e) { this.user_model.firstname = $(e.target).val() }

  notify(event) {
    $(`input[name=${this.gui_input}]`).val(this.user_model.firstname)

abulka

// Observer Wiring for MediatorWelcomeUser
document.addEventListener("modified welcome", (event) => { mediator_welcome_user.notify(event) })
document.addEventListener("modified user", (event) =>    { mediator_welcome_user.notify(event) })

// as well as
document.addEventListener("display option change", (event) => { mediator_welcome_user.notify(event) })

abulka

class MediatorWelcomeUser {
  constructor(welcome_model, user_model, id) {
    this.welcome_model = welcome_model
    this.user_model = user_model
    this.gui_div = id
    this._uppercase_welcome = false
    this._uppercase_user = false
  }
  
  get uppercase_welcome() { 

abulka

//
// Models
//

model = {
  welcomemsg: "Welcome", 
  user: {
    firstname: "Sam", 
    surname: "Smith"
  }

abulka

    <form>
      <div class="row yell">
        <div id="welcome" class="column"></div>
        <div id="welcome-user" class="column bl"></div>
      </div>
      <br>
      Welcome Message (model): <input type="text" name="welcome"><br>
      <br>
      User (model): <input type="text" name="firstname"> <input type="text" name="surname">
      <br>