This is your private edit page. Save this url!×
' + "\n" + ''; dataArea = document.getElementById("data"); if ( reset == 1) { exampleHTML = ''; window.history.replaceState({},null, '/'); dataArea.focus(); } dataArea.value = userHTML.length ? userHTML : exampleHTML; editor = CodeMirror.fromTextArea(dataArea, { lineNumbers: true, matchBrackets: true, mode: 'xml', matchTags: {bothTags: true} }); editor.on('change', update); editor.on('change', invalidateHtmlChecker); if (userHTML) { document.getElementById('livelink').style.display='inline-block'; document.getElementById("livelink").href = id; hideEditMsg(); } // The editor/preview panes use the existing Split.js library. // "stacked" is the original top/bottom layout; "side" is left/right. var paneSplit = null; var paneLayout = 'stacked'; var paneSizes = {stacked: [40, 60], side: [50, 50]}; var savedPaneLayout = 'stacked'; try { if (localStorage.getItem('htmlcafe-editor-pane-layout') === 'side') { savedPaneLayout = 'side'; } } catch (e) {} function positionHtmlChecker() { var popup = document.getElementById('htmlchecker'); if (popup.hidden) return; var editorRect = document.querySelector('.CodeMirror').getBoundingClientRect(); var buttonRect = document.getElementById('mode').getBoundingClientRect(); var inset = 8; // Align to the check button; never extend over the preview pane. var rightEdge = Math.min(buttonRect.right, editorRect.right - inset); var leftEdge = editorRect.left + inset; var width = Math.max(0, Math.min(420, rightEdge - leftEdge)); var top = buttonRect.bottom + 6; var availableHeight = Math.max(0, Math.min(editorRect.bottom, window.innerHeight) - top - inset); popup.style.left = Math.round(rightEdge - width) + 'px'; popup.style.top = Math.round(top) + 'px'; popup.style.width = Math.round(width) + 'px'; popup.style.maxWidth = 'none'; popup.style.maxHeight = Math.round(availableHeight) + 'px'; } function positionPaneOverlays() { var mainRect = document.getElementById('main').getBoundingClientRect(); var editorRect = document.querySelector('.CodeMirror').getBoundingClientRect(); var previewRect = document.getElementById('output').getBoundingClientRect(); var icon = document.getElementById('datalabel'); var mode = document.getElementById('mode'); var rightInset = window.innerWidth <= 480 ? 7 : 20; // Pop-out icon belongs to the preview, regardless of orientation. icon.style.left = Math.max(0, previewRect.right - mainRect.left - rightInset - 28) + 'px'; icon.style.top = Math.max(0, previewRect.top - mainRect.top + 20) + 'px'; // Check HTML control belongs to the editor, not over the preview. mode.style.left = Math.max(0, editorRect.right - mainRect.left - mode.offsetWidth - 28) + 'px'; mode.style.right = 'auto'; positionHtmlChecker(); } function setPaneLayout(nextLayout) { // Keep each layout's current divider position when toggling. if (paneSplit) { paneSizes[paneLayout] = paneSplit.getSizes(); // Preserve the existing custom #gutter element when destroying Split. paneSplit.destroy(false, true); paneSplit = null; } paneLayout = nextLayout; var main = document.getElementById('main'); var gutter = document.getElementById('gutter'); var editorPane = document.querySelector('.CodeMirror'); var previewPane = document.getElementById('output'); // Clear inline sizes from the previous orientation. editorPane.style.width = editorPane.style.height = ''; previewPane.style.width = previewPane.style.height = ''; gutter.style.width = gutter.style.height = ''; if (nextLayout === 'side') { main.classList.add('panes-side-by-side'); } else { main.classList.remove('panes-side-by-side'); } paneSplit = Split(['.CodeMirror', '#output'], { sizes: paneSizes[nextLayout], gutterSize: 15, minSize: 10, lint: true, direction: nextLayout === 'side' ? 'horizontal' : 'vertical', gutter: function () { return gutter; }, onDrag: positionPaneOverlays, onDragEnd: function (sizes) { paneSizes[paneLayout] = sizes; editor.refresh(); positionPaneOverlays(); } }); var button = document.getElementById('panetoggle'); button.title = nextLayout === 'side' ? 'Stack editor above preview' : 'Place editor and preview side by side'; button.setAttribute('aria-label', button.title); try { localStorage.setItem('htmlcafe-editor-pane-layout', nextLayout); } catch (e) {} editor.refresh(); positionPaneOverlays(); } function togglePaneLayout() { setPaneLayout(paneLayout === 'stacked' ? 'side' : 'stacked'); } // Split.js listens on the gutter for drag start; not on this button. var paneToggleButton = document.getElementById('panetoggle'); paneToggleButton.addEventListener('mousedown', function (e) { e.stopPropagation(); }); paneToggleButton.addEventListener('touchstart', function (e) { e.stopPropagation(); }); setPaneLayout(savedPaneLayout); window.addEventListener('resize', function () { editor.refresh(); positionPaneOverlays(); }); // Advertising can appear after the page has loaded. Flexbox resizes // #main automatically; CodeMirror and the pane overlays just need // to be notified when its available dimensions change. if (window.ResizeObserver) { var mainResizeObserver = new ResizeObserver(function () { editor.refresh(); positionPaneOverlays(); }); mainResizeObserver.observe(document.getElementById('main')); } update(); window.onbeforeunload = function(e) { if ((saveRequestPending || document.getElementById('savelink').disabled != true) && window.editStarted) { return 'Are you sure you want to leave? You will lose any unsaved text.'; } }; if (mediaWidth >= 728) { document.getElementById('mainad').className += ' huge'; document.getElementById('body').className += ' huge'; } else if (mediaWidth == 468) { document.getElementById('mainad').className += ' big'; document.getElementById('body').className += ' big'; } else { document.getElementById('mainad').className += ' small'; document.getElementById('body').className += ' small'; }