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

add a 5th layout mode 🔥

Browse Source
This commit is contained in:
Kushagra Gour
2018-01-28 15:49:36 +05:30
parent 871e037373
commit 445078cbb2
3 changed files with 54 additions and 35 deletions

32
src/index.html

@ -233,6 +233,11 @@
<use xlink:href="#mode-icon" />
</svg>
</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">
<svg viewBox="0 0 100 100">
<rect x="0" y="0" width="100" height="100" />
@ -524,17 +529,6 @@
<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>
<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>"}'>
@ -599,6 +593,22 @@
<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" />
</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">
<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
<g fill="none" fill-rule="evenodd" stroke-width="10">

31
src/script.js

@ -1,7 +1,7 @@
/* global trackEvent */
/* global layoutBtn1, layoutBtn2, layoutBtn3, helpModal, notificationsModal, addLibraryModal,
onboardModal, layoutBtn1, layoutBtn2, layoutBtn3, layoutBtn4, onboardModal, onboardModal,
addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal, notificationsModal,
onboardModal, layoutBtn1, layoutBtn2, layoutBtn3, layoutBtn4, layoutBtn5, onboardModal,
onboardModal, addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal,
notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn,
onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
@ -176,7 +176,8 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
// This is debounced!
clearTimeout(updateCodeWrapCollapseStates.timeout);
updateCodeWrapCollapseStates.timeout = setTimeout(function() {
const prop = currentLayoutMode === 2 ? 'width' : 'height';
const prop =
currentLayoutMode === 2 || currentLayoutMode === 5 ? 'width' : 'height';
[htmlCode, cssCode, jsCode].forEach(function(el) {
const bounds = el.getBoundingClientRect();
const size = bounds[prop];
@ -226,7 +227,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
? [currentItem.mainSizes[1], currentItem.mainSizes[0]]
: currentItem.mainSizes;
} else {
mainSplitSizes = [50, 50];
mainSplitSizes = currentLayoutMode === 5 ? [75, 25] : [50, 50];
}
return mainSplitSizes;
}
@ -240,7 +241,10 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
}
var options = {
direction: currentLayoutMode === 2 ? 'horizontal' : 'vertical',
direction:
currentLayoutMode === 2 || currentLayoutMode === 5
? 'horizontal'
: 'vertical',
minSize: minCodeWrapSize,
gutterSize: 6,
onDragStart: function() {
@ -285,15 +289,12 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
return;
}
currentLayoutMode = mode;
layoutBtn1.classList.remove('selected');
layoutBtn2.classList.remove('selected');
layoutBtn3.classList.remove('selected');
layoutBtn4.classList.remove('selected');
// Remove all layout classes
[1, 2, 3, 4, 5].forEach(layoutNumber => {
window[`layoutBtn${layoutNumber}`].classList.remove('selected');
document.body.classList.remove(`layout-${layoutNumber}`);
});
$('#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);
resetSplitting();
@ -366,7 +367,8 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
// Calculates the sizes of html, css & js code panes.
function getCodePaneSizes() {
var sizes;
var dimensionProperty = currentLayoutMode === 2 ? 'width' : 'height';
var dimensionProperty =
currentLayoutMode === 2 || currentLayoutMode === 5 ? 'width' : 'height';
try {
sizes = [
htmlCode.style[dimensionProperty],
@ -2119,6 +2121,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
layoutBtn2.addEventListener('click', getToggleLayoutButtonListener(2));
layoutBtn3.addEventListener('click', getToggleLayoutButtonListener(3));
layoutBtn4.addEventListener('click', getToggleLayoutButtonListener(4));
layoutBtn5.addEventListener('click', getToggleLayoutButtonListener(5));
notificationsBtn.addEventListener('click', function() {
scope.toggleModal(notificationsModal);

26
src/style.css

@ -226,6 +226,15 @@ body:not(.light-version).overlay-visible .main-container {
.layout-2 .demo-side {
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 {
display: none;
}
@ -256,7 +265,8 @@ body:not(.light-version).overlay-visible .main-container {
transition: height 0.3s ease, width 0.3s ease;
will-change: height;
}
.layout-2 .code-wrap.is-minimized {
.layout-2 .code-wrap.is-minimized,
.layout-5 .code-wrap.is-minimized {
flex-direction: row;
}
.is-dragging .code-wrap {
@ -266,13 +276,6 @@ body:not(.light-version).overlay-visible .main-container {
height: auto;
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 {
display: flex;
flex-shrink: 0;
@ -292,7 +295,8 @@ body:not(.light-version).overlay-visible .main-container {
opacity: 0.5;
/*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;
padding: 10px 5px;
}
@ -337,7 +341,9 @@ body:not(.light-version).overlay-visible .main-container {
height: calc(100% - 25px); /* 25px for header */
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%);
}
.Codemirror pre {