28

SetOfInspector

SequenceInspector  |  DimensionInspector

Objective
  • Responder
    • View
      • Inspector
        • SetOfInspector
40

Click on a stripe of color to select it or use the button with the left triangle and the button with the right triangle to move the selector. The position of the selected stripe and the total number of stripes are displayed to the right of the buttons. The color and the width of the selected stripe are edited by a ColorInspector and a RangeInspector.

Click in the input field for the color. Choose a color. Press Enter or click outside the selector to validate the color you have chosen. The selected stripe changes of color. Directly enter a value, e.g. #C80.

Move the ball of the slider to the left or to the right to change the width of the selected stripe. NOTE: The width of a stripe is between 10 and 60 px.

Use the button with an arrow to the left and the button with an arrow to the right to move the selected stripe.

Click on the plus button to add a stripe. NOTE: The inspector is configured to allow a maximum of 6 stripes.

Click on the minus button to remove the selected stripe. NOTE: The inspector is configured to leave a minimum of 2 stripes.

IMPORTANT: The layout and the style of an interface are in the hands of the programmer. No graphical design is imposed. The test programs use the icons from Font Awesome. All the control buttons are optional.

In the console of the browser, lock the whole interface by blocking the inspector:

tester.disable()

Unlock the interface:

tester.enable()

Display the value of the inspector:

inspector.get()
[  {"color": "#541743",  "width": 20},  {"color": "#8C0C3C",  "width": 30}, ... ]
SetOfInspector.js
  1. function SetOfInspector(inspector, options = false) {
  2.     if (!( inspector instanceof Inspector))
  3.         throw new TypeError();
  4.  
  5.     options = options || {};
  6.  
  7.     let defaultItem = options.defaultItem;
  8.  
  9.     let min = options.min;
  10.     let max = options.max;
  11.  
  12.     if (! (typeof min === 'undefined' || Number.isInteger(min)))
  13.         throw new TypeError();
  14.  
  15.     if (! (typeof max === 'undefined' || Number.isInteger(max)))
  16.         throw new TypeError();
  17.  
  18.     if (typeof min === 'number' && min < 1)
  19.         throw new RangeError();
  20.  
  21.     if (typeof max === 'number' && max < 1)
  22.         throw new RangeError();
  23.  
  24.     if (typeof min === 'number' && typeof max === 'number' && min > max)
  25.         throw new RangeError();
  26.  
  27.     Inspector.call(this);
  28.  
  29.     inspector.addNextResponder(this);
  30.  
  31.     this._inspector = inspector;
  32.  
  33.     this._defaultItem = defaultItem;
  34.  
  35.     this._min = min;
  36.     this._max = max;
  37.  
  38.     this._pos = 1;
  39.  
  40.     this._value = [];
  41. }
  42.  
  43. SetOfInspector.prototype = Object.create(Inspector.prototype);
  44.  
  45. Object.defineProperty(SetOfInspector.prototype, 'constructor', { value: SetOfInspector, enumerable: false, writable: true });
  46.  
  47. Object.defineProperty(SetOfInspector.prototype, 'itemIndex', {
  48.     get:    function() {
  49.         return this._pos;
  50.     },
  51.     set:    function(pos) {
  52.         if (!Number.isInteger(pos))
  53.             throw new TypeError();
  54.  
  55.         const len = this._value.length || 1;
  56.  
  57.         if (pos == -1)
  58.             this._pos = len;
  59.         else if (pos < 1 || pos > len)
  60.             throw new RangeError();
  61.         else
  62.             this._pos = pos;
  63.  
  64.         this.resetWidget();
  65.     }
  66. });
  67.  
  68. Object.defineProperty(SetOfInspector.prototype, 'defaultItem', {
  69.     get:    function() {
  70.         return this._defaultItem;
  71.     },
  72.     set:    function(val) {
  73.         this._defaultItem = val;
  74.     }
  75. });
  76.  
  77. SetOfInspector.prototype.validate = function(val) {
  78.     return val === null || Array.isArray(val);
  79. };
  80.  
  81. SetOfInspector.prototype.normalize = function(val) {
  82.     if (val === null)
  83.         val = [];
  84.     else if (this._max !== undefined && val.length > this._max)
  85.         val = val.slice(0, this._max);
  86.  
  87.     return val;
  88. };
  89.  
  90. SetOfInspector.prototype.get = function() {
  91.     return this._value.length > 0 ? Array.from(this._value) : null;
  92. };
  93.  
  94. SetOfInspector.prototype.set = function(val) {
  95.     if (!this.validate(val))
  96.         return false;
  97.  
  98.     val = this.normalize(val);
  99.  
  100.     if (this._value !== val) {
  101.         this._value = val === null ? null : Array.from(val);
  102.  
  103.         if (val === null || this._pos > val.length)
  104.             this._pos = 1;
  105.  
  106.         this.resetWidget();
  107.     }
  108.  
  109.     return true;
  110. };
  111.  
  112. SetOfInspector.prototype.reset = function() {
  113.     return this._inspector.reset();
  114. };
  115.  
  116. SetOfInspector.prototype.disable = function() {
  117.     this._inspector.disable();
  118.  
  119.     if (this._previousWidget)
  120.         this._previousWidget.disabled = true;
  121.  
  122.     if (this._nextWidget)
  123.         this._nextWidget.disabled = true;
  124.  
  125.     if (this._addWidget)
  126.         this._addWidget.disabled = true;
  127.  
  128.     if (this._insertWidget)
  129.         this._insertWidget.disabled = true;
  130.  
  131.     if (this._removeWidget)
  132.         this._removeWidget.disabled = true;
  133.  
  134.     if (this._shiftWidget)
  135.         this._shiftWidget.disabled = true;
  136.  
  137.     if (this._unshiftWidget)
  138.         this._unshiftWidget.disabled = true;
  139.  
  140.     if (this._posWidget)
  141.         this._posWidget.hidden = true;
  142.  
  143.     return this;
  144. };
  145.  
  146. SetOfInspector.prototype.enable = function() {
  147.     this._inspector.enable();
  148.  
  149.     if (this._previousWidget)
  150.         this._previousWidget.disabled = this._value.length <= 1;
  151.  
  152.     if (this._nextWidget)
  153.         this._nextWidget.disabled = this._value.length <= 1;
  154.  
  155.     if (this._addWidget)
  156.         this._addWidget.disabled = this._max && this._value.length >= this._max;
  157.  
  158.     if (this._insertWidget)
  159.         this._addWidget.disabled = this._max && this._value.length >= this._max;
  160.  
  161.     if (this._removeWidget)
  162.         this._removeWidget.disabled = this._min && this._value.length <= this._min;
  163.  
  164.     if (this._shiftWidget)
  165.         this._shiftWidget.disabled = this._value.length <= 1;
  166.  
  167.     if (this._unshiftWidget)
  168.         this._unshiftWidget.disabled = this._value.length <= 1;
  169.  
  170.     if (this._posWidget)
  171.         this._posWidget.hidden = false;
  172.  
  173.     return this;
  174. };
  175.  
  176. SetOfInspector.prototype.inspectorValueChanged = function(sender) {
  177.     this._value[this._pos-1] = sender.get();
  178.  
  179.     this.nextRespondTo('inspectorValueChanged', this);
  180.  
  181.     return true;
  182. };
  183.  
  184. SetOfInspector.prototype.forward = function(f, ...args) {
  185.     this._inspector.forwardTo(f, args);
  186. };
  187.  
  188. SetOfInspector.prototype.addItem = function() {
  189.     if (this._max && this._value.length >= this._max)
  190.         return false;
  191.  
  192.     this._value.splice(this._pos, 0, this.defaultItem);
  193.  
  194.     if (this._value.length == 1)
  195.         this._pos = 1;
  196.     else
  197.         this._pos++;
  198.  
  199.     this.resetWidget();
  200.  
  201.     return true;
  202. };
  203.  
  204. SetOfInspector.prototype.insertItem = function() {
  205.     if (this._max && this._value.length >= this._max)
  206.         return false;
  207.  
  208.     this._value.splice(this._pos-1, 0, this.defaultItem);
  209.  
  210.     this.resetWidget();
  211.  
  212.     return true;
  213. };
  214.  
  215. SetOfInspector.prototype.removeItem = function() {
  216.     if (this._value.length == 0 || (this._min && this._value.length <= this._min))
  217.         return false;
  218.  
  219.     this._value.splice(this._pos-1, 1);
  220.  
  221.     if (this._value.length == 0)
  222.         this._pos = 1;
  223.     else if (this._pos > this._value.length)
  224.         this._pos = this._value.length;
  225.  
  226.     this.resetWidget();
  227.  
  228.     return true;
  229. };
  230.  
  231. SetOfInspector.prototype.moveItem = function(from, to = false) {
  232.     if (this._value.length <= 1)
  233.         return false;
  234.  
  235.     if (to === false)
  236.         to = from, from = this._pos;
  237.  
  238.     if (from < 1 || to < 1 || from == to || from > this._value.length || to > this._value.length)
  239.         return false;
  240.  
  241.     const val = this._value[from-1];
  242.  
  243.     this._value[from-1] = this._value[to-1];
  244.     this._value[to-1] = val;
  245.  
  246.     this.resetWidget();
  247.  
  248.     return true;
  249. };
  250.  
  251. SetOfInspector.prototype.shiftItem = function() {
  252.     if (this._value.length <= 1)
  253.         return false;
  254.  
  255.     const from = this._pos;
  256.     const to = from == 1 ? this._value.length : from-1;
  257.  
  258.     const val = this._value[from-1];
  259.  
  260.     this._value.splice(from-1, 1);
  261.     this._value.splice(to-1, 0, val);
  262.  
  263.     this._pos = to;
  264.  
  265.     this.resetWidget();
  266.  
  267.     return true;
  268. };
  269.  
  270. SetOfInspector.prototype.unshiftItem = function() {
  271.     if (this._value.length <= 1)
  272.         return false;
  273.  
  274.     const from = this._pos;
  275.     const to = from == this._value.length ? 1 : from+1;
  276.  
  277.     const val = this._value[from-1];
  278.  
  279.     this._value.splice(from-1, 1);
  280.     this._value.splice(to-1, 0, val);
  281.  
  282.     this._pos = to;
  283.  
  284.     this.resetWidget();
  285.  
  286.     return true;
  287. };
  288.  
  289. SetOfInspector.prototype.setPreviousWidget = function(w) {
  290.     w.addEventListener('click', () => {
  291.         if (this._value.length > 0) {
  292.             this._pos = this._pos == 1 ? this._value.length : this._pos-1;
  293.  
  294.             this.resetWidget();
  295.         }
  296.     });
  297.  
  298.     w.disabled = this._value.length <= 1;
  299.  
  300.     this._previousWidget = w;
  301.  
  302.     return this;
  303. };
  304.  
  305. SetOfInspector.prototype.setNextWidget = function(w) {
  306.     w.addEventListener('click', () => {
  307.         if (this._value.length > 0) {
  308.             this._pos = this._pos == this._value.length ? 1 : this._pos+1;
  309.  
  310.             this.resetWidget();
  311.         }
  312.     });
  313.  
  314.     w.disabled = this._value.length <= 1;
  315.  
  316.     this._nextWidget = w;
  317.  
  318.     return this;
  319. };
  320.  
  321. SetOfInspector.prototype.setAddWidget = function(w) {
  322.     w.addEventListener('click', () => {
  323.         if (this.addItem())
  324.             this.nextRespondTo('inspectorValueChanged', this);
  325.     });
  326.  
  327.     w.disabled = this._max && this._value.length >= this._max;
  328.  
  329.     this._addWidget = w;
  330.  
  331.     return this;
  332. };
  333.  
  334. SetOfInspector.prototype.setInsertWidget = function(w) {
  335.     w.addEventListener('click', () => {
  336.         if (this.insertItem())
  337.             this.nextRespondTo('inspectorValueChanged', this);
  338.     });
  339.  
  340.     w.disabled = this._max && this._value.length >= this._max;
  341.  
  342.     this._insertWidget = w;
  343.  
  344.     return this;
  345. };
  346.  
  347. SetOfInspector.prototype.setRemoveWidget = function(w) {
  348.     w.addEventListener('click', () => {
  349.         if (this.removeItem())
  350.             this.nextRespondTo('inspectorValueChanged', this);
  351.     });
  352.  
  353.     w.disabled = this._min && this._value.length <= this._min;
  354.  
  355.     this._removeWidget = w;
  356.  
  357.     return this;
  358. };
  359.  
  360. SetOfInspector.prototype.setShiftWidget = function(w) {
  361.     w.addEventListener('click', () => {
  362.         if (this.shiftItem())
  363.             this.nextRespondTo('inspectorValueChanged', this);
  364.     });
  365.  
  366.     w.disabled = this._value.length <= 1;
  367.  
  368.     this._shiftWidget = w;
  369.  
  370.     return this;
  371. };
  372.  
  373.  
  374. SetOfInspector.prototype.setUnshiftWidget = function(w) {
  375.     w.addEventListener('click', () => {
  376.         if (this.unshiftItem())
  377.             this.nextRespondTo('inspectorValueChanged', this);
  378.     });
  379.  
  380.     w.disabled = this._value.length <= 1;
  381.  
  382.     this._unshiftWidget = w;
  383.  
  384.     return this;
  385. };
  386.  
  387. SetOfInspector.prototype.setIndexWidget = function(w) {
  388.     w.innerText = this._value.length > 0 ? `${this._pos} / ${this._value.length}` : '';
  389.  
  390.     this._posWidget = w;
  391.  
  392.     return this;
  393. };
  394.  
  395. SetOfInspector.prototype.resetWidget = function() {
  396.     this._inspector.set(this._value[this._pos-1]);
  397.  
  398.     if (this._previousWidget)
  399.         this._previousWidget.disabled = this._value.length <= 1;
  400.  
  401.     if (this._nextWidget)
  402.         this._nextWidget.disabled = this._value.length <= 1;
  403.  
  404.     if (this._addWidget)
  405.         this._addWidget.disabled = this._max && this._value.length >= this._max;
  406.  
  407.     if (this._insertWidget)
  408.         this._insertWidget.disabled = this._max && this._value.length >= this._max;
  409.  
  410.     if (this._removeWidget)
  411.         this._removeWidget.disabled = this._min && this._value.length <= this._min;
  412.  
  413.     if (this._shiftWidget)
  414.         this._shiftWidget.disabled = this._value.length <= 1;
  415.  
  416.     if (this._unshiftWidget)
  417.         this._unshiftWidget.disabled = this._value.length <= 1;
  418.  
  419.     if (this._posWidget)
  420.         this._posWidget.innerText = this._value.length > 0 ? `${this._pos} / ${this._value.length}` : '';
  421.  
  422.     return this;
  423. };
  424.  
  425. SetOfInspector.prototype.setWidget = function(w) {
  426.     View.prototype.setWidget.call(this, w);
  427.  
  428.     return this;
  429. };
  430.  
  431. SetOfInspector.prototype.destroyWidget = function() {
  432.     this._inspector.destroyWidget();
  433.  
  434.     View.prototype.destroyWidget.call(this);
  435.  
  436.     return this;
  437. };
Test
testSetOfInspector.phtml
  1. <?php $colors=['#541743', '#8C0C3C', '#C10037', '#F75431', '#F7BD00']; ?>

Defines the initial colors of panel of color stripes. NOTE: The widths of the colors stripes are initialized randomly.

  1. <?php $stripesmin=2; ?>
  2. <?php $stripesmax=6; ?>
  3. <?php $stripewidth=40; ?>
  4. <?php $stripeminwidth=10; ?>
  5. <?php $stripemaxwidth=60; ?>

Defines the minimum and the maximum number of stripes, the initial width of a new stripe, the minimum and the maximum width of a stripe.

  1. <?php head('javascript', 'jquery.minicolors'); ?>
  2. <?php head('stylesheet', 'jquery.minicolors', 'screen'); ?>

Adds the tags <script src="/js/jquery.minicolors.js"/> and <link rel="stylesheet" href="/css/jquery.minicolors.css" media="screen"/> to the <head> section of the HTML document to load the code and the style sheet of MiniColors in jQuery. REMINDER: head is a function of iZend. Adapt the code to your development environment.

  1. <?php $id=uniqid('id'); ?>

Defines the identifier of the <div> which surrounds the HTML of the test program.

  1. .test_display {
  2.     display: flex;
  3.     margin-bottom: 10px;
  4.     border-radius: 3px;
  5. }

Configures the <div> which contains the color stripes.

  1. <div id="<?php echo $id; ?>" class="noprint">
  2. <div class="ojs">
  3. <div id="control_panel_1">
  4. <span><button type="submit" class="ojs_button tiny round"><i class="fas fa-caret-left"></i></button></span>
  5. <span><button type="submit" class="ojs_button tiny round"><i class="fas fa-caret-right"></i></button></span>
  6. <span><output></output></span>
  7. </div>
  8. <div class="test_display">
  9. <canvas width="360" height="120"></canvas>
  10. </div>
  11. <div id="control_panel_2">
  12. <span><button type="submit" class="ojs_button tiny"><i class="fas fa-sm fa-plus"></i></button></span>
  13. <span><button type="submit" class="ojs_button tiny"><i class="fas fa-sm fa-minus"></i></button></span>
  14. <span><button type="submit" class="ojs_button tiny"><i class="fas fa-sm fa-arrow-left"></i></button></span>
  15. <span><button type="submit" class="ojs_button tiny"><i class="fas fa-sm fa-arrow-right"></i></button></span>
  16. </div>
  17. <div>
  18. <span class="color_panel"></span>
  19. <span>
  20. <input id="stripe_size" type="range" min="<?php echo $stripeminwidth; ?>" max="<?php echo $stripemaxwidth; ?>" step="10" value="<?php echo $stripewidth; ?>"/>
  21. <output for="stripe_size"><?php echo $stripewidth; ?></output>
  22. </span>
  23. </div>
  24. </div>
  25. </div>

Creates the control buttons, the canvas for the display of the color stripes and the widgets for the instances of ColorPanel and RangeInspector.

  1. <?php head('javascript', '/objectivejs/Objective.js'); ?>
  2. <?php head('javascript', '/objectivejs/Validator.js'); ?>
  3. <?php head('javascript', '/objectivejs/Responder.js'); ?>
  4. <?php head('javascript', '/objectivejs/View.js'); ?>
  5. <?php head('javascript', '/objectivejs/Inspector.js'); ?>
  6. <?php head('javascript', '/objectivejs/NumberInspector.js'); ?>
  7. <?php head('javascript', '/objectivejs/RangeInspector.js'); ?>
  8. <?php head('javascript', '/objectivejs/ColorInspector.js'); ?>
  9. <?php head('javascript', '/objectivejs/SequenceInspector.js'); ?>
  10. <?php head('javascript', '/objectivejs/SetOfInspector.js'); ?>

Includes the code of all the necessary classes.

  1. function Stripes() {
  2.     View.call(this);
  3.  
  4.     this._colors = null;
  5.  
  6.     this._selectable = false;
  7.  
  8.     this._click = null;
  9. }
  10.  
  11. Stripes.prototype = Object.create(View.prototype);
  12.  
  13. Object.defineProperty(Stripes.prototype, 'constructor', { value: Stripes, enumerable: false, writable: true });

An instance of Stripes displays a series of stripes of colors in a canvas. As an option, the user can click in a stripe of color to notify a selection.

An instance of Stripes inherits from the class View. _colors contains the array of colors with their widths. _selectable is true if the user can click in a stripe of color to select it. _click contains the function of the listener which reacts to a click in the canvas.

  1. Object.defineProperty(Stripes.prototype, 'colors', {
  2.     get:    function() {
  3.                 return this._colors;
  4.             },
  5.     set:    function(colors) {
  6.                 this._colors = colors;
  7.  
  8.                 if (this.interfaced())
  9.                     this.resetWidget();
  10.             }
  11. });

Defines the accessors get and set of the property colors.

  1. Stripes.prototype.enable = function() {
  2.     if (this._selectable)
  3.         return this;
  4.  
  5.     if (this._click === null) {
  6.         this._click = () => {
  7.             if (this._colors === null)
  8.                 return;
  9.  
  10.             const rect = event.target.getBoundingClientRect();
  11.             const x = event.clientX - rect.left;
  12.  
  13.             for (let dx = 0, i = 0; i < this._colors.length; i++) {
  14.                 dx += this._colors[i].width;
  15.  
  16.                 if (dx >= x) {
  17.                     this.notify('stripeSelected', this, i+1, this._colors[i]);
  18.                     break;
  19.                 }
  20.             }
  21.         };
  22.     }
  23.  
  24.     this.addEventListener('click', this._click);
  25.  
  26.     this.setStyle('cursor', 'pointer');
  27.  
  28.     this._selectable = true;
  29.  
  30.     return this;
  31. }

enable programs the notification of the message stripeSelected in response to a click in the canvas of this with in parameters the number of the selected stripe and the corresponding color with its width. The function of the listener to the click event is saved in the property _click of this.

enable changes the type of the mouse pointer in the canvas of this to pointer.

  1. Stripes.prototype.disable = function() {
  2.     if (!this._selectable)
  3.         return this;
  4.  
  5.     this.removeEventListener('click', this._click);
  6.  
  7.     this.setStyle('cursor', 'default');
  8.  
  9.     this._selectable = false;
  10.  
  11.     return this;
  12. }

disable deprograms the notification of the message stripeSelected in to a click in the canvas of this.

disable changes the type of the mouse pointer in the canvas of this to default.

  1. Stripes.prototype.resetWidget = function() {
  2.     const canvas = this._widget;
  3.     const ctx = canvas.getContext('2d');
  4.  
  5.     if (this._colors === null) {
  6.         canvas.width = 0;
  7.  
  8.         return this;
  9.     }
  10.  
  11.     let width = 0;
  12.  
  13.     for (let c of this._colors)
  14.         width += c.width;
  15.  
  16.     canvas.width = width;
  17.  
  18.     let x = 0;
  19.  
  20.     for (let c of this._colors) {
  21.         ctx.fillStyle = c.color;
  22.         ctx.fillRect(x, 0, c.width, canvas.height);
  23.  
  24.         x += c.width;
  25.     }
  26.  
  27.     return this;
  28. }

resetWidget fills the canvas of this with as many rectangles as there are colors with their widths in this.

  1. Stripes.prototype.setWidget = function(w) {
  2.     if (w.tagName != 'CANVAS')
  3.         throw new TypeError();
  4.  
  5.     View.prototype.setWidget.call(this, w);
  6.  
  7.     this.enable();
  8.  
  9.     return this;
  10. }

setWidget checks if w is a canvas, calls the method setWidget inherited from the View class, enables selecting a stripe of color.

  1. function Tester(display, inspector) {
  2.     Responder.call(this);
  3.  
  4.     display.addListener(this);
  5.  
  6.     this._display = display;
  7.  
  8.     inspector.addNextResponder(this);
  9.  
  10.     this._inspector = inspector;
  11. }
  12.  
  13. Tester.prototype = Object.create(Responder.prototype);
  14.  
  15. Object.defineProperty(Tester.prototype, 'constructor', { value: Tester, enumerable: false, writable: true });

An instance of Tester links together an instance of Stripes and an instance of SetOfInspector.

  1. Tester.prototype.inspectorValueChanged = function(sender) {
  2.     if (sender === this._inspector)
  3.         this._display.colors = sender.get();
  4.  
  5.     return true;
  6. }

When the value edited by the inspector changes, the list of colors of the display are changed.

  1. Tester.prototype.stripeSelected = function(sender, i) {
  2.     this._inspector.itemIndex = i;
  3. }

When a stripe of color is selected in the display by the user, the corresponding element is edited by the inspector.

  1. Tester.prototype.enable = function() {
  2.     this._display.enable();
  3.     this._inspector.enable();
  4.  
  5.     return this;
  6. }

enable enables the inspector and the display.

  1. Tester.prototype.disable = function() {
  2.     this._display.disable();
  3.     this._inspector.disable();
  4.  
  5.     return this;
  6. }

disable disables the inspector and the display.

  1. const colors = [<?php echo implode(',', array_map(function($c) { return "{color: '$c', width: " . rand(2, 5)*10 . '}'; }, $colors)); ?>];

Builds the initial list of color stripes edited by the test program with the colors defined in PHP and random widths.

  1. const container = document.querySelector('#<?php echo $id; ?>');

Finds the widget which surrounds the interface of the test program.

  1. const display = new Stripes();
  2.  
  3. display.setWidget(container.querySelector('.test_display canvas'));
  4.  
  5. display.colors = colors;

Creates the instance of Stripes and initializes with the list of colors with their widths.

  1. const colorInspector = new ColorInspector('<?php echo $colors[0]; ?>');
  2.  
  3. colorInspector.createManagedWidget(container.querySelector('.color_panel'));

Creates the instance of ColorInspector which edits the color of a color stripe.

  1. const widthInspector = new RangeInspector(<?php echo $stripewidth; ?>, { min: <?php echo $stripeminwidth; ?>, max: <?php echo $stripemaxwidth; ?> });
  2.  
  3. widthInspector.setManagedWidget(container.querySelector('#stripe_size')).resetWidget();

Creates the instance of RangeInspector which edits the width of a color stripe.

  1. const stripeInspector = new SequenceInspector({ color: colorInspector, width: widthInspector });

Creates the instance of SequenceInspector which edits the color and the width of a color stripe.

  1. const inspector = new SetOfInspector(stripeInspector, { min: <?php echo $stripesmin; ?>, max: <?php echo $stripesmax; ?>, defaultItem: {color: ColorInspector.defaultColor, width: <?php echo $stripewidth; ?>} });

Creates the instance of SetOfInspector which edits the list of colors with their widths with a minimum and a maximum number of elements and a color with a width which will be used to initialize a new element..

  1. inspector.setPreviousWidget(container.querySelector('#control_panel_1 span:nth-child(1) button'));
  2. inspector.setNextWidget(container.querySelector('#control_panel_1 span:nth-child(2) button'));
  3.  
  4. inspector.setAddWidget(container.querySelector('#control_panel_2 span:nth-child(1) button'));
  5. inspector.setRemoveWidget(container.querySelector('#control_panel_2 span:nth-child(2) button'));
  6.  
  7. inspector.setShiftWidget(container.querySelector('#control_panel_2 span:nth-child(3) button'));
  8. inspector.setUnshiftWidget(container.querySelector('#control_panel_2 span:nth-child(4) button'));
  9.  
  10. inspector.setIndexWidget(container.querySelector('#control_panel_1 output'));

Associates the inspector with all the control buttons.

  1. inspector.set(colors);

Initializes the inspector with the list of colors with their widths.

  1. const tester = new Tester(display, inspector);

Creates the Tester instance which connects the Stripes and the SetOfInspector instances.

SEE ALSO

Objective, Inspector, ColorInspector, RangeInspector, SequenceInspector

Comments

Your comment:
[p] [b] [i] [u] [s] [quote] [pre] [br] [code] [url] [email] strip help 2000

Enter a maximum of 2000 characters.
Improve the presentation of your text with the following formatting tags:
[p]paragraph[/p], [b]bold[/b], [i]italics[/i], [u]underline[/u], [s]strike[/s], [quote]citation[/quote], [pre]as is[/pre], [br]line break,
[url]http://www.izend.org[/url], [url=http://www.izend.org]site[/url], [email]izend@izend.org[/email], [email=izend@izend.org]izend[/email],
[code]command[/code], [code=language]source code in c, java, php, html, javascript, xml, css, sql, bash, dos, make, etc.[/code].