Skip to content

Commit

Permalink
fix: use es5 js for IE webview support (#653)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ShawkyZ
ShawkyZ authored Sep 9, 2024
1 parent 7f09ef6 commit 667b0f9
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 67 deletions.
152 changes: 96 additions & 56 deletions infrastructure/code/template/details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1013,69 +1013,104 @@ <h2 class="example-fixes-header">Fixed Code Examples</h2>
*/

// Constants for class and ID names
const MAIN_TAB_NAV_SELECTOR = '.main-tabs-nav';
const MAIN_TAB_ITEM_SELECTOR = '.main-tabs-nav .tab-item';
const MAIN_TAB_CONTENT_SELECTOR = '.tab-container > .main-tab-content';
var MAIN_TAB_NAV_SELECTOR = '.main-tabs-nav';
var MAIN_TAB_ITEM_SELECTOR = '.main-tabs-nav .tab-item';
var MAIN_TAB_CONTENT_SELECTOR = '.tab-container > .main-tab-content';

const EXAMPLE_COUNTER = 'example-counter';
const EXAMPLE_PREVIOUS = 'previous-example';
const EXAMPLE_NEXT = 'next-example';
const EXAMPLE_REPO_ANCHOR = 'example-repo-anchor';
const ALL_EXAMPLES_DETAIL = '.example-detail';
var EXAMPLE_COUNTER = 'example-counter';
var EXAMPLE_PREVIOUS = 'previous-example';
var EXAMPLE_NEXT = 'next-example';
var EXAMPLE_REPO_ANCHOR = 'example-repo-anchor';
var ALL_EXAMPLES_DETAIL = '.example-detail';

// Utility functions
const toggleIsSelectedClass = (elements, shouldToggle) => {
elements.forEach(el => {
// toggle(token, force) - force is a boolean value that determines whether the class should be added or removed.
el.classList.toggle('is-selected', shouldToggle(el));
});
};
function toggleIsSelectedClass(elements, shouldToggle) {
if(!elements){
return;
}
for (var i = 0; i < elements.length; i++) {
var el = elements[i];
if (shouldToggle(el)) {
if (el.className.indexOf('is-selected') === -1) {
el.className += ' is-selected';
}
} else {
el.className = el.className.replace(/(?:^|\s)is-selected(?!\S)/g, '');
}
}
}

function toggleElement(element, toggle) {
if (!element) {
return;
}

if (toggle === 'show') {
element.classList.remove('hidden');
element.className = element.className.replace(/(?:^|\s)hidden(?!\S)/g, '');
} else if (toggle === 'hide') {
element.classList.add('hidden');
if (element.className.indexOf('hidden') === -1) {
element.className += ' hidden';
}
} else {
console.error('Unexpected toggle value', toggle);
}
}

document.addEventListener('DOMContentLoaded', () => {
const exampleCounter = document.getElementById(EXAMPLE_COUNTER);
const examplePrevious = document.getElementById(EXAMPLE_PREVIOUS);
const exampleNext = document.getElementById(EXAMPLE_NEXT);
const exampleRepoAnchor = document.getElementById(EXAMPLE_REPO_ANCHOR);
const allExamplesDetail = document.querySelectorAll(ALL_EXAMPLES_DETAIL);
const mainTabLinks = document.querySelectorAll(MAIN_TAB_ITEM_SELECTOR);
const mainTabContents = document.querySelectorAll(MAIN_TAB_CONTENT_SELECTOR);
const mainTabNav = document.querySelector(MAIN_TAB_NAV_SELECTOR);
function polyfillClosest() {
if (!Element.prototype.closest) {
Element.prototype.closest = function (s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i, el = this;
do {
i = matches.length;
while (--i >= 0 && matches.item(i) !== el) {};
} while ((i < 0) && (el = el.parentElement));
return el;
};
}
}

polyfillClosest();

document.addEventListener('DOMContentLoaded', function () {
var exampleCounter = document.getElementById(EXAMPLE_COUNTER);
var examplePrevious = document.getElementById(EXAMPLE_PREVIOUS);
var exampleNext = document.getElementById(EXAMPLE_NEXT);
var exampleRepoAnchor = document.getElementById(EXAMPLE_REPO_ANCHOR);
var allExamplesDetail = document.querySelectorAll(ALL_EXAMPLES_DETAIL);
var mainTabLinks = document.querySelectorAll(MAIN_TAB_ITEM_SELECTOR);
var mainTabContents = document.querySelectorAll(MAIN_TAB_CONTENT_SELECTOR);
var mainTabNav = document.querySelector(MAIN_TAB_NAV_SELECTOR);

let exampleCount = 0;
var exampleCount = 0;

/** @type {ExampleCommitFix[]} */
const exampleCommitFixes = JSON.parse("{{.CommitFixes}}" || '[]');
var exampleCommitFixes = JSON.parse("{{.CommitFixes}}" || '[]');

// Functions dependent on the DOM
function showCurrentExample() {
allExamplesDetail.forEach((example, idx) => {
if (idx === exampleCount) {
example.classList.remove('hidden');
if(!allExamplesDetail){
return;
}
for (var i = 0; i < allExamplesDetail.length; i++) {
var example = allExamplesDetail[i];
if (i === exampleCount) {
example.className = example.className.replace(/(?:^|\s)hidden(?!\S)/g, '');
} else {
example.classList.add('hidden');
if (example.className.indexOf('hidden') === -1) {
example.className += ' hidden';
}
}
});

exampleCounter.textContent = exampleCount + 1;
const repoName = exampleCommitFixes[exampleCount].RepoName;
const repoLink = exampleCommitFixes[exampleCount].RepoLink;
}
if(exampleCounter){
exampleCounter.textContent = exampleCount + 1;
}
var repoName = exampleCommitFixes[exampleCount].RepoName;
var repoLink = exampleCommitFixes[exampleCount].RepoLink;

exampleRepoAnchor.textContent = repoName;
exampleRepoAnchor.href = repoLink;
if(exampleRepoAnchor){
exampleRepoAnchor.textContent = repoName;
exampleRepoAnchor.href = repoLink;
}
}

function previousExample() {
Expand All @@ -1091,24 +1126,29 @@ <h2 class="example-fixes-header">Fixed Code Examples</h2>
showCurrentExample();
}
}
if(mainTabNav) {
mainTabNav.onclick = function (event) {
var clickedTab = event.target.closest('.tab-item');
if (!clickedTab) return;

var selectedTab = clickedTab.getAttribute('data-tab');

// Toggle selected tab and content
toggleIsSelectedClass(mainTabLinks, function (tab) {
return tab === clickedTab;
});
toggleIsSelectedClass(mainTabContents, function (content) {
return content.getAttribute('data-content') === selectedTab;
});
};
}
if (examplePrevious){
examplePrevious.onclick = previousExample;
}
if (exampleNext) {
exampleNext.onclick = nextExample;
}

const onMainTabClicked = event => {
const clickedTab = event.target.closest('.tab-item');
if (!clickedTab) return;

const selectedTab = clickedTab.getAttribute('data-tab');

// Toggle selected tab and content
toggleIsSelectedClass(mainTabLinks, tab => tab === clickedTab);
toggleIsSelectedClass(mainTabContents, content => content.getAttribute('data-content') === selectedTab);
};

// Event listeners
mainTabNav.addEventListener('click', onMainTabClicked);
examplePrevious.addEventListener('click', previousExample);
exampleNext.addEventListener('click', nextExample);

// Initial function calls
showCurrentExample();
});
</script>
Expand Down
26 changes: 15 additions & 11 deletions infrastructure/oss/template/details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -285,21 +285,25 @@ <h2>Policy Applied</h2>

</div>
<script nonce="${nonce}">
if (document.getElementById("learn--link")) {
document.getElementById("learn").className = "learn show"
if (document.getElementById("learn--link") && document.getElementById("learn")) {
document.getElementById("learn").className = "learn show";
}
if (document.getElementById("more-detailed-paths--link")) {
document.getElementById("more-detailed-paths--link").addEventListener('click', () => {
const paths = document.getElementsByClassName("path");
for (const path of paths) {
path.classList.remove("hidden");
document.getElementById("more-detailed-paths--link").onclick = function() {
var paths = document.getElementsByClassName("path");
for (var i = 0; i < paths.length; i++) {
var path = paths[i];
path.className = path.className.replace(/(?:^|\s)hidden(?!\S)/g, '');
}
const remediations = document.getElementsByClassName("remediation")
for (const remediation of remediations) {
remediation.classList.remove("hidden");
var remediations = document.getElementsByClassName("remediation");
for (var i = 0; i < remediations.length; i++) {
var remediation = remediations[i];
remediation.className = remediation.className.replace(/(?:^|\s)hidden(?!\S)/g, '');
}
document.getElementById("more-detailed-paths--link").classList.add("hidden");
})
if(document.getElementById("more-detailed-paths--link")) {
document.getElementById("more-detailed-paths--link").className += " hidden";
}
};
}
</script>
</body>
Expand Down

0 comments on commit 667b0f9

Please sign in to comment.