Feature/oui clipboard

package.json

@@ -33,9 +33,10 @@
     }
   },
   "dependencies": {
+    "clipboard": "2.0.1",
     "escape-string-regexp": "^1.0.5",
-    "popper.js": "^1.12.9",
-    "flatpickr": "4.5.0"
+    "flatpickr": "4.5.0",
+    "popper.js": "^1.12.9"
   },
   "devDependencies": {
     "angular": "~1.6.1",

packages/oui-angular/src/index.js

@@ -28,6 +28,7 @@ import "@oui-angular/oui-chips/src";
 import "@oui-angular/oui-popover/src";
 import "@oui-angular/oui-stepper/src";
 import "@oui-angular/oui-skeleton/src";
+import "@oui-angular/oui-clipboard/src";
 
 angular.module("oui", [
     "oui.button",
@@ -59,5 +60,6 @@ angular.module("oui", [
     "oui.chips",
     "oui.popover",
     "oui.stepper",
-    "oui.skeleton"
+    "oui.skeleton",
+    "oui.clipboard"
 ]);

packages/oui-angular/src/index.spec.js

@@ -29,6 +29,7 @@ loadTests(require.context("../../oui-chips/src/", true, /.*((\.spec)|(index))$/)
 loadTests(require.context("../../oui-popover/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-stepper/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-skeleton/src/", true, /.*((\.spec)|(index))$/));
+loadTests(require.context("../../oui-clipboard/src/", true, /.*((\.spec)|(index))$/));
 
 function loadTests (context) {
     context.keys().forEach(context);

packages/oui-clipboard/README.md

@@ -0,0 +1,36 @@
+# Clipboard
+
+<component-status cx-design="complete" ux="rc"></component-status>
+
+## Usage
+
+### Default
+
+```html:preview
+<div class="oui-doc-preview-only-keep-children" ng-init="$ctrl.simpleModel = 'Copy this text'">
+<oui-clipboard model="$ctrl.simpleModel"></oui-clipboard>
+</div>
+<div class="oui-doc-preview-only">
+    <p><strong>Model value:</strong> {{$ctrl.simpleModel | json}}</p>
+</div>
+```
+
+### Formatted text
+
+```html:preview
+<div class="oui-doc-preview-only-keep-children" ng-init="$ctrl.formattedModel = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed lacinia nisi. Integer eleifend ipsum in pulvinar sodales.
+Donec vitae lobortis dui, at accumsan purus. Nullam porta leo purus, nec dignissim leo hendrerit non. Aliquam semper, ante vitae consequat accumsan, diam tortor tempus diam, in hendrerit justo diam in urna.'">
+<oui-clipboard model="$ctrl.formattedModel"></oui-clipboard>
+</div>
+<div class="oui-doc-preview-only">
+    <p style="white-space: pre-wrap;"><strong>Model value:</strong> {{$ctrl.formattedModel}}</p>
+</div>
+```
+
+## API
+
+| Attribute             | Type   | Binding | One-time Binding | Values  | Default   | Description
+| ----                  | ----   | ----    | ----             | ----    | ----      | ----
+| id                    | string | @?      | true             |         |           | id attribute of the input
+| name                  | string | @?      | true             |         |           | name attribute of the input
+| model                 | object | =       | true             |         |           | model bound to component

packages/oui-clipboard/src/clipboard.component.js

@@ -0,0 +1,12 @@
+import controller from "./clipboard.controller";
+import template from "./clipboard.html";
+
+export default {
+    template,
+    controller,
+    bindings: {
+        name: "@?",
+        id: "@?",
+        model: "="
+    }
+};

packages/oui-clipboard/src/clipboard.controller.js

@@ -0,0 +1,76 @@
+import Clipboard from "clipboard";
+export default class {
+    constructor ($attrs, $element, $timeout, ouiClipboardConfiguration) {
+        "ngInject";
+        this.$attrs = $attrs;
+        this.$element = $element;
+        this.$timeout = $timeout;
+        this.translations = angular.copy(ouiClipboardConfiguration.translations);
+    }
+
+    $onInit () {
+        this.tooltipText = this.translations.copyToClipboardLabel;
+        this.trigger = this.$element[0].querySelector(".oui-clipboard__button");
+        this.target = this.$element[0].querySelector(".oui-clipboard__control");
+    }
+
+    $onDestroy () {
+        this.clipboard.destroy();
+    }
+
+    $postLink () {
+        this.$timeout(() => {
+            this.$element
+                .addClass("oui-input-group oui-input-group_clipboard")
+                .removeAttr("id")
+                .removeAttr("name");
+        });
+
+        // Init the clipboard instance
+        this.clipboard = new Clipboard(this.trigger, {
+            target: () => this.target,
+            text: () => this.model
+        });
+
+        // Events for updating the tooltip
+        this.clipboard
+            .on("success", () => this.selectInputText(this.translations.copiedLabel))
+            .on("error", () => this.selectInputText(this.translations.notSupported));
+    }
+
+    selectInputText (tooltipText) {
+        const selectionEnd = this.model.length || 0;
+
+        this.$timeout(() => {
+            // Need to focus before selecting
+            this.target.focus();
+
+            // Select text on the target
+            this.target.selectionStart = 0;
+            this.target.selectionEnd = selectionEnd;
+            this.target.setSelectionRange(0, selectionEnd);
+            this.target.select();
+
+            // Update tooltip text
+            this.tooltipText = tooltipText;
+
+            // Need to bind the reset like this because
+            // ClipboardJS triggered the "blur" event
+            // By copying in a fake textarea
+            angular.element(this.target).one("blur", () => this.reset());
+        });
+    }
+
+    onInputClick () {
+        this.trigger.click();
+    }
+
+    reset () {
+        const resetDelay = 500;
+
+        // Add delay for resetting after tooltip animation
+        this.$timeout(() => {
+            this.tooltipText = this.translations.copyToClipboardLabel;
+        }, resetDelay);
+    }
+}

packages/oui-clipboard/src/clipboard.html

@@ -0,0 +1,12 @@
+<input class="oui-clipboard__control oui-input"
+    type="text"
+    ng-attr-id="{{::$ctrl.id}}"
+    ng-attr-name="{{::$ctrl.name}}"
+    ng-click="$ctrl.onInputClick()"
+    ng-model="::$ctrl.model"
+    oui-tooltip="{{$ctrl.tooltipText}}"
+    readonly>
+<button class="oui-clipboard__button oui-button"
+    ng-attr-aria-label="{{::$ctrl.translations.copyToClipboardLabel}}">
+    <span class="oui-icon oui-icon-copy-normal"></span>
+</button>

packages/oui-clipboard/src/clipboard.provider.js

@@ -0,0 +1,25 @@
+import { merge } from "lodash";
+export default class {
+    constructor () {
+        this.translations = {
+            copyToClipboardLabel: "Copy to clipboard",
+            copiedLabel: "Copied",
+            notSupported: "Copy to clipboard not supported. Please copy the text manually"
+        };
+    }
+
+    /**
+     * Set the translations
+     * @param {Object} translations a map of translations
+     */
+    setTranslations (translations) {
+        this.translations = merge(this.translations, translations);
+        return this;
+    }
+
+    $get () {
+        return {
+            translations: this.translations
+        };
+    }
+}

packages/oui-clipboard/src/index.js

@@ -0,0 +1,6 @@
+import Clipboard from "./clipboard.component.js";
+import ClipboardProvider from "./clipboard.provider.js";
+
+angular
+    .module("oui.clipboard", []).component("ouiClipboard", Clipboard)
+    .provider("ouiClipboardConfiguration", ClipboardProvider);

packages/oui-clipboard/src/index.spec.js

@@ -0,0 +1,110 @@
+describe("ouiClipboard", () => {
+    let $timeout;
+    let testUtils;
+    let configuration;
+
+    beforeEach(angular.mock.module("oui.clipboard"));
+    beforeEach(angular.mock.module("oui.clipboard.configuration"));
+    beforeEach(angular.mock.module("oui.test-utils"));
+
+    beforeEach(inject((_$timeout_, _TestUtils_) => {
+        $timeout = _$timeout_;
+        testUtils = _TestUtils_;
+    }));
+
+    describe("Provider", () => {
+
+        angular.module("oui.clipboard.configuration", [
+            "oui.clipboard"
+        ]).config(ouiClipboardConfigurationProvider => {
+            ouiClipboardConfigurationProvider.setTranslations({
+                foo: "bar"
+            });
+        });
+
+        beforeEach(inject(_ouiClipboardConfiguration_ => {
+            configuration = _ouiClipboardConfiguration_;
+        }));
+
+        it("should have custom options", () => {
+            expect(configuration.translations.foo).toEqual("bar");
+        });
+    });
+
+    describe("Component", () => {
+        it("should generate an input with the given text", () => {
+            const model = "foo";
+            const element = testUtils.compileTemplate("<oui-clipboard model='$ctrl.model'></oui-clipboard>", {
+                model
+            });
+
+            const inputElement = element[0].querySelector("input[type=text]");
+            expect(angular.element(inputElement).val()).toMatch(model);
+        });
+
+        it("should generate an input with name and id attribute", () => {
+            const element = testUtils.compileTemplate("<oui-clipboard id='id' name='name'></oui-clipboard>");
+            const inputElement = element[0].querySelector("input[type=text]");
+
+            $timeout.flush();
+
+            expect(angular.element(inputElement).attr("id")).toBe("id");
+            expect(angular.element(inputElement).attr("name")).toBe("name");
+        });
+
+        it("should have an instance of clipboardjs", () => {
+            const model = "foo";
+            const element = testUtils.compileTemplate("<oui-clipboard model='$ctrl.model'></oui-clipboard>", {
+                model
+            });
+            const $ctrl = element.controller("ouiClipboard");
+
+            expect($ctrl.clipboard).toBeDefined();
+
+            const target = angular.element($ctrl.clipboard.target());
+            expect(target.hasClass("oui-clipboard__control")).toBeTruthy();
+            expect($ctrl.clipboard.text()).toBe(model);
+        });
+
+        it("should update tooltip text when copied on click", (done) => {
+            const model = "bar";
+            const element = testUtils.compileTemplate("<oui-clipboard model='$ctrl.model'></oui-clipboard>", {
+                model
+            });
+            const btnElement = element[0].querySelector(".oui-clipboard__button");
+            const $ctrl = element.controller("ouiClipboard");
+
+            $ctrl.clipboard
+                .on("success", () => {
+                    $timeout.flush();
+                    expect($ctrl.tooltipText).toEqual(configuration.translations.copiedLabel);
+                    done();
+                })
+                .on("error", () => {
+                    $timeout.flush();
+                    expect($ctrl.tooltipText).toEqual(configuration.translations.notSupported);
+                    done();
+                });
+
+            btnElement.click();
+        });
+
+        it("should reset tooltip text", () => {
+            const element = testUtils.compileTemplate("<oui-clipboard model='$ctrl.model'></oui-clipboard>", {
+                model: "foo"
+            });
+            const btnElement = element[0].querySelector(".oui-clipboard__button");
+            const $ctrl = element.controller("ouiClipboard");
+
+            // Simulate click
+            btnElement.click();
+            $timeout.flush();
+
+            // Then reset
+            $ctrl.reset();
+            $timeout.flush();
+
+            expect($ctrl.tooltipText).toEqual(configuration.translations.copyToClipboardLabel);
+        });
+    });
+});

packages/oui-stepper/src/stepper.provider.js

@@ -12,6 +12,10 @@ export default class {
         };
     }
 
+    /**
+     * Set the translations
+     * @param {Object} translations a map of translations
+     */
     setTranslations (translations) {
         this.translations = merge(this.translations, translations);
         return this;

packages/oui-tooltip/README.md

@@ -46,7 +46,7 @@ If there is no `aria-label` attribute, the directive create one based on `oui-to
 
 | Attribute             | Type   | Binding | One-time Binding | Values                                               | Default   | Description       |
 | ----                  | ----   | ----    | ----             | ----                                                 | ----      | ----              |
-| oui-tooltip           | string | @       | true             |                                                      |           | tooltip text      |
+| oui-tooltip           | string | @       |                  |                                                      |           | tooltip text      |
 | oui-tooltip-placement | string | @?      | true             | top,top-start,top-end,bottom,bottom-start,bottom-end | top       | tooltip placement |
 
 

packages/oui-tooltip/src/tooltip.html

@@ -1 +1 @@
-<div class="oui-tooltip" role="tooltip" ng-bind="::$tooltipCtrl.text"></div>
+<div class="oui-tooltip" role="tooltip" ng-bind="$tooltipCtrl.text"></div>