SwissKnife error – Mousetrap is not defined

I’m writing to report a critical bug that is preventing the Class Manager feature from working within the Oxygen Builder environment. I believe I have identified the root causes and have implemented a temporary fix.

1. The Primary Issue: Missing JavaScript Dependency

• Problem: When attempting to use the Class Manager in Oxygen, the feature fails to load. The browser’s developer console shows a JavaScript error: Uncaught ReferenceError: Mousetrap is not defined.

• Cause: The plugin’s JavaScript (class-manager.js and class-manager-iframe.js) calls the Mousetrap.js library for keyboard shortcuts. However, this library is not being loaded. I checked the plugin files and couldn’t find the mousetrap.js file bundled with the plugin.

• Hypothesis: It appears Swiss Knife was relying on Oxygen Builder to provide this script as a dependency. A recent update to Oxygen has likely removed Mousetrap.js, which has, in turn, broken your plugin’s functionality.

2. The Secondary Issue: Incorrect CSS Positioning

• Problem: Once the JavaScript issue is resolved, the lock icon’s container (.swk-locked-div) is incorrectly positioned, appearing too high up and obscuring other UI elements.

• Cause: The CSS for this element is missing a correct top value to position it properly within the Oxygen UI.

My Temporary Solution

To get the feature working again, I created a single PHP snippet to address both issues. I am sharing it in case it helps you debug.

This snippet does two things:

1. It enqueues the Mousetrap.js library from a public CDN.

2. It injects the necessary CSS to fix the positioning of the .swk-locked-div.

<?php
/**
 * Temporary Fix for Swiss Knife Class Manager in Oxygen
 * 1. Loads the missing Mousetrap.js dependency.
 * 2. Corrects the CSS for the .swk-locked-div element.
 */

// 1. Enqueue the missing Mousetrap.js script from a CDN
add_action( 'init', function() {
    wp_enqueue_script(
        'swiss-knife-mousetrap-fix',
        '[https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.5/mousetrap.min.js](https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.5/mousetrap.min.js)',
        ['jquery'],
        '1.6.5',
        false
    );
});

// 2. Inject the CSS fix into the page head
add_action( 'wp_head', function() {
    ?>
    <style id="swiss-knife-css-fix">
        .swk-locked-div {
            top: 155px !important;
        }
    </style>
    <?php
});

Suggested Permanent Fix

To prevent this from happening in the future, I would strongly recommend:

1. Bundling your dependencies: Please include the mousetrap.min.js file within your plugin and enqueue it yourselves. This will ensure your features work reliably and are not dependent on other plugins’ codebases.

2. Updating the core stylesheet: Please add the top: 155px; rule (or a more robust positioning solution) to your plugin’s CSS for the .swk-locked-div selector.