13
NumberInspector
Objective
- Responder
- View
- Inspector
- NumberInspector
- Inspector
- View
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.
- function NumberInspector(value = 0, options = false) {
- options = options || {};
- let min = options.min;
- let max = options.max;
- if (typeof value !== 'number')
- throw new TypeError();
- if (! (typeof min === 'undefined' || typeof min === 'number'))
- throw new TypeError();
- if (! (typeof max === 'undefined' || typeof max === 'number'))
- throw new TypeError();
- if (typeof min === 'number' && typeof max === 'number' && min > max)
- throw new RangeError();
- if (typeof min === 'number' && value < min)
- throw new RangeError();
- if (typeof max === 'number' && value > max)
- throw new RangeError();
- Inspector.call(this);
- this._min = min;
- this._max = max;
- this._value = value;
- }
- NumberInspector.prototype = Object.create(Inspector.prototype);
- Object.defineProperty(NumberInspector.prototype, 'constructor', { value: NumberInspector, enumerable: false, writable: true });
- Object.defineProperty(NumberInspector.prototype, 'min', {
- get: function() {
- return this._min;
- },
- set: function(min) {
- if (! (typeof min === 'undefined' || typeof min === 'number'))
- throw new TypeError();
- if (this._min !== min) {
- this._min = min;
- if (min !== undefined && this._value < min) {
- this._value = min;
- if (this.interfaced)
- this.resetWidget();
- }
- }
- }
- });
- Object.defineProperty(NumberInspector.prototype, 'max', {
- get: function() {
- return this._max;
- },
- set: function(max) {
- if (! (typeof max === 'undefined' || typeof max === 'number'))
- throw new TypeError();
- if (this._max !== max) {
- this._max = max;
- if (max !== undefined && this._value > max) {
- this._value = max;
- if (this.interfaced)
- this.resetWidget();
- }
- }
- }
- });
- NumberInspector.prototype.validate = function(val) {
- return typeof val === 'number';
- };
- NumberInspector.prototype.normalize = function(val) {
- if (this._min !== undefined && val < this._min)
- return this._min;
- if (this._max !== undefined && val > this._max)
- return this._max;
- return val;
- };
- NumberInspector.prototype.changeCallback = function(e) {
- let val = Number.parseFloat(e.target.value.trim());
- if (this.validate(val)) {
- val = this.normalize(val);
- if (this._value !== val) {
- this._value = val;
- this.respondTo('inspectorValueChanged', this);
- }
- }
- };
Test
- <?php $text='Objective.js'; ?>
- <?php $font='Roboto'; ?>
- <?php $fontSize=32; ?>
- <?php $color='#333'; ?>
- <?php $bg='#fd1'; ?>
- <?php $min=10; ?>
- <?php $max=40; ?>
- <?php head('font', $font); ?>
- <?php $id=uniqid('id'); ?>
- .test_display {
- width: 240px;
- height: 135px;
- display: flex;
- align-items: center;
- justify-content: center;
- background: <?php echo $bg; ?>;
- color: <?php echo $color; ?>;
- font-family: "<?php echo $font; ?>", sans-serif;
- font-size: <?php echo $fontSize; ?>px;
- margin-bottom: 10px;
- border-radius: 3px;
- }
- #text_fontsize {
- width: 3em;
- }
- <div id="<?php echo $id; ?>" class="noprint">
- <div class="test_display"><?php echo $text; ?></div>
- <div class="ojs">
- <div>
- <span>
- <i class="fas fa-text-height small"></i>
- <input id="text_fontsize" type="number" min="<?php echo $min; ?>" max="<?php echo $max; ?>" step="1" value="<?php echo $fontSize; ?>"/>
- </span>
- </div>
- </div>
- </div>
- <?php head('javascript', '/objectivejs/Objective.js'); ?>
- <?php head('javascript', '/objectivejs/Responder.js'); ?>
- <?php head('javascript', '/objectivejs/View.js'); ?>
- <?php head('javascript', '/objectivejs/Inspector.js'); ?>
- <?php head('javascript', '/objectivejs/NumberInspector.js'); ?>
- function Tester(display, inspector) {
- Responder.call(this);
- this._display = display;
- inspector.addNextResponder(this);
- this._inspector = inspector;
- }
- Tester.prototype = Object.create(Responder.prototype);
- Object.defineProperty(Tester.prototype, 'constructor', { value: Tester, enumerable: false, writable: true });
- Tester.prototype.inspectorValueChanged = function(sender) {
- if (sender === this._inspector)
- this._display.style.fontSize = `${sender.get()}px`;
- return true;
- }
- const inspector = new NumberInspector(<?php echo $fontSize; ?>, { min: <?php echo $min; ?>, max: <?php echo $max; ?> });
- const container = document.querySelector('#<?php echo $id; ?>');
- const display = container.querySelector('.test_display');
- inspector.setManagedWidget(container.querySelector('#text_fontsize')).resetWidget();
- const tester = new Tester(display, inspector);
SEE ALSO
Inspector, BooleanInspector, StringInspector, SelectInspector, OptionInspector, SelectionInspector, ImageInspector, ColorInspector, RangeInspector, DimensionInspector
Comments