1
 41

ColorInspector

SelectionInspector  |  Imageinspector

Objective
  • Responder
    • View
      • Inspector
        • ColorInspector

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 plate changes of color. Directly enter a value, e.g. #CB6.

The code which lets a user select a color uses 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'); ?>

Adds the tags <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans%7CSlackey"/>, <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. head is a function of iZend. Adapt the code to your development environment.

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

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

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