(function () {
'use strict';
/*
==========================================================
GO INVITE - LUMISE 2.1.3 GUIDED TOUR
Designed for the layout shown in your screenshot.
==========================================================
*/
var steps = [
/*
------------------------------------------------------
STEP 1
Welcome
------------------------------------------------------
*/
{
title: 'Welcome to Go Invite 👋',
text: 'Let us show you how to customize your invitation. This quick tour will take you through the main tools.',
selector: null,
position: 'center'
},
/*
------------------------------------------------------
STEP 2
PRODUCT
------------------------------------------------------
*/
{
title: 'Product',
text: 'This section shows your current product. You can change the product or check product options here.',
selector: '#lumise-left li[data-type="product"], #lumise-left li[data-block="product"], #lumise-left [data-callback="product"]',
fallbackText: 'Product',
position: 'right'
},
/*
------------------------------------------------------
STEP 3
TEMPLATES
------------------------------------------------------
*/
{
title: 'Templates',
text: 'Click Templates to browse and select a ready-made invitation design.',
selector: '#lumise-left li[data-type="templates"], #lumise-left li[data-block="templates"], #lumise-left [data-callback="templates"]',
fallbackText: 'Templates',
position: 'right'
},
/*
------------------------------------------------------
STEP 4
LAYERS
------------------------------------------------------
*/
{
title: 'Layers',
text: 'Layers lets you see and manage all the objects used in your invitation.',
selector: '#lumise-left li[data-type="layers"], #lumise-left li[data-block="layers"], #lumise-left [data-callback="layers"]',
fallbackText: 'Layers',
position: 'right'
},
/*
------------------------------------------------------
STEP 5
CLIPARTS
------------------------------------------------------
*/
{
title: 'Cliparts',
text: 'Use Cliparts to add decorative elements and graphics to your invitation.',
selector: '#lumise-left li[data-type="cliparts"], #lumise-left li[data-block="cliparts"], #lumise-left [data-callback="cliparts"]',
fallbackText: 'Cliparts',
position: 'right'
},
/*
------------------------------------------------------
STEP 6
TEXT
------------------------------------------------------
*/
{
title: 'Text',
text: 'Click Text to add new text or edit the text used in your invitation.',
selector: '#lumise-left li[data-type="text"], #lumise-left li[data-block="text"], #lumise-left [data-callback="text"]',
fallbackText: 'Text',
position: 'right'
},
/*
------------------------------------------------------
STEP 7
IMAGES
------------------------------------------------------
*/
{
title: 'Images',
text: 'Use Images to upload your photos and replace images in your invitation.',
selector: '#lumise-left li[data-type="images"], #lumise-left li[data-block="images"], #lumise-left [data-callback="images"]',
fallbackText: 'Images',
position: 'right'
},
/*
------------------------------------------------------
STEP 8
SHAPES
------------------------------------------------------
*/
{
title: 'Shapes',
text: 'Use Shapes to add circles, rectangles and other design elements.',
selector: '#lumise-left li[data-type="shapes"], #lumise-left li[data-block="shapes"], #lumise-left [data-callback="shapes"]',
fallbackText: 'Shapes',
position: 'right'
},
/*
------------------------------------------------------
STEP 9
DRAWING
------------------------------------------------------
*/
{
title: 'Drawing',
text: 'Use Drawing if you want to draw directly on your invitation design.',
selector: '#lumise-left li[data-type="drawing"], #lumise-left li[data-block="drawing"], #lumise-left [data-callback="drawing"]',
fallbackText: 'Drawing',
position: 'right'
},
/*
------------------------------------------------------
STEP 10
CANVAS
------------------------------------------------------
*/
{
title: 'Design Area',
text: 'This is your main design area. You can see your invitation here and select objects to edit them.',
selector: '#lumise-stage, #lumise-stage-area, #lumise-workspace, .lumise-stage, canvas',
position: 'left'
},
/*
------------------------------------------------------
STEP 11
SAVE
------------------------------------------------------
*/
{
title: 'Save Your Design',
text: 'Use Save to MyDesigns to save your design so you can return to it later.',
selector: '#lumise-top-tools [data-callback="save"], #lumise-top-tools [data-callback="save_design"]',
fallbackText: 'Save to MyDesigns',
position: 'bottom'
},
/*
------------------------------------------------------
STEP 12
ADD TO CART
------------------------------------------------------
*/
{
title: 'Add to Cart',
text: 'When your invitation is complete, click Add to Cart to continue with your order.',
selector: '#lumise-cart, #lumise-add-to-cart, .lumise-add-to-cart',
fallbackText: 'ADD TO CART',
position: 'bottom'
}
];
/*
==========================================================
VARIABLES
==========================================================
*/
var currentStep = 0;
var overlay = null;
var tooltip = null;
var spotlight = null;
var target = null;
/*
==========================================================
FIND ELEMENT
==========================================================
*/
function findTarget(step) {
var element = null;
/*
First try exact Lumise selectors.
*/
if (step.selector) {
try {
element =
document.querySelector(
step.selector
);
} catch (e) {
element = null;
}
}
/*
If selector doesn't work,
search only inside the left navigation.
*/
if (!element && step.fallbackText) {
var left =
document.querySelector(
'#lumise-left'
);
if (left) {
var elements =
left.querySelectorAll(
'li, a, button, span, div'
);
var search =
step.fallbackText
.toLowerCase();
for (
var i = 0;
i < elements.length;
i++
) {
var text =
(
elements[i]
.innerText ||
elements[i]
.textContent ||
''
)
.trim()
.toLowerCase();
if (
text === search
) {
var rect =
elements[i]
.getBoundingClientRect();
if (
rect.width > 0 &&
rect.height > 0
) {
element =
elements[i];
break;
}
}
}
}
}
/*
Save button can be searched globally.
*/
if (
!element &&
step.fallbackText ===
'Save to MyDesigns'
) {
element =
findTextAnywhere(
step.fallbackText
);
}
/*
Add to cart can be searched globally.
*/
if (
!element &&
step.fallbackText ===
'ADD TO CART'
) {
element =
findTextAnywhere(
step.fallbackText
);
}
return element;
}
/*
==========================================================
SEARCH TEXT
==========================================================
*/
function findTextAnywhere(text) {
var elements =
document.querySelectorAll(
'button, a, li, span, div'
);
var search =
text
.toLowerCase();
for (
var i = 0;
i < elements.length;
i++
) {
var value =
(
elements[i].innerText ||
elements[i].textContent ||
''
)
.trim()
.toLowerCase();
if (
value === search
) {
var rect =
elements[i]
.getBoundingClientRect();
if (
rect.width > 0 &&
rect.height > 0
) {
return elements[i];
}
}
}
return null;
}
/*
==========================================================
CREATE TOUR
==========================================================
*/
function createTour() {
if (
document.getElementById(
'goinvite-tour-overlay'
)
) {
return;
}
/*
OVERLAY
*/
overlay =
document.createElement(
'div'
);
overlay.id =
'goinvite-tour-overlay';
/*
DARK AREA
*/
var dark =
document.createElement(
'div'
);
dark.id =
'goinvite-tour-dark';
overlay.appendChild(
dark
);
/*
SPOTLIGHT
*/
spotlight =
document.createElement(
'div'
);
spotlight.id =
'goinvite-tour-spotlight';
overlay.appendChild(
spotlight
);
/*
TOOLTIP
*/
tooltip =
document.createElement(
'div'
);
tooltip.id =
'goinvite-tour-tooltip';
tooltip.innerHTML = `
`; overlay.appendChild( tooltip ); document.body.appendChild( overlay ); /* EVENTS */ document .getElementById( 'goinvite-tour-next' ) .onclick = nextStep; document .getElementById( 'goinvite-tour-back' ) .onclick = previousStep; document .getElementById( 'goinvite-tour-skip' ) .onclick = finishTour; document .getElementById( 'goinvite-tour-close' ) .onclick = finishTour; /* START */ showStep( currentStep ); } /* ========================================================== SHOW STEP ========================================================== */ function showStep(index) { currentStep = index; var step = steps[index]; target = null; /* FIND TARGET */ if ( step.selector || step.fallbackText ) { target = findTarget( step ); } /* CONTENT */ document.getElementById( 'goinvite-tour-step' ).innerText = 'STEP ' + (index + 1); document.getElementById( 'goinvite-tour-title' ).innerText = step.title; document.getElementById( 'goinvite-tour-text' ).innerText = step.text; document.getElementById( 'goinvite-tour-counter' ).innerText = (index + 1) + ' / ' + steps.length; /* BACK */ var back = document.getElementById( 'goinvite-tour-back' ); back.style.display = index === 0 ? 'none' : 'inline-block'; /* NEXT */ var next = document.getElementById( 'goinvite-tour-next' ); next.innerText = index === steps.length - 1 ? 'Finish' : 'Next'; /* POSITION */ if (target) { positionTarget(); } else { spotlight.style.display = 'none'; tooltip.classList.add( 'goinvite-tour-center' ); } } /* ========================================================== POSITION TARGET ========================================================== */ function positionTarget() { tooltip.classList.remove( 'goinvite-tour-center' ); var rect = target.getBoundingClientRect(); /* Spotlight */ spotlight.style.display = 'block'; spotlight.style.left = ( rect.left - 5 ) + 'px'; spotlight.style.top = ( rect.top - 5 ) + 'px'; spotlight.style.width = ( rect.width + 10 ) + 'px'; spotlight.style.height = ( rect.height + 10 ) + 'px'; /* Scroll target into view */ try { target.scrollIntoView({ block: 'nearest', inline: 'nearest' }); } catch (e) {} /* TOOLTIP POSITION */ var width = 350; var height = 220; var left = rect.right + 18; var top = rect.top; /* For left navigation, put tooltip on right. */ if ( rect.left < 150 ) { left = rect.right + 20; top = rect.top; } /* If tooltip goes outside right side of screen. */ if ( left + width > window.innerWidth - 15 ) { left = rect.left - width - 18; } /* If still outside, place below target. */ if ( left < 15 ) { left = 15; top = rect.bottom + 18; } /* Keep vertical position */ if ( top + height > window.innerHeight - 15 ) { top = window.innerHeight - height - 15; } if ( top < 15 ) { top = 15; } tooltip.style.left = left + 'px'; tooltip.style.top = top + 'px'; } /* ========================================================== NEXT ========================================================== */ function nextStep() { if ( currentStep >= steps.length - 1 ) { finishTour(); return; } currentStep++; showStep( currentStep ); } /* ========================================================== BACK ========================================================== */ function previousStep() { if ( currentStep <= 0 ) { return; } currentStep--; showStep( currentStep ); } /* ========================================================== FINISH ========================================================== */ function finishTour() { if (overlay) { overlay.remove(); overlay = null; } } /* ========================================================== GUIDE BUTTON ========================================================== */ function createGuideButton() { if ( document.getElementById( 'goinvite-start-tour' ) ) { return; } var button = document.createElement( 'button' ); button.id = 'goinvite-start-tour'; button.type = 'button'; button.innerHTML = '💡 Guide'; document.body.appendChild( button ); button.onclick = function () { currentStep = 0; createTour(); }; } /* ========================================================== INITIALIZE ========================================================== */ function initialize() { createGuideButton(); } /* ========================================================== RESIZE ========================================================== */ window.addEventListener( 'resize', function () { if ( target && overlay ) { setTimeout( function () { positionTarget(); }, 100 ); } } ); /* ========================================================== START ========================================================== */ var count = 0; var timer = setInterval( function () { count++; initialize(); if ( document.getElementById( 'goinvite-start-tour' ) ) { clearInterval( timer ); } if ( count > 30 ) { clearInterval( timer ); } }, 1000 ); })();