| 1 |
<?php if (! defined('ABSPATH')) exit; // Exit if accessed directly |
| 2 |
class HC3_Ui_Element_Input_Colorpicker extends HC3_Ui_Abstract_Input |
| 3 |
{ |
| 4 |
protected $el = 'input'; |
| 5 |
protected $uiType = 'input/colorpicker'; |
| 6 |
|
| 7 |
protected $colors = array( |
| 8 |
'#cbe86b', '#ffb3a7', '#89c4f4', '#f5d76e', '#be90d4', '#fcf13a', '#ffffbb', '#ffbbff', |
| 9 |
'#87d37c', '#ff8000', '#73faa9', '#c8e9fc', '#cb9987', '#cfd8dc', '#99bb99', '#99bbbb', |
| 10 |
'#bbbbff', '#dcedc8', '#800000', '#8b0000', '#a52a2a', '#b22222', '#dc143c', '#ff0000', |
| 11 |
'#ff6347', '#ff7f50', '#cd5c5c', '#f08080', '#e9967a', '#fa8072', '#ffa07a', '#ff4500', |
| 12 |
'#ff8c00', '#ffa500', '#ffd700', '#b8860b', '#daa520', '#eee8aa', '#bdb76b', '#f0e68c', |
| 13 |
'#808000', '#ffff00', '#9acd32', '#556b2f', '#6b8e23', '#7cfc00', '#7fff00', '#adff2f', |
| 14 |
'#006400', '#008000', '#228b22', '#00ff00', '#32cd32', '#90ee90', '#98fb98', '#8fbc8f', |
| 15 |
'#00fa9a', '#00ff7f', '#2e8b57', '#66cdaa', '#3cb371', '#20b2aa', '#2f4f4f', '#008080', |
| 16 |
'#008b8b', '#00ffff', '#00ffff', '#e0ffff', '#00ced1', '#40e0d0', '#48d1cc', '#afeeee', |
| 17 |
'#7fffd4', '#b0e0e6', '#5f9ea0', '#4682b4', '#6495ed', '#00bfff', '#1e90ff', '#add8e6', |
| 18 |
'#87ceeb', '#87cefa', '#191970', '#000080', '#00008b', '#0000cd', '#0000ff', '#4169e1', |
| 19 |
'#8a2be2', '#4b0082', '#483d8b', '#6a5acd', '#7b68ee', '#9370db', '#8b008b', '#9400d3', |
| 20 |
'#9932cc', '#ba55d3', '#800080', '#d8bfd8', '#dda0dd', '#ee82ee', '#ff00ff', '#da70d6', |
| 21 |
'#c71585', '#db7093', '#ff1493', '#ff69b4', '#ffb6c1', '#ffc0cb', '#faebd7', '#f5f5dc', |
| 22 |
'#ffe4c4', '#ffebcd', '#f5deb3', '#fff8dc', '#fffacd', '#fafad2', '#ffffe0', '#8b4513', |
| 23 |
'#a0522d', '#d2691e', '#cd853f', '#f4a460', '#deb887', '#d2b48c', '#bc8f8f', '#ffe4b5', |
| 24 |
'#ffdead', '#ffdab9', '#ffe4e1', '#fff0f5', '#faf0e6', '#fdf5e6', '#ffefd5', '#fff5ee', |
| 25 |
'#f5fffa', '#708090', '#778899', '#b0c4de', '#e6e6fa', '#fffaf0', '#f0f8ff', '#f8f8ff', |
| 26 |
'#f0fff0', '#fffff0', '#f0ffff', '#fffafa', '#696969', '#808080', '#a9a9a9', '#c0c0c0', |
| 27 |
'#d3d3d3', '#dcdcdc', '#f5f5f5', |
| 28 |
); |
| 29 |
|
| 30 |
public function render() |
| 31 |
{ |
| 32 |
if( ! $this->value ){ |
| 33 |
$this->value = $this->colors[0]; |
| 34 |
} |
| 35 |
|
| 36 |
$hidden = $this->htmlFactory->makeInputHidden( $this->name(), $this->value ); |
| 37 |
|
| 38 |
$title = $this->htmlFactory->makeElement('span', ' ') |
| 39 |
->addAttr('class', 'hc-btn') |
| 40 |
->addAttr('style', 'background-color: ' . $this->value . ';') |
| 41 |
|
| 42 |
->addAttr('class', 'hc-inline-block') |
| 43 |
->addAttr('class', 'hc-m1') |
| 44 |
->addAttr('class', 'hc-px2') |
| 45 |
->addAttr('class', 'hc-py1') |
| 46 |
->addAttr('class', 'hc-border') |
| 47 |
->addAttr('class', 'hc-rounded') |
| 48 |
->addAttr('class', 'hcj-colorpicker-display') |
| 49 |
; |
| 50 |
|
| 51 |
$options = array(); |
| 52 |
foreach( $this->colors as $color ){ |
| 53 |
$option = $this->htmlFactory->makeElement('a', ' ') |
| 54 |
->addAttr('class', 'hc-btn') |
| 55 |
->addAttr('style', 'background-color: ' . $color . ';') |
| 56 |
->addAttr('class', 'hc-inline-block') |
| 57 |
->addAttr('class', 'hc-m1') |
| 58 |
->addAttr('class', 'hc-px2') |
| 59 |
->addAttr('class', 'hc-py1') |
| 60 |
->addAttr('class', 'hc-border') |
| 61 |
->addAttr('class', 'hc-rounded') |
| 62 |
->addAttr('data-color', $color) |
| 63 |
->addAttr('class', 'hcj-colorpicker-selector') |
| 64 |
; |
| 65 |
$options[] = $option; |
| 66 |
} |
| 67 |
|
| 68 |
$options = $this->htmlFactory->makeCollection( $options ); |
| 69 |
|
| 70 |
$display = $this->htmlFactory->makeCollapse( $title, $options ); |
| 71 |
|
| 72 |
$out = $this->htmlFactory->makeCollection( array($hidden, $display) ); |
| 73 |
$out = $this->htmlFactory->makeBlock( $out ) |
| 74 |
->addAttr('class', 'hcj-colorpicker-input') |
| 75 |
; |
| 76 |
|
| 77 |
if( strlen($this->label) ){ |
| 78 |
if( strlen($this->label) ){ |
| 79 |
$out = $this->htmlFactory->makeLabelled( $this->label, $out, $this->htmlId() ); |
| 80 |
} |
| 81 |
} |
| 82 |
|
| 83 |
return $out; |
| 84 |
} |
| 85 |
} |
