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

Merge branch 'collapsing' into release-2.0

Browse Source
This commit is contained in:
Kushagra Gour
2016-11-27 08:53:56 +05:30
parent a1c16bc429 75c68ec769
commit def2dcab15
3 changed files with 138 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/index.html
View File

@ -106,17 +106,24 @@
flex-direction: row; flex-direction: row;
} }
.code-wrap { .code-wrap {
display: flex;
flex-direction: column;
flex-basis: inherit; flex-basis: inherit;
height: 33%; height: 33%;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
transition: height 0.30s ease; transition: height 0.30s ease, width 0.30s ease;
will-change: height; will-change: height;
/*animation: pop-in 0.4s cubic-bezier(.71,1.7,.77,1.24) forwards 0.2s;*/ /*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;*/ /*animation: pop-in 0.4s ease forwards 0.2s;*/
/*opacity: 0;*/ /*opacity: 0;*/
} }
.code-wrap.is-dragging .layout-2 .code-wrap.is-minimized {
flex-direction: row;
}
.is-dragging .code-wrap {
transition: none;
}
.layout-2 .code-wrap { .layout-2 .code-wrap {
height: auto; height: auto;
width: 33%; width: 33%;
@ -130,14 +137,33 @@
.code-wrap__header { .code-wrap__header {
display: flex; display: flex;
flex-shrink: 0;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 5px 20px; padding: 5px 10px;
background: rgba(0,0,0,0.55); background: rgba(0,0,0,0.55);
color: #888; color: #888;
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;
} }
.layout-2 .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>');
}
.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>');
}
@keyframes pop-in { @keyframes pop-in {
from { transform: scale(0.9); opacity: 0; } from { transform: scale(0.9); opacity: 0; }
to { transform: scale(1); opacity: 1; } to { transform: scale(1); opacity: 1; }
@ -149,6 +175,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;
} }
@ -312,6 +341,7 @@
left: -18px; left: -18px;
top: 24px; top: 24px;
opacity: 0; opacity: 0;
visibility: hidden;
border-radius: 50%; border-radius: 50%;
padding: 10px 14px; padding: 10px 14px;
background: crimson; background: crimson;
@ -319,6 +349,7 @@
} }
.saved-items-pane.is-open .saved-items-pane__close-btn { .saved-items-pane.is-open .saved-items-pane__close-btn {
opacity: 1; opacity: 1;
visibility: visible;
} }
.saved-item-tile { .saved-item-tile {
padding: 20px; padding: 20px;
@ -483,7 +514,7 @@
</style> </style>
</head> </head>
<body class="layout-"> <body>
<div class="main-container"> <div class="main-container">
<div class="main-header"> <div class="main-header">
<div class="fr"> <div class="fr">
@ -513,10 +544,7 @@
</ul> </ul>
</div> </div>
<div class="code-wrap__header-right-options"> <div class="code-wrap__header-right-options">
<a data-collapse-id="0" class="js-code-collapse-btn"> <a data-collapse-id="0" class="js-code-collapse-btn code-wrap__header-btn code-wrap__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> </a>
</div> </div>
</div> </div>
@ -532,10 +560,7 @@
</ul> </ul>
</div> </div>
<div class="code-wrap__header-right-options"> <div class="code-wrap__header-right-options">
<a data-collapse-id="1" class="js-code-collapse-btn"> <a data-collapse-id="1" class="js-code-collapse-btn code-wrap__header-btn code-wrap__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> </a>
</div> </div>
</div> </div>
@ -551,10 +576,7 @@
</ul> </ul>
</div> </div>
<div class="code-wrap__header-right-options"> <div class="code-wrap__header-right-options">
<a data-collapse-id="2" class="js-code-collapse-btn"> <a data-collapse-id="2" class="js-code-collapse-btn code-wrap__header-btn code-wrap__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> </a>
</div> </div>
</div> </div>

22
src/lib/split.js
View File

@ -31,7 +31,7 @@ var global = this
// //
// The first determines which prefixes of CSS calc we need. // The first determines which prefixes of CSS calc we need.
// We only need to do this once on startup, when this anonymous function is called. // We only need to do this once on startup, when this anonymous function is called.
// //
// Tests -webkit, -moz and -o prefixes. Modified from StackOverflow: // Tests -webkit, -moz and -o prefixes. Modified from StackOverflow:
// http://stackoverflow.com/questions/16625140/js-feature-detection-to-detect-the-usage-of-webkit-calc-over-calc/16625167#16625167 // http://stackoverflow.com/questions/16625140/js-feature-detection-to-detect-the-usage-of-webkit-calc-over-calc/16625167#16625167
, calc = (function () { , calc = (function () {
@ -63,9 +63,9 @@ var global = this
// of elements as an independant pair. Dragging the gutter between two elements // of elements as an independant pair. Dragging the gutter between two elements
// only changes the dimensions of elements in that pair. This is key to understanding // only changes the dimensions of elements in that pair. This is key to understanding
// how the following functions operate, since each function is bound to a pair. // how the following functions operate, since each function is bound to a pair.
// //
// A pair object is shaped like this: // A pair object is shaped like this:
// //
// { // {
// a: DOM element, // a: DOM element,
// b: DOM element, // b: DOM element,
@ -79,7 +79,7 @@ var global = this
// } // }
// //
// The basic sequence: // The basic sequence:
// //
// 1. Set defaults to something sane. `options` doesn't have to be passed at all. // 1. Set defaults to something sane. `options` doesn't have to be passed at all.
// 2. Initialize a bunch of strings based on the direction we're splitting. // 2. Initialize a bunch of strings based on the direction we're splitting.
// A lot of the behavior in the rest of the library is paramatized down to // A lot of the behavior in the rest of the library is paramatized down to
@ -139,7 +139,7 @@ var global = this
// Each helper is bound to a pair object that contains it's metadata. This // Each helper is bound to a pair object that contains it's metadata. This
// also makes it easy to store references to listeners that that will be // also makes it easy to store references to listeners that that will be
// added and removed. // added and removed.
// //
// Even though there are no other functions contained in them, aliasing // Even though there are no other functions contained in them, aliasing
// this to self saves 50 bytes or so since it's used so frequently. // this to self saves 50 bytes or so since it's used so frequently.
// //
@ -249,12 +249,12 @@ var global = this
} }
// drag, where all the magic happens. The logic is really quite simple: // drag, where all the magic happens. The logic is really quite simple:
// //
// 1. Ignore if the pair is not dragging. // 1. Ignore if the pair is not dragging.
// 2. Get the offset of the event. // 2. Get the offset of the event.
// 3. Snap offset to min if within snappable range (within min + snapOffset). // 3. Snap offset to min if within snappable range (within min + snapOffset).
// 4. Actually adjust each element in the pair to offset. // 4. Actually adjust each element in the pair to offset.
// //
// --------------------------------------------------------------------- // ---------------------------------------------------------------------
// | | <- this.aMin || this.bMin -> | | // | | <- this.aMin || this.bMin -> | |
// | | | <- this.snapOffset || this.snapOffset -> | | | // | | | <- this.snapOffset || this.snapOffset -> | | |
@ -297,7 +297,7 @@ var global = this
// Cache some important sizes when drag starts, so we don't have to do that // Cache some important sizes when drag starts, so we don't have to do that
// continously: // continously:
// //
// `size`: The total size of the pair. First element + second element + first gutter + second gutter. // `size`: The total size of the pair. First element + second element + first gutter + second gutter.
// `percentage`: The percentage between 0-100 that the pair occupies in the parent. // `percentage`: The percentage between 0-100 that the pair occupies in the parent.
// `start`: The leading side of the first element. // `start`: The leading side of the first element.
@ -482,7 +482,7 @@ var global = this
// Determine the size of the current element. IE8 is supported by // Determine the size of the current element. IE8 is supported by
// staticly assigning sizes without draggable gutters. Assigns a string // staticly assigning sizes without draggable gutters. Assigns a string
// to `size`. // to `size`.
// //
// IE9 and above // IE9 and above
if (!isIE8) { if (!isIE8) {
// Create gutter elements for each pair. // Create gutter elements for each pair.
@ -537,12 +537,12 @@ var global = this
pair = pairs[i - 1] pair = pairs[i - 1]
calculateSizes.call(pair) calculateSizes.call(pair)
adjust.call(pair, pair.size - pair.bGutterSize) adjust.call(pair, pair.size - Math.max(pair.bGutterSize, pair.aMin))
} else { } else {
pair = pairs[i] pair = pairs[i]
calculateSizes.call(pair) calculateSizes.call(pair)
adjust.call(pair, pair.aMin) adjust.call(pair, Math.max(pair.aGutterSize, pair.aMin))
} }
}, },
destroy: function () { destroy: function () {

117
src/script.js
View File

@ -44,7 +44,8 @@
, currentItem , currentItem
, savedItems , savedItems
, minCodeWrapSize = 33 , minCodeWrapSize = 33
, splitInstance , mainSplitInstance
, codeSplitInstance
// TODO: for legacy reasons when. Will be refactored as global preferences. // TODO: for legacy reasons when. Will be refactored as global preferences.
, prefs = {} , prefs = {}
@ -78,30 +79,57 @@
editur.cm = {}; editur.cm = {};
editur.demoFrameDocument = frame.contentDocument || frame.contentWindow.document; editur.demoFrameDocument = frame.contentDocument || frame.contentWindow.document;
// Check all the code wrap if they are minimized or not
function updateCodeWrapCollapseStates() {
clearTimeout(updateCodeWrapCollapseStates.timeout);
updateCodeWrapCollapseStates.timeout = setTimeout(function () {
[ htmlCode, cssCode, jsCode ].forEach(function (el) {
var bounds = el.getBoundingClientRect();
if (bounds[currentLayoutMode === 2 ? 'width' : 'height'] < 100) {
el.classList.add('is-minimized');
} else {
el.classList.remove('is-minimized');
}
});
}, 50);
}
function resetSplitting() { function resetSplitting(dontRecreate) {
var gutters = $all('.gutter'); if (codeSplitInstance) {
for (var i = gutters.length; i--;) { codeSplitInstance.destroy();
gutters[i].remove(); }
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'], { var options = {
direction: (currentLayoutMode === 2 ? 'horizontal' : 'vertical'), direction: (currentLayoutMode === 2 ? 'horizontal' : 'vertical'),
minSize: minCodeWrapSize, minSize: minCodeWrapSize,
gutterSize: 6 gutterSize: 6,
}); onDragEnd: function() {
Split(['#js-code-side', '#js-demo-side' ], { updateCodeWrapCollapseStates();
}
};
if (currentItem && currentItem.sizes) {
options.sizes = currentItem.sizes;
} else {
options.sizes = [ 33.33, 33.33, 33.33 ];
}
console.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'), direction: (currentLayoutMode === 2 ? 'vertical' : 'horizontal'),
minSize: 34, minSize: 34,
gutterSize: 6 gutterSize: 6
}); });
} }
function toggleLayout(mode) { function toggleLayout(mode) {
if (currentLayoutMode === mode) {
console.log('setsize', currentItem.sizes || [ 33.33, 33.33, 33.33 ]);
codeSplitInstance.setSizes(currentItem.sizes || [ 33.33, 33.33, 33.33 ]);
currentLayoutMode = mode;
return;
}
currentLayoutMode = mode; currentLayoutMode = mode;
$('#js-layout-btn-1').classList.remove('selected'); $('#js-layout-btn-1').classList.remove('selected');
$('#js-layout-btn-2').classList.remove('selected'); $('#js-layout-btn-2').classList.remove('selected');
@ -151,10 +179,28 @@
currentItem.jsMode = jsMode; currentItem.jsMode = jsMode;
currentItem.updatedOn = Date.now(); currentItem.updatedOn = Date.now();
currentItem.layoutMode = currentLayoutMode; currentItem.layoutMode = currentLayoutMode;
utils.log('saving key', key || currentItem.id, currentItem)
saveSetting(key || currentItem.id, currentItem, function () { // debugger;
alertsService.add('Item saved.'); var dimensionProperty = currentLayoutMode === 2 ? 'width' : 'height';
});
var sizes;
try {
sizes = [
+htmlCode.style[dimensionProperty].match(/([\d\.]+)%/)[1],
+cssCode.style[dimensionProperty].match(/([\d\.]+)%/)[1],
+jsCode.style[dimensionProperty].match(/([\d\.]+)%/)[1]
];
} catch(e) {
sizes = [ 33.33, 33.33, 33.33 ]
} finally {
currentItem.sizes = sizes;
utils.log('saving key', key || currentItem.id, currentItem)
saveSetting(key || currentItem.id, currentItem, function () {
alertsService.add('Item saved.');
});
}
} }
function populateItemsInSavedPane(items) { function populateItemsInSavedPane(items) {
@ -215,6 +261,7 @@
} }
function openItem(itemId) { function openItem(itemId) {
currentItem = savedItems[itemId]; currentItem = savedItems[itemId];
// codeSplitInstance.setSizes([ 33.3, 33.3, 33.3 ]);
refreshEditor(); refreshEditor();
alertsService.add('Saved item loaded'); alertsService.add('Saved item loaded');
} }
@ -612,19 +659,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')) {
splitInstance.setSizes([ 33.3, 33.3, 33.3 ]); // e.currentTarget.classList.remove('is-minimized');
codeWrapParent.classList.remove('is-minimized');
codeSplitInstance.setSizes([ 33.3, 33.3, 33.3 ]);
} else { } else {
splitInstance.collapse(e.currentTarget.dataset.collapseId); // codeSplitInstance.setSizes([ 0, 50, 50 ]);
e.currentTarget.classList.add('is-minimized'); codeSplitInstance.collapse(parseInt(e.currentTarget.dataset.collapseId, 10));
// e.currentTarget.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 // Update code wrap collapse states whenever any of them transitions due to any
});*/ // reason.
[ htmlCode, cssCode, jsCode ].forEach(function (el) {
el.addEventListener('transitionend', function() {
updateCodeWrapCollapseStates();
}); });
}); });
@ -661,6 +715,13 @@
trackEvent('ui', 'settingsBtnClick'); 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({ chrome.storage.local.get({
layoutMode: 1, layoutMode: 1,
code: '' code: ''