aboutsummaryrefslogtreecommitdiffstats
path: root/stories/ng2-component-lab/popup-menu.component.exp.ts
diff options
context:
space:
mode:
Diffstat (limited to 'stories/ng2-component-lab/popup-menu.component.exp.ts')
-rw-r--r--stories/ng2-component-lab/popup-menu.component.exp.ts104
1 files changed, 0 insertions, 104 deletions
diff --git a/stories/ng2-component-lab/popup-menu.component.exp.ts b/stories/ng2-component-lab/popup-menu.component.exp.ts
deleted file mode 100644
index 12da361..0000000
--- a/stories/ng2-component-lab/popup-menu.component.exp.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import { experimentOn } from '@islavi/ng2-component-lab';
-
-export default experimentOn('Menu')
- .group("Popups",[
- {
- id: 'basicPopupMenuStatic',
- showSource: true,
- title: 'Basic popup menu (static)',
- description: 'Basic popup menu (static)',
- template: `
- <popup-menu-list [open]="true">
- <popup-menu-item>
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24">
- <defs>
- <path id="add-copy-a1" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L12,10 L12,7 C12,6.4 11.6,6 11,6 C10.4,6 10,6.4 10,7 L10,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L10,12 L10,15 C10,15.6 10.4,16 11,16 C11.6,16 12,15.6 12,15 L12,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/>
- </defs>
- <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
- <use xlink:href="#add-copy-a1"/>
- </g>
- </svg>
- First
- </popup-menu-item>
- <popup-menu-item type="selected">
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24">
- <defs>
- <path id="add-copy-a2" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L12,10 L12,7 C12,6.4 11.6,6 11,6 C10.4,6 10,6.4 10,7 L10,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L10,12 L10,15 C10,15.6 10.4,16 11,16 C11.6,16 12,15.6 12,15 L12,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/>
- </defs>
- <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
- <use xlink:href="#add-copy-a2"/>
- </g>
- </svg>
- Selected
- </popup-menu-item>
- <popup-menu-item type="disabled">
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24">
- <defs>
- <path id="add-copy-a3" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L12,10 L12,7 C12,6.4 11.6,6 11,6 C10.4,6 10,6.4 10,7 L10,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L10,12 L10,15 C10,15.6 10.4,16 11,16 C11.6,16 12,15.6 12,15 L12,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/>
- </defs>
- <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
- <use xlink:href="#add-copy-a3"/>
- </g>
- </svg>
- Disabled
- </popup-menu-item>
- <popup-menu-item type="separator"></popup-menu-item>
- <popup-menu-item>
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24">
- <defs>
- <path id="add-copy-a4" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L12,10 L12,7 C12,6.4 11.6,6 11,6 C10.4,6 10,6.4 10,7 L10,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L10,12 L10,15 C10,15.6 10.4,16 11,16 C11.6,16 12,15.6 12,15 L12,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/>
- </defs>
- <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
- <use xlink:href="#add-copy-a4"/>
- </g>
- </svg>
- Second
- </popup-menu-item>
- </popup-menu-list>
- `
- },
- {
- id: 'basicMenuRelative',
- title: 'Basic menu (relative)',
- description: 'Basic menu (relative)',
- showSource: true,
- context: {
- showSelectedItem: (msg, color) => {
- const elm = document.getElementById('selectedItem');
- elm.style.color = color;
- elm.innerHTML = msg;
- }
- },
- styles: [`
- .message {
- position: absolute;
- top: 0; left: 0;
- color: white;
- }
- .click-area {
- position: absolute;
- width: 100%;
- height: 100%;
- }
- `],
- template:
- `
- <div style="position: relative; width: 400px; height: 200px; background: blue;">
- <span class="message">Click in the box...<br/>
- (popup menu is {{menuStatus === undefined ? 'never opened' : (menuStatus ? 'open at '+menuPos.x+' , '+menuPos.y : 'closed')}})<br/>
- selected: <span #selectedItem id="selectedItem"></span>
- </span>
- <div class="click-area"
- (click)="menu.position = {x:$event.offsetX, y:$event.offsetY}; mopen=true;">
- <popup-menu-list [(open)]="mopen" (openChange)="menuStatus=$event" (positionChange)="menuPos=$event" [relative]="true" #menu>
- <popup-menu-item (action)="showSelectedItem('First', 'red')">First</popup-menu-item>
- <popup-menu-item type="disabled">Disabled</popup-menu-item>
- <popup-menu-item type="separator"></popup-menu-item>
- <popup-menu-item (action)="showSelectedItem('Second', 'green')">Second</popup-menu-item>
- <popup-menu-item>Third (none)</popup-menu-item>
- </popup-menu-list>
- </div>
- </div>
- `
- }
- ]);