vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Add global contextmenu option

pull/132/head
cagataycivici 2019-12-04 17:13:39 +03:00
parent 624b2c69bd
commit ff8a47c77c
7 changed files with 71 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/contextmenu/ContextMenu.d.ts vendored
View File

@ -1,11 +1,11 @@
import Vue from 'vue';
export declare class ContextMenu extends Vue {
popup?: boolean;
model?: any[];
appendTo?: string;
autoZIndex?: boolean;
baseZIndex?: number;
global?: boolean;
toggle(event: Event): void;
show(event: Event, target?: any): void;
hide(): void;

33
src/components/contextmenu/ContextMenu.vue
View File

@ -12,10 +12,6 @@ import ContextMenuSub from './ContextMenuSub';
export default {
props: {
popup: {
type: Boolean,
default: false
},
model: {
type: Array,
default: null
@ -31,11 +27,16 @@ export default {
baseZIndex: {
type: Number,
default: 0
},
global: {
type: Boolean,
default: false
}
},
target: null,
outsideClickListener: null,
resizeListener: null,
documentContextMenuListener: null,
pageX: null,
pageY: null,
data() {
@ -47,6 +48,7 @@ export default {
this.restoreAppend();
this.unbindResizeListener();
this.unbindOutsideClickListener();
this.unbindDocumentContextMenuListener();
},
methods: {
itemClick(event) {
@ -87,6 +89,10 @@ export default {
this.bindOutsideClickListener();
this.bindResizeListener();
if (this.global) {
this.bindDocumentContextMenuListener();
}
if (this.autoZIndex) {
this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
}
@ -94,6 +100,10 @@ export default {
onLeave() {
this.unbindOutsideClickListener();
this.unbindResizeListener();
if (this.global) {
this.unbindDocumentContextMenuListener();
}
},
position() {
let left = this.pageX + 1;
@ -172,6 +182,21 @@ export default {
else
document.getElementById(this.appendTo).removeChild(this.$refs.container);
}
},
bindDocumentContextMenuListener() {
if (!this.documentContextMenuListener) {
this.documentContextMenuListener = (event) => {
this.show(event);
};
document.addEventListener('contextmenu', this.documentContextMenuListener);
}
},
unbindDocumentContextMenuListener() {
if(this.documentContextMenuListener) {
document.removeEventListener('contextmenu', this.documentContextMenuListener);
this.documentContextMenuListener = null;
}
}
},
computed: {

67
src/views/contextmenu/ContextMenuDoc.vue
View File

@ -12,9 +12,6 @@ import TieredMenu from 'primevue/tieredmenu';
<h3>Getting Started</h3>
<p>TieredMenu requires a collection of menuitems as its model.</p>
<CodeHighlight>
&lt;TieredMenu :model="items" /&gt;
</CodeHighlight>
<CodeHighlight lang="js">
export default {
@ -156,17 +153,32 @@ export default {
}
</CodeHighlight>
<h3>Popup Mode</h3>
<p>TieredMenu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.</p>
<h3>Document Menu</h3>
<p>Setting global property attaches the context menu to the document.</p>
<CodeHighlight>
&lt;ContextMenu :global="true" :model="items" /&gt;
</CodeHighlight>
<h3>Element Menu</h3>
<p>ContextMenu is attached to a custom element manually using the reference and calling the <i>show(event)</i> method.</p>
<CodeHighlight>
&lt;Button type="button" label="Toggle" @click="toggle" /&gt;
&lt;TieredMenu ref="menu" :model="items" :popup="true" /&gt;
&lt;img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick"&gt;
&lt;ContextMenu ref="menu" :model="items" /&gt;
</CodeHighlight>
<CodeHighlight lang="js">
toggle(event) {
this.$refs.menu.toggle(event);
export default {
data() {
return {
items: //items
}
},
methods: {
onImageRightClick(event) {
this.$refs.menu.show(event);
}
}
}
</CodeHighlight>
@ -189,12 +201,6 @@ toggle(event) {
<td>null</td>
<td>An array of menuitems.</td>
</tr>
<tr>
<td>popup</td>
<td>boolean</td>
<td>false</td>
<td>Defines if menu would displayed as a popup.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
@ -212,6 +218,12 @@ toggle(event) {
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
<tr>
<td>global</td>
<td>boolean</td>
<td>false</td>
<td>Attaches the menu to document instead of a particular item.</td>
</tr>
</tbody>
</table>
@ -231,18 +243,17 @@ toggle(event) {
<tr>
<td>toggle</td>
<td>event: Browser event</td>
<td>Toggles the visiblity of the overlay.</td>
<td>Toggles the visibility of the menu.</td>
</tr>
<tr>
<td>show</td>
<td>event: Browser event <br />
target: Optional target if event.target would not be used</td>
<td>Shows the overlay.</td>
<td>event: Browser event</td>
<td>Shows the menu.</td>
</tr>
<tr>
<td>hide</td>
<td>-</td>
<td>Hides the overlay.</td>
<td>Hides the menu.</td>
</tr>
</tbody>
</table>
@ -260,7 +271,7 @@ toggle(event) {
</thead>
<tbody>
<tr>
<td>p-tieredmenu</td>
<td>p-contextmenu</td>
<td>Container element.</td>
</tr>
<tr>
@ -292,17 +303,13 @@ toggle(event) {
</TabPanel>
<TabPanel header="Source">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/tieredmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/contextmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<CodeHighlight>
<template v-pre>
&lt;h3&gt;Inline&lt;/h3&gt;
&lt;TieredMenu :model="items" /&gt;
&lt;h3&gt;Overlay&lt;/h3&gt;
&lt;Button type="button" label="Toggle" @click="toggle" /&gt;
&lt;TieredMenu ref="menu" :model="items" :popup="true" /&gt;
&lt;img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick"&gt;
&lt;ContextMenu ref="menu" :model="items" /&gt;
</template>
</CodeHighlight>
@ -444,8 +451,8 @@ export default {
}
},
methods: {
toggle(event) {
this.$refs.menu.toggle(event);
onImageRightClick(event) {
this.$refs.menu.show(event);
}
}
}

2
src/views/menu/MenuDoc.vue
View File

@ -143,7 +143,7 @@ toggle(event) {
<tr>
<td>toggle</td>
<td>event: Browser event</td>
<td>Toggles the visiblity of the overlay.</td>
<td>Toggles the visibility of the overlay.</td>
</tr>
<tr>
<td>show</td>

2
src/views/menubar/MenubarDoc.vue
View File

@ -224,7 +224,7 @@ export default {
</TabPanel>
<TabPanel header="Source">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/tieredmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/menubar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<CodeHighlight>

2
src/views/overlaypanel/OverlayPanelDoc.vue
View File

@ -92,7 +92,7 @@ toggle(event) {
<tr>
<td>toggle</td>
<td>event: Browser event</td>
<td>Toggles the visiblity of the overlay.</td>
<td>Toggles the visibility of the overlay.</td>
</tr>
<tr>
<td>show</td>

2
src/views/tieredmenu/TieredMenuDoc.vue
View File

@ -231,7 +231,7 @@ toggle(event) {
<tr>
<td>toggle</td>
<td>event: Browser event</td>
<td>Toggles the visiblity of the overlay.</td>
<td>Toggles the visibility of the overlay.</td>
</tr>
<tr>
<td>show</td>