Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancement: Allow programmatic changing of color #94

Open
isi-dwade opened this issue Oct 30, 2019 · 2 comments
Open

Enhancement: Allow programmatic changing of color #94

isi-dwade opened this issue Oct 30, 2019 · 2 comments

Comments

@isi-dwade
Copy link

isi-dwade commented Oct 30, 2019

On my site, I needed to be able to change the value of the control programmatically. So I introduced two enhancements:

at the top of the latest 1.2.3 build, after the 'use strict' statement, I added this statement:

    $.fn.setColor = function (value) {    	
        return $(this).find('input').val(value).trigger('changeInput');
	}

In the Initialize funciton, I added this statement:

          $thisEl.on('changeInput', function(e) { methods.updatePreview($thisEl) });

@isi-dwade isi-dwade changed the title Enhacement: Allow programmatic changing of color Enhancement: Allow programmatic changing of color Oct 30, 2019
This was referenced Oct 30, 2019
@OllisGit
Copy link

OllisGit commented Nov 9, 2019

Thx a lot @isi-dwade !!!

I needed to remove the find-input, then it was working for me:

    $.fn.setColor = function (value) {
        return $(this).val(value).trigger('change');
	}

@isi-dwade
Copy link
Author

isi-dwade commented Nov 9, 2019

@OllisGit Glad it helped you. In my case, I needed the find('input') because this is the DIV of the control, not the actual input control that holds the value. Maybe it depends on when you use the function (before or after initializing the control). After the control is initialized, it wraps the input in a DIV with the same ID as the input.

<div class="input-group pick-a-color-markup" id="nameColor">
<input type="hidden" name="nameColor" id="nameColor" class="pick-a-color form-control" value="576d7b">
.....
</div>

By the way, you can also override the basic color list with your own (see below).

My initialization code preceeds my calling setColor.

$(".pick-a-color").pickAColor({
	showSpectrum: false,
	showAdvanced: false,
	showSavedColors: false,	
	showHexInput: false,
	basicColors: {		
		Default: 'fff',
		'Color1':'de5b35',   
		'Color2': '576d6b',   
	},
});

$("#nameColor").setColor('576d6b');

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants