16

NumberInspector

BooleanInspector  |  RangeInspector

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

Click in the input field. Enter a value between 10 and 40 to change the size of the text. NOTE: The navigator might display buttons to increase or decrease the numerical value.

NumberInspector.js
  1. function NumberInspector(value = 0, options = false) {
  2.     options = options || {};
  3.  
  4.     let min = options.min;
  5.     let max = options.max;
  6.  
  7.     if (typeof value !== 'number')
  8.         throw new TypeError();
  9.  
  10.     if (! (typeof min === 'undefined' || typeof min === 'number'))
  11.         throw new TypeError();
  12.  
  13.     if (! (typeof max === 'undefined' || typeof max === 'number'))
  14.         throw new TypeError();
  15.  
  16.     if (typeof min === 'number' && typeof max === 'number' && min > max)
  17.         throw new RangeError();
  18.  
  19.     if (typeof min === 'number' && value < min)
  20.         throw new RangeError();
  21.  
  22.     if (typeof max === 'number' && value > max)
  23.         throw new RangeError();
  24.  
  25.     Inspector.call(this);
  26.  
  27.     this._min = min;
  28.     this._max = max;
  29.  
  30.     this._value = value;
  31. }
  32.  
  33. NumberInspector.prototype = Object.create(Inspector.prototype);
  34.  
  35. Object.defineProperty(NumberInspector.prototype, 'constructor', { value: NumberInspector, enumerable: false, writable: true });
  36.  
  37. Object.defineProperty(NumberInspector.prototype, 'min', {
  38.     get:    function() {
  39.         return this._min;
  40.     },
  41.     set:    function(min) {
  42.         if (! (typeof min === 'undefined' || typeof min === 'number'))
  43.             throw new TypeError();
  44.  
  45.         if (this._min !== min) {
  46.             this._min = min;
  47.  
  48.             if (min !== undefined && this._value < min) {
  49.                 this._value = min;
  50.  
  51.                 if (this.interfaced)
  52.                     this.resetWidget();
  53.             }
  54.         }
  55.     }
  56. });
  57.  
  58. Object.defineProperty(NumberInspector.prototype, 'max', {
  59.     get:    function() {
  60.         return this._max;
  61.     },
  62.     set:    function(max) {
  63.         if (! (typeof max === 'undefined' || typeof max === 'number'))
  64.             throw new TypeError();
  65.  
  66.         if (this._max !== max) {
  67.             this._max = max;
  68.  
  69.             if (max !== undefined && this._value > max) {
  70.                 this._value = max;
  71.  
  72.                 if (this.interfaced)
  73.                     this.resetWidget();
  74.             }
  75.         }
  76.     }
  77. });
  78.  
  79. NumberInspector.prototype.validate = function(val) {
  80.     return typeof val === 'number';
  81. };
  82.  
  83. NumberInspector.prototype.normalize = function(val) {
  84.     if (this._min !== undefined && val < this._min)
  85.         return this._min;
  86.  
  87.     if (this._max !== undefined && val > this._max)
  88.         return this._max;
  89.  
  90.     return val;
  91. };
  92.  
  93. NumberInspector.prototype.changeCallback = function(e) {
  94.     let val = Number.parseFloat(e.target.value.trim());
  95.  
  96.     if (this.validate(val)) {
  97.         val = this.normalize(val);
  98.  
  99.         if (this._value !== val) {
  100.             this._value = val;
  101.  
  102.             this.respondTo('inspectorValueChanged', this);
  103.         }
  104.     }
  105. };
Test
  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. }
  14. #text_fontsize {
  15.     width: 3em;
  16. }
  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-text-height small"></i>
  7. <input id="text_fontsize" type="number" min="<?php echo $min; ?>" max="<?php echo $max; ?>" step="1" value="<?php echo $fontSize; ?>"/>
  8. </span>
  9. </div>
  10. </div>
  11. </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'); ?>
  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 NumberInspector(<?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, BooleanInspector, StringInspector, SelectInspector, OptionInspector, SelectionInspector, ImageInspector, ColorInspector, RangeInspector, DimensionInspector

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