diff --git a/src/script.js b/src/script.js
index 7f630a9..21f7287 100644
--- a/src/script.js
+++ b/src/script.js
@@ -145,28 +145,48 @@ globalConsoleContainerEl
scope.demoFrameDocument =
frame.contentDocument || frame.contentWindow.document;
- // Check all the code wrap if they are minimized or not
+ // Check all the code wrap if they are minimized or maximized
function updateCodeWrapCollapseStates() {
+ // This is debounced!
clearTimeout(updateCodeWrapCollapseStates.timeout);
updateCodeWrapCollapseStates.timeout = setTimeout(function() {
+ const prop = currentLayoutMode === 2 ? 'width' : 'height';
[htmlCode, cssCode, jsCode].forEach(function(el) {
- var bounds = el.getBoundingClientRect();
- if (bounds[currentLayoutMode === 2 ? 'width' : 'height'] < 100) {
+ const bounds = el.getBoundingClientRect();
+ const size = bounds[prop];
+ if (size < 100) {
el.classList.add('is-minimized');
} else {
el.classList.remove('is-minimized');
}
+ if (el.style[prop].indexOf(`100% - ${minCodeWrapSize * 2}px`) !== -1) {
+ el.classList.add('is-maximized');
+ } else {
+ el.classList.remove('is-maximized');
+ }
});
}, 50);
}
function toggleCodeWrapCollapse(codeWrapEl) {
- if (codeWrapEl.classList.contains('is-minimized')) {
+ if (
+ codeWrapEl.classList.contains('is-minimized') ||
+ codeWrapEl.classList.contains('is-maximized')
+ ) {
codeWrapEl.classList.remove('is-minimized');
+ codeWrapEl.classList.remove('is-maximized');
codeSplitInstance.setSizes([33.3, 33.3, 33.3]);
} else {
- codeSplitInstance.collapse(parseInt(codeWrapEl.dataset.codeWrapId, 10));
- codeWrapEl.classList.add('is-minimized');
+ const id = parseInt(codeWrapEl.dataset.codeWrapId, 10);
+ var arr = [
+ `${minCodeWrapSize}px`,
+ `${minCodeWrapSize}px`,
+ `${minCodeWrapSize}px`
+ ];
+ arr[id] = `calc(100% - ${minCodeWrapSize * 2}px)`;
+
+ codeSplitInstance.setSizes(arr);
+ codeWrapEl.classList.add('is-maximized');
}
}
// Returns the sizes of main code & preview panes.
@@ -330,9 +350,9 @@ globalConsoleContainerEl
var dimensionProperty = currentLayoutMode === 2 ? 'width' : 'height';
try {
sizes = [
- +htmlCode.style[dimensionProperty].match(/([\d.]+)%/)[1],
- +cssCode.style[dimensionProperty].match(/([\d.]+)%/)[1],
- +jsCode.style[dimensionProperty].match(/([\d.]+)%/)[1]
+ htmlCode.style[dimensionProperty],
+ cssCode.style[dimensionProperty],
+ jsCode.style[dimensionProperty]
];
} catch (e) {
sizes = [33.33, 33.33, 33.33];
@@ -2299,7 +2319,7 @@ globalConsoleContainerEl
refreshEditor();
});
} else {
- utils.log('Load last unsaved item');
+ utils.log('Load last unsaved item', lastCode);
currentItem = lastCode;
refreshEditor();
}
diff --git a/src/style.css b/src/style.css
index 315d904..3168939 100644
--- a/src/style.css
+++ b/src/style.css
@@ -234,11 +234,14 @@ body:not(.light-version).overlay-visible .main-container {
height: 18px;
}
.code-wrap__collapse-btn:before {
- content: url('data:image/svg+xml;utf8,');
-}
-.is-minimized .code-wrap__collapse-btn:before {
+
+ /* maximize icon */
content: url('data:image/svg+xml;utf8,');
}
+.is-maximized .code-wrap__collapse-btn:before {
+ /* minimize icon */
+ content: url('data:image/svg+xml;utf8,');
+}
@keyframes pop-in {
from { transform: scale(0.9); opacity: 0; }
to { transform: scale(1); opacity: 1; }