51

ColorInspector

SelectionInspector  |  ImageInspector

Objective
  • Responder
    • View
      • Inspector
        • ColorInspector

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 plaque change de couleur. Entrez directement une valeur, e.g. #CB6.

Le code qui permet à un utilisateur de choisir une couleur utilise jQuery MiniColors.

ColorInspector.js
  1. function ColorInspector(value = ColorInspector.defaultColor) {
  2.     if (!Validator.validateColor(value))
  3.         throw new TypeError();
  4.  
  5.     Inspector.call(this);
  6.  
  7.     this._value = Validator.normalizeColor(value);
  8. }
  9.  
  10. ColorInspector.prototype = Object.create(Inspector.prototype);
  11.  
  12. Object.defineProperty(ColorInspector.prototype, 'constructor', { value: ColorInspector, enumerable: false, writable: true });
  13.  
  14. ColorInspector.defaultColor = '#000000';
  15.  
  16. ColorInspector.prototype.validate = function(val) {
  17.     return Validator.validateColor(val);
  18. };
  19.  
  20. ColorInspector.prototype.normalize = function(val) {
  21.     return Validator.normalizeColor(val);
  22. };
  23.  
  24. ColorInspector.prototype.resetWidget = function() {
  25.     this._widget.value = this._value;
  26.  
  27.     jQuery(this._widget).minicolors('value', this._value);
  28.  
  29.     return this;
  30. };
  31.  
  32. ColorInspector.prototype.manageWidget = function(parent = null) {
  33.     Inspector.prototype.manageWidget.call(this, parent);
  34.  
  35.     if (this._parent && this._widget) {
  36.         jQuery(this._widget).minicolors({
  37.             letterCase: 'uppercase',
  38.             defaultColor: ColorInspector.defaultColor,
  39.             hide: function() {
  40.                 this.dispatchEvent(new Event('change'));
  41.             }
  42.         });
  43.     }
  44.  
  45.     return this;
  46. };
  47.  
  48. ColorInspector.prototype.unmanageWidget = function() {
  49.     if (this._widget)
  50.         jQuery(this._widget).minicolors('destroy');
  51.  
  52.     Inspector.prototype.unmanageWidget.call(this);
  53.  
  54.     return this;
  55. };
  56.  
  57. ColorInspector.prototype.createWidget = function() {
  58.     const htmlinput = `<input type="text" size="8" maxlength="7" value="${this._value}" spellcheck="false" />`;
  59.  
  60.     let template = document.createElement('template');
  61.  
  62.     template.innerHTML = htmlinput;
  63.  
  64.     let widget = template.content.children[0];
  65.  
  66.     this.setWidget(widget);
  67.  
  68.     return this;
  69. };
Test
testColorInspector.phtml
  1. <?php $text='Objective.js'; ?>
  2. <?php $font='Slackey'; ?>
  3. <?php $fontSize=24; ?>
  1. <?php $color='#cccccc'; ?>
  1. <?php head('font', $font); ?>
  2. <?php head('javascript', 'jquery.minicolors'); ?>
  3. <?php head('stylesheet', 'jquery.minicolors', 'screen'); ?>

Ajoute les balises <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans%7CSlackey"/>, <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. head est une fonction d'iZend. Adaptez le code à votre environnement de développement.

  1. <?php $id=uniqid('id'); ?>
  1. .test_display {
  2.     width: 240px;
  3.     height: 135px;
  4.     display: flex;
  5.     margin-bottom: 10px;
  6.     border-radius: 3px;
  7. }
  1. <div id="<?php echo $id; ?>" class="noprint">
  2. <div class="test_display">
  3. <canvas width="240" height="135"></canvas>
  4. </div>
  5. <div class="ojs">
  6. <div>
  7. <span class="color_panel"></span>
  8. </div>
  9. </div>
  10. </div>
  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/ColorInspector.js'); ?>
  1. function ColorView() {
  2.     View.call(this);
  3.  
  4.     this._color = '<?php echo $color; ?>';
  5.  
  6.     this._canvas = null;
  7. }
  8.  
  9. ColorView.prototype = Object.create(View.prototype);
  10.  
  11. Object.defineProperty(ColorView.prototype, 'constructor', { value: ColorView, enumerable: false, writable: true });
  12.  
  13. ColorView.prototype.setColor = function(color) {
  14.     if (this._color != color) {
  15.         this._color = color;
  16.  
  17.         if (this._widget)
  18.             this._widget.style.backgroundColor = color;
  19.     }
  20.  
  21.     return this;
  22. }
  23.  
  24. ColorView.prototype.resetWidget = function() {
  25.     if (this._widget)
  26.         this._widget.style.backgroundColor = this._color;
  27.  
  28.     return this;
  29. }
  30.  
  31. ColorView.prototype.setWidget = function(w) {
  32.     const canvas = w.querySelector('canvas');
  33.  
  34.     if (canvas === null)
  35.         throw new TypeError();
  36.  
  37.     this._canvas = canvas;
  38.  
  39.     View.prototype.setWidget.call(this, w);
  40.  
  41.     return this;
  42. }
  43.  
  44. ColorView.prototype.drawWidget = function(font, fontSize, text) {
  45.     if (this._canvas) {
  46.         let canvas = this._canvas;
  47.         let ctx = canvas.getContext('2d');
  48.  
  49.         ctx.font = `bold ${fontSize}px "${font}"`;
  50.  
  51.         ctx.fillStyle = 'white';
  52.         ctx.textAlign = 'center';
  53.         ctx.textBaseline = 'middle';
  54.         ctx.fillText('', canvas.width / 2, canvas.height / 2);
  55.         ctx.beginPath();
  56.         ctx.arc(20, 20, 10, 0, 2 * Math.PI);
  57.         ctx.fill();
  58.         ctx.beginPath();
  59.         ctx.arc(canvas.width-20, 20, 10, 0, 2 * Math.PI);
  60.         ctx.fill();
  61.         ctx.beginPath();
  62.         ctx.arc(canvas.width-20, canvas.height-20, 10, 0, 2 * Math.PI);
  63.         ctx.fill();
  64.         ctx.beginPath();
  65.         ctx.arc(20, canvas.height-20, 10, 0, 2 * Math.PI);
  66.         ctx.fill();
  67.  
  68.         document.fonts.ready.then(() => {
  69.             ctx.fillText(text, canvas.width / 2, canvas.height / 2);
  70.         });
  71.     }
  72.  
  73.     return this;
  74. }
  1. function Tester(display, inspector) {
  2.     Responder.call(this);
  3.  
  4.     this._display = display;
  5.  
  6.     inspector.addNextResponder(this);
  7.  
  8.     this._inspector = inspector;
  9. }
  10.  
  11. Tester.prototype = Object.create(Responder.prototype);
  12.  
  13. Object.defineProperty(Tester.prototype, 'constructor', { value: Tester, enumerable: false, writable: true });
  14.  
  15. Tester.prototype.inspectorValueChanged = function(sender) {
  16.     if (sender === this._inspector)
  17.         this._display.setColor(sender.get());
  18.  
  19.     return true;
  20. }
  1. const inspector = new ColorInspector('<?php echo $color; ?>');
  2.  
  3. const container = document.querySelector('#<?php echo $id; ?>');
  4.  
  5. const display = new ColorView();
  6.  
  7. display.setWidget(container.querySelector('.test_display')).resetWidget();
  8.  
  9. display.drawWidget('<?php echo $font; ?>', <?php echo $fontSize; ?>, '<?php echo $text; ?>');
  10.  
  11. inspector.createManagedWidget(container.querySelector('.color_panel'));
  12.  
  13. const tester = new Tester(display, inspector);
VOIR AUSSI

Inspector, BooleanInspector, NumberInspector, StringInspector, SelectInspector, OptionInspector, SelectionInspector, ImageInspector, Editor, Validator

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