Skip to main content

2 posts tagged with "JavaScript"

View All Tags

· 2 min read
Mattias Sander

Here's a Javascript you can use to implement a dynamic search dropdown in Flare. Just save the script below in a file and include it in your Flare project, and then include the script in your template page, or any page where you want the dropdown to appear. You might need to adjust the CSS selector of the search input field based on your project's structure.

Flare Search Dropdown

// Debounce function
function debounce(func, delay) {
let debounceTimer;
return function () {
const context = this;
const args = arguments;
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => func.apply(context, args), delay);
};
}

// Function to handle search
function handleSearch() {
const searchQuery = document.querySelector('._Skins_Home_Searchbar > input:nth-child(1)').value;
if (searchQuery.length > 0) {
MadCap.SearchHelper.SearchPane.Search(searchQuery, { searchContent: true }).then(displayResults);
} else {
clearResults();
}
}

// Function to display results in a dropdown
function displayResults(results) {
const dropdown = document.getElementById('searchResultsDropdown');
dropdown.innerHTML = '';
dropdown.style.backgroundColor = 'white';
dropdown.style.border = '1px solid #ddd';
dropdown.style.listStyleType = 'none';
dropdown.style.padding = '0';
dropdown.style.margin = '0';
dropdown.style.width = '100%';
dropdown.style.boxSizing = 'border-box';


// Limiting results to first 5 items
results.content.slice(0, 5).forEach(item => {
const resultItem = document.createElement('li');
resultItem.style.padding = '10px';
resultItem.style.cursor = 'pointer';
resultItem.style.borderBottom = '1px solid #eee';

// Title of the result
const title = document.createElement('div');
title.textContent = item.Title;
title.style.color = 'blue'; // Making title text blue
title.style.fontSize = '1em'; // Adjust the font size as needed
resultItem.appendChild(title);

// Adding the abstract text as a preview
const preview = document.createElement('div');
preview.textContent = item.AbstractText;
preview.style.color = 'grey';
preview.style.fontSize = '0.8em'; // Smaller font size for abstract
resultItem.appendChild(preview);

// Making the item clickable and opening the link
resultItem.addEventListener('click', () => {
window.location.href = item.Link;
});

dropdown.appendChild(resultItem);
});

}

// Function to clear results from the dropdown
function clearResults() {
const dropdown = document.getElementById('searchResultsDropdown');
dropdown.innerHTML = '';
}

$(document).ready(function () {

// Add event listener to the textbox
document.querySelector('._Skins_Home_Searchbar > input:nth-child(1)').addEventListener('input', debounce(handleSearch, 300));

// Add HTML for the dropdown
const dropdown = document.createElement('ul');
dropdown.id = 'searchResultsDropdown';
dropdown.style.position = 'absolute';
dropdown.style.zIndex = '1000';
// Additional styling for dropdown
document.querySelector('._Skins_Home_Searchbar').appendChild(dropdown);
});



· One min read
Mattias Sander

Post build events in MadCap Flare can append styles to the skin-specific CSS, enabling customization of elements not available in the Flare skin editor. This is particularly useful for Tripane skin where some elements, like the search bar proxy, lack direct support for modifications.

  1. Create Custom CSS and JavaScript: Prepare your additional CSS and JavaScript files with the desired styles and functionalities.

  2. Configure Post Build Events: In your Flare project, open your target, and looks under the 'Build Events' tab, add the following batch commands as post build events:

    type "$(ProjectDirectory)Content\Skin_CSS_additions.css" >> "$(OutputDirectory)\Skins\Default\Stylesheets\Styles.css"
    type "$(ProjectDirectory)Content\Skin_Javascript_additions.js" >> "$(OutputDirectory)\Resources\Scripts\MadCapAll.js"

    These commands append your custom CSS and JavaScript to Styles.css and MadCapAll.js in the output directory.

  3. Build the Project: Execute a build. The custom styles and scripts will be integrated into the skin files.

Post build events offer a practical solution to extend the customization capabilities of Flare’s Tripane skin, allowing for additional styling and functionality adjustments not provided by the default skin editor.