Zoraxy/web/script/quicksetup.js

/* 
    Quick Setup Tour

    This script file contains all the required script
    for quick setup tour and walkthrough
*/

//tourStepFactory generate a function that renders the steps in tourModal
//Keys: element, title, desc, tab, zone, callback
//      elements -> Elements to focus on
//      tab -> Tab ID to switch pages
//      pos -> Where to display the tour modal, {topleft, topright, bottomleft, bottomright, center}

function adjustTourModalOverlayToElement(element){
    $("#tourModalOverlay").css({
        "top": $(element).offset().top,
        "left": $(element).offset().left,
        "width": $(element).width(),
        "height": $(element).height(),
    })
}

function tourStepFactory(config){
    return function(){
         //Check if this step require tab swap
         if (config.tab != undefined && config.tab != ""){
            //This tour require tab swap. call to openTabById
            openTabById(config.tab);
        }
        
        if (config.element == undefined){
            //No focused element in this step.
            $(".tourFocusObject").removeClass("tourFocusObject");
            $("#tourModal").addClass("nofocus");
            $("#tourModalOverlay").hide();
        }else{
            //Consists of focus element in this step
            $(".tourFocusObject").removeClass("tourFocusObject");
            $(config.element).addClass("tourFocusObject");
            $("#tourModal").removeClass("nofocus");

            //Match the overlay to element position and size
            $(window).off("resize").on("resize", function(){
                adjustTourModalOverlayToElement(config.element);
            })
            adjustTourModalOverlayToElement(config.element);
            $("#tourModalOverlay").show();
        }

       

        //Get the modal location of this step
        let showupZone = "center";
        if (config.pos != undefined){
            showupZone = config.pos
        }

        $("#tourModal").attr("position", showupZone);

        $("#tourModal .tourStepTitle").html(config.title);
        $("#tourModal .tourStepContent").html(config.desc);
        if (config.callback != undefined){
            config.callback();
        }
    }
}

var tourSteps = {
    //Homepage steps
    "homepage": [
        tourStepFactory({
            title: "🎉 Congratulation on your first site!",
            desc: "In this tour, you will be guided through the steps required to setup a basic static website using your own domain name with Zoraxy."
        }),
        tourStepFactory({
            title: "Pointing your domain's DNS to Zoraxy's IP",
            desc: `Setup a DNS A Record that points your domain name to this Zoraxy instances public IP address. <br>
            Assume your public IP is 93.184.215.14, you should have an A record like this.
            <table class="ui celled collapsing basic striped table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Type</th>
                        <th>Value</th>
                    </tr>   
                </thead>
                <tbody>
                    <tr>
                        <td>yourdomain.com</td>
                        <td>A</td>
                        <td>93.184.215.14</td>
                    </tr>
                </tbody>
            </table>
            <br>If the IP of Zoraxy start from 192.168, you might want to use your router's public IP address and setup port forward for both port 80 and 443 as well.`,
            
        }),
        tourStepFactory({
            title: "Setup Default Site",
            desc: `If you already have an apache or nginx web server running, use "Reverse Proxy Target". <br>Otherwise, pick "Internal Static Web Server" and click "Apply Change"`,
            tab: "setroot",
            element: $("#setroot"),
            pos: "bottomright"
        })
    ],

    //Subdomains tour steps
    "subdomain":[

    ],

    //TLS and ACME tour steps
    "tls":[

    ],
}