17
SelectionInspector
Objective
- Responder
- View
- Inspector
- SelectionInspector
- Inspector
- View
Sélectionnez les options du texte.
- function SelectionInspector(value, options = false) {
- options = options || {};
- let tags = options.tags;
- value = value || [];
- if (! (Array.isArray(value) && tags.every((e) => typeof e === 'string')))
- throw new TypeError();
- if (! (Array.isArray(tags) && tags.length > 0 && tags.every((e) => typeof e === 'string')))
- throw new TypeError();
- for (let tag of value) {
- if (tags.indexOf(tag) == -1)
- throw new RangeError();
- }
- Inspector.call(this);
- this._tags = tags;
- this._value = value;
- this._inputWidgets = null;
- }
- SelectionInspector.prototype = Object.create(Inspector.prototype);
- Object.defineProperty(SelectionInspector.prototype, 'constructor', { value: SelectionInspector, enumerable: false, writable: true });
- SelectionInspector.prototype.validate = function(val) {
- return typeof val === 'string' && this._tags.indexOf(val) != -1;
- };
- SelectionInspector.prototype.reset = function() {
- if (!this._inputWidgets)
- return false;
- this._value = [];
- for (let tag in this._inputWidgets) {
- if (this._inputWidgets[tag].checked)
- this._value.push(tag);
- }
- return true;
- };
- SelectionInspector.prototype.changeCallback = function(e) {
- let val = e.target.value;
- if (this.validate(val)) {
- let i = this._value.indexOf(val);
- if (e.target.checked) {
- if (i == -1)
- this._value.push(val);
- }
- else {
- if (i != -1)
- this._value.splice(i, 1);
- }
- this.respondTo('inspectorValueChanged', this);
- }
- };
- SelectionInspector.prototype.resetWidget = function() {
- if (!this._inputWidgets)
- return false;
- for (let tag in this._inputWidgets)
- this._inputWidgets[tag].checked = this._value.indexOf(tag) != -1 ? true : false;
- return true;
- };
- SelectionInspector.prototype.setWidget = function(w) {
- Inspector.prototype.setWidget.call(this, w);
- this._inputWidgets = {};
- for (let i of w.querySelectorAll('input[type="checkbox"]')) {
- let value = i.attributes.value;
- if (value !== undefined) {
- let tag = value.value;
- if (this._tags.indexOf(tag) != -1)
- this._inputWidgets[tag] = i;
- }
- }
- 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;
- font-style: italic;
- 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" id="text_appearance_bold" name="text_appearance[]" value="bold"/><label for="text_appearance_bold"><span class="btn_edit btn_b">B</span></label></span>
- <span class="nowrap"><input type="checkbox" id="text_appearance_italic" name="text_appearance[]" value="italic"/><label for="text_appearance_italic"><span class="btn_edit btn_i">I</span></label></span>
- <span class="nowrap"><input type="checkbox" id="text_appearance_underline" name="text_appearance[]" value="underline"/><label for="text_appearance_underline"><span class="btn_edit btn_u">S</span></label></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/SelectionInspector.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) {
- let options = sender.get();
- this._display.style.fontWeight = options.indexOf('bold') != -1 ? 'bold' : 'normal';
- this._display.style.fontStyle = options.indexOf('italic') != -1 ? 'italic' : 'normal';
- this._display.style.textDecoration = options.indexOf('underline') != -1 ? 'underline' : 'none';
- }
- return true;
- }
- const inspector = new SelectionInspector(['italic'], {tags: ['bold', 'italic', 'underline']});
- const container = document.querySelector('#<?php echo $id; ?>');
- const display = container.querySelector('.test_display');
- inspector.setManagedWidget(container.querySelector('.options_panel')).resetWidget();
- const tester = new Tester(display, inspector);
VOIR AUSSI
Inspector, BooleanInspector, NumberInspector, StringInspector, SelectInspector, OptionInspector, ImageInspector, ColorInspector
Commentaires