-
+
-
-
- - -
-
+
@@ -168,6 +173,7 @@ + \ No newline at end of file diff --git a/src/assets/pages/scripts/index_app.js b/src/assets/pages/scripts/index_app.js index 2060104..087d7f6 100644 --- a/src/assets/pages/scripts/index_app.js +++ b/src/assets/pages/scripts/index_app.js @@ -2,7 +2,7 @@ const path = require('path'); const factory = require(path.join(appDir, 'viewFactory')) function loadDocuments() { - factory.buildWebCardsFromConfig("resources-landing-page.json"); + factory.buildUiFromConfig("resources-landing-page.json"); } loadDocuments(); \ No newline at end of file diff --git a/src/assets/pages/styles/theme-base.scss b/src/assets/pages/styles/theme-base.scss index 0eefc73..613e07c 100644 --- a/src/assets/pages/styles/theme-base.scss +++ b/src/assets/pages/styles/theme-base.scss @@ -102,27 +102,35 @@ body { position: relative; display: flex; margin: auto; - max-width: 1100px + max-width: 1100px; } .sb-example-1 .searchTerm { width: 100%; border: 1px solid; - border-color: map-get($theme-colors, boxborder2); + border-color: map-get($theme-colors, boxborder3); border-right: none; padding-left: 15px; padding-right: 15px; border-radius: 25px 0 0 25px; stroke: map-get($theme-colors, searchicon); color: map-get($theme-colors, searchhint); - background-color: map-get($theme-colors, info); + background-color: map-get($theme-colors, searchfill); + box-shadow: none; + outline: none; +} + +.sb-example-1 .searchTerm:hover { + stroke: map-get($theme-colors, searchiconhover); + background-color: map-get($theme-colors, searchfill); box-shadow: none; + color: map-get($theme-colors, searchfont) !important; outline: none; } .sb-example-1 .searchTerm:focus { - stroke: map-get($theme-colors, searchicon); - background-color: map-get($theme-colors, info); + stroke: map-get($theme-colors, searchiconhover); + background-color: map-get($theme-colors, searchfill); box-shadow: none; color: map-get($theme-colors, searchfont) !important; outline: none; @@ -143,14 +151,29 @@ body { outline: none; } +.sb-example-1 .searchbutton:hover { + width: 40px; + height: 50px; + border: 1px solid; + border-color: map-get($theme-colors, boxborder2); + background-color: map-get($theme-colors, searchbuttonfill); + text-align: center; + fill: map-get($theme-colors, searchiconhover) !important; + border-radius: 0 25px 25px 0; + cursor: pointer; + font-weight: normal; + box-shadow: none; + outline: none; +} + .sb-example-1 .searchbutton:focus { width: 40px; height: 50px; border: 1px solid; border-color: map-get($theme-colors, boxborder2); - background-color: map-get($theme-colors, searchbuttonfillfocus); + background-color: map-get($theme-colors, searchbuttonfill); text-align: center; - fill: map-get($theme-colors, searchiconfocus); + fill: map-get($theme-colors, searchiconfocus) !important; border-radius: 0 25px 25px 0; cursor: pointer; font-weight: normal; @@ -193,7 +216,7 @@ body { .feedbackdropdown .dropdown-menu { background-color: map-get($theme-colors, menudropdownfill); font-size: 15px; - margin-bottom: 9 px; + margin-bottom: 9px; color: map-get($theme-colors, activetextaccordion); box-shadow: -1 1 3 1 #cccccc; } @@ -286,4 +309,9 @@ hr { margin-bottom: 1rem; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); +} + +.highlight { + color: map-get($theme-colors, highlight-text-color); + background-color: map-get($theme-colors, highlight-background); } \ No newline at end of file diff --git a/src/assets/pages/styles/theme-dark.scss b/src/assets/pages/styles/theme-dark.scss index 69fe2c6..eb57e7e 100644 --- a/src/assets/pages/styles/theme-dark.scss +++ b/src/assets/pages/styles/theme-dark.scss @@ -11,15 +11,19 @@ $theme-colors: ( "inactivecard": #333337, "activecard": #4f4f56, "boxborder": #272727, - "boxborder2": #2f2f2f, + "boxborder2": #3c3c42, + "boxborder3": #323237, "activecardfont":#e1e4e8, "searchhint": #6b6866, "searchfont": #9f9c9a, + "searchfill": #323237, "sidebarfill": #202023, - "searchbuttonfill": #39393f, - "searchbuttonfillfocus": #3e3e45, - "searchicon": #737373, - "searchiconfocus": #878787, + "searchbuttonfill": #585861, + "searchbuttonfillhover": #808080, + "searchbuttonfillfocus": #585861, + "searchicon": #808080, + "searchiconhover": #c5c5c5, + "searchiconfocus": #c5c5c5, "sidebartext": #7d7d7d, "sidebarbg": #29292d, "webcardimagebackground": #707070, @@ -51,7 +55,9 @@ $theme-colors: ( "footerbackhover": rgba(157, 157, 157, .8), "helpmenudropdowntext": #9d9d9d, "helpmenudropdowntexthover": #a8a8a8, - "helpmenudropdownbghover": #5c5c66, + "helpmenudropdownbghover": #5c5c66, + "highlight-text-color": #000, + "highlight-background": #ece665, ); .theme-button{ diff --git a/src/assets/pages/styles/theme-light.scss b/src/assets/pages/styles/theme-light.scss index bc54379..41c4aa7 100644 --- a/src/assets/pages/styles/theme-light.scss +++ b/src/assets/pages/styles/theme-light.scss @@ -11,17 +11,21 @@ $theme-colors: ( "inactivecard": #ffffff, "activecard": #13a04a, "boxborder": #c0c2c6, - "boxborder2": #c0c2c6, + "boxborder2": #ececec, + "boxborder3": #ebebeb, "activecardfont": #e1e4e8, "searchhint": #c0c2c6, "searchfont": #2c2c2c, "sidebarfill": #efefef, "sidebartext": #3f4959, "sidebarbg": #e5e5e5, - "searchbuttonfill": #f6f6f6, + "searchfill": #f0f0f2, + "searchbuttonfill": #ffffff, + "searchbuttonfillhover": #f6f6f6, "searchbuttonfillfocus": #f1f1f1, "searchicon": #3f4959, - "searchiconfocus": #38414f, + "searchiconhover": #000, + "searchiconfocus": #000, "webcardimagebackground": #eeeeee, "webcardimagebackgroundhover": #f0f0f0, "headertextcolor": #080404, @@ -53,6 +57,8 @@ $theme-colors: ( "helpmenudropdowntext": #3f4a5a, "helpmenudropdowntexthover": #080404, "helpmenudropdownbghover": #f2f2f2, + "highlight-text-color": #000, + "highlight-background": #ece665, ); .theme-button{ diff --git a/src/assets/resources/human-resources/2-Paycor_Direct_Deposit_Worksheet.pdf.json b/src/assets/resources/human-resources/2-Paycor_Direct_Deposit_Worksheet.pdf.json index 85fe56b..5a313b7 100644 --- a/src/assets/resources/human-resources/2-Paycor_Direct_Deposit_Worksheet.pdf.json +++ b/src/assets/resources/human-resources/2-Paycor_Direct_Deposit_Worksheet.pdf.json @@ -1,5 +1,6 @@ { "title": "Direct Deposit", "description": "Would you like have your paychecks deposited into your bank account? Fill out this form and submit it to HR.", - "altText": "PDF icon" + "altText": "PDF icon", + "keywords": "human resources" } \ No newline at end of file diff --git a/src/assets/resources/human-resources/Employment-Application.docx.json b/src/assets/resources/human-resources/Employment-Application.docx.json index 548163c..088baa6 100644 --- a/src/assets/resources/human-resources/Employment-Application.docx.json +++ b/src/assets/resources/human-resources/Employment-Application.docx.json @@ -2,5 +2,6 @@ "title": "Employment Application", "description": "Would you or someone you know like to apply for a position? JDSfaulkner is always accepting applications.", - "altText": "Document icon" + "altText": "Document icon", + "keywords": "human resources, career, job" } \ No newline at end of file diff --git a/src/assets/resources/human-resources/ExpenseReportJDSfaulknerFILLIN.pdf.json b/src/assets/resources/human-resources/ExpenseReportJDSfaulknerFILLIN.pdf.json index 42077c5..d5b1550 100644 --- a/src/assets/resources/human-resources/ExpenseReportJDSfaulknerFILLIN.pdf.json +++ b/src/assets/resources/human-resources/ExpenseReportJDSfaulknerFILLIN.pdf.json @@ -1,5 +1,6 @@ { "title": "Expense Report", "description": "Request reimbursement for preapproved, company-related expenses. Send this form and receipts to Accounts Payable.", - "altText": "PDF icon" + "altText": "PDF icon", + "keywords": "human resources, purchase" } \ No newline at end of file diff --git a/src/assets/resources/human-resources/JDSfaulknerDraftingQuiz_11-16-20a.docx.json b/src/assets/resources/human-resources/JDSfaulknerDraftingQuiz_11-16-20a.docx.json index de3a55b..d1954bc 100644 --- a/src/assets/resources/human-resources/JDSfaulknerDraftingQuiz_11-16-20a.docx.json +++ b/src/assets/resources/human-resources/JDSfaulknerDraftingQuiz_11-16-20a.docx.json @@ -1,5 +1,6 @@ { "title": "Drafting Quiz", "description": "Click here to access a prequalifying quiz that is a requirement for those applying for drafting positions.", - "altText": "Document icon" + "altText": "Document icon", + "keywords": "human resources, plans, design, job, career, interview" } \ No newline at end of file diff --git a/src/assets/resources/human-resources/JDSfaulknerEmpHandbook-v8.0_WithAddendums.pdf.json b/src/assets/resources/human-resources/JDSfaulknerEmpHandbook-v8.0_WithAddendums.pdf.json index 3fec641..14cac23 100644 --- a/src/assets/resources/human-resources/JDSfaulknerEmpHandbook-v8.0_WithAddendums.pdf.json +++ b/src/assets/resources/human-resources/JDSfaulknerEmpHandbook-v8.0_WithAddendums.pdf.json @@ -1,5 +1,6 @@ { "title": "Employee Handbook", "description": "Read the handbook to learn about the company’s policies related to employment, including pay and benefits.", - "altText": "PDF icon" + "altText": "PDF icon", + "keywords": "human resources" } \ No newline at end of file diff --git a/src/assets/resources/human-resources/Notice-and-Agreement.pdf.json b/src/assets/resources/human-resources/Notice-and-Agreement.pdf.json index 6e3cdf6..8d929e9 100644 --- a/src/assets/resources/human-resources/Notice-and-Agreement.pdf.json +++ b/src/assets/resources/human-resources/Notice-and-Agreement.pdf.json @@ -1,5 +1,6 @@ { "title": "SRA", "description": "A salary reduction agreement helps you to establish or change the part of your compensation that goes to an IRA.", - "altText": "PDF icon" + "altText": "PDF icon", + "keywords": "human resources, savings, retirement" } \ No newline at end of file diff --git a/src/assets/resources/marketing/ComingSoon-Brochure.pdf.json b/src/assets/resources/marketing/ComingSoon-Brochure.pdf.json index 83c276f..6a32cbb 100644 --- a/src/assets/resources/marketing/ComingSoon-Brochure.pdf.json +++ b/src/assets/resources/marketing/ComingSoon-Brochure.pdf.json @@ -1,5 +1,6 @@ { "title": "JDSfaulkner Brochure", "description": "Share the company's brochure with existing and potential clients to showcase the value JDSfaulkner has to offer.", - "altText": "PDF icon" + "altText": "PDF icon", + "keywords": "marketing, publications" } \ No newline at end of file diff --git a/src/assets/resources/marketing/ComingSoon-SOQ.pdf.json b/src/assets/resources/marketing/ComingSoon-SOQ.pdf.json index 1861075..5ec6021 100644 --- a/src/assets/resources/marketing/ComingSoon-SOQ.pdf.json +++ b/src/assets/resources/marketing/ComingSoon-SOQ.pdf.json @@ -1,5 +1,6 @@ { "title": "JDSfaulkner SOQ", "description": "SOQs present the experience and capabilities that qualify JDSfaulkner to win contracts or new clients.", - "altText": "PDF icon" + "altText": "PDF icon", + "keywords": "marketing, statement, qualifications, publications" } \ No newline at end of file diff --git a/src/assets/resources/marketing/JDSfaulkner-Letterhead.docx.json b/src/assets/resources/marketing/JDSfaulkner-Letterhead.docx.json index 87a65c3..dfa4e40 100644 --- a/src/assets/resources/marketing/JDSfaulkner-Letterhead.docx.json +++ b/src/assets/resources/marketing/JDSfaulkner-Letterhead.docx.json @@ -1,5 +1,6 @@ { "title": "JDSfaulkner Letterhead", - "description": "Represent the company in a professional and consistent manner by writing your letters using this official letterhead template.", - "altText": "Document icon" + "description": "Represent the company in a professional and consistent manner using the official letterhead for correspondence.", + "altText": "Document icon", + "keywords": "marketing, template" } \ No newline at end of file diff --git a/src/assets/resources/marketing/JDSfaulkner_Logo.eps.json b/src/assets/resources/marketing/JDSfaulkner_Logo.eps.json index 0f186a3..882660a 100644 --- a/src/assets/resources/marketing/JDSfaulkner_Logo.eps.json +++ b/src/assets/resources/marketing/JDSfaulkner_Logo.eps.json @@ -1,5 +1,6 @@ { "title": "JDSfaulkner Logo - EPS", - "description": "Do you need to present the logo in your work? Here's an eps format to use in collateral and merchandise.", - "altText": "Image icon" + "description": "Do you need to present the logo in your work? Here's an EPS format to use in collateral and merchandise.", + "altText": "Image icon", + "keywords": "marketing" } \ No newline at end of file diff --git a/src/assets/resources/marketing/JDSfaulkner_Logo.png.json b/src/assets/resources/marketing/JDSfaulkner_Logo.png.json index f8a2a66..cb07253 100644 --- a/src/assets/resources/marketing/JDSfaulkner_Logo.png.json +++ b/src/assets/resources/marketing/JDSfaulkner_Logo.png.json @@ -1,5 +1,6 @@ { "title": "JDSfaulkner Logo - PNG", - "description": "Do you need to present the logo in your work? Here's a png format to use in collateral and merchandise.", - "altText": "Image icon" + "description": "Do you need to present the logo in your work? Here's a PNG format to use in collateral and merchandise.", + "altText": "Image icon", + "keywords": "marketing" } \ No newline at end of file diff --git a/src/assets/views/web-card.mustache b/src/assets/views/web-card.mustache index 11ad99f..e91c62a 100644 --- a/src/assets/views/web-card.mustache +++ b/src/assets/views/web-card.mustache @@ -2,8 +2,8 @@
-
{{title}}
-

{{description}}

+
{{{title}}}
+

{{{description}}}

{{{altText}}} { + getCards(): Map { return DocumentDirectory.walkCards(this.root); } - private static walkCards(d: DirectoryNode): Map { - let cardsByCategory = new Map(); - for (let i = 0, l = d.children.length; i < l; i++) { - let child = d.children[i]; + private static walkCards(d: DirectoryNode): Map { + let cardsByCategory = new Map(); + for (let child of d.children) { if (child instanceof DirectoryNode) { let dir = child as DirectoryNode; if (dir.containsDirectory()) { let childDirectories = dir.getDirectories(); - for (let j = 0, k = childDirectories.length; j < k; j++) { - let dir = childDirectories[j]; + for (let dir of childDirectories) { let subCards = DocumentDirectory.walkCards(dir); this.mergeMaps(cardsByCategory, subCards); } } let sCards = dir.getDocuments(); let category = dir.getCategory(); - for (let sCard in sCards) { - let scrd = sCards[sCard]; + for (let sCard of sCards) { let cards = cardsByCategory.get(category); if (cards === undefined || cards === null) { cards = []; } - cards.push(scrd.toCard()); + cards.push(sCard.toCard()); cardsByCategory.set(category, cards); } } else { @@ -151,10 +148,9 @@ export class DocumentDirectory { return cardsByCategory; } - private static mergeMaps(a: Map, b: Map) { + private static mergeMaps(a: Map, b: Map) { let keys = Object.keys(b); - for (let z in keys) { - let key = keys[z]; + for (let key of keys) { let sa = a.get(key) if (sa === undefined || sa === null) { sa = []; @@ -180,7 +176,7 @@ export class FileNode { this.parent = parent; } - static loadAltProps(path: String): object { + static loadAltProps(path: string): object { let props = {}; let jsonPath = path + ".json" if (fs.existsSync(jsonPath)) { @@ -213,19 +209,19 @@ export class FileNode { "imagePath": imageName, "urlText": this.filePath, "altText": "", - "fileCard": true + "fileCard": true, + "open": this.open } let altKeys = Object.keys(altProps); - for (let kidx in altKeys) { - let key = altKeys[kidx]; + for (let key of altKeys) { cardObj[key] = altProps[key] } return cardObj } - getTitle(): String { + getTitle(): string { let name = path.basename(this.filePath); let ext = path.extname(name); let cName = name.replace(ext, ""); @@ -251,9 +247,9 @@ export class DirectoryNode extends FileNode { let stats = fs.lstatSync(filePath); if (stats.isDirectory()) { let contents = fs.readdirSync(filePath); - for (let i = 0, l = contents.length; i < l; i++) { - if (path.extname(contents[i]) === ".json") continue; - let childPath = path.join(filePath, contents[i]); + for (let fileName of contents) { + if (path.extname(fileName) === ".json") continue; + let childPath = path.join(filePath, fileName); let childStats = fs.lstatSync(childPath); if (childStats.isDirectory()) { this.children.push(new DirectoryNode(childPath, this)); @@ -282,14 +278,13 @@ export class DirectoryNode extends FileNode { } containsDirectory(): Boolean { - for (let i = 0, l = this.children.length; i < l; i++) { - let child = this.children[i]; + for (let child of this.children) { if (child instanceof DirectoryNode) return true; } return false } - getCategory(): String { + getCategory(): string { let rawName = path.basename(this.filePath); let parts = rawName.split("-"); for (let i = 0, l = parts.length; i < l; i++) { diff --git a/src/ts_source/search.ts b/src/ts_source/search.ts new file mode 100644 index 0000000..d651f05 --- /dev/null +++ b/src/ts_source/search.ts @@ -0,0 +1,160 @@ +import {Configurator, DocumentDirectory} from "./fileutils"; +import * as path from "path"; +import {buildCardsFromConfig, buildUiFromConfig} from "./viewFactory"; + +function register() { + let searchBar = $("#searchfield"); + let searchButton = $("#searchbutton"); + searchBar.on("keyup", (evt) => { + if ("Enter" === evt.code) { + let term = searchBar.val().toString(); + if (!term || 0 === term.length) { + reset() + } else { + search(term); + } + + } else { + let term = searchBar.val().toString(); + if (!term || 0 === term.length) { + reset() + } + } + }); + + + searchButton.on("click", () => { + let term = searchBar.val().toString(); + if (!term || 0 === term.length) { + reset() + } else { + search(term); + } + }) +} + +function reset() { + buildUiFromConfig("resources-landing-page.json"); +} + +function search(term: string) { + let webCards = getWebCardsWithSearchTerm(term); + let fileCards = getFileCardsWithSearchTerm(term); + + copyMissingKeys(webCards, fileCards); + + buildCardsFromConfig(webCards, fileCards); + expandAllContainers(); +} + +function copyMissingKeys(webCards: object, fileCards: Map) { + let elementConfig = Configurator.loadAppConfig("resources-landing-page.json"); + let containerKeys = Object.keys(elementConfig); + for (let containerKey of containerKeys) { + let container = webCards[containerKey]; + let elementContainer = elementConfig[containerKey]; + for (let [key, value] of fileCards) { + if (!container[key]) { + let original = elementContainer[key]; + original["cards"] = []; + container[key] = original; + } + } + } +} + +function getFileCardsWithSearchTerm(term): Map { + let map = new Map() + let directoryPath = path.join(__dirname, "../assets/resources"); + let fileCards = new DocumentDirectory(directoryPath).getCards(); + for (let [key, value] of fileCards) { + for (let card of value) { + if (cardContainsTerm(term, card)) { + addToFileMap(map, key, highlightCardTerm(term, card)); + } + } + } + return map; +} + +function getWebCardsWithSearchTerm(term): object { + let map = {}; + let elementConfig = Configurator.loadAppConfig("resources-landing-page.json"); + let containerKeys = Object.keys(elementConfig); + for (let i = 0, l = containerKeys.length; i < l; i++) { + let containerKey = containerKeys[i]; + map[containerKey] = {}; + let container = elementConfig[containerKey]; + let categoryKeys = Object.keys(container); + for (let categoryIdx in categoryKeys) { + let categoryKey = categoryKeys[categoryIdx] + let category = container[categoryKey]; + let cards = category.cards; + for (let j = 0, k = cards.length; j < k; j++) { + let card = cards[j]; + if (cardContainsTerm(term, card)) { + addToWebMap(map, containerKey, categoryKey, category["description"], highlightCardTerm(term, card)); + } + } + } + } + return map; +} + +function addToWebMap(map: object, containerKey: string, categoryKey: string, categoryDescription: string, card: object) { + let container = map[containerKey]; + if (!container) { + container = {}; + } + let category = container[categoryKey]; + if (!category) { + category = {"description": categoryDescription, "cards": []} + } + category["cards"].push(card); + container[categoryKey] = category; + map[containerKey] = container; +} + +function addToFileMap(map: Map, categoryKey: string, card) { + if (!map.get(categoryKey)) { + map.set(categoryKey, []); + } + let cards = map.get(categoryKey) as Array; + cards.push(card); + map.set(categoryKey, cards); +} + +function cardContainsTerm(term: string, card: object): boolean { + let titleContains = card["title"].toLowerCase().includes(term.toLowerCase()); + let descriptionContains = card["description"].toLowerCase().includes(term.toLowerCase()); + + let keywordContains = false; + if (card["keywords"]) { + keywordContains = card["keywords"].toLowerCase().includes(term.toLowerCase()); + } + + //todo: add keywords + return titleContains || descriptionContains || keywordContains; +} + +function highlightCardTerm(term: string, card: object): object { + let regexTerm = escapeRegExp(term); + let pattern = new RegExp(regexTerm, 'ig'); + card["title"] = card["title"].replace(pattern, `$&`); + card["description"] = card["description"].replace(pattern, `$&`); + return card; +} + +function escapeRegExp(term: string): string { + return term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string +} + +function expandAllContainers() { + let containers = $('[id$="collapser"]') + for (let container of containers) { + container.click() + } + +} + +register() \ No newline at end of file diff --git a/src/ts_source/viewFactory.ts b/src/ts_source/viewFactory.ts index 36dfb74..f89ef73 100644 --- a/src/ts_source/viewFactory.ts +++ b/src/ts_source/viewFactory.ts @@ -22,7 +22,6 @@ export class CardModel { } export function buildFileCard(elem: JQuery, obj, append: boolean = false, $: any = require('jquery')) { - console.log(obj); let model = new CardModel( obj["title"], obj["description"], @@ -40,30 +39,32 @@ export function buildFileCard(elem: JQuery, obj, append: boolean = if (model["show"] !== undefined) { $(`#${id}`).on("click", () => { - console.log("showing") shell.showItemInFolder(model.resourcePath) }); } else { $(`#${id}`).on("click", () => { - console.log("opening") shell.openItem(model.resourcePath) }); } }); } -export function buildWebCardsFromConfig(configName: string) { +export function buildUiFromConfig(configName: string){ let elementConfig = Configurator.loadAppConfig(configName); - let $ = require('jquery') - let containers = Object.keys(elementConfig); let directoryPath = path.join(__dirname, "../assets/resources"); let fileCards = new DocumentDirectory(directoryPath).getCards(); - for (let i = 0, l = containers.length; i < l; i++) { + buildCardsFromConfig(elementConfig, fileCards); +} +export function buildCardsFromConfig(elementConfig: object, fileCards: Map) { + let $ = require('jquery') + let containers = Object.keys(elementConfig); + + for (let i = 0, l = containers.length; i < l; i++) { let containerName = containers[i]; let containerObject = elementConfig[containerName]; let containerElem = $(`#${containerName}`); - + containerElem.html("") let containerCategories = Object.keys(containerObject); for (let j = 0, m = containerCategories.length; j < m; j++) { @@ -89,25 +90,7 @@ export function buildWebCardsFromConfig(configName: string) { let view = $(`#${categoryKey}-container`); let collapseButton = $(`#${categoryKey}-collapser`); - collapseButton.on("click", () => { - let imageMatchRegex = /\.\.\/images\/chevron-(\w+)-(\w+)\.svg$/ig; - let collapsable = $(`#${categoryKey}-container`); - let collapseButton = $(`#${categoryKey}-collapser`); - let collapseImg = $(`#${categoryKey}-img`); - if ("none" === collapsable.css('display')) { - collapsable.css("display", ""); - collapseButton.addClass("active"); - } else { - collapsable.css("display", "none"); - collapseButton.removeClass("active"); - } - let srcImg = collapseImg.attr("src"); - let groups = imageMatchRegex.exec(srcImg); - let direction = groups[1]; - let theme = groups[2]; - let newDirection = direction === "up"? "down": "up"; - collapseImg.attr("src", `../images/chevron-${newDirection}-${theme}.svg`); - }); + setCollapseOnElement(collapseButton, categoryKey); for (let j in files) { let file = files[j]; @@ -118,13 +101,32 @@ export function buildWebCardsFromConfig(configName: string) { let content = contentList[j]; buildWebCard(view, content, true, $); } - - } - } } +function setCollapseOnElement(collapseButton: JQuery, categoryKey: string){ + collapseButton.on("click", () => { + let imageMatchRegex = /\.\.\/images\/chevron-(\w+)-(\w+)\.svg$/ig; + let collapsable = $(`#${categoryKey}-container`); + let collapseButton = $(`#${categoryKey}-collapser`); + let collapseImg = $(`#${categoryKey}-img`); + if ("none" === collapsable.css('display')) { + collapsable.css("display", ""); + collapseButton.addClass("active"); + } else { + collapsable.css("display", "none"); + collapseButton.removeClass("active"); + } + let srcImg = collapseImg.attr("src"); + let groups = imageMatchRegex.exec(srcImg); + let direction = groups[1]; + let theme = groups[2]; + let newDirection = direction === "up"? "down": "up"; + collapseImg.attr("src", `../images/chevron-${newDirection}-${theme}.svg`); + }); +} + export function buildWebCard(elem: JQuery, obj, append: boolean = false, $: any = require('jquery')) { let model = new CardModel( obj["title"],