Objective.js

Objective

Objective.js

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;
};

<?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; ?>

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

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);

objectivejs.org