scratch – Diff between revs 58 and 125
?pathlinks?
Rev 58 | Rev 125 | |||
---|---|---|---|---|
Line 19... | Line 19... | |||
19 | |
19 | |
|
20 | ``` |
20 | ``` |
|
21 | npm install clipboard --save |
21 | npm install clipboard --save |
|
Line 22... | Line -... | |||
22 | ``` |
- | ||
23 | |
- | ||
24 | Or bower, too. |
- | ||
25 | |
- | ||
26 | ``` |
- | ||
27 | bower install clipboard --save |
- | ||
28 | ``` |
22 | ``` |
|
Line 29... | Line 23... | |||
29 | |
23 | |
|
Line 30... | Line 24... | |||
30 | If you're not into package management, just [download a ZIP](https://github.com/zenorocha/clipboard.js/archive/master.zip) file. |
24 | Or if you're not into package management, just [download a ZIP](https://github.com/zenorocha/clipboard.js/archive/master.zip) file. |
|
Line 149... | Line 143... | |||
149 | return trigger.getAttribute('aria-label'); |
143 | return trigger.getAttribute('aria-label'); |
|
150 | } |
144 | } |
|
151 | }); |
145 | }); |
|
152 | ``` |
146 | ``` |
|
Line -... | Line 147... | |||
- | 147 | |
||
- | 148 | For use in Bootstrap Modals or with any other library that changes the focus you'll want to set the focused element as the `container` value. |
||
- | 149 | |
||
- | 150 | ```js |
||
- | 151 | new Clipboard('.btn', { |
||
- | 152 | container: document.getElementById('#modal') |
||
- | 153 | }); |
||
- | 154 | ``` |
||
153 | |
155 | |
|
Line 154... | Line 156... | |||
154 | Also, if you are working with single page apps, you may want to manage the lifecycle of the DOM more precisely. Here's how you clean up the events and objects that we create. |
156 | Also, if you are working with single page apps, you may want to manage the lifecycle of the DOM more precisely. Here's how you clean up the events and objects that we create. |
|
155 | |
157 | |
|
156 | ```js |
158 | ```js |
|
Line 168... | Line 170... | |||
168 | |
170 | |
|
Line 169... | Line 171... | |||
169 | The good news is that clipboard.js gracefully degrades if you need to support older browsers. All you have to do is show a tooltip saying `Copied!` when `success` event is called and `Press Ctrl+C to copy` when `error` event is called because the text is already selected. |
171 | The good news is that clipboard.js gracefully degrades if you need to support older browsers. All you have to do is show a tooltip saying `Copied!` when `success` event is called and `Press Ctrl+C to copy` when `error` event is called because the text is already selected. |
|
Line -... | Line 172... | |||
- | 172 | |
||
- | 173 | You can also check if clipboard.js is supported or not by running `Clipboard.isSupported()`, that way you can hide copy/cut buttons from the UI. |
||
- | 174 | |
||
- | 175 | ## Bonus |
||
- | 176 | |
||
- | 177 | A browser extension that adds a "copy to clipboard" button to every code block on *GitHub, MDN, Gist, StackOverflow, StackExchange, npm, and even Medium.* |
||
170 | |
178 | |
|
Line 171... | Line 179... | |||
171 | You can also check if clipboard.js is supported or not by running `Clipboard.isSupported()`, that way you can hide copy/cut buttons from the UI. |
179 | Install for [Chrome](https://chrome.google.com/webstore/detail/codecopy/fkbfebkcoelajmhanocgppanfoojcdmg) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/codecopy/). |