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

fix logic.

Browse Source
This commit is contained in:
Kushagra Gour
2016-11-26 01:18:01 +05:30
parent 800c391cb7
commit 6dbc3626c5
2 changed files with 37 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/index.html
View File

@ -118,7 +118,7 @@
/*animation: pop-in 0.4s ease forwards 0.2s;*/ /*animation: pop-in 0.4s ease forwards 0.2s;*/
/*opacity: 0;*/ /*opacity: 0;*/
} }
.code-wrap.is-minimized { .layout-2 .code-wrap.is-minimized {
flex-direction: row; flex-direction: row;
} }
.is-dragging .code-wrap { .is-dragging .code-wrap {
@ -145,7 +145,7 @@
border-bottom: 1px solid rgba(0,0,0,0.3); border-bottom: 1px solid rgba(0,0,0,0.3);
font-weight: bold; font-weight: bold;
} }
.is-minimized .code-wrap__header { .layout-2 .is-minimized .code-wrap__header {
writing-mode: vertical-lr; writing-mode: vertical-lr;
padding: 10px 5px; padding: 10px 5px;
} }
@ -160,7 +160,7 @@
.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>'); 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>');
} }
.code-wrap__collapse-btn.is-minimized:before { .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>');
} }
@keyframes pop-in { @keyframes pop-in {
@ -174,6 +174,9 @@
height: calc(100% - 25px); /* 25px for header */ height: calc(100% - 25px); /* 25px for header */
font-size: 16px; font-size: 16px;
} }
.layout-2 .is-minimized .Codemirror {
height: calc(100%);
}
.Codemirror pre { .Codemirror pre {
font-family: 'Inconsolata', monospace; font-family: 'Inconsolata', monospace;
} }

42
src/script.js
View File

@ -80,6 +80,18 @@
editur.demoFrameDocument = frame.contentDocument || frame.contentWindow.document; editur.demoFrameDocument = frame.contentDocument || frame.contentWindow.document;
function updateCodeWrapCollapseStates() {
['#js-html-code', '#js-css-code', '#js-js-code'].forEach(function (selector) {
var el = document.querySelector(selector);
var bounds = el.getBoundingClientRect();
if (bounds.width < 150) {
el.classList.add('is-minimized');
} else {
el.classList.remove('is-minimized');
}
});
}
function resetSplitting() { function resetSplitting() {
if (codeSplitInstance) { if (codeSplitInstance) {
codeSplitInstance.destroy(); codeSplitInstance.destroy();
@ -91,7 +103,10 @@
codeSplitInstance = Split(['#js-html-code', '#js-css-code', '#js-js-code'], { codeSplitInstance = Split(['#js-html-code', '#js-css-code', '#js-js-code'], {
direction: (currentLayoutMode === 2 ? 'horizontal' : 'vertical'), direction: (currentLayoutMode === 2 ? 'horizontal' : 'vertical'),
minSize: minCodeWrapSize, minSize: minCodeWrapSize,
gutterSize: 6 gutterSize: 6,
onDragEnd: function() {
updateCodeWrapCollapseStates();
}
}); });
mainSplitInstance = Split(['#js-code-side', '#js-demo-side' ], { mainSplitInstance = Split(['#js-code-side', '#js-demo-side' ], {
direction: (currentLayoutMode === 2 ? 'vertical' : 'horizontal'), direction: (currentLayoutMode === 2 ? 'vertical' : 'horizontal'),
@ -611,21 +626,26 @@
var collapseBtns = [].slice.call($all('.js-code-collapse-btn')); var collapseBtns = [].slice.call($all('.js-code-collapse-btn'));
collapseBtns.forEach(function (btn) { collapseBtns.forEach(function (btn) {
btn.addEventListener('click', function (e) { btn.addEventListener('click', function (e) {
if (e.currentTarget.classList.contains('is-minimized')) { var codeWrapParent = e.currentTarget.parentElement.parentElement.parentElement;
e.currentTarget.classList.remove('is-minimized'); if (codeWrapParent.classList.contains('is-minimized')) {
e.currentTarget.parentElement.parentElement.parentElement.classList.remove('is-minimized'); // e.currentTarget.classList.remove('is-minimized');
codeWrapParent.classList.remove('is-minimized');
codeSplitInstance.setSizes([ 33.3, 33.3, 33.3 ]); codeSplitInstance.setSizes([ 33.3, 33.3, 33.3 ]);
} else { } else {
// codeSplitInstance.setSizes([ 0, 50, 50 ]);
codeSplitInstance.collapse(parseInt(e.currentTarget.dataset.collapseId, 10)); codeSplitInstance.collapse(parseInt(e.currentTarget.dataset.collapseId, 10));
e.currentTarget.classList.add('is-minimized'); // e.currentTarget.classList.add('is-minimized');
e.currentTarget.parentElement.parentElement.parentElement.classList.add('is-minimized'); codeWrapParent.classList.add('is-minimized');
} }
return false; return false;
/*Split(['#js-html-code', '#js-css-code', '#js-js-code'], { });
direction: (currentLayoutMode === 2 ? 'horizontal' : 'vertical'), });
minSize: 34,
gutterSize: 6 ['#js-html-code', '#js-css-code', '#js-js-code'].forEach(function (selector) {
});*/ var el = document.querySelector(selector);
el.addEventListener('transitionend', function() {
console.log('transitionend')
updateCodeWrapCollapseStates();
}); });
}); });