8
BooleanInspector
Objective
- Responder
- View
- Inspector
- BooleanInspector
- Inspector
- View
Check or uncheck the options bold B and italic I to change the appearance of the text.
- function BooleanInspector(value = false) {
- Inspector.call(this);
- this._value = value ? true : false;
- }
- BooleanInspector.prototype = Object.create(Inspector.prototype);
- Object.defineProperty(BooleanInspector.prototype, 'constructor', { value: BooleanInspector, enumerable: false, writable: true });
- BooleanInspector.prototype.normalize = function(val) {
- return val ? true : false;
- };
- BooleanInspector.prototype.reset = function() {
- if (!this._widget)
- return false;
- this._value = this._widget.checked;
- return true;
- };
- BooleanInspector.prototype.changeCallback = function(e) {
- let val = e.target.checked;
- if (this._value !== val) {
- this._value = val;
- this.respondTo('inspectorValueChanged', this);
- }
- };
- BooleanInspector.prototype.resetWidget = function() {
- if (this._widget)
- this._widget.checked = this._value;
- return this;
- };
Test
- <?php $text='Objective.js'; ?>
- <?php $font='Roboto'; ?>
- <?php $fontSize=32; ?>
- <?php $color='#333'; ?>
- <?php $bg='#fd1'; ?>
- <?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;
- }
- <div id="<?php echo $id; ?>" class="noprint">
- <div class="test_display"><?php echo $text; ?></div>
- <div class="ojs">
- <div class="options_panel">
- <span class="nowrap"><input type="checkbox"/><span class="btn_edit btn_b">B</span></span>
- <span class="nowrap"><input type="checkbox"/><span class="btn_edit btn_i">I</span></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/BooleanInspector.js'); ?>
- function Tester(display, boldInspector, italicInspector) {
- Responder.call(this);
- this._display = display;
- boldInspector.addNextResponder(this);
- this._boldInspector = boldInspector;
- italicInspector.addNextResponder(this);
- this._italicInspector = italicInspector;
- }
- 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._boldInspector)
- this._display.style.fontWeight = sender.get() === true ? 'bold' : 'normal';
- else if (sender === this._italicInspector)
- this._display.style.fontStyle = sender.get() === true ? 'italic' : 'normal';
- return true;
- }
- Tester.prototype.reset = function() {
- this._boldInspector.reset();
- this._italicInspector.reset();
- this._display.style.fontWeight = this._boldInspector.get() === true ? 'bold' : 'normal';
- this._display.style.fontStyle = this._italicInspector.get() === true ? 'italic' : 'normal';
- return this;
- }
- const boldInspector = new BooleanInspector(true);
- const italicInspector = new BooleanInspector();
- const container = document.querySelector('#<?php echo $id; ?>');
- const display = container.querySelector('.test_display');
- const options = container.querySelector('.options_panel');
- boldInspector.setManagedWidget(options.children[0].children[0]).resetWidget();
- italicInspector.setManagedWidget(options.children[1].children[0]).resetWidget();
- const tester = new Tester(display, boldInspector, italicInspector);
- tester.reset();
SEE ALSO
Inspector, NumberInspector, StringInspector, SelectInspector, OptionInspector, SelectionInspector, ImageInspector, ColorInspector
Comments