` for navigation, the second a `
` for content, separated by a `
` for interactive resizing.
```XML
```
--------------------------------
### Sciter.js Initiating Drag-n-Drop Operation
Source: https://github.com/iakuf/sciter.js-docs/blob/main/DOM/Event.md
Example demonstrating how to structure the `event.detail` object when initiating a drag-n-drop operation using `window.performDrag(...)` in Sciter.js.
```JavaScript
event.detail = { dataType: ...; data: {} }
```
--------------------------------
### Get/Set Multiple Media Variables (Sciter.js)
Source: https://github.com/iakuf/sciter.js-docs/blob/main/DOM/Window.md
Gets or sets multiple media variables simultaneously using an object.
```js
window.mediaVars([values:object])
```
--------------------------------
### JavaScript Example: Packaging and Unpackaging JSON with BJSON
Source: https://github.com/iakuf/sciter.js-docs/blob/main/JS.runtime/BJSON.md
This example demonstrates how to use the BJSON class to serialize a JavaScript object into a binary ArrayBuffer and then deserialize it back, asserting the correctness of the unpacked data.
```js
let bjson = new BJSON();
// packaging:
let blob = bjson.pack({hello:"world"});
// unpackaging:
bjson.unpack(blob, data => {
console.assert(data.hello =="world");
});
```
--------------------------------
### Window.screenBox() Method
Source: https://github.com/iakuf/sciter.js-docs/blob/main/DOM/Window.md
Reports the geometry and information of a specified screen (monitor). Supports parameters for 'what' and 'boxPart' similar to `window.screenBox()`, and additionally 'devicePixelRatio' to get the ratio of physical to CSS pixels.
```APIDOC
Window.screenBox(screen:integer, what:string, boxPart?:string): any
```
--------------------------------
### Execute Command Example (Sciter.js)
Source: https://github.com/iakuf/sciter.js-docs/blob/main/DOM/Element/README.md
Example demonstrating how to use `executeCommand` to insert HTML content at the current caret position within an editable element. The insert operation is undoable.
```JavaScript
htmlarea.execCommand("edit:insert-html", html);
```
--------------------------------
### CSS Example: Declaring a LIKE-BUTTON Mixin
Source: https://github.com/iakuf/sciter.js-docs/blob/main/css/media-const-mixin.md
Provides a concrete example of declaring a parametric @mixin named 'LIKE-BUTTON'. This mixin takes a 'color' parameter and defines common inline-block button styles, including background color, border, border-radius, and padding.
```css
@mixin LIKE-BUTTON(color) {
display:inline-block;
background-color: @color;
border: 1px solid #000;
border-radius: 3px;
padding: 0.5em 1em;
}
```
--------------------------------
### CSS Example: Applying `morph()` for Lightness Adjustment in Sciter.js
Source: https://github.com/iakuf/sciter.js-docs/blob/main/css/units/color.md
Demonstrates how to use the `morph()` function in CSS within Sciter.js to modify the lightness of a base color. The example defines a constant `BASECOLOR` and applies a `lighten:25%` transformation to a `div`'s background.
```CSS
@const BASECOLOR: #0C0;
div {
background: morph(@BASECOLOR, lighten:25%);
}
```
--------------------------------
### Access and Populate Persistent Data (JavaScript)
Source: https://github.com/iakuf/sciter.js-docs/blob/main/storage/introduction.md
This example illustrates how to interact with persistent data stored under `storage.root` using standard JavaScript operations. It shows iterating through a persistent array (`root.children`) and adding new objects to it, demonstrating that no special methods are required for data manipulation.
```js
// printout elements of root.children collection (array)
let root = storage.root;
for( let child of root.children )
console.log(child.name, child.nickname);
```
```js
var collection = root.children; // plain JS array
collection.push( { name: "Mikky", age: 7 } ); // calling Array's method push() to add
collection.push( { name: "Olly", age: 6 } ); // objects to the collection
collection.push( { name: "Linus", age: 5 } );
```
--------------------------------
### Open or Create Storage and Initialize Root Object (JavaScript)
Source: https://github.com/iakuf/sciter.js-docs/blob/main/storage/introduction.md
This snippet demonstrates the idiomatic way to open an existing database file or create a new one using `Storage.open(path)`. It shows how to retrieve the `storage.root` object, which holds all persistent data, and how to initialize its structure if the database is newly created and empty.
```js
import * as Storage from "storage"; // or "@storage" if Sciter.JS
var storage = Storage.open("path/to/data/file.db");
var root = storage.root || initDb(storage); // get root data object or initialize DB
```
```js
function initDb(storage) {
storage.root = {
version: 1, // integer property ("integer field" in DB terms)
meta: {}, // sub-object
children: [] // sub-array, empty initially
};
return storage.root;
}
```
--------------------------------
### Render a Sciter.js Component to the DOM
Source: https://github.com/iakuf/sciter.js-docs/blob/main/reactor/component.md
This example demonstrates how to render a user-defined Sciter.js component to the document body. It shows the component definition, creation of a virtual element representing the component, and finally, using `document.body.content()` to insert it into the DOM.
```js
function Welcome(props) {
return Hello, {props.name}! ;
}
const velement =
description: Load audio file and return promise that will be resolved to Audio object.
throws: "404" exception if file not found.
properties:
progress: float (range 0.0 ... 1.0)
description: Progress of playing.
volume: float (range 0.0 ... 1.0)
description: Sound volume.
methods:
play(): Promise
description: Plays the sound, returns promise that will be resolved at the end of playback.
pause(): void
description: Pauses playback.
resume(): void
description: Resumes paused playback.
stop(): void
description: Stops playback.
```
--------------------------------
### JavaScript Rect.moveTo() Example
Source: https://github.com/iakuf/sciter.js-docs/blob/main/graphics/Rect.md
Illustrates how to use the `moveTo` method to create a new rectangle by repositioning one of its points. In this example, the bottom-right point (3) of `rc` is moved to `Point(10,10)`, resulting in a new rectangle with its origin at `Point(0,0)`.
```js
const rc = Rect(Point(10,10), Size(10,10));
const moved = rc.moveTo(Point(10,10),3);
// moved origin == Point(0,0);
```
--------------------------------
### HTML Window Chrome Elements Example
Source: https://github.com/iakuf/sciter.js-docs/blob/main/HTML/html-window.md
Demonstrates how to use `role` attributes on HTML elements to define window chrome behaviors like dragging, minimizing, maximizing, and closing the window, along with a window icon.
```html
```
--------------------------------
### Implementing Cancelable Fetch Requests in Sciter
Source: https://github.com/iakuf/sciter.js-docs/blob/main/JS.runtime/Fetch.md
Provides a JavaScript code example demonstrating how to create and manage cancelable `fetch` requests in Sciter. It shows how to instantiate a `Request` object, wire an event handler to abort the request, issue the `fetch` call with `await`, and handle both successful responses and aborted or error states using `try-catch`.
```JavaScript
// creating request:
let request = new Request("url", options);
// wiring click eevent handler that will abort the request:
document.on("click", "button#abort", function(){
request.abort();
})
// issuing the request:
try {
let response = await fetch(request);
if(response.ok)
//... handle response data here ...
else if(response.status == 404)
//... wrong url ...
else
//... etc. ...
} catch(response) {
if(response.aborted)
//... ended by ,abort() call ...
else
//... some other problems, see response.status ...
}
```
--------------------------------
### Using Sciter Stock Icons in HTML
Source: https://github.com/iakuf/sciter.js-docs/blob/main/css/paths-and-vector-images.md
This HTML example demonstrates how to easily integrate Sciter's internal library of stock vector icons. By using the `icon:` URL schema in an `bar
)[0] == "bar"; // true
```
--------------------------------
### Pager Property: documentName
Source: https://github.com/iakuf/sciter.js-docs/blob/main/behaviors/behavior-pager.md
Read-write property for setting or getting the name of the document, visible in printing job queues.
```APIDOC
frame.pager.documentName: string
Read-write, name of the document (can be seen in printing jobs queue)
```
--------------------------------
### Fetching Local File with home:// Scheme in Sciter (JavaScript)
Source: https://github.com/iakuf/sciter.js-docs/blob/main/URL-sciter-schemes.md
Demonstrates how to fetch a local file, such as `config.json`, using the `home://` URL scheme. This scheme accesses files relative to the Sciter DLL/SO or application executable's location.
```js
let res = await fetch("home://config.json");
```
--------------------------------
### Calendar Properties
Source: https://github.com/iakuf/sciter.js-docs/blob/main/behaviors/behavior-calendar.md
Details the `mode` property available on the calendar object for getting or setting the current view mode programmatically.
```APIDOC
Properties:
element.calendar.mode: string
- Type: "days" | "months" | "years" | "century"
- Description: gets/sets current view mode.
```
--------------------------------
### Sciter.js HTML `` Element for Component Mounting
Source: https://github.com/iakuf/sciter.js-docs/blob/main/reactor/component-styles-events.md
This HTML snippet illustrates the use of Sciter's special `` element as a direct mounting point for components. It specifies the component type ('Tabs') and its source file ('tabs.js'), with nested `` elements providing initial content or references to external HTML.
```html
Test of Tabs component.
First tab content
Second tab content
```
--------------------------------
### Get device pixel ratio
Source: https://github.com/iakuf/sciter.js-docs/blob/main/DOM/Globals.md
The number of physical screen pixels per logical CSS pixel (dip).
```APIDOC
devicePixelRatio: float
```
--------------------------------
### API: window.selectFolder
Source: https://github.com/iakuf/sciter.js-docs/blob/main/DOM/Window.md
API definition for the `window.selectFolder` method, which opens a folder selection dialog. It allows specifying a caption and initial path, returning the URL of the selected folder.
```APIDOC
window.selectFolder(params: object)
params:
caption: string - title of dialog
path: string - initial directory
returns: string - folder URL
```
--------------------------------
### fs.sync.lstat / fs.lstatSync: Synchronously Get Link Status
Source: https://github.com/iakuf/sciter.js-docs/blob/main/JS.runtime/module-sys.md
This is the synchronous version of `fs.lstat()`. It returns the 'stat' structure for a symbolic link directly.
```APIDOC
fs.sync.lstat(path: string): stat
fs.lstatSync(path: string): stat
path: string - The path to the file or symbolic link.
Returns: stat - A stat object for the link itself.
```
--------------------------------
### APIDOC: behavior:select Properties
Source: https://github.com/iakuf/sciter.js-docs/blob/main/behaviors/behavior-select.md
Documentation for properties supported by `behavior:select`, including `options` and `select.currentOption`.
```APIDOC
options: Element
Description: Reference to DOM element that holds list (in this case, the select element itself).
select.currentOption: Element (read/write)
Description: Reference to DOM element that represents current option.
```
--------------------------------
### Intl.DateTimeFormat dateFormatPattern() Method
Source: https://github.com/iakuf/sciter.js-docs/blob/main/JS.runtime/Intl-i18n.md
Returns the date format pattern used by the instance, for example: 'MMM d, y', based on UNICODE specifications.
```APIDOC
Intl.DateTimeFormat.dateFormatPattern(): string
```
--------------------------------
### Zip Class: Opening and Mounting Archive
Source: https://github.com/iakuf/sciter.js-docs/blob/main/JS.runtime/Zip.md
Demonstrates how to open a remote zip archive using `Zip.openData` and mount it to a virtual URL (`this://mounts/test/`) for easy access.
```js
const rs = await fetch("remote url");
const archive = Zip.openData(rs.arrayBuffer());
archive.mountTo("this://mounts/test/");
```
--------------------------------
### Get/Set Single Media Variable (Sciter.js)
Source: https://github.com/iakuf/sciter.js-docs/blob/main/DOM/Window.md
Gets or sets a single media variable that can be used in CSS with `@media varname {...}`.
```js
window.mediaVar(varname[,value])
```
--------------------------------
### Window.post() Method
Source: https://github.com/iakuf/sciter.js-docs/blob/main/DOM/Window.md
Posts a global event to all windows within the current process asynchronously.
```APIDOC
Window.post(ge: Event): void
```
--------------------------------
### Get CSS Property Value in JavaScript
Source: https://github.com/iakuf/sciter.js-docs/blob/main/DOM/Element/Style.md
Retrieves the value of a specified CSS property from an element's style using `getPropertyValue()`.
```js
element.style.getPropertyValue(name)
```
--------------------------------
### Get Owner Element by Selector in Sciter.js
Source: https://github.com/iakuf/sciter.js-docs/blob/main/DOM/Element/README.md
Returns the owner element matching the `selector`, useful for retrieving owners of menus and popups.
```js
const owner = this.$o(selector)
```
--------------------------------
### Create Directory (fs.mkdir)
Source: https://github.com/iakuf/sciter.js-docs/blob/main/JS.runtime/module-sys.md
Creates a new directory at the specified path. An optional `mode` can be provided to set permissions, defaulting to `0o777`. Both asynchronous and synchronous versions are available.
```APIDOC
fs.mkdir(path[, mode = 0o777]): Promise
fs.sync.mkdir(path[, mode = 0o777])
fs.mkdirSync(path[, mode = 0o777])
```
--------------------------------
### JavaScript: Creating a Storage.Index
Source: https://github.com/iakuf/sciter.js-docs/blob/main/storage/Storage.Index.md
Demonstrates how to initialize a new `Storage.Index` object within the persistent storage root, specifying its key type. This index can then be used to store and retrieve objects by their unique identifiers.
```js
storage.root = {
version:1,
notes: storage.createIndex("string") // note by id (string, GUID) index
}
```
--------------------------------
### Range nodes() Method (Sciter specific)
Source: https://github.com/iakuf/sciter.js-docs/blob/main/DOM/Node/Range.md
Returns a list of all Node objects covered by the range, meaning all nodes that have either their start or end inside the range.
```js
range.nodes():array
```
--------------------------------
### Window.all Property
Source: https://github.com/iakuf/sciter.js-docs/blob/main/DOM/Window.md
A list of all Sciter windows currently open in the process, including the current window. Useful for enumerating and interacting with other windows.
```APIDOC
Window.all: Array
```
```js
for(let wnd of Window.all)
...
```
--------------------------------
### Sciter CSS @mixin Rule Usage Example
Source: https://github.com/iakuf/sciter.js-docs/blob/main/css/media-const-mixin.md
Shows how to apply a defined mixin within a CSS rule by referencing its name prepended with @.
```css
some {
@mname;
color: black;
...
}
```
--------------------------------
### Compose Multiple Sciter.js Components
Source: https://github.com/iakuf/sciter.js-docs/blob/main/reactor/component.md
This snippet illustrates how to compose multiple Sciter.js components within a parent component. It defines a `Welcome` component and an `App` component that renders multiple instances of `Welcome`, demonstrating component reusability and hierarchical structure.
```js
function Welcome(props) {
return Hello, {props.name}! ;
}
function App() {
return
` element with nested `` elements, demonstrating a hierarchical tree structure where groups can be expanded.
```XML
Group A
Red
Green
Blue
Group B
...
```
--------------------------------
### Import specific functions from @sciter module
Source: https://github.com/iakuf/sciter.js-docs/blob/main/JS.runtime/module-sciter.md
Demonstrates how to import individual functions like on, off, and once from the @sciter module for direct use.
```js
import {on,off,once} from "@sciter";
on("click", event => {...});
```
--------------------------------
### Get Pixel Color from Graphics.Image
Source: https://github.com/iakuf/sciter.js-docs/blob/main/graphics/Image.md
Retrieves the color of a specific pixel at the given x and y coordinates from the Graphics.Image. Returns a Color object or null if the coordinates are out of bounds.
```js
image.colorAt(x,y): Color | null
```
--------------------------------
### Get CSS Image Property as Graphics.Image in JavaScript
Source: https://github.com/iakuf/sciter.js-docs/blob/main/DOM/Element/Style.md
Reports the used value of a CSS property as an instance of `Graphics.Image`. Returns null if the property is not an image.
```js
element.style.imageOf(name):Image
```
--------------------------------
### JavaScript: Transparent Loading of Sub-Objects on Access
Source: https://github.com/iakuf/sciter.js-docs/blob/main/storage/architecture.md
This JavaScript snippet demonstrates how accessing a property of a sub-object (e.g., `root.parent.name`) triggers the transparent loading of that sub-object from the database into the VM's heap. This mechanism ensures data is fetched only when needed.
```JavaScript
console.log(root.parent.name);
```
--------------------------------
### Implementing the componentWillUnmount() Lifecycle Method
Source: https://github.com/iakuf/sciter.js-docs/blob/main/reactor/component-lifecycle.md
Shows the `componentWillUnmount()` method, called just before a component is removed from the DOM, ideal for performing necessary cleanup tasks.
```js
class Comp extends Element {
componentWillUnmount() { ... }
}
```
--------------------------------
### Get CSS Color Property as Graphics.Color in JavaScript
Source: https://github.com/iakuf/sciter.js-docs/blob/main/DOM/Element/Style.md
Reports the value of a CSS property as an instance of `Graphics.Color` class. Returns null if the property is not a color.
```js
element.style.colorOf(name): Color
```
--------------------------------
### Sciter.js Move/Size Window with move() Method
Source: https://github.com/iakuf/sciter.js-docs/blob/main/DOM/Window.md
The move() method allows repositioning and resizing the window. Coordinates and dimensions are typically in physical screen pixels (PPX), but can be treated as client area coordinates if specified.
```APIDOC
window.move(x, y [, width, height [, "client" ]])
Description: Moves and/or sizes the window.
Parameters:
x: number
Description: New X coordinate.
y: number
Description: New Y coordinate.
width: number (optional)
Description: New width.
height: number (optional)
Description: New height.
"client": string (optional)
Description: If provided, x, y, width, height are treated as window client area coordinates instead of overall window coordinates.
Notes: x, y, width, height are in PPX (physical screen pixels) unless "client" is provided.
```
--------------------------------
### Lottie Behavior Custom Events
Source: https://github.com/iakuf/sciter.js-docs/blob/main/behaviors/behavior-lottie.md
Lists the custom events generated by the `behavior:lottie` module, providing notifications for animation lifecycle stages such as start, loop, and end.
```APIDOC
"animationstart": the animation has been loaded successfully and animation has been started.
"animationloop": last frame shown and animation restarted from its beginning.
"animationend": animation playback stopped.
```
--------------------------------
### JavaScript: Iterating with Storage.Index.select()
Source: https://github.com/iakuf/sciter.js-docs/blob/main/storage/Storage.Index.md
Demonstrates how to use the `select()` method of `Storage.Index` to iterate over a filtered range of items. This example shows a `for...of` loop with `minVal` and `maxVal` for range-based enumeration.
```js
for( const obj in index.select(minVal, maxVal) ) {
...
}
```
--------------------------------
### Sciter JSX_translateTags Configuration Example
Source: https://github.com/iakuf/sciter.js-docs/blob/main/reactor/JSX-i18n.md
Shows how to configure JSX_translateTags, a global map that specifies HTML tags whose content should be translated by default without explicit markers.
```js
JSX_translateTags = {
"caption": true,
"label": true,
"button": true,
"span": true
};
```
--------------------------------
### Simple Dropdown Select XML Structure
Source: https://github.com/iakuf/sciter.js-docs/blob/main/behaviors/behavior-select-dropdown.md
Demonstrates the basic XML structure for a `` element with `` tags, showing initial selection.
```XML
Red
Green
Blue
```
--------------------------------
### Get native Asset class name (JavaScript)
Source: https://github.com/iakuf/sciter.js-docs/blob/main/JS.runtime/Asset.md
Returns the native class name of an Asset object. Can be used in conjunction with `instanceof Asset` for robust type checking.
```js
let rs = db.exec("select * from stocks order by price");
if ( rs instanceof Asset && Asset.typeOf(rs) === "Recordset" )
showRecordset(rs);
else
$("#result").innerText = "Wrong type:" + rs;
```
--------------------------------
### Window Events Subscription
Source: https://github.com/iakuf/sciter.js-docs/blob/main/DOM/Window.md
General method for subscribing to window-related events using `window.on("eventname", handler)`.
```APIDOC
window.on("eventname", handler)
```
--------------------------------
### Get CSS Length Property as Pixels in JavaScript
Source: https://github.com/iakuf/sciter.js-docs/blob/main/DOM/Element/Style.md
Reports the used value of a CSS property as a number of CSS pixels. Returns null if the property is not a length.
```js
element.style.pixelsOf(name): number
```
--------------------------------
### Default HTML5 Usage with Sciter Behavior
Source: https://github.com/iakuf/sciter.js-docs/blob/main/behaviors/behavior-details.md
Illustrates the standard application of the `behavior:details` to an HTML5 `` element, enabling its default expand/collapse functionality.
```HTML
Details
Something small enough to escape casual notice.
```
--------------------------------
### Get String Representation (Sciter.js Element)
Source: https://github.com/iakuf/sciter.js-docs/blob/main/DOM/Element/README.md
Returns a short string representation of the element. This method is primarily used for debugging purposes to quickly identify an element.
```js
element.toString() : string
```
--------------------------------
### Initialize and Use Graphics.Size Object
Source: https://github.com/iakuf/sciter.js-docs/blob/main/graphics/Size.md
Demonstrates various ways to construct `Size` objects using different constructors and applying arithmetic operators like addition and subtraction to `Size` instances.
```js
const sz1 = Size(10,10);
const sz2 = Size.make(20,20);
const sz3 = Size(Rect(10,10,100,100)); // size of the rect, 100,100
// operators
const sum = Size(0,0) + Size(50,50);
const sub = Size(0,0) - Size(50,50); // [-50,-50]
```
--------------------------------
### Get N-th Child Element in Sciter.js DOM
Source: https://github.com/iakuf/sciter.js-docs/blob/main/DOM/Element/README.md
Returns the n-th child element of the `element`. The index `n` must be within the range [0, `element.childElementCount`).
```js
element.childElement(n) : element | null
```
--------------------------------
### Sciter.js Move/Size Window to Specific Monitor with moveTo() Method
Source: https://github.com/iakuf/sciter.js-docs/blob/main/DOM/Window.md
The moveTo() method allows moving and resizing the window to a specific monitor. Coordinates and dimensions are specified in DIPs (device independent pixels, or CSS pixels).
```APIDOC
window.moveTo(monitor, x, y [, width, height [, "client" ]])
Description: Moves and/or sizes the window to a particular monitor.
Parameters:
monitor: any
Description: The target monitor.
x: number
Description: New X coordinate in DIPs.
y: number
Description: New Y coordinate in DIPs.
width: number (optional)
Description: New width in DIPs.
height: number (optional)
Description: New height in DIPs.
"client": string (optional)
Description: If provided, x, y, width, height are treated as window client area coordinates.
Notes: x, y, width, height are in DIPs (device independent pixels / CSS pixels).
```
--------------------------------
### Sciter.js Pager (Print Preview) Events
Source: https://github.com/iakuf/sciter.js-docs/blob/main/DOM/Event.md
Describes events specific to the element used for print preview, tracking the start, page completion, and end of pagination.
```APIDOC
Pager (Print Preview) Events ():
paginationstart (pagination-start): Pagination has been started on the frame/pager.
paginationpage (pagination-page): Pagination of one page complete.
paginationend (pagination-ended): Pagination has been ended.
```
--------------------------------
### Creating and Using Graphics.Point Instances
Source: https://github.com/iakuf/sciter.js-docs/blob/main/graphics/Point.md
Demonstrates various ways to construct Point objects and perform basic vector operations like addition and subtraction using operators.
```js
const position1 = Point(10,10);
const position2 = Point.make(20,20);
const position3 = Point(Rect(10,10,100,100)); // origin of the rect
// operators
const sum = Point(0,0) + Point(50,50);
const sub = Point(0,0) - Point(50,50); // [-50,-50]
```
--------------------------------
### Wrap Nodes with Element (Sciter.js)
Source: https://github.com/iakuf/sciter.js-docs/blob/main/DOM/Element/README.md
Wraps a specified range of DOM nodes, from a start node to an end node, into a new wrapper element. This operation is the inverse of `unwrapElement()`.
```APIDOC
element.wrapNodes(start:Node,end:Node,wrap:Element)
```