Merge pull request aptible#64 from rwjblue/clipboard-copy-rj

Upgrade ember-cli & Clipboard handling.

.watchmanconfig

@@ -0,0 +1,3 @@
+{
+  "ignore_dirs": ["tmp"]
+}

README.md

@@ -22,8 +22,4 @@ This README outlines the details of collaborating on this Ember addon.
 
 * `ember build`
 
-## Releasing
-
-* `ember release`
-
 For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/).

app/components/click-to-copy/component.js

@@ -1,29 +1,47 @@
-/*global ZeroClipboard*/
+/*global Clipboard*/
 import Ember from 'ember';
 
 export default Ember.Component.extend({
+  actionLabel: 'Copy',
+  classNames: ['click-to-copy'],
+  Clipboard: Clipboard,
+  errorMessage: 'Press ⌘+C to copy',
+  isTooltipped: false,
+  message: null,
+  successMessage: 'Copied!',
   tagName: 'span',
-  copied: false,
   text: null,
-  title: "Click to copy",
 
-  'data-clipboard-text': Ember.computed.alias('text'),
+  dataClipboardText: Ember.computed.alias('text'),
 
-  attributeBindings: ['data-clipboard-text', 'title'],
+  attributeBindings: ['dataClipboardText:data-clipboard-text',
+                      'message:data-message'],
+
+  classNameBindings: ['isTooltipped:tooltipped'],
 
   setupClipboard: Ember.on('didInsertElement', function(){
-    this.clipboard = new ZeroClipboard( this.$() );
-    this.clipboard.on('aftercopy', Ember.run.bind(this, 'afterCopy'));
+    this.clipboard = new this.Clipboard('#' + this.elementId);
+    this.clipboard.on('success', Ember.run.bind(this, 'success'));
+    this.clipboard.on('error', Ember.run.bind(this, 'error'));
   }),
 
-  afterCopy: function(){
-    this.set('copied', true);
-    Ember.run.later(this, 'set', 'copied', false, 1500);
+  success: function(){
+    this.set('message', this.successMessage);
+    this.showMessage();
+  },
+
+  error: function(){
+    this.set('message', this.errorMessage);
+    this.showMessage();
   },
 
-  teardownClipboard: Ember.on('willDestroyElement', function(){
-    if (this.clipboard) {
-      this.clipboard.destroy();
-    }
-  })
+  showMessage: function() {
+    this.set('isTooltipped', true);
+
+    Ember.run.later(() => {
+      if (!this.isDestroying && !this.isDestroyed) {
+        this.set('isTooltipped', false);
+      }
+    });
+  }
 });

app/styles/_global.scss

@@ -94,4 +94,4 @@ pre.code,
   .instructions-section {
     margin: 0 0 15px;
   }
-}
+}

app/styles/aptible.scss

@@ -13,3 +13,4 @@
 @import "layout";
 @import "panels";
 @import "sidebar";
+@import "components/click-to-copy";

app/styles/components/_click-to-copy.scss

@@ -0,0 +1,54 @@
+// Click To Copy Component
+// See also
+//  - app/templates/components/click-to-copy.hbs
+//  - app/components/click-to-copy/component.js
+// Styles a span tag with expected attributes
+// `<span class="click-to-copy" data-message="Copied!" ... >Copy</span>`
+.click-to-copy {
+  color: $color-bright-blue;
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
+  &.tooltipped {
+    position: relative;
+    // This is the tooltip bubble
+    &:after {
+      -webkit-font-smoothing: subpixel-antialiased;
+      background-color: rgba(0,0,0,0.75);
+      border-radius: 3px;
+      color: white;
+      content: attr(data-message);
+      display: inline-block;
+      font: normal normal 11px/1.5;
+      letter-spacing: normal;
+      margin-top: 5px;
+      padding: 5px 8px;
+      pointer-events: none;
+      position: absolute;
+      right: 50%;
+      text-align: center;
+      top: 100%;
+      transform: translateX(50%);
+      white-space: pre;
+      z-index: 1000000;
+    }
+    // This is the tooltip arrow
+    &:before {
+      border: 5px solid transparent;
+      border-bottom-color: rgba(0,0,0,0.75);
+      bottom: -5px;
+      color: rgba(0,0,0,0.75);
+      content: "";
+      display: inline-block;
+      height: 0;
+      margin-right: -5px;
+      pointer-events: none;
+      position: absolute;
+      right: 50%;
+      top: auto;
+      width: 0;
+      z-index: 1000001;
+    }
+  }
+}

app/templates/components/click-to-copy.hbs

@@ -1 +1 @@
-{{yield copied}}
+{{actionLabel}}

blueprints/ember-cli-aptible-shared/index.js

@@ -4,7 +4,7 @@ module.exports = {
     return this.addBowerPackagesToProject([
       { name: 'animate',        source: 'daneden/animate.css' },
       { name: 'bootstrap-sass', source: 'twbs/bootstrap-sass' },
-      { name: 'zeroclipboard',  target: '~2.2.0'   }
+      { name: 'clipboard',  target: '~1.3.1' }
     ]);
   }
-};
+};

bower.json

@@ -1,19 +1,19 @@
 {
   "name": "ember-cli-aptible-shared",
   "dependencies": {
-    "ember": "1.12.0",
+    "ember": "1.13.10",
     "ember-data": "1.0.0-beta.18",
-    "ember-resolver": "~0.1.15",
+    "ember-resolver": "~0.1.18",
     "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
     "ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
-    "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.4",
-    "ember-qunit": "0.3.1",
+    "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.5",
+    "ember-qunit": "0.4.13",
     "ember-qunit-notifications": "0.0.7",
     "jquery": "^1.11.1",
     "loader.js": "ember-cli/loader.js#3.2.0",
     "pretender": "~0.6.0",
-    "qunit": "~1.17.1",
-    "zeroclipboard": "~2.2.0",
+    "qunit": "~1.19.0",
+    "clipboard": "~1.3.1",
     "JavaScript-MD5": "~1.1.0",
     "bootstrap-sass": "twbs/bootstrap-sass#~3.3.5"
   }

ember-cli-build.js

@@ -0,0 +1,22 @@
+/* jshint node: true */
+/* global require, module */
+
+var EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
+
+module.exports = function(defaults) {
+  var addon = new EmberAddon(defaults, {
+    // Add options here
+  });
+
+  /*
+    This build file specifes the options for the dummy test app of this
+    addon, located in `/tests/dummy`
+    This build file does *not* influence how the addon or the app using it
+    behave. You most likely want to be modifying `./index.js` or app's build file
+  */
+
+  addon.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap.js');
+  addon.import("bower_components/clipboard/dist/clipboard.js");
+
+  return addon.toTree();
+}

package.json

@@ -7,8 +7,8 @@
     "test": "tests"
   },
   "scripts": {
-    "start": "ember server",
     "build": "ember build",
+    "start": "ember server",
     "test": "ember try:testall"
   },
   "repository": "https://github.com/aptible/ember-cli-aptible-shared",
@@ -18,34 +18,34 @@
   "author": "Aptible",
   "license": "MIT",
   "devDependencies": {
-    "broccoli-asset-rev": "^2.0.2",
-    "ember-cli": "0.2.5",
-    "ember-cli-app-version": "0.3.3",
-    "ember-cli-dependency-checker": "^1.0.0",
+    "broccoli-asset-rev": "^2.1.2",
+    "ember-cli": "1.13.8",
+    "ember-cli-app-version": "0.5.0",
+    "ember-cli-dependency-checker": "^1.0.1",
     "ember-cli-fake-server": "^0.2.1",
     "ember-cli-gravatar": "^1.2.1",
-    "ember-cli-htmlbars": "0.7.6",
-    "ember-cli-ic-ajax": "0.1.1",
-    "ember-cli-inject-live-reload": "^1.3.0",
-    "ember-cli-qunit": "0.3.13",
-    "ember-cli-release": "0.2.5",
-    "ember-cli-uglify": "^1.0.1",
+    "ember-cli-htmlbars": "^1.0.0",
+    "ember-cli-htmlbars-inline-precompile": "^0.2.0",
+    "ember-cli-ic-ajax": "0.2.1",
+    "ember-cli-inject-live-reload": "^1.3.1",
+    "ember-cli-qunit": "^1.0.0",
+    "ember-cli-release": "^0.2.5",
+    "ember-cli-uglify": "^1.2.0",
     "ember-data": "1.0.0-beta.18",
     "ember-data-hal-9000": "0.1.7",
-    "ember-disable-prototype-extensions": "^1.0.0",
-    "ember-disable-proxy-controllers": "^0.7.0",
-    "ember-export-application-global": "^1.0.2",
-    "ember-try": "0.0.4",
-    "ember-validations": "^2.0.0-alpha.1",
+    "ember-disable-proxy-controllers": "^1.0.0",
+    "ember-export-application-global": "^1.0.3",
+    "ember-try": "0.0.8",
+    "ember-validations": "^2.0.0-alpha.3",
     "express": "^4.8.5",
     "glob": "^4.4.5",
     "torii": "^0.6.0-beta.4"
   },
   "dependencies": {
-    "ember-cli-babel": "^5.0.0",
-    "ember-cli-pretender": "0.3.2",
+    "ember-cli-babel": "^5.1.3",
+    "ember-cli-pretender": "^0.3.1",
     "ember-inflector": "^1.6.2"
-  },
+  } ,
   "keywords": [
     "ember-addon"
   ],
@@ -55,4 +55,4 @@
       "lib/bootstrap-sass"
     ]
   }
-}
+}

tests/.jshintrc

@@ -87,5 +87,6 @@
   "strict": false,
   "white": false,
   "eqnull": true,
-  "esnext": true
+  "esnext": true,
+  "unused": true
 }

tests/dummy/app/app.js

@@ -3,9 +3,11 @@ import Resolver from 'ember/resolver';
 import loadInitializers from 'ember/load-initializers';
 import config from './config/environment';
 
+var App;
+
 Ember.MODEL_FACTORY_INJECTIONS = true;
 
-var App = Ember.Application.extend({
+App = Ember.Application.extend({
   modulePrefix: config.modulePrefix,
   podModulePrefix: config.podModulePrefix,
   Resolver: Resolver

tests/dummy/app/templates/application.hbs

@@ -1,3 +1,3 @@
-<h2 id="title">Welcome to Ember.js</h2>
+<h2 id="title">Welcome to Ember</h2>
 
 {{outlet}}

tests/helpers/start-app.js

@@ -1,6 +1,5 @@
 import Ember from 'ember';
 import Application from '../../app';
-import Router from '../../router';
 import config from '../../config/environment';
 
 // registers test helpers for injection

tests/integration/components/click-to-copy-test.js

@@ -0,0 +1,55 @@
+import hbs from 'htmlbars-inline-precompile';
+import { moduleForComponent, test } from 'ember-qunit';
+
+// Clipboard Mock
+let clipboardInstance;
+function mockClipboard() {
+  clipboardInstance = this;
+}
+mockClipboard.prototype.on = function(eventType, callback) {
+  mockClipboard[eventType] = callback;
+};
+
+moduleForComponent('click-to-copy', {
+  integration: true
+});
+
+test('basic attributes are set', function(assert) {
+  this.set('mockClipboard', mockClipboard);
+  this.render(
+    hbs('{{click-to-copy text="copy this" Clipboard=mockClipboard}}')
+  );
+
+  let clickToCopy = this.$('.click-to-copy');
+
+  assert.equal(clickToCopy.attr('data-clipboard-text'), 'copy this');
+  assert.equal(clickToCopy.text().trim(), 'Copy');
+  assert.ok(clickToCopy.hasClass('click-to-copy'));
+
+  mockClipboard.success();
+  assert.equal(clickToCopy.attr('data-message'), 'Copied!');
+  assert.ok(clickToCopy.hasClass('tooltipped'));
+
+  mockClipboard.error();
+  assert.equal(clickToCopy.attr('data-message'), 'Press ⌘+C to copy');
+  assert.ok(clickToCopy.hasClass('tooltipped'));
+});
+
+test('can set mutable attributes', function(assert) {
+  this.set('mockClipboard', mockClipboard);
+  this.render(
+    hbs`{{click-to-copy text="copy this" Clipboard=mockClipboard
+        actionLabel="Click Me!" successMessage="Yay!" errorMessage="Boo!"}}`
+  );
+
+  let clickToCopy = this.$('.click-to-copy');
+  assert.equal(clickToCopy.text().trim(), 'Click Me!');
+
+  mockClipboard.success();
+  assert.equal(clickToCopy.attr('data-message'), 'Yay!');
+  assert.ok(clickToCopy.hasClass('tooltipped'));
+
+  mockClipboard.error();
+  assert.equal(clickToCopy.attr('data-message'), 'Boo!');
+  assert.ok(clickToCopy.hasClass('tooltipped'));
+});