10

RangeInspector

NumberInspector  |  StringInspector

Objective
  • Responder
    • View
      • Inspector
        • NumberInspector
          • RangeInspector
Objective.js
32

Move the ball of the slider to the left or to the right to change the font size of the text.

RangeInspector.js
  1. function RangeInspector(value = 0, options = false) {
  2.     NumberInspector.call(this, value, options);
  3.  
  4.     options = options || {};
  5.  
  6.     let fixed = options.fixed;
  7.  
  8.     if (typeof fixed === 'undefined')
  9.         fixed = false;
  10.     else {
  11.         if (!Number.isInteger(fixed))
  12.             throw new TypeError();
  13.         if (fixed < 0)
  14.             throw new RangeError();
  15.     }
  16.  
  17.     this._fixed = fixed;
  18.  
  19.     this._outputWidget = null;
  20. }
  21.  
  22. RangeInspector.prototype = Object.create(NumberInspector.prototype);
  23.  
  24. Object.defineProperty(RangeInspector.prototype, 'constructor', { value: RangeInspector, enumerable: false, writable: true });
  25.  
  26. RangeInspector.prototype.resetWidget = function() {
  27.     NumberInspector.prototype.resetWidget.call(this);
  28.  
  29.     if (this._outputWidget)
  30.         this._outputWidget.value = this._fixed !== false ? this._value.toFixed(this._fixed) : this._value;
  31.  
  32.     return this;
  33. };
  34.  
  35. RangeInspector.prototype.setWidget = function(w) {
  36.     NumberInspector.prototype.setWidget.call(this, w);
  37.  
  38.     if (this._widget.id) {
  39.         this._outputWidget = document.querySelector(`output[for="${this._widget.id}"]`);
  40.  
  41.         if (this._outputWidget)
  42.             this._widget.addEventListener('change', () => this._outputWidget.value = this._fixed !== false ? this._value.toFixed(this._fixed) : this._value);
  43.     }
  44.  
  45.     return this;
  46. };
Test
testRangeInspector.phtml
  1. <?php $text='Objective.js'; ?>
  2. <?php $font='Roboto'; ?>
  3. <?php $fontSize=32; ?>
  4. <?php $color='#333'; ?>
  5. <?php $bg='#fd1'; ?>
  6. <?php $min=10; ?>
  7. <?php $max=40; ?>
  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>
  5. <span>
  6. <i class="fas fa-fw fa-text-height small"></i>
  7. <input id="text_fontsize" type="range" min="<?php echo $min; ?>" max="<?php echo $max; ?>" step="1" value="<?php echo $fontSize; ?>"/>
  8. <output for="text_fontsize"><?php echo $fontSize; ?></output>
  9. </span>
  10. </div>
  11. </div>
  12. </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/NumberInspector.js'); ?>
  6. <?php head('javascript', '/objectivejs/RangeInspector.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.fontSize = `${sender.get()}px`;
  18.  
  19.     return true;
  20. }
  1. const inspector = new RangeInspector(<?php echo $fontSize; ?>, { min: <?php echo $min; ?>, max: <?php echo $max; ?> });
  2.  
  3. const container = document.querySelector('#<?php echo $id; ?>');
  4.  
  5. const display = container.querySelector('.test_display');
  6.  
  7. inspector.setManagedWidget(container.querySelector('#text_fontsize')).resetWidget();
  8.  
  9. const tester = new Tester(display, inspector);
SEE ALSO

Inspector, NumberInspector

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