From 800c391cb7e0089b80b9b2f096e110274b5bb2bb Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Wed, 23 Nov 2016 00:21:14 +0530 Subject: [PATCH 1/4] WIP --- src/index.html | 50 ++++++++++++++++++++++++++++++++---------------- src/lib/split.js | 22 ++++++++++----------- src/script.js | 34 +++++++++++++++++++------------- 3 files changed, 66 insertions(+), 40 deletions(-) diff --git a/src/index.html b/src/index.html index cb97b3d..7cae58b 100644 --- a/src/index.html +++ b/src/index.html @@ -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,'); + } + .code-wrap__collapse-btn.is-minimized:before { + content: url('data:image/svg+xml;utf8,'); + } @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 @@ - +
@@ -513,10 +540,7 @@
- - - - +
@@ -532,10 +556,7 @@
- - - - +
@@ -551,10 +572,7 @@
- - - - +
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..da62231 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 = {} @@ -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: '' From 6dbc3626c5e6174843143af20d08d0b4c629992d Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Sat, 26 Nov 2016 01:18:01 +0530 Subject: [PATCH 2/4] fix logic. --- src/index.html | 9 ++++++--- src/script.js | 42 +++++++++++++++++++++++++++++++----------- 2 files changed, 37 insertions(+), 14 deletions(-) diff --git a/src/index.html b/src/index.html index 7cae58b..ed40d1a 100644 --- a/src/index.html +++ b/src/index.html @@ -118,7 +118,7 @@ /*animation: pop-in 0.4s ease forwards 0.2s;*/ /*opacity: 0;*/ } - .code-wrap.is-minimized { + .layout-2 .code-wrap.is-minimized { flex-direction: row; } .is-dragging .code-wrap { @@ -145,7 +145,7 @@ border-bottom: 1px solid rgba(0,0,0,0.3); font-weight: bold; } - .is-minimized .code-wrap__header { + .layout-2 .is-minimized .code-wrap__header { writing-mode: vertical-lr; padding: 10px 5px; } @@ -160,7 +160,7 @@ .code-wrap__collapse-btn:before { content: url('data:image/svg+xml;utf8,'); } - .code-wrap__collapse-btn.is-minimized:before { + .is-minimized .code-wrap__collapse-btn:before { content: url('data:image/svg+xml;utf8,'); } @keyframes pop-in { @@ -174,6 +174,9 @@ height: calc(100% - 25px); /* 25px for header */ font-size: 16px; } + .layout-2 .is-minimized .Codemirror { + height: calc(100%); + } .Codemirror pre { font-family: 'Inconsolata', monospace; } diff --git a/src/script.js b/src/script.js index da62231..2300425 100644 --- a/src/script.js +++ b/src/script.js @@ -80,6 +80,18 @@ editur.demoFrameDocument = frame.contentDocument || frame.contentWindow.document; + function updateCodeWrapCollapseStates() { + ['#js-html-code', '#js-css-code', '#js-js-code'].forEach(function (selector) { + var el = document.querySelector(selector); + var bounds = el.getBoundingClientRect(); + if (bounds.width < 150) { + el.classList.add('is-minimized'); + } else { + el.classList.remove('is-minimized'); + } + }); + } + function resetSplitting() { if (codeSplitInstance) { codeSplitInstance.destroy(); @@ -91,7 +103,10 @@ codeSplitInstance = Split(['#js-html-code', '#js-css-code', '#js-js-code'], { direction: (currentLayoutMode === 2 ? 'horizontal' : 'vertical'), minSize: minCodeWrapSize, - gutterSize: 6 + gutterSize: 6, + onDragEnd: function() { + updateCodeWrapCollapseStates(); + } }); mainSplitInstance = Split(['#js-code-side', '#js-demo-side' ], { direction: (currentLayoutMode === 2 ? 'vertical' : 'horizontal'), @@ -611,21 +626,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'); - e.currentTarget.parentElement.parentElement.parentElement.classList.remove('is-minimized'); + 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 { + // codeSplitInstance.setSizes([ 0, 50, 50 ]); codeSplitInstance.collapse(parseInt(e.currentTarget.dataset.collapseId, 10)); - e.currentTarget.classList.add('is-minimized'); - e.currentTarget.parentElement.parentElement.parentElement.classList.add('is-minimized'); + // 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 - });*/ + }); + }); + + ['#js-html-code', '#js-css-code', '#js-js-code'].forEach(function (selector) { + var el = document.querySelector(selector); + el.addEventListener('transitionend', function() { + console.log('transitionend') + updateCodeWrapCollapseStates(); }); }); From 5411a1f3a53bb15d05acf23e0e79adf393f8b0e6 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Sat, 26 Nov 2016 13:29:50 +0530 Subject: [PATCH 3/4] debounce collapse updation. --- src/script.js | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/src/script.js b/src/script.js index 2300425..f46b160 100644 --- a/src/script.js +++ b/src/script.js @@ -81,15 +81,21 @@ function updateCodeWrapCollapseStates() { - ['#js-html-code', '#js-css-code', '#js-js-code'].forEach(function (selector) { - var el = document.querySelector(selector); - var bounds = el.getBoundingClientRect(); - if (bounds.width < 150) { - el.classList.add('is-minimized'); - } else { - el.classList.remove('is-minimized'); - } - }); + // if (updateCodeWrapCollapseStates.timeout) { + clearTimeout(updateCodeWrapCollapseStates.timeout); + // } + updateCodeWrapCollapseStates.timeout = setTimeout(function () { + console.log('refreshing'); + ['#js-html-code', '#js-css-code', '#js-js-code'].forEach(function (selector) { + var el = document.querySelector(selector); + var bounds = el.getBoundingClientRect(); + if (bounds.width < 150) { + el.classList.add('is-minimized'); + } else { + el.classList.remove('is-minimized'); + } + }); + }, 500); } function resetSplitting() { @@ -644,7 +650,6 @@ ['#js-html-code', '#js-css-code', '#js-js-code'].forEach(function (selector) { var el = document.querySelector(selector); el.addEventListener('transitionend', function() { - console.log('transitionend') updateCodeWrapCollapseStates(); }); }); From 75c68ec7692c5ab91681df9a79bfba2a0235f169 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Sun, 27 Nov 2016 08:16:43 +0530 Subject: [PATCH 4/4] persist the split sizes in theitem itself. --- src/index.html | 1 + src/script.js | 66 +++++++++++++++++++++++++++++++++++--------------- 2 files changed, 48 insertions(+), 19 deletions(-) diff --git a/src/index.html b/src/index.html index ed40d1a..d0edd09 100644 --- a/src/index.html +++ b/src/index.html @@ -137,6 +137,7 @@ .code-wrap__header { display: flex; + flex-shrink: 0; justify-content: space-between; align-items: center; padding: 5px 10px; diff --git a/src/script.js b/src/script.js index f46b160..57adf61 100644 --- a/src/script.js +++ b/src/script.js @@ -79,26 +79,22 @@ editur.cm = {}; editur.demoFrameDocument = frame.contentDocument || frame.contentWindow.document; - + // Check all the code wrap if they are minimized or not function updateCodeWrapCollapseStates() { - // if (updateCodeWrapCollapseStates.timeout) { - clearTimeout(updateCodeWrapCollapseStates.timeout); - // } + clearTimeout(updateCodeWrapCollapseStates.timeout); updateCodeWrapCollapseStates.timeout = setTimeout(function () { - console.log('refreshing'); - ['#js-html-code', '#js-css-code', '#js-js-code'].forEach(function (selector) { - var el = document.querySelector(selector); + [ htmlCode, cssCode, jsCode ].forEach(function (el) { var bounds = el.getBoundingClientRect(); - if (bounds.width < 150) { + if (bounds[currentLayoutMode === 2 ? 'width' : 'height'] < 100) { el.classList.add('is-minimized'); } else { el.classList.remove('is-minimized'); } }); - }, 500); + }, 50); } - function resetSplitting() { + function resetSplitting(dontRecreate) { if (codeSplitInstance) { codeSplitInstance.destroy(); } @@ -106,14 +102,21 @@ mainSplitInstance.destroy(); } - codeSplitInstance = Split(['#js-html-code', '#js-css-code', '#js-js-code'], { + var options = { direction: (currentLayoutMode === 2 ? 'horizontal' : 'vertical'), minSize: minCodeWrapSize, 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, @@ -121,6 +124,12 @@ }); } 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'); @@ -170,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) { @@ -234,7 +261,7 @@ } function openItem(itemId) { currentItem = savedItems[itemId]; - codeSplitInstance.setSizes([ 33.3, 33.3, 33.3 ]); + // codeSplitInstance.setSizes([ 33.3, 33.3, 33.3 ]); refreshEditor(); alertsService.add('Saved item loaded'); } @@ -647,8 +674,9 @@ }); }); - ['#js-html-code', '#js-css-code', '#js-js-code'].forEach(function (selector) { - var el = document.querySelector(selector); + // 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(); });