7

BooleanInspector

Inspector  |  NumberInspector

Objective
  • Responder
    • View
      • Inspector
        • BooleanInspector
Objective.js
B I

Check or uncheck the options bold B and italic I to change the appearance of the text.

BooleanInspector.js
  1. function BooleanInspector(value = false) {
  2.     Inspector.call(this);
  3.  
  4.     this._value = value ? true : false;
  5. }
  6.  
  7. BooleanInspector.prototype = Object.create(Inspector.prototype);
  8.  
  9. Object.defineProperty(BooleanInspector.prototype, 'constructor', { value: BooleanInspector, enumerable: false, writable: true });
  10.  
  11. BooleanInspector.prototype.normalize = function(val) {
  12.     return val ? true : false;
  13. };
  14.  
  15. BooleanInspector.prototype.reset = function() {
  16.     if (!this._widget)
  17.         return false;
  18.  
  19.     this._value = this._widget.checked;
  20.  
  21.     return true;
  22. };
  23.  
  24. BooleanInspector.prototype.changeCallback = function(e) {
  25.     let val = e.target.checked;
  26.  
  27.     if (this._value !== val) {
  28.         this._value = val;
  29.  
  30.         this.respondTo('inspectorValueChanged', this);
  31.     }
  32. };
  33.  
  34. BooleanInspector.prototype.resetWidget = function() {
  35.     if (this._widget)
  36.         this._widget.checked = this._value;
  37.  
  38.     return this;
  39. };
Test
testBooleanInspector.phtml
  1. <?php $text='Objective.js'; ?>
  2. <?php $font='Roboto'; ?>
  3. <?php $fontSize=32; ?>
  4. <?php $color='#333'; ?>
  5. <?php $bg='#fd1'; ?>
  1. <?php head('font', $font); ?>
  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 class="options_panel">
  5. <span class="nowrap"><input type="checkbox"/><span class="btn_edit btn_b">B</span></span>
  6. <span class="nowrap"><input type="checkbox"/><span class="btn_edit btn_i">I</span></span>
  7. </div>
  8. </div>
  9. </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/BooleanInspector.js'); ?>
  1. function Tester(display, boldInspector, italicInspector) {
  2.     Responder.call(this);
  3.  
  4.     this._display = display;
  5.  
  6.     boldInspector.addNextResponder(this);
  7.  
  8.     this._boldInspector = boldInspector;
  9.  
  10.     italicInspector.addNextResponder(this);
  11.  
  12.     this._italicInspector = italicInspector;
  13. }
  14.  
  15. Tester.prototype = Object.create(Responder.prototype);
  16.  
  17. Object.defineProperty(Tester.prototype, 'constructor', { value: Tester, enumerable: false, writable: true });
  18.  
  19. Tester.prototype.inspectorValueChanged = function(sender) {
  20.     if (sender === this._boldInspector)
  21.         this._display.style.fontWeight = sender.get() === true ? 'bold' : 'normal';
  22.     else if (sender === this._italicInspector)
  23.         this._display.style.fontStyle = sender.get() === true ? 'italic' : 'normal';
  24.  
  25.     return true;
  26. }
  27.  
  28. Tester.prototype.reset = function() {
  29.     this._boldInspector.reset();
  30.     this._italicInspector.reset();
  31.  
  32.     this._display.style.fontWeight = this._boldInspector.get() === true ? 'bold' : 'normal';
  33.     this._display.style.fontStyle = this._italicInspector.get() === true ? 'italic' : 'normal';
  34.  
  35.     return this;
  36. }
  1. const boldInspector = new BooleanInspector(true);
  2. const italicInspector = new BooleanInspector();
  3.  
  4. const container = document.querySelector('#<?php echo $id; ?>');
  5.  
  6. const display = container.querySelector('.test_display');
  7.  
  8. const options = container.querySelector('.options_panel');
  9.  
  10. boldInspector.setManagedWidget(options.children[0].children[0]).resetWidget();
  11. italicInspector.setManagedWidget(options.children[1].children[0]).resetWidget();
  12.  
  13. const tester = new Tester(display, boldInspector, italicInspector);
  14.  
  15. tester.reset();
SEE ALSO

Inspector, NumberInspector, StringInspector, SelectInspector, OptionInspector, SelectionInspector, ImageInspector, ColorInspector

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