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

Author: BraunTom

demos/tom/index.md

@@ -83,6 +83,9 @@ Es ist möglich das trace plugin mit sich selbst zu debuggen. Dazu wird einfach
 * Diff was ist dazu gekommen; was wurde entfernt während des changes
 * AST-compare sollte direkt die Änderung aufgeklappt haben (cool: farblich markieren)
 * Im Plugin code markieren und anzeigen welche konkreten Traces darüber gelaufen sind
+* "brushing and linking"
+  - **whence** and **whither** === wohin und woher
+  - **What if** === Was wäre, wenn
 
 ## Known problems
 * Wenn zu viele Daten generiert werden (weil entweder das plugin oder der gegebene Code zu viel sind) ist der Worker nicht mehr in der Lage dazu die Daten zu senden, was darin endet, dass das TraceVisualization Tool nicht mehr funktioniert. Dies liegt anscheinend daran, dass während eines Aufrufs von JSON.stringify der Fehler: _rangeerror invalid string length_ geworfen wird

doc/journal/2021-03-18.md/custom-navbar-items.png

@@ -0,0 +1,202 @@
+## 2021-03-18 #CustomNavbarItems
+*Author: @JensLincke*
+
+![](custom-navbar-items.png)
+
+
+And just for backups... the markdown app in my local movie dir.
+
+```javascript
+# Movies
+
+
+<script>
+
+var container = lively.query(this, "lively-container");
+import ContextMenu from 'src/client/contextmenu.js';
+
+(async () => {
+  var dir = container.getDir()
+  
+  // "cached://" +
+  var listSource = await fetch( dir + "/movies.jsonl").then(r => r.text())
+  
+  var files  = listSource.split("\n").map(ea => {
+    try {
+      return JSON.parse(ea)
+    } catch(e) {
+      return null
+    }
+  }).filter(ea => ea)
+  
+  
+  var movies = files
+      .filter(ea => ea.imdb)
+      .map(ea => ea.imdb)
+      .uniq().map(ea => {
+        var all =files.filter(file => file.imdb == ea)
+        var first = all[0]
+        first.files = all
+        return first
+      })
+      .filter(ea => ea.year)
+      
+  var genres = new Map()
+  for(let movie of movies) {
+    for(let genre of (movie.genre || "").split(/, /)) {
+      var bag = genres.get(genre) || []
+      bag.push(movie)
+      genres.set(genre, bag)
+    }
+  }
+  
+  let serverURL = lively.files.serverURL(dir)
+        // does only make sense when accessing a localhost server, 
+        // otherwise a pdf viewer would be opened on a remote machine?
+       
+  var style = document.createElement("style")
+  style.textContent = `
+    .poster img {
+      width: 120px;
+    }
+    .poster {
+      height: 185px;
+      overflow: hidden;
+    }
+    
+    .movie {
+      font-size: 10pt;
+      text-align: center;
+      padding: 10px;
+      width: 160px;
+      height: 250px;
+      display: inline-block;
+      overflow: hidden;
+    }
+    
+    .year {
+      color: gray;
+    }
+    
+    .genre {
+      color: gray;
+      font-style: italic;
+      font-size:8pt;
+    }
+    .file {
+      font-size:6pt;
+      white-space: nowrap;
+    }
+    
+  `
+  let playFile = (file) => {
+    var url = dir + "/"+ encodeURI(file.filename)
+    let playPath = url.replace(serverURL,"").replace(/^\//,"")
+    var openURL = serverURL + "/_open/" + playPath 
+    lively.notify("open " + openURL)
+    fetch(openURL)
+  }
+  
+  
+  var movieItems = movies.map(movie => {
+      var title = <a class="title" click={() => {
+          lively.openInspector(movie)
+        }}></a>
+      title.innerHTML = movie.files[0].title // contains HTML
+      
+      var item =  <div class="movie">
+        <div class="poster">
+        <img src={dir + "_imdb_/posters/" + movie.imdb+ ".jpg"}
+          click={() => window.open("https://www.imdb.com/title/" + movie.imdb)}
+        ></img>
+        </div>
+        {title} 
+        <span class="year">({movie.files[0].year})</span> 
+        <br />
+        <span class="genre">{movie.files[0].genre || ""}</span>
+        {... movie.files.map(file => {
+          var fileItem = <div class="file"><a click={() => {
+            playFile(file)
+          }}>{file.filename.replace(/.*\//,"")}</a></div>
+          fileItem.addEventListener('contextmenu',  evt => {
+            if (!evt.shiftKey) {
+              evt.stopPropagation();
+              evt.preventDefault();
+              var menu = new ContextMenu(fileItem, [
+                    ["open", () => playFile(file)],
+                  ]);
+              menu.openIn(document.body, evt, fileItem);
+              return true;
+            }
+
+          }, false);
+        
+          return fileItem
+        
+        })}
+      </div>
+      
+      item.movie = movie
+      return item
+    });
+    
+    
+  let pane = <div class="movies">
+    {...movieItems}
+    </div>
+  
+
+  let sortByYear = () => {
+      pane.innerHTML = ""
+      movieItems.sortBy(ea => ea.movie.year).reverse().forEach(ea => {
+        pane.appendChild(ea)
+      })
+  
+  }
+  
+  let filterGenre = (genre) => {
+    debugger
+      pane.innerHTML = ""
+      movieItems
+        .sortBy(ea => ea.movie.year)
+        .reverse()
+        .filter(ea => ea.movie.genre && ea.movie.genre.match(genre))
+        .forEach(ea => {
+          pane.appendChild(ea)
+        })
+  }
+  var navbar = container.get("lively-container-navbar")
+  var navbarDetails = navbar.get("#details")
+    
+  let createGenreButton = (genre) => {
+    var bag = genres.get(genre)
+    
+    var detailsItem = navbar.createDetailsItem(genre)
+    detailsItem.classList.add("subitem")
+    detailsItem.classList.add("level2")
+    navbarDetails.querySelector("ul").appendChild(detailsItem)
+    detailsItem.addEventListener("click", () => filterGenre(genre))
+
+    return <button click={() => filterGenre(genre)}>{genre} ({bag.length})</button>
+  }
+    
+  
+  return <div>
+    {style}
+    <div>
+      <button click={() => sortByYear()}>by year</button>
+      {...Array.from(genres.keys()).map(genre => createGenreButton(genre))}
+    </div>
+    {pane}
+  </div>
+})()
+
+
+
+</script>
+```
+
+
+
+
+

doc/journal/2021-03-18.md/index.md

@@ -1016,7 +1016,17 @@ export default class Lively {
     var tagName = await components.reloadComponent(html, url);
     if (!tagName) return;
 
-    let objectToMigrate = Array.from(document.body.querySelectorAll(tagName));
+    // conservative approach:
+    // let objectToMigrate = Array.from(document.body.querySelectorAll(tagName));
+    
+    // realy take every element yout can find, even if it might break things #Experimental
+    let objectToMigrate = []
+    for(let ea of lively.allElements(true)) {
+      if (ea.localName == tagName) {
+        objectToMigrate.push(ea)
+      }
+    }
+    
     if (lively.halo) {
       objectToMigrate.push(...lively.halo.shadowRoot.querySelectorAll(tagName));
     }