瀏覽代碼

added info about adding an app to a page

Harlan Iverson 6 年之前
父節點
當前提交
7744e65048
共有 1 個文件被更改,包括 38 次插入0 次删除
  1. 38 0
      doc/operations.md

+ 38 - 0
doc/operations.md

@@ -60,6 +60,44 @@ The video page has in the EDN header
 ```
 
 
+## Create a web app
+
+Adding a new webapp is like adding a web page, but also involves adding a script and interacts
+with the page DOM.
+
+The DOM is generated by Selmer and the path of least resistance to access the DOM is via
+headers with deterministic ID values generated, and then replacing the node or accessing siblings
+for input data.
+
+Since our source file is a Markdown file with an EDN header, we can include script 
+by specifying the path in a template. We should start by creating a template with 
+the same name as the page, starting with the template we usually use (eg. :page).
+
+
+### Reading data from a table
+
+The code below will set a known ID onto a data table immediately following a known header.
+
+We can inspect the code of some generated pages and find the pattern of element names for
+H1 headers is to lowercase the name and replace spaces with underscores. From there, we can 
+find the next element of type table and then assign it an ID. We can then operate on the new
+element in any way that we wish.
+
+```
+function HACK_identifyData () {
+  var el = document.getElementById('roles_by_project');
+  while( el && el.nodeName.toLowerCase() != 'table') {
+    el = el.nextSibling;
+  }
+  if (el) {
+    el.setAttribute('id', 'roles_by_project_data');
+  }
+}
+HACK_identifyData();
+```
+
+
+
 That's it... see the `Add a page` section for more details.
 
 ## Import a video from YouTube