Permalink
Browse files

Add widget image to colorpicker

  • Loading branch information...
1 parent da8dd42 commit be89b12e1616a4d11a55899a510214b743cc75f9 @genemu committed Nov 29, 2011
@@ -98,7 +98,7 @@ public function getAllowedOptionValues(array $options)
'choice',
'entity',
'document',
- 'model'
+ 'model',
)
);
}
View
@@ -28,7 +28,9 @@ class ColorType extends AbstractType
*/
public function buildForm(FormBuilder $builder, array $options)
{
- $builder->setAttribute('configs', $options['configs']);
+ $builder
+ ->setAttribute('widget', $options['widget'])
+ ->setAttribute('configs', $options['configs']);
}
/**
@@ -37,7 +39,9 @@ public function buildForm(FormBuilder $builder, array $options)
public function buildView(FormView $view, FormInterface $form)
{
- $view->set('configs', $form->getAttribute('configs'));
+ $view
+ ->set('widget', $form->getAttribute('widget'))
+ ->set('configs', $form->getAttribute('configs'));
}
/**
@@ -46,6 +50,7 @@ public function buildView(FormView $view, FormInterface $form)
public function getDefaultOptions(array $options)
{
$defaultOptions = array(
+ 'widget' => 'field',
'configs' => array(),
);
@@ -55,6 +60,19 @@ public function getDefaultOptions(array $options)
/**
* {@inheritdoc}
*/
+ public function getAllowedOptionValues(array $options)
+ {
+ return array(
+ 'widget' => array(
+ 'field',
+ 'image',
+ )
+ );
+ }
+
+ /**
+ * {@inheritdoc}
+ */
public function getParent(array $options)
{
return 'field';
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -1,5 +1,7 @@
# JQueryColor Field ([view demo](http://www.eyecon.ro/colorpicker/))
+![Color picker](https://github.com/genemu/GenemuFormBundle/raw/master/Resources/doc/jquery/color/images/default.png)
+
## Default Usage:
``` php
@@ -10,5 +12,8 @@ public function buildForm(FormBuilder $builder, array $options)
$builder
// ...
->add('color', 'genemu_jquerycolor')
+ ->add('colorpicker', 'genemu_jquerycolor', array(
+ 'widget' => 'image'
+ ))
}
```
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -70,10 +70,23 @@
{% endspaceless %}
{% endblock genemu_jqueryfile_widget %}
+{% block genemu_jquerycolor_widget %}
+{% spaceless %}
+ {% if widget == "image" %}
+ <div id="{{ id }}_color" {{ block("widget_container_attributes") }}>
+ <div{% if value %} style="background-color: #{{ value }};"{% endif %}>&nbsp;</div>
+ {{ block("hidden_widget") }}
+ </div>
+ {% else %}
+ {{ block("field_widget") }}
+ {% endif %}
+{% endspaceless %}
+{% endblock genemu_jquerycolor_widget %}
+
{% block genemu_jqueryrating_widget %}
{% spaceless %}
{% if expanded %}
- <div {{ block('widget_container_attributes') }}>
+ <div {{ block("widget_container_attributes") }}>
{% for child in form %}
{{ form_widget(child) }}
{% endfor %}
@@ -113,22 +113,34 @@
<script type="text/javascript">
jQuery(document).ready(function($) {
$field = $('#{{ id }}');
-
- $field.css({
- background: '#' + $field.val()
- });
-
- $field.ColorPicker($.extend({
+ $configs = $.extend({
color: '#' + $field.val(),
onBeforeShow: function() {
$(this).ColorPickerSetColor($field.val());
- },
+ }
+ }, {{ configs|json_encode|raw }});
+
+ {% if widget == "image" %}
+ $picker = $('#{{ id }}_color');
+
+ $picker.ColorPicker($.extend({
+ onChange: function(hsb, hex, rgb) {
+ $field.val(hex);
+
+ $('div', $picker).css({
+ backgroundColor: '#' + hex
+ });
+ }
+ }, $configs));
+ {% else %}
+ $field.ColorPicker($.extend({
onChange: function(hsb, hex, rgb) {
$field.val(hex).css({
- background: '#' + hex
+ backgroundColor: '#' + hex
});
}
- }, {{ configs|json_encode|raw }}));
+ }, $configs));
+ {% endif %}
});
</script>
{% endspaceless %}
@@ -8,6 +8,31 @@
{% block field_stylesheet "" %}
+{% block genemu_jquerycolor_stylesheet %}
+{% spaceless %}
+{% if widget == "image" %}
+ <style type="text/css" media="screen">
+ #{{ id }}_color {
+ background: url({{ asset('bundles/genemuform/images/select.png') }});
+ width: 36px;
+ height: 36px;
+ position: relative;
+ overflow: hidden;
+ }
+
+ #{{ id }}_color div {
+ background: url({{ asset('bundles/genemuform/images/select.png') }}) center center;
+ position: absolute;
+ left: 3px;
+ top: 3px;
+ width: 30px;
+ height: 30px;
+ }
+ </style>
+{% endif %}
+{% endspaceless %}
+{% endblock genemu_jquerycolor_stylesheet %}
+
{% block genemu_jqueryimage_stylesheet %}
{% spaceless %}
<style type="text/css" media="screen">

0 comments on commit be89b12

Please sign in to comment.