htmlbox/script.js at main · dumorando/htmlbox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
const iframe = document.querySelector("iframe");
const defaulthtml = `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>`;

const editor = ace.edit("editor", {
    theme: 'ace/theme/textmate',
    mode: 'ace/mode/html',
    value: defaulthtml
});

iframe.srcdoc = editor.getValue();

editor.session.on("change", function() {
    iframe.srcdoc = editor.getValue();
});

const container = document.querySelector('.container');
const editorPane = document.getElementById('editor');
const iframeContainer = document.getElementById('iframe-container');
const divider = document.getElementById('divider');

const DIVIDER_WIDTH = 6;
const HALF_DIV = DIVIDER_WIDTH / 2;
const MIN_PX = 200;
let leftRatio = 0.5;

function applyLayout() {
    editorPane.style.width = `calc(${(leftRatio * 100).toFixed(4)}% - 3px)`;
    iframeContainer.style.width = `calc(${((1 - leftRatio) * 100).toFixed(4)}% - 3px)`;
    editor.resize();
}

function startResize() {
    document.body.classList.add('resizing');
}

function endResize() {
    document.body.classList.remove('resizing');
    editor.resize();
}

function onPointerMove(clientX) {
    const rect = container.getBoundingClientRect();
    let leftPx = clientX - rect.left;
    leftPx = Math.max(leftPx, MIN_PX + HALF_DIV);
    leftPx = Math.min(leftPx, rect.width - (MIN_PX + HALF_DIV));
    leftRatio = leftPx / rect.width;
    applyLayout();
}

divider.addEventListener('mousedown', (e) => {
    e.preventDefault();
    startResize();
    const move = (ev) => onPointerMove(ev.clientX);
    const up = () => {
        document.removeEventListener('mousemove', move);
        document.removeEventListener('mouseup', up);
        endResize();
    };
    document.addEventListener('mousemove', move);
    document.addEventListener('mouseup', up, { once: true });
});

divider.addEventListener('touchstart', (e) => {
    e.preventDefault();
    startResize();
    const move = (ev) => {
        if (ev.touches && ev.touches.length) {
            onPointerMove(ev.touches[0].clientX);
        }
    };
    const end = () => {
        document.removeEventListener('touchmove', move);
        document.removeEventListener('touchend', end);
        endResize();
    };
    document.addEventListener('touchmove', move, { passive: false });
    document.addEventListener('touchend', end, { once: true });
}, { passive: false });

window.addEventListener('resize', applyLayout);

applyLayout();