Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Creating hint in js agent and fixes #470

Merged
merged 13 commits into from
Jan 9, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions jsAgent/banner.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
console.log('banner.js is here!');

let temp_banner_html = `
<div class="bw-banner" id="bw-banner-{{id}}" data-id="{{dataId}}" style="position: fixed; top: 50px; z-index: 999999; height:50px; width:435px; background-color:{{backGroundColor}}; left: 50%; transform: translate(-50%, -50%);
<div class="bw-banner" id="bw-banner-{{id}}" data-id="{{dataId}}" style="position: fixed; {{position}}: 50px; z-index: 999999; height:50px; width:435px; background-color:{{backGroundColor}}; left: 50%; transform: translate(-50%, -50%);
line-height: 13px; font-weight: 400; display: flex; align-items: center; justify-content: space-between; padding: 0.7rem; border-radius: 5px; height:50px; width:435px;">
<div style="color:{{textColor}}; width: 100%; text-align: center;font-family: Inter; font-size: 13px; font-weight: 400; line-height: 24px; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none;">
{{content}}
Expand All @@ -23,6 +21,7 @@ bw.banner = {
const item = bannersData[i];
let temp_html = ``;
temp_html = temp_banner_html.replace(new RegExp('{{backGroundColor}}', 'g'), item.backgroundColor);
temp_html = temp_html.replace(new RegExp('{{position}}', 'g'), item.position);
temp_html = temp_html.replace(new RegExp('{{textColor}}', 'g'), item.fontColor);
temp_html = temp_html.replace(new RegExp('{{content}}', 'g'), item.bannerText);
temp_html = temp_html.replace(new RegExp('{{dataId}}', 'g'), item.id);
Expand Down
321 changes: 321 additions & 0 deletions jsAgent/hint.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,321 @@
bw.hint = {
isMouseOverTooltip : false,
isMouseOverContainer : false,
init: function () {
bw.hint.putHtml();
},
putHtml: function () {
const hintData = window.bwonboarddata.hint;

for (let i = 0; i < hintData.length; i++) {
const item = hintData[i];

const tooltip = bw.hint.generateTooltip(item);
const tooltipArrow = bw.hint.generateTooltipArrow();
const header = bw.hint.generateHeader(item);

const contentContainer = bw.hint.generateContentContainer(item);
const content = bw.hint.generateContent(item);

contentContainer.appendChild(content);

if(item.action !== 'no action'){
const button = bw.hint.generateButton(item);
contentContainer.appendChild(button);
}

tooltip.appendChild(tooltipArrow);
tooltip.appendChild(header);
tooltip.appendChild(contentContainer);

document.body.appendChild(tooltip);

bw.hint.positionTooltip(tooltip, contentContainer, tooltipArrow);

tooltip.addEventListener('mouseenter', function (e) {
clearInterval(tooltip.timer);
e.target.style.visibility = 'visible';
});

tooltip.addEventListener('mouseleave', function (e) {
tooltip.timer = setTimeout(() => {
e.target.style.visibility = 'hidden';
}, 1500);
});
bw.hint.bindSelector(item.targetElement, tooltip);

}
},
//this can be delete later
positionTooltip: function(tooltip, tooltipOwner, tooltipArrow) {
const containerRect = tooltipOwner.getBoundingClientRect();
const tooltipRect = tooltip.getBoundingClientRect();
const viewportWidth = window.innerWidth;

let top = containerRect.top - tooltipRect.height - 5; // 5px above
let left = containerRect.left + (containerRect.width - tooltipRect.width) / 2; // Centered horizontally
let arrowPosition = 'bottom';
let tooltipPosition = 'top';
if (top < 0) {
arrowPosition = 'top';
tooltipPosition = 'bottom';
}
if (left < 0) {
arrowPosition = 'left';
tooltipPosition = 'right';
} else if (left + tooltipRect.width > viewportWidth) {
arrowPosition = 'right';
tooltipPosition = 'left';
}

if (tooltipPosition === 'top') {
tooltip.style.top = '-87px';
tooltip.style.left = '-27px';
} else if (tooltipPosition === 'bottom') {
tooltip.style.top = '38px';
tooltip.style.left = '-27px';
} else if (tooltipPosition === 'left') {
tooltip.style.top = '-24px';
tooltip.style.left = '-172px';
} else if (tooltipPosition === 'right') {
tooltip.style.top = '-24px';
tooltip.style.left = '118px';
}

if(arrowPosition === 'bottom') {
tooltipArrow.style.top = '100%';
tooltipArrow.style.left = '50%';
tooltipArrow.style.marginLeft = '-5px';
tooltipArrow.style.borderColor = '#555 transparent transparent transparent';
} else if(arrowPosition === 'top') {
tooltipArrow.style.top = '-10px';
tooltipArrow.style.left = '50%';
tooltipArrow.style.marginLeft = '-5px';
tooltipArrow.style.borderColor = 'transparent transparent #555 transparent';
} else if(arrowPosition === 'left') {
tooltipArrow.style.top = '50%';
tooltipArrow.style.left = '-5px';
tooltipArrow.style.marginTop = '-5px';
tooltipArrow.style.borderColor = 'transparent #555 transparent transparent';
} else if(arrowPosition === 'right') {
tooltipArrow.style.top = '50%';
tooltipArrow.style.left = '';
tooltipArrow.style.right = '-10px';
tooltipArrow.style.marginTop = '-5px';
tooltipArrow.style.borderColor = 'transparent transparent transparent #555';
}
return {tooltipPosition, arrowPosition};
},
generateTooltip: function (item) {
const tooltip = document.createElement('div');
tooltip.pos = item.tooltipPlacement;
tooltip.timer = null;
tooltip.positionTimer = null;
tooltip.style.cssText = `
width: 400px;
height: 250px;
position: absolute;
background-color: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
color: ${item.textColor};
z-index: 9999;
`;

return tooltip;
},
generateTooltipArrow: function () {
const tooltipArrow = document.createElement('div');
tooltipArrow.style.content = '""';
tooltipArrow.style.position = 'absolute';
tooltipArrow.style.borderWidth = '5px';
tooltipArrow.style.borderStyle = 'solid';
tooltipArrow.style.width = '0';
tooltipArrow.style.height = '0';

return tooltipArrow;
},
generateHeader: function (item) {
const header = document.createElement('div');
header.style.cssText = `background-color: ${item.headerBackgroundColor}; color: ${item.headerColor};`;
header.innerHTML = `
<h3 style="font-size: 20px; font-weight: 600; line-height: 30px; text-align: left; padding: 0 32px; margin-bottom: 8px; margin-top: 24px;font-family: "Inter", sans-serif;">${item.header}</h3>
`;
return header;
},
generateContentContainer: function (item) {
const contentContainer = document.createElement('div');
contentContainer.style.cssText = `
color: ${item.textColor};
justify-content: space-between;
display: flex;
flex-direction: column;
box-sizing: border-box;
min-height: 170px;
padding: 0 32px;
font-size: 13px;
word-wrap: break-word;
`;

return contentContainer
},
generateContent : function (item) {
const content = document.createElement('div');
content.style.cssText = `
font-family: "Inter", sans-serif;
`;
content.innerHTML = item.hintContent;
return content;
},
generateButton: function (item) {
const btnEvent = item.action;

const buttonContainer = document.createElement('div');
buttonContainer.style.cssText = `
margin-top: 8px;
display: flex;
justify-content: flex-end;
`;
const button = document.createElement('button');
button.textContent = item.actionButtonText;
button.style.cssText = `
background-color: ${item.buttonBackgroundColor};
color: ${item.buttonTextColor};
border: none;
border-radius: 8px;
min-width: 64px;
padding: 6px 16px;
font-family: Inter;
font-size: 13px;
cursor: pointer;
float: right;
display: inline-flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
position: relative;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
vertical-align: middle;
`;

button.addEventListener('click', () => {
if(btnEvent == 'no action'){

}
else if(btnEvent == 'open url'){
location.href = item.actionButtonUrl;
}
else if(btnEvent == 'open url in a new tab'){
window.open(item.actionButtonUrl, '_blank');
}
});

button.addEventListener('mouseenter', function(e) {
e.target.style.boxShadow = '0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)'
});

button.addEventListener('mouseleave', function(e) {
e.target.style.boxShadow = 'none';
});

buttonContainer.appendChild(button);
return buttonContainer;
},
bindSelector: function (selector, tooltip) {
const elements = document.querySelectorAll(selector);
for (let i = 0; i < elements.length; i++) {
const element = elements[i];

const tooltipCue = document.createElement('div');
tooltipCue.className = 'tooltip-cue';
tooltipCue.textContent = '?';
tooltipCue.style.cssText = `
position: absolute;
top: -8px;
right: -8px;
background-color: #2078ca;
color: #fff;
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1001;
animation: pulse 1.5s infinite;
}`;
const rect = element.getBoundingClientRect();
tooltipCue.style.left = `${rect.right + window.scrollX - 8}px`; // Adjust position
tooltipCue.style.top = `${rect.top + window.scrollY - 8}px`; // Adjust position

tooltipCue.animate(
[
{ transform: 'scale(1)', opacity: 1 },
{ transform: 'scale(1.2)', opacity: 0.7 },
{ transform: 'scale(1)', opacity: 1 }
],
{
duration: 1500, // 1.5 seconds
iterations: Infinity // Loop forever
}
);

document.body.appendChild(tooltipCue);

element.addEventListener('mouseenter', function (e) {

clearTimeout(tooltip.timer);
clearTimeout(tooltip.positionTimer);
tooltip.positionTimer = setTimeout(function() {

const position = e.target.getAttribute('data-tooltip-position') || 'top';



const rect = e.target.getBoundingClientRect();
switch (position) {
case 'top':
tooltip.style.left = `${rect.left + window.scrollX + rect.width / 2}px`;
tooltip.style.top = `${rect.top + window.scrollY - tooltip.offsetHeight - 5}px`;
tooltip.style.transform = 'translateX(-50%)';
break;
case 'bottom':
tooltip.style.left = `${rect.left + window.scrollX + rect.width / 2}px`;
tooltip.style.top = `${rect.bottom + window.scrollY + 5}px`;
tooltip.style.transform = 'translateX(-50%)';
break;
case 'left':
tooltip.style.left = `${rect.left + window.scrollX - tooltip.offsetWidth - 5}px`;
tooltip.style.top = `${rect.top + window.scrollY + rect.height / 2}px`;
tooltip.style.transform = 'translateY(-50%)';
break;
case 'right':
tooltip.style.left = `${rect.right + window.scrollX + 5}px`;
tooltip.style.top = `${rect.top + window.scrollY + rect.height / 2}px`;
tooltip.style.transform = 'translateY(-50%)';
break;
}

tooltip.style.visibility = 'visible';


}, 500);

});
element.addEventListener('mouseleave', function (e) {
tooltip.timer = setTimeout(() => {
tooltip.style.visibility = 'hidden';
}, 1500);
});
}
}

};

(async function () {
bw.hint.init();
})();
7 changes: 3 additions & 4 deletions jsAgent/links.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
console.log('bw-link.js is loaded');
const linksDefaultOptions = {
"url": "https://www.google.com",
"order": 1,
Expand All @@ -22,7 +21,7 @@ const global_content_html=`
</clipPath>
</defs>
</svg>
<a href="{{link}}" target="_blank" style="color:{{linkFontColor}}; text-decoration: none; font-family: Inter; font-size: 1rem; font-weight: 400;">{{title}}</a>
<a href="{{link}}" target="_blank" style="color:{{linkFontColor}}; text-decoration: none; font-family: Inter; font-size: 13px; font-weight: 400;">{{title}}</a>
</li>
`;

Expand All @@ -38,7 +37,7 @@ bw.links={
...linksDefaultOptions,
...options
};
console.log(option);

let temp_html = `
<div style="position: fixed; bottom: 20px; right: 30px; z-index: 9999999;">
<div id="bw-links" style=" box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.031372549), 0px 20px 24px -4px rgba(16, 24, 40, 0.0784313725); width: 330px; display: flex; flex-direction: column; justify-content: space-between; ">
Expand Down Expand Up @@ -96,7 +95,7 @@ bw.links={
return temp_content_html;
},
putFooter: function(){
return '<p style="margin-bottom: 0px; margin-top: 0px; background: white;; padding: 14px 0 11px;border-top: 1px solid #ebebeb; font-family: Inter; font-size: 0.688rem; font-weight: 400; line-height: 2.12; text-align: center;">Powered by BlueWave Onboarding</p>';
return '<p style="margin-bottom: 0px; margin-top: 0px; background: white;; padding: 14px 0 11px;border-top: 1px solid #ebebeb; font-family: Inter; font-size: 11px; font-weight: 400; line-height: 2.12; text-align: center;">Powered by BlueWave Onboarding</p>';
},
bindClick : function(){
bw.util.bindLive("#bw-link-icon", "click", function(){
Expand Down
9 changes: 7 additions & 2 deletions jsAgent/main.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
//CONSTANTS
const BW_SERVER_ENDPOINT_BASE = window.bwApiBaseUrl; //"http://localhost:3000/api/";
const BW_SERVER_ENDPOINT_BASE = window.bwApiBaseUrl;
const BW_GET_GUIDE_LOG_URL= `${BW_SERVER_ENDPOINT_BASE}guide/get_incomplete_guides_by_url`;
const BW_ADD_GUIDE_LOG_URL= `${BW_SERVER_ENDPOINT_BASE}guide_log/add_guide_log`;
const BW_JS_BASE_URL = window.bwAgentBaseUrl; //"http://localhost:8082/";
const BW_JS_BASE_URL = window.bwAgentBaseUrl;
const BW_POPUP_JS_URL = `${BW_JS_BASE_URL}popup.js`;
const BW_LINKS_JS_URL = `${BW_JS_BASE_URL}links.js`;
const BW_BANNER_JS_URL = `${BW_JS_BASE_URL}banner.js`;
const BW_TOUR_JS_URL = `${BW_JS_BASE_URL}tour.js`;
const BW_HINT_JS_URL = `${BW_JS_BASE_URL}hint.js`;


const BW_USER_KEY = "BW_USER_KEY";

Expand Down Expand Up @@ -196,6 +198,9 @@ bw.init = (cb) => {
if (onBoardConfig.helperLink?.length > 0) {
bw.util.loadScriptAsync(BW_LINKS_JS_URL);
}
if (onBoardConfig.hint?.length > 0) {
bw.util.loadScriptAsync(BW_HINT_JS_URL);
}
} catch (error) {
console.log("error :", error);
}
Expand Down
Loading
Loading