README.md in clipboard-rails-1.6.1 vs README.md in clipboard-rails-1.7.1
- old
+ new
@@ -22,10 +22,12 @@
Or install it yourself as:
$ gem install clipboard-rails
+Note: After adding the gem to your gem file and running the bundle, restart rails server.
+
Now you need to edit your `app/assets/javascripts/application.js` file and add the following line:
``` javascript
//= require clipboard
```
@@ -36,12 +38,12 @@
Add this sample code to your `app/assets/javascripts/application.js` file
``` javascript
$(document).ready(function(){
- var clip = new Clipboard('.clipboard-btn');
- console.log(clip);
+ var clipboard = new Clipboard('.clipboard-btn');
+ console.log(clipboard);
});
```
*Note:* Here i am using `gem 'jquery-turbolinks'` for using the jquery $(document).ready function
@@ -52,11 +54,11 @@
<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!-- Trigger -->
<button class="clipboard-btn" data-clipboard-action="copy" data-clipboard-target="#bar">
- Cut to clipboard
+ Copy to clipboard
</button>
```
## Additional information
Additionally, you can define a **data-clipboard-action** attribute to specify if you want to either **copy** or **cut** content.
@@ -74,11 +76,11 @@
``` javascript
// Tooltip
-$('button').tooltip({
+$('.clipboard-btn').tooltip({
trigger: 'click',
placement: 'bottom'
});
function setTooltip(btn, message) {
@@ -93,11 +95,11 @@
}, 1000);
}
// Clipboard
-var clipboard = new Clipboard('button');
+var clipboard = new Clipboard('.clipboard-btn');
clipboard.on('success', function(e) {
setTooltip(e.trigger, 'Copied!');
hideTooltip(e.trigger);
});
@@ -107,12 +109,22 @@
hideTooltip(e.trigger);
});
```
``` html
-<!-- Animation on buttons HTML -->
-<button class="btn btn-primary" data-clipboard-text="It worked!">Click me</button>
-<button class="btn btn-primary" data-clipboard-text="It worked again!">Click me</button>
+<!-- Example 1: Animation with single button HTML source-->
+<button class="clipboard-btn btn btn-primary" data-clipboard-text="It worked!">Click me</button>
+
+```
+
+``` html
+<!-- Example 2: with Target source -->
+<textarea id="bar">Mussum ipsum cacilds...</textarea>
+
+<!-- Trigger -->
+<button class="clipboard-btn" data-clipboard-action="copy" data-clipboard-target="#bar">
+ Copy to clipboard
+</button>
```
## Development