ticlab.js/src/app.js

import { CommandRegistry } from '@lumino/commands';
import { Message } from '@lumino/messaging';
import { BoxPanel, CommandPalette, ContextMenu, DockPanel, Menu, MenuBar, Widget } from '@lumino/widgets';
import '../style/index.css';

// import '@fortawesome/fontawesome-free/css/all.min.css';
import { EditorWidget } from './editor.js';
import { ListingWidget } from './listing.js';

import * as ticdb from './ticdb.js';
// class ContentWidget extends Widget {

//   static createNode() {
//     let node = document.createElement('div');
//     let content = document.createElement('div');
//     let input = document.createElement('input');
//     input.placeholder = 'Placeholder...';
//     content.appendChild(input);
//     node.appendChild(content);
//     return node;
//   }

//   constructor(name) {
//     super({ node: ContentWidget.createNode() });
//     this.setFlag(Widget.Flag.DisallowLayout);
//     this.addClass('content');
//     this.addClass(name.toLowerCase());
//     this.title.label = name;
//     this.title.closable = true;
//     this.title.caption = `Long description for: ${name}`;
//   }

//   get inputNode() {
//     return this.node.getElementsByTagName('input')[0];
//   }

//   onActivateRequest(Message) {
//     if (this.isAttached) {
//       this.inputNode.focus();
//     }
//   }
// }

window._tic = {};
const commands = new CommandRegistry();


function main () {
  const dialog = document.getElementById("dialog"),
    openfile = document.getElementById("openfile"),
    openfile_fileinput = document.getElementById("openfile_fileinput"),
    openfile_cancel = document.getElementById("openfile_cancel");

  function dialog_is_open () {
    return dialog.style.display != "none";
  }

  function close_dialog() {
    dialog.style.display = "none";
    openfile.style.display = "none";
    openfile_fileinput.value = null;
  }

  function show_openfile() {
    dialog.style.display = "flex";
    openfile.style.display = "block";
    openfile_fileinput.focus();
  }

  openfile_cancel.addEventListener("click", e=> {
    close_dialog();
  })

  commands.addCommand('tic:open', {
    label: 'Open...',
    mnemonic: 1,
    iconClass: 'fa fa-file',
    execute: () => {
      // console.log('Import...');
      show_openfile();
    }
  });

  commands.addCommand('tic:save', {
    label: 'Save',
    mnemonic: 0,
    iconClass: 'fa fa-save',
    execute: async () => {
      console.log('Save');
      // current_cart.code.text = codesrc; // code.getValue();
      if (window._tic.filename && window._tic.cart) {
        let cart = window._tic.cart;
        cart.code.text = window.code.getValue();
        // console.log("saving code", cart.code.text);
        await ticdb.save_cart(window._tic.filename, cart, window._tic.item.mode);
        listing.sync();
      }
    }
  });

  commands.addCommand('tic:save-as', {
    label: 'Save as...',
    mnemonic: 0,
    iconClass: 'fa fa-save',
    execute: async () => {
      console.log('Save as...');
      if (window._tic.cart) {
        let filename = prompt("Save as...");
        if (!filename) { return; }
        window._tic.filename = filename;
        let cart = window._tic.cart;
        cart.code.text = window.code.getValue();
        // console.log("saving code", cart.code.text);
        await ticdb.save_cart(filename, cart, window._tic.item.mode);
        listing.sync();
      }
    }
  });

  commands.addKeyBinding({
    keys: ['Accel S'],
    selector: 'body',
    command: 'tic:save'
  });

  commands.addKeyBinding({
    keys: ['Accel O'],
    selector: 'body',
    command: 'tic:open'
  });

  let filemenu = new Menu({ commands });
  filemenu.addItem({ command: 'tic:open' });
  filemenu.addItem({ command: 'tic:save' });
  filemenu.addItem({ command: 'tic:save-as' });
  // filemenu.addItem({ type: 'separator' });

  filemenu.title.label = 'File';
  filemenu.title.mnemonic = 0;

  let bar = new MenuBar();
  bar.addMenu(filemenu);
  bar.id = 'menuBar';

  document.addEventListener('keydown', (event) => {
    // console.log("keydown", event);
    if (event.key == "Escape" && dialog_is_open()) {
      close_dialog();
    } else {
      commands.processKeydownEvent(event);

    }
  });

  let listing = new ListingWidget('Listing');
  let editor = new EditorWidget('Editor');

  let dock = new DockPanel();
  dock.addWidget(listing);
  dock.addWidget(editor, { mode: 'split-right', ref: listing });
  // dock.addWidget(editor2, { ref: editor1 });
  dock.id = 'dock';

  BoxPanel.setStretch(dock, 1);

  let main = new BoxPanel({ direction: 'left-to-right', spacing: 0 });
  main.id = 'main';
  // main.addWidget(palette);
  main.addWidget(dock);

  window.onresize = () => { main.update(); };

  Widget.attach(bar, document.body);
  Widget.attach(main, document.body);
}

window.onload = main;