Disabling Cargo Collective Navigation Shortcuts

21 Views Asked by At

I am a typeface designer and just built a website in Cargo.site. (pedroglifos.com) I am using Fontdue type testers integration so my customers can test the fonts. Everything was fine until I realized that Cargo has a built in code that has some unnecessary navigation functionalities, such as: when pressing the "R" key, a random page will load. Pressing shift+E triggers the admin console. The arrow keys cycle through the website pages...

This is all FUN until it prevents my type testers to work correctly. The very first lines of their code are supposed to prevent these functionalities to work on inputs and textareas, but their script doesn't recognize my type testers as such because they're scripts as well.

Cargo only allows me to place custom scripts in the head element, globally, or to each page. I have tried several things, from from trying to disable handleGlobalKeyDown entirely, trying to intercept it to change it's functionality, and even tried to trick the script in thinking my type-testers are textareas by dynamically modifying the nodeName property of the type testers elements — but then they stop working.

Is there a sensible way I can stop this Cargo core script from working?

Heres the problematic portion of the Cargo Script global-events-handler.js:

handleGlobalKeyDown = e => {

        if(
            e.target.nodeName === "INPUT"
            || e.target.nodeName === "TEXTAREA"
        ) {
            // ignore key events when typing in input fields / textareas
            return;
        }

        const state = this.props.store.getState();

        if(!this.props.adminMode) {

            if( ( this.isMac && e.metaKey && e.which === 191 ) || ( !this.isMac && e.ctrlKey && e.which === 191 ) ) {
                
                    // cmd + / / cmd + ? to recognize Cargo sites
                    this.showCargoSiteIndicator();

                    // Only listen to metakey event in special cases so we don't 
                    // break native functionality like cmd + r to refresh
                    return;
            }

            if( ( this.isMac && e.metaKey && e.which === 27 ) || ( !this.isMac && e.ctrlKey && e.which === 27 ) ) {
                
                    // cmd + esc
                    this.openAdmin();
                    
                    // Only listen to metakey event in special cases so we don't 
                    // break native functionality like cmd + r to refresh
                    return;
            }

            // shift + a / shift + e
            if(
                e.shiftKey 
                && (e.keyCode === 65 || e.keyCode === 69) 
                && !state.frontendState.contactForm.inited 
                && !state.frontendState.cartOpen
                && !state.frontendState?.quickView?.inited 

            ){

                if (this.props.inAdminFrame) {

                    // make sure viewers aren't escaping preview
                    if(this.props.editorRole !== "Viewer") {

                        if(this.props.activePID && this.props.activePID.length > 0 && this.props.activePID !== 'root') {
                            parent.navigateAdmin('/' + this.props.activePID);
                        } else {
                            parent.navigateAdmin('/');
                        }

                    }

                } else {
                    this.openAdmin();
                }
            }
            // left, right, r
            if(
                e.keyCode === 82
                && !state.frontendState.contactForm.inited
                && !state.frontendState.cartOpen
                && !state.frontendState?.quickView?.inited
                && !e.metaKey
                && !e.ctrlKey
            ) {
                e.preventDefault();
                this.loadRandomPage();
            } else if(
                // arrow left
                e.keyCode === 37
                && !state.frontendState.contactForm.inited
                && !state.frontendState.cartOpen
                && !state.frontendState?.quickView?.inited 
                && !e.metaKey
                && !e.ctrlKey
            ) {
                e.preventDefault();
                this.loadPrevPage();
            } else if(
                // arrow left
                e.keyCode === 39
                && !state.frontendState.contactForm.inited
                && !state.frontendState.cartOpen
                && !state.frontendState?.quickView?.inited 
                && !e.metaKey
                && !e.ctrlKey
            ) {
                e.preventDefault();
                this.loadNextPage();
            }

My Fontdue type testers are integrated with an initial code in head:

<link rel="stylesheet" href="https://js.fontdue.com/fontdue.css">
<script type="text/javascript" src="https://js.fontdue.com/fontdue.js"></script>
<script>
  fontdue.initialize({
    url: "https://store.pedroglifos.com",
    config: {
      typeTester: {      
        min: 6,
        max: 480,
        selectable: true,
        textInput: true,
        groupEdit: false,
        initialMode: 'local',
        shy: false,
        buyButton: false,
        truncate: true,
        selectButtonLabel: 'Get',
        selectButtonStyle: 'outlined',
      },
    },
  });
</script>

And modular components where I want them to appear in the body:

<!-- Type Tester Start -->
<fontdue-type-testers collection-id="Rm9udENvbGxlY3Rpb246MTY5MDQzMDM5OTg5OTM1MDY2OA=="></fontdue-type-testers>

<!-- Character Viewer Start -->
<fontdue-character-viewer collection-id="Rm9udENvbGxlY3Rpb246MTY5MDQzMDM5OTg5OTM1MDY2OA=="></fontdue-character-viewer>

I tried overriding:

<script>
  function handleGlobalKeyDown(e) {
  }
</script>

Also tried to trick Cargo into thinking my type testers are text areas

<link rel="stylesheet" href="https://js.fontdue.com/fontdue.css">
<script type="text/javascript" src="https://js.fontdue.com/fontdue.js"></script>
<script>
  fontdue.initialize({
    url: "https://store.pedroglifos.com",
    config: {
      typeTester: {      
        min: 6,
        max: 480,
        selectable: true,
        textInput: true,
        groupEdit: false,
        initialMode: 'local',
        shy: false,
        buyButton: false,
        truncate: true,
        selectButtonLabel: 'Get',
        selectButtonStyle: 'outlined',
      },
    },
  });

  document.addEventListener('DOMContentLoaded', function() {
    const fontdueTypeTesters = document.querySelectorAll('fontdue-type-testers');
    fontdueTypeTesters.forEach(function(element) {
      Object.defineProperty(element, 'nodeName', { value: 'TEXTAREA', writable: false });
    });
  });
</script>
0

There are 0 best solutions below