Skip to content

Accept function as parameter to "target" option #63

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.

Sign up for GitHub

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

Jump to bottom
Open
masonhale wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Accept function as parameter to "target" option #63

masonhale wants to merge 1 commit into from

Conversation

@masonhale
Copy link

@masonhale masonhale commented Nov 29, 2017 •
edited
Loading

Adds support for specifying a function as the argument to "target" initialization option, to enable dynamic positioning relative to the input element.

This is especially important when more than one color picker is embedded on a single page, and where individual initialization of each color picker element (in order to bind the target to a known element id, for example) is undesirable or unfeasible (for example if the color picker input code is dynamically generated).

Example usage:

<html>
<head>
<!-- load jquery, jquery-ui, iris here -->
<style>
.color-picker-wrapper {
   position: absolute;
   z-index: 999;
   display: inline-block;
}
.color-chip {
   display: inline-block;
   height: 20px;
   width: 20px;
}
</style>
</head>
<body>

<div class="input-wrapper">
   <input type="text" class="color-picker"  name="primary-color">
   <span class="color-chip"></span>
   <span class="color-picker-wrapper"></span>
</div>
<div class="input-wrapper">
   <input type="text" class="color-picker"  name="secondary-color">
   <span class="color-chip"></span>
   <span class="color-picker-wrapper"></span>
</div>

<script language="javascript">
jQuery(document).ready(function($){
    // configure iris color picker
    $('.color-picker').iris({
      change: function() {
        var $this = $(this);
        $this.parent().find('.color-chip').css('background-color', $this.iris('color'));
      },
      // NOTE: relies on change to Iris library to accept function for 'target' option
      target: function(elem) {
        var x = $(elem).parent().find(".color-picker-wrapper").first();
        return x;
      }    
});
</script>
</body>
</html>

In the example above, the color picker will be appended to the span with the class "color-picker-wrapper" located within the same containing div as the input element (with class "color-picker").

robertdevore added a commit to deviodigital/hue.js that referenced this pull request Mar 26, 2018
@robertdevore
👌 IMPROVE: Accept function as parameter to "target" option
c17f2d5 
Thanks [@masonhale](Automattic/Iris#63)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@masonhale