Merge branch 'gh-pages' of https://github.com/LivelyKernel/lively4-core into gh-pages

Author: BraunTom

demos/contraints/index.md

@@ -1 +1 @@
-# #EUD20 Lively Contraints
+# #EUD20 Lively Constraints

demos/dlf-archive.js

@@ -0,0 +1,256 @@
+
+/*MD 
+
+## DLF Archive 
+
+Example from <http://localhost:9005/Dropbox/Music/dlf/Querkoepfe/index.md>:
+
+```javascript
+    import DLFArchive from "demos/dlf-archive.js"
+
+    var container  = lively.query(this, "lively-container")
+    new DLFArchive("Querköpfe",  "Wed_2105_querkoepfe", container.getDir()).createView()
+```
+
+
+MD*/
+
+
+import Strings from 'src/client/strings.js'
+
+export default class DLFArchive {
+
+  constructor(sendung, pattern, dirURL) {
+    this.dirURL = dirURL
+    this.sendung = sendung
+    this.pattern = pattern
+  }
+  
+  
+  async loadDLFSendung(isoDate) {
+    var tab = await fetch(`cached:http://localhost:9005/Dropbox/share/DLF/extract/${isoDate}.tab`).then(r => r.text()) 
+
+    var programm = tab.split(/\n/g).map(ea => ea.split(/\t/))
+    
+    
+    // deals with corona iregularities
+    var programmCollection = programm.find(ea => ea[1] && ea[1].startsWith("Der Kultur-Abend"))
+    if (programmCollection) {
+      let div = <div></div>
+      div.innerHTML = programmCollection[2]
+      var subs = []
+      var last = ["nothing","nothing", ""]
+      for(var child of div.childNodes) {
+        if (child.classList.contains("subDescription")) {
+          var spans = child.querySelectorAll("span")
+          last = [spans[0].textContent, spans[1].textContent, ""]
+          subs.push(last)
+        } else {
+          last[2] += child.outerHTML + "\n"
+        }
+      }
+      programm.push(...subs)    
+    }
+
+    var sendung = programm.filter(ea => ea[1] && ea[1].startsWith(this.sendung))[0]
+    if (!sendung || !sendung[2]) return
+    let div = <div></div>
+    div.innerHTML = sendung[2]
+    var p = div.querySelector("p")
+    if (p) {
+      return p.innerHTML.split(/<br>/)
+    }
+  }
+  
+  
+  async loadProgramInfo(item) {
+    var m = item.file.name.match(/(20\d\d-\d\d-\d\d)/)
+    if (m && m[1]) {
+      var isoDate = m[1]
+    } else {
+      return
+    }
+    var info = await this.loadDLFSendung(isoDate)
+    return info  
+  }
+  
+  
+  async selectItem(item) {
+    if (this.lastSelected) this.lastSelected.classList.remove("selected")
+    item.classList.add("selected")
+    this.lastSelected = item
+    
+    var info = await this.loadProgramInfo(item)
+    if (!info) {
+      this.details.innerHTML = "no details"
+    } else {
+      this.details.innerHTML = JSON.stringify(info)
+      this.lastSelected.info = info
+    }
+    
+  }
+
+  onItemClick(evt, item) {
+    
+    this.selectItem(item)
+      
+    // if (item.classList.contains("selected")) {
+    //   item.classList.remove("selected")
+    // } else {
+    //   item.classList.add("selected")
+    // }
+  }
+  
+  async newFilenameForItem(item) {
+  
+    if (!item.file) return
+   
+    var rawPattern = this.pattern
+    
+    var filename = item.file.name
+    if (!filename.match(rawPattern)) {
+      // lively.notify("file has already a custom name")
+      return
+    }
+    
+    if (!item.info) {
+      item.info = await this.loadProgramInfo(item)
+      if (!item.info) {
+        console.log("could not load DLF program info for " + item.file)
+        return
+      }
+    }
+
+
+    var info = item.info
+    var s = this.sendung 
+    if (this.sendung == "Hörspiel") { // #TODO pull this out
+      s += " - " + info[0]
+    }
+    s += " - " + info[1]
+    if (info[2]) s += " - " + info[2]
+    s = s.replace(/ /g, "_")
+    s = s.replace(/[:.\/]/g, "_")
+    s = s.replace(/[„"]/g,"")
+    s = s.replace(/_+/g, "_")
+
+    var newFilename = filename.replace(rawPattern, s)
+    return newFilename
+  }
+  
+  
+  
+  async onRenameButton(evt) {
+    if (!this.lastSelected) return
+    
+    var newFilename = await this.newFilenameForItem(this.lastSelected)
+    
+    if (!newFilename) {
+      lively.warn("could not generate new filename")
+      return
+    }
+    this.lastSelected.newFilename = newFilename
+    this.renameItem(this.lastSelected)
+    // lively.warn("not implemented yet")
+    
+  }
+  
+  async renameItem(item, dontAsk) {
+    if (!item.newFilename) return;
+    
+    var filename = item.file.name
+  
+    var fromURL = this.dirURL + encodeURI(filename)
+    var toURL = this.dirURL + encodeURI(item.newFilename)
+
+  
+    if(!dontAsk && !await lively.confirm("rename " + filename + " -> " + item.newFilename  + " in " + this.dirURL)) {
+      return "cancel"
+    }  
+    var resp = await lively.files.moveFile(fromURL, toURL)
+    if (resp.status == 200) {
+      item.innerHTML = item.newFilename
+      delete item.newFilename 
+    } else {
+      item.style.backgroundColor = "red"
+    }
+  }
+  
+  async onPreviewButton() {
+    for(var item of this.items) {
+      var newFilename = await this.newFilenameForItem(item)
+      if (newFilename) {
+        item.newFilename = newFilename
+        item.innerHTML = "rename " + item.file.name + " -> <b>" + newFilename + "</b>"
+      } else {
+        item.style.color = "gray"
+      }
+    } 
+  }
+  
+  async onRenameAllButton() {
+    for(var item of this.items) {
+      await this.renameItem(item, true)
+    } 
+  }
+  
+  async createView() {
+    var stats = await fetch(this.dirURL, {method: "OPTIONS"}).then(r => r.json())
+
+
+    this.items = stats.contents
+                  .sortBy(ea => ea.name)
+                  .map(ea => {
+                    var item = <li>{ea.name}</li>
+                    item.file = ea
+                    item.addEventListener("click", evt => this.onItemClick(evt, item))
+                    return item
+                  })
+
+    var list = <ul id="list">{...this.items}</ul>
+    var style = document.createElement("style") // #ISSUE style tags conflict with Markdown rewriting....
+    style.innerHTML = `
+      li.selected {
+        background-color: lightgray
+      }
+      
+      #pane {
+        position: absolute;
+        width: 100%;
+        top: 200px;
+        height: calc(100% - 200px);
+        overflow: auto;
+
+      }
+      #buttons: {
+       
+      }
+      
+      
+      #list {
+      }
+      
+      h1, #buttons, #details {
+        margin: 20px;
+      }
+      
+    `
+    this.details = <div id="details"></div>
+    // #TODO relative positioning does not work with 100% calculations... 
+    return <div style="position:absolute;top:0px; left:0px;width:100%; height:100%">
+        {style}
+        <h1>{this.sendung}</h1>
+        <div id="buttons">
+          <button click={evt => this.onRenameButton(evt)}>rename selected</button>
+          <button click={evt => this.onPreviewButton(evt)}>preview all</button>
+          <button click={evt => this.onRenameAllButton(evt)}>rename all</button>          
+
+        </div>
+        {this.details}
+        <div id="pane">
+          {list}
+        </div>
+      </div>
+  }
+
+}

demos/markdown/absolute.md

@@ -1 +1 @@
-<div style="background-color:green; position:absolute;top:0px; left:0px;width:100%; height:100%"></div>
+<div style="background-color:green; position:absolute;top:0px; left:0px;width:90%; height:90%"></div>

demos/markdown/mle-workspaces.md

@@ -0,0 +1,4 @@
+# Workspace Example
+
+This is an Example of a workspace embedded in HTML/Markdown that will persist it's code in browser local storage.
+<lively-script><script>import focalStorage from 'src/external/focalStorage.js'; import {SocketSingleton} from 'src/components/mle/socket.js'; const idMap = new Map(); const enclosingDiv = <div />; var mle = {}; async function startUp(){ await SocketSingleton.get(); let i = 0; while(await focalStorage.getItem(`markdown_workspace_${i}`)){ await new Pane(i, await focalStorage.getItem(`markdown_workspace_${i}_kind`)).create(); i++; } } class Pane { constructor(id, kind){ if(id !== undefined){ this._id = id; this.kind = kind; } else { this._id = idMap.size; } idMap.set(this.textStorageId, this); } onDoIt() { this.saveText() this.workspace.tryBoundEval(this.workspace.value) } async onReset() { if(this.kind) this.socket = await SocketSingleton.reset(); this.logarea.value = "LOGS"; this.drawarea.innerHTML = ""; } get defaultText() { return "sql`SELECT * FROM students`" } get textStorageId() { return `markdown_workspace_${this._id}` } async loadText() { var loaded = await focalStorage.getItem(this.textStorageId); if (loaded) return loaded; return this.defaultText; } async saveText() { focalStorage.setItem(this.textStorageId, this.workspace.value); focalStorage.setItem(`${this.textStorageId}_kind`, this.kind); } log(s) { this.logarea.value += s + ""; } async create() { // #TODO #META style and pre tags are problematic in Markdown scripts this.kind = this.kind === undefined ? await lively.confirm("MLE Workspace? Ok for yes, Cancel for No.") : this.kind; var style = document.createElement("style"); style.textContent = ` lively-code-mirror { border: 1px solid gray; flex: 4; }`; var buttons = <div> <button click={() => {this.onDoIt()} }>DoIt</button> <button click={() => {this.onReset()} }>reset</button> </div>; this.workspace = await (<lively-code-mirror></lively-code-mirror>); this.workspace.value = await this.loadText(); this.workspace.doitContext = this; this.logarea = <textarea disabled style="flex: 2;"/>; this.logarea.value = "LOGS"; this.drawarea = <div></div>; if(this.kind){ this.workspace.boundEval = async function(s) { this.socket = this.socket || await SocketSingleton.get(); this.socket.emit("test", {id: this.textStorageId, func: "evaluate", parameters: [s]}); const value = await new Promise((res) => { this.socket.on("result", r => { if(!r) return; if(r.id !== this.textStorageId) return; console.log(r.data) res(JSON.parse(r.data)); }); }); this.outData = value; Object.defineProperty(window, `$${this._id}`, {configurable: true, value}); this.log(JSON.stringify(value)); this.saveText(); return {value}; } this.workspace.boundEval = this.workspace.boundEval.bind(this); } enclosingDiv.appendChild( <div style="padding: 10px; width:90%;"> {style} <h4>{this.kind ? "MLE" : "DOM"} Workspace ${this._id}</h4> {buttons} <div style="display: flex;"> {this.workspace} {this.logarea} </div> {this.drawarea} </div> ); } } startUp().then(t => <div> <button click={() => new Pane().create()}>New workspace</button> {enclosingDiv} </div>)</script> </lively-script>

doc/journal/2020-09-01.md/index.md

@@ -25,7 +25,7 @@ var lastWindow;
 })()
 ```
 
-## Turning Wiki-pages into Tools (#PaperIdea)
+## Turning Wiki-pages into Tools ( #PaperIdea )
 
 We used markdown pages to prototype tools and visualizations a lot. But to use it, one had to navigate to that specific page and interact with the tool there. A good and working example of the setup are these journal pages and their index page that allows to create new entries. But markdown pages are not easy to integrate into a workflow with other tools. E.g. using the git graph visualization tool directly from our sync tools is not possible.