Allow copying from the JSON button dialog #1501

Merged
merged 2 commits into from Apr 20, 2017

Conversation

Projects
None yet
3 participants
@PtrTeixeira
Contributor

PtrTeixeira commented Apr 11, 2017

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.

Allow copying from the JSON button dialog
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

This comment has been minimized.

Show comment
Hide comment
@ssalinas

ssalinas Apr 11, 2017

Member

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

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);

This comment has been minimized.

@andyhuang91

andyhuang91 Apr 11, 2017

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

@andyhuang91

andyhuang91 Apr 11, 2017

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

This comment has been minimized.

@ssalinas

ssalinas Apr 11, 2017

Member

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

@ssalinas

ssalinas Apr 11, 2017

Member

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

Prefer `bindAll` to multiple bind calls
Slight style improvement; prefer using `_.bindAll` over many calls to
`bind`.

@ssalinas ssalinas added the hs_stable label Apr 19, 2017

@ssalinas ssalinas modified the milestone: 0.15.0 Apr 19, 2017

@ssalinas ssalinas merged commit 99cca47 into master Apr 20, 2017

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details

@ssalinas ssalinas deleted the json-copy-btn branch Apr 20, 2017

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