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

WIP

Browse Source
This commit is contained in:
Kushagra Gour
2016-11-23 00:21:14 +05:30
parent a1c16bc429
commit 800c391cb7
3 changed files with 66 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/index.html
View File

@@ -106,17 +106,24 @@
flex-direction: row;
}
.code-wrap {
display: flex;
flex-direction: column;
flex-basis: inherit;
height: 33%;
overflow: hidden;
position: relative;
transition: height 0.30s ease;
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;*/
}
.code-wrap.is-dragging
.code-wrap.is-minimized {
flex-direction: row;
}
.is-dragging .code-wrap {
transition: none;
}
.layout-2 .code-wrap {
height: auto;
width: 33%;
@@ -132,12 +139,30 @@
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 20px;
padding: 5px 10px;
background: rgba(0,0,0,0.55);
color: #888;
border-bottom: 1px solid rgba(0,0,0,0.3);
font-weight: bold;
}
.is-minimized .code-wrap__header {
writing-mode: vertical-lr;
padding: 10px 5px;
}
.is-minimized .code-wrap__header .caret {
display: none;
}
.code-wrap__header-btn {
width: 18px;
height: 18px;
display: inline-block;
}
.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>');
}
.code-wrap__collapse-btn.is-minimized: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>');
}
@keyframes pop-in {
from { transform: scale(0.9); opacity: 0; }
to { transform: scale(1); opacity: 1; }
@@ -312,6 +337,7 @@
left: -18px;
top: 24px;
opacity: 0;
visibility: hidden;
border-radius: 50%;
padding: 10px 14px;
background: crimson;
@@ -319,6 +345,7 @@
}
.saved-items-pane.is-open .saved-items-pane__close-btn {
opacity: 1;
visibility: visible;
}
.saved-item-tile {
padding: 20px;
@@ -483,7 +510,7 @@
</style>
</head>
<body class="layout-">
<body>
<div class="main-container">
<div class="main-header">
<div class="fr">
@@ -513,10 +540,7 @@
</ul>
</div>
<div class="code-wrap__header-right-options">
<a data-collapse-id="0" class="js-code-collapse-btn">
<svg style="width:18px;height:18px" viewBox="0 0 24 24">
<path 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>
<a data-collapse-id="0" class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn">
</a>
</div>
</div>
@@ -532,10 +556,7 @@
</ul>
</div>
<div class="code-wrap__header-right-options">
<a data-collapse-id="1" class="js-code-collapse-btn">
<svg style="width:18px;height:18px" viewBox="0 0 24 24">
<path 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>
<a data-collapse-id="1" class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn">
</a>
</div>
</div>
@@ -551,10 +572,7 @@
</ul>
</div>
<div class="code-wrap__header-right-options">
<a data-collapse-id="2" class="js-code-collapse-btn">
<svg style="width:18px;height:18px" viewBox="0 0 24 24">
<path 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>
<a data-collapse-id="2" class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn">
</a>
</div>
</div>

4
src/lib/split.js
View File

@@ -537,12 +537,12 @@ var global = this
pair = pairs[i - 1]
calculateSizes.call(pair)
adjust.call(pair, pair.size - pair.bGutterSize)
adjust.call(pair, pair.size - Math.max(pair.bGutterSize, pair.aMin))
} else {
pair = pairs[i]
calculateSizes.call(pair)
adjust.call(pair, pair.aMin)
adjust.call(pair, Math.max(pair.aGutterSize, pair.aMin))
}
},
destroy: function () {

34
src/script.js
View File

@@ -44,7 +44,8 @@
, currentItem
, savedItems
, minCodeWrapSize = 33
, splitInstance
, mainSplitInstance
, codeSplitInstance
// TODO: for legacy reasons when. Will be refactored as global preferences.
, prefs = {}
@@ -80,22 +81,19 @@
function resetSplitting() {
var gutters = $all('.gutter');
for (var i = gutters.length; i--;) {
gutters[i].remove();
if (codeSplitInstance) {
codeSplitInstance.destroy();
}
if (mainSplitInstance) {
mainSplitInstance.destroy();
}
$('#js-html-code').setAttribute('style', '');
$('#js-css-code').setAttribute('style', '');
$('#js-js-code').setAttribute('style', '');
$('#js-code-side').setAttribute('style', '');
$('#js-demo-side').setAttribute('style', '');
splitInstance = 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'),
minSize: minCodeWrapSize,
gutterSize: 6
});
Split(['#js-code-side', '#js-demo-side' ], {
mainSplitInstance = Split(['#js-code-side', '#js-demo-side' ], {
direction: (currentLayoutMode === 2 ? 'vertical' : 'horizontal'),
minSize: 34,
gutterSize: 6
@@ -215,6 +213,7 @@
}
function openItem(itemId) {
currentItem = savedItems[itemId];
codeSplitInstance.setSizes([ 33.3, 33.3, 33.3 ]);
refreshEditor();
alertsService.add('Saved item loaded');
}
@@ -614,10 +613,12 @@
btn.addEventListener('click', function (e) {
if (e.currentTarget.classList.contains('is-minimized')) {
e.currentTarget.classList.remove('is-minimized');
splitInstance.setSizes([ 33.3, 33.3, 33.3 ]);
e.currentTarget.parentElement.parentElement.parentElement.classList.remove('is-minimized');
codeSplitInstance.setSizes([ 33.3, 33.3, 33.3 ]);
} else {
splitInstance.collapse(e.currentTarget.dataset.collapseId);
codeSplitInstance.collapse(parseInt(e.currentTarget.dataset.collapseId, 10));
e.currentTarget.classList.add('is-minimized');
e.currentTarget.parentElement.parentElement.parentElement.classList.add('is-minimized');
}
return false;
/*Split(['#js-html-code', '#js-css-code', '#js-js-code'], {
@@ -661,6 +662,13 @@
trackEvent('ui', 'settingsBtnClick');
});
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: ''