|
|
@@ -0,0 +1,116 @@
|
|
|
+/*
|
|
|
+ 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":[
|
|
|
+
|
|
|
+ ],
|
|
|
+}
|
Toby Chui