1
 32

SetOfInspector

SequenceInspector  |  DimensionInspector

Objective
  • Responder
    • View
      • Inspector
        • SetOfInspector
40

Cliquez dans une bande de couleur pour la sélectionner ou utilisez le bouton avec un triangle vers la gauche et le bouton avec un triangle vers la droite pour déplacer le sélecteur. La position de la bande sélectionnée et le nombre total de bandes sont affichés à droite des boutons. La couleur et la largeur de la bande sélectionnée sont éditées par un ColorInspector et un RangeInspector.

Cliquez dans le champ de saisie de la couleur. Choisissez une couleur. Appuyez sur Entrée ou cliquez en dehors du sélecteur pour valider la couleur choisie. La bande sélectionnée change de couleur. Entrez directement une valeur, e.g. #C80.

Déplacez la boule de la glissière vers la gauche ou vers la droite pour changer la largeur de la bande sélectionnée. NOTE : La largeur d'une bande est comprise entre 10 et 60 px.

Utilisez le bouton avec une flèche vers la gauche et le bouton avec une flèche vers la droite pour déplacer la bande sélectionnée.

Cliquez sur le bouton plus pour ajouter une bande. NOTE : L'inspecteur est configuré pour autoriser un maximum de 6 bandes.

Cliquez sur le bouton moins pour retirer la bande sélectionnée. NOTE : L'inspecteur est configuré pour laisser un minimum de 2 bandes.

IMPORTANT : La disposition et le style d'une interface sont à la discrétion du programmeur. Aucun modèle graphique n'est imposé. Les programmes de test utilisent les icônes de Font Awesome. Tous les boutons de contrôle sont optionnels.

Dans la console du navigateur, verrouillez toute l'interface en bloquant l'inspecteur :

tester.disable()

Déverrouillez l'interface :

tester.enable()

Affichez la valeur de l'inspecteur :

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

Définit les couleurs initiales du panneau de bandes des couleurs. NOTE : Les largeurs des bandes de couleurs sont initialisées aléatoirement.

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

Définit le nombre minimum et maximum de bandes, la largeur initiale d'une nouvelle bande, la largeur minimum et maximum d'une bande.

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

Ajoute les balises <script src="/js/jquery.minicolors.js"/> et <link rel="stylesheet" href="/css/jquery.minicolors.css" media="screen"/> à la section <head> du document HTML pour charger le code et la feuille de style de MiniColors en jQuery. RAPPEL : head est une fonction d'iZend. Adaptez le code à votre environnement de développement.

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

Définit l'identifiant de la <div> qui encadre le HTML du programme de test.

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

Configure la <div> qui contient les bandes de couleurs.

  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>

Crée les boutons de contrôle, le canevas pour l'affichage des bandes de couleurs et les widgets des instances de ColorPanel et 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'); ?>

Inclut le code de toutes les classes nécessaires.

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

Une instance de Stripes affiche une série de bandes de couleurs dans un canevas. En option, l'utilisateur peut cliquer dans une bande de couleur pour notifier une sélection.

Une instance de Stripes hérite de la classe View. _colors contient le tableau des couleurs avec leurs largeurs. _selectable vaut true si l'utilisateur peut cliquer dans une bande de couleur pour la sélectionner. _click contient la fonction de l'écouteur qui réagit à un clic dans le canevas.

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

Définit les accesseurs get et set de la propriété 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 programme la notification du message stripeSelected en réponse à un clic dans le canevas de this avec en paramètres le numéro de la bande sélectionnée et la couleur correspondante avec sa largeur. La fonction de l'écouteur de l'événement click est sauvegardée dans la propriété _click de this.

enable change le type du pointeur de la souris dans le canevas de this à 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 déprogramme la notification du message stripeSelected en réponse à un clic dans le canevas de this.

disable change le type du pointeur de la souris dans le canevas de this à 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 remplit le canevas de this avec autant de rectangles qu'il y a de couleurs avec leurs largeurs dans 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 vérifie si w est un canevas, appelle la méthode setWidget héritée de la classe View, active la sélection d'une bande de couleur.

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

Une instance de Tester relie ensemble une instance de Stripes et une instance de SetOfInspector.

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

Quand la valeur éditée par l'inspecteur change, la liste des couleurs de l'affichage est modifiée.

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

Quand une bande de couleur est sélectionnée dans l'affichage par l'utilisateur, l'élément correspondant est édité par l'inspecteur.

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

enable active l'inspecteur et l'affichage.

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

disable désactive l'inspecteur et l'affichage.

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

Construit la liste initiale des bandes de couleurs éditée par le programme de test avec les couleurs définies en PHP et des largeurs aléatoires.

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

Retrouve le widget qui encadre l'interface du programme de test.

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

Crée l'instance de Stripes et l'initialise avec la liste de couleurs avec leurs largeurs.

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

Crée l'instance de ColorInspector qui édite la couleur d'une bande de couleur.

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

Crée l'instance de RangeInspector qui édite la largeur d'une bande de couleur.

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

Crée l'instance de SequenceInspector qui édite la couleur et la largeur d'une bande de couleur.

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

Crée l'instance de SetOfInspector qui édite la liste de couleurs avec leurs largeurs avec un nombre minimum et maximum d'éléments et une couleur avec une largeur qui servira à initialiser un nouvel élément.

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

Associe l'inspecteur avec tous les boutons de contrôles.

  1. inspector.set(colors);

Initialise l'inspecteur avec la liste des couleurs avec leurs largeurs.

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

Crée l'instance de Tester qui connecte les instances de Stripes et de SetOfInspector.

VOIR AUSSI

Objective, Inspector, ColorInspector, RangeInspector, SequenceInspector

Commentaires

Votre commentaire :
[p] [b] [i] [u] [s] [quote] [pre] [br] [code] [url] [email] strip aide 2000

Entrez un maximum de 2000 caractères.
Améliorez la présentation de votre texte avec les balises de formatage suivantes :
[p]paragraphe[/p], [b]gras[/b], [i]italique[/i], [u]souligné[/u], [s]barré[/s], [quote]citation[/quote], [pre]tel quel[/pre], [br]à la ligne,
[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]commande[/code], [code=langage]code source en c, java, php, html, javascript, xml, css, sql, bash, dos, make, etc.[/code].