initial import for Open Source 🎉

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();
+    }
+  }
+}