Popups, animations, loaders, effects & dynamic frontend interactions

The Cointacted Social Terminal is not limited to plain text — developers can build rich UI interactions using:

• alerts and modals
• loaders and spinners
• animations
• timed steps
• visual feedback
• dynamic DOM injections
• custom event responses

This article explains how.

Important
The terminal escapes HTML, so UI effects should use JS and DOM APIs, not unsafe innerHTML injection.

---

🔹 1. Showing a JavaScript Popup (Safe) #

CointactedSocialTerminalTerminal.registry.popup = function() {
    alert("Hello! This is a popup.");
    cointacted_social_terminal_append_line("Popup displayed.", "success");
};

Usage:

popup

---

🔹 2. Creating a Custom Loading Indicator #

Step 1 — Show a loader in the terminal #

CointactedSocialTerminalTerminal.registry.loadme = async function() {
    cointacted_social_terminal_append_line("Loading...", "system");

    await new Promise(r => setTimeout(r, 1500));

    cointacted_social_terminal_append_line("Done!", "success");
};

Usage:

loadme

---

🔹 3. Multi-Step Animated Output #

CointactedSocialTerminalTerminal.registry.steps = function() {
    const steps = [
        "Initializing...",
        "Connecting...",
        "Syncing...",
        "Finalizing...",
        "Complete!"
    ];

    let i = 0;

    function tick() {
        if (i < steps.length) {
            cointacted_social_terminal_append_line(steps[i], "system");
            i++;
            setTimeout(tick, 700);
        }
    }

    tick();
};

---

🔹 4. Custom Typing Animation (Advanced) #

CointactedSocialTerminalTerminal.registry.typeout = function() {
    const text = "Typing like an actual terminal...";
    let i = 0;

    function tick() {
        const chunk = text.slice(0, i + 1);
        cointacted_social_terminal_append_line(chunk, "fun");
        i++;
        if (i < text.length) setTimeout(tick, 40);
    }

    tick();
};

---

🔹 5. Create a Notification Bubble on the Page #

This uses regular DOM manipulation.

CointactedSocialTerminalTerminal.registry.notify = function() {
    const div = document.createElement('div');
    div.textContent = "Notification!";
    div.style.position = "fixed";
    div.style.top = "20px";
    div.style.right = "20px";
    div.style.background = "#3b82f6";
    div.style.color = "white";
    div.style.padding = "10px 14px";
    div.style.borderRadius = "6px";
    div.style.boxShadow = "0 4px 12px rgba(0,0,0,0.15)";

    document.body.appendChild(div);

    cointacted_social_terminal_append_line("Notification created.", "success");

    setTimeout(() => div.remove(), 3000);
};

Usage:

notify

---

🔹 6. Triggering CSS Animations via JavaScript #

Add CSS in your add-on:

@keyframes pulseglow {
    0% { box-shadow: 0 0 5px #3b82f6; }
    50% { box-shadow: 0 0 20px #3b82f6; }
    100% { box-shadow: 0 0 5px #3b82f6; }
}

.cst-glow {
    animation: pulseglow 1.2s infinite;
}

Command to toggle glow:

CointactedSocialTerminalTerminal.registry.glow = function() {
    const box = document.querySelector('.cointacted-social-terminal');

    if (!box) return;

    box.classList.toggle("cst-glow");

    cointacted_social_terminal_append_line("Glow toggled.", "success");
};

---

🔹 7. Creating a Spinner That Updates Over Time #

CointactedSocialTerminalTerminal.registry.spin = function() {
    const frames = ["⠋","⠙","⠹","⠸","⠼","⠴","⠦","⠧","⠇","⠏"];
    let i = 0;
    let count = 0;

    function tick() {
        cointacted_social_terminal_append_line("Processing " + frames[i], "system");

        i = (i + 1) % frames.length;
        count++;

        if (count < 10) {
            setTimeout(tick, 120);
        } else {
            cointacted_social_terminal_append_line("Done!", "success");
        }
    }

    tick();
};

---

🔹 8. Opening External Links From Commands #

CointactedSocialTerminalTerminal.registry.open = function(input) {
    const url = input.args[0];
    if (!url) {
        return cointacted_social_terminal_append_line("Usage: open <url>", "error");
    }

    window.open(url, "_blank");
    cointacted_social_terminal_append_line("Opening " + url, "system");
};

Usage:

open https://cointacted.com

---

🔹 9. Using Output Events for UI Effects #

Example: play a sound on success messages.

document.addEventListener('cointacted_social_terminal_output', (e) => {
    if (e.detail.type === "success") {
        new Audio('/wp-content/plugins/my-addon/success.wav').play();
    }
});

---

🔹 10. Using Output Events to Change the Page Display #

Example: highlight the terminal when an admin command runs.

document.addEventListener('cointacted_social_terminal_output', (e) => {
    if (e.detail.type === "admin") {
        document.querySelector('.cointacted-social-terminal')
            .style.borderColor = "#ff5555";
    }
});

---

🔹 11. Combining Animations + REST (Advanced Example) #

CointactedSocialTerminalTerminal.registry.fetchslow = async function() {
    cointacted_social_terminal_append_line("Fetching data...", "system");

    const loading = ["⠋", "⠙", "⠹", "⠸"];
    let i = 0;
    let running = true;

    // Start spinner
    function spin() {
        if (!running) return;
        cointacted_social_terminal_append_line("Loading " + loading[i], "system");
        i = (i + 1) % loading.length;
        setTimeout(spin, 120);
    }
    spin();

    // Fetch data
    const res = await fetch("https://api.coingecko.com/api/v3/ping");
    const json = await res.json();

    running = false;

    cointacted_social_terminal_append_line("Response: " + JSON.stringify(json), "success");
};

---

🎯 Summary #

UI commands allow developers to create:

✔ modals #

✔ popups #

✔ notifications #

✔ animations #

✔ loaders #

✔ spinners #

✔ timed output effects #

✔ DOM-based interactions #

✔ sound effects #

✔ dynamic UI around the terminal #

With these tools, the terminal becomes a full interactive frontend layer, not just text output.