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

Allow copying from the JSON button dialog #1501

Merged
merged 2 commits into from
Apr 20, 2017
Merged

Allow copying from the JSON button dialog #1501

merged 2 commits into from
Apr 20, 2017

Conversation

PtrTeixeira
Copy link
Contributor

Previously the copy button on the JSON modal would not copy the text of
the modal into the clipboard. This was because by default Bootstrap
Modals demand focus, and clipboard js works by creating a hidden text
field and copying the text out of that. The fix is allowing the modal
to yield focus to the hidden text field.

There was an additional performance problem that went into the problem.
In particular, attaching the clipboard to a class attaches the clipboard
to every modal on the page, even when the modal isn't open. Tis was
fixed by starting the clipboard only when the modal is open and
destroying it after the modal is closed, to prevent attaching many
handlers that accumulate on the page.

Previously the copy button on the JSON modal would not copy the text of
the modal into the clipboard. This was because by default Bootstrap
Modals demand focus, and clipboard js works by creating a hidden text
field and copying the text out of that.  The fix is allowing the modal
to yield focus to the hidden text field.

There was an additional performance problem that went into the problem.
In particular, attaching the clipboard to a class attaches the clipboard
to every modal on the page, even when the modal isn't open. Tis was
fixed by starting the clipboard only when the modal is open and
destroying it after the modal is closed, to prevent attaching many
handlers that accumulate on the page.
@ssalinas
Copy link
Member

ssalinas commented Apr 11, 2017

+1 for adding the performance fix in as well 😄 LGTM


componentDidMount() {
this.clipboard = new Clipboard('.copy-btn');
this.attachClipboard = this.attachClipboard.bind(this);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can bind the functions in the constructor along with the showJSON and hideJSON functions. There's no reason to do this in componentDidMount. If you have lots of functions that you need to bind, you can use _.bindAll

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@andyhuang91 , it is in the constructor, if you look a bit up in the diff, you'll see he's removing the componentDidMount() { line

Slight style improvement; prefer using `_.bindAll` over many calls to
`bind`.
@ssalinas ssalinas modified the milestone: 0.15.0 Apr 19, 2017
@ssalinas ssalinas merged commit 99cca47 into master Apr 20, 2017
@ssalinas ssalinas deleted the json-copy-btn branch April 20, 2017 13:57
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

Successfully merging this pull request may close these issues.

3 participants