Soma

Fieldtype ColorPicker

Recommended Posts

Hi Soma!

Great! I uploaded this latest version and the validation errors are gone. Thank you! Good module!

Share this post


Link to post
Share on other sites

@Soma: I'm having issues storing 000000 (i.e. black) as default value. Any idea if this is something specific to my case or actual issue?

000000 is converted to 0 (and in page edit nothing shows up), "000000" to "00000 and black to #black. In page edit this works just fine, but default value for some reason won't work. Actually at some point (not sure if this is consistent behavior, as I haven't yet had time to debug properly) 000000 was stored in database, but when fetched in field settings it was suddenly converted to 0.

Could be even core bug, but since typical (page edit) text inputs have no problems with values like this, I'm not entirely sure where to start.. :)

Share this post


Link to post
Share on other sites

I see this here too, and I'm seeing this behavior for all text fields, so nothing to do with this module.

Share this post


Link to post
Share on other sites
I'm seeing this behavior for all text fields, so nothing to do with this module.

I'm not seeing this behavior with Text/Textarea fields. Just tried in a few spots. Any other factors you can think of?

Share this post


Link to post
Share on other sites

I'm not seeing this behavior with Text/Textarea fields. Just tried in a few spots. Any other factors you can think of?

No. to be more clear it happens with all textfields in settings of fields or modules. Except title, names or labels.

I enter for example 000 and get 0 after saving.

Ok happens also for labels but only on alternative language. I have multilanguage installed, but otherwise I have no idea, nothing else I can think of. And it also happens to others as reported multiple times.

Share this post


Link to post
Share on other sites

Sorry, I thought we were talking page fields here. If limited to the fields in template/field (or module) settings, then I know what the issue is. It's the encode/decode process, which attempts to detect and enforce numeric types and empty values. Best way to bypass that is to put something non-numeric in there. For instance, for a color value something like #000 rather than 000 would likely resolve it. Though I may also be able to have it skip over digit strings that start with a zero and have no decimal.

  • Like 1

Share this post


Link to post
Share on other sites

I see. Hmm changing it to # would work in this case but break compatibility. So not positive to change it for something that is broken in PW. A string is a string not a number. :)

  • Like 1

Share this post


Link to post
Share on other sites

offtopic

@Soma, break compatibility would make your color picker better.

Now your field always need some extra logic. You can't just output $page->color, because of the max length of 6 characters.

example: "<div style='color: #{$page->color};'>"; can render to <div style='color: #transp;'>

I do love this field, but the extra logic sucks.

Please break the backward compatibility.

  • Like 2

Share this post


Link to post
Share on other sites

I must say that I agree with both views here; what Martijn described is definitely a nuisance and I really wouldn't mind if Soma decided to change it, but it also feels that it's just wrong (and inconsistent) to have fields behave in different way when used in module settings context  :)

  • Like 1

Share this post


Link to post
Share on other sites

I see and kinda agree. But maybe rather add formatting to the field than change current 6 chars. Remember you could do that yourself with formatValue hook or property instead of local tpl logic.

Share this post


Link to post
Share on other sites

I just committed suic.. ehrm an update to ColorPicker. ;)

  • As of 2.0.0 you can enable output formatting of the field in the details settings. When enabled it will format value directly from AADDEE to "#AADDEE" and "transp" to "transparent".

So you can now simply write:

echo "background-color: " . $page->color;

// outputs
// background-color: #AEADEA
  • added converting "0" settings to "000000", just in case ;)
This update should be save to update and backward compatible, but as always you should first test on a development server if you have a chance. In case something went wrong just ask here in the forums and I'm sure it will be solved within short time.
 
Thanks
  • Like 6

Share this post


Link to post
Share on other sites

Hello Soma,
thank you for this useful module. I like it very much and use it in a few projects.
 

I think I found a little bug.
Line 65 in FieldtypeColorPicker.module says

if($value == "0") $value = "00000";

One 0 is missing, so it outputs #00000 in case of black. Most Browsers ignore that, I think, instead of interpreting it as black.

Greetings :)

  • Like 1

Share this post


Link to post
Share on other sites

Thanks seb this has been fixed in the latest commit.

Share this post


Link to post
Share on other sites

Great module, how ever it bugs with Reno theme, requires following:

.colorpicker input {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    color: #898989 !important;
    padding: 0 !important;
}

Because (/wire/modules/AdminTheme/AdminThemeReno/styles/classic.css):

input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]), textarea {
    background: none repeat scroll 0 0 #eaf0f2;
    border-color: #aec5cd #c7d7dd #c7d7dd;
    border-style: solid;
    border-width: 1px;
    color: #2f4248;
    line-height: 1.3em;
    padding: 0.4em;
}

So either Reno could strict it's styling rules, or module should add !importants, i'd go with first one :)

Cheers

  • Like 1

Share this post


Link to post
Share on other sites

Cool module, thanks!

I am currently creating an easy portfolio for creatives based on PW.

With this function I can share it easily with friends to customize their own.

When It's finished Ill share it over here.

Share this post


Link to post
Share on other sites

hey,

i get a fatal error using this plugin with processwire 2.6.1

any ideas?

Fatal error: Call to a member function set() on a non-object in /(...)/site/modules/somatonic-ColorPicker-3a00070/FieldtypeColorPicker.module on line 46

line 46 is:

$inputField->set('default', $field->default);
$inputField->set('swatch', $field->swatch);

Share this post


Link to post
Share on other sites

Maybe you can give more information where this error happens? I just installed and tested it on a 2.6.18 and works fine.

Note: BTW you shouldn't install a module with the folder name you get from github: somatonic-ColorPicker-3198273192 ....

It's always best to install through ModulesManager or through core Modules New with Classname. "FieldtypeColorPicker"

Share this post


Link to post
Share on other sites

I've just a small suggestion for the module. How about using the actual color picker in the field settings, where one can choose the default value for the field.

  • Like 1

Share this post


Link to post
Share on other sites

ColorPicker inception. It's a dream inside of a dream.

  • Like 4

Share this post


Link to post
Share on other sites

Just had to do a quick head scratch to get the colour picker to work inside PW 3.12 Repeater and Repeater Matrix.

If anyone is looking for a very quick and dirty hack, that seems to work. Not sure if it would cause any other issues.

This is InputfieldFontIconPicker.js

 
function SetUpCPicker(){
    $('div[id^=ColorPicker_]').each(function(){
        var $colorpicker = $(this);

        $colorpicker.ColorPicker({
            color: $(this).data('color').toString(),
            onShow: function (colpkr) {
                $(colpkr).fadeIn(500);
                return false;
            },
            onHide: function (colpkr) {
                $(colpkr).fadeOut(500);
                return false;
            },
            onChange: function (hsb, hex, rgb) {
                $colorpicker.css('backgroundColor', '#' + hex);
                $colorpicker.css('background-image', 'none');
                $colorpicker.next('input').val(hex).trigger('change');
            }
        });

    });

    $('a.ColorPickerReset').on('click',function(e){
        e.preventDefault();
        var color = $(this).data('default') && $(this).data('default') != 'transp' ? '#' + $(this).data('default').toString() : 'transparent';
        $(this).parent().find('input').val($(this).data('default')).trigger('change');
        $(this).parent().find('div[id^=ColorPicker_]').ColorPickerSetColor($(this).data('default').toString());
        $(this).parent().find('div[id^=ColorPicker_]')
            .css('backgroundColor', color)
            .css('background-image', 'none')
            .attr('data-color', $(this).data('default').toString());
        if(color == 'transparent') {
            var modurl = $(this).data('modurl');
            $(this).parent().find('div[id^=ColorPicker_]')
                .css('background-image', 'url(' + modurl + 'transparent.gif)');
        }
    });

    /* additions (swatches) by @Rayden */
    $('div.ColorPickerSwatch').on('click',function(e){
        e.preventDefault();
        var color = $(this).data('color') && $(this).data('color') != 'transp' ? '#' + $(this).data('color').toString() : 'transparent';
        $(this).closest('.ui-widget-content, .InputfieldContent').find('input').val($(this).data('color')).trigger('change');
        $(this).closest('.ui-widget-content, .InputfieldContent').find('div[id^=ColorPicker_]').ColorPickerSetColor($(this).data('color').toString());
        $(this).closest('.ui-widget-content, .InputfieldContent').find('div[id^=ColorPicker_]')
            .css('backgroundColor', color)
            .css('background-image', 'none')
            .attr('data-color', $(this).data('color').toString());
        if(color == 'transparent') {
            var modurl = $(this).closest('.ui-widget-content, .InputfieldContent').find('.ColorPickerReset').data('modurl');
            $(this).closest('.ui-widget-content, .InputfieldContent').find('div[id^=ColorPicker_]')
                .css('background-image', 'url(' + modurl + 'transparent.gif)');
        }
    });
};
$(document).ready(function() {
    SetUpCPicker();
    $(document).on('repeateradd', '.InputfieldRepeaterMatrix .InputfieldRepeaterMatrixAddLink', SetUpCPicker);
    $(document).on('opened', '.InputfieldRepeaterItem', SetUpCPicker);
});
 
I posted this to github as well...
  • Like 2

Share this post


Link to post
Share on other sites

Thank you. I'll have a look when I get to it.

  • Like 2

Share this post


Link to post
Share on other sites
On 3/21/2016 at 2:56 PM, krisj said:

Just had to do a quick head scratch to get the colour picker to work inside PW 3.12 Repeater and Repeater Matrix.

If anyone is looking for a very quick and dirty hack, that seems to work. Not sure if it would cause any other issues.

This is InputfieldFontIconPicker.js

 

function SetUpCPicker(){
    $('div[id^=ColorPicker_]').each(function(){
        var $colorpicker = $(this);

        $colorpicker.ColorPicker({
            color: $(this).data('color').toString(),
            onShow: function (colpkr) {
                $(colpkr).fadeIn(500);
                return false;
            },
            onHide: function (colpkr) {
                $(colpkr).fadeOut(500);
                return false;
            },
            onChange: function (hsb, hex, rgb) {
                $colorpicker.css('backgroundColor', '#' + hex);
                $colorpicker.css('background-image', 'none');
                $colorpicker.next('input').val(hex).trigger('change');
            }
        });

    });

    $('a.ColorPickerReset').on('click',function(e){
        e.preventDefault();
        var color = $(this).data('default') && $(this).data('default') != 'transp' ? '#' + $(this).data('default').toString() : 'transparent';
        $(this).parent().find('input').val($(this).data('default')).trigger('change');
        $(this).parent().find('div[id^=ColorPicker_]').ColorPickerSetColor($(this).data('default').toString());
        $(this).parent().find('div[id^=ColorPicker_]')
            .css('backgroundColor', color)
            .css('background-image', 'none')
            .attr('data-color', $(this).data('default').toString());
        if(color == 'transparent') {
            var modurl = $(this).data('modurl');
            $(this).parent().find('div[id^=ColorPicker_]')
                .css('background-image', 'url(' + modurl + 'transparent.gif)');
        }
    });

    /* additions (swatches) by @Rayden */
    $('div.ColorPickerSwatch').on('click',function(e){
        e.preventDefault();
        var color = $(this).data('color') && $(this).data('color') != 'transp' ? '#' + $(this).data('color').toString() : 'transparent';
        $(this).closest('.ui-widget-content, .InputfieldContent').find('input').val($(this).data('color')).trigger('change');
        $(this).closest('.ui-widget-content, .InputfieldContent').find('div[id^=ColorPicker_]').ColorPickerSetColor($(this).data('color').toString());
        $(this).closest('.ui-widget-content, .InputfieldContent').find('div[id^=ColorPicker_]')
            .css('backgroundColor', color)
            .css('background-image', 'none')
            .attr('data-color', $(this).data('color').toString());
        if(color == 'transparent') {
            var modurl = $(this).closest('.ui-widget-content, .InputfieldContent').find('.ColorPickerReset').data('modurl');
            $(this).closest('.ui-widget-content, .InputfieldContent').find('div[id^=ColorPicker_]')
                .css('background-image', 'url(' + modurl + 'transparent.gif)');
        }
    });
};
$(document).ready(function() {
    SetUpCPicker();
    $(document).on('repeateradd', '.InputfieldRepeaterMatrix .InputfieldRepeaterMatrixAddLink', SetUpCPicker);
    $(document).on('opened', '.InputfieldRepeaterItem', SetUpCPicker);
});
 
I posted this to github as well...

@krisj I've tried this solution and the colorpicker still does not work in a repeater or repeater matrix. Is there something else i'm misssing?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By anderson
      Hi all,
      I'm a new to website building. Learned some CRASH course of js,jquery,php. Then I found CMS. Still learning around forum, youtube....
      Anyway, please help me with some beginer questions:
      1, About template - please correct me if I understand wrong : every page should be (or recommended) built on a template. So if in total I'll have 10 pages, 2 of them have same layout, I'll need 9 templates.  And, what fields a page includes, is not defined in page, but defined in the template that page uses. 
      2,  Where to see what modules I've installed? is it in "Modules - Site"? 
      3, I installed "PageTable Extended", then what?  As in a youtube tutorial, it should appear in Setup tab, but it doesn't.  What's in there: templates,fields,logs,comments. (I installed "Uikit 3 site_blog profile".)
      4, I did a search in Processwire website for the famous "repeater matrix" module, and can not find it, there's a Repeater, as well as a Matrix. Is it not a module?
      5, I watched this youtube tuts: https://www.youtube.com/watch?v=IHqnLQy9R1A
      Anybody familiar with this tuts please help: 
      After he analysed a target webpage layout he wanted to mimic, he created some fields, some template, then based on those he created a page and input some "content" in there, then clicked "view", it's just some text. So, here comes my question, he copied a folder "assets" (subfolders are: css,fonts,js,img) over, then the page have the appearance/layout he wanted to mimic. Where does that assets folder come from?
      Appreciate any help.
    • By mtwebit
      I've created a set of modules for importing (manipulating and displaying) data from external resources. A key requirement was to handle large (100k+) number of pages easily.
      Main features
      import data from CSV and XML sources in the background (using Tasker) purge, update or overwrite existing pages using selectors user configurable input <-> field mappings on-the-fly data conversion and composition (e.g. joining CSV columns into a single field) download external resources (files, images) during import handle page references by any (even numeric) fields How it works
      You can upload CSV or XML files to DataSet pages and specify import rules in their description.
      The module imports the content of the file and creates/updates child pages automatically.
      How to use it
      Create a DataSet page that stores the source file. The file's description field specifies how the import should be done:
      After saving the DataSet page an import button should appear below the file description.

      When you start the import the DataSet module creates a task (executed by Tasker) that will import the data in the background.
      You can monitor its execution and check its logs for errors.

      See the module's wiki for more details.
      The module was already used in three projects to import and handle large XML and CSV datasets. It has some rough edges and I'm sure it needs improvement so comments are welcome.
    • By dreerr
      TemplateEnginePug (formally TemplateEngineJade)
       
      This module adds Pug templates to the TemplateEngineFactory. It uses https://github.com/pug-php/pug to render templates.
      doctype html html(lang='en') head meta(http-equiv='content-type', content='text/html; charset=utf-8') title= $page->title link(rel='stylesheet', type='text/css', href=$config->urls->templates . 'styles/main.css') body include header.pug h1= $page->title if $page->editable() p: a(href=$page->editURL) Edit Project on GitHub: github.com/dreerr/TemplateEnginePug
      Project in modules directory: modules.processwire.com/modules/template-engine-pug/
       
      For common problems/features/questions about the Factory, use the TemplateEngineFactory thread.
       
    • By Robin S
      Pages At Bottom
      Keeps selected pages at the bottom of their siblings.
      A "bottom page" will stay at the bottom even if it is drag-sorted to a different location or another page is drag-sorted below it (after Page List is refreshed the bottom page will still be at the bottom).
      Newly added sibling pages will not appear below a bottom page.
      The module also prevents the API methods $pages->sort() and $pages->insertAfter() from affecting the position of bottom pages.
      Note: the module only works when the sort setting for children on the parent page/template is "Manual drag-n-drop".
      Why?
      Because you want some pages to always be at the bottom of their siblings for one reason or another. And someone requested it. 🙂
      Usage
      Install the Pages At Bottom module.
      Select one or more pages to keep at the bottom of their siblings. If you select more than one bottom page per parent then their sort order in the page list will be the same as the sort order in the module config.

       
      https://github.com/Toutouwai/PagesAtBottom
      https://modules.processwire.com/modules/pages-at-bottom/
    • By Robin S
      Another little admin helper module...
      Template Field Widths
      Adds a "Field widths" field to Edit Template that allows you to quickly set the widths of inputfields in the template.

      Why?
      When setting up a new template or trying out different field layouts I find it a bit slow and tedious to have to open each field individually in a modal just to set the width. This module speeds up the process.
      Installation
      Install the Template Field Widths module.
      Config options
      You can set the default presentation of the "Field widths" field to collapsed or open. You can choose Name or Label as the primary identifier shown for the field. The unchosen alternative will become the title attribute shown on hover. You can choose to show the original field width next to the template context field width.  
      https://github.com/Toutouwai/TemplateFieldWidths
      https://modules.processwire.com/modules/template-field-widths/