mirror of
https://github.com/chinchang/web-maker.git
synced 2025-07-14 02:26:20 +02:00
add a 5th layout mode 🔥
This commit is contained in:
@ -233,6 +233,11 @@
|
|||||||
<use xlink:href="#mode-icon" />
|
<use xlink:href="#mode-icon" />
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
|
<a id="layoutBtn5" class="mode-btn">
|
||||||
|
<svg viewBox="0 0 100 100">
|
||||||
|
<use xlink:href="#vertical-mode-icon" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
<a id="layoutBtn4" class="mode-btn hint--top-left hint--rounded" aria-label="Full Screen">
|
<a id="layoutBtn4" class="mode-btn hint--top-left hint--rounded" aria-label="Full Screen">
|
||||||
<svg viewBox="0 0 100 100">
|
<svg viewBox="0 0 100 100">
|
||||||
<rect x="0" y="0" width="100" height="100" />
|
<rect x="0" y="0" width="100" height="100" />
|
||||||
@ -524,17 +529,6 @@
|
|||||||
|
|
||||||
<div class="modal-overlay"></div>
|
<div class="modal-overlay"></div>
|
||||||
|
|
||||||
<svg width="30" height="30" viewBox="0 0 100 100" fill="rgba(255, 255, 255, 0.09)">
|
|
||||||
<defs>
|
|
||||||
<g id="mode-icon">
|
|
||||||
<rect x="0" y="0" width="28" height="47" />
|
|
||||||
<rect x="36" y="0" width="28" height="47"/>
|
|
||||||
<rect x="72" y="0" width="28" height="47"/>
|
|
||||||
<rect x="0" y="53" width="100" height="47"/>
|
|
||||||
</g>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<div class="alerts-container" id="js-alerts-container"></div>
|
<div class="alerts-container" id="js-alerts-container"></div>
|
||||||
<form style="display:none;" action="https://codepen.io/pen/define" method="POST" target="_blank" id="js-codepen-form">
|
<form style="display:none;" action="https://codepen.io/pen/define" method="POST" target="_blank" id="js-codepen-form">
|
||||||
<input type="hidden" name="data" value='{"title": "New Pen!", "html": "<div>Hello, World!</div>"}'>
|
<input type="hidden" name="data" value='{"title": "New Pen!", "html": "<div>Hello, World!</div>"}'>
|
||||||
@ -599,6 +593,22 @@
|
|||||||
<symbol id="keyboard-icon" viewBox="0 0 24 24">
|
<symbol id="keyboard-icon" viewBox="0 0 24 24">
|
||||||
<path d="M19,10H17V8H19M19,13H17V11H19M16,10H14V8H16M16,13H14V11H16M16,17H8V15H16M7,10H5V8H7M7,13H5V11H7M8,11H10V13H8M8,8H10V10H8M11,11H13V13H11M11,8H13V10H11M20,5H4C2.89,5 2,5.89 2,7V17A2,2 0 0,0 4,19H20A2,2 0 0,0 22,17V7C22,5.89 21.1,5 20,5Z" />
|
<path d="M19,10H17V8H19M19,13H17V11H19M16,10H14V8H16M16,13H14V11H16M16,17H8V15H16M7,10H5V8H7M7,13H5V11H7M8,11H10V13H8M8,8H10V10H8M11,11H13V13H11M11,8H13V10H11M20,5H4C2.89,5 2,5.89 2,7V17A2,2 0 0,0 4,19H20A2,2 0 0,0 22,17V7C22,5.89 21.1,5 20,5Z" />
|
||||||
</symbol>
|
</symbol>
|
||||||
|
<symbol id="mode-icon" width="30" height="30" viewBox="0 0 100 100">
|
||||||
|
<g>
|
||||||
|
<rect x="0" y="0" width="28" height="47" />
|
||||||
|
<rect x="36" y="0" width="28" height="47"/>
|
||||||
|
<rect x="72" y="0" width="28" height="47"/>
|
||||||
|
<rect x="0" y="53" width="100" height="47"/>
|
||||||
|
</g>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="vertical-mode-icon" width="30" height="30" viewBox="0 0 100 100">
|
||||||
|
<g>
|
||||||
|
<rect x="0" y="0" width="20" height="100" />
|
||||||
|
<rect x="23" y="0" width="20" height="100"/>
|
||||||
|
<rect x="46" y="0" width="20" height="100"/>
|
||||||
|
<rect x="69" y="0" width="32" height="100"/>
|
||||||
|
</g>
|
||||||
|
</symbol>
|
||||||
<symbol id="loader-icon" viewBox="0 0 44 44">
|
<symbol id="loader-icon" viewBox="0 0 44 44">
|
||||||
<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
|
<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
|
||||||
<g fill="none" fill-rule="evenodd" stroke-width="10">
|
<g fill="none" fill-rule="evenodd" stroke-width="10">
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
/* global trackEvent */
|
/* global trackEvent */
|
||||||
/* global layoutBtn1, layoutBtn2, layoutBtn3, helpModal, notificationsModal, addLibraryModal,
|
/* global layoutBtn1, layoutBtn2, layoutBtn3, helpModal, notificationsModal, addLibraryModal,
|
||||||
onboardModal, layoutBtn1, layoutBtn2, layoutBtn3, layoutBtn4, onboardModal, onboardModal,
|
onboardModal, layoutBtn1, layoutBtn2, layoutBtn3, layoutBtn4, layoutBtn5, onboardModal,
|
||||||
addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal, notificationsModal,
|
onboardModal, addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal,
|
||||||
notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn,
|
notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn,
|
||||||
onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
|
onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
|
||||||
onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
|
onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
|
||||||
@ -176,7 +176,8 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
|
|||||||
// This is debounced!
|
// This is debounced!
|
||||||
clearTimeout(updateCodeWrapCollapseStates.timeout);
|
clearTimeout(updateCodeWrapCollapseStates.timeout);
|
||||||
updateCodeWrapCollapseStates.timeout = setTimeout(function() {
|
updateCodeWrapCollapseStates.timeout = setTimeout(function() {
|
||||||
const prop = currentLayoutMode === 2 ? 'width' : 'height';
|
const prop =
|
||||||
|
currentLayoutMode === 2 || currentLayoutMode === 5 ? 'width' : 'height';
|
||||||
[htmlCode, cssCode, jsCode].forEach(function(el) {
|
[htmlCode, cssCode, jsCode].forEach(function(el) {
|
||||||
const bounds = el.getBoundingClientRect();
|
const bounds = el.getBoundingClientRect();
|
||||||
const size = bounds[prop];
|
const size = bounds[prop];
|
||||||
@ -226,7 +227,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
|
|||||||
? [currentItem.mainSizes[1], currentItem.mainSizes[0]]
|
? [currentItem.mainSizes[1], currentItem.mainSizes[0]]
|
||||||
: currentItem.mainSizes;
|
: currentItem.mainSizes;
|
||||||
} else {
|
} else {
|
||||||
mainSplitSizes = [50, 50];
|
mainSplitSizes = currentLayoutMode === 5 ? [75, 25] : [50, 50];
|
||||||
}
|
}
|
||||||
return mainSplitSizes;
|
return mainSplitSizes;
|
||||||
}
|
}
|
||||||
@ -240,7 +241,10 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
|
|||||||
}
|
}
|
||||||
|
|
||||||
var options = {
|
var options = {
|
||||||
direction: currentLayoutMode === 2 ? 'horizontal' : 'vertical',
|
direction:
|
||||||
|
currentLayoutMode === 2 || currentLayoutMode === 5
|
||||||
|
? 'horizontal'
|
||||||
|
: 'vertical',
|
||||||
minSize: minCodeWrapSize,
|
minSize: minCodeWrapSize,
|
||||||
gutterSize: 6,
|
gutterSize: 6,
|
||||||
onDragStart: function() {
|
onDragStart: function() {
|
||||||
@ -285,15 +289,12 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
currentLayoutMode = mode;
|
currentLayoutMode = mode;
|
||||||
layoutBtn1.classList.remove('selected');
|
// Remove all layout classes
|
||||||
layoutBtn2.classList.remove('selected');
|
[1, 2, 3, 4, 5].forEach(layoutNumber => {
|
||||||
layoutBtn3.classList.remove('selected');
|
window[`layoutBtn${layoutNumber}`].classList.remove('selected');
|
||||||
layoutBtn4.classList.remove('selected');
|
document.body.classList.remove(`layout-${layoutNumber}`);
|
||||||
|
});
|
||||||
$('#layoutBtn' + mode).classList.add('selected');
|
$('#layoutBtn' + mode).classList.add('selected');
|
||||||
document.body.classList.remove('layout-1');
|
|
||||||
document.body.classList.remove('layout-2');
|
|
||||||
document.body.classList.remove('layout-3');
|
|
||||||
document.body.classList.remove('layout-4');
|
|
||||||
document.body.classList.add('layout-' + mode);
|
document.body.classList.add('layout-' + mode);
|
||||||
|
|
||||||
resetSplitting();
|
resetSplitting();
|
||||||
@ -366,7 +367,8 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
|
|||||||
// Calculates the sizes of html, css & js code panes.
|
// Calculates the sizes of html, css & js code panes.
|
||||||
function getCodePaneSizes() {
|
function getCodePaneSizes() {
|
||||||
var sizes;
|
var sizes;
|
||||||
var dimensionProperty = currentLayoutMode === 2 ? 'width' : 'height';
|
var dimensionProperty =
|
||||||
|
currentLayoutMode === 2 || currentLayoutMode === 5 ? 'width' : 'height';
|
||||||
try {
|
try {
|
||||||
sizes = [
|
sizes = [
|
||||||
htmlCode.style[dimensionProperty],
|
htmlCode.style[dimensionProperty],
|
||||||
@ -2119,6 +2121,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
|
|||||||
layoutBtn2.addEventListener('click', getToggleLayoutButtonListener(2));
|
layoutBtn2.addEventListener('click', getToggleLayoutButtonListener(2));
|
||||||
layoutBtn3.addEventListener('click', getToggleLayoutButtonListener(3));
|
layoutBtn3.addEventListener('click', getToggleLayoutButtonListener(3));
|
||||||
layoutBtn4.addEventListener('click', getToggleLayoutButtonListener(4));
|
layoutBtn4.addEventListener('click', getToggleLayoutButtonListener(4));
|
||||||
|
layoutBtn5.addEventListener('click', getToggleLayoutButtonListener(5));
|
||||||
|
|
||||||
notificationsBtn.addEventListener('click', function() {
|
notificationsBtn.addEventListener('click', function() {
|
||||||
scope.toggleModal(notificationsModal);
|
scope.toggleModal(notificationsModal);
|
||||||
|
@ -226,6 +226,15 @@ body:not(.light-version).overlay-visible .main-container {
|
|||||||
.layout-2 .demo-side {
|
.layout-2 .demo-side {
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
/* All vertical layout */
|
||||||
|
.layout-5 .code-side {
|
||||||
|
flex-direction: row;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
.layout-5 .code-wrap {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
/* Fullscreen layout */
|
||||||
.layout-4 .code-side {
|
.layout-4 .code-side {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -256,7 +265,8 @@ body:not(.light-version).overlay-visible .main-container {
|
|||||||
transition: height 0.3s ease, width 0.3s ease;
|
transition: height 0.3s ease, width 0.3s ease;
|
||||||
will-change: height;
|
will-change: height;
|
||||||
}
|
}
|
||||||
.layout-2 .code-wrap.is-minimized {
|
.layout-2 .code-wrap.is-minimized,
|
||||||
|
.layout-5 .code-wrap.is-minimized {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
.is-dragging .code-wrap {
|
.is-dragging .code-wrap {
|
||||||
@ -266,13 +276,6 @@ body:not(.light-version).overlay-visible .main-container {
|
|||||||
height: auto;
|
height: auto;
|
||||||
width: 33%;
|
width: 33%;
|
||||||
}
|
}
|
||||||
.code-wrap:nth-of-type(3) {
|
|
||||||
animation-delay: 0.3s;
|
|
||||||
}
|
|
||||||
.code-wrap:nth-of-type(5) {
|
|
||||||
animation-delay: 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-wrap__header {
|
.code-wrap__header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@ -292,7 +295,8 @@ body:not(.light-version).overlay-visible .main-container {
|
|||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
/*transform-origin: left center;*/
|
/*transform-origin: left center;*/
|
||||||
}
|
}
|
||||||
.layout-2 .code-side .is-minimized .code-wrap__header {
|
.layout-2 .code-side .is-minimized .code-wrap__header,
|
||||||
|
.layout-5 .code-side .is-minimized .code-wrap__header {
|
||||||
writing-mode: vertical-lr;
|
writing-mode: vertical-lr;
|
||||||
padding: 10px 5px;
|
padding: 10px 5px;
|
||||||
}
|
}
|
||||||
@ -337,7 +341,9 @@ body:not(.light-version).overlay-visible .main-container {
|
|||||||
height: calc(100% - 25px); /* 25px for header */
|
height: calc(100% - 25px); /* 25px for header */
|
||||||
font-size: var(--code-font-size);
|
font-size: var(--code-font-size);
|
||||||
}
|
}
|
||||||
.layout-2 .is-minimized .Codemirror {
|
/* TODO: Check why? */
|
||||||
|
.layout-2 .is-minimized .Codemirror,
|
||||||
|
.layout-5 .is-minimized .Codemirror {
|
||||||
height: calc(100%);
|
height: calc(100%);
|
||||||
}
|
}
|
||||||
.Codemirror pre {
|
.Codemirror pre {
|
||||||
|
Reference in New Issue
Block a user