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 =
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();
}

9
src/style.css
View File

@ -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,<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>');
}
.is-minimized .code-wrap__collapse-btn:before {
/* maximize 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="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 {
from { transform: scale(0.9); opacity: 0; }
to { transform: scale(1); opacity: 1; }