dotpipe

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 Function Compendium

This document details the functions within dotpipe.js, outlining their purpose, parameters, attributes, and how they interconnect. It serves as a guide for beginners, amateurs, and professionals to understand and utilize DotPipe.js effectively.

1. `domContentLoad(again = false)`

Purpose: Attaches event listeners and initializes tags such as <pipe>, <timed>, <dyn>, and <carousel> when the DOM content loads.

Attributes:

time-active
time-inactive
disabled

Parameters:

again (Boolean, default: false): Determines whether to reinitialize the DOM.

2. `modala(value, tempTag, root, id)`

Purpose: Dynamically generates HTML elements based on a JSON structure and appends them to the DOM.

Attributes:

tagname (HTML element to create)
textContent (or label)
id
class
style
ajax
header

Parameters:

value (Object): JSON object describing the DOM structure.
tempTag (Element/String): Target DOM element or its ID.
root (Element, optional): Default container.
id (String, optional): Optional ID for the element.

3. `renderTree(value, tempTag)`

Purpose: Similar to modala(), but focuses on rendering hierarchical tree-like structures with collapsible behavior.

Attributes:

tagname
textContent (or label)
icon
id

Parameters:

value (Object): JSON object representing the tree.
tempTag (Element/String): Container element or its ID.

4. `modalaHead(value)`

Purpose: Creates <title>, <link> (CSS), and <script> tags based on a JSON structure and appends them to the <head> of the document.

Attributes:

css (Stylesheet links)
js (JavaScript file links)
title

Parameters:

value (Object): JSON object defining head elements.

5. `modal(filename, tagId)`

Purpose: Fetches a JSON file and renders it into a specified element using modala().

Attributes: None

Parameters:

filename (String): URL or path to the JSON file.
tagId (Element/String): Target element or its ID.

6. `modalList(filenames)`

Purpose: Processes multiple JSON files (separated by semicolons) and renders them using modala().

Attributes: None

Parameters:

filenames (String): String of filenames separated by semicolons.

7. `getJSONFile(filename)`

Purpose: Fetches a JSON file from a specified URL and parses it.

Attributes: None

Parameters:

filename (String): URL or path to the JSON file.

8. `getTextFile(filename)`

Purpose: Fetches a text file and returns its content as plain text.

Attributes: None

Parameters:

filename (String): URL or path to the text file.

9. `escapeHtml(html)`

Purpose: Escapes special HTML characters in a string for safe rendering.

Attributes: None

Parameters:

html (String): HTML content to escape.

10. `pipes(elem, stop = false)`

Purpose: Core function handling events, dynamic AJAX calls, and DOM updates based on the attributes of the triggered element.

Attributes:

ajax
insert
query
headers
x-toggle
modal
download
pipe

Parameters:

elem (Element): Triggered element.
stop (Boolean, default: false): Stops further processing if true.

11. `navigate(elem, opts = null, query = '', classname = '')`

Purpose: Sends AJAX requests with optional headers and query parameters.

Attributes:

ajax
query
headers
form-class

Parameters:

elem (Element): Element initiating the request.
opts (Map, optional): Headers as a Map.
query (String, optional): Query string.
classname (String, optional): Class name for form elements.

12. `setTimers(target)`

Purpose: Manages timed events for tags like <timed> and <carousel>.

Attributes:

time-active
time-inactive
delay

Parameters:

target (Element): Element with a timer.

13. `carousel(elem, auto = true)`

Purpose: Creates and updates carousels dynamically, supporting various media types.

Attributes:

file-order
file-index
boxes
delay

Parameters:

elem (Element/String): Carousel container or its ID.
auto (Boolean, default: true): Determines auto-sliding.

14. `htmlToJson(htmlString)`

Purpose: Converts an HTML string into a JSON representation.

Attributes: None

Parameters:

htmlString (String): HTML content as a string.

15. `classOrder(elem)`

Purpose: Toggles through predefined class names on an element.

Attributes:

class-switch
class-index

Parameters:

elem (Element): Target element.

16. `addPipe(elem)`

Purpose: Adds event listeners for "pipe" behavior on an element or array of elements.

Attributes:

pipe

Parameters:

elem (Element/NodeList): Single or multiple elements.

17. `carouselButtonSlide(elem, direction)`

Purpose: Slides the carousel left or right when triggered.

Attributes: None

Parameters:

elem (Element): Carousel container.
direction (String): "left" or "right".

Hello World Examples

Below are several examples demonstrating practical uses of DotPipe.js, with PHP files focusing on echoing "Hello World."

DotPipe.js Hello World Examples

This document provides practical examples demonstrating how to use DotPipe.js to display "Hello World" in various scenarios. The examples range from simple dynamic insertions to AJAX-based updates with PHP integrations.

1. Displaying "Hello World" from a PHP file via Modala

HTML:

<div id="output"></div>
<script>
    const data = {
        "tagname": "div",
        "id": "output",
        "ajax": "hello-world.php",
        "class": "tree-view",
        "insert": "output"
    };
    modala(data, "output");
</script>

PHP (hello-world.php):

<?php
echo "Hello World!";
?>

2. Adding "Hello World" to a Dynamic Tree

HTML:

<div id="tree-container"></div>
<script>
    const treeData = {
        "hello": {
            "tagname": "span",
            "textContent": "Hello World",
            "class": "tree-item"
        }
    };
    renderTree(treeData, "tree-container");
</script>

3. Fetching "Hello World" Dynamically on Click

HTML:

<div id="dynamic"></div>
<script>
    const fetchData = {
        "button": {
            "tagname": "button",
            "textContent": "Load Hello World",
            "class": "tree-view",
            "ajax": "hello-world.php",
            "insert": "dynamic-output"
        }
    };

    renderTree(fetchData, "dynamic");

    // Empty container where the fetched content will appear
    const outputDiv = document.createElement("div");
    outputDiv.id = "dynamic-output";
    document.getElementById("dynamic").appendChild(outputDiv);
</script>

PHP (hello-world.php):

<?php
echo "Hello World!";
?>

4. Dynamically Insert Multiple "Hello World" Elements

HTML:

<div id="multi-output"></div>
<script>
    const multiData = {
        "helloWorld1": {
            "tagname": "div",
            "textContent": "Hello World 1",
            "class": "multi-item"
        },
        "helloWorld2": {
            "tagname": "div",
            "textContent": "Hello World 2",
            "class": "multi-item"
        },
        "helloWorld3": {
            "tagname": "div",
            "textContent": "Hello World 3",
            "class": "multi-item"
        }
    };

    renderTree(multiData, "multi-output");
</script>

5. Combining Modala and AJAX for a Dynamic Hello World

HTML:

<div id="modala-container"></div>
<script>
    const modalaConfig = {
        "tagname": "div",
        "id": "hello-world-modala",
        "ajax": "hello-world.php",
        "insert": "modala-container",
        "class": "modala-item"
    };

    modala(modalaConfig, "modala-container");
</script>

6. Combining Tree and Modala for Interactive "Hello World"

HTML:

<div id="interactive-tree"></div>
<script>
    const interactiveTree = {
        "node1": {
            "tagname": "div",
            "textContent": "Click to Load Hello World",
            "class": "tree-view",
            "ajax": "hello-world.php",
            "insert": "interactive-output"
        }
    };

    renderTree(interactiveTree, "interactive-tree");

    const interactiveOutput = document.createElement("div");
    interactiveOutput.id = "interactive-output";
    document.getElementById("interactive-tree").appendChild(interactiveOutput);
</script>

PHP (hello-world.php):

<?php
echo "Hello World!";
?>

These examples demonstrate the versatility of DotPipe.js for dynamic, interactive web development. Let me know if you'd like to explore additional scenarios or deeper integration possibilities.

Oddities and Misunderstandings

Here are some potential oddities and misunderstandings that may arise while working with DotPipe.js:

1. Misunderstanding the `insert` Attribute

Issue: Some users might expect insert to directly modify the parent element instead of targeting the specified ID.
Clarification: The insert attribute determines where the content is injected. Ensure the specified ID exists in the DOM.

2. Confusion About `ajax` Attribute

Issue: Users may assume ajax works without proper server-side setup.
Clarification: The ajax attribute requires a valid endpoint (e.g., a PHP file) that returns content (HTML/JSON).

3. Overwriting Existing Content

Issue: Dynamically generated elements may overwrite content within the target container.
Clarification: Ensure containers are appropriately scoped and, if necessary, use unique IDs for new content.

4. Nested Trees and Infinite Loops

Issue: When using renderTree recursively, deeply nested JSON can cause performance issues or infinite loops.
Clarification: Validate JSON data and include break conditions if necessary.

5. Misinterpreting `textContent` vs. `label`

Issue: Users might not understand when to use textContent vs. label.
Clarification: Both serve similar purposes; however, textContent is recommended for consistent behavior.

6. Styling Challenges with Dynamically Generated Elements

Issue: Inline styles in JSON may conflict with global stylesheets.
Clarification: Use CSS classes for styling instead of relying on the style attribute within JSON.

7. Large JSON Data Handling

Issue: Extremely large JSON objects can slow down rendering or exceed browser memory limits.
Clarification: Consider lazy-loading or paginating large datasets to improve performance.

8. Fetching External Files in Secure Contexts

Issue: Using ajax to fetch resources from a non-HTTPS server in an HTTPS environment may fail.
Clarification: Always use secure endpoints (HTTPS) to avoid mixed-content errors.

Addressing these oddities will help ensure a smoother experience with DotPipe.js. Feel free to reach out with additional questions or edge cases to explore!

DotPipe.js Exercises

These exercises are designed to help you understand and practice using DotPipe.js in various scenarios. Each question has blanks (underlined fields) for you to complete, followed by multiple options to choose from.

1. Exercise: Using the `insert` Attribute

Goal: Dynamically insert "Hello World" into a specific DOM element.

Scenario: Complete the following JSON to dynamically fetch and insert "Hello World" into the div with the ID dynamic-container.

{
    "tagname": "div",
    "id": "dynamic-item",
    "ajax": "___________",
    "class": "tree-view",
    "insert": "___________"
}

Options for Blanks:

ajax: "hello-world.php" insert: "dynamic-container"
ajax: "hello-world.json" insert: "dynamic-container"
ajax: "data-source.php" insert: "output"
ajax: "data.json" insert: "dynamic-output"

2. Exercise: Fetching JSON and Rendering a Tree

Goal: Render a tree view dynamically from a JSON file.

Scenario: Complete the JSON structure to fetch tree data from tree.json and render it in the container with ID tree-container.

{
    "tagname": "___________",
    "id": "tree-root",
    "ajax": "___________",
    "class": "tree-view",
    "insert": "tree-container"
}

Options for Blanks:

tagname: "span" ajax: "tree.json"
tagname: "div" ajax: "tree-data.json"
tagname: "ul" ajax: "data.json"
tagname: "li" ajax: "list.json"

3. Exercise: Using `modala` for Dynamic Content

Goal: Load "Hello World" content into a modal dynamically.

Scenario: Complete the JSON to load "Hello World" into a div with the ID modal-container.

{
    "tagname": "div",
    "id": "modal-item",
    "ajax": "___________",
    "insert": "___________",
    "class": "modala-item"
}

Options for Blanks:

ajax: "hello-world.php" insert: "modal-container"
ajax: "content.json" insert: "modal-item"
ajax: "data.php" insert: "dynamic-container"
ajax: "modal-content.php" insert: "modal-output"

4. Exercise: Adding Multiple Elements Dynamically

Goal: Insert multiple "Hello World" messages dynamically into a container.

Scenario: Complete the JSON structure for the container and one child element.

{
    "container": {
        "tagname": "___________",
        "id": "multi-container"
    },
    "child": {
        "tagname": "div",
        "textContent": "___________",
        "class": "multi-item"
    }
}

Options for Blanks:

container: tagname: "div" child: textContent: "Hello World 1"
container: tagname: "section" child: textContent: "Dynamic Message"
container: tagname: "ul" child: textContent: "Item 1"
container: tagname: "span" child: textContent: "Welcome!"

Answer Key with Explanations

1. Using the `insert` Attribute

Answer 1:
- ajax: "hello-world.php"
- insert: "dynamic-container"
- Explanation: Fetches content from hello-world.php and inserts it into the dynamic-container.
Answer 2:
- ajax: "hello-world.json"
- insert: "dynamic-container"
- Explanation: Similar to Answer 1 but uses a JSON file instead of PHP.
Answer 3:
- ajax: "data-source.php"
- insert: "output"
- Explanation: Fetches PHP data and targets the output container.
Answer 4:
- ajax: "data.json"
- insert: "dynamic-output"
- Explanation: Fetches JSON and inserts it into dynamic-output.

2. Fetching JSON and Rendering a Tree

Answer 1:
- tagname: "span"
- ajax: "tree.json"
- Explanation: Uses a span element to represent each tree node dynamically fetched from tree.json.
Answer 2:
- tagname: "div"
- ajax: "tree-data.json"
- Explanation: Fetches data using a div wrapper for nodes.
Answer 3:
- tagname: "ul"
- ajax: "data.json"
- Explanation: Creates a list-style tree.
Answer 4:
- tagname: "li"
- ajax: "list.json"
- Explanation: Represents individual list items in a tree.

3. Using `modala` for Dynamic Content

Answer 1:
- ajax: "hello-world.php"
- insert: "modal-container"
- Explanation: Loads PHP content into the modal-container dynamically.
Answer 2:
- ajax: "content.json"
- insert: "modal-item"
- Explanation: Loads JSON content into modal-item.
Answer 3:
- ajax: "data.php"
- insert: "dynamic-container"
- Explanation: Fetches PHP content targeting dynamic-container.
Answer 4:
- ajax: "modal-content.php"
- insert: "modal-output"
- Explanation: Loads dynamic content into modal-output.

4. Adding Multiple Elements Dynamically

Answer 1:
- container: tagname: "div"
- child: textContent: "Hello World 1"
- Explanation: Inserts a div with "Hello World 1".
Answer 2:
- container: tagname: "section"
- child: textContent: "Dynamic Message"
- Explanation: Uses a section with "Dynamic Message".
Answer 3:
- container: tagname: "ul"
- child: textContent: "Item 1"
- Explanation: Creates a list with "Item 1".
Answer 4:
- container: tagname: "span"
- child: textContent: "Welcome!"
- Explanation: Uses a span with "Welcome!".

Created 19 commits in 1 repository

dotpipe/dotPipe 19 commits

	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec	Jan	Feb	Mar
Sun
Mon
Tue
Wed
Thu
Fri
Sat

	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec	Jan	Feb	Mar
Sun
Mon
Tue
Wed
Thu
Fri
Sat

	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec	Jan	Feb	Mar
Sun
Mon
Tue
Wed
Thu
Fri
Sat

dotpipe

Achievements

Achievements

DotPipe.js Function Compendium

1. domContentLoad(again = false)

2. modala(value, tempTag, root, id)

3. renderTree(value, tempTag)

4. modalaHead(value)

5. modal(filename, tagId)

6. modalList(filenames)

7. getJSONFile(filename)

8. getTextFile(filename)

9. escapeHtml(html)

10. pipes(elem, stop = false)

11. navigate(elem, opts = null, query = '', classname = '')

12. setTimers(target)

13. carousel(elem, auto = true)

14. htmlToJson(htmlString)

15. classOrder(elem)

16. addPipe(elem)

17. carouselButtonSlide(elem, direction)

Hello World Examples

DotPipe.js Hello World Examples

1. Displaying "Hello World" from a PHP file via Modala

2. Adding "Hello World" to a Dynamic Tree

3. Fetching "Hello World" Dynamically on Click

4. Dynamically Insert Multiple "Hello World" Elements

5. Combining Modala and AJAX for a Dynamic Hello World

6. Combining Tree and Modala for Interactive "Hello World"

Oddities and Misunderstandings

1. Misunderstanding the insert Attribute

2. Confusion About ajax Attribute

3. Overwriting Existing Content

4. Nested Trees and Infinite Loops

5. Misinterpreting textContent vs. label

6. Styling Challenges with Dynamically Generated Elements

7. Large JSON Data Handling

8. Fetching External Files in Secure Contexts

DotPipe.js Exercises

1. Exercise: Using the insert Attribute

Options for Blanks:

2. Exercise: Fetching JSON and Rendering a Tree

Options for Blanks:

3. Exercise: Using modala for Dynamic Content

Options for Blanks:

4. Exercise: Adding Multiple Elements Dynamically

Options for Blanks:

Answer Key with Explanations

1. Using the insert Attribute

2. Fetching JSON and Rendering a Tree

3. Using modala for Dynamic Content

4. Adding Multiple Elements Dynamically

Popular repositories Loading

365 contributions in the last year

Contribution activity

March 2025

1. `domContentLoad(again = false)`

2. `modala(value, tempTag, root, id)`

3. `renderTree(value, tempTag)`

4. `modalaHead(value)`

5. `modal(filename, tagId)`

6. `modalList(filenames)`

7. `getJSONFile(filename)`

8. `getTextFile(filename)`

9. `escapeHtml(html)`

10. `pipes(elem, stop = false)`

11. `navigate(elem, opts = null, query = '', classname = '')`

12. `setTimers(target)`

13. `carousel(elem, auto = true)`

14. `htmlToJson(htmlString)`

15. `classOrder(elem)`

16. `addPipe(elem)`

17. `carouselButtonSlide(elem, direction)`

1. Misunderstanding the `insert` Attribute

2. Confusion About `ajax` Attribute

5. Misinterpreting `textContent` vs. `label`

1. Exercise: Using the `insert` Attribute

3. Exercise: Using `modala` for Dynamic Content

1. Using the `insert` Attribute

3. Using `modala` for Dynamic Content

	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec	Jan	Feb	Mar
Sun
Mon
Tue
Wed
Thu
Fri
Sat