New packages org (#2639)

New packages org

lib/insights/diagram/components/tooltip/diagram-tooltip.component.html

@@ -0,0 +1,13 @@
+<div #tooltipContent class="{{adf}}-diagram-tooltip">
+    <div class="{{adf}}-diagram-tooltip-header">{{ data.type }} {{ data.name || data.id }}</div>
+    <div class="{{adf}}-diagram-tooltip-body">
+        <div *ngIf="data.name" class="{{adf}}-diagram-name-property">
+            <span class="{{adf}}-diagram-propertyName">Name:</span>
+            <span class="{{adf}}-diagram-propertyValue">{{ data.name }}</span>
+        </div>
+        <div *ngFor="let property of data.properties" class="{{adf}}-diagram-general-property">
+            <span class="{{adf}}-diagram-propertyName">{{ property.name }}:</span>
+            <span class="{{adf}}-diagram-propertyValue">{{ property.value }}</span>
+        </div>
+    </div>
+</div>

lib/insights/diagram/components/tooltip/diagram-tooltip.component.scss

@@ -0,0 +1,76 @@
+@mixin adf-diagram-tooltip-theme($theme) {
+
+    .adf {
+        &-diagram-tooltip {
+            transform: scale(0);
+            transform-origin: top center;
+            z-index: 999;
+            display: inline-block;
+            font-weight: 500;
+            line-height: 14px;
+            font-size: 14px;
+            max-width: 300px;
+            position: fixed;
+            top: -500px;
+            left: -500px;
+            text-align: left;
+            will-change: unset;
+            border: 1px solid #c5c5c5;
+            word-wrap: break-word;
+        }
+
+        &-diagram-tooltip.is-active {
+            animation: tooltipAnimation 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
+        }
+
+        &-diagram-tooltip-header {
+            background-color: rgba(43, 65, 79, 0.95);
+            color: #FFF;
+            padding: 8px;
+            font-weight: bold;
+            min-width: 200px;
+            line-height: 20px;
+        }
+
+        &-diagram-tooltip-body {
+            color: #4a4a4a;
+            background-color: rgba(255, 255, 255, 0.95);
+        }
+
+        &-diagram-tooltip-body > div {
+            padding: 4px 8px;
+        }
+
+        &-diagram-tooltip-body > div:first-child {
+            padding-top: 8px;
+        }
+
+        &-diagram-tooltip-body > div:last-child {
+            padding-bottom: 8px;
+        }
+
+        &-diagram-propertyName {
+            font-weight: bold;
+            margin-right: 5px;
+        }
+
+        &-diagram-propertyValue {
+            font-style: italic;
+        }
+    }
+
+    @keyframes tooltipAnimation {
+        0% {
+            transform: scale(0);
+            opacity: 0;
+        }
+        50% {
+            transform: scale(0.99);
+        }
+        100% {
+            transform: scale(1);
+            opacity: 1;
+            visibility: visible;
+        }
+    }
+}

lib/insights/diagram/components/tooltip/diagram-tooltip.component.spec.ts

@@ -0,0 +1,186 @@
+/*!
+ * @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 '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DiagramTooltipComponent } from './diagram-tooltip.component';
+
+@Component({
+    template: `
+        <div id="diagram-element-id">Hover me</div>
+        <diagram-tooltip [data]="data"></diagram-tooltip>`
+})
+class TestHostComponent {
+    data = {
+        id: 'diagram-element-id'
+    };
+}
+
+describe('DiagramTooltipComponent', () => {
+
+    describe('Template', () => {
+
+        let fixture: ComponentFixture<DiagramTooltipComponent>;
+        let component: DiagramTooltipComponent;
+        let data;
+
+        beforeEach(async(() => {
+            TestBed.configureTestingModule({
+                declarations: [ DiagramTooltipComponent ],
+                providers: []
+            }).compileComponents();
+        }));
+
+        beforeEach(() => {
+            fixture = TestBed.createComponent(DiagramTooltipComponent);
+            component = fixture.componentInstance;
+            data = {
+                type: 'awesome-diagram-element',
+                name: 'diagram-element-name',
+                id: 'diagram-element-id',
+                properties: []
+            };
+            component.data = data;
+            fixture.detectChanges();
+        });
+
+        it('should render with type and name if name is defined', () => {
+            let tooltipHeader = fixture.debugElement.query(By.css('.adf-diagram-tooltip-header'));
+
+            expect(tooltipHeader.nativeElement.innerText).toBe('awesome-diagram-element diagram-element-name');
+        });
+
+        it('should render with type and id if name is NOT defined', () => {
+            data.name = '';
+            fixture.detectChanges();
+
+            let tooltipHeader = fixture.debugElement.query(By.css('.adf-diagram-tooltip-header'));
+
+            expect(tooltipHeader.nativeElement.innerText).toBe('awesome-diagram-element diagram-element-id');
+        });
+
+        it('should render the name if name is defined in the tooltip body', () => {
+            let nameProperty = fixture.debugElement.query(By.css('.adf-diagram-name-property'));
+
+            expect(nameProperty).not.toBeNull();
+            expect(nameProperty.nativeElement.innerText).toBe('Name: diagram-element-name');
+        });
+
+        it('should NOT render the name if name is NOT defined in the tooltip body', () => {
+            data.name = '';
+            fixture.detectChanges();
+
+            let nameProperty = fixture.debugElement.query(By.css('.adf-diagram-name-property'));
+
+            expect(nameProperty).toBeNull();
+        });
+
+        it('should render the properties, if there is any', () => {
+            data.properties = [
+                { name: 'property-1-name', value: 'property-1-value' },
+                { name: 'property-2-name', value: 'property-2-value' }
+            ];
+            fixture.detectChanges();
+
+            let propertyNames = fixture.debugElement.queryAll(By.css('.adf-diagram-general-property > .adf-diagram-propertyName')),
+                propertyValues = fixture.debugElement.queryAll(By.css('.adf-diagram-general-property > .adf-diagram-propertyValue'));
+
+            expect(propertyNames.length).toBe(2);
+            expect(propertyValues.length).toBe(2);
+            expect(propertyNames[0].nativeElement.innerText).toBe('property-1-name:');
+            expect(propertyNames[1].nativeElement.innerText).toBe('property-2-name:');
+            expect(propertyValues[0].nativeElement.innerText).toBe('property-1-value');
+            expect(propertyValues[1].nativeElement.innerText).toBe('property-2-value');
+        });
+    });
+
+    describe('Tooltip functionality', () => {
+
+        let fixture: ComponentFixture<TestHostComponent>;
+        let component: TestHostComponent;
+        let event: MouseEvent;
+
+        beforeEach(async(() => {
+            TestBed.configureTestingModule({
+                declarations: [ DiagramTooltipComponent, TestHostComponent ]
+            }).compileComponents();
+        }));
+
+        beforeEach(() => {
+            fixture  = TestBed.createComponent(TestHostComponent);
+            component = fixture.componentInstance;
+            event = new MouseEvent('mouseenter');
+
+            fixture.detectChanges();
+        });
+
+        it('should NOT show the tooltip by default', () => {
+            const tooltip = fixture.debugElement.query(By.css('.adf-diagram-tooltip.is-active'));
+
+            expect(tooltip).toBeNull();
+        });
+
+        it('should show the tooltip on hovering the target element', () => {
+            const tooltipTarget = fixture.debugElement.query(By.css('#diagram-element-id'));
+
+            tooltipTarget.nativeElement.dispatchEvent(new MouseEvent('mouseenter'));
+
+            let tooltip = fixture.debugElement.query(By.css('.adf-diagram-tooltip.is-active'));
+            expect(tooltip).not.toBeNull();
+        });
+
+        it('should show the tooltip on touchend the target element', () => {
+            const tooltipTarget = fixture.debugElement.query(By.css('#diagram-element-id'));
+
+            tooltipTarget.nativeElement.dispatchEvent(new MouseEvent('touchend'));
+
+            let tooltip = fixture.debugElement.query(By.css('.adf-diagram-tooltip.is-active'));
+            expect(tooltip).not.toBeNull();
+        });
+
+        it('should hide the tooltip on leaving the target element', () => {
+            const tooltipTarget = fixture.debugElement.query(By.css('#diagram-element-id'));
+
+            tooltipTarget.nativeElement.dispatchEvent(new MouseEvent('mouseenter'));
+            tooltipTarget.nativeElement.dispatchEvent(new MouseEvent('mouseleave'));
+
+            let tooltip = fixture.debugElement.query(By.css('.adf-diagram-tooltip.is-active'));
+            expect(tooltip).toBeNull();
+        });
+
+        it('should hide the tooltip on windows\'s scroll element', () => {
+            const tooltipTarget = fixture.debugElement.query(By.css('#diagram-element-id'));
+
+            tooltipTarget.nativeElement.dispatchEvent(new MouseEvent('mouseenter'));
+            window.dispatchEvent(new CustomEvent('scroll'));
+
+            let tooltip = fixture.debugElement.query(By.css('.adf-diagram-tooltip.is-active'));
+            expect(tooltip).toBeNull();
+        });
+
+        it('should hide the tooltip on windows\'s touchstart element', () => {
+            const tooltipTarget = fixture.debugElement.query(By.css('#diagram-element-id'));
+
+            tooltipTarget.nativeElement.dispatchEvent(new MouseEvent('touchend'));
+            window.dispatchEvent(new CustomEvent('touchstart'));
+
+            let tooltip = fixture.debugElement.query(By.css('.adf-diagram-tooltip.is-active'));
+            expect(tooltip).toBeNull();
+        });
+    });
+});

lib/insights/diagram/components/tooltip/diagram-tooltip.component.ts

@@ -0,0 +1,146 @@
+/*!
+ * @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.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild } from '@angular/core';
+const POSITION = { BOTTOM: 'bottom', LEFT: 'left', RIGHT: 'right', TOP: 'top'};
+const STRATEGY = { CURSOR: 'cursor', ELEMENT: 'element'};
+const IS_ACTIVE_CLASS = 'is-active';
+
+@Component({
+    selector: 'diagram-tooltip',
+    templateUrl: './diagram-tooltip.component.html',
+    styleUrls: ['./diagram-tooltip.component.scss']
+})
+export class DiagramTooltipComponent implements AfterViewInit, OnDestroy {
+
+    private tooltipElement: any;
+    private targetElement: any;
+    private boundMouseEnterHandler: EventListenerObject;
+    private boundMouseLeaveAndScrollHandler: EventListenerObject;
+    public adf: string = 'adf';
+
+    @ViewChild('tooltipContent') tooltipContent: ElementRef;
+
+    @Input()
+    data: any;
+
+    @Input()
+    position: string = 'bottom';
+
+    @Input()
+    strategy: string = 'cursor';
+
+    /**
+     * Set up event listeners for the target element (defined in the data.id)
+     */
+    public ngAfterViewInit() {
+        this.tooltipElement = this.tooltipContent.nativeElement;
+
+        if (this.data.id) {
+            this.targetElement = document.getElementById(this.data.id);
+        }
+
+        if (this.targetElement) {
+            if (!this.targetElement.hasAttribute('tabindex')) {
+                this.targetElement.setAttribute('tabindex', '0');
+            }
+
+            this.boundMouseEnterHandler = this.handleMouseEnter.bind(this);
+            this.boundMouseLeaveAndScrollHandler = this.hideTooltip.bind(this);
+            this.targetElement.addEventListener('mouseenter', this.boundMouseEnterHandler, false);
+            this.targetElement.addEventListener('touchend', this.boundMouseEnterHandler, false);
+            this.targetElement.addEventListener('mouseleave', this.boundMouseLeaveAndScrollHandler, false);
+            window.addEventListener('scroll', this.boundMouseLeaveAndScrollHandler, true);
+            window.addEventListener('touchstart', this.boundMouseLeaveAndScrollHandler);
+        }
+    }
+
+    /**
+     * Clear all bound eventlisteners
+     */
+    ngOnDestroy() {
+        window.removeEventListener('scroll', this.boundMouseLeaveAndScrollHandler, true);
+        window.removeEventListener('touchstart', this.boundMouseLeaveAndScrollHandler);
+    }
+
+    /**
+     * Hides the tooltip
+     */
+    private hideTooltip(): void {
+        this.tooltipElement.classList.remove(IS_ACTIVE_CLASS);
+    }
+
+    /**
+     * Shows the tooltip
+     */
+    private showTooltip(): void {
+        this.tooltipElement.classList.add(IS_ACTIVE_CLASS);
+    }
+
+    /**
+     * Calculates the tooltip's position and displays it
+     *
+     * @param event mouseenter/touchend event
+     */
+    private handleMouseEnter(event): void {
+        let props;
+
+        if (this.strategy === STRATEGY.ELEMENT ) {
+            props = event.target.getBoundingClientRect();
+        }else {
+            props = {top: (event.pageY - 150), left: event.pageX , width: event.layerX, height: 50};
+        }
+
+        let top = props.top + (props.height / 2);
+        let marginLeft = -1 * (this.tooltipElement.offsetWidth / 2);
+        let marginTop = -1 * (this.tooltipElement.offsetHeight / 2);
+        let left = props.left + (props.width / 2);
+
+        if (this.position === POSITION.LEFT || this.position === POSITION.RIGHT) {
+            left = (props.width / 2);
+            if (top + marginTop < 0) {
+                this.tooltipElement.style.top = '0';
+                this.tooltipElement.style.marginTop = '0';
+            } else {
+                this.tooltipElement.style.top = top + 'px';
+                this.tooltipElement.style.marginTop = marginTop + 'px';
+            }
+        } else {
+            if (left + marginLeft < 0) {
+                this.tooltipElement.style.left = '0';
+                this.tooltipElement.style.marginLeft = '0';
+            } else {
+                this.tooltipElement.style.left = left + 'px';
+                this.tooltipElement.style.marginLeft = marginLeft + 'px';
+            }
+        }
+
+        if (this.position === POSITION.TOP) {
+            this.tooltipElement.style.top = props.top - this.tooltipElement.offsetHeight - 10 + 'px';
+        } else if (this.position === POSITION.RIGHT) {
+            this.tooltipElement.style.left = props.left + props.width + 10 + 'px';
+        } else if (this.position === POSITION.LEFT) {
+            this.tooltipElement.style.left = props.left - this.tooltipElement.offsetWidth - 10 + 'px';
+        } else {
+            this.tooltipElement.style.top = props.top + props.height + 10 + 'px';
+        }
+
+        this.showTooltip();
+    }
+}

lib/insights/diagram/components/tooltip/index.ts

@@ -0,0 +1,20 @@
+/*!
+ * @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.
+ */
+
+ /* tslint:disable:component-selector  */
+
+export * from './diagram-tooltip.component';