var script = document.createElement('script'); script.src = 'https://code.jquery.com/jquery-3.6.4.min.js'; // Check https://jquery.com/ for the current version document.getElementsByTagName('head')[0].appendChild(script); var waitForJQuery = setInterval(function () { console.log("waiting for jQuery"); if (typeof jQuery != 'undefined') { console.log("jQuery loaded"); (function($) { console.log("function initiated"); $( document ).ready(function() { console.log("window loaded"); var wdMenu = $('h3:contains("Workspace Designer")').next() wdMenu.attr('menu', 'workspace-designer') var ul = $('') var toggleChevron = $('') $('ul[menu="workspace-designer"]').on('click', '.toggleSubMenu', function(event) { event.preventDefault(); event.stopPropagation(); $(event.target).closest('li').toggleClass('subnav-expanded') }) $('ul[menu="workspace-designer"]').on('click', function(event) { $(event.target).parents('li').siblings().map((i, val) => { $(val).removeClass('subnav-expanded') $(val).find('li').removeClass('subnav-expanded') }); var items = $(event.target).parents('li') items.map((i, val) => { var hasSubMenu = $(items[i]).find('ul') if (hasSubMenu.length) { $(items[i]).addClass('subnav-expanded') } }) }) var subMenus = $(); var parentMenus = $(); wdMenu.find('a').each((i, el) => { var item = $(el).attr('href').substring($(el).attr('href').lastIndexOf('/') + 1) $(el).parent().attr('item', item) if(item === 'render-view') { parentMenus = parentMenus.add($(el)) } if (item === 'card-preview' || item === 'the-code-editor' || item === 'common-use-cases') { subMenus = subMenus.add($(el).parent()) } }) var intMenu = $('h3:contains("Talkdesk Integrations")').next() intMenu.attr('menu', 'integrations') var ul2 = $('') var ul3 = $('') var toggleChevronIntConn = $('') var toggleChevronIntBlue = $('') $('ul[menu="integrations"]').on('click', '.toggleSubMenu', function(event) { event.preventDefault(); event.stopPropagation(); $(event.target).closest('li').toggleClass('subnav-expanded') }) $('ul[menu="integrations"]').on('click', function(event) { $(event.target).parents('li').siblings().map((i, val) => { $(val).removeClass('subnav-expanded') $(val).find('li').removeClass('subnav-expanded') }); var items = $(event.target).parents('li') items.map((i, val) => { var hasSubMenu = $(items[i]).find('ul') if (hasSubMenu.length) { $(items[i]).addClass('subnav-expanded') } }) }) var subMenusIntConnections = $(); var parentMenusIntConnections = $(); intMenu.find('a').each((i, el) => { var itemIntConn = $(el).attr('href').substring($(el).attr('href').lastIndexOf('/') + 1) $(el).parent().attr('item', itemIntConn) if(itemIntConn === 'connections-flows') { parentMenusIntConnections = parentMenusIntConnections.add($(el)) } if (itemIntConn === 'createedit-a-flow' || itemIntConn === 'build-a-connections-flow' || itemIntConn === 'publish-a-connections-flow' || itemIntConn === 'run-a-flow-manually' || itemIntConn === 'connections-flows-components' || itemIntConn === 'connections-flows-triggers' || itemIntConn === 'connections-flows-status') { subMenusIntConnections = subMenusIntConnections.add($(el).parent()) } }) var subMenusIntBlueprints = $(); var parentMenusIntBlueprints = $(); intMenu.find('a').each((i, el) => { var itemIntBlue = $(el).attr('href').substring($(el).attr('href').lastIndexOf('/') + 1) $(el).parent().attr('item', itemIntBlue) if(itemIntBlue === 'sync-talkdesk-agents-with-external-systems') { parentMenusIntBlueprints = parentMenusIntBlueprints.add($(el)) } if (itemIntBlue === 'clock-punch-mock-connection') { subMenusIntBlueprints = subMenusIntBlueprints.add($(el).parent()) } }) setTimeout(() => { // THIS IS NEEDED BECAUSE README RE-RENDERS THE MENU AND DELETES THE ADDED ELEMENTS // SO WE NEED TO WAIT FOR THE RE-RENDER TO MANIPULATE THE MENU console.log("Applying changes to menu") subMenus.attr('submenu', 'true') ul.append(subMenus) parentMenus.attr('parentmenu', 'true') parentMenus.children().first().prepend(toggleChevron) parentMenus.parent().append(ul) parentMenus.parent().siblings().find('a').attr('submenu', 'true') $('[menu="workspace-designer"] [aria-current="page"]').parents('ul').parent('li').addClass('subnav-expanded') subMenusIntConnections.attr('submenuintconn', 'true') ul2.append(subMenusIntConnections) parentMenusIntConnections.attr('parentmenuintconn', 'true') parentMenusIntConnections.children().first().prepend(toggleChevronIntConn) parentMenusIntConnections.parent().append(ul2) parentMenusIntConnections.parent().siblings().find('a').attr('submenuintconn', 'true') $('[menu="integrations"] [aria-current="page"]').parents('ul').parent('li').addClass('subnav-expanded') console.log("submenus:", subMenusIntConnections) console.log("parentmenus:", parentMenusIntConnections) subMenusIntBlueprints.attr('submenuintblue', 'true') ul3.append(subMenusIntBlueprints) parentMenusIntBlueprints.attr('parentmenuintblue', 'true') parentMenusIntBlueprints.children().first().prepend(toggleChevronIntBlue) parentMenusIntBlueprints.parent().append(ul3) parentMenusIntBlueprints.parent().siblings().find('a').attr('submenuintblue', 'true') $('[menu="integrations"] [aria-current="page"]').parents('ul').parent('li').addClass('subnav-expanded') console.log("submenus:", subMenusIntBlueprints) console.log("parentmenus:", parentMenusIntBlueprints) }, 1000) }) })(jQuery); console.log("Clear interval"); clearInterval(waitForJQuery); } }, 100);

Overview

Usage

Troubleshooting