free photos from pngtree.com

Please drop me a donation at baboonxiv@gmail.com on Paypal.com. I take Bitcoin as well!

bc1qjt8je65vc245y2xq0cx8lfdq0cpvxt957ns2ac

Or ETH 0x12c35f0d64cBbf3Ea250daD1C82E93902Be5198e

Or BTC Cash: bitcoincash:qq6qugkmnl42sm3lgymrnsdrkpgt3a24pqllt4mlsg

dotPipe.js is a dynamic web component and attribute framework that lets you build rich, interactive UIs using simple HTML tags and inline macros. Instead of writing a lot of JavaScript manually, you can use dotPipe’s custom elements, universal attributes, and inline pipelines to declare behaviors directly in your markup.

Think of it as a low-code toolkit for dynamic web apps, handling AJAX, modals, carousels, forms, shopping carts, dashboards, and more.

• Custom tags like <pipe>, <cart>, <csv>, <tabs>, <columns>, <checkout>, and many others.
• Universal attributes (ajax, insert, callback, modal, tool-tip, etc.) that apply to any custom element.
• Inline macros: embed tiny “pipelines” of logic directly into elements with the inline attribute.
• Shells: scoped pipelines for isolated execution with variable merging.
• AJAX & JSON templates via modala().
• Support classes for UI behaviors (download, redirect, plain-text, tree-view, etc.).
• Extendable: call custom functions or register new verbs.

1. On DOMContentLoaded, the framework scans the page for custom tags and attributes.
2. Each element with inline is registered into the internal dotPipe.matrix.
3. When triggered (click, event, or manual), the element’s inline pipeline is parsed and executed.
4. Pipelines can:
   • Assign & use variables (&x:123, !x)
   • Modify the DOM ($id.innerHTML:!var)
   • Fetch remote data (ajax:file.json)
   • Call custom JS (call:fnName:params)
   • Run isolated shells (|+target:shellName ... |-shellName)

Simply include the script:

<script src="./dotpipe.js"></script>

Optionally, include your own scripts after dotPipe.js so you can call them via pipelines.

<!-- Output area -->
<div id="status"></div>

<!-- Inline macro example -->
<button id="helloBtn" inline="|&msg:Hello World|$status.innerHTML:!msg">
  Say Hello
</button>

<script>
  // Register inline elements
  dotPipe.register();

  // Bind button click manually
  document.getElementById('helloBtn').addEventListener('click', () => {
    dotPipe.runInline('helloBtn');
  });
</script>

When the button is clicked, dotPipe will:

1. Store "Hello World" in variable msg
2. Insert msg into the innerHTML of #status

Result → status div shows Hello World.

• Always assign unique IDs to every custom tag and inline element.
• Keep pipelines simple at first: one or two verbs.
• Use the log verb (|log:!var) to debug pipeline values.
• Build up step by step into shells and more complex macros.

dotPipe.js defines multiple custom elements you can drop into HTML without writing JavaScript. Each tag is enhanced by dotPipe at runtime.

• AJAX loader & DOM initializer. Runs automatically on DOMContentLoaded.
• Example:

<pipe id="product-list" ajax="products.json" insert="container"></pipe>

• Shopping cart UI. <cart> holds <item> children.

<cart id="main-cart">
  <item id="widget-1" name="Widget" price="9.99"></item>
</cart>

• Auto event element, triggers pipelines on click.

• Filters content or tables.

• Loads CSV into tables/cards with sorting, paging, lazy-load.

• Tabbed navigation system.

• Login/registration forms with AJAX and custom pages.

• Checkout workflow with validation, summary.

• Slider for content/images, supports timed auto-slide.

• Multi-column layout with remote sources.

• Auto-refresh content at intervals.

• Refresh content manually or on interval.

• Shows order confirmation summary.

• AJAX-enabled link element.

Every dotPipe tag supports shared attributes for dynamic behavior.

• id: REQUIRED, unique identifier.
• inline: Pipeline string for dynamic macros.
• ajax: Load remote resource.
• insert: Target element ID for AJAX results.
• query: Key=value pairs for requests.
• callback / callback-class: JS function or grouped callback.
• modal: Load JSON templates/modals.
• file / directory: File download attributes.
• set / get / delete: Manipulate element attributes.
• x-toggle: Toggle classes.
• tool-tip / modal-tip: Tooltips and JSON tooltips.
• copy / remove / display: Content utilities.
• headers: Custom HTTP headers.
• form-class / action-class: Group forms or triggers.
• event: Events to bind to element.
• sources: File list (carousel/cards).
• tab: Tab configuration.
• login-page / registration-page / css-page: Login-specific.
• validate: Checkout validation mode.
• pages / count / percents / height / width: Columns config.
• delay / interval / file-order / file-index / mode: Timed + carousel attributes.
• turn / turn-index / boxes: Carousel rotation.
• sort / page-size / lazy-load: CSV options.

Each can be combined in markup to build rich behaviors.

Inline macros are defined with the inline attribute.

• |verb:param1:param2 → call verb with params
• &var:value → store variable
• !var → use variable
• nop:var → store last result
• $id.innerHTML:!var → bind to DOM
• #var:id.prop → read from element
• @id.prop:var → reference property
• %func:[args] → call JS function
• call:fnName:params → invoke function

<div id="example" inline="|&msg:Hello|$output.innerHTML:!msg"></div>
<div id="output"></div>

Shells isolate pipelines for complex flows.

• |+targetId:shellName → open shell
• |-shellName → close shell

Variables inside shells do not leak until merge on close.

<div id="out"></div>
<button inline="
  |+out:timer
  |&msg:inside
  |$out.innerHTML:!msg
  |-timer
">Run Shell</button>

• log:value → console.log
• ajax:url:method → fetch resource
• modala:url:target → fetch JSON and render
• exc:this/var → push element/variable into pipeline
• nop:var → pass value
• call:fnName:params → run custom/global function

You can extend dotPipe by adding new verbs to dotPipe.verbs.

1. On DOMContentLoaded → domContentLoad() initializes custom tags.
2. dotPipe.register() scans elements with inline macros.
3. Inline macros parsed → runInline(id) executes pipelines.
4. Shells are handled by runShellOpen, runShellClose, runShell.
5. AJAX handled by pipes() and modala() functions.

• Attributes: pages, count, percents, height, width
• API: columnsComponent.refreshColumn, updateColumnContent, loadColumnPage

• <refresh> auto/manual reload buttons
• API: refreshComponent.refreshTarget, refreshTargets

• Validates and renders checkout forms.

• Sources, delay, boxes attributes for auto-rotating content.

• Loads CSV, supports sorting, paging, lazy loading.

Classes that modify behavior of tags.

• download: enable file download
• redirect: navigate after AJAX
• plain-text / plain-html / json / strict-json
• tree-view: render JSON as tree
• incrIndex / decrIndex: carousel index helpers
• modala-multi-first/last
• clear-node
• time-active / time-inactive
• disabled / multiple
• mouse / mouse-insert
• carousel-step-left/right / carousel-slide-left/right

• Always use unique IDs.
• Chain operators with |.
• Debug pipelines with |log:!var.
• Keep shells isolated for async tasks.
• Use callback functions for AJAX.
• Secure apps: CSP nonce auto-applied to scripts/styles.

<cart id="cart">
  <item id="prod1" name="Widget" price="10"></item>
</cart>

<button inline="|modala:data.json:target">Load</button>

<tabs id="mainTabs" tab="Home:home:home.html;About:about:about.html"></tabs>

<refresh id="refresh1" target="stats:stats.html" interval="30">Refresh</refresh>

<button id="btn" inline="|&n:42|call:process:!n">Run</button>
<script>
function process(val){ alert(val); }
</script>

DotPipe is a lightweight, declarative inline-macro engine for HTML. It allows you to manipulate the DOM, update variables, bind styles/attributes, run logic, and perform slice-indexing on class lists — all from a single inline="..." attribute.

No external frameworks required.

• Inline variables (|&name:value|, !name)
• DOM bindings by id/class (#id.prop:val, .class[n].prop:val)
• Full index expressions ([n], [], [a,b], [start:count], [start:end:step], [-n], etc.)
• Style & class manipulation
• Chained operations (op1;op2;op3)
• Scoped shells (|+target:scopeName / |-scopeName)
• Negative indexing & clamped ranges
• Declarative, readable, framework-free

Each operation begins with a pipe (|) inside an element's inline attribute.

<div inline="|operation1|operation2|..."></div>

Macros can declare variables, reference variables, target DOM elements, style them, update attributes, etc.

|&varname:value|

!varname

<div inline="|&msg:Hello World|#title.innerText:!msg"></div>

DotPipe uses prefix operators for selecting DOM nodes:

Property to assign follows a dot:

#id.property:value
.class[n].property:value

Indexes are placed in square brackets after the class name:

• Negative indices are relative to the end (-1 = last, -2 = next-to-last).

• [start:count] is different from [start:end]:

  • [0:2] = 2 items → indices 0 and 1.

• Ranges are clamped to list length.

innerText
innerHTML

value
checked
disabled
src
href

classList.add
classList.remove
classList.toggle

style.<cssProperty>

Examples:

#box.style.background:red
.card[].style.color:#0af

Since property values can include !varname:

<div inline="|&c:#ff0|.highlight[].style.color:!c"></div>

Chain multiple instructions with semicolons:

<div inline="|&msg:Hello|.title[0].innerText:!msg;.title[].style.color:blue"></div>

Shells create temporary variable scopes.

|+targetId:shellName

|-shellName

<div inline="
  |+sidebar:tick
  |&msg:Scoped
  |.note[].innerText:!msg
  |-tick
  |.note[0].innerText:Global
"></div>

<div inline="|&msg:Rustic ain't it?|#status.innerText:!msg"></div>

<div inline=".title[1].innerText:Hello"></div>

<div inline=".badge[].style.color:blue"></div>

<div inline=".item[0,3,5].style.color:purple"></div>

<div inline=".card[0:4].classList.add:featured"></div>       <!-- first four -->
<div inline=".card[1:5:2].style.border:1px solid #333"></div> <!-- indices 1,3 -->
<div inline=".card[-2].style.opacity:0.8"></div>              <!-- last two -->

<div inline="
  |&color:#0af
  |.badge[0].style.background:!color
  |.badge[2].classList.add:active
  |.badge[].style.color:white
"></div>

Attributes can be set directly:

#avatar[src]:!imageURL
#panel[data-mode]:edit

Examples:

<div inline="|&name:Sam|#card[data-user]:!name"></div>

Later operations can override earlier ones.

So:

|&a:10|&b:!a|

stores b = 10.

e.g., requesting .card[200] simply yields an empty set.

Variables
  |&name:value|      Declare
  !name              Substitute

Targets
  #id.prop:val
  .class[n].prop:val
  .class[].prop:val
  .class[a,b].prop:val
  .class[start:count].prop:val
  .class[start:end:step].prop:val
  .class[-n].prop:val

Properties
  innerText, innerHTML
  style.<prop>
  classList.add/remove/toggle
  value, checked, disabled, src, href, etc.

Chaining
  op1;op2;op3

Shells
  |+targetId:shellName
  |-shellName

DotPipe’s inline processor (runInline) does the following:

1. Extracts variables declared with |&name:value|.

2. Substitutes variables (replacing !name with values).

3. Parses DOM operations using:

   ([#.][\w-]+)(?:\[(.*?)\])?\.(.+?):(.+)
   

4. Resolves index expressions:

   • single, multiple, empty, slice, range, step, negative
   • clamps indices to collection length

5. Targets elements:

   • #id → document.getElementById
   • .class[...] → elements via classQuery

6. Assigns property:

   • innerText, innerHTML
   • .style.<prop>
   • .classList.add/remove/toggle
   • generic property/mutation

7. Applies chained operations in sequence.

8. Handles shells by stacking and restoring dpVars.

<div inline="
  |&username:Anthony
  |&color:#36f
  |.card[0].innerText:!username
  |.card[0].style.background:!color
  |.card[1,2].classList.add:highlight
  |.card[].style.color:white
  |.card[-1].style.opacity:0.75
"></div>