aomran / ember-cli-zero-clipboard

Ember CLI addon for adding a "copy to clipboard" button component
https://www.npmjs.org/package/ember-cli-zero-clipboard
17 stars 12 forks source link

docs: adding an example with visual feedback for the button #19

Open nruth opened 9 years ago

nruth commented 9 years ago

I guess most people will want the button to dance a bit when clicked. Since the run loop is or can be involved it might be good to have an idiomatic example in the readme. I'm not sure if this is idiomatic, but thought it might be a starting point.

    {{#zero-clipboard text=TEXT}}
      <button class="btn btn-primary" type="button">
        <i class="glyphicon glyphicon-duplicate"></i>
        <span class='copy-button-text'>
          Copy
        </span>
      </button>
    {{/zero-clipboard}}
import ZeroClipboard from 'ember-cli-zero-clipboard/components/zero-clipboard';
import Ember from 'ember';

export default ZeroClipboard.extend({
  actions: {
    afterCopy: function(){
      var startingText = Ember.$('.copy-button-text').first().text();
      Ember.$('.copy-button-text').text('Copied');
      Ember.run.later(window, function(){
        Ember.$('.copy-button-text').text(startingText);
      }, 2000);
    }
  }
});