MB-25475: make tasks progress bar draggable

Change-Id: I0ea1bd70fe75ec5f1e6eb455180690ed383c6612
Reviewed-on: http://review.couchbase.org/84225
Reviewed-by: Pavel Blagodov <stochmail@gmail.com>
Tested-by: Pavel Blagodov <stochmail@gmail.com>

priv/public/ui/app-new/admin/mn-admin-component.js

@@ -91,7 +91,8 @@ mn.modules.MnAdmin =
     var MnAdmin =
         ng.core.NgModule({
           declarations: [
-            mn.components.MnAdmin,
+            mn.directives.MnDraggable,
+            mn.components.MnAdmin
           ],
           imports: [
             mn.modules.MnPipesModule,

priv/public/ui/app-new/admin/mn-admin.html

@@ -25,9 +25,9 @@
          *ngIf="(tasksReadPermission | async)">
         <div
            class="tasks-progress dialog-small enable-ng-animation"
+           mnDraggable
+           [baseCornerRight]="true"
            *ngIf="!(isProgressBarClosed | async)">
-          <!-- mn-drag-and-drop -->
-          <!-- base-corner-right="true" -->
           <div class="close-tasks">
             <span (click)="toggleProgressBar()">X</span>
           </div>

priv/public/ui/app-new/directives/mn-draggable.js

@@ -0,0 +1,99 @@
+var mn = mn || {};
+mn.directives = mn.directives || {};
+mn.directives.MnDraggable =
+  (function () {
+    "use strict";
+
+    var MnDraggable =
+        ng.core.Directive({
+          selector: "[mnDraggable]",
+          inputs: [
+            "baseCornerRight"
+          ],
+          host: {
+            '[style.top]': 'top',
+            '[style.right]': 'right',
+            '[style.left]': 'left',
+            '[style.bottom]': 'bottom',
+            '(mousedown)': 'mousedown($event)',
+            '(document:mousemove)': 'mousemove($event)',
+            '(document:mouseup)': 'mouseup($event)',
+          }
+        })
+        .Class({
+          constructor: [
+            ng.core.ElementRef,
+            function MnFocusDirective(el) {
+              var that = this;
+              this.stream = {};
+              this.stream.mouseup = new Rx.Subject();;
+              this.stream.mousemove = new Rx.Subject();;
+              this.stream.mousedown = new Rx.Subject();;
+              this.destroy = new Rx.Subject();
+
+              that.stream
+                .mousedown
+                .map(function (e) {
+                  var target = e.currentTarget;
+                  var startX = target.offsetLeft;
+
+                  if (that.baseCornerRight) {
+                    startX += target.clientWidth;
+                  }
+                  return {
+                    startX: startX,
+                    startY: target.offsetTop,
+                    mouseX: e.clientX,
+                    mouseY: e.clientY
+                  };
+                }).switchMap(function (init) {
+                  return that.stream
+                    .mousemove
+                    .takeUntil(that
+                               .stream
+                               .mouseup)
+                    .map(function (e) {
+                      var dx = e.clientX - init.mouseX;
+                      var dy = e.clientY - init.mouseY;
+                      var rv = {
+                        top: init.startY + dy + 'px',
+                        bottom: 'auto'
+                      };
+                      if (that.baseCornerRight) {
+                        rv.right = -(init.startX + dx) + 'px';
+                        rv.left = "auto";
+                      } else {
+                        rv.right = "auto";
+                        rv.left = init.startX + dx + 'px';
+                      }
+                      return rv;
+                    });
+                })
+                .takeUntil(this.destroy)
+                .subscribe(function (css) {
+                  that.top = css.top;
+                  that.bottom = css.bottom;
+                  that.left = css.left;
+                  that.right = css.right;
+                });
+
+            }],
+          mousedown: function (e) {
+            this.stream.mousedown.next(e);
+            return false;
+          },
+          mouseup: function (e) {
+            this.stream.mouseup.next(e);
+          },
+          mousemove: function (e) {
+            this.stream.mousemove.next(e);
+            return false;
+          },
+          ngOnDestroy: function () {
+            this.destroy.next();
+            this.destroy.complete();
+          },
+        });
+
+    return MnDraggable;
+  })();

priv/public/ui/new-index.html

@@ -53,6 +53,7 @@
     <script src="app-new/services/mn-buckets.js"></script>
 
     <script src="app-new/directives/mn-focus.js"></script>
+    <script src="app-new/directives/mn-draggable.js"></script>
 
     <script src="app-new/auth/mn-auth-service.js"></script>
     <script src="app-new/auth/mn-auth-component.js"></script>