diff --git a/src/lib/split.js b/src/lib/split.js
index 00a4c67..4c0809d 100644
--- a/src/lib/split.js
+++ b/src/lib/split.js
@@ -31,7 +31,7 @@ var global = this
//
// 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.
- //
+ //
// 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
, calc = (function () {
@@ -63,9 +63,9 @@ var global = this
// 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
// how the following functions operate, since each function is bound to a pair.
- //
+ //
// A pair object is shaped like this:
- //
+ //
// {
// a: DOM element,
// b: DOM element,
@@ -79,7 +79,7 @@ var global = this
// }
//
// The basic sequence:
- //
+ //
// 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.
// 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
// also makes it easy to store references to listeners that that will be
// added and removed.
- //
+ //
// 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.
//
@@ -249,12 +249,12 @@ var global = this
}
// drag, where all the magic happens. The logic is really quite simple:
- //
+ //
// 1. Ignore if the pair is not dragging.
// 2. Get the offset of the event.
// 3. Snap offset to min if within snappable range (within min + snapOffset).
// 4. Actually adjust each element in the pair to offset.
- //
+ //
// ---------------------------------------------------------------------
// | | <- this.aMin || this.bMin -> | |
// | | | <- 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
// continously:
- //
+ //
// `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.
// `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
// staticly assigning sizes without draggable gutters. Assigns a string
// to `size`.
- //
+ //
// IE9 and above
if (!isIE8) {
// Create gutter elements for each pair.
@@ -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 () {
diff --git a/src/script.js b/src/script.js
index ae416ca..57adf61 100644
--- a/src/script.js
+++ b/src/script.js
@@ -44,7 +44,8 @@
, currentItem
, savedItems
, minCodeWrapSize = 33
- , splitInstance
+ , mainSplitInstance
+ , codeSplitInstance
// TODO: for legacy reasons when. Will be refactored as global preferences.
, prefs = {}
@@ -78,30 +79,57 @@
editur.cm = {};
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() {
- var gutters = $all('.gutter');
- for (var i = gutters.length; i--;) {
- gutters[i].remove();
+ function resetSplitting(dontRecreate) {
+ 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'], {
+ var options = {
direction: (currentLayoutMode === 2 ? 'horizontal' : 'vertical'),
minSize: minCodeWrapSize,
- gutterSize: 6
- });
- Split(['#js-code-side', '#js-demo-side' ], {
+ gutterSize: 6,
+ onDragEnd: function() {
+ 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'),
minSize: 34,
gutterSize: 6
});
}
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;
$('#js-layout-btn-1').classList.remove('selected');
$('#js-layout-btn-2').classList.remove('selected');
@@ -151,10 +179,28 @@
currentItem.jsMode = jsMode;
currentItem.updatedOn = Date.now();
currentItem.layoutMode = currentLayoutMode;
- utils.log('saving key', key || currentItem.id, currentItem)
- saveSetting(key || currentItem.id, currentItem, function () {
- alertsService.add('Item saved.');
- });
+
+ // debugger;
+ 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) {
@@ -215,6 +261,7 @@
}
function openItem(itemId) {
currentItem = savedItems[itemId];
+ // codeSplitInstance.setSizes([ 33.3, 33.3, 33.3 ]);
refreshEditor();
alertsService.add('Saved item loaded');
}
@@ -612,19 +659,26 @@
var collapseBtns = [].slice.call($all('.js-code-collapse-btn'));
collapseBtns.forEach(function (btn) {
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 ]);
+ 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 {
- splitInstance.collapse(e.currentTarget.dataset.collapseId);
- e.currentTarget.classList.add('is-minimized');
+ // codeSplitInstance.setSizes([ 0, 50, 50 ]);
+ codeSplitInstance.collapse(parseInt(e.currentTarget.dataset.collapseId, 10));
+ // e.currentTarget.classList.add('is-minimized');
+ codeWrapParent.classList.add('is-minimized');
}
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');
});
+ 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: ''