API

Tilepieces exposes APIs for file read / write operations, dom and css modification operations.

Storage: They are for file read/write operations, and are meant to be modified by developers to use their preferred backend environment.
HTML and CSS: These are provided by the application framework, and allow you to edit the html safely (see html live edit) and its stylesheet (see current stylesheet).

These APIs can be called directly from the browser console, or they can be included in a component panel or interface.
APIs that modify HTML or CSS expect a document to be selected, and can interact with these properties of the tilepieces object (instantiated as a global variable in the main window):

// the tilepieces object is global in the main window
// storageInterface should be both global and exposed on tilepieces.storageInterface
tilepieces.core.currentWindow // The window of the selected document
tilepieces.core.currentDocument // The selected document element
tilepieces.core.currentStyleSheet // current stylesheet, if any
tilepieces.elementSelected // selected element, if any

EXAMPLES

The API to modify the current document can be useful for example to modify many nodes at once. In this example, we add the target="_ blank" attribute to the A tags present in the selected element:

// the tilepieces object is global in the top window
var aNodes = tilepieces.elementSelected.querySelectorAll("a");
aNodes.forEach(aNode=>{  
    try{    
      tilepieces.core.htmlMatch.setAttribute(aNode,"target","_blank")  
    }  
    catch(e){    
      console.error(e);  
    }
});

The storage APIs are indicated when you want to make changes to multiple html at a time, as shown in this example:

var app = tilepieces;
var htmlfiles = await app.storageInterface.search("", "**/*/"); 
// all html files in project
for (var i = 0; i < htmlfiles.searchResult.length; i++) {    
    var htmlfilePath = htmlfiles.searchResult[i];    
    var htmlfile = await app.storageInterface.read(htmlfilePath);    
    // we use native DOMParser to be able to make changes via the DOM API.    
    var parser = new DOMParser();    
    var doc = parser.parseFromString(htmlfile, "text/html");
    // do whatever you want with doc ...
    // then save
    var s = app.createDocumentText(doc);
    await app.storageInterface.update(htmlfilePath, new Blob([s]));
}

We can also use the storage API to extract data: the following example traces all the html files that contain the IMG tag.

var images = [];
var app = tilepieces;
var htmlfiles = await app.storageInterface.search("", "**/*/");
for (var i = 0; i < htmlfiles.searchResult.length; i++) {
  var htmlfilePath = htmlfiles.searchResult[i];
  var htmlfile = await app.storageInterface.read(htmlfilePath);
  var parser = new DOMParser();
  var doc = parser.parseFromString(htmlfile, "text/html");
  doc.querySelectorAll("img").forEach(v => images.push({
    srcAttribute: v.getAttribute("src"),
    srcFromMiscellaneous: v.src?.split(app.miscDir + "/")?.pop(),
    src: v.src,
    path: htmlfilePath
  }))
}
console.log(images);