Implement a color field for JForm. #147

Merged
merged 1 commit into from Jul 29, 2011
Jump to file or symbol
Failed to load files and symbols.
+917 −0
Split
@@ -0,0 +1,65 @@
+<?php
+/**
+ * @package Joomla.Platform
+ * @subpackage Form
+ *
+ * @copyright Copyright (C) 2005 - 2011 Open Source Matters, Inc. All rights reserved.
+ * @license GNU General Public License version 2 or later; see LICENSE
+ */
+
+defined('JPATH_PLATFORM') or die;
+
+jimport('joomla.form.formfield');
+
+/**
+ * Color Form Field class for the Joomla Framework.
+ * This implementation is designed to be compatible with HTML5's <input type="color">
+ *
+ * @package Joomla.Platform
+ * @subpackage Form
+ * @since 11.3
+ * @link http://www.w3.org/TR/html-markup/input.color.html
+ */
+class JFormFieldColor extends JFormField
+{
+ /**
+ * The form field type.
+ *
+ * @var string
+ * @since 11.3
+ */
+ protected $type = 'Color';
+
+ /**
+ * Method to get the field input markup.
+ *
+ * @return string The field input markup.
+ * @since 11.3
+ */
+ protected function getInput()
+ {
+ // Initialize some field attributes.
+ $size = $this->element['size'] ? ' size="'.(int) $this->element['size'].'"' : '';
+ $classes = (string) $this->element['class'];
+ $disabled = ((string) $this->element['disabled'] == 'true') ? ' disabled="disabled"' : '';
+
+ if (!$disabled) {
+ JHtml::_('behavior.colorpicker');
+ $classes .= ' input-colorpicker';
+ }
+
+ if (empty($this->value)) {
+ // A color field can't be empty, we default to black. This is the same as the HTML5 spec.
+ $this->value = '#000000';
+ }
+
+ // Initialize JavaScript field attributes.
+ $onchange = $this->element['onchange'] ? ' onchange="'.(string) $this->element['onchange'].'"' : '';
+
+ $class = $classes ? ' class="'.trim($classes).'"' : '';
+
+ return '<input type="text" name="'.$this->name.'" id="'.$this->id.'"' .
+ ' value="'.htmlspecialchars($this->value, ENT_COMPAT, 'UTF-8').'"' .
+ $class.$size.$disabled.$onchange.'/>';
+ }
+}
@@ -0,0 +1,64 @@
+<?php
+/**
+ * @package Joomla.Platform
+ * @subpackage Form
+ *
+ * @copyright Copyright (C) 2005 - 2011 Open Source Matters, Inc. All rights reserved.
+ * @license GNU General Public License version 2 or later; see LICENSE
+ */
+
+defined('JPATH_PLATFORM') or die;
+
+jimport('joomla.form.formrule');
+
+/**
+ * Form Rule class for the Joomla Framework.
+ *
+ * @package Joomla.Framework
+ * @subpackage Form
+ * @since 11.2
+ */
+class JFormRuleColor extends JFormRule
+{
+ /**
+ * Method to test for a valid color in hexadecimaö.
+ *
+ * @param object $element The JXMLElement object representing the <field /> tag for the
+ * form field object.
+ * @param mixed $value The form field value to validate.
+ * @param string $group The field name group control value. This acts as as an array
+ * container for the field. For example if the field has name="foo"
+ * and the group value is set to "bar" then the full field name
+ * would end up being "bar[foo]".
+ * @param object $input An optional JRegistry object with the entire data set to validate
+ * against the entire form.
+ * @param object $form The form object for which the field is being tested.
+ *
+ * @return boolean True if the value is valid, false otherwise.
+ *
+ * @since 11.2
+ * @throws JException on invalid rule.
+ */
+ public function test(& $element, $value, $group = null, & $input = null, & $form = null)
+ {
+ $value = trim($value);
+ if (empty($value)) {
+ // A color field can't be empty, we default to black. This is the same as the HTML5 spec.
+ $value = '#000000';
+ return true;
+ }
+
+ // Remove the leading # if present to validate the numeric part
+ $value = ltrim($value, '#');
+
+ // The value must be 6 or 6 characters long
+ if (!((strlen($value) == 7 || strlen($value) == 4) && ctype_xdigit($value))) {
+ return false;
+ }
+
+ // Prepend the # again
+ $value = '#'.$value;
+
+ return true;
+ }
+}
@@ -638,6 +638,56 @@ public static function calendar()
}
/**
+ * Add unobtrusive javascript support for a color picker.
+ *
+ * @return void
+ * @since 11.2
+ */
+ public static function colorpicker()
+ {
+ static $loaded = false;
+
+ // Only load once
+ if ($loaded) {
+ return;
+ }
+
+ // Include MooTools framework
+ self::framework(true);
+
+ //Add uncompressed versions when debug is enabled
+ $uncompressed = JFactory::getConfig()->get('debug') ? '-uncompressed' : '';
+ JHtml::_('stylesheet','system/mooRainbow.css', array('media' => 'all'), true);
+ JHtml::_('script','system/mooRainbow.js', false, true);
+
+ JFactory::getDocument()->addScriptDeclaration("
+ window.addEvent('domready', function(){
+ var nativeColorUi = false;
+ if (Browser.opera && (Browser.version >= 11.5)) {
+ nativeColorUi = true;
+ }
+ var elems = $$('.input-colorpicker');
+ elems.each(function(item){
+ if (nativeColorUi) {
+ item.type = 'color';
+ } else {
+ new MooRainbow(item,
+ {
+ imgPath: '".JURI::root(true)."/media/system/images/mooRainbow/',
+ onComplete: function(color) {
+ this.element.value = color.hex;
+ },
+ startColor: item.value.hexToRgb(true)
+ });
+ }
+ });
+ });
+ ");
+
+ $loaded = true;
+ }
+
+ /**
* Keep session alive, for example, while editing or creating an article.
*
* @return void
@@ -0,0 +1,140 @@
+/***
+ * - mooRainbow: defaultCSS
+ * author: w00fz <w00fzPuppy@gmail.com>
+ */
+
+{ font-size: 11px; color: #000; }
+
+.moor-box {
+ width: 125px;
+ height: 110px;
+ border: 1px solid #636163;
+ background-color: #f9f9f9;
+}
+.moor-overlayBox {
+ width: 80px; /* Width and Height of the overlay must be setted here: default 256x256 */
+ height: 80px;
+ margin-top: 3px;
+ margin-left: 3px;
+ border: 1px solid #000;
+}
+.moor-slider {
+ border: 1px solid #000;
+ margin-top: 3px;
+ margin-left: 86px;
+ width: 10px; /* if you want a bigger or smaller slider... */
+ height: 80px;
+}
+.moor-colorBox {
+ /*display: none;*/
+ visibility: hidden;
+ border: 1px solid #000;
+ width: 59px;
+ height: 68px;
+ margin-top: 20px;
+ margin-left: 315px;
+}
+
+.moor-currentColor { /* Bottom Box Color, the backup one */
+ /*display: none;*/
+ visibility: hidden;
+ margin-top: 55px;
+ margin-left: 316px;
+ width: 59px;
+ height: 34px;
+}
+.moor-okButton {
+ font-family: Tahoma;
+ font-weight: bold;
+ font-size: 8px;
+ margin-top: 90px;
+ margin-left: 3px;
+ background: #e6e6e6;
+ height: 15px;
+ border: 1px solid #d6d6d6;
+ border-left-color: #f5f5f5;
+ border-top-color: #f5f5f5;
+}
+label {
+ font-family: mono;
+}
+/* Following are just <label> */
+.moor-rLabel {
+ /*display: none;*/
+ visibility: hidden;
+ margin-top: 100px;
+ margin-left: 315px;
+}
+.moor-gLabel {
+ /*display: none;*/
+ visibility: hidden;
+ margin-top: 125px;
+ margin-left: 315px;
+}
+.moor-bLabel {
+ /*display: none;*/
+ visibility: hidden;
+ margin-top: 150px;
+ margin-left: 315px;
+}
+.moor-HueLabel {
+ /*display: none;*/
+ visibility: hidden;
+ margin-top: 190px;
+ margin-left: 315px;
+}
+span.moor-ballino { /* Style hue ° (degree) !! */
+ /*display: none;*/
+ visibility: hidden;
+ margin-top: 190px;
+ margin-left: 370px;
+}
+.moor-SatuLabel {
+ /*display: none;*/
+ visibility: hidden;
+ margin-top: 215px;
+ margin-left: 315px;
+}
+.moor-BrighLabel {
+ /*display: none;*/
+ visibility: hidden;
+ margin-top: 240px;
+ margin-left: 315px;
+}
+.moor-hexLabel {
+ font-size: 0px;
+ margin-top: 90px;
+ margin-left: 70px;
+}
+
+/* <input> */
+.moor-rInput, .moor-gInput, .moor-bInput, .moor-HueInput, .moor-SatuInput, .moor-BrighInput {
+ /*display: none;*/
+ visibility: hidden;
+ width: 30px;
+}
+.moor-hexInput {
+ font-size: 9px;
+ width: 45px;
+}
+.moor-cursor {
+ /*background-image: url(images/moor_cursor.gif); */
+ width: 12px;
+ height: 12px;
+}
+.moor-arrows {
+ /*display: none;*/
+ visibility: hidden;
+ /*background-image: url(images/moor_arrows.gif);*/
+ top: 9px;
+ left: 270px;
+ width: 41px;
+ height: 9px;
+}
+
+.moor-chooseColor {
+ margin-left: 100px;
+ margin-top: 3px;
+ width: 20px;
+ height: 82px;
+}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.