9

SelectInspector

Objective
  • Responder
    • View
      • Inspector
        • SelectInspector
Objective.js

Select a character font in the list.

  1. function SelectInspector(value, options = false) {
  2.     options = options || {};
  3.  
  4.     let tags = options.tags;
  5.  
  6.     if (typeof value !== 'string')
  7.         throw new TypeError();
  8.  
  9.     if (! (Array.isArray(tags) && tags.length > 0 && tags.every((e) => typeof e === 'string')))
  10.         throw new TypeError();
  11.  
  12.     if (tags.indexOf(value) == -1)
  13.         throw new RangeError();
  14.  
  15.     Inspector.call(this);
  16.  
  17.     this._tags = tags;
  18.  
  19.     this._value = value;
  20. }
  21.  
  22. SelectInspector.prototype = Object.create(Inspector.prototype);
  23.  
  24. Object.defineProperty(SelectInspector.prototype, 'constructor', { value: SelectInspector, enumerable: false, writable: true });
  25.  
  26. SelectInspector.prototype.validate = function(val) {
  27.     return typeof val === 'string' && this._tags.indexOf(val) != -1;
  28. };
  29.  
  30. SelectInspector.prototype.createWidget = function(options = false) {
  31.     options = options || {};
  32.  
  33.     let htmlclass = options.htmlClass;
  34.  
  35.     const htmloptions = [];
  36.  
  37.     for (let opt of this._tags)
  38.         htmloptions.push(`<option value="${opt}">${opt}</option>`);
  39.  
  40.     const html = `<select size="1"${htmlclass ? ` class="${htmlclass}"` : ''}>\n${htmloptions.join('\n')}\n</select>`;
  41.  
  42.     let template = document.createElement('template');
  43.  
  44.     template.innerHTML = html;
  45.  
  46.     let widget = template.content.children[0];
  47.  
  48.     this.setWidget(widget);
  49.  
  50.     return this;
  51. };
Test
  1. <?php $text='Objective.js'; ?>
  2. <?php $fontlist=array('Acme', 'Fugaz One', 'Inconsolata', 'Lobster', 'Long Cang', 'Modak', 'Roboto', 'Play', 'Slackey'); ?>
  3. <?php $font='Roboto'; ?>
  4. <?php $fontSize=32; ?>
  5. <?php $color='#333'; ?>
  6. <?php $bg='#fd1'; ?>
  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 class="options_panel">
  5. <?php if (true): ?>
  6. <select size="1">
  7. <?php foreach($fontlist as $f): ?>
  8. <option value="<?php echo $f; ?>"<?php if ($f == $font): ?> selected="selected"<?php  endif; ?>><?php echo $f; ?></option>
  9. <?php endforeach; ?>
  10. </select>
  11. <?php endif; ?>
  12. </div>
  13. </div>
  14. </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'); ?>
  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.         this._display.style.fontFamily = `"${sender.get()}", sans-serif`;
  18.  
  19.     return true;
  20. }
  1. const fontnames = [<?php echo implode(',', array_map(function($s) { return "'$s'"; }, $fontlist)); ?>];
  2.  
  3. const inspector = new SelectInspector('<?php echo $font; ?>', { tags: fontnames });
  4.  
  5. const container = document.querySelector('#<?php echo $id; ?>');
  6.  
  7. const display = container.querySelector('.test_display');
  8.  
  9. <?php if (true): ?>
  10. inspector.setManagedWidget(container.querySelector('select')).resetWidget();
  11. <?php else: ?>
  12. inspector.createManagedWidget(container.querySelector('.options_panel')).resetWidget();
  13. <?php endif; ?>
  14.  
  15. const tester = new Tester(display, inspector);
SEE ALSO

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