13
SequenceInspector
Objective
- Responder
- View
- Inspector
- SequenceInspector
- Inspector
- View
Type in Hello!
and press Enter. The length of the text is limited to 12 characters. Try entering <b>Bold</b>
. HTML tags are escaped.
Select a character font in the list.
Check italic I to change the appearance of the text.
NOTE: The fonts by Google are downloaded on demand.
In the console of the browser, lock the whole interface by blocking the inspector:
inspector.disable()
Unlock the interface:
inspector.enable()
Display the value of the inspector:
inspector.get()
Object { "font": "Open Sans", "text": "Objective.js", "italic": false }
- function SequenceInspector(inspectors) {
- Inspector.call(this);
- for (let p in inspectors)
- inspectors[p].addNextResponder(this);
- this._inspectors = inspectors;
- }
- SequenceInspector.prototype = Object.create(Inspector.prototype);
- Object.defineProperty(SequenceInspector.prototype, 'constructor', { value: SequenceInspector, enumerable: false, writable: true });
- SequenceInspector.prototype.get = function() {
- let value = {};
- for (let p in this._inspectors)
- value[p] = this._inspectors[p].get();
- return value;
- };
- SequenceInspector.prototype.set = function(val) {
- for (let p in val)
- if (! this._inspectors[p].set(val[p]))
- return false;
- return true;
- };
- SequenceInspector.prototype.reset = function() {
- for (let p in this._inspectors)
- if (! this._inspectors[p].reset())
- return false;
- return true;
- };
- SequenceInspector.prototype.disable = function() {
- for (let p in this._inspectors)
- this._inspectors[p].disable();
- return this;
- };
- SequenceInspector.prototype.enable = function() {
- for (let p in this._inspectors)
- this._inspectors[p].enable();
- return this;
- };
- SequenceInspector.prototype.inspectorFor = function(p) {
- return this._inspectors[p];
- };
- SequenceInspector.prototype.inspectorValueChanged = function(sender) {
- this.nextRespondTo('inspectorValueChanged', this);
- return true;
- };
- SequenceInspector.prototype.resetWidget = function() {
- for (let p in this._inspectors)
- this._inspectors[p].resetWidget();
- return this;
- };
- SequenceInspector.prototype.setWidget = function(w) {
- View.prototype.setWidget.call(this, w);
- return this;
- };
- SequenceInspector.prototype.destroyWidget = function() {
- for (let p in this._inspectors)
- this._inspectors[p].destroyWidget();
- View.prototype.destroyWidget.call(this);
- return this;
- };
Test
- <?php $text='Objective.js'; ?>
- <?php $fontlist=array('Acme', 'Fugaz One', 'Inconsolata', 'Lobster', 'Long Cang', 'Modak', 'Open Sans', 'Play', 'Slackey'); ?>
- <?php $font='Open Sans'; ?>
- <?php $fontSize=32; ?>
- <?php $color='#333'; ?>
- <?php $bg='#fd1'; ?>
- <?php $minlen=2; ?>
- <?php $maxlen=12; ?>
- <?php foreach($fontlist as $f): ?><?php head('font', $f); ?><?php endforeach; ?>
- <?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>
- <span>
- <input id="text_input" type="text" size="10" maxlength="<?php echo $maxlen; ?>" spellcheck="false"/>
- <select id="text_font" size="1">
- <?php foreach($fontlist as $f): ?>
- <option value="<?php echo $f; ?>"<?php if ($f == $font): ?> selected="selected"<?php endif; ?>><?php echo $f; ?></option>
- <?php endforeach; ?>
- </select>
- <span class="nowrap"><input id="text_italic" type="checkbox"/><span class="btn_edit btn_i">I</span></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/SelectInspector.js'); ?>
- <?php head('javascript', '/objectivejs/StringInspector.js'); ?>
- <?php head('javascript', '/objectivejs/BooleanInspector.js'); ?>
- <?php head('javascript', '/objectivejs/SequenceInspector.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) {
- const {font, text, italic} = sender.get();
- this._display.style.fontStyle = italic ? 'italic' : 'normal';
- this._display.style.fontFamily = `"${font}", sans-serif`;
- this._display.innerHTML = `<span>${text}</span>`;
- }
- return true;
- }
- const fontnames = [<?php echo implode(',', array_map(function($s) { return "'$s'"; }, $fontlist)); ?>];
- const fontInspector = new SelectInspector('<?php echo $font; ?>', { tags: fontnames });
- const textInspector = new StringInspector('<?php echo $text; ?>', { min: <?php echo $minlen; ?>, max: <?php echo $maxlen; ?>, trim: true, required: true, escapeHTML: true });
- const italicInspector = new BooleanInspector();
- const container = document.querySelector('#<?php echo $id; ?>');
- const display = container.querySelector('.test_display');
- fontInspector.setManagedWidget(container.querySelector('#text_font')).resetWidget();
- textInspector.setManagedWidget(container.querySelector('#text_input')).resetWidget();
- italicInspector.setManagedWidget(container.querySelector('#text_italic')).resetWidget();
- const inspector = new SequenceInspector({ font: fontInspector, text: textInspector, italic: italicInspector });
- inspector.setManagedWidget(container.querySelector('.ojs > div'));
SEE ALSO
Inspector, NumberInspector, StringInspector, SelectInspector, SetOfInspector
Comments