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.

Sign up for GitHub

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

Creating hint in js agent and fixes #470

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
f597636
adding hint.js
swoopertr Jan 5, 2025
085edc1
Merge branch 'develop' into creating-hint-in-jsAgent
swoopertr Jan 5, 2025
edf6ace
adding content, header and button
swoopertr Jan 5, 2025
31346da
refactor: streamline tooltip content generation and enhance button fu…
swoopertr Jan 7, 2025
16ddb1f
delete: remove unused tooltip example HTML file
swoopertr Jan 7, 2025
fedc125
fix: update database host in environment configuration
swoopertr Jan 7, 2025
024adfe
fix: correct variable assignment for tooltip position timer
swoopertr Jan 7, 2025
a2a5c0e
fix: adjust font sizes and improve button shadow effects in modal
swoopertr Jan 7, 2025
ed8e241
fix: adjust modal button styles and remove unused event listeners
swoopertr Jan 7, 2025
0cbc0f1
fix: remove console.log statements and adjust font sizes in various c…
swoopertr Jan 7, 2025
4af6604
fix: add dynamic positioning to banner component
swoopertr Jan 8, 2025
ac2cef4
fix: improve tooltip button generation and remove unnecessary console…
swoopertr Jan 8, 2025
b3ef754
fix: enhance tooltip functionality with arrow generation and dynamic …
swoopertr Jan 8, 2025
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
265 changes: 265 additions & 0 deletions jsAgent/hint.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,265 @@
console.log('hint.js is here!');
swoopertr marked this conversation as resolved.
Show resolved Hide resolved

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];
console.log(item);
swoopertr marked this conversation as resolved.
Show resolved Hide resolved

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

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

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

document.body.appendChild(tooltip);

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';
}
},
swoopertr marked this conversation as resolved.
Show resolved Hide resolved
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;
`;
swoopertr marked this conversation as resolved.
Show resolved Hide resolved
return tooltip;
},
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: 14px;
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'){
//bw.hint.hideModal();
console.log('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');
}
swoopertr marked this conversation as resolved.
Show resolved Hide resolved
});

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];
swoopertr marked this conversation as resolved.
Show resolved Hide resolved
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);

});
swoopertr marked this conversation as resolved.
Show resolved Hide resolved
element.addEventListener('mouseleave', function (e) {
tooltip.timer = setTimeout(() => {
tooltip.style.visibility = 'hidden';
}, 1500);
});
}
}

};

(async function () {
bw.hint.init();
})();
6 changes: 3 additions & 3 deletions jsAgent/links.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,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 +38,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 +96,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: 10px; 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
5 changes: 5 additions & 0 deletions jsAgent/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ 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
26 changes: 20 additions & 6 deletions jsAgent/popup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ bw.popup = {

let temp_html = `
<div id='bw-modal' style='position: fixed; top: 180px; left: 50%; transform: translate(-50%, -50%); width: ${size.width}px; height: ${size.height}px; display: block; z-index: 1000; border: 1px solid var(--light-border-color); box-sizing: border-box; padding-top: 100px; background-color: rgb(255 255 255 / 0%);;'>
<div class='modal-content' style='border-radius: 4px; position: relative; margin: auto;padding: 0;border: 1px solid #888; background-color: white;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);'>
<div class='modal-content' style='border-radius: 4px; position: relative; margin: auto;padding: 0;border: 1px solid #D0D5DD; background-color: white;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px;'>
${bw.popup.addHeader(option.header, option.headerBackgroundColor, option.headerColor, option.padding)}
<div class="modal-body" style='padding: ${option.padding}px ${option.padding}px; display: flex; justify-content: space-between; flex-direction: column; box-sizing: border-box; font-family: "Inter", sans-serif; font-size: 14px; '>
${option.content}
Expand Down Expand Up @@ -80,7 +80,7 @@ bw.popup = {
transition: background-color 0.3s, border-color 0.3s; min-width: 64px; padding: 6px 16px; border: 0; font-family: Inter; font-weight: 500; font-size: 0.875rem; line-height: 1.75;">${text}</button>
</div>`;
return buttonHtml;
},
},
bindEvents: function(btnEvent, btnlink){
document.getElementById('bw-modal-close').addEventListener('click', function(){
bw.popup.hideModal();
Expand All @@ -98,12 +98,26 @@ bw.popup = {
window.open(btnlink);
}
});
button.addEventListener('mouseover', function(){
button.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('mouseenter', function(e) {
console.log("mouse over");
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)'
swoopertr marked this conversation as resolved.
Show resolved Hide resolved
});
button.addEventListener('mouseout', function(){
button.style.boxShadow = 'none';

button.addEventListener('mouseleave', function(e) {
console.log("mouse out");
e.target.style.boxShadow = 'none';
swoopertr marked this conversation as resolved.
Show resolved Hide resolved
});


// button.addEventListener('mouseover', function(e){
// console.log("mouse over");
// 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('mouseout', function(e){
// console.log("mouse out");
// e.target.style.boxShadow = 'none';
// });
swoopertr marked this conversation as resolved.
Show resolved Hide resolved
},
hideModal: function(){
document.getElementById('bw-overlay').style.display = 'none';
Expand Down
Loading