uchcode · July 15, 2016 04:55
diff --git a/circulation-hello-world.html b/circulation-hello-world.html
 <!DOCTYPE html>
 <html>
 <body>

 <h1>Circulation design pattern</h1>
 <h2>Hello world</h2>
 <h3 style="font-size:70%;">for chrome web browser.</h3>

 <div id="component"></div>
 <div id="application"></div>

 <script>
 'use strict';

 class Model {
  //
  //
 }

 class State {
  constructor() {
    this.started = false;
    this.finished = false;
  }
  isReady() {
    return (
         !this.started
      && !this.finished
    );
  }
  isCompleted() {
    return (
         this.started
      && this.finished
    );
  }
 }

 class Module {
  constructor() {
    this.model = new Model();
    this.state = new State();
  }
  present(data) {
    const {state} = this;
    if (data.started !== undefined) {
      state.started = data.started;
    }
    if (data.finished !== undefined) {
      state.finished = data.finished;
    }
  }
  render() {
    // do nothing.
    //
  }
  nap() {
    const {state} = this;
    if (!state.isReady() && !state.isCompleted()) {
      this.stop({});
    }
  }
  circle(data) {
    this.present(data);
    this.render();
    this.nap();// execute next action predicate
  }
  //
  init(data) {
    this.circle({started:false, finished:false});
    return false;
  }
  start(data) {
    this.circle({started:true});
    return false;
  }
  stop(data) {
    this.circle({finished:true});
    return false;
  }
 }

 class View {
  present(state, data) {
    var contents = '<div>oops... something went wrong, the system is in an invalid state</div>';
    if (state.isReady()) {
      contents = this.ready({});
    }
    if (state.isCompleted()) {
      contents = this.completed({});
    }
    if (!state.isReady() && !state.isCompleted()) {
      contents = '<div></div>';// this.ready();
    }
    return contents;
  }
  render(contents, id) {
    document.getElementById(id).innerHTML = contents;
    //
  }
  ready(data) {
    return `
      <div>
        <p>Ready?</p>
      </div>
    `;
  }
  completed(data) {
    return `
      <div>
        <p>Hello, welcome to the components.</p>
      </div>
    `;
  }
 }

 class Component extends Module {
  constructor(elementId, view) {
    super();
    this.elementId = elementId;
    this.view = view;
  }
  render() {
    const {state, view, elementId} = this;
    console.log(state);
    view.render( view.present(state, {}), elementId );
  }
 }

 //

 class ApplicationModel {
  //
  //
 }

 class ApplicationState {
  constructor() {
    this.started = false;
    this.finished = false;
  }
  isReady() {
    return (
         !this.started
      && !this.finished
    );
  }
  isCompleted() {
    return (
         this.started
      && this.finished
    );
  }
 }

 class ApplicationView {
  present(state, data) {
    var contents = '<div>oops... something went wrong, the system is in an invalid state</div>';
    if (state.isReady()) {
      contents = this.ready({});
    }
    if (state.isCompleted()) {
      contents = this.completed({});
    }
    if (!state.isReady() && !state.isCompleted()) {
      contents = '<div></div>';// this.ready();
    }
    return contents;
  }
  render(contents, id) {
    document.getElementById(id).innerHTML = contents;
    //
  }
  ready(data) {
    return `
      <div>
        <form onsubmit="javascript:return app.start({});">
          <input type="submit" value="Go">
        </form>
      </div>
    `;
  }
  completed(data) {
    return `
      <div>
        <form onsubmit="javascript:return app.init({});">
          <input type="submit" value="Reset">
        </form>
      </div>
    `;
  }
 }

 class Application {
  constructor() {
    this.model = new ApplicationModel();
    this.state = new ApplicationState();
    this.view = new ApplicationView();
    this.elementId = 'application';
    this.component = new Component('component', new View());
  }
  present(data) {
    const {state} = this;
    if (data.started !== undefined) {
      state.started = data.started;
    }
    if (data.finished !== undefined) {
      state.finished = data.finished;
    }
  }
  render() {
    const {state, view, elementId, component} = this;
    console.log(state);
    if (component.state.isReady()) {
      if (state.isReady()) {
        component.init({});
      }
      if (!state.isReady() && !state.isCompleted()) {
        component.start({});
      }
    }
    if (component.state.isCompleted()) {
      if (state.isReady()) {
        component.init({});
      }
    }
    view.render( view.present(state, {}), elementId );
  }
  nap() {
    const {state} = this;
    if (state.isCompleted()) {
      console.log('=============')
    }
    if (!state.isReady() && !state.isCompleted()) {
      this.stop({});
    }
  }
  circle(data) {
    this.present(data);
    this.render();
    this.nap();// execute next action predicate
  }
  //
  init(data) {
    this.circle({started:false, finished:false});
    return false;
  }
  start(data) {
    this.circle({started:true});
    return false;
  }
  stop(data) {
    this.circle({finished:true});
    return false;
  }
 }

 //
 const app = new Application();
 app.init();

 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<body>

	<h1>Circulation design pattern</h1>
	<h2>Hello world</h2>
	<h3 style="font-size:70%;">for chrome web browser.</h3>

	<div id="component"></div>
	<div id="application"></div>

	<script>
	'use strict';

	class Model {
	//
	//
	}

	class State {
	constructor() {
	this.started = false;
	this.finished = false;
	}
	isReady() {
	return (
	!this.started
	&& !this.finished
	);
	}
	isCompleted() {
	return (
	this.started
	&& this.finished
	);
	}
	}

	class Module {
	constructor() {
	this.model = new Model();
	this.state = new State();
	}
	present(data) {
	const {state} = this;
	if (data.started !== undefined) {
	state.started = data.started;
	}
	if (data.finished !== undefined) {
	state.finished = data.finished;
	}
	}
	render() {
	// do nothing.
	//
	}
	nap() {
	const {state} = this;
	if (!state.isReady() && !state.isCompleted()) {
	this.stop({});
	}
	}
	circle(data) {
	this.present(data);
	this.render();
	this.nap();// execute next action predicate
	}
	//
	init(data) {
	this.circle({started:false, finished:false});
	return false;
	}
	start(data) {
	this.circle({started:true});
	return false;
	}
	stop(data) {
	this.circle({finished:true});
	return false;
	}
	}

	class View {
	present(state, data) {
	var contents = '<div>oops... something went wrong, the system is in an invalid state</div>';
	if (state.isReady()) {
	contents = this.ready({});
	}
	if (state.isCompleted()) {
	contents = this.completed({});
	}
	if (!state.isReady() && !state.isCompleted()) {
	contents = '<div></div>';// this.ready();
	}
	return contents;
	}
	render(contents, id) {
	document.getElementById(id).innerHTML = contents;
	//
	}
	ready(data) {
	return `
	<div>
	<p>Ready?</p>
	</div>
	`;
	}
	completed(data) {
	return `
	<div>
	<p>Hello, welcome to the components.</p>
	</div>
	`;
	}
	}

	class Component extends Module {
	constructor(elementId, view) {
	super();
	this.elementId = elementId;
	this.view = view;
	}
	render() {
	const {state, view, elementId} = this;
	console.log(state);
	view.render( view.present(state, {}), elementId );
	}
	}

	//

	class ApplicationModel {
	//
	//
	}

	class ApplicationState {
	constructor() {
	this.started = false;
	this.finished = false;
	}
	isReady() {
	return (
	!this.started
	&& !this.finished
	);
	}
	isCompleted() {
	return (
	this.started
	&& this.finished
	);
	}
	}

	class ApplicationView {
	present(state, data) {
	var contents = '<div>oops... something went wrong, the system is in an invalid state</div>';
	if (state.isReady()) {
	contents = this.ready({});
	}
	if (state.isCompleted()) {
	contents = this.completed({});
	}
	if (!state.isReady() && !state.isCompleted()) {
	contents = '<div></div>';// this.ready();
	}
	return contents;
	}
	render(contents, id) {
	document.getElementById(id).innerHTML = contents;
	//
	}
	ready(data) {
	return `
	<div>
	<form onsubmit="javascript:return app.start({});">
	<input type="submit" value="Go">
	</form>
	</div>
	`;
	}
	completed(data) {
	return `
	<div>
	<form onsubmit="javascript:return app.init({});">
	<input type="submit" value="Reset">
	</form>
	</div>
	`;
	}
	}

	class Application {
	constructor() {
	this.model = new ApplicationModel();
	this.state = new ApplicationState();
	this.view = new ApplicationView();
	this.elementId = 'application';
	this.component = new Component('component', new View());
	}
	present(data) {
	const {state} = this;
	if (data.started !== undefined) {
	state.started = data.started;
	}
	if (data.finished !== undefined) {
	state.finished = data.finished;
	}
	}
	render() {
	const {state, view, elementId, component} = this;
	console.log(state);
	if (component.state.isReady()) {
	if (state.isReady()) {
	component.init({});
	}
	if (!state.isReady() && !state.isCompleted()) {
	component.start({});
	}
	}
	if (component.state.isCompleted()) {
	if (state.isReady()) {
	component.init({});
	}
	}
	view.render( view.present(state, {}), elementId );
	}
	nap() {
	const {state} = this;
	if (state.isCompleted()) {
	console.log('=============')
	}
	if (!state.isReady() && !state.isCompleted()) {
	this.stop({});
	}
	}
	circle(data) {
	this.present(data);
	this.render();
	this.nap();// execute next action predicate
	}
	//
	init(data) {
	this.circle({started:false, finished:false});
	return false;
	}
	start(data) {
	this.circle({started:true});
	return false;
	}
	stop(data) {
	this.circle({finished:true});
	return false;
	}
	}

	//
	const app = new Application();
	app.init();

	</script>

	</body>
	</html>