code Image resizer

by ckissi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/highlight-theme-monokai-sublime.css">
<div class="container">
        <div class="resizable-div">
        
         <!-- <pre><code class="css">
         @mixin links ($link, $visited, $hover, $active) {
             & {
                 color: $link;
                 &:visited {
            color: $visited;
                 }
                 &:hover {
            color: $hover;
                 }
                 &:active, &:focus {
            color: $active;
                 }
             }
         }
         </code></pre> -->
       <div id="foo">
       </div>
            <div class="ruler ruler-left"></div>
            <div class="ruler ruler-right"></div>
        </div>
    </div>

CSS

.container {
            position: relative;
            width: 80%;           
            max-width: 800px;
            margin: 50px auto;
            overflow:hidden;
        }
        .resizable-div {
            position: relative;
            width: 100%;
            /* height: 200px; */
           /*  background-color: #f0f0f0; */
           padding:20px;
            border: 10px solid #007bff;
            box-sizing: border-box;
        }
        .ruler {
            position: absolute;
            top: 0;
            width: 10px;
            height: 100%;
            background-color: #007bff;
            cursor: ew-resize;
        }
        .ruler-left {
            left: -10px;
        }
        .ruler-right {
            right: -10px;
        }
        pre {          
          margin: 20px;
          overflow:hidden;
        }

JavaScript

const container = document.querySelector('.container');
        const resizableDiv = document.querySelector('.resizable-div');
        const rulerLeft = document.querySelector('.ruler-left');
        const rulerRight = document.querySelector('.ruler-right');

        let isResizing = false;
        let currentRuler = null;
        let startX;
        let startWidth;
        let startLeft;

        function initResize(e) {
            isResizing = true;
            currentRuler = e.target;
            startX = e.clientX;
            startWidth = resizableDiv.offsetWidth;
            startLeft = resizableDiv.offsetLeft;
            document.addEventListener('mousemove', resize);
            document.addEventListener('mouseup', stopResize);
        }

        function resize(e) {
            if (!isResizing) return;
            const diff = e.clientX - startX;
            let newWidth, newLeft;

            if (currentRuler === rulerLeft) {
                newWidth = startWidth - diff * 2;
                newLeft = startLeft + diff;
            } else {
                newWidth = startWidth + diff * 2;
                newLeft = startLeft - diff;
            }

            if (newWidth > 100 && newWidth <= container.offsetWidth) {
                resizableDiv.style.width = newWidth + 'px';
                resizableDiv.style.left = newLeft + 'px';
            }
        }

        function stopResize() {
            isResizing = false;
            document.removeEventListener('mousemove', resize);
            document.removeEventListener('mouseup', stopResize);
        }

        rulerLeft.addEventListener('mousedown', initResize);
        rulerRight.addEventListener('mousedown', initResize);
        
       hljs.highlightAll();
       
       import { codeToHtml } from 'https://esm.sh/[email protected]'
    // or
    // import { codeToHtml } from 'https://esm.run/[email protected]'

    const foo = document.getElementById('foo')
    foo.innerHTML = await...