experimental deep updating of components while working on them

SQUASHED: AUTO-COMMIT-src-client-lively.js,AUTO-COMMIT-src-components-demo-movie-listing.html,AUTO-COMMIT-src-components-demo-movie-listing.js,

Author: JensLincke

src/client/lively.js

@@ -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));
     }

src/components/demo/movie-listing.js

@@ -15,12 +15,21 @@ export default class MovieListing extends Morph {
     })
   }
 
+  get moviesSrc() {
+    return this.getAttribute("movies") 
+  }
+  
+  get selectedMoviesSrc() {
+    return this.getAttribute("selected") ||  "selected_movies"
+  }
+  
+  
   async createView(container) {
 
     var dir = container.getDir()
     // "cached://" +
-    var listSource = await fetch( dir + "/movies.jsonl").then(r => r.text())
-    var selectedMoviesURL = dir + "/selected_movies"
+    var listSource = await fetch( dir + "/" + this.moviesSrc).then(r => r.text())
+    var selectedMoviesURL = dir + "/" + this.selectedMoviesSrc
 
     this.selectedMovies = new Set()
     var selectedMoviesResp = await fetch(selectedMoviesURL)
@@ -196,7 +205,9 @@ export default class MovieListing extends Morph {
 
     this.navbar = container.get("lively-container-navbar")
     this.navbarDetails = this.navbar.get("#details")
-
+  
+    this.navbarDetails.querySelector("ul").innerHTML = "" // #TODO, be nicer to other content?
+    
     let createGenreFilter = (genre) => {
       var bag = genres.get(genre)
 
@@ -213,6 +224,7 @@ export default class MovieListing extends Morph {
 
     this.createSelectedMoviesFilter()
     this.createConflictingYearMoviesFilter()
+    this.createShowAllMoviesFilter()
 
     for(let genre of genres.keys()) {
       createGenreFilter(genre)
@@ -256,7 +268,9 @@ export default class MovieListing extends Morph {
     this.setCurrentMovieItems(this.movieItems
         .sortBy(ea => ea.movie.year)
         .reverse()
-        .filter(ea => this.selectedMovies.has(ea.movie.filename)))
+        .filter(ea => {
+          return ea.movie.files.find(file => this.selectedMovies.has(file.filename))
+    }))
   }
 
   filterConflictingYear() {
@@ -266,11 +280,27 @@ export default class MovieListing extends Morph {
       .filter(ea => ea.movie.year != ea.movie.extract_year))
   }
 
+  showAllMovies() {
+    this.setCurrentMovieItems(this.movieItems
+      .sortBy(ea => ea.movie.year)
+      .reverse())
+  }
+  
   createConflictingYearMoviesFilter(){
     var detailsItem = this.navbar.createDetailsItem("_conflicting")
     detailsItem.classList.add("subitem")
     detailsItem.classList.add("level2")
     this.navbarDetails.querySelector("ul").appendChild(detailsItem)
     detailsItem.addEventListener("click", () => this.filterConflictingYear())
   }
+  
+  createShowAllMoviesFilter(){
+    var detailsItem = this.navbar.createDetailsItem("_all")
+    detailsItem.classList.add("subitem")
+    detailsItem.classList.add("level2")
+    this.navbarDetails.querySelector("ul").appendChild(detailsItem)
+    detailsItem.addEventListener("click", () => this.showAllMovies())
+  }
+
+  
 }