(function () {
const CASES_ENDPOINT = 'https://app.legalnotifications.com/api/doc-cases'; // Replace with your actual endpoint
let customization = 'no';
let groupedIndices = ['A-Z'];
let groups;
let textColor = '#000000';
let foregroundColor = '#ffffff';
let hoverForegroundColor = '#db080833';
let hoverColor = '#5e5555';
let borderColor = '#0000002b';
let documentTags = '';
let messageTextColor = '#ff0000';
let backgroundColor = '#ffffff';
let limit = 100;
let searchable = 'no';
let placeholder = 'Search by document name';
let showInitial = 'yes';
let showGroups = 'yes';
let teamId = '9a22aa38-0966-4249-810d-8e8f69fca5a7';
let pdfIcon = ``;
const scriptElement = document.querySelector('#WebsiteCaseCustomization');
if (scriptElement) {
const src = scriptElement.getAttribute('src');
// const queryString = src.split('?')[1];
const queryString = src.split('?')[1];
if (queryString) {
const params = queryString.split('&');
for (const param of params) {
const keyValue = param.split('=');
const para = keyValue[0];
const value = keyValue[1];
console.log(para, '=>', value);
switch (para) {
case 'customization':
if (value === 'yes') {
customization = value;
groupedIndices = ['A-F', 'G-L', 'M-R', 'S-Z'];
}
break;
case 'groups':
groups = value;
break;
case 'borderColor':
borderColor = value;
break;
case 'hoverColor':
hoverColor = value;
break;
case 'foregroundColor':
foregroundColor = value;
break;
case 'hoverForegroundColor':
hoverForegroundColor = value;
break;
case 'textColor':
textColor = value;
break;
case 'messageTextColor':
messageTextColor = value;
break;
case 'backgroundColor':
backgroundColor = value;
break;
case 'tags':
documentTags = value;
break;
case 'limit':
limit = value > 1000 ? 100 : value;;
break;
case 'showGroups':
showGroups = value;
break;
case 'searchable':
searchable = value;
break;
case 'placeholder':
placeholder = value.split('+').join(' ');
break;
case 'showInitial':
showInitial = value;
break;
// Add more cases for other parameters if needed
default:
// Handle default case if para does not match any of the specified values
}
}
}
}
let currentIndex = 0;
let activeTab = '';
let currentActivePage = 1;
// Create the main widget container
const widgetContainer = document.getElementById('WebsiteCases');
widgetContainer.style.backgroundColor = backgroundColor;
// Check if the element with ID 'WebsiteCases' exists
if (widgetContainer) {
const loaderContainer = document.createElement('div');
loaderContainer.style.position = 'fixed';
loaderContainer.style.top = '0';
loaderContainer.style.display = 'none';
loaderContainer.style.left = '0';
loaderContainer.style.right = '0';
loaderContainer.style.bottom = '0';
loaderContainer.style.background = '#00000096';
const loader = document.createElement('div');
loader.className = 'loader';
loader.style.position = 'absolute';
loader.style.top = '50%';
loader.style.left = '50%';
loader.style.transform = 'translate(-50%, -50%)';
loader.style.width = '50px';
loader.style.height = '50px';
loader.style.border = '5px solid #f3f3f3';
loader.style.borderTop = '5px solid #3498db';
loader.style.borderRadius = '50%';
loader.style.animation = 'spin 1s linear infinite';
// Add the keyframes animation
const styleSheet = document.createElement('style');
styleSheet.innerHTML = `
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
`;
document.head.appendChild(styleSheet);
loaderContainer.appendChild(loader);
widgetContainer.appendChild(loaderContainer);
widgetContainer.style.padding = '20px';
widgetContainer.style.fontFamily = 'Arial';
// for navigation box design
const navigationBox = document.createElement('div');
navigationBox.className = 'navigation-box';
navigationBox.style.border = '2px dashed ' + borderColor;
navigationBox.style.display = 'block';
navigationBox.style.margin = 'auto';
navigationBox.style.maxWidth = 'max-content';
navigationBox.style.padding = '10px';
navigationBox.style.backgroundColor = '#cb262633';
navigationBox.style.textAlign = 'center';
// previous button
const previousButton = document.createElement('button');
previousButton.innerHTML = '«';
previousButton.id = 'btn-previous';
previousButton.style.border = 'none';
previousButton.style.fontSize = '25px';
previousButton.style.cursor = 'pointer'; // Change the cursor to a pointer on hover
previousButton.style.backgroundColor = '#f5d4d4';
previousButton.addEventListener('click', showPreviousRange);
// range button
const rangeButton = document.createElement('button');
rangeButton.id = 'btn-range';
rangeButton.style.border = 'none';
rangeButton.style.backgroundColor = '#f5d4d4';
rangeButton.style.fontSize = '20px';
rangeButton.style.padding = '0px 20px 0px 20px';
rangeButton.style.cursor = 'pointer'; // Change the cursor to a pointer on hover
// rangeButton.addEventListener('click', showNextRange);
// next button
const nextButton = document.createElement('button');
nextButton.style.border = 'none';
nextButton.style.backgroundColor = '#f5d4d4';
nextButton.style.fontSize = '25px';
nextButton.style.cursor = 'pointer'; // Change the cursor to a pointer on hover
nextButton.innerHTML = ' »';
nextButton.id = 'btn-next';
nextButton.addEventListener('click', showNextRange);
if (customization == 'yes') {
navigationBox.appendChild(previousButton);
navigationBox.appendChild(rangeButton);
navigationBox.appendChild(nextButton);
widgetContainer.appendChild(navigationBox);
}
// update range filter
function updateRange() {
if (customization == 'yes') {
rangeButton.textContent = groupedIndices[currentIndex];
}
let currentRange = groupedIndices[currentIndex];
if (groups) {
let splitGroups = groups.split(',');
groupedIndices = splitGroups;
currentRange = groupedIndices[currentIndex];
}else{
var defaultRange = groupedIndices[currentIndex];
var activatedefaultRange = defaultRange.split('-');
currentRange = activatedefaultRange[0];
}
const currentRangeStart = groupedIndices[currentIndex];
setupIndex(currentRangeStart);
activeTab = currentRange;
fetchCases(currentRange, 1);
}
// update PreviousRange filter
function showPreviousRange() {
currentIndex = (currentIndex - 1 + groupedIndices.length) % groupedIndices.length;
updateRange();
const currentRangeStart = groupedIndices[currentIndex];
setupIndex(currentRangeStart);
}
// Debounce function
const debounce = (callback, wait) => {
let timeoutId = null;
return (...args) => {
window.clearTimeout(timeoutId);
timeoutId = window.setTimeout(() => {
callback(...args);
}, wait);
};
}
// Function to handle search
function handleSearch(searchTerm) {
fetchCases(activeTab, 1,searchTerm);
// Perform your search operation with the searchTerm
console.log('Search term:', searchTerm);
// Example: You can perform an API request or any other search operation here
}
// update NextRange filter
function showNextRange() {
currentIndex = (currentIndex + 1) % groupedIndices.length;
updateRange();
const currentRangeStart = groupedIndices[currentIndex];
setupIndex(currentRangeStart);
}
const indexContainer = document.createElement('div');
if(showGroups == 'yes'){
indexContainer.id = 'groupNavigation';
indexContainer.style.textAlign = 'center';
widgetContainer.appendChild(indexContainer);
}else if(searchable == 'yes'){
// Create outer div for the search box
const makeSearchBoxOuter = document.createElement('div');
makeSearchBoxOuter.classList.add('search-box'); // You can add classes for styling if needed
// Create SVG icon for the search
const searchIconSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg");
searchIconSVG.setAttribute("width", "24");
searchIconSVG.setAttribute("height", "24");
searchIconSVG.setAttribute("viewBox", "0 0 24 24");
searchIconSVG.innerHTML = ``;
// Create input element for the search box
const makeSearchBoxInput = document.createElement('input');
makeSearchBoxInput.setAttribute('type', 'text');
makeSearchBoxInput.setAttribute('placeholder', placeholder); // Placeholder text for input
// Attach event listener to the input field for the 'input' event
makeSearchBoxInput.addEventListener('keyup', debounce((event) => {
handleSearch(event.target.value);
},500));
// Apply CSS styles directly from JavaScript
makeSearchBoxOuter.style.display = 'flex';
makeSearchBoxOuter.style.alignItems = 'center';
makeSearchBoxOuter.style.margin = 'auto';
makeSearchBoxOuter.style.width = '300px'; // Adjust width as needed
makeSearchBoxOuter.style.border = '1px solid #ccc';
makeSearchBoxOuter.style.borderRadius = '5px';
makeSearchBoxOuter.style.padding = '5px';
searchIconSVG.style.marginRight = '5px'; // Adjust spacing between icon and input
makeSearchBoxInput.style.flex = '1';
makeSearchBoxInput.style.border = 'none';
makeSearchBoxInput.style.outline = 'none';
// Append SVG icon and input to the outer div
makeSearchBoxOuter.appendChild(searchIconSVG);
makeSearchBoxOuter.appendChild(makeSearchBoxInput);
// Append the search box to a container (assuming 'widgetContainer' is your container)
widgetContainer.appendChild(makeSearchBoxOuter);
}
const casesContainer = document.createElement('div');
widgetContainer.appendChild(casesContainer);
// Fetch case data from server and populate widget
async function fetchCases(rangeStart, pageNum,searchTerm='') {
console.log('fetchCases',rangeStart,pageNum);
loaderContainer.style.display = 'block';
resetTabBackground(rangeStart);
activeTabPage();
if(searchTerm == '' && showInitial =='no' && showGroups =='no'){
const showInitialCases = { data: [] };
displayCases(showInitialCases);
loaderContainer.style.display = 'none';
}else{
try {
const response = await fetch(`${CASES_ENDPOINT}?index=${rangeStart}&page=${pageNum}&teamId=${teamId}&tags=${documentTags}&limit=${limit}&search=${searchTerm}&showGroups=${showGroups}`);
const data = await response.json();
console.log('data test', data.cases);
displayCases(data.cases);
loaderContainer.style.display = 'none';
} catch (error) {
console.log('error', error);
loaderContainer.style.display = 'none';
casesContainer.style.padding = '20px';
casesContainer.innerHTML = 'Failed to fetch cases. Please try again later.';
}
}
}
// displayCases
function displayCases(cases) {
console.log('displayCases', cases);
casesContainer.innerHTML = '';
if (cases.data.length == 0) {
const caseElement = document.createElement('h3');
caseElement.innerHTML = "No results found. Please enter your search critera above.";
caseElement.style.color = messageTextColor; // Change the text color to red
caseElement.style.fontWeight = "bold"; // Make the text bold
caseElement.style.textAlign = 'center';
casesContainer.appendChild(caseElement);
// Add any other styles as needed
} else {
cases.data.forEach(caseItem => {
const caseElement = document.createElement('p');
caseElement.style.marginTop = "10px";
caseElement.style.marginBottom = "10px";
caseElement.style.paddingTop = "5px";
caseElement.style.paddingLeft = "20px";
caseElement.style.paddingBottom = "10px";
caseElement.style.borderBottom = "1px solid " + borderColor;
caseElement.style.backgroundColor = foregroundColor; // Initial background color
caseElement.style.transition = 'background-color 0.3s'; // Smooth background color transition
// caseElement.style.cursor = 'pointer'; // Change the cursor to a pointer on hover
// Add the hover effect using JavaScript event listeners
// caseElement.addEventListener('mouseenter', () => {
// caseElement.style.backgroundColor = hoverForegroundColor; // Change background color to red on hover
// caseElement.querySelector('a').style.color = hoverColor; // Change background color to red on hover
// });
// caseElement.addEventListener('mouseleave', () => {
// caseElement.style.backgroundColor = foregroundColor; // Change background color back to white when not hovering
// caseElement.querySelector('a').style.color = textColor
// });
const campaignName = anchorElement = document.createElement('p');
campaignName.appendChild(document.createTextNode(caseItem.name));
campaignName.style.fontWeight = "bold"; // Mak
campaignName.style.color = textColor;
caseElement.appendChild(campaignName);
const docCases = caseItem.documents;
docCases.forEach(docItem => {
const anchorElement = document.createElement('ul');
anchorElement.style.marginLeft = '15px';
anchorElement.style.padding = '0px';
const docAnchorElement = document.createElement('li');
docAnchorElement.innerHTML = pdfIcon;
docAnchorElement.style.listStyle = 'none';
// docAnchorElement.style.marginLeft = '-20px';
// docAnchorElement.style.fontWeight = "bold"; // Mak
// docAnchorElement.style.color = textColor;
const docDownload = document.createElement('a');
docAnchorElement.style.fontSize = '14px';
// docAnchorElement.style.textDecoration = 'none';
// docAnchorElement.addEventListener('click', () => downloadDocument(docItem));
docDownload.target = '_blank';
docDownload.style.color = textColor;
docDownload.href = 'https://app.legalnotifications.com/download/'+docItem.id;;
// docAnchorElement.href = 'https://'+(caseItem.preview_url);// Set the href attribute for the tag as needed
docDownload.innerHTML = docItem.name;
docAnchorElement.appendChild(docDownload);
anchorElement.appendChild(docAnchorElement);
caseElement.appendChild(anchorElement);
});
casesContainer.appendChild(caseElement);
casesContainer.style.marginTop = "10px";
});
// get totalPages from the response
const totalPages = cases.last_page;
// logic for pagination
if (totalPages > 1) {
const paginationContainer = document.createElement('div');
paginationContainer.style.textAlign = 'center';
paginationContainer.style.marginTop = '20px';
// loop through the pagination links
console.log('cases.links', cases);
cases.links.forEach(link => {
console.log('link', link);
const paginationButton = document.createElement('button');
paginationButton.style.margin = '0px 5px 0px 5px';
paginationButton.style.padding = '5px 12px 5px 12px';
paginationButton.innerHTML = link.label;
paginationButton.addEventListener('click', () => {
// fetch cases for the selected page
const url = new URL(link.url);
const searchParams = new URLSearchParams(url.search);
const pageValue = searchParams.get('page');
fetchCases(activeTab, pageValue);
});
paginationContainer.appendChild(paginationButton);
// Add a class to the active page button
if (link.active) {
// paginationButton.classList.add('active');
paginationButton.style.border = "1px solid #0000002b";
paginationButton.style.color = hoverColor;
paginationButton.style.backgroundColor = hoverForegroundColor; // Change background color to red on hover
}
// Disable the next and previous buttons if there is no next or previous page
if (link.label === 'Next »' && !link.url) {
paginationButton.disabled = true;
}
if (link.label === '« Previous' && !link.url) {
paginationButton.disabled = true;
}
});
casesContainer.appendChild(paginationContainer);
}
}
}
// set up Index
function setupIndex(validIndicesString) {
indexContainer.innerHTML = '';
let indices = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
if (groups) {
let splitGroups = groups.split(',');
indices = splitGroups;
}
// Create an array of valid indices based on the range
const validIndices = [];
for (let i = validIndicesString.charCodeAt(0); i <= validIndicesString.charCodeAt(2); i++) {
validIndices.push(String.fromCharCode(i));
}
indices.forEach(index => {
if (validIndices.includes(index) || groups) {
const indexElement = document.createElement('a');
indexElement.style.padding = '10px 20px 10px 20px';
indexElement.style.textDecoration = 'none';
indexElement.style.display = 'inline-block';
indexElement.style.border = '1px solid #0000002b';
indexElement.style.margin = '5px';
indexElement.href = 'javascript:void(0)';
indexElement.id = `tab-${index}`;
indexElement.innerText = index;
// indexElement.addEventListener('click', () => resetTabBackground(activeTab,index));
indexElement.addEventListener('click', () => fetchCases(index, 1));
indexElement.style.color = textColor;
// Set the initial background color and other styles
indexElement.style.backgroundColor = foregroundColor; // Initial background color
indexElement.style.transition = 'background-color 0.3s'; // Smooth background color transition
indexElement.style.cursor = 'pointer'; // Change the cursor to a pointer on hover
// Add the hover effect using JavaScript event listeners
indexElement.addEventListener('mouseenter', () => {
indexElement.style.backgroundColor = hoverForegroundColor; // Change background color to red on hover
indexElement.style.color = hoverColor; // Change background color to red on hover
});
indexElement.addEventListener('mouseleave', () => {
if (activeTab == index) {
indexElement.style.backgroundColor = hoverForegroundColor; // Change background color to red on hover
indexElement.style.color = hoverColor; // Change background color to red on hover
} else {
indexElement.style.backgroundColor = foregroundColor;
indexElement.style.color = textColor
}
// Change background color back to white when not hovering
});
indexContainer.appendChild(indexElement);
indexContainer.style.borderBottom = "1px solid " + borderColor;
// indexContainer.style.paddingTop = "20px";
indexContainer.style.paddingBottom = "33px";
indexContainer.style.margin = "15px 0px 0px 0px";
if (activeTab == index) {
indexElement.style.backgroundColor = hoverForegroundColor; // Change background color to red on hover
indexElement.style.color = hoverColor;
}
}
});
}
function resetTabBackground(activated) {
const indexElement = document.getElementById(`tab-${activated}`);
const actvie = document.getElementById(`tab-${activeTab}`);
if (indexElement) {
indexElement.style.backgroundColor = hoverForegroundColor;
indexElement.style.color = hoverColor;
if (actvie) {
actvie.style.backgroundColor = foregroundColor;
actvie.style.color = textColor;
}
activeTab = activated;
}
}
// page change active page
function activeTabPage() {
console.log('activeTab', activeTab);
const indexElement = document.getElementById(`tab-${activeTab}`);
if (indexElement) {
indexElement.style.backgroundColor = hoverForegroundColor;
indexElement.style.color = hoverColor;
}
}
updateRange();
} else {
console.error("Element with ID 'WebsiteCases' not found.");
}
})();