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