add menu

package.json

@@ -36,7 +36,7 @@
   "dependencies": {
     "@types/lodash": "^4.14.150",
     "core-js": "^3.6.4",
-    "g8-popup-menu": "0.0.2",
+    "g8-popup-menu": "0.0.3",
     "g8-vue-tree": "^0.2.1",
     "lodash": "^4.17.15",
     "vue": "^2.6.11",

src/App.vue

@@ -20,10 +20,15 @@
           @change="piChanged()"
         />
       </div>
+      <div class="control-group">
+        <label for="dark-theme">Use dark theme</label>
+        <input id="dark-theme" type="checkbox" v-model="darkTheme" />
+      </div>
     </div>
     <hr />
     <g8-xml-edit
       :xml="xml"
+      :theme="darkTheme ? 'dark' : ''"
       :show-attr-value="showAttrValue"
       :pi-use-attribute="piAttr"
     />
@@ -63,6 +68,8 @@ export default class App extends Vue {
 
   piAttr = true;
 
+  darkTheme = true;
+
   piChanged(): void {
     this.$nextTick(() => {
       const tree = this.$children[0] as G8XmlEdit;

src/components/xml-edit.vue

@@ -6,7 +6,7 @@
 
 <template>
   <div class="g8-xml__container">
-    <ul class="g8-tree__view g8-tree--dark g8-xml__tree">
+    <ul class="g8-tree__view g8-xml__tree" :class="treeTheme">
       <li
         class="g8-tree__node"
         v-if="tree.declaration"
@@ -34,7 +34,7 @@
         <template #default="{ item }">
           <span
             :class="[`g8-xml__${item.type}`]"
-            @contextmenu.prevent="edit(item)"
+            @contextmenu.prevent="menu(item, $event)"
           >
             {{ item | tag(piUseAttribute) }}
           </span>
@@ -59,12 +59,19 @@
       @save="saveNode($event)"
       @close="closePopup()"
     ></g8-xml-popup-element>
+    <g8-popup-menu
+      class="g8-menu g8-menu--off"
+      ref="menu"
+      :class="menuTheme"
+      @select="action($event)"
+    />
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import { G8VueTree } from 'g8-vue-tree';
+import { G8MenuItem, G8PopupMenu } from 'g8-popup-menu';
 import {
   defaultDeclaration,
   isDeclarationNode,
@@ -78,14 +85,16 @@ import {
 import G8XmlPopupDeclaration from './xml-popup-declaration.vue';
 import { cloneWithoutHierarchy, xmlJs } from '../utils';
 import G8XmlPopupElement from './xml-popup-element.vue';
-import { getTexts } from '../translations/translation';
+import { getTexts, interpolate } from '../translations/translation';
+import { each, map } from 'lodash';
 
 @Component({
   name: 'g8-xml-edit',
   components: {
     G8XmlPopupElement,
     G8XmlPopupDeclaration,
     G8VueTree,
+    G8PopupMenu,
   },
   filters: {
     tag(node: XmlNodeTypes, piUseAttribute: boolean): string {
@@ -116,6 +125,8 @@ export default class G8XmlEdit extends Vue {
 
   @Prop({ default: false }) piUseAttribute!: boolean;
 
+  @Prop({ default: '' }) theme!: boolean;
+
   tree!: XmlEditRoot;
 
   currentNode?: XmlNodeTypes | XmlEditDeclaration | null;
@@ -130,9 +141,41 @@ export default class G8XmlEdit extends Vue {
 
   texts = getTexts();
 
+  nodeMenu = [
+    { id: 'edit', label: this.texts.menuEdit },
+    { id: 'insert-after', label: this.texts.menuInsertAfter },
+    { id: 'insert-before', label: this.texts.menuInsertBefore },
+    { id: 'append-child', label: this.texts.menuAppend },
+    { id: 'prepend-child', label: this.texts.menuPrepend },
+    { id: 'remove', label: this.texts.menuRemove },
+  ] as G8MenuItem[];
+
+  get treeTheme(): string[] {
+    if (!this.theme) return [];
+    return [`g8-tree--${this.theme}`];
+  }
+
+  get menuTheme(): string[] {
+    if (!this.theme) return [];
+    return [`g8--${this.theme}`];
+  }
+
   // noinspection JSUnusedGlobalSymbols
   created(): void {
     this.reloadXml();
+    const elements = ['CData', 'comment', 'element', 'instruction', 'text'];
+    const actions = ['after', 'before', 'append', 'prepend'];
+    const labels = ['insert', 'insert', 'append', 'prepend'];
+    each(actions, (action, idx) => {
+      this.nodeMenu[idx + 1].children = map(
+        elements,
+        e =>
+          ({
+            id: `${action}-${e}`,
+            label: interpolate(`${labels[idx]}What`, e),
+          } as G8MenuItem),
+      );
+    });
   }
 
   reloadXml(): void {
@@ -152,6 +195,19 @@ export default class G8XmlEdit extends Vue {
     this.popupOpen = false;
   }
 
+  menu(item: XmlNodeTypes, evt: MouseEvent): void {
+    this.currentNode = item;
+    (this.$refs.menu as G8PopupMenu).open(this.nodeMenu, evt);
+  }
+
+  action(menu: G8MenuItem): void {
+    switch (menu.id) {
+      case 'edit':
+        this.edit(this.currentNode!);
+        break;
+    }
+  }
+
   edit(item: XmlNodeTypes | XmlEditDeclaration): void {
     this.currentNode = item;
     this.currentNodeParent = item.parent;

src/styles/index.scss

@@ -4,7 +4,10 @@
  * Author: eidng8
  */
 
+@import 'variables';
+
 @import '~g8-vue-tree/src/components/tree-view';
+@import '~g8-popup-menu/src/styles/popup-menu';
 @import './overwrites';
 @import './xml-edit';
 @import './popup';

src/styles/overwrites.scss

@@ -17,3 +17,8 @@
 .g8-tree__node__entry__toggle:before {
   content: '\2218';
 }
+
+.g8-menu__label,
+.g8-menu__go-back {
+  text-transform: capitalize;
+}

src/styles/variables.scss

@@ -4,14 +4,11 @@
  * Author: eidng8
  */
 
-//noinspection SassScssResolvedByNameOnly
-$g8-xml__bg: $g8-tree__bg !default;
+$g8-xml__bg: #cccccc !default;
 
-//noinspection SassScssResolvedByNameOnly
-$g8-xml__fg: $g8-tree__fg !default;
+$g8-xml__fg: #333333 !default;
 
-//noinspection SassScssResolvedByNameOnly
-$g8-xml__text--dark: darken($g8-tree__bg, 20%);
+$g8-xml__text--dark: darken($g8-xml__bg, 20%);
 
 $g8-xml__fg--inverse: $g8-xml__bg;
 $g8-xml__bg--inverse: $g8-xml__fg;

src/translations/translation.ts

@@ -1,3 +1,9 @@
+/*
+ * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * Author: eidng8
+ */
+
 const texts = {
   attribute: 'attribute',
   attributes: 'attributes',
@@ -13,10 +19,31 @@ const texts = {
   addAttribute: 'Add Attribute',
   close: 'close',
   save: 'save',
+  insertWhat: 'insert %s',
+  appendWhat: 'append %s',
+  prependWhat: 'prepend %s',
+  menuEdit: 'edit',
+  menuInsertBefore: 'insert before',
+  menuInsertAfter: 'insert after',
+  menuAppend: 'append child',
+  menuPrepend: 'prepend child',
+  menuRemove: 'remove',
   // Errors
   errNotEditing: 'There is no node being edited.',
   errNodeParent: 'Invalid node parent',
-};
+} as { [key: string]: string };
+
+export function interpolate(key: string, ...args: any[]): string {
+  let arg = '%s';
+  let text = texts[key];
+  let i = text.indexOf('%s');
+  while (i >= 0) {
+    arg = args.shift() || arg;
+    text = text.replace('%s', arg);
+    i = text.indexOf('%s');
+  }
+  return text;
+}
 
 export function getTexts(): { [key: string]: string } {
   return texts;