', {
+ href: '#',
+ title: help_text,
+ id: 'translate_icon',
+ tabindex: '0'
+ }).html(`
+
+ `)
+ .addClass('header-icon');
+
+ translate_icon.on('click', function (e) {
+ e.preventDefault();
+ $('#translate_popup').toggle();
+ });
+
+ // Detect browser
+ let userAgent = navigator.userAgent.toLowerCase();
+ let defaultTab = 'chrome'; // fallback
+ if (userAgent.includes('edg')) {
+ defaultTab = 'edge';
+ } else if (userAgent.includes('firefox')) {
+ defaultTab = 'firefox';
+ } else if (userAgent.includes('safari') && !userAgent.includes('chrome') && !userAgent.includes('edg')) {
+ defaultTab = 'safari';
+ } else if (userAgent.includes('chrome') && !userAgent.includes('edg')) {
+ defaultTab = 'chrome';
+ }
+
+ let popupContent = `
+ `;
+
+
+
+ //
+ //
+ // - Click here to open this workshop in a new tab.
+ // - In the new tab, click the ☰ menu (three horizontal lines) in the
upper-right corner of Firefox.
+ // - Select “Translate Page” from the dropdown menu.
+ // - Then, choose the language you want to translate the page into.
+ //
+ //
Note: Translation is only available in Firefox version 118 and above.
If you don’t see this option, make sure your browser is up to date.
+ //
', {
+ id: 'translate_popup'
+ }).html(popupContent);
+
+ $('header .hol-Header-wrap').append(translate_icon);
+ $('body').append(popup);
+
+ // After popup is appended, activate the default tab
+ $(document).ready(function () {
+ // Set default active tab
+ $('.translation-tabs .tab').removeClass('active');
+ $('.translation-tabs .tab[data-tab="' + defaultTab + '"]').addClass('active');
+
+ $('.tab-content').hide();
+ $('#' + defaultTab).show();
+ });
+
+ // Tab click behavior
+ $(document).on('click', '.translation-tabs .tab', function () {
+ const selectedTab = $(this).data('tab');
+ $('.translation-tabs .tab').removeClass('active');
+ $(this).addClass('active');
+ $('.tab-content').hide();
+ $('#' + selectedTab).show();
+ });
+ }
+ };
+
+
+
+
+
+ /* Add the Social Media link in the header */
+ // let addSocialMediaLink = function(help, wtitle) {
+ // let url_to_share = (window.location != window.parent.location) ? document.referrer: document.location.href;
+ // console.log(url_to_share);
+ // console.log(window.parent.location);
+ // // Share Workshop on Facebook
+ // let fb = $(document.createElement('a')).attr({
+ // 'href': 'https://facebook.com',
+ // 'title': "Share on Facebook",
+ // 'target': '_blank',
+ // 'id': 'need_help',
+ // 'tabindex': '1'
+ // }).text('F');
+ // $('header .hol-Header-wrap').append(fb);
+
+ // let linkedin = $(document.createElement('a')).attr({
+ // 'href': 'https://linkedin.com',
+ // 'title': "Share on LinkedIn",
+ // 'target': '_blank',
+ // 'id': 'need_help',
+ // 'tabindex': '2'
+ // }).text('I');
+ // $('header .hol-Header-wrap').append(linkedin);
+
+ // let twitter = $(document.createElement('a')).attr({
+ // 'href': 'https://twitter.com',
+ // 'title': "Share on Twitter",
+ // 'target': '_blank',
+ // 'id': 'need_help',
+ // 'tabindex': '2'
+ // }).text('T');
+ // $('header .hol-Header-wrap').append(twitter);
+ // }
+
+ /*
+ * ============================================
+ * SECTION 5: UI COMPONENTS
+ * ============================================
+ */
+
+ /**
+ * Enables collapse/expand feature for the steps
+ * @param {Object} manifestFileContent - The manifest file content
+ * @param {HTMLElement} articleElement - The article element
+ */
+ const setupContentNav = function (manifestFileContent, articleElement) {
+ //adds the expand collapse button before the second h2 element
+ $("#module-content h2:eq(1)")
+ .before('')
+ .prev().on('click', function (e) {
+ ($(this).text() === expandText) ? expandSection($("#module-content h2:not(:eq(0))"), "show") : collapseSection($("#module-content h2:not(:eq(0))"), "hide");
+ changeButtonState(); //enables the expand all parts and collapse all parts button
+
+ });
+ //enables the feature that allows expand collapse of sections
+ $("#module-content h2:not(:eq(0))").click(function (e) {
+ ($(this).hasClass('plus')) ? expandSection(this, "fade") : collapseSection(this, "fade");
+ changeButtonState();
+ });
+ /* for accessibility */
+ $("#module-content h2:not(:eq(0))").attr('tabindex', '0');
+ $('#module-content h2:not(:eq(0))').keydown(function (e) {
+ if (e.keyCode === 13 || e.keyCode === 32) { //means enter and space
+ e.preventDefault();
+ if ($(this).hasClass('plus'))
+ expandSection($(this), "fade");
+ else
+ collapseSection($(this), "fade");
+ }
+ });
+ /* accessibility code ends here */
+
+ // code to hide expand/collapse button
+ let hide_expand_button = selectTutorial(manifestFileContent).hide_button || manifestFileContent.hide_button;
+ if (hide_expand_button == "true" || hide_expand_button == "yes") {
+ $('#btn_toggle').hide();
+ }
+
+ window.scrollTo(0, 0);
+ }
+
+ /**
+ * Expands a collapsible section
+ * @param {HTMLElement|jQuery} anchorElement - The anchor element (h2) to expand
+ * @param {string} effect - Animation effect: "show", "fade", or "none"
+ */
+ const expandSection = function (anchorElement, effect) {
+ if (effect === "show") {
+ $(anchorElement).nextUntil("#module-content h1, #module-content h2").show('fast', function () {
+ $(window).scroll();
+ });
+ } else if (effect === "fade") {
+ $(anchorElement).nextUntil("#module-content h1, #module-content h2").fadeIn('fast', function () {
+ $(window).scroll();
+ });
+ }
+ $(anchorElement).addClass("minus");
+ $(anchorElement).removeClass("plus");
+ }
+
+ /**
+ * Collapses a collapsible section
+ * @param {HTMLElement|jQuery} anchorElement - The anchor element (h2) to collapse
+ * @param {string} effect - Animation effect: "hide", "fade", or "none"
+ */
+ const collapseSection = function (anchorElement, effect) {
+ if (effect === "hide") {
+ $(anchorElement).nextUntil("#module-content h1, #module-content h2").hide('fast', function () {
+ $(window).scroll();
+ });
+ } else if (effect === "fade") {
+ $(anchorElement).nextUntil("#module-content h1, #module-content h2").fadeOut('fast', function () {
+ $(window).scroll();
+ });
+ } else if (effect === "none") {
+ $(anchorElement).nextUntil("#module-content h1, #module-content h2").attr('style', 'display:none;');
+ }
+ $(anchorElement).addClass('plus');
+ $(anchorElement).removeClass('minus');
+ }
+
+ /**
+ * Detects and updates the state of the collapse/expand button
+ */
+ const changeButtonState = function () {
+ if ($("#module-content h2.minus").length <= $("#module-content h2.plus").length) {
+ $('#btn_toggle').text(expandText);
+ $("#btn_toggle").addClass('plus');
+ $("#btn_toggle").removeClass('minus');
+ } else {
+ $('#btn_toggle').text(collapseText);
+ $("#btn_toggle").addClass('minus');
+ $("#btn_toggle").removeClass('plus');
+ }
+ }
+ /* Expands section on page load based on the hash. Expands section when the leftnav item is clicked */
+ let expandSectionBasedOnHash = function (itemName) {
+ let anchorElement = $('div[name="' + itemName + '"]').next(); //anchor element is always the next of div (eg. h2 or h3)
+ if ($(anchorElement).hasClass('hol-ToggleRegions')) //if the next element is the collpase/expand button
+ anchorElement = $(anchorElement).next();
+ try {
+ if (anchorElement[0].tagName !== 'H2') {
+ anchorElement = $(anchorElement).siblings('h2');
+ }
+
+ if ($(anchorElement).hasClass('minus') || $(anchorElement).hasClass('plus'))
+ expandSection(anchorElement, "fade");
+ $(anchorElement)[0].scrollIntoView();
+ window.scrollTo(0, window.scrollY - $('.hol-Header').height());
+ changeButtonState();
+ } catch (e) { console.debug('Section expand error:', e); }
+ }
+
+ // this function higlights the text when the copy button is clicked
+ // let selectElement = function(elements) {
+ // let sel, range, el = elements;
+ // if (window.getSelection && document.createRange) { //Browser compatibility
+ // sel = window.getSelection();
+ // window.setTimeout(function(){
+ // range = document.createRange(); //range object
+ // range.selectNodeContents(el); //sets Range
+ // sel.removeAllRanges(); //remove all ranges from selection
+ // sel.addRange(range); //add Range to a Selection.
+ // }, 1);
+
+ // window.setTimeout(function() {
+ // sel.removeAllRanges();
+ // }, 4000);
+ // }
+ // }
+
+ /**
+ * Highlights code elements when the copy button is clicked
+ * @param {jQuery} elements - The elements to highlight
+ */
+ const selectElement = function (elements) {
+ $(elements).addClass('code-highlight');
+
+ window.setTimeout(function () {
+ $(elements).removeClass('code-highlight');
+ }, 2000);
+ }
+
+ /**
+ * Copies text to clipboard using modern Clipboard API with fallback
+ * @param {string} text - The text to copy to clipboard
+ * @param {jQuery} buttonElement - The button element for animation feedback
+ * @private
+ */
+ const copyToClipboard = function (text, buttonElement) {
+ const animateSuccess = () => {
+ $(buttonElement).parent().animate({
+ opacity: 0.2
+ }).animate({
+ opacity: 1
+ });
+ };
+
+ // Modern Clipboard API (preferred)
+ if (navigator.clipboard && navigator.clipboard.writeText) {
+ navigator.clipboard.writeText(text)
+ .then(animateSuccess)
+ .catch((err) => {
+ console.debug('Clipboard API failed, using fallback:', err);
+ // Fallback to execCommand for older browsers
+ fallbackCopyToClipboard(text, buttonElement, animateSuccess);
+ });
+ } else {
+ // Fallback for browsers without Clipboard API
+ fallbackCopyToClipboard(text, buttonElement, animateSuccess);
+ }
+ };
+
+ /**
+ * Fallback clipboard copy using deprecated execCommand (for older browsers)
+ * @param {string} text - The text to copy
+ * @param {jQuery} buttonElement - The button element
+ * @param {Function} onSuccess - Callback on successful copy
+ * @private
+ */
+ const fallbackCopyToClipboard = function (text, buttonElement, onSuccess) {
+ const dummy = $('