How to make celems

Where you can make own chvar

  1. Open Celems.js

  2. Go to celemsLoader()

RocketFramework/Celems.js
// Celems Handler
// Use celems to connect styles, scripts instead of making new routes
// You can name your celems on any language!
function celem(page_content, name, params, content) {
    // ELEMENTS
    if (name === "testText") {
        return page_content.replaceAll(`!${name}!`, `<h2 ${params}>${content}</h2>`);
    }

    if (name === "bigText") {
        return page_content.replaceAll(`!${name}!`, `<p style="font-size: 60px;">${content}</p>`);
    }

    if (name === "КрасиваяКнопка") {
        let styles = `
        font-size: 20px;
        border-radius: 0.5vh;
        border: none;
        padding: 10px;
        background-color: rgb(29, 29, 29);
        color: white;
        `;
        return page_content.replaceAll(`!${name}!`, `<button style="${styles}">${content}</button>`);
    }

    // STYLES
    if (name === "stylesMain") {
        const style_content = getRaw('styles/main.css');
        return page_content.replaceAll(`!${name}!`, `<style>${style_content}</style>`);
    }

    // SCRIPTS
    if (name === "scriptMain1") {
        const style_content = getRaw('scripts/main1.js');
        return page_content.replaceAll(`!${name}!`, `<script>${style_content}</script>`);
    }

    // LOGGERS
    if (name === "loggerMainPage") {
        console.log("[LOGGER] : main page loaded");
        return page_content.replaceAll(`!${name}!`, ``);
    }


    return page_content;
}

// Load special celems you want
function customElementsLoader(page_content) {
    let result = page_content;

    // CELEMS
    result = celem(result, "testText", 'style="font-size: 60px;"', "Text2");
    result = celem(result, "bigText", '', 'Big Text Element');
    result = celem(result, "КрасиваяКнопка", '', 'This is a text');

    // STYLES
    result = celem(result, "stylesMain", '', '');

    // SCRIPTS
    result = celem(result, "scriptMain1", '', '');

    // LOGGERS
    result = celem(result, "loggerMainPage", '', '');
    return result;
}


module.exports = {
    customElementsLoader,
};

  1. Go to your template

structure/pages/main.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RocketCode Example</title>
    <!-- React is better than this framework, but if you need a simpler framework with more or less the same functionality, you can use RocketCode-Framework, I will be very glad to see contributors! -->

    !stylesMain! <!-- Here we are loading CSS-->
</head>
<body>
    !loggerMainPage!

    !testText!
    !КрасиваяКнопка!

    <p>Below big Text</p>
    !bigText!


    !scriptMain1! <!-- Here we are loading JS-->
</body>
</html>
⭐Features
PreviousHow to make chvarsNextPlugins

Last updated