#181 Context menu implementation

ng2-components/ng2-alfresco-core/src/components/context-menu-holder.component.ts

@@ -0,0 +1,101 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from 'angular2/core';
+import { ContextMenuService } from './../services/context-menu.service';
+
+@Component({
+    selector:'context-menu-holder',
+    styles:[
+        `
+        .menu-container {
+            background: #fff;
+            display: block;
+            margin: 0;
+            padding: 0;
+            border: none;
+            overflow: visible;
+            z-index: 9999;
+        }
+
+        .context-menu {
+            list-style-type: none;
+            position: static;
+
+
+            height: auto;
+            width: auto;
+            min-width: 124px;
+            padding: 8px 0;
+            margin: 0;
+
+            box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+            border-radius: 2px;
+        }
+
+        .context-menu .link {
+            opacity: 1;
+        }
+        `
+    ],
+    host:{
+        '(document:click)':'clickedOutside()'
+        //'(click)':'clickInside()'
+    },
+    template: `
+        <div [ngStyle]="locationCss" class="menu-container">
+            <ul class="context-menu">
+                <li (click)="link.subject.next(link)" class="mdl-menu__item link" *ngFor="#link of links">
+                    {{link.title || link.model?.title}}
+                </li>
+            </ul>
+        </div>
+    `
+})
+export class ContextMenuHolderComponent {
+    links = [];
+    isShown = false;
+    private mouseLocation :{ left: number, top: number} = { left:0, top:0 };
+
+    constructor(
+        private _contextMenuService: ContextMenuService) {
+        _contextMenuService.show.subscribe(e => this.showMenu(e.event, e.obj));
+    }
+
+    get locationCss(){
+        return {
+            position: 'fixed',
+            display: this.isShown ? 'block': 'none',
+            left: this.mouseLocation.left + 'px',
+            top: this.mouseLocation.top + 'px'
+        };
+    }
+
+    clickedOutside(){
+        this.isShown = false;
+    }
+
+    showMenu(e, links) {
+        this.isShown = true;
+        this.links = links;
+
+        this.mouseLocation = {
+            left: e.clientX,
+            top: e.clientY
+        };
+    }
+}