mirror of
https://github.com/chinchang/web-maker.git
synced 2025-07-09 16:06:21 +02:00
add collapsing on double click also.
This commit is contained in:
@ -128,9 +128,6 @@
|
||||
background: var(--color-bg);
|
||||
transition: height 0.30s ease, width 0.30s ease;
|
||||
will-change: height;
|
||||
/*animation: pop-in 0.4s cubic-bezier(.71,1.7,.77,1.24) forwards 0.2s;*/
|
||||
/*animation: pop-in 0.4s ease forwards 0.2s;*/
|
||||
/*opacity: 0;*/
|
||||
}
|
||||
.layout-2 .code-wrap.is-minimized {
|
||||
flex-direction: row;
|
||||
@ -634,8 +631,8 @@
|
||||
</div>
|
||||
<div class="content-wrap flex flex-grow">
|
||||
<div class="code-side" id="js-code-side">
|
||||
<div id="js-html-code" data-type="html" class="code-wrap">
|
||||
<div class="code-wrap__header">
|
||||
<div data-code-wrap-id="0" id="js-html-code" data-type="html" class="code-wrap">
|
||||
<div class="js-code-wrap__header code-wrap__header" title="Double click to toggle code pane">
|
||||
<div class="btn-group" dropdown title="Click to change">
|
||||
<span id="js-html-mode-label" class="code-wrap__header-label">HTML</span><span class="caret"></span>
|
||||
<ul class="js-modes-menu dropdown__menu">
|
||||
@ -645,13 +642,13 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="code-wrap__header-right-options">
|
||||
<a data-collapse-id="0" class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn">
|
||||
<a class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn" title="Toggle code pane">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="js-css-code" data-type="css" class="code-wrap">
|
||||
<div class="code-wrap__header">
|
||||
<div data-code-wrap-id="1" id="js-css-code" data-type="css" class="code-wrap">
|
||||
<div class="js-code-wrap__header code-wrap__header" title="Double click to toggle code pane">
|
||||
<div class="btn-group" dropdown title="Click to change">
|
||||
<span id="js-css-mode-label" class="code-wrap__header-label">CSS</span><span class="caret"></span>
|
||||
<ul class="js-modes-menu dropdown__menu">
|
||||
@ -661,13 +658,13 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="code-wrap__header-right-options">
|
||||
<a data-collapse-id="1" class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn">
|
||||
<a class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn" title="Toggle code pane">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="js-js-code" data-type="js" class="code-wrap">
|
||||
<div class="code-wrap__header">
|
||||
<div data-code-wrap-id="2" id="js-js-code" data-type="js" class="code-wrap">
|
||||
<div class="js-code-wrap__header code-wrap__header" title="Double click to toggle code pane">
|
||||
<div class="btn-group" dropdown title="Click to change">
|
||||
<span id="js-js-mode-label" class="code-wrap__header-label">JS</span><span class="caret"></span>
|
||||
<ul class="js-modes-menu dropdown__menu">
|
||||
@ -677,7 +674,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="code-wrap__header-right-options">
|
||||
<a data-collapse-id="2" class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn">
|
||||
<a class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn" title="Toggle code pane">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -97,6 +97,16 @@
|
||||
}, 50);
|
||||
}
|
||||
|
||||
function toggleCodeWrapCollapse(codeWrapEl) {
|
||||
if (codeWrapEl.classList.contains('is-minimized')) {
|
||||
codeWrapEl.classList.remove('is-minimized');
|
||||
codeSplitInstance.setSizes([ 33.3, 33.3, 33.3 ]);
|
||||
} else {
|
||||
codeSplitInstance.collapse(parseInt(codeWrapEl.dataset.codeWrapId, 10));
|
||||
codeWrapEl.classList.add('is-minimized');
|
||||
}
|
||||
}
|
||||
|
||||
function resetSplitting(dontRecreate) {
|
||||
if (codeSplitInstance) {
|
||||
codeSplitInstance.destroy();
|
||||
@ -109,8 +119,12 @@
|
||||
direction: (currentLayoutMode === 2 ? 'horizontal' : 'vertical'),
|
||||
minSize: minCodeWrapSize,
|
||||
gutterSize: 6,
|
||||
onDragEnd: function() {
|
||||
onDragStart: function () {
|
||||
document.body.classList.add('is-dragging');
|
||||
},
|
||||
onDragEnd: function () {
|
||||
updateCodeWrapCollapseStates();
|
||||
document.body.classList.remove('is-dragging');
|
||||
}
|
||||
};
|
||||
if (currentItem && currentItem.sizes) {
|
||||
@ -118,7 +132,7 @@
|
||||
} else {
|
||||
options.sizes = [ 33.33, 33.33, 33.33 ];
|
||||
}
|
||||
utils.log('reset spliiting', options.sizes)
|
||||
// utils.log('reset spliiting', options.sizes)
|
||||
codeSplitInstance = Split(['#js-html-code', '#js-css-code', '#js-js-code'], options);
|
||||
mainSplitInstance = Split(['#js-code-side', '#js-demo-side' ], {
|
||||
direction: (currentLayoutMode === 2 ? 'vertical' : 'horizontal'),
|
||||
@ -743,16 +757,7 @@
|
||||
collapseBtns.forEach(function (btn) {
|
||||
btn.addEventListener('click', function (e) {
|
||||
var codeWrapParent = e.currentTarget.parentElement.parentElement.parentElement;
|
||||
if (codeWrapParent.classList.contains('is-minimized')) {
|
||||
// e.currentTarget.classList.remove('is-minimized');
|
||||
codeWrapParent.classList.remove('is-minimized');
|
||||
codeSplitInstance.setSizes([ 33.3, 33.3, 33.3 ]);
|
||||
} else {
|
||||
// codeSplitInstance.setSizes([ 0, 50, 50 ]);
|
||||
codeSplitInstance.collapse(parseInt(e.currentTarget.dataset.collapseId, 10));
|
||||
// e.currentTarget.classList.add('is-minimized');
|
||||
codeWrapParent.classList.add('is-minimized');
|
||||
}
|
||||
toggleCodeWrapCollapse(codeWrapParent);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
@ -782,6 +787,13 @@
|
||||
toggleSavedItemsPane(false);
|
||||
}
|
||||
});
|
||||
window.addEventListener('dblclick', function(e) {
|
||||
var target = e.target;
|
||||
if (target.classList.contains('js-code-wrap__header')) {
|
||||
var codeWrapParent = target.parentElement;
|
||||
toggleCodeWrapCollapse(codeWrapParent);
|
||||
}
|
||||
});
|
||||
|
||||
utils.onButtonClick(settingsBtn, function() {
|
||||
if (chrome.runtime.openOptionsPage) {
|
||||
@ -816,14 +828,6 @@
|
||||
externalJsTextarea.addEventListener('change', onExternalLibChange);
|
||||
externalCssTextarea.addEventListener('change', onExternalLibChange);
|
||||
|
||||
// TODO: move to split.js ondrag listeners
|
||||
window.addEventListener('mousedown', function() {
|
||||
document.body.classList.add('is-dragging');
|
||||
});
|
||||
window.addEventListener('mouseup', function() {
|
||||
document.body.classList.remove('is-dragging');
|
||||
});
|
||||
|
||||
chrome.storage.local.get({
|
||||
layoutMode: 1,
|
||||
code: ''
|
||||
|
Reference in New Issue
Block a user