14

SelectionInspector

OptionInspector  |  ColorInspector

Objective
  • Responder
    • View
      • Inspector
        • SelectionInspector
Objective.js

Select the options of the text.

SelectionInspector.js
  1. function SelectionInspector(value, options = false) {
  2.     options = options || {};
  3.  
  4.     let tags = options.tags;
  5.  
  6.     value = value || [];
  7.  
  8.     if (! (Array.isArray(value) && tags.every((e) => typeof e === 'string')))
  9.         throw new TypeError();
  10.  
  11.     if (! (Array.isArray(tags) && tags.length > 0 && tags.every((e) => typeof e === 'string')))
  12.         throw new TypeError();
  13.  
  14.     for (let tag of value) {
  15.         if (tags.indexOf(tag) == -1)
  16.             throw new RangeError();
  17.     }
  18.  
  19.     Inspector.call(this);
  20.  
  21.     this._tags = tags;
  22.  
  23.     this._value = value;
  24.  
  25.     this._inputWidgets = null;
  26. }
  27.  
  28. SelectionInspector.prototype = Object.create(Inspector.prototype);
  29.  
  30. Object.defineProperty(SelectionInspector.prototype, 'constructor', { value: SelectionInspector, enumerable: false, writable: true });
  31.  
  32. SelectionInspector.prototype.validate = function(val) {
  33.     return typeof val === 'string' && this._tags.indexOf(val) != -1;
  34. };
  35.  
  36. SelectionInspector.prototype.reset = function() {
  37.     if (!this._inputWidgets)
  38.         return false;
  39.  
  40.     this._value = [];
  41.  
  42.     for (let tag in this._inputWidgets) {
  43.         if (this._inputWidgets[tag].checked)
  44.             this._value.push(tag);
  45.     }
  46.  
  47.     return true;
  48. };
  49.  
  50. SelectionInspector.prototype.changeCallback = function(e) {
  51.     let val = e.target.value;
  52.  
  53.     if (this.validate(val)) {
  54.         let i = this._value.indexOf(val);
  55.  
  56.         if (e.target.checked) {
  57.             if (i == -1)
  58.                 this._value.push(val);
  59.         }
  60.         else {
  61.             if (i != -1)
  62.                 this._value.splice(i, 1);
  63.         }
  64.  
  65.         this.respondTo('inspectorValueChanged', this);
  66.     }
  67. };
  68.  
  69. SelectionInspector.prototype.resetWidget = function() {
  70.     if (!this._inputWidgets)
  71.         return false;
  72.  
  73.     for (let tag in this._inputWidgets)
  74.         this._inputWidgets[tag].checked = this._value.indexOf(tag) != -1 ? true : false;
  75.  
  76.     return true;
  77. };
  78.  
  79. SelectionInspector.prototype.setWidget = function(w) {
  80.     Inspector.prototype.setWidget.call(this, w);
  81.  
  82.     this._inputWidgets  = {};
  83.  
  84.     for (let i of w.querySelectorAll('input[type="checkbox"]')) {
  85.         let value = i.attributes.value;
  86.  
  87.         if (value !== undefined) {
  88.             let tag = value.value;
  89.  
  90.             if (this._tags.indexOf(tag) != -1)
  91.                 this._inputWidgets[tag] = i;
  92.         }
  93.     }
  94.  
  95.     return this;
  96. };
Test
testSelectionInspector.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.     font-style: italic;
  12.     margin-bottom: 10px;
  13.     border-radius: 3px;
  14. }
  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" id="text_appearance_bold" name="text_appearance[]" value="bold"/><label for="text_appearance_bold"><span class="btn_edit btn_b">B</span></label></span>
  6. <span class="nowrap"><input type="checkbox" id="text_appearance_italic" name="text_appearance[]" value="italic"/><label for="text_appearance_italic"><span class="btn_edit btn_i">I</span></label></span>
  7. <span class="nowrap"><input type="checkbox" id="text_appearance_underline" name="text_appearance[]" value="underline"/><label for="text_appearance_underline"><span class="btn_edit btn_u">S</span></label></span>
  8. </div>
  9. </div>
  10. </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/SelectionInspector.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.         let options = sender.get();
  18.  
  19.         this._display.style.fontWeight = options.indexOf('bold') != -1 ? 'bold' : 'normal';
  20.         this._display.style.fontStyle = options.indexOf('italic') != -1 ? 'italic' : 'normal';
  21.         this._display.style.textDecoration = options.indexOf('underline') != -1 ? 'underline' : 'none';
  22.     }
  23.  
  24.     return true;
  25. }
  1. const inspector = new SelectionInspector(['italic'], {tags: ['bold', 'italic', 'underline']});
  2.  
  3. const container = document.querySelector('#<?php echo $id; ?>');
  4.  
  5. const display = container.querySelector('.test_display');
  6.  
  7. inspector.setManagedWidget(container.querySelector('.options_panel')).resetWidget();
  8.  
  9. const tester = new Tester(display, inspector);
SEE ALSO

Inspector, BooleanInspector, NumberInspector, StringInspector, SelectInspector, OptionInspector, 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].