9
SelectInspector
Objective
- Responder
- View
- Inspector
- SelectInspector
- Inspector
- View
Select a character font in the list.
- function SelectInspector(value, options = false) {
- options = options || {};
- let tags = options.tags;
- if (typeof value !== 'string')
- throw new TypeError();
- if (! (Array.isArray(tags) && tags.length > 0 && tags.every((e) => typeof e === 'string')))
- throw new TypeError();
- if (tags.indexOf(value) == -1)
- throw new RangeError();
- Inspector.call(this);
- this._tags = tags;
- this._value = value;
- }
- SelectInspector.prototype = Object.create(Inspector.prototype);
- Object.defineProperty(SelectInspector.prototype, 'constructor', { value: SelectInspector, enumerable: false, writable: true });
- SelectInspector.prototype.validate = function(val) {
- return typeof val === 'string' && this._tags.indexOf(val) != -1;
- };
- SelectInspector.prototype.createWidget = function(options = false) {
- options = options || {};
- let htmlclass = options.htmlClass;
- const htmloptions = [];
- for (let opt of this._tags)
- htmloptions.push(`<option value="${opt}">${opt}</option>`);
- const html = `<select size="1"${htmlclass ? ` class="${htmlclass}"` : ''}>\n${htmloptions.join('\n')}\n</select>`;
- let template = document.createElement('template');
- template.innerHTML = html;
- let widget = template.content.children[0];
- this.setWidget(widget);
- return this;
- };
Test
- <?php $text='Objective.js'; ?>
- <?php $fontlist=array('Acme', 'Fugaz One', 'Inconsolata', 'Lobster', 'Long Cang', 'Modak', 'Roboto', 'Play', 'Slackey'); ?>
- <?php $font='Roboto'; ?>
- <?php $fontSize=32; ?>
- <?php $color='#333'; ?>
- <?php $bg='#fd1'; ?>
- <?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 class="options_panel">
- <?php if (true): ?>
- <select 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>
- <?php endif; ?>
- </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'); ?>
- 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.fontFamily = `"${sender.get()}", sans-serif`;
- return true;
- }
- const fontnames = [<?php echo implode(',', array_map(function($s) { return "'$s'"; }, $fontlist)); ?>];
- const inspector = new SelectInspector('<?php echo $font; ?>', { tags: fontnames });
- const container = document.querySelector('#<?php echo $id; ?>');
- const display = container.querySelector('.test_display');
- <?php if (true): ?>
- inspector.setManagedWidget(container.querySelector('select')).resetWidget();
- <?php else: ?>
- inspector.createManagedWidget(container.querySelector('.options_panel')).resetWidget();
- <?php endif; ?>
- const tester = new Tester(display, inspector);
SEE ALSO
Inspector, BooleanInspector, NumberInspector, StringInspector, OptionInspector, SelectionInspector, ImageInspector, ColorInspector
Comments