diff --git a/editor/editor.php b/editor/editor.php index 5c8877bd94e05b806c7b72a34d3a68ad4429e9a2..17f07992a507c2945e4706ac4e5ad745ca4714be 100644 --- a/editor/editor.php +++ b/editor/editor.php @@ -42,6 +42,17 @@ <textarea id="node-videos" name="node-videos"></textarea> </div> <div id="link-selected" class="hidden"> + <h3 id="link-name" class="bottom-space">aud1 ↔ Sortieren</h3> + + <label for="link-type">Type</label> + <select id="link-type" name="node-type" class="bottom-space medium-width"> + <option value="Vorlesung">Vorlesung</option> + <option value="Algorithmus">Algorithmus</option> + <option value="Definition">Definition</option> + <option value="Beispiel">Beispiel</option> + <option value="Übung">Übung</option> + <option value="Kapitel">Kapitel</option> + </select> </div> </div> </section> diff --git a/editor/js/tools/menus/selectmenu.js b/editor/js/tools/menus/selectmenu.js index 80dba6c005f32ca169365cd10dbb3da84a368533..08287c43516b8312adc6f61a0911c1eae8ba7275 100644 --- a/editor/js/tools/menus/selectmenu.js +++ b/editor/js/tools/menus/selectmenu.js @@ -25,6 +25,13 @@ const NODE_MENU = [ NODE_VIDEOS_ID, ]; +const LINK_NAME_CONNECTOR = " → "; +const LINK_NAME_ID = "#link-name"; +const LINK_TYPE_ID = "#link-type"; +const LINK_MENU = [LINK_TYPE_ID]; + +const MENU = [...NODE_MENU, ...LINK_MENU]; + export class SelectMenu extends ToolMenu { constructor() { super(); @@ -36,12 +43,13 @@ export class SelectMenu extends ToolMenu { { menu: NODE_TYPE_ID, property: Graph.NODE_TYPE }, { menu: NODE_REF_ID, property: Graph.NODE_REFERENCES }, { menu: NODE_VIDEOS_ID, property: Graph.NODE_VIDEOS }, + { menu: LINK_TYPE_ID, property: Graph.LINK_TYPE }, ]; this.hooked = false; // Can only hook menu events once, but have to do it later, when they are loaded } hookMenu() { - NODE_MENU.forEach((menu) => { + MENU.forEach((menu) => { console.log(this.find(menu)); // Subscribes to change event for each menu element this.find(menu).on("change", (e) => { @@ -117,6 +125,7 @@ export class SelectMenu extends ToolMenu { this.fillNode(value); this.setContext(CONTEXT.node); } else if (value.link) { + this.fillLink(value); this.setContext(CONTEXT.link); } else { this.setContext(CONTEXT.nothing); @@ -128,4 +137,16 @@ export class SelectMenu extends ToolMenu { this.find(menu).val(node[this.toProperty(menu)]); }); } + + fillLink(link) { + var sourceName = link[Graph.LINK_SOURCE][Graph.NODE_LABEL]; + var targetName = link[Graph.LINK_TARGET][Graph.NODE_LABEL]; + this.find(LINK_NAME_ID).text( + sourceName + LINK_NAME_CONNECTOR + targetName + ); + + LINK_MENU.forEach((menu) => { + this.find(menu).val(link[this.toProperty(menu)]); + }); + } }