initial import for Open Source 🎉

static/js/directives/ui/clipboard-copy/clipboard-copy.directive.spec.ts

@@ -0,0 +1,77 @@
+import { ClipboardCopyDirective } from './clipboard-copy.directive';
+import * as Clipboard from 'clipboard';
+import { Mock } from 'ts-mocks';
+import Spy = jasmine.Spy;
+
+
+describe("ClipboardCopyDirective", () => {
+  var directive: ClipboardCopyDirective;
+  var $elementMock: any;
+  var $timeoutMock: any;
+  var $documentMock: any;
+  var clipboardFactory: any;
+  var clipboardMock: Mock<Clipboard>;
+
+  beforeEach(() => {
+    $elementMock = new Mock<ng.IAugmentedJQuery>();
+    $timeoutMock = jasmine.createSpy('$timeoutSpy').and.callFake((fn: () => void, delay) => fn());
+    $documentMock = new Mock<ng.IDocumentService>();
+    clipboardMock = new Mock<Clipboard>();
+    clipboardMock.setup(mock => mock.on).is((eventName: string, callback: (event) => void) => {});
+    clipboardFactory = jasmine.createSpy('clipboardFactory').and.returnValue(clipboardMock.Object);
+    directive = new ClipboardCopyDirective(<any>[$elementMock.Object],
+                                           $timeoutMock,
+                                           <any>[$documentMock.Object],
+                                           clipboardFactory);
+    directive.copyTargetSelector = "#copy-input-box-0";
+  });
+
+  describe("ngAfterContentInit", () => {
+
+    it("initializes new Clipboard instance", () => {
+      const target = new Mock<ng.IAugmentedJQuery>();
+      $documentMock.setup(mock => mock.querySelector).is(selector => target.Object);
+      directive.ngAfterContentInit();
+
+      expect(clipboardFactory).toHaveBeenCalled();
+      expect((<Spy>clipboardFactory.calls.argsFor(0)[0])).toEqual($elementMock.Object);
+      expect((<Spy>clipboardFactory.calls.argsFor(0)[1]['target']())).toEqual(target.Object);
+    });
+
+    it("sets error callback for Clipboard instance", () => {
+      directive.ngAfterContentInit();
+
+      expect((<Spy>clipboardMock.Object.on.calls.argsFor(0)[0])).toEqual('error');
+      expect((<Spy>clipboardMock.Object.on.calls.argsFor(0)[1])).toBeDefined();
+    });
+
+    it("sets success callback for Clipboard instance", (done) => {
+      directive.ngAfterContentInit();
+
+      expect((<Spy>clipboardMock.Object.on.calls.argsFor(1)[0])).toEqual('success');
+      expect((<Spy>clipboardMock.Object.on.calls.argsFor(1)[1])).toBeDefined();
+      done();
+    });
+  });
+
+  describe("ngOnDestroy", () => {
+
+    beforeEach(() => {
+      clipboardMock.setup(mock => mock.destroy).is(() => null);
+    });
+
+    it("calls method to destroy Clipboard instance if set", (done) => {
+      directive.ngAfterContentInit();
+      directive.ngOnDestroy();
+
+      expect((<Spy>clipboardMock.Object.destroy)).toHaveBeenCalled();
+      done();
+    });
+
+    it("does not call method to destroy Clipboard instance if not set", () => {
+      directive.ngOnDestroy();
+
+      expect((<Spy>clipboardMock.Object.destroy)).not.toHaveBeenCalled();
+    });
+  });
+});

static/js/directives/ui/clipboard-copy/clipboard-copy.directive.ts

@@ -0,0 +1,63 @@
+import { Directive, Inject, Input, AfterContentInit, OnDestroy } from 'ng-metadata/core';
+import * as Clipboard from 'clipboard';
+
+
+@Directive({
+  selector: '[clipboardCopy]'
+})
+export class ClipboardCopyDirective implements AfterContentInit, OnDestroy {
+
+  @Input('@clipboardCopy') public copyTargetSelector: string;
+
+  private clipboard: Clipboard;
+
+  constructor(@Inject('$element') private $element: ng.IAugmentedJQuery,
+              @Inject('$timeout') private $timeout: ng.ITimeoutService,
+              @Inject('$document') private $document: ng.IDocumentService,
+              @Inject('clipboardFactory') private clipboardFactory: (elem, options) => Clipboard) {
+
+  }
+
+  public ngAfterContentInit(): void {
+    // FIXME: Need to wait for DOM to render to find target element
+    this.$timeout(() => {
+      this.clipboard = this.clipboardFactory(this.$element[0], {target: (trigger) => {
+          return this.$document[0].querySelector(this.copyTargetSelector);
+        }});
+
+      this.clipboard.on("error", (e) => {
+        console.error(e);
+      });
+
+      this.clipboard.on('success', (e) => {
+        const container = e.trigger.parentNode.parentNode.parentNode;
+        const messageElem = container.querySelector('.clipboard-copied-message');
+        if (!messageElem) {
+          return;
+        }
+
+        // Resets the animation.
+        var elem = messageElem;
+        elem.style.display = 'none';
+        elem.classList.remove('animated');
+
+        // Show the notification.
+        setTimeout(() => {
+          elem.style.display = 'inline-block';
+          elem.classList.add('animated');
+        }, 10);
+
+        // Reset the notification.
+        setTimeout(() => {
+          elem.style.display = 'none';
+        }, 5000);
+      });
+    }, 100);
+  }
+
+  public ngOnDestroy(): void {
+    if (this.clipboard) {
+      this.clipboard.destroy();
+    }
+  }
+}