mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-13 10:06:23 +02:00
Code Issues Releases Wiki Activity

maximize code panes on dbl click instead of collapsing. fixes #123

Browse Source
This commit is contained in:
Kushagra Gour
2017-12-11 01:09:56 +05:30
parent e1263cc0ab
commit db89f7fbd5
2 changed files with 36 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/script.js
View File

@ -145,28 +145,48 @@ globalConsoleContainerEl
scope.demoFrameDocument = scope.demoFrameDocument =
frame.contentDocument || frame.contentWindow.document; 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() { function updateCodeWrapCollapseStates() {
// This is debounced!
clearTimeout(updateCodeWrapCollapseStates.timeout); clearTimeout(updateCodeWrapCollapseStates.timeout);
updateCodeWrapCollapseStates.timeout = setTimeout(function() { updateCodeWrapCollapseStates.timeout = setTimeout(function() {
const prop = currentLayoutMode === 2 ? 'width' : 'height';
[htmlCode, cssCode, jsCode].forEach(function(el) { [htmlCode, cssCode, jsCode].forEach(function(el) {
var bounds = el.getBoundingClientRect(); const bounds = el.getBoundingClientRect();
if (bounds[currentLayoutMode === 2 ? 'width' : 'height'] < 100) { const size = bounds[prop];
if (size < 100) {
el.classList.add('is-minimized'); el.classList.add('is-minimized');
} else { } else {
el.classList.remove('is-minimized'); 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); }, 50);
} }
function toggleCodeWrapCollapse(codeWrapEl) { 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-minimized');
codeWrapEl.classList.remove('is-maximized');
codeSplitInstance.setSizes([33.3, 33.3, 33.3]); codeSplitInstance.setSizes([33.3, 33.3, 33.3]);
} else { } else {
codeSplitInstance.collapse(parseInt(codeWrapEl.dataset.codeWrapId, 10)); const id = parseInt(codeWrapEl.dataset.codeWrapId, 10);
codeWrapEl.classList.add('is-minimized'); 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. // Returns the sizes of main code & preview panes.
@ -330,9 +350,9 @@ globalConsoleContainerEl
var dimensionProperty = currentLayoutMode === 2 ? 'width' : 'height'; var dimensionProperty = currentLayoutMode === 2 ? 'width' : 'height';
try { try {
sizes = [ sizes = [
+htmlCode.style[dimensionProperty].match(/([\d.]+)%/)[1], htmlCode.style[dimensionProperty],
+cssCode.style[dimensionProperty].match(/([\d.]+)%/)[1], cssCode.style[dimensionProperty],
+jsCode.style[dimensionProperty].match(/([\d.]+)%/)[1] jsCode.style[dimensionProperty]
]; ];
} catch (e) { } catch (e) {
sizes = [33.33, 33.33, 33.33]; sizes = [33.33, 33.33, 33.33];
@ -2299,7 +2319,7 @@ globalConsoleContainerEl
refreshEditor(); refreshEditor();
}); });
} else { } else {
utils.log('Load last unsaved item'); utils.log('Load last unsaved item', lastCode);
currentItem = lastCode; currentItem = lastCode;
refreshEditor(); refreshEditor();
} }

9
src/style.css
View File

@ -234,11 +234,14 @@ body:not(.light-version).overlay-visible .main-container {
height: 18px; height: 18px;
} }
.code-wrap__collapse-btn:before { .code-wrap__collapse-btn:before {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px" viewBox="0 0 24 24"><path fill="rgba(255,255,255,0.2)" d="M19.5,3.09L15,7.59V4H13V11H20V9H16.41L20.91,4.5L19.5,3.09M4,13V15H7.59L3.09,19.5L4.5,20.91L9,16.41V20H11V13H4Z" /></svg>');
} /* maximize icon */
.is-minimized .code-wrap__collapse-btn:before {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px" viewBox="0 0 24 24"><path fill="rgba(255,255,255,0.2)" d="M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z" /></svg>'); content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px" viewBox="0 0 24 24"><path fill="rgba(255,255,255,0.2)" d="M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z" /></svg>');
} }
.is-maximized .code-wrap__collapse-btn:before {
/* minimize icon */
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px" viewBox="0 0 24 24"><path fill="rgba(255,255,255,0.2)" d="M19.5,3.09L15,7.59V4H13V11H20V9H16.41L20.91,4.5L19.5,3.09M4,13V15H7.59L3.09,19.5L4.5,20.91L9,16.41V20H11V13H4Z" /></svg>');
}
@keyframes pop-in { @keyframes pop-in {
from { transform: scale(0.9); opacity: 0; } from { transform: scale(0.9); opacity: 0; }
to { transform: scale(1); opacity: 1; } to { transform: scale(1); opacity: 1; }