├── .travis.yml ├── README.md ├── app ├── code │ └── community │ │ └── TheExtensionLab │ │ └── StatusColors │ │ ├── Helper │ │ └── Data.php │ │ ├── Model │ │ ├── Observer.php │ │ └── Resource │ │ │ └── Setup.php │ │ ├── Test │ │ ├── Config │ │ │ └── Main.php │ │ └── Model │ │ │ └── Observer.php │ │ ├── etc │ │ ├── adminhtml.xml │ │ ├── config.xml │ │ └── system.xml │ │ └── sql │ │ └── theextensionlab_statuscolors_setup │ │ └── install-0.1.0.php ├── design │ └── adminhtml │ │ └── default │ │ └── default │ │ ├── layout │ │ └── theextensionlab │ │ │ └── statuscolors.xml │ │ └── template │ │ └── theextensionlab │ │ └── statuscolors │ │ └── sales │ │ └── order │ │ └── view │ │ └── history │ │ └── js-update.phtml └── etc │ └── modules │ └── TheExtensionLab_StatusColors.xml ├── composer.json ├── js └── theextensionlab │ ├── adminhtml │ └── jscolor │ │ ├── arrow.gif │ │ ├── cross.gif │ │ ├── hs.png │ │ ├── hv.png │ │ └── jscolor.js │ └── statuscolors │ └── adminhtml │ └── grid-row.js ├── modman └── skin └── adminhtml └── default └── default └── theextensionlab └── statuscolors └── grid.css /.travis.yml: -------------------------------------------------------------------------------- 1 | language: php 2 | php: 3 | - 5.3 4 | - 5.4 5 | - 5.5 6 | - 5.6 7 | - hhvm 8 | matrix: 9 | allow_failures: 10 | - php: 5.6 11 | - php: hhvm 12 | env: 13 | - MAGENTO_VERSION=magento-ce-1.9.1.0 14 | - MAGENTO_VERSION=magento-ce-1.9.0.1 15 | - MAGENTO_VERSION=magento-ce-1.8.1.0 16 | - MAGENTO_VERSION=magento-ce-1.8.0.0 17 | - MAGENTO_VERSION=magento-ce-1.7.0.2 18 | - MAGENTO_VERSION=magento-ce-1.6.2.0 19 | script: 20 | - curl -sSL https://raw.githubusercontent.com/AOEpeople/MageTestStand/master/setup.sh | bash 21 | notifications: 22 | email: 23 | recipients: 24 | - travis@theextensionlab.com 25 | on_success: always 26 | on_failure: always -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # StatusColors 2 | 3 | [![Build Status](https://travis-ci.org/TheExtensionLab/StatusColors.svg?branch=master)](https://travis-ci.org/TheExtensionLab/StatusColors) 4 | [![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/TheExtensionLab/StatusColors/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/TheExtensionLab/StatusColors/?branch=master) 5 | [![Join the chat at https://gitter.im/TheExtensionLab/StatusColors](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/TheExtensionLab/StatusColors?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 6 | 7 | Adds colours to Magento Order Statuses, so that merchants can see at a glace what status an order is on. (Avaliable for Magento versions 1.6 upwards) 8 | 9 | Installation & Configuration 10 | ------------------ 11 | For up to date installation & configuration instructions please check out the documentation at 12 | [http://docs.theextensionlab.com/status-colors/installation.html](http://docs.theextensionlab.com/status-colors/installation.html) 13 | 14 | Compatibility 15 | ------------- 16 | - Magento >= 1.6 17 | 18 | Extension Overview 19 | ------------------ 20 | Modman: Yes 21 | 22 | Composer: Yes 23 | 24 | GitHub: Private 25 | 26 | Core Hacks: 0 27 | 28 | Class Rewrites: 0 29 | 30 | Uninstallation 31 | -------------- 32 | To uninstall this extension you need to run the following SQL after removing the extension files a list of which can be found in the modman file: 33 | ```sql 34 | ALTER TABLE `sales_order_status` DROP `color`; 35 | ``` 36 | Developer 37 | -------------- 38 | James Anelay - TheExtensionLab 39 | 40 | [http://www.theextensionlab.com](http://www.theextensionlab.com) 41 | 42 | [@JamesAnelay](https://twitter.com/jamesanelay) - [@TheExtensionLab](https://twitter.com/TheExtensionLab) 43 | 44 | Copyright 45 | --------- 46 | (c) 2014 TheExtensionLab 47 | -------------------------------------------------------------------------------- /app/code/community/TheExtensionLab/StatusColors/Helper/Data.php: -------------------------------------------------------------------------------- 1 | 11 | */ 12 | class TheExtensionLab_StatusColors_Helper_Data extends Mage_Core_Helper_Abstract 13 | { 14 | protected $_statusCollection = null; 15 | 16 | public function getStatusColorColumn() 17 | { 18 | $column = array( 19 | 'header' => Mage::helper('sales')->__('Status Color'), 20 | 'type' => 'text', 21 | 'index' => 'color', 22 | 'width' => '200px', 23 | 'frame_callback' => array($this, 'decorateStatusUsingRowData') 24 | ); 25 | 26 | return $column; 27 | } 28 | 29 | public function decorateStatusUsingRowData($value) 30 | { 31 | $statusHtml = ' 32 | ' . $value . ' 33 | '; 34 | return $statusHtml; 35 | } 36 | 37 | public function decorateStatus($value, $row) 38 | { 39 | $rowStatus = $row->getStatus(); 40 | $statusCollection = $this->_getStatusCollection(); 41 | $customColor = null; 42 | 43 | foreach ($statusCollection as $status) { 44 | if ($status->getStatus() == $rowStatus) { 45 | $customColor = $this->getColorOrDefault($status->getColor()); 46 | } 47 | } 48 | 49 | $statusHtml = $this->_wrapInBackgroundColorSpan($value, $customColor); 50 | 51 | return $statusHtml; 52 | } 53 | 54 | private function _wrapInBackgroundColorSpan($value, $backgroundColor) 55 | { 56 | if (!$backgroundColor) { 57 | return $value; 58 | } 59 | 60 | $html = ' 61 | ' . $value . ' 62 | '; 63 | return $html; 64 | } 65 | 66 | public function getStatusColor($code) 67 | { 68 | $status = Mage::getModel('sales/order_status') 69 | ->load($code); 70 | return $this->getColorOrDefault($status->getColor()); 71 | } 72 | 73 | public function getColorOrDefault($color) 74 | { 75 | if (empty($color)) { 76 | return Mage::getStoreConfig('admin/order_grid/default_status_color'); 77 | } 78 | return $color; 79 | } 80 | 81 | protected function _getStatusCollection() 82 | { 83 | if ($this->_statusCollection === null) { 84 | $this->_statusCollection = Mage::getModel('sales/order_status')->getCollection(); 85 | } 86 | 87 | return $this->_statusCollection; 88 | } 89 | 90 | } -------------------------------------------------------------------------------- /app/code/community/TheExtensionLab/StatusColors/Model/Observer.php: -------------------------------------------------------------------------------- 1 | 11 | */ 12 | class TheExtensionLab_StatusColors_Model_Observer 13 | { 14 | protected $_currentOrderGridBlockClass = 'Mage_Adminhtml_Block_Sales_Order_Grid'; 15 | 16 | public function adminhtmlBlockHtmlBefore(Varien_Event_Observer $observer) 17 | { 18 | $block = $observer->getEvent()->getBlock(); 19 | 20 | $this->_catchRewrittenOrderGridThatDoesntExtendOriginalClass(); 21 | 22 | if ($this->_isBlockOrderGrid($block)) { 23 | $this->_addDecorateStatusFrameCallback($block->getColumn('status')); 24 | return $this; 25 | } 26 | 27 | if ($this->_isStatusFormBlock($block)) { 28 | $form = $block->getForm(); 29 | $elements = $form->getElements(); 30 | foreach ($elements as $element) { 31 | if ($this->_isBaseFieldset($element)) { 32 | $this->_addColorInputFeild($element); 33 | $this->_populateFormWithNewFeild($form); 34 | } 35 | } 36 | } 37 | 38 | return $this; 39 | } 40 | 41 | private function _catchRewrittenOrderGridThatDoesntExtendOriginalClass() 42 | { 43 | $rewriteNode = (string)Mage::getConfig()->getNode('global/blocks/adminhtml/rewrite/sales_order_grid'); 44 | 45 | if ($rewriteNode) { 46 | $this->_currentOrderGridBlockClass = $rewriteNode; 47 | } 48 | 49 | return $this->_currentOrderGridBlockClass; 50 | } 51 | 52 | private function _isBlockOrderGrid(Mage_Core_Block_Abstract $block) 53 | { 54 | return $block instanceof $this->_currentOrderGridBlockClass; 55 | } 56 | 57 | private function _addDecorateStatusFrameCallback($column) 58 | { 59 | $column->setFrameCallback(array($this->getHelper(), 'decorateStatus')); 60 | } 61 | 62 | 63 | private function _isStatusFormBlock(Mage_Core_Block_Abstract $block) 64 | { 65 | return $block instanceof Mage_Adminhtml_Block_Sales_Order_Status_Edit_Form 66 | || $block instanceof Mage_Adminhtml_Block_Sales_Order_Status_New_Form; 67 | } 68 | 69 | private function _isBaseFieldset($element){ 70 | return $element->getId() == "base_fieldset"; 71 | } 72 | 73 | private function _addColorInputFeild($fieldset) 74 | { 75 | $fieldset->addField( 76 | 'color', 'text', 77 | array( 78 | 'name' => 'color', 79 | 'label' => Mage::helper('sales')->__('Status Color'), 80 | 'class' => 'color {hash:true,adjust:false}' 81 | ) 82 | ); 83 | } 84 | 85 | private function _populateFormWithNewFeild($form) 86 | { 87 | $model = Mage::registry('current_status'); 88 | if ($model) { 89 | $form->addValues($model->getData()); 90 | } 91 | } 92 | 93 | public function coreBlockAbstractToHtmlAfter(Varien_Event_Observer $observer) 94 | { 95 | $block = $observer->getEvent()->getBlock(); 96 | $transport = $observer->getEvent()->getTransport(); 97 | 98 | if($this->_isOrderInfoBlock($block)){ 99 | $customColor = Mage::helper('theextensionlab_statuscolors')->getStatusColor( 100 | $block->getOrder()->getStatus() 101 | ); 102 | 103 | $html = $this->_addBackgroundColorToStatusElement($transport->getHtml(),$customColor); 104 | 105 | $transport->setHtml($html); 106 | } 107 | 108 | return $this; 109 | } 110 | 111 | private function _addBackgroundColorToStatusElement($html,$backgroundColor){ 112 | $html = preg_replace( 113 | '/id="order_status"/', 114 | '$0 class="custom-color" style="background-color:' . $backgroundColor . ';"', 115 | $html 116 | ); 117 | return $html; 118 | } 119 | 120 | private function _isOrderInfoBlock($block){ 121 | return $block->getNameInLayout() == "order_info"; 122 | } 123 | 124 | protected function getHelper() 125 | { 126 | return Mage::helper('theextensionlab_statuscolors'); 127 | } 128 | 129 | } 130 | -------------------------------------------------------------------------------- /app/code/community/TheExtensionLab/StatusColors/Model/Resource/Setup.php: -------------------------------------------------------------------------------- 1 | addNotice( 13 | 'You have successfully installed TheExtensionLab_StatusColors: 14 | Status colors can be configured in System > Order Statuses and 15 | other config options found at System > Configuration > Advanced > Admin > Order Grid', 16 | 'For full up to date documenation see '.$docUrl.'', 17 | 'http://docs.theextensionlab.com/status-colors/configuration.html', 18 | true 19 | ); 20 | } 21 | } -------------------------------------------------------------------------------- /app/code/community/TheExtensionLab/StatusColors/Test/Config/Main.php: -------------------------------------------------------------------------------- 1 | assertSetupResourceDefined(); 9 | $this->assertSetupResourceExists(); 10 | } 11 | 12 | public function testClassAliases() 13 | { 14 | $this->assertModelAlias('theextensionlab_statuscolors/observer','TheExtensionLab_StatusColors_Model_Observer'); 15 | $this->assertResourceModelAlias('theextensionlab_statuscolors/setup','TheExtensionLab_StatusColors_Model_Resource_Setup'); 16 | $this->assertHelperAlias('theextensionlab_statuscolors','TheExtensionLab_StatusColors_Helper_Data'); 17 | } 18 | 19 | public function testLayoutFiles() 20 | { 21 | $this->assertLayoutFileDefined('adminhtml','theextensionlab/statuscolors.xml'); 22 | $this->assertLayoutFileExists('adminhtml','theextensionlab/statuscolors.xml'); 23 | } 24 | 25 | public function testObserverConfig() 26 | { 27 | $this->assertEventObserverDefined( 28 | 'adminhtml', 29 | 'adminhtml_block_html_before', 30 | 'TheExtensionLab_StatusColors_Model_Observer', 31 | 'adminhtmlBlockHtmlBefore' 32 | ); 33 | 34 | $this->assertEventObserverDefined( 35 | 'adminhtml', 36 | 'core_block_abstract_to_html_after', 37 | 'TheExtensionLab_StatusColors_Model_Observer', 38 | 'coreBlockAbstractToHtmlAfter' 39 | ); 40 | } 41 | 42 | } -------------------------------------------------------------------------------- /app/code/community/TheExtensionLab/StatusColors/Test/Model/Observer.php: -------------------------------------------------------------------------------- 1 | assertInstanceOf('TheExtensionLab_StatusColors_Model_Observer', $observer); 11 | return $observer; 12 | } 13 | } -------------------------------------------------------------------------------- /app/code/community/TheExtensionLab/StatusColors/etc/adminhtml.xml: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Status Colors 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /app/code/community/TheExtensionLab/StatusColors/etc/config.xml: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | 13 | 1.3.1 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | TheExtensionLab_StatusColors_Helper 22 | 23 | 24 | 25 | 26 | 27 | TheExtensionLab_StatusColors_Model 28 | theextensionlab_statuscolors_resource 29 | 30 | 31 | 32 | TheExtensionLab_StatusColors_Model_Resource 33 | 34 | 35 | 36 | 37 | 38 | 39 | TheExtensionLab_StatusColors 40 | TheExtensionLab_StatusColors_Model_Resource_Setup 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | theextensionlab/statuscolors.xml 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | TheExtensionLab_StatusColors_Model_Observer 60 | adminhtmlBlockHtmlBefore 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | TheExtensionLab_StatusColors_Model_Observer 69 | coreBlockAbstractToHtmlAfter 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | #EAEAEA 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /app/code/community/TheExtensionLab/StatusColors/etc/system.xml: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | text 17 | 100 18 | 1 19 | 1 20 | 1 21 | 22 | 23 | 24 | text 25 | 10 26 | 1 27 | 0 28 | 0 29 | color {hash:true,adjust:false} 30 | 31 | 32 | 33 | select 34 | adminhtml/system_config_source_yesno 35 | 20 36 | 1 37 | 0 38 | 0 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /app/code/community/TheExtensionLab/StatusColors/sql/theextensionlab_statuscolors_setup/install-0.1.0.php: -------------------------------------------------------------------------------- 1 | startSetup(); 7 | $installer->getConnection() 8 | ->addColumn($installer->getTable('sales/order_status'), 9 | 'color', 10 | array( 11 | 'type' => Varien_Db_Ddl_Table::TYPE_TEXT, 12 | 'nullable' => true, 13 | 'default' => null, 14 | 'comment' => 'Color' 15 | ) 16 | ); 17 | 18 | $installer->endSetup(); 19 | 20 | $installer->addInstallationSuccessfulNotification(); -------------------------------------------------------------------------------- /app/design/adminhtml/default/default/layout/theextensionlab/statuscolors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | theextensionlab/statuscolors/grid.css 7 | 8 | 9 | 10 | 11 | 12 | 13 | theextensionlab/adminhtml/jscolor/jscolor.js 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | theextensionlab/statuscolors/adminhtml/grid-row.js 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | status_color 41 | 42 | state 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /app/design/adminhtml/default/default/template/theextensionlab/statuscolors/sales/order/view/history/js-update.phtml: -------------------------------------------------------------------------------- 1 | 6 | 7 | getColorOrDefault( 8 | Mage::helper('theextensionlab_statuscolors')->getStatusColor( 9 | $this->getOrder()->getStatus() 10 | ) 11 | ); 12 | ?> 13 | 14 | -------------------------------------------------------------------------------- /app/etc/modules/TheExtensionLab_StatusColors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | true 6 | community 7 | 8 | 9 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"theextensionlab/statuscolors", 3 | "type":"magento-module", 4 | "homepage":"http://www.theextensionlab.com/magento/status-colors", 5 | "description":"Magento extension to add colours to Magento Order Statuses", 6 | "authors":[ 7 | { 8 | "name":"James Anelay", 9 | "email":"james@theextensionlab.com" 10 | } 11 | ], 12 | "require":{ 13 | "magento-hackathon/magento-composer-installer":"*" 14 | }, 15 | "require-dev": { 16 | "ecomdev/ecomdev_phpunit": "~0.3.7" 17 | }, 18 | "repositories": [ 19 | { 20 | "type": "composer", 21 | "url": "http://packages.firegento.com" 22 | } 23 | ] 24 | } -------------------------------------------------------------------------------- /js/theextensionlab/adminhtml/jscolor/arrow.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TheExtensionLab/StatusColors/78d17d78fcdc3f3d6a635b04b4f555f5e5721659/js/theextensionlab/adminhtml/jscolor/arrow.gif -------------------------------------------------------------------------------- /js/theextensionlab/adminhtml/jscolor/cross.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TheExtensionLab/StatusColors/78d17d78fcdc3f3d6a635b04b4f555f5e5721659/js/theextensionlab/adminhtml/jscolor/cross.gif -------------------------------------------------------------------------------- /js/theextensionlab/adminhtml/jscolor/hs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TheExtensionLab/StatusColors/78d17d78fcdc3f3d6a635b04b4f555f5e5721659/js/theextensionlab/adminhtml/jscolor/hs.png -------------------------------------------------------------------------------- /js/theextensionlab/adminhtml/jscolor/hv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TheExtensionLab/StatusColors/78d17d78fcdc3f3d6a635b04b4f555f5e5721659/js/theextensionlab/adminhtml/jscolor/hv.png -------------------------------------------------------------------------------- /js/theextensionlab/adminhtml/jscolor/jscolor.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jscolor, JavaScript Color Picker 3 | * 4 | * @version 1.4.4 5 | * @license GNU Lesser General Public License, http://www.gnu.org/copyleft/lesser.html 6 | * @author Jan Odvarko, http://odvarko.cz 7 | * @created 2008-06-15 8 | * @updated 2014-12-09 9 | * @link http://jscolor.com 10 | */ 11 | 12 | 13 | var jscolor = { 14 | 15 | 16 | dir : '', // location of jscolor directory (leave empty to autodetect) 17 | bindClass : 'color', // class name 18 | binding : true, // automatic binding via 19 | preloading : true, // use image preloading? 20 | 21 | 22 | install : function() { 23 | jscolor.addEvent(window, 'load', jscolor.init); 24 | }, 25 | 26 | 27 | init : function() { 28 | if(jscolor.binding) { 29 | jscolor.bind(); 30 | } 31 | if(jscolor.preloading) { 32 | jscolor.preload(); 33 | } 34 | }, 35 | 36 | 37 | getDir : function() { 38 | if(!jscolor.dir) { 39 | var detected = jscolor.detectDir(); 40 | jscolor.dir = detected!==false ? detected : 'jscolor/'; 41 | } 42 | return jscolor.dir; 43 | }, 44 | 45 | 46 | detectDir : function() { 47 | var base = location.href; 48 | 49 | var e = document.getElementsByTagName('base'); 50 | for(var i=0; i vs[a] ? 406 | (-vp[a]+tp[a]+ts[a]/2 > vs[a]/2 && tp[a]+ts[a]-ps[a] >= 0 ? tp[a]+ts[a]-ps[a] : tp[a]) : 407 | tp[a], 408 | -vp[b]+tp[b]+ts[b]+ps[b]-l+l*c > vs[b] ? 409 | (-vp[b]+tp[b]+ts[b]/2 > vs[b]/2 && tp[b]+ts[b]-l-l*c >= 0 ? tp[b]+ts[b]-l-l*c : tp[b]+ts[b]-l+l*c) : 410 | (tp[b]+ts[b]-l+l*c >= 0 ? tp[b]+ts[b]-l+l*c : tp[b]+ts[b]-l-l*c) 411 | ]; 412 | } 413 | drawPicker(pp[a], pp[b]); 414 | } 415 | }; 416 | 417 | 418 | this.importColor = function() { 419 | if(!valueElement) { 420 | this.exportColor(); 421 | } else { 422 | if(!this.adjust) { 423 | if(!this.fromString(valueElement.value, leaveValue)) { 424 | styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage; 425 | styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor; 426 | styleElement.style.color = styleElement.jscStyle.color; 427 | this.exportColor(leaveValue | leaveStyle); 428 | } 429 | } else if(!this.required && /^\s*$/.test(valueElement.value)) { 430 | valueElement.value = ''; 431 | styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage; 432 | styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor; 433 | styleElement.style.color = styleElement.jscStyle.color; 434 | this.exportColor(leaveValue | leaveStyle); 435 | 436 | } else if(this.fromString(valueElement.value)) { 437 | // OK 438 | } else { 439 | this.exportColor(); 440 | } 441 | } 442 | }; 443 | 444 | 445 | this.exportColor = function(flags) { 446 | if(!(flags & leaveValue) && valueElement) { 447 | var value = this.toString(); 448 | if(this.caps) { value = value.toUpperCase(); } 449 | if(this.hash) { value = '#'+value; } 450 | valueElement.value = value; 451 | } 452 | if(!(flags & leaveStyle) && styleElement) { 453 | styleElement.style.backgroundImage = "none"; 454 | styleElement.style.backgroundColor = 455 | '#'+this.toString(); 456 | styleElement.style.color = 457 | 0.213 * this.rgb[0] + 458 | 0.715 * this.rgb[1] + 459 | 0.072 * this.rgb[2] 460 | < 0.5 ? '#FFF' : '#000'; 461 | } 462 | if(!(flags & leavePad) && isPickerOwner()) { 463 | redrawPad(); 464 | } 465 | if(!(flags & leaveSld) && isPickerOwner()) { 466 | redrawSld(); 467 | } 468 | }; 469 | 470 | 471 | this.fromHSV = function(h, s, v, flags) { // null = don't change 472 | if(h !== null) { h = Math.max(0.0, this.minH, Math.min(6.0, this.maxH, h)); } 473 | if(s !== null) { s = Math.max(0.0, this.minS, Math.min(1.0, this.maxS, s)); } 474 | if(v !== null) { v = Math.max(0.0, this.minV, Math.min(1.0, this.maxV, v)); } 475 | 476 | this.rgb = HSV_RGB( 477 | h===null ? this.hsv[0] : (this.hsv[0]=h), 478 | s===null ? this.hsv[1] : (this.hsv[1]=s), 479 | v===null ? this.hsv[2] : (this.hsv[2]=v) 480 | ); 481 | 482 | this.exportColor(flags); 483 | }; 484 | 485 | 486 | this.fromRGB = function(r, g, b, flags) { // null = don't change 487 | if(r !== null) { r = Math.max(0.0, Math.min(1.0, r)); } 488 | if(g !== null) { g = Math.max(0.0, Math.min(1.0, g)); } 489 | if(b !== null) { b = Math.max(0.0, Math.min(1.0, b)); } 490 | 491 | var hsv = RGB_HSV( 492 | r===null ? this.rgb[0] : r, 493 | g===null ? this.rgb[1] : g, 494 | b===null ? this.rgb[2] : b 495 | ); 496 | if(hsv[0] !== null) { 497 | this.hsv[0] = Math.max(0.0, this.minH, Math.min(6.0, this.maxH, hsv[0])); 498 | } 499 | if(hsv[2] !== 0) { 500 | this.hsv[1] = hsv[1]===null ? null : Math.max(0.0, this.minS, Math.min(1.0, this.maxS, hsv[1])); 501 | } 502 | this.hsv[2] = hsv[2]===null ? null : Math.max(0.0, this.minV, Math.min(1.0, this.maxV, hsv[2])); 503 | 504 | // update RGB according to final HSV, as some values might be trimmed 505 | var rgb = HSV_RGB(this.hsv[0], this.hsv[1], this.hsv[2]); 506 | this.rgb[0] = rgb[0]; 507 | this.rgb[1] = rgb[1]; 508 | this.rgb[2] = rgb[2]; 509 | 510 | this.exportColor(flags); 511 | }; 512 | 513 | 514 | this.fromString = function(hex, flags) { 515 | var m = hex.match(/^\W*([0-9A-F]{3}([0-9A-F]{3})?)\W*$/i); 516 | if(!m) { 517 | return false; 518 | } else { 519 | if(m[1].length === 6) { // 6-char notation 520 | this.fromRGB( 521 | parseInt(m[1].substr(0,2),16) / 255, 522 | parseInt(m[1].substr(2,2),16) / 255, 523 | parseInt(m[1].substr(4,2),16) / 255, 524 | flags 525 | ); 526 | } else { // 3-char notation 527 | this.fromRGB( 528 | parseInt(m[1].charAt(0)+m[1].charAt(0),16) / 255, 529 | parseInt(m[1].charAt(1)+m[1].charAt(1),16) / 255, 530 | parseInt(m[1].charAt(2)+m[1].charAt(2),16) / 255, 531 | flags 532 | ); 533 | } 534 | return true; 535 | } 536 | }; 537 | 538 | 539 | this.toString = function() { 540 | return ( 541 | (0x100 | Math.round(255*this.rgb[0])).toString(16).substr(1) + 542 | (0x100 | Math.round(255*this.rgb[1])).toString(16).substr(1) + 543 | (0x100 | Math.round(255*this.rgb[2])).toString(16).substr(1) 544 | ); 545 | }; 546 | 547 | 548 | function RGB_HSV(r, g, b) { 549 | var n = Math.min(Math.min(r,g),b); 550 | var v = Math.max(Math.max(r,g),b); 551 | var m = v - n; 552 | if(m === 0) { return [ null, 0, v ]; } 553 | var h = r===n ? 3+(b-g)/m : (g===n ? 5+(r-b)/m : 1+(g-r)/m); 554 | return [ h===6?0:h, m/v, v ]; 555 | } 556 | 557 | 558 | function HSV_RGB(h, s, v) { 559 | if(h === null) { return [ v, v, v ]; } 560 | var i = Math.floor(h); 561 | var f = i%2 ? h-i : 1-(h-i); 562 | var m = v * (1 - s); 563 | var n = v * (1 - s*f); 564 | switch(i) { 565 | case 6: 566 | case 0: return [v,n,m]; 567 | case 1: return [n,v,m]; 568 | case 2: return [m,v,n]; 569 | case 3: return [m,n,v]; 570 | case 4: return [n,m,v]; 571 | case 5: return [v,m,n]; 572 | } 573 | } 574 | 575 | 576 | function removePicker() { 577 | delete jscolor.picker.owner; 578 | document.getElementsByTagName('body')[0].removeChild(jscolor.picker.boxB); 579 | } 580 | 581 | 582 | function drawPicker(x, y) { 583 | if(!jscolor.picker) { 584 | jscolor.picker = { 585 | box : document.createElement('div'), 586 | boxB : document.createElement('div'), 587 | pad : document.createElement('div'), 588 | padB : document.createElement('div'), 589 | padM : document.createElement('div'), 590 | sld : document.createElement('div'), 591 | sldB : document.createElement('div'), 592 | sldM : document.createElement('div'), 593 | btn : document.createElement('div'), 594 | btnS : document.createElement('span'), 595 | btnT : document.createTextNode(THIS.pickerCloseText) 596 | }; 597 | for(var i=0,segSize=4; i