overflow_scanner/app
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ing

Browse Source
This commit is contained in:
crusader 2018-08-18 10:04:59 +09:00
parent df60d66951
commit 0be9c89d35
16 changed files with 303 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
@overflow/commons/ui/component/index.ts
View File

@ -4,6 +4,7 @@ import {
import {
DropdownPanelComponent,
PopupPanelComponent
} from './primeng';
import {
@ -18,6 +19,7 @@ import {
export const COMPONENTS = [
DropdownPanelComponent,
MenuBarComponent,
PopupPanelComponent,
ToolbarComponent,
TitleBarComponent,
WindowControlsComponent,

16
@overflow/commons/ui/component/primeng/dropdown-panel.component.html
View File

@ -1,18 +1,12 @@
<div [class]="styleClass" [ngStyle]="style" [ngClass]="{'ui-dropdownpanel ui-widget': true}">
<div [ngClass]="{'ui-widget ui-dropdownpanel-header ui-state-default':true, 'ui-state-active':visible}" (click)="toggle($event)">
<div [ngClass]="'ui-popuppanel-header'" *ngIf="headerFacet" [ngStyle]="headerStyle" [class]="headerStyleClass" (click)="popupPanel.toggle($event)">
<ng-content select="p-header"></ng-content>
</div>
</div>
<div #container [ngClass]="{'ui-dropdownpanel-container ui-menu ui-widget ui-widget-content': true, 'ui-menu-dynamic ui-shadow': popup}"
[class]="dropdownStyleClass" [ngStyle]="dropdownStyle" (click)="preventDocumentDefault=true" *ngIf="!popup || visible" [@overlayAnimation]="'visible'"
[@.disabled]="popup !== true" (@overlayAnimation.start)="onOverlayAnimationStart($event)">
<div class="ui-dropdownpanel-content-wrapper" [ngClass]="{'ui-dropdownpanel-content-wrapper-overflown': !visible||animating}">
<div class="ui-dropdownpanel-content ui-widget-content">
<of-p-popupPanel #popupPanel [style]="style" [styleClass]="styleClass" [appendTo]="blockTarget">
<div [ngClass]="'ui-popuppanel-content'">
<ng-content></ng-content>
</div>
<div class="ui-dropdownpanel-footer" *ngIf="footerFacet">
<div [ngClass]="'ui-popuppanel-footer'" *ngIf="footerFacet" [ngStyle]="footerStyle" [class]="footerStyleClass">
<ng-content select="p-footer"></ng-content>
</div>
</div>
</div>
</of-p-popupPanel>

33
@overflow/commons/ui/component/primeng/dropdown-panel.component.scss
View File

@ -1,24 +1,25 @@
.ui-dropdownpanel {
.ui-popuppanel-header {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-shrink: 0;
&-header {
width: 100%;
height: 100%;
align-items: center;
padding: var(--spacing);
overflow: hidden;
background-color: var(--toolbar-button-background-color)
}
.ui-dropdownpanel-container {
background-color: rgba(201, 76, 76, 0.3);
.ui-popuppanel-body {
padding: 1em;
}
.ui-dropdownpanel-footer {
.ui-popuppanel-title {
font-size: 1.5em;
font-weight: bold;
margin-bottom: .5em;
}
.ui-popuppanel-subtitle {
opacity: .7;
margin-bottom: .5em;
margin-top: -.25em;
font-weight: bold;
}
.ui-popuppanel-footer {
padding-top: 1em;
}
}

175
@overflow/commons/ui/component/primeng/dropdown-panel.component.ts
View File

@ -1,185 +1,30 @@
import { Component, ElementRef, OnDestroy, Input, Renderer2, ViewChild, ContentChild } from '@angular/core';
import { trigger, state, style, transition, animate, AnimationEvent } from '@angular/animations';
import { Header, Footer, DomHandler } from 'primeng/primeng';
import { Component, Input, ContentChild } from '@angular/core';
import { Header, Footer } from 'primeng/primeng';
@Component({
selector: 'p-dropdownPanel',
selector: 'of-p-dropdownPanel',
templateUrl: './dropdown-panel.component.html',
styleUrls: ['./dropdown-panel.component.scss'],
animations: [
trigger('overlayAnimation', [
state('void', style({
// transform: 'translateY(5%)',
transform: 'translate3d(0, 0, 0)',
opacity: 0
})),
state('visible', style({
// transform: 'translateY(0)',
transform: 'translate3d(0, 0, 0)',
opacity: 1
})),
transition('void => visible', animate('225ms ease-in-out')),
transition('visible => void', animate('195ms ease-in-out'))
// transition('void => visible', animate('225ms ease-out')),
// transition('visible => void', animate('195ms ease-in'))
// transition('visible => void', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
// transition('void => visible', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
])
],
providers: [DomHandler]
})
export class DropdownPanelComponent implements OnDestroy {
@Input() popup = true;
export class DropdownPanelComponent {
@Input() blockTarget: any;
@Input() style: any;
@Input() styleClass: string;
@Input() dropdownStyle: any;
@Input() headerStyle: any;
@Input() dropdownStyleClass: string;
@Input() headerStyleClass: string;
@Input() appendTo: any;
@Input() footerStyle: any;
@Input() autoZIndex = true;
@Input() baseZIndex = 0;
@ViewChild('container') containerViewChild: ElementRef;
@Input() footerStyleClass: string;
@ContentChild(Header) headerFacet;
@ContentChild(Footer) footerFacet;
container: HTMLDivElement;
documentClickListener: any;
documentResizeListener: any;
preventDocumentDefault: boolean;
target: any;
visible = false;
constructor(
public el: ElementRef,
public domHandler: DomHandler,
public renderer: Renderer2
) {
}
toggle(event) {
if (this.visible) {
this.hide();
} else {
this.show(event);
}
this.preventDocumentDefault = true;
}
show(event) {
this.target = event.currentTarget;
this.visible = true;
this.preventDocumentDefault = true;
}
onOverlayAnimationStart(event: AnimationEvent) {
switch (event.toState) {
case 'visible':
if (this.popup) {
this.container = event.element;
this.moveOnTop();
this.appendOverlay();
this.domHandler.absolutePosition(this.container, this.target);
this.bindDocumentClickListener();
this.bindDocumentResizeListener();
}
break;
case 'void':
this.onOverlayHide();
break;
}
}
appendOverlay() {
if (this.appendTo) {
if (this.appendTo === 'body') {
document.body.appendChild(this.container);
} else {
this.domHandler.appendChild(this.container, this.appendTo);
}
}
}
restoreOverlayAppend() {
if (this.container && this.appendTo) {
this.el.nativeElement.appendChild(this.container);
}
}
moveOnTop() {
if (this.autoZIndex) {
this.container.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
}
}
hide() {
this.visible = false;
}
onWindowResize() {
this.hide();
}
bindDocumentClickListener() {
if (!this.documentClickListener) {
this.documentClickListener = this.renderer.listen('document', 'click', () => {
if (!this.preventDocumentDefault) {
this.hide();
}
this.preventDocumentDefault = false;
});
}
}
unbindDocumentClickListener() {
if (this.documentClickListener) {
this.documentClickListener();
this.documentClickListener = null;
}
}
bindDocumentResizeListener() {
this.documentResizeListener = this.onWindowResize.bind(this);
window.addEventListener('resize', this.documentResizeListener);
}
unbindDocumentResizeListener() {
if (this.documentResizeListener) {
window.removeEventListener('resize', this.documentResizeListener);
this.documentResizeListener = null;
}
}
onOverlayHide() {
this.unbindDocumentClickListener();
this.unbindDocumentResizeListener();
this.preventDocumentDefault = false;
this.target = null;
}
ngOnDestroy() {
if (this.popup) {
this.restoreOverlayAppend();
this.onOverlayHide();
}
}
constructor() { }
}

1
@overflow/commons/ui/component/primeng/index.ts
View File

@ -1 +1,2 @@
export { DropdownPanelComponent } from './dropdown-panel.component';
export { PopupPanelComponent } from './popup-panel.component';

8
@overflow/commons/ui/component/primeng/popup-panel.component.html Normal file
View File

@ -0,0 +1,8 @@
<div #container [ngClass]="{'ui-popuppanel ui-widget ui-widget-content ui-corner-all': true, 'ui-popuppanel-dynamic ui-shadow': popup}"
[class]="styleClass" [ngStyle]="style" (click)="preventDocumentDefault=true" *ngIf="!popup || visible" [@overlayAnimation]="'visible'"
[@.disabled]="popup !== true" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationDone($event)">
<ng-content></ng-content>
</div>
<p-blockUI id="block-ui" [target]="blockTarget" [blocked]="visible">
</p-blockUI>

12
@overflow/commons/ui/component/primeng/popup-panel.component.scss Normal file
View File

@ -0,0 +1,12 @@
.ui-popuppanel {
width: 12.5em;
padding: .25em;
}
.ui-popuppanel.ui-popuppanel-dynamic {
position: absolute;
}
#block-ui {
min-height:100vh;
}

173
@overflow/commons/ui/component/primeng/popup-panel.component.ts Normal file
View File

@ -0,0 +1,173 @@
import { NgModule, Component, ElementRef, OnDestroy, Input, Renderer2, ViewChild, Inject, forwardRef } from '@angular/core';
import { trigger, state, style, transition, animate, AnimationEvent } from '@angular/animations';
import { DomHandler } from 'primeng/primeng';
@Component({
selector: 'of-p-popupPanel',
templateUrl: './popup-panel.component.html',
styleUrls: ['./popup-panel.component.scss'],
animations: [
trigger('overlayAnimation', [
state('void', style({
transform: 'translateY(5%)',
opacity: 0
})),
state('visible', style({
transform: 'translateY(0)',
opacity: 1
})),
transition('void => visible', animate('225ms ease-out')),
transition('visible => void', animate('195ms ease-in'))
])
],
providers: [DomHandler]
})
export class PopupPanelComponent implements OnDestroy {
@Input() blockTarget: any;
@Input() style: any;
@Input() styleClass: string;
@Input() appendTo: any;
@Input() autoZIndex = true;
@Input() baseZIndex = 0;
@ViewChild('container') containerViewChild: ElementRef;
private readonly popup = true;
container: HTMLDivElement;
documentClickListener: any;
documentResizeListener: any;
preventDocumentDefault: boolean;
target: any;
visible: boolean;
blockUIVisible = false;
constructor(public el: ElementRef, public domHandler: DomHandler, public renderer: Renderer2) { }
toggle(event) {
if (this.visible) {
this.hide();
} else {
this.show(event);
}
this.preventDocumentDefault = true;
}
show(event) {
this.target = event.currentTarget;
this.visible = true;
this.preventDocumentDefault = true;
}
onOverlayAnimationStart(event: AnimationEvent) {
switch (event.toState) {
case 'visible':
if (this.popup) {
this.container = event.element;
this.moveOnTop();
this.appendOverlay();
this.domHandler.absolutePosition(this.container, this.target);
this.bindDocumentClickListener();
this.bindDocumentResizeListener();
}
break;
case 'void':
this.onOverlayHide();
break;
}
}
onOverlayAnimationDone(event: AnimationEvent) {
console.log('onOverlayAnimationDone');
}
appendOverlay() {
if (this.appendTo) {
if (this.appendTo === 'body') {
document.body.appendChild(this.container);
} else {
this.domHandler.appendChild(this.container, this.appendTo);
}
}
}
restoreOverlayAppend() {
if (this.container && this.appendTo) {
this.el.nativeElement.appendChild(this.container);
}
}
moveOnTop() {
if (this.autoZIndex) {
this.container.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
}
}
hide() {
this.visible = false;
}
onWindowResize() {
this.hide();
}
bindDocumentClickListener() {
if (!this.documentClickListener) {
this.documentClickListener = this.renderer.listen('document', 'click', () => {
if (!this.preventDocumentDefault) {
this.hide();
}
this.preventDocumentDefault = false;
});
}
}
unbindDocumentClickListener() {
if (this.documentClickListener) {
this.documentClickListener();
this.documentClickListener = null;
}
}
bindDocumentResizeListener() {
this.documentResizeListener = this.onWindowResize.bind(this);
window.addEventListener('resize', this.documentResizeListener);
}
unbindDocumentResizeListener() {
if (this.documentResizeListener) {
window.removeEventListener('resize', this.documentResizeListener);
this.documentResizeListener = null;
}
}
onOverlayHide() {
this.unbindDocumentClickListener();
this.unbindDocumentResizeListener();
this.preventDocumentDefault = false;
this.target = null;
}
ngOnDestroy() {
if (this.popup) {
this.restoreOverlayAppend();
this.onOverlayHide();
}
}
}

20
src/app/pages/home/home-page.component.html
View File

@ -8,6 +8,26 @@
<button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton></button>
</div>
</p-panel>
<h3 class="first">Document</h3>
<p-blockUI [blocked]="blockedDocument"></p-blockUI>
<button type="button" pButton label="Block" (click)="blockDocument()"></button>
<h3>Panel</h3>
<button type="button" pButton label="Block" (click)="blockedPanel=true"></button>
<button type="button" pButton label="Unblock" (click)="blockedPanel=false"></button>
<p-blockUI [target]="pnl" [blocked]="blockedPanel">
<i class="fa fa-lock fa-5x" style="position:absolute;top:25%;left:50%"></i>
</p-blockUI>
<p-panel #pnl header="Godfather I" [style]="{'margin-top':'20px'}">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved
son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless
violence whenever anything stands against the good of the family.
</p-panel>
</div>
</div>
</div>

10
src/app/pages/home/home-page.component.ts
View File

@ -9,6 +9,9 @@ import { Component, OnInit } from '@angular/core';
})
export class HomePageComponent implements OnInit {
blockedPanel = false;
blockedDocument = false;
constructor() { }
@ -16,5 +19,10 @@ export class HomePageComponent implements OnInit {
}
blockDocument() {
this.blockedDocument = true;
setTimeout(() => {
this.blockedDocument = false;
}, 3000);
}
}

8
src/app/pages/pages.component.html
View File

@ -1,6 +1,6 @@
<app-toolbar>
<app-nic-dropdown></app-nic-dropdown>
<app-scanner-setting-dropdown></app-scanner-setting-dropdown>
<app-nic-dropdown [blockTarget]="pagesContent"></app-nic-dropdown>
<app-scanner-setting-dropdown [blockTarget]="pagesContent"></app-scanner-setting-dropdown>
<div class="sidebar-section" style="width: 250px;">
<div class="toolbar-dropdown closed" aria-expanded="false">
@ -53,6 +53,8 @@
</div>
</app-toolbar>
<div #bodyPlaceholder>
<p-panel #pagesContent [showHeader]="false">
<div id="pages-content">
<router-outlet #o="outlet"></router-outlet>
</div>
</p-panel>

3
src/app/pages/pages.component.scss
View File

@ -0,0 +1,3 @@
#pages-content {
min-height: 100vh;
}

4
src/commons/component/nic-dropdown.component.html
View File

@ -1,4 +1,4 @@
<p-dropdownPanel [style]="{'width':'300px'}" [dropdownStyle]="{'width':'500px', 'height':'500px'}">
<of-p-dropdownPanel [style]="{'width':'400px'}" [headerStyle]="{'width':'300px'}" [blockTarget]="blockTarget">
<p-header>
192.168.1.0/24
</p-header>
@ -8,4 +8,4 @@
<p-footer>
Footer content here
</p-footer>
</p-dropdownPanel>
</of-p-dropdownPanel>

3
src/commons/component/nic-dropdown.component.ts
View File

@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-nic-dropdown',
@ -6,6 +6,7 @@ import { Component } from '@angular/core';
styleUrls: ['./nic-dropdown.component.scss'],
})
export class NicDropdownComponent {
@Input() blockTarget: any;
constructor(
) {

24
src/commons/component/scanner-setting-dropdown.component.html
View File

@ -1,10 +1,28 @@
<p-dropdownPanel [style]="{'width':'300px'}" [dropdownStyle]="{'width':'500px', 'height':'500px'}">
<of-p-dropdownPanel [style]="{'width':'400px'}" [headerStyle]="{'width':'300px'}" [blockTarget]="blockTarget">
<p-header>
<div>IP Type: V4, Range: 192.168.1.1 ~ 192.168.1.254</div>
<div>Port Type: TCP, UDP, Range: 1 ~ 1024</div>
</p-header>
Body Content
<h3 class="first">Document</h3>
<p-blockUI [blocked]="blockedDocument"></p-blockUI>
<button type="button" pButton label="Block" (click)="blockDocument()"></button>
<h3>Panel</h3>
<button type="button" pButton label="Block" (click)="blockedPanel=true"></button>
<button type="button" pButton label="Unblock" (click)="blockedPanel=false"></button>
<p-blockUI [target]="pnl" [blocked]="blockedPanel">
<i class="fa fa-lock fa-5x" style="position:absolute;top:25%;left:50%"></i>
</p-blockUI>
<p-panel #pnl header="Godfather I" [style]="{'margin-top':'20px'}">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved
son Michael has just come home from the war, but does not intend to become part of his father's business. Through Michael's
life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good
of the family.
</p-panel>
<p-footer>
Footer content here
</p-footer>
</p-dropdownPanel>
</of-p-dropdownPanel>

3
src/commons/component/scanner-setting-dropdown.component.ts
View File

@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-scanner-setting-dropdown',
@ -6,6 +6,7 @@ import { Component } from '@angular/core';
styleUrls: ['./scanner-setting-dropdown.component.scss'],
})
export class ScannerSettingDropdownComponent {
@Input() blockTarget: any;
constructor(
) {