25

Model

Undo  |  ImageModel

Objective
  • Model
Model.js
  1. function Model(name = null) {
  2.     if (name !== null && !Validator.validateModelName(name))
  3.         throw new TypeError();
  4.  
  5.     this._name = name;
  6.  
  7.     this._value = undefined;
  8.     this._changed = false;
  9.  
  10.     this._undo = null;
  11.  
  12.     this._sync = false;
  13.     this._timeout = 0;
  14.  
  15.     this._timer = null;
  16. }
  17.  
  18. Model.prototype = Object.create(Objective.prototype);
  19.  
  20. Object.defineProperty(Model.prototype, 'constructor', { value: Model, enumerable: false, writable: true });
  21.  
  22. Object.defineProperty(Model.prototype, 'name', {
  23.     get:    function() {
  24.         return this._name;
  25.     }
  26. });
  27.  
  28. Object.defineProperty(Model.prototype, 'changed', {
  29.     get:    function() {
  30.         return this._changed;
  31.     },
  32.     set:    function(changed) {
  33.         this._changed = changed ? true : false;
  34.     }
  35. });
  36.  
  37. Model.prototype.get = function() {
  38.     return this._value;
  39. };
  40.  
  41. Model.prototype.set = function(val) {
  42.     if (this._undo)
  43.         this._undo.clear();
  44.  
  45.     for (let prop in this._value)
  46.         val[prop] = this.checkValue(prop, val[prop]);
  47.  
  48.     this._value = val;
  49.     this._changed = false;
  50.  
  51.     this.notify('modelSet', this);
  52.  
  53.     if (this._undo)
  54.         this.notify('modelUndoChanged', this);
  55.  
  56.     return this;
  57. };
  58.  
  59. Model.prototype.getValue = function(prop) {
  60.     return this._value[prop];
  61. };
  62.  
  63. Model.prototype.setValue = function(prop, val) {
  64.     val = this.checkValue(prop, val);
  65.  
  66.     if (this._value[prop] === val)
  67.         return this;
  68.  
  69.     if (this._undo)
  70.         this._undo.push((val) => this.setValue(prop, val), this._value[prop]);
  71.  
  72.     this._value[prop] = val;
  73.     this._changed = true;
  74.  
  75.     if (this._sync)
  76.         this.sync();
  77.  
  78.     this.notify('modelValueChanged', this, prop, val);
  79.  
  80.     if (this._undo)
  81.         this.notify('modelUndoChanged', this);
  82.  
  83.     return this;
  84. };
  85.  
  86. Model.prototype.validateValue = function(prop, val) {
  87.     return true;
  88. };
  89.  
  90. Model.prototype.normalizeValue = function(prop, val) {
  91.     return val;
  92. };
  93.  
  94. Model.prototype.checkValue = function(prop, val) {
  95.     return val === undefined || !this.validateValue(prop, val) ? this.getValue(prop) : this.normalizeValue(prop, val);
  96. };
  97.  
  98. Model.prototype.readIn = function() {
  99.     this.delegate('readIn', this);
  100.  
  101.     return this;
  102. };
  103.  
  104. Model.prototype.writeOut = function() {
  105.     this.delegate('writeOut', this);
  106.  
  107.     return this;
  108. };
  109.  
  110. Model.prototype.clearSave = function() {
  111.     this.delegate('clearSave', this);
  112.  
  113.     return this;
  114. };
  115.  
  116. Model.prototype.isSaved = function() {
  117.     return !this.changed && (this._delegate === undefined || this.delegate('isSaved', this) === true);
  118. };
  119.  
  120. Model.prototype.sync = function() {
  121.     if (this._timer)
  122.         return this;
  123.  
  124.     if (this.timeout > 0)
  125.         this._timer = window.setTimeout(() => { this.writeOut(); this._timer = null; }, this._timeout);
  126.     else
  127.         this.writeOut();
  128.  
  129.     return this;
  130. };
  131.  
  132. Model.prototype.haSsync = function() {
  133.     return this._sync;
  134. };
  135.  
  136. Model.prototype.enableSync = function(timeout = 0) {
  137.     if (!Number.isInteger(timeout))
  138.         throw new TypeError();
  139.  
  140.     if (timeout < 0)
  141.         throw new RangeError();
  142.  
  143.     this._timeout = timeout;
  144.     this._sync = true;
  145.  
  146.     return this;
  147. };
  148.  
  149. Model.prototype.disableSync = function() {
  150.     if (this._timer) {
  151.         window.clearTimeout(this._timer);
  152.  
  153.         this._timer = null;
  154.     }
  155.  
  156.     this._sync = false;
  157.  
  158.     return this;
  159. };
  160.  
  161. Model.prototype.hasUndo = function() {
  162.     return this._undo !== null;
  163. };
  164.  
  165. Model.prototype.enableUndo = function() {
  166.     if (this._undo === null)
  167.         this._undo = new Undo();
  168.  
  169.     return this;
  170. };
  171.  
  172. Model.prototype.disableUndo = function() {
  173.     if (this._undo !== null)
  174.         this._undo = null;
  175.  
  176.     return this;
  177. };
  178.  
  179. Model.prototype.undo = function() {
  180.     if (this._undo && this._undo.undo())
  181.         this.notify('modelUndoChanged', this);
  182.  
  183.     return this;
  184. };
  185.  
  186. Model.prototype.redo = function() {
  187.     if (this._undo && this._undo.redo())
  188.         this.notify('modelUndoChanged', this);
  189.  
  190.     return this;
  191. };
  192.  
  193. Model.prototype.canUndo = function() {
  194.     return this._undo && this._undo.undoLength > 0 ? true : false;
  195. };
  196.  
  197. Model.prototype.canRedo = function() {
  198.     return this._undo && this._undo.redoLength > 0 ? true : false;
  199. };
Test
testModel.phtml
  1. <?php head('javascript', '/objectivejs/Objective.js'); ?>
  2. <?php head('javascript', '/objectivejs/Model.js'); ?>
  3. <?php head('javascript', '/objectivejs/Undo.js'); ?>
  1. const model = new Model();
  2.  
  3. console.log(model.get());   // undefined
  4.  
  5. model.set({'color': '#cccccc'});
  6. console.log(model.get());   // #cccccc
  7.  
  8. model.enableUndo();
  9.  
  10. model.setValue('color', '#27aadb');
  11. console.log(model.get());   // #27aadb
  12. model.setValue('color', '#ec613c');
  13. console.log(model.get());   // #ec613c
  14.  
  15. model.undo();
  16. console.log(model.get());   // #27aadb
  17. model.redo();
  18. console.log(model.get());   // #ec613c

Display the page generated by the file testModel.phtmland check the trace in the console of the browser:

undefined
Object { color: "#cccccc" }
Object { color: "#27aadb" }
Object { color: "#ec613c" }
Object { color: "#27aadb" }
Object { color: "#ec613c" }
SEE ALSO

ModelCookieDelegate, ModelStorageDelegate, ClipModel, Undo, Validator

Comments

Your comment:
[p] [b] [i] [u] [s] [quote] [pre] [br] [code] [url] [email] strip help 2000

Enter a maximum of 2000 characters.
Improve the presentation of your text with the following formatting tags:
[p]paragraph[/p], [b]bold[/b], [i]italics[/i], [u]underline[/u], [s]strike[/s], [quote]citation[/quote], [pre]as is[/pre], [br]line break,
[url]http://www.izend.org[/url], [url=http://www.izend.org]site[/url], [email]izend@izend.org[/email], [email=izend@izend.org]izend[/email],
[code]command[/code], [code=language]source code in c, java, php, html, javascript, xml, css, sql, bash, dos, make, etc.[/code].