BVB Source Codes

dat.gui Show ColorController.js Source code

Return Download dat.gui: download ColorController.js Source code - Download dat.gui Source code - Type:.js
  1. /**
  2.  * dat-gui JavaScript Controller Library
  3.  * http://code.google.com/p/dat-gui
  4.  *
  5.  * Copyright 2011 Data Arts Team, Google Creative Lab
  6.  *
  7.  * Licensed under the Apache License, Version 2.0 (the "License");
  8.  * you may not use this file except in compliance with the License.
  9.  * You may obtain a copy of the License at
  10.  *
  11.  * http://www.apache.org/licenses/LICENSE-2.0
  12.  */
  13.  
  14. import Controller from './Controller';
  15. import dom from '../dom/dom';
  16. import Color from '../color/Color';
  17. import interpret from '../color/interpret';
  18. import common from '../utils/common';
  19.  
  20. class ColorController extends Controller {
  21.   constructor(object, property) {
  22.     super(object, property);
  23.  
  24.     this.__color = new Color(this.getValue());
  25.     this.__temp = new Color(0);
  26.  
  27.     const _this = this;
  28.  
  29.     this.domElement = document.createElement('div');
  30.  
  31.     dom.makeSelectable(this.domElement, false);
  32.  
  33.     this.__selector = document.createElement('div');
  34.     this.__selector.className = 'selector';
  35.  
  36.     this.__saturation_field = document.createElement('div');
  37.     this.__saturation_field.className = 'saturation-field';
  38.  
  39.     this.__field_knob = document.createElement('div');
  40.     this.__field_knob.className = 'field-knob';
  41.     this.__field_knob_border = '2px solid ';
  42.  
  43.     this.__hue_knob = document.createElement('div');
  44.     this.__hue_knob.className = 'hue-knob';
  45.  
  46.     this.__hue_field = document.createElement('div');
  47.     this.__hue_field.className = 'hue-field';
  48.  
  49.     this.__input = document.createElement('input');
  50.     this.__input.type = 'text';
  51.     this.__input_textShadow = '0 1px 1px ';
  52.  
  53.     dom.bind(this.__input, 'keydown', function(e) {
  54.       if (e.keyCode === 13) { // on enter
  55.         onBlur.call(this);
  56.       }
  57.     });
  58.  
  59.     dom.bind(this.__input, 'blur', onBlur);
  60.  
  61.     dom.bind(this.__selector, 'mousedown', function(/* e */) {
  62.       dom
  63.         .addClass(this, 'drag')
  64.         .bind(window, 'mouseup', function(/* e */) {
  65.           dom.removeClass(_this.__selector, 'drag');
  66.         });
  67.     });
  68.  
  69.     const valueField = document.createElement('div');
  70.  
  71.     common.extend(this.__selector.style, {
  72.       width: '122px',
  73.       height: '102px',
  74.       padding: '3px',
  75.       backgroundColor: '#222',
  76.       boxShadow: '0px 1px 3px rgba(0,0,0,0.3)'
  77.     });
  78.  
  79.     common.extend(this.__field_knob.style, {
  80.       position: 'absolute',
  81.       width: '12px',
  82.       height: '12px',
  83.       border: this.__field_knob_border + (this.__color.v < 0.5 ? '#fff' : '#000'),
  84.       boxShadow: '0px 1px 3px rgba(0,0,0,0.5)',
  85.       borderRadius: '12px',
  86.       zIndex: 1
  87.     });
  88.  
  89.     common.extend(this.__hue_knob.style, {
  90.       position: 'absolute',
  91.       width: '15px',
  92.       height: '2px',
  93.       borderRight: '4px solid #fff',
  94.       zIndex: 1
  95.     });
  96.  
  97.     common.extend(this.__saturation_field.style, {
  98.       width: '100px',
  99.       height: '100px',
  100.       border: '1px solid #555',
  101.       marginRight: '3px',
  102.       display: 'inline-block',
  103.       cursor: 'pointer'
  104.     });
  105.  
  106.     common.extend(valueField.style, {
  107.       width: '100%',
  108.       height: '100%',
  109.       background: 'none'
  110.     });
  111.  
  112.     linearGradient(valueField, 'top', 'rgba(0,0,0,0)', '#000');
  113.  
  114.     common.extend(this.__hue_field.style, {
  115.       width: '15px',
  116.       height: '100px',
  117.       border: '1px solid #555',
  118.       cursor: 'ns-resize',
  119.       position: 'absolute',
  120.       top: '3px',
  121.       right: '3px'
  122.     });
  123.  
  124.     hueGradient(this.__hue_field);
  125.  
  126.     common.extend(this.__input.style, {
  127.       outline: 'none',
  128. //      width: '120px',
  129.       textAlign: 'center',
  130. //      padding: '4px',
  131. //      marginBottom: '6px',
  132.       color: '#fff',
  133.       border: 0,
  134.       fontWeight: 'bold',
  135.       textShadow: this.__input_textShadow + 'rgba(0,0,0,0.7)'
  136.     });
  137.  
  138.     dom.bind(this.__saturation_field, 'mousedown', fieldDown);
  139.     dom.bind(this.__field_knob, 'mousedown', fieldDown);
  140.  
  141.     dom.bind(this.__hue_field, 'mousedown', function(e) {
  142.       setH(e);
  143.       dom.bind(window, 'mousemove', setH);
  144.       dom.bind(window, 'mouseup', fieldUpH);
  145.     });
  146.  
  147.     function fieldDown(e) {
  148.       setSV(e);
  149.       // document.body.style.cursor = 'none';
  150.       dom.bind(window, 'mousemove', setSV);
  151.       dom.bind(window, 'mouseup', fieldUpSV);
  152.     }
  153.  
  154.     function fieldUpSV() {
  155.       dom.unbind(window, 'mousemove', setSV);
  156.       dom.unbind(window, 'mouseup', fieldUpSV);
  157.       // document.body.style.cursor = 'default';
  158.       onFinish();
  159.     }
  160.  
  161.     function onBlur() {
  162.       const i = interpret(this.value);
  163.       if (i !== false) {
  164.         _this.__color.__state = i;
  165.         _this.setValue(_this.__color.toOriginal());
  166.       } else {
  167.         this.value = _this.__color.toString();
  168.       }
  169.     }
  170.  
  171.     function fieldUpH() {
  172.       dom.unbind(window, 'mousemove', setH);
  173.       dom.unbind(window, 'mouseup', fieldUpH);
  174.       onFinish();
  175.     }
  176.  
  177.     function onFinish() {
  178.       if (_this.__onFinishChange) {
  179.         _this.__onFinishChange.call(_this, _this.__color.toOriginal());
  180.       }
  181.     }
  182.  
  183.     this.__saturation_field.appendChild(valueField);
  184.     this.__selector.appendChild(this.__field_knob);
  185.     this.__selector.appendChild(this.__saturation_field);
  186.     this.__selector.appendChild(this.__hue_field);
  187.     this.__hue_field.appendChild(this.__hue_knob);
  188.  
  189.     this.domElement.appendChild(this.__input);
  190.     this.domElement.appendChild(this.__selector);
  191.  
  192.     this.updateDisplay();
  193.  
  194.     function setSV(e) {
  195.       e.preventDefault();
  196.  
  197.       const fieldRect = _this.__saturation_field.getBoundingClientRect();
  198.       let s = (e.clientX - fieldRect.left) / (fieldRect.right - fieldRect.left);
  199.       let v = 1 - (e.clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top);
  200.  
  201.       if (v > 1) {
  202.         v = 1;
  203.       } else if (v < 0) {
  204.         v = 0;
  205.       }
  206.  
  207.       if (s > 1) {
  208.         s = 1;
  209.       } else if (s < 0) {
  210.         s = 0;
  211.       }
  212.  
  213.       _this.__color.v = v;
  214.       _this.__color.s = s;
  215.  
  216.       _this.setValue(_this.__color.toOriginal());
  217.  
  218.  
  219.       return false;
  220.     }
  221.  
  222.     function setH(e) {
  223.       e.preventDefault();
  224.  
  225.       const fieldRect = _this.__hue_field.getBoundingClientRect();
  226.       let h = 1 - (e.clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top);
  227.  
  228.       if (h > 1) {
  229.         h = 1;
  230.       } else if (h < 0) {
  231.         h = 0;
  232.       }
  233.  
  234.       _this.__color.h = h * 360;
  235.  
  236.       _this.setValue(_this.__color.toOriginal());
  237.  
  238.       return false;
  239.     }
  240.   }
  241.  
  242.   updateDisplay() {
  243.     const i = interpret(this.getValue());
  244.  
  245.     if (i !== false) {
  246.       let mismatch = false;
  247.  
  248.       // Check for mismatch on the interpreted value.
  249.  
  250.       common.each(Color.COMPONENTS, function(component) {
  251.         if (!common.isUndefined(i[component]) && !common.isUndefined(this.__color.__state[component]) &&
  252.           i[component] !== this.__color.__state[component]) {
  253.           mismatch = true;
  254.           return {}; // break
  255.         }
  256.       }, this);
  257.  
  258.       // If nothing diverges, we keep our previous values
  259.       // for statefulness, otherwise we recalculate fresh
  260.       if (mismatch) {
  261.         common.extend(this.__color.__state, i);
  262.       }
  263.     }
  264.  
  265.     common.extend(this.__temp.__state, this.__color.__state);
  266.  
  267.     this.__temp.a = 1;
  268.  
  269.     const flip = (this.__color.v < 0.5 || this.__color.s > 0.5) ? 255 : 0;
  270.     const _flip = 255 - flip;
  271.  
  272.     common.extend(this.__field_knob.style, {
  273.       marginLeft: 100 * this.__color.s - 7 + 'px',
  274.       marginTop: 100 * (1 - this.__color.v) - 7 + 'px',
  275.       backgroundColor: this.__temp.toHexString(),
  276.       border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip + ')'
  277.     });
  278.  
  279.     this.__hue_knob.style.marginTop = (1 - this.__color.h / 360) * 100 + 'px';
  280.  
  281.     this.__temp.s = 1;
  282.     this.__temp.v = 1;
  283.  
  284.     linearGradient(this.__saturation_field, 'left', '#fff', this.__temp.toHexString());
  285.  
  286.     this.__input.value = this.__color.toString();
  287.  
  288.     common.extend(this.__input.style, {
  289.       backgroundColor: this.__color.toHexString(),
  290.       color: 'rgb(' + flip + ',' + flip + ',' + flip + ')',
  291.       textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip + ',.7)'
  292.     });
  293.   }
  294. }
  295.  
  296. const vendors = ['-moz-', '-o-', '-webkit-', '-ms-', ''];
  297.  
  298. function linearGradient(elem, x, a, b) {
  299.   elem.style.background = '';
  300.   common.each(vendors, function(vendor) {
  301.     elem.style.cssText += 'background: ' + vendor + 'linear-gradient(' + x + ', ' + a + ' 0%, ' + b + ' 100%); ';
  302.   });
  303. }
  304.  
  305. function hueGradient(elem) {
  306.   elem.style.background = '';
  307.   elem.style.cssText += 'background: -moz-linear-gradient(top,  #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);';
  308.   elem.style.cssText += 'background: -webkit-linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
  309.   elem.style.cssText += 'background: -o-linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
  310.   elem.style.cssText += 'background: -ms-linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
  311.   elem.style.cssText += 'background: linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
  312. }
  313.  
  314. export default ColorController;
  315.  
downloadColorController.js Source code - Download dat.gui Source code
Related Source Codes/Software:
tmate - Instant Terminal Sharing ht... 2017-04-16
WNXHuntForCity - City find By Objective - C 2017-04-16
st2 - StackStorm (aka IFTTT for Ops) is event-driven aut... 2017-04-16
css-in-js - React: CSS in JS techniques comparison. 2017-04-16
android-viewflow - A horizontal view scroller library for Android 2017-04-16
capybara-webkit - A Capybara driver for headless WebKit to test Java... 2017-04-16
fullstackpython.com - Full Stack Python source with Pelican, Bootstrap a... 2017-04-16
naxsi - NAXSI is an open-source, high performance, low rul... 2017-04-16
ToGL - Direct3D to OpenGL abstraction layer 2017-04-16
LiveScript - LiveScript is a language which compiles to JavaScr... 2017-04-16
MaterialSearchView - Express it in the library to implement SearchView ... 2017-04-23
ptpython - A better Python REPL 2017-04-23
Laravel-4-Bootstrap-Starter-Site - Laravel 4 Starter Site is a basic blog application... 2017-04-23
official-images - Primary source of truth for the Docker "Official I... 2017-04-23
awesome-chrome-devtools - Awesome tooling and resources in the Chrome DevToo... 2017-04-23
EventStore - The open-source, functional database with Complex ... 2017-04-23
screencat - 2017-04-23
viz.js - A hack to put Graphviz on the web. ... 2017-04-23
JKeyboardPanelSwitch - For resolve the layout conflict when keybord & amp... 2017-04-23
mama2 - Mother plan - all firewood high flame 2017-04-23

 Back to top