TypeScript dnd-tree-view.append函數代碼示例

  function walk(entry: SupCore.Data.EntryNode, parentEntry: SupCore.Data.EntryNode, parentElt: HTMLLIElement) {
    const liElt = createEntryElement(entry);
    liElt.classList.add("collapsed");

    const nodeType: "item"|"group" = (entry.children != null) ? "group" : "item";
    widget.append(liElt, nodeType, parentElt);

    if (entry.children != null) for (const child of entry.children) walk(child, entry, liElt);
  }

function onRegistryReceived(event: any) {
  if (event.type !== "registry") {
    // TODO: Whoops?! Handle error?
    console.log(event);
    return;
  }

  if (event.error == null && event.registry != null) {
    registry = event.registry;
    const systemsById = registry.systems;

    for (const systemId in systemsById) {
      const system = systemsById[systemId];

      const systemElt = html("li", { dataset: { id: systemId } });
      html("div", "label", { parent: systemElt, textContent: systemId });
      html("div", "progress", { parent: systemElt });
      treeView.append(systemElt, "group");

      for (const authorName in system.plugins) {
        const plugins = system.plugins[authorName];

        const authorElt = html("li");
        html("div", "label", { parent: authorElt, textContent: `${authorName} (${Object.keys(plugins).length} plugins)` });
        treeView.append(authorElt, "group", systemElt);

        for (const pluginName in plugins) {
          const pluginElt = html("li", { dataset: { id: `${systemId}:${authorName}/${pluginName}` } });
          html("div", "label", { parent: pluginElt, textContent: pluginName });
          html("div", "progress", { parent: pluginElt });
          treeView.append(pluginElt, "item", authorElt);
        }
      }
    }
  } else {
    registry = null;
  }

  for (const getRegistryCallback of getRegistryCallbacks) getRegistryCallback(registry);
  getRegistryCallbacks.length = 0;
}

function onRegistryReceived(event: any) {
  if (event.type !== "registry") {
    // TODO: Whoops?! Handle error?
    console.log(event);
    return;
  }

  registry = event.registry;
  const systemsById = registry.systems;

  for (const systemId in systemsById) {
    const system = systemsById[systemId];

    const systemElt = html("li", { dataset: { systemId }});
    html("div", "label", { parent: systemElt });
    treeView.append(systemElt, "group");

    updateSystemLabel(systemId);

    for (const authorName in system.plugins) {
      const plugins = system.plugins[authorName];

      const authorElt = html("li");
      html("div", "label", { parent: authorElt, textContent: `${authorName} (${Object.keys(plugins).length} plugins)` });
      treeView.append(authorElt, "group", systemElt);

      for (const pluginName in plugins) {
        // const plugin = plugins[pluginName];

        const pluginElt = html("li");
        html("div", "label", { parent: pluginElt, textContent: `${pluginName}` });
        treeView.append(pluginElt, "item", authorElt);
      }
    }
  }
}

function addServer(serverEntry: ServerEntry) {
  const serverElt = document.createElement("li");
  serverElt.dataset["serverId"] = serverEntry.id;
  serversTreeView.append(serverElt, "item");

  const labelElt = document.createElement("div");
  labelElt.classList.add("label");
  labelElt.textContent = serverEntry.label;
  serverElt.appendChild(labelElt);

  const hostElt = document.createElement("div");
  hostElt.classList.add("host");

  const host = serverEntry.hostname + (serverEntry.port != null ? `:${serverEntry.port}` : "");
  hostElt.textContent = host;
  serverElt.appendChild(hostElt);
}