6 replies to this topic

[Soma]

Since a few time I thought it would be nice to have a Color Picker Inputfieldtype.

While in need now in a project, I created this little module to define a hex color using the nice color picker jQuery Plugin by http://www.eyecon.ro/colorpicker. It displays a simple color swatch that opens the color picker when clicked. It updates the color while changing. The value is saved in a hidden textfield.

Consider this a "beta" version, as it was coded quickly in about 2 hours. But I think it's save to use it. I'm open to feedback and suggestions. I also would love if you Ryan could take a look at code and verify that it's done "right".

(can't attach/upload files! what's going on?)

You can download here: https://github.com/s...nic/ColorPicker

[apeisa]

Soma, on 19 January 2012 - 07:32 AM, said:

(can't attach/upload files! what's going on?)

You have probably wasted your generous 500kt (heh heh) quota on old forums already: http://processwire.c...rea=attachments

So maybe that limit could be raised, Pete and Ryan?


About your module, great stuff, I am pretty sure this will come handy! Do you save the hex-value or rgb?

[Nico]

Looks nice. Will try it soon

[ryan]

Soma, great idea and it seems to work great. Nice job.

As for the code in there, I think all looks good except that you've got a lot of 'extra' that you don't need. I don't think there's any reason to extend FieldtypeText (?) so I would just start from a fresh Fieldtype instead:

class FieldtypeColorPicker extends Fieldtype {
  
  public static function getModuleInfo() {
	return array(
	  'title' => 'ColorPicker',
	  'version' => 100,
	  'summary' => 'Field that stores a hex color as string in a text field. Color is picked using a jQuery ColorPicker Plugin by http://www.eyecon.ro/colorpicker/',
	  'installs' => 'InputfieldColorPicker'
	   );
  }
  
  public function getBlankValue(Page $page, Field $field) {
	return 'FFFFFF';
  }
  
  public function sanitizeValue(Page $page, Field $field, $value) {
	return strtoupper(substr($value, 0, 6));
  }
  
  public function getInputfield(Page $page, Field $field) {
	return $this->modules->get('InputfieldColorPicker');
  }
  
  public function getDatabaseSchema(Field $field) {
	$schema = parent::getDatabaseSchema($field);
	$schema['data'] = 'CHAR(6) NOT NULL'; // i.e. FFFFFF or 333333 (hex color codes)
	return $schema;
  }
}

Likewise, your Inputfield had a lot of extra functions and stuff in there that you didn't need. So you could reduce it to this:

<?php
class InputfieldColorPicker extends Inputfield {
  
  public static function getModuleInfo() {
	return array(
	  'title' => 'ColorPicker',
	  'version' => 100,
	  'summary' => 'Provides and ColorPicker interface for defining hex color.',
	  'requires' => array("FieldtypeColorPicker")
	  );
  }
  
  public function __construct() {
	parent::__construct();
	$this->setAttribute('type', 'hidden');
  }
  
  public function init() {
	parent::init();
	$this->config->styles->add($this->config->urls->InputfieldColorPicker . "colorpicker/css/colorpicker.css");
	$this->config->scripts->add($this->config->urls->InputfieldColorPicker . "colorpicker/js/colorpicker.js");  
  }
  
  public function ___render() {
	$out = "\n<p><div id='ColorPicker_$this->name' style='border:2px solid #444;display:block;width:40px;height:40px;background-color:#".$this->value."'></div>";
	$out .= "<input " . $this->getAttributesString() . " /></p>";
	$out .= <<<_OUT

<script type='text/javascript'>
$('#ColorPicker_$this->name').ColorPicker({
  color: '#$this->value',
  onShow: function (colpkr) {
	$(colpkr).fadeIn(500);
	return false;
  },
  onHide: function (colpkr) {
	$(colpkr).fadeOut(500);
	return false;
  },
  onChange: function (hsb, hex, rgb) {
	$('#ColorPicker_$this->name').css('backgroundColor', '#' + hex);
	$('#Inputfield_$this->name').val(hex);
  }
});
  
</script>
  
_OUT;
  
	return $out;
  }
}

[Soma]

@apeisa, I don't know if it got to do with limited space? ... switched to extended post options ... ok now that is funny, that has to be most funny notice I've seen. There's this line I didn't payed attention closely yet but it says: "Used 2.84MB of your 500K global upload quota (Max. single file size: 100MB)"

And yes it's stored as hex. I also thought about wether to chose rgb or hex. And I can't really tell as there's so many option possible, so I just went with hex. I don't know if a converted function or a separate fieldtype or a config option would be best. I haven't really put much more time into it for now, but now that it's working it's time to consider some more possible options.

@ryan, you're awesome, you just made my day. Seriously you helped me really a lot just by doing this cleanup. This is great, as I was also thinking about what could still be removed that's not necessary, but I struggled a lot because I'm still learning this stuff. Thanks for the better database shema! Haven't really taken care of that, oh well. Good idea. I will study it to get a little more clear on fieldtypes. Basicly I wasn't sure what really would be needed to create a new one and thought extending text field would be ok, so I copied the text fieldtype code and deleted some stuff but I guess it was a little off still I will implement the changes now and update the rep.

Thanks so much for your help!

[Soma]

Ok, I cleaned up the code and tested it. I just comited a new version to github.

• improved database schema
  
• removed a lot of not needed functions and code
  
• fixed an issue where it wouldn't trigger a change on the hidden form text input, now works with "isdirty" type of js checks, i.e. for save reminder type modules

Thanks again Ryan. I may will get back with some questions... but need some sleep now

[ryan]

Thanks Soma, nice job. This is a great module!