Skip to content

Commit

Permalink
Add rgb(a) color format attribute + CSS-wide keywords
Browse files Browse the repository at this point in the history
  • Loading branch information
@cyrezdev
cyrezdev committed Apr 28, 2016
1 parent e97aa17 commit a152827
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 20 deletions.
10 changes: 9 additions & 1 deletion libraries/cms/html/behavior.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -578,7 +578,15 @@ public static function colorpicker()
jQuery('.minicolors').each(function() {
jQuery(this).minicolors({
control: jQuery(this).attr('data-control') || 'hue',
position: jQuery(this).attr('data-position') || 'right',
format: jQuery(this).attr('data-validate') === 'color'
? 'hex'
: (jQuery(this).attr('data-format') === 'rgba'
? 'rgb'
: jQuery(this).attr('data-format'))
|| 'hex',
keywords: jQuery(this).attr('data-keywords') || '',
opacity: jQuery(this).attr('data-format') === 'rgba' ? true : false || false,
position: jQuery(this).attr('data-position') || 'default',
theme: 'bootstrap'
});
});
Expand Down
85 changes: 67 additions & 18 deletions libraries/joomla/form/fields/color.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,29 @@ class JFormFieldColor extends JFormField
*/
protected $control = 'hue';

/**
* The format.
*
* @var string
* @since 3.5
*/
protected $format = 'hex';

/**
* The keywords (transparent,initial,inherit).
*
* @var string
* @since 3.5
*/
protected $keywords = '';

/**
* The position.
*
* @var mixed
* @since 3.2
*/
protected $position = 'right';
protected $position = 'default';

/**
* The colors.
Expand Down Expand Up @@ -72,6 +88,8 @@ public function __get($name)
switch ($name)
{
case 'control':
case 'format':
case 'keywords':
case 'exclude':
case 'colors':
case 'split':
Expand All @@ -98,6 +116,12 @@ public function __set($name, $value)
case 'split':
$value = (int) $value;
case 'control':
case 'format':
$this->$name = (string) $value;
break;
case 'keywords':
$this->$name = (string) $value;
break;
case 'exclude':
case 'colors':
$this->$name = (string) $value;
Expand Down Expand Up @@ -129,7 +153,9 @@ public function setup(SimpleXMLElement $element, $value, $group = null)
if ($return)
{
$this->control = isset($this->element['control']) ? (string) $this->element['control'] : 'hue';
$this->position = isset($this->element['position']) ? (string) $this->element['position'] : 'right';
$this->format = isset($this->element['format']) ? (string) $this->element['format'] : 'hex';
$this->keywords = isset($this->element['keywords']) ? (string) $this->element['keywords'] : '';
$this->position = isset($this->element['position']) ? (string) $this->element['position'] : 'default';
$this->colors = (string) $this->element['colors'];
$this->split = isset($this->element['split']) ? (int) $this->element['split'] : 3;
}
Expand All @@ -146,14 +172,19 @@ public function setup(SimpleXMLElement $element, $value, $group = null)
*/
protected function getInput()
{
$lang = JFactory::getLanguage();

// Translate placeholder text
$hint = $this->translateHint ? JText::_($this->hint) : $this->hint;

// Control value can be: hue (default), saturation, brightness, wheel or simple
$control = $this->control;

// Position of the panel can be: right (default), left, top or bottom
$position = ' data-position="' . $this->position . '"';
// Position of the panel can be: right (default), left, top or bottom (default RTL is left)
$position = ' data-position="' . (($lang->isRTL() && $this->position == 'default') ? 'left' : $this->position) . '"';

// Validation of data can be: color (hex color value). Keep for B/C (minicolors.js already auto-validates color)
$validate = $this->validate ? ' data-validate="' . $this->validate . '"' : '';

$onchange = !empty($this->onchange) ? ' onchange="' . $this->onchange . '"' : '';
$class = $this->class;
Expand All @@ -162,21 +193,22 @@ protected function getInput()
$autofocus = $this->autofocus ? ' autofocus' : '';

$color = strtolower($this->value);

if (!$color || in_array($color, array('none', 'transparent')))
{
$color = 'none';
}
elseif ($color['0'] != '#')
{
$color = '#' . $color;
}
$color = ! $color ? '' : $color;

if ($control == 'simple')
{
$class = ' class="' . trim('simplecolors chzn-done ' . $class) . '"';
JHtml::_('behavior.simplecolorpicker');

if (in_array($color, array('none', 'transparent')))
{
$color = 'none';
}
elseif ($color['0'] != '#')
{
$color = '#' . $color;
}

$colors = strtolower($this->colors);

if (empty($colors))
Expand Down Expand Up @@ -242,21 +274,38 @@ protected function getInput()
}
else
{
$class = ' class="' . trim('minicolors ' . $class) . '"';
if (in_array($this->format, array('rgb', 'rgba')) && $this->validate != 'color')
{
$alpha = ($this->format == 'rgba') ? true : false;
$placeholder = $alpha ? 'rgba(0, 0, 0, 0.5)' : 'rgb(0, 0, 0)';
}
else
{
$placeholder = '#rrggbb';
}

$inputclass = ($this->keywords && ! in_array($this->format, array('rgb', 'rgba'))) ? ' keywords' : ' ' . $this->format;
$class = ' class="' . trim('minicolors ' . $class) . ($this->validate == 'color' ? '' : $inputclass) . '"';
$control = $control ? ' data-control="' . $control . '"' : '';
$format = $this->format ? ' data-format="' . $this->format . '"' : '';
$keywords = $this->keywords ? ' data-keywords="' . $this->keywords . '"' : '';
$readonly = $this->readonly ? ' readonly' : '';
$hint = $hint ? ' placeholder="' . $hint . '"' : ' placeholder="#rrggbb"';
$autocomplete = !$this->autocomplete ? ' autocomplete="off"' : '';
$hint = $hint ? ' placeholder="' . $hint . '"' : ' placeholder="' . $placeholder . '"';
$autocomplete = ! $this->autocomplete ? ' autocomplete="off"' : '';

// Force LTR input value in RTL, due to display issues with rgba/hex colors
$direction = $lang->isRTL() ? ' dir="ltr" style="text-align:right"' : '';

// Including fallback code for HTML5 non supported browsers.
// Including fallback code for HTML5 non supported browsers.
JHtml::_('jquery.framework');
JHtml::_('script', 'system/html5fallback.js', false, true);

JHtml::_('behavior.colorpicker');

return '<input type="text" name="' . $this->name . '" id="' . $this->id . '"' . ' value="'
. htmlspecialchars($color, ENT_COMPAT, 'UTF-8') . '"' . $hint . $class . $position . $control
. $readonly . $disabled . $required . $onchange . $autocomplete . $autofocus . '/>';
. $readonly . $disabled . $required . $onchange . $autocomplete . $autofocus
. $format . $keywords . $direction . $validate . '/>';
}
}
}
14 changes: 13 additions & 1 deletion media/jui/css/jquery.minicolors.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,6 +247,18 @@
margin: 0px;
}

/* Input width depending on format */
.minicolors-theme-bootstrap .hex {
width: 65px;
}
.minicolors-theme-bootstrap .keywords {
width: 100px;
}
.minicolors-theme-bootstrap .rgb,
.minicolors-theme-bootstrap .rgba {
width: 200px;
}

/* When the input is disabled */
.minicolors-theme-bootstrap .minicolors-input[disabled] {
background-color: #eee;
Expand Down Expand Up @@ -299,7 +311,7 @@
.minicolors-theme-bootstrap .minicolors-slider,
.minicolors-theme-bootstrap .minicolors-opacity-slider {
top: 6px;
left: 157px;
margin-left: 5px;
}

.minicolors-theme-bootstrap .minicolors-grid {
Expand Down

0 comments on commit a152827

Please sign in to comment.