JSFiddle - React, Tailwind, and code Playground

by Pankaj Kargirwar

JavaScript

function createMobileClass(BaseClass) {
    return class extends BaseClass {
        constructor() {
            super();
            this.isEditorVisible = true; // Default state
        }

        get type() {
            return "mobile";
        }

        async init() {
            // Call the superclass init method
            await super.init();

            this.editorPanel = document.querySelector('#app-left-panel');
            this.svgPanel = document.querySelector('#app-right-panel');
            document.querySelector('.toggle-bar').addEventListener('click', () => {
                this.toggleView();
            });
        }

        toggleView() {
            if (this.isEditorVisible) {
                this.editorPanel.style.transform = 'translateX(100%)';
                this.svgPanel.style.transform = 'translateX(0)';
            } else {
                this.editorPanel.style.transform = 'translateX(0)';
                this.svgPanel.style.transform = 'translateX(-100%)';
            }

            this.isEditorVisible = !this.isEditorVisible;
        }
    };
}

// Example Usage

class Library {
    async init() {
        console.log("Library initialized!");
    }
}

class Tutorials {
    async init() {
        console.log("Tutorials initialized!");
    }
}

// Create specialized classes
const MobileLibrary = createMobileClass(Library);
const MobileTutorials = createMobileClass(Tutorials);

// Instantiate and use
const libraryInstance = new MobileLibrary();
libraryInstance.init();

const tutorialsInstance = new MobileTutorials();
tutorialsInstance.init();