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.

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

mount and unmount iro.ColorPicker #73

Closed
artmelkon opened this issue Jun 7, 2019 · 15 comments
Closed

mount and unmount iro.ColorPicker #73

artmelkon opened this issue Jun 7, 2019 · 15 comments
Assignees
@jaames
Labels
question

Comments

@artmelkon
Copy link

Can you please show how to mount or unmount the color picker.
Thanks in advanced.
@jaames
Copy link
Owner

jaames commented Jun 7, 2019

Create a color picker:

var colorPicker = new iro.ColorPicker({
  ...
})

Unmount from current DOM:

colorPicker.el.removeChild(colorPicker.base);
colorPicker.el = null;

Mount to new DOM:

newElement.addChild(colorPicker.base);
colorPicler.el = newElement;

@jaames jaames closed this as completed Jun 7, 2019
@jaames jaames changed the title moun and unmout color picker mount and unmount iro.ColorPicker Jun 7, 2019
@jaames jaames self-assigned this Jun 7, 2019
@jaames jaames added the question label Jun 7, 2019
@artmelkon
Copy link
Author

Does the code works with API?
It keep throwing an error "colorPicker.el is undefined"
Thanks

@jaames
Copy link
Owner

jaames commented Jun 7, 2019

Are you using the latest version of iro.js? (iro.version should be "4.5.0" or so)

Otherwise you may need to change colorPicker to whichever var your color picker is assigned to

@artmelkon
Copy link
Author

I use this CDN link: https://cdn.jsdelivr.net/npm/@jaames/iro/dist/iro.min.js

@jaames
Copy link
Owner

jaames commented Jun 7, 2019

Looks like you're using the latest version then.

I'm not sure why you're getting that error, without seeing your code I can only make guesses.

@artmelkon
Copy link
Author

html

<title>repl.it</title> <script src="https://cdn.jsdelivr.net/npm/@jaames/iro/dist/iro.min.js"></script>
<script src="script.js"></script> -------------- script.js ----------- var colorPicker = new iro.ColorPicker('div', { width: 200 });

colorPicker.el.removeChild(colorPicker.base);
colorPicker.el = null

@jaames
Copy link
Owner

jaames commented Jun 7, 2019

You need a HTML element for the color picker to mount to first:

<html>
  <head>
    <title>repl.it</title>
    <script src="https://cdn.jsdelivr.net/npm/@jaames/iro/dist/iro.min.js"></script>
  </head>
  <body>
    <!-- color picker element -->
    <div class="colorPicker"></div>
    <script>
      var colorPicker = new iro.ColorPicker('.colorPicker', { width: 200 });
      // ... and so on
    </script>
  </body>
</html>

I'd recommend looking at the codepen demo https://codepen.io/rakujira/pen/WZOeNq?editors=1010 :)

@artmelkon
Copy link
Author

I tried both ways, but still same error. I will keep testing. And the link you sent, it refers to the original color picker page you have on codepen, right?

@artmelkon
Copy link
Author

Here, I have recreated the error: https://codepen.io/artmelkon/pen/wbVMZz?editors=1010
Thank you anyway for the help. I have a project where I am going to use your color picker. So I will be back with more questions :)

@jaames
Copy link
Owner

jaames commented Jun 7, 2019

Ohh, I think you need to wait for the colorPicker's mount event:

var colorPicker = new iro.ColorPicker('#color-picker', { width: 200 });

colorPicker.on('mount', function() {
  colorPicker.el.removeChild(colorPicker.base);
  colorPicker.el = null;
  console.log(colorPicker.el)
})

When the color picker is created, the HTML DOM isn't necessarily ready yet :)

Documentation: https://iro.js.org/colorPicker_api.html#events

@artmelkon
Copy link
Author

Ahh, it did work , thank you.

@jaames
Copy link
Owner

jaames commented Jun 7, 2019

No worries!

@artmelkon
Copy link
Author

can you please tell what children: Array[] is for?

@jaames
Copy link
Owner

jaames commented Jun 7, 2019

In what context? That doesn't sound like something from iro.js

@artmelkon
Copy link
Author

Sorry, couldn't find it anymore. I was running a script and it appeared in the console, but now I don't see it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jaames jaames

Labels
question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jaames @artmelkon