From f597636db48a486bb599c8ab93c2c694b661184b Mon Sep 17 00:00:00 2001 From: tunckiral Date: Sun, 5 Jan 2025 01:03:22 -0500 Subject: [PATCH 01/12] adding hint.js --- backend/.env | 2 +- jsAgent/aa.html | 174 ++++++++++++++++++++++++++++++++++++++++++++++++ jsAgent/hint.js | 81 ++++++++++++++++++++++ jsAgent/main.js | 5 ++ 4 files changed, 261 insertions(+), 1 deletion(-) create mode 100644 jsAgent/aa.html create mode 100644 jsAgent/hint.js diff --git a/backend/.env b/backend/.env index b1057599..ff436451 100644 --- a/backend/.env +++ b/backend/.env @@ -5,7 +5,7 @@ NODE_ENV=development DEV_DB_USERNAME=user123 DEV_DB_PASSWORD=password123 DEV_DB_NAME=onboarding_db -DEV_DB_HOST=db +DEV_DB_HOST=localhost DEV_DB_PORT=5432 EMAIL_ENABLE=false diff --git a/jsAgent/aa.html b/jsAgent/aa.html new file mode 100644 index 00000000..edb7d379 --- /dev/null +++ b/jsAgent/aa.html @@ -0,0 +1,174 @@ + + + + + + Tooltip with Dynamic Positioning + + + +
+ Hover over me +
+ + + + + \ No newline at end of file diff --git a/jsAgent/hint.js b/jsAgent/hint.js new file mode 100644 index 00000000..41cf10e9 --- /dev/null +++ b/jsAgent/hint.js @@ -0,0 +1,81 @@ +console.log('hint.js is here!'); + +const hintsDefaultOptions = { + action: "no action", + url: "https://www.google.com", + actionButtonUrl: "https://www.google.com", + actionButtonText: "go google", + targetElement: ".element", + tooltipPlacement: "top", + hintContent: "

content

", + header: "hiiint", + headerBackgroundColor: "#cea2a2", + headerColor: "#101828", + textColor: "#344054", + buttonBackgroundColor: "#7F56D9", + buttonTextColor: "#FFFFFF", +}; + + + +bw.hint = { + init: function () { + bw.hint.putHtml(); + }, + putHtml: function () { + const hintData = window.bwonboarddata.hint; + + for (let i = 0; i < hintData.length; i++) { + const item = hintData[i]; + item.targetElement = ".accordion-header"; + + let tooltipOwners = document.querySelectorAll(item.targetElement); + for (let j = 0; j < tooltipOwners.length; j++) { + const tooltipOwner = tooltipOwners[j]; + + // Create the tooltip element + const tooltip = document.createElement('div'); + tooltip.innerHTML = 'This is a custom tooltip!'; + tooltip.style.position = 'absolute'; + tooltip.style.backgroundColor = '#555'; + tooltip.style.color = '#fff'; + tooltip.style.padding = '5px'; + tooltip.style.borderRadius = '5px'; + tooltip.style.textAlign = 'center'; + tooltip.style.width = '120px'; + tooltip.style.visibility = 'hidden'; + tooltip.style.opacity = '0'; + tooltip.style.transition = 'opacity 0.3s'; + tooltip.style.zIndex = '1'; + + 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'; + + tooltip.appendChild(tooltipArrow); + tooltipOwner.appendChild(tooltip); + + console.log("tooltipOwner added"); + + + } + + + + + + + + } + }, + + +}; + +(async function () { + bw.hint.init(); +})(); \ No newline at end of file diff --git a/jsAgent/main.js b/jsAgent/main.js index c211ee9e..74f8d602 100644 --- a/jsAgent/main.js +++ b/jsAgent/main.js @@ -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"; @@ -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); } From edf6ace4d1242892bd632cbf1be61ed109ef118f Mon Sep 17 00:00:00 2001 From: tunckiral Date: Sun, 5 Jan 2025 04:59:07 -0500 Subject: [PATCH 02/12] adding content, header and button --- jsAgent/aa.html | 271 +++++++++++++++++++---------------------------- jsAgent/hint.js | 250 +++++++++++++++++++++++++++++++++---------- jsAgent/links.js | 2 +- 3 files changed, 304 insertions(+), 219 deletions(-) diff --git a/jsAgent/aa.html b/jsAgent/aa.html index edb7d379..33126c22 100644 --- a/jsAgent/aa.html +++ b/jsAgent/aa.html @@ -1,174 +1,121 @@ + - Tooltip with Dynamic Positioning - - - -
- Hover over me -
- - + // Attach tooltips to all elements with the class 'tooltip-target' + createTooltip('.tooltip-target'); + + \ No newline at end of file diff --git a/jsAgent/hint.js b/jsAgent/hint.js index 41cf10e9..47928bc3 100644 --- a/jsAgent/hint.js +++ b/jsAgent/hint.js @@ -1,24 +1,51 @@ console.log('hint.js is here!'); -const hintsDefaultOptions = { - action: "no action", - url: "https://www.google.com", - actionButtonUrl: "https://www.google.com", - actionButtonText: "go google", - targetElement: ".element", - tooltipPlacement: "top", - hintContent: "

content

", - header: "hiiint", - headerBackgroundColor: "#cea2a2", - headerColor: "#101828", - textColor: "#344054", - buttonBackgroundColor: "#7F56D9", - buttonTextColor: "#FFFFFF", -}; + +// "action": "no action", +// "url": "https://bluewavelabs.ca", +// "actionButtonUrl": "https://bluewavelabs.ca/", +// "actionButtonText": "Take me to subscription page", +// "tooltipPlacement": "top", +// "header": "subtitle subtitle", + +// "headerColor": "#101828", +// "textColor": "#344054", +// "buttonBackgroundColor": "#b39ee1", +// "buttonTextColor": "#FFFFFF", + + + + //

head

+ + +// Create and style the button +// const button = document.createElement('button'); +// button.textContent = 'Great!'; +// button.className = 'button'; +// button.style.cssText = ` +// background-color: #8a70d6; +// color: white; +// border: none; +// border-radius: 8px; +// padding: 0.75rem 2rem; +// font-size: 1rem; +// cursor: pointer; +// float: right; +// `; + +// // Add hover effect to the button +// button.addEventListener('mouseover', () => { +// button.style.backgroundColor = '#7559c2'; +// }); +// button.addEventListener('mouseout', () => { +// button.style.backgroundColor = '#8a70d6'; +// }); bw.hint = { + isMouseOverTooltip : false, + isMouseOverContainer : false, init: function () { bw.hint.putHtml(); }, @@ -27,52 +54,163 @@ bw.hint = { for (let i = 0; i < hintData.length; i++) { const item = hintData[i]; - item.targetElement = ".accordion-header"; - - let tooltipOwners = document.querySelectorAll(item.targetElement); - for (let j = 0; j < tooltipOwners.length; j++) { - const tooltipOwner = tooltipOwners[j]; - - // Create the tooltip element - const tooltip = document.createElement('div'); - tooltip.innerHTML = 'This is a custom tooltip!'; - tooltip.style.position = 'absolute'; - tooltip.style.backgroundColor = '#555'; - tooltip.style.color = '#fff'; - tooltip.style.padding = '5px'; - tooltip.style.borderRadius = '5px'; - tooltip.style.textAlign = 'center'; - tooltip.style.width = '120px'; - tooltip.style.visibility = 'hidden'; - tooltip.style.opacity = '0'; - tooltip.style.transition = 'opacity 0.3s'; - tooltip.style.zIndex = '1'; - - 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'; - - tooltip.appendChild(tooltipArrow); - tooltipOwner.appendChild(tooltip); - - console.log("tooltipOwner added"); - - - } - + console.log(item); + const tooltip = bw.hint.generateTooltip(item); + const header = bw.hint.generateHeader(item); + tooltip.innerHTML = header + item.hintContent; + + tooltip.appendChild(header); + 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'; } }, - + generateTooltip: function (item) { + const tooltip = document.createElement('div'); + tooltip.pos = item.tooltipPlacement; + tooltip.timer = null; + tooltip.positionTimer = null; + //tooltip.innerHTML= item.hintContent; + tooltip.style.cssText = ` + width: 391px; + height: 200px; + position: absolute; + background-color: white; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + display: flex; + color: ${item.textColor}; + `; + return tooltip; + }, + generateHeader: function (item) { + const header_temp = `

${item.header}

`; + + return header_temp; + }, + bindSelector: function (selector, tooltip) { + const elements = document.querySelectorAll(selector); + for (let i = 0; i < elements.length; i++) { + const element = elements[i]; + element.addEventListener('mouseenter', function (e) { + + clearTimeout(tooltip.timer); + clearTimeout(tooltip.positionTimer); + toolbar.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); + }); + } + } }; diff --git a/jsAgent/links.js b/jsAgent/links.js index 75f56347..a7963077 100644 --- a/jsAgent/links.js +++ b/jsAgent/links.js @@ -38,7 +38,7 @@ bw.links={ ...linksDefaultOptions, ...options }; - console.log(option); + let temp_html = `