14

SequenceInspector

Imageinspector  |  SetOfInspector

Objective
  • Responder
    • View
      • Inspector
        • SequenceInspector
Objective.js
I

Type in Hello! and press Enter. The length of the text is limited to 12 characters. Try entering <b>Bold</b>. HTML tags are escaped. Select a character font in the list. Check italic I to change the appearance of the text. NOTE: The fonts by Google are downloaded on demand.

In the console of the browser, lock the whole interface by blocking the inspector:

inspector.disable()

Unlock the interface:

inspector.enable()

Display the value of the inspector:

inspector.get()
Object { "font": "Open Sans", "text": "Objective.js", "italic": false }
SequenceInspector.js
  1. function SequenceInspector(inspectors) {
  2.     Inspector.call(this);
  3.  
  4.     for (let p in inspectors)
  5.         inspectors[p].addNextResponder(this);
  6.  
  7.     this._inspectors = inspectors;
  8. }
  9.  
  10. SequenceInspector.prototype = Object.create(Inspector.prototype);
  11.  
  12. Object.defineProperty(SequenceInspector.prototype, 'constructor', { value: SequenceInspector, enumerable: false, writable: true });
  13.  
  14. SequenceInspector.prototype.get = function() {
  15.     let value = {};
  16.  
  17.     for (let p in this._inspectors)
  18.         value[p] = this._inspectors[p].get();
  19.  
  20.     return value;
  21. };
  22.  
  23. SequenceInspector.prototype.set = function(val) {
  24.     for (let p in val)
  25.         if (! this._inspectors[p].set(val[p]))
  26.             return false;
  27.  
  28.     return true;
  29. };
  30.  
  31. SequenceInspector.prototype.reset = function() {
  32.     for (let p in this._inspectors)
  33.         if (! this._inspectors[p].reset())
  34.             return false;
  35.  
  36.     return true;
  37. };
  38.  
  39. SequenceInspector.prototype.disable = function() {
  40.     for (let p in this._inspectors)
  41.         this._inspectors[p].disable();
  42.  
  43.     return this;
  44. };
  45.  
  46. SequenceInspector.prototype.enable = function() {
  47.     for (let p in this._inspectors)
  48.         this._inspectors[p].enable();
  49.  
  50.     return this;
  51. };
  52.  
  53. SequenceInspector.prototype.inspectorFor = function(p) {
  54.     return this._inspectors[p];
  55. };
  56.  
  57. SequenceInspector.prototype.inspectorValueChanged = function(sender) {
  58.     this.nextRespondTo('inspectorValueChanged', this);
  59.  
  60.     return true;
  61. };
  62.  
  63. SequenceInspector.prototype.resetWidget = function() {
  64.     for (let p in this._inspectors)
  65.         this._inspectors[p].resetWidget();
  66.  
  67.     return this;
  68. };
  69.  
  70. SequenceInspector.prototype.setWidget = function(w) {
  71.     View.prototype.setWidget.call(this, w);
  72.  
  73.     return this;
  74. };
  75.  
  76. SequenceInspector.prototype.destroyWidget = function() {
  77.     for (let p in this._inspectors)
  78.         this._inspectors[p].destroyWidget();
  79.  
  80.     View.prototype.destroyWidget.call(this);
  81.  
  82.     return this;
  83. };
Test
testSequenceInspector.phtml
  1. <?php $text='Objective.js'; ?>
  2. <?php $fontlist=array('Acme', 'Fugaz One', 'Inconsolata', 'Lobster', 'Long Cang', 'Modak', 'Open Sans', 'Play', 'Slackey'); ?>
  3. <?php $font='Open Sans'; ?>
  4. <?php $fontSize=32; ?>
  5. <?php $color='#333'; ?>
  6. <?php $bg='#fd1'; ?>
  7. <?php $minlen=2; ?>
  8. <?php $maxlen=12; ?>
  1. <?php foreach($fontlist as $f): ?><?php head('font', $f); ?><?php endforeach; ?>
  1. <?php $id=uniqid('id'); ?>
  1. .test_display {
  2.     width: 240px;
  3.     height: 135px;
  4.     display: flex;
  5.     align-items: center;
  6.     justify-content: center;
  7.     background: <?php echo $bg; ?>;
  8.     color: <?php echo $color; ?>;
  9.     font-family: "<?php echo $font; ?>", sans-serif;
  10.     font-size: <?php echo $fontSize; ?>px;
  11.     margin-bottom: 10px;
  12.     border-radius: 3px;
  13. }
  1. <div id="<?php echo $id; ?>" class="noprint">
  2. <div class="test_display"><?php echo $text; ?></div>
  3. <div class="ojs">
  4. <div>
  5. <span>
  6. <input id="text_input" type="text" size="10" maxlength="<?php echo $maxlen; ?>" spellcheck="false"/>
  7. <select id="text_font" size="1">
  8. <?php foreach($fontlist as $f): ?>
  9. <option value="<?php echo $f; ?>"<?php if ($f == $font): ?> selected="selected"<?php  endif; ?>><?php echo $f; ?></option>
  10. <?php endforeach; ?>
  11. </select>
  12. <span class="nowrap"><input id="text_italic" type="checkbox"/><span class="btn_edit btn_i">I</span></span>
  13. </span>
  14. </div>
  15. </div>
  16. </div>
  1. <?php head('javascript', '/objectivejs/Objective.js'); ?>
  2. <?php head('javascript', '/objectivejs/Responder.js'); ?>
  3. <?php head('javascript', '/objectivejs/View.js'); ?>
  4. <?php head('javascript', '/objectivejs/Inspector.js'); ?>
  5. <?php head('javascript', '/objectivejs/SelectInspector.js'); ?>
  6. <?php head('javascript', '/objectivejs/StringInspector.js'); ?>
  7. <?php head('javascript', '/objectivejs/BooleanInspector.js'); ?>
  8. <?php head('javascript', '/objectivejs/SequenceInspector.js'); ?>
  1. function Tester(display, inspector) {
  2.     Responder.call(this);
  3.  
  4.     this._display = display;
  5.  
  6.     inspector.addNextResponder(this);
  7.  
  8.     this._inspector = inspector;
  9. }
  10.  
  11. Tester.prototype = Object.create(Responder.prototype);
  12.  
  13. Object.defineProperty(Tester.prototype, 'constructor', { value: Tester, enumerable: false, writable: true });
  14.  
  15. Tester.prototype.inspectorValueChanged = function(sender) {
  16.     if (sender === this._inspector) {
  17.         const {font, text, italic} = sender.get();
  18.  
  19.         this._display.style.fontStyle = italic ? 'italic' : 'normal';
  20.         this._display.style.fontFamily = `"${font}", sans-serif`;
  21.         this._display.innerHTML = `<span>${text}</span>`;
  22.     }
  23.  
  24.     return true;
  25. }
  1. const fontnames = [<?php echo implode(',', array_map(function($s) { return "'$s'"; }, $fontlist)); ?>];
  2.  
  3. const fontInspector = new SelectInspector('<?php echo $font; ?>', { tags: fontnames });
  4.  
  5. const textInspector = new StringInspector('<?php echo $text; ?>', { min: <?php echo $minlen; ?>, max: <?php echo $maxlen; ?>, trim: true, required: true, escapeHTML: true });
  6.  
  7. const italicInspector = new BooleanInspector();
  8.  
  9. const container = document.querySelector('#<?php echo $id; ?>');
  10.  
  11. const display = container.querySelector('.test_display');
  12.  
  13. fontInspector.setManagedWidget(container.querySelector('#text_font')).resetWidget();
  14. textInspector.setManagedWidget(container.querySelector('#text_input')).resetWidget();
  15. italicInspector.setManagedWidget(container.querySelector('#text_italic')).resetWidget();
  16.  
  17. const inspector = new SequenceInspector({ font: fontInspector, text: textInspector, italic: italicInspector });
  18.  
  19. inspector.setManagedWidget(container.querySelector('.ojs > div'));
SEE ALSO

Inspector, NumberInspector, StringInspector, SelectInspector, SetOfInspector

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].