|
|
|
|
|
// Text Data to be injected into HTML |
|
const generalFeauturesCopy = [ |
|
"Pipe is the name of a process in Pipefy. Each pipe represents a different process.", |
|
"Pipes only visible to your company admins and to the company members you invite into the pipe.", |
|
"Members can create new cards and access all of the pipe’s existing cards to edit/move them across the pipe.", |
|
"Can only access the start form of public pipes to create cards. They can't view or edit any cards.", |
|
"Activity log showing everything that's happened to a card in a timeline view.", |
|
"Number of records across all of your databases.", |
|
"Attachments across pipes and databases.", |
|
"Number of cards you can create per month.", |
|
"Connections enable users to connect a pipe to another pipe or to a database.", |
|
"Create external facing forms to collect data.", |
|
"Enables users to view all the information extracted from the fields of all the cards in an organized, customizable spreadsheet format.", |
|
"Measure your team's productivity and lead time, visualizing the summaries of card status and activities by time period.", |
|
"Get notified by an alert when your card exceeds the maximum lead-time established for a pipe or a phase.", |
|
"Customize your process with different types of fields.", |
|
"Hide and show fields based on a users selections in prior fields.", |
|
"Automatically trigger an action when a specific event occurs in one of your pipes.", |
|
"Number of total jobs performed by automation rules per month." |
|
]; |
|
|
|
const automationCopy = [ |
|
"Trigger automation jobs based on certain specified criteria.", |
|
"Automatically create cards in a pipe when emails are sent to its unique email address.", |
|
"Customizable messages created to be sent from a specific phase of your pipe, manually or automatically.", |
|
"Have access to our API and plug Pipefy to your stack.", |
|
"500+ plug & play process templates to get inspired.", |
|
"Connect Pipefy with more than 1,500 other applicaitons using Zapier.", |
|
"Import cards into your pipes from a spreadsheet." |
|
]; |
|
|
|
const securityCopy = [ |
|
"Setup different roles and permissions to the members of your organization.", |
|
"Users only allowed to view/edit cards created by or assigned to them.", |
|
false, |
|
false, |
|
false, |
|
false, |
|
"Confirm each user's identity using a combination of two different methods." |
|
]; |
|
|
|
// Polling function - like shared.init |
|
|
|
(function poll() { |
|
if ( |
|
!( |
|
document.readyState === "complete" || |
|
document.readyState === "interactive" |
|
) |
|
) |
|
return setTimeout(poll, 50); |
|
|
|
applyChanges(); |
|
})(); |
|
|
|
/** |
|
* Apply changes function |
|
* Where the magic happens |
|
*/ |
|
function applyChanges() { |
|
// Add unique class to body |
|
document.body.classList.add("cro-24"); |
|
|
|
// Get the elements we need |
|
const generalFeautures = document.querySelector(".general-features"); |
|
const automation = document.querySelector(".automation"); |
|
const security = document.querySelector(".security"); |
|
|
|
// Get all Table heads in the table body as an iterable (technically not) node list |
|
let generalFeauturesTitles = generalFeautures.querySelectorAll("tbody th"); |
|
let automationTitles = automation.querySelectorAll("tbody th"); |
|
let securityTitles = security.querySelectorAll("tbody th"); |
|
|
|
// Add an identifiable class to each |
|
addClass(generalFeauturesTitles, ["cro-title"]); |
|
addClass(automationTitles, ["cro-title"]); |
|
addClass(securityTitles, ["cro-title"]); |
|
|
|
// Inject our HTML and copy |
|
generalFeauturesTitles.forEach((title, i) => |
|
title.insertAdjacentHTML("afterbegin", dropdown(generalFeauturesCopy[i])) |
|
); |
|
automationTitles.forEach((title, i) => |
|
title.insertAdjacentHTML("afterbegin", dropdown(automationCopy[i])) |
|
); |
|
securityTitles.forEach((title, i) => { |
|
let html = securityCopy[i] ? dropdown(securityCopy[i]) : false; |
|
html ? title.insertAdjacentHTML("afterbegin", html) : null; |
|
}); |
|
|
|
// Select the accordion header - first of type |
|
let accordionHeader = document.querySelector(".rs-accordion__header"); |
|
|
|
// Select the body - first of type |
|
let accordionBody = document.querySelector(".rs-accordion__body"); |
|
|
|
// Remove the header and remove maxheight from body; |
|
accordionHeader.click(); |
|
accordionHeader.remove(); |
|
} |
|
|
|
// Utility Functions |
|
|
|
/** |
|
* Adds all classess passed to all nodes in the node list passed |
|
* |
|
* @param {NodeList} nodelist An HTML nodelist |
|
* @param {Array} classes Array of classes to be added to each node in the node list |
|
*/ |
|
function addClass(nodelist, classes) { |
|
nodelist.forEach(node => node.classList.add(...classes)); |
|
} |
|
|
|
/** |
|
* |
|
* @param {String} text Text to place inside the html |
|
* |
|
* @returns {String} An HTML string with the text inserted inside |
|
*/ |
|
function dropdown(text) { |
|
return ` |
|
<div class="link"> |
|
<div class="arrow"> |
|
<div class="drop"> |
|
<!--Content Here--> |
|
<div class="line one">${text}</div> |
|
</div> |
|
</div> |
|
</div> |
|
`; |
|
} |
