javascriptpopupadobe-indesigncontrol-flow

how do i make a floating window that stays above programs, moveable and will accept input from another script


I am trying to build an indesign script that will produce a floating window that can display report results. I need to use this as a check-off "sheet" that will stay visible and moveable. it needs to stay active while I fix the errors that to window is displaying. Confusing, I know.

I have alert windows that will pop up and show report results successfully but I have to close the window (with all of my new info) in order to make the changes in my inDesign document. I just don't know what key words im not saying in order to make this work. I'm new to coding.


Solution

  • You can create a floating window with the help of javscript and css.

    Here is a sample floating window created with basic javascript and css. You can add minimize functionality also to keep the window minimized

     const windowElement = document.getElementById('window');
        let isDragging = false;
        let initialX;
        let initialY;
    
        windowElement.addEventListener('mousedown', startDragging);
        windowElement.addEventListener('mouseup', stopDragging);
        windowElement.addEventListener('mousemove', drag);
    
        function startDragging(e) {
            isDragging = true;
            initialX = e.clientX - windowElement.getBoundingClientRect().left;
            initialY = e.clientY - windowElement.getBoundingClientRect().top;
        }
    
        function stopDragging() {
            isDragging = false;
        }
    
        function drag(e) {
            if (isDragging) {
                const newX = e.clientX - initialX;
                const newY = e.clientY - initialY;
                windowElement.style.left = `${newX}px`;
                windowElement.style.top = `${newY}px`;
            }
        }
        
         body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
    
        .window {
            position: absolute;
            width: 300px;
            height: 200px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
            cursor: move;
        }
    <div class="window" id="window">
        <div class="window-header" style="background-color: #ccc; padding: 5px;">
            <span>Drag me!</span>
        </div>
        <div class="window-content" style="padding: 10px;">
            <!-- Your content goes here -->
            This is a movable floating window.
        </div>
    </div>