From 56f62d3b4ada91ec560ff634633eab8b54918c05 Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Sun, 9 Aug 2015 11:44:14 -0400 Subject: [PATCH 01/13] Allow zero to three columns --- app/gist/controller.js | 53 +++++++++++++++++++++++++++++++++++------- app/gist/template.hbs | 22 +++++++++++++----- app/styles/app.scss | 2 ++ 3 files changed, 62 insertions(+), 15 deletions(-) diff --git a/app/gist/controller.js b/app/gist/controller.js index 1577dc08..f20809b9 100644 --- a/app/gist/controller.js +++ b/app/gist/controller.js @@ -2,14 +2,20 @@ import Ember from "ember"; import config from '../config/environment'; const { - computed: { equal }, + computed: { equal, gte }, observer, run } = Ember; +const MAX_COLUMNS = 3; + export default Ember.Controller.extend({ emberCli: Ember.inject.service('ember-cli'), version: config.APP.version, + + queryParams: ['numColumns'], + numColumns: 2, + init() { this._super(...arguments); this.setupWindowUpdate(); @@ -20,14 +26,40 @@ export default Ember.Controller.extend({ * @type {String} */ buildOutput: '', + + /** + * If the code is currently being built + * @type {boolean} + */ isBuilding: false, + + /** + * If the edited code has not been saved by the user + * @type {boolean} + */ unsaved: true, + + /** + * File in the current active editor column + * @type {Object} + */ activeFile: null, + + /** + * Column which has the currently focused editor + * @type {Number} + */ activeEditorCol: null, + col1File: null, col2File: null, + col3File: null, col1Active: equal('activeEditorCol','1'), col2Active: equal('activeEditorCol','2'), + col3Active: equal('activeEditorCol','3'), + showCol1: gte('numColumns', 1), + showCol2: gte('numColumns', 2), + showCol3: gte('numColumns', 3), /** * Errors during build @@ -68,15 +100,18 @@ export default Ember.Controller.extend({ /** * Set the initial file columns */ - initializeColumns: observer('model', function() { + initializeColumns: observer('model', 'numColumns', function() { var files = this.get('model.files'); - - if(files.objectAt(0)) { - this.set('col1File', files.objectAt(0)); - } - - if(files.objectAt(1)) { - this.set('col2File', files.objectAt(1)); + var numColumns = Math.max(this.get('numColumns'), MAX_COLUMNS); + + let j = 0; + for (let i = 0; i < numColumns; ++i) { + let key = 'col' + (i + 1) + 'File'; + if (!this.get(key)) { + if (files && files.objectAt(j)) { + this.set(key, files.objectAt(j++)); + } + } } }), diff --git a/app/gist/template.hbs b/app/gist/template.hbs index 5645ce89..da954378 100644 --- a/app/gist/template.hbs +++ b/app/gist/template.hbs @@ -30,13 +30,23 @@
-
- {{file-editor-column col="1" file=col1File allFiles=model.files contentsChanged="contentsChanged"}} -
+ {{#if showCol1}} +
+ {{file-editor-column col="1" file=col1File allFiles=model.files contentsChanged="contentsChanged"}} +
+ {{/if}} -
- {{file-editor-column col="2" file=col2File allFiles=model.files contentsChanged="contentsChanged"}} -
+ {{#if showCol2}} +
+ {{file-editor-column col="2" file=col2File allFiles=model.files contentsChanged="contentsChanged"}} +
+ {{/if}} + + {{#if showCol3}} +
+ {{file-editor-column col="3" file=col3File allFiles=model.files contentsChanged="contentsChanged"}} +
+ {{/if}}
diff --git a/app/styles/app.scss b/app/styles/app.scss index faf4cc32..c0b1f66a 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -201,8 +201,10 @@ body { margin: 0; margin-left: 0; z-index: -1; + display: flex; .col-md-4 { + flex-grow: 1; padding: 0; height: 100%; border-right: 1px solid #e4e2e2; From 95125f21eb47b4826e071b0d00e71b64dc7a3ab5 Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Sun, 9 Aug 2015 12:56:31 -0400 Subject: [PATCH 02/13] Add ability to hide columns --- app/components/file-editor-column.js | 4 +++ app/gist/controller.js | 26 +++++++++++++++---- app/gist/template.hbs | 26 +++++++++++++++---- app/styles/app.scss | 12 +++++++++ .../components/file-editor-column.hbs | 4 +++ 5 files changed, 62 insertions(+), 10 deletions(-) diff --git a/app/components/file-editor-column.js b/app/components/file-editor-column.js index 5eb3eb9c..e2da1697 100644 --- a/app/components/file-editor-column.js +++ b/app/components/file-editor-column.js @@ -29,6 +29,10 @@ export default Ember.Component.extend({ valueUpdated() { this.sendAction('contentsChanged'); + }, + + removeColumn(col) { + this.attrs.removeColumn(col); } } }); diff --git a/app/gist/controller.js b/app/gist/controller.js index f20809b9..40b4c948 100644 --- a/app/gist/controller.js +++ b/app/gist/controller.js @@ -57,9 +57,9 @@ export default Ember.Controller.extend({ col1Active: equal('activeEditorCol','1'), col2Active: equal('activeEditorCol','2'), col3Active: equal('activeEditorCol','3'), - showCol1: gte('numColumns', 1), - showCol2: gte('numColumns', 2), - showCol3: gte('numColumns', 3), + showCol1: gte('realNumColumns', 1), + showCol2: gte('realNumColumns', 2), + showCol3: gte('realNumColumns', 3), /** * Errors during build @@ -101,8 +101,8 @@ export default Ember.Controller.extend({ * Set the initial file columns */ initializeColumns: observer('model', 'numColumns', function() { - var files = this.get('model.files'); - var numColumns = Math.max(this.get('numColumns'), MAX_COLUMNS); + let files = this.get('model.files'); + let numColumns = Math.min(this.get('numColumns'), MAX_COLUMNS); let j = 0; for (let i = 0; i < numColumns; ++i) { @@ -113,6 +113,8 @@ export default Ember.Controller.extend({ } } } + + this.set('realNumColumns', numColumns); }), rebuildApp: function() { @@ -210,6 +212,20 @@ export default Ember.Controller.extend({ this.send('contentsChanged'); } + }, + + removeColumn (col) { + let key = "col" + col; + var numColumns = this.get('realNumColumns'); + + for (var i = (col|0) + 1; i <= numColumns; ++i) { + this.set(key + "File", this.get("col" + i + "File")); + this.set(key + "Active", this.get("col" + i + "Active")); + } + + this.transitionToRoute({queryParams: {numColumns: numColumns - 1}}).then(function() { + this.set('realNumColumns', numColumns - 1); + }.bind(this)); } }, diff --git a/app/gist/template.hbs b/app/gist/template.hbs index da954378..c1e862b4 100644 --- a/app/gist/template.hbs +++ b/app/gist/template.hbs @@ -13,9 +13,7 @@ }}
- {{!-- {{#if isEditingDescription}} --}} {{title-input value=model.description}} - {{!-- {{model.description}} --}} {{saved-state-indicator model=model unsaved=unsaved }} @@ -32,19 +30,37 @@ {{#if showCol1}}
- {{file-editor-column col="1" file=col1File allFiles=model.files contentsChanged="contentsChanged"}} + {{file-editor-column col="1" + file=col1File + allFiles=model.files + numColumns=numColumns + contentsChanged="contentsChanged" + removeColumn=(action "removeColumn") + }}
{{/if}} {{#if showCol2}}
- {{file-editor-column col="2" file=col2File allFiles=model.files contentsChanged="contentsChanged"}} + {{file-editor-column col="2" + file=col2File + allFiles=model.files + numColumns=numColumns + contentsChanged="contentsChanged" + removeColumn=(action "removeColumn") + }}
{{/if}} {{#if showCol3}}
- {{file-editor-column col="3" file=col3File allFiles=model.files contentsChanged="contentsChanged"}} + {{file-editor-column col="3" + file=col3File + allFiles=model.files + numColumns=numColumns + contentsChanged="contentsChanged" + removeColumn=(action "removeColumn") + }}
{{/if}} diff --git a/app/styles/app.scss b/app/styles/app.scss index c0b1f66a..286d4a40 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -231,6 +231,7 @@ body { border-bottom: 1px solid #e4e2e2; font-size: 16px; background-color: #faf4f1; + position: relative; .file-picker { margin-left: 15px; @@ -238,6 +239,17 @@ body { margin-bottom: 0; position: absolute; } + + .nav-right { + position: absolute; + top: 20px; + right: 15px; + + .glyphicon { + color: $navbar-default-link-color; + cursor: pointer; + } + } } } diff --git a/app/templates/components/file-editor-column.hbs b/app/templates/components/file-editor-column.hbs index d9937fe0..2d039c83 100644 --- a/app/templates/components/file-editor-column.hbs +++ b/app/templates/components/file-editor-column.hbs @@ -23,6 +23,10 @@ + + + +
{{#if file}} {{ivy-codemirror From 9bddcb896f7489708bfbb200109121b070c50f15 Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Sun, 9 Aug 2015 13:12:58 -0400 Subject: [PATCH 03/13] Add ability to add a column --- app/components/file-editor-column.js | 12 ++++++++++++ app/gist/controller.js | 10 +++++++++- app/gist/template.hbs | 9 ++++++--- app/templates/components/file-editor-column.hbs | 3 +++ 4 files changed, 30 insertions(+), 4 deletions(-) diff --git a/app/components/file-editor-column.js b/app/components/file-editor-column.js index e2da1697..c5fed95e 100644 --- a/app/components/file-editor-column.js +++ b/app/components/file-editor-column.js @@ -1,5 +1,8 @@ import Ember from 'ember'; +const { computed } = Ember; +const MAX_COLUMNS = 3; + export default Ember.Component.extend({ focusEditor: 'focusEditor', selectFile: 'selectFile', @@ -17,6 +20,11 @@ export default Ember.Component.extend({ } }), + lastColumn: computed('col', 'numColumns', function() { + let numColumns = this.get('numColumns'); + return (this.get('col') | 0) === numColumns && numColumns < MAX_COLUMNS; + }), + focusIn () { this.sendAction('focusEditor', this); }, @@ -33,6 +41,10 @@ export default Ember.Component.extend({ removeColumn(col) { this.attrs.removeColumn(col); + }, + + addColumn() { + this.attrs.addColumn(); } } }); diff --git a/app/gist/controller.js b/app/gist/controller.js index 40b4c948..a3f48019 100644 --- a/app/gist/controller.js +++ b/app/gist/controller.js @@ -216,7 +216,7 @@ export default Ember.Controller.extend({ removeColumn (col) { let key = "col" + col; - var numColumns = this.get('realNumColumns'); + let numColumns = this.get('realNumColumns'); for (var i = (col|0) + 1; i <= numColumns; ++i) { this.set(key + "File", this.get("col" + i + "File")); @@ -226,6 +226,14 @@ export default Ember.Controller.extend({ this.transitionToRoute({queryParams: {numColumns: numColumns - 1}}).then(function() { this.set('realNumColumns', numColumns - 1); }.bind(this)); + }, + + addColumn() { + let numColumns = this.get('realNumColumns'); + + this.transitionToRoute({queryParams: {numColumns: numColumns + 1}}).then(function() { + this.set('realNumColumns', numColumns + 1); + }.bind(this)); } }, diff --git a/app/gist/template.hbs b/app/gist/template.hbs index c1e862b4..275b767b 100644 --- a/app/gist/template.hbs +++ b/app/gist/template.hbs @@ -33,9 +33,10 @@ {{file-editor-column col="1" file=col1File allFiles=model.files - numColumns=numColumns + numColumns=realNumColumns contentsChanged="contentsChanged" removeColumn=(action "removeColumn") + addColumn=(action "addColumn") }}
{{/if}} @@ -45,9 +46,10 @@ {{file-editor-column col="2" file=col2File allFiles=model.files - numColumns=numColumns + numColumns=realNumColumns contentsChanged="contentsChanged" removeColumn=(action "removeColumn") + addColumn=(action "addColumn") }}
{{/if}} @@ -57,9 +59,10 @@ {{file-editor-column col="3" file=col3File allFiles=model.files - numColumns=numColumns + numColumns=realNumColumns contentsChanged="contentsChanged" removeColumn=(action "removeColumn") + addColumn=(action "addColumn") }}
{{/if}} diff --git a/app/templates/components/file-editor-column.hbs b/app/templates/components/file-editor-column.hbs index 2d039c83..2f4b0e38 100644 --- a/app/templates/components/file-editor-column.hbs +++ b/app/templates/components/file-editor-column.hbs @@ -26,6 +26,9 @@ + {{#if lastColumn}} + + {{/if}} {{#if file}} From cb7aefc3f2ba73f9aec7e71069976099871a75fa Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Sun, 9 Aug 2015 19:52:29 -0400 Subject: [PATCH 04/13] Get rid of observer; new column should open an unopened file --- app/gist/controller.js | 82 ++++++++++++++++++++++++----------- app/routes/gist-base-route.js | 4 +- 2 files changed, 60 insertions(+), 26 deletions(-) diff --git a/app/gist/controller.js b/app/gist/controller.js index a3f48019..6a6fee87 100644 --- a/app/gist/controller.js +++ b/app/gist/controller.js @@ -2,8 +2,7 @@ import Ember from "ember"; import config from '../config/environment'; const { - computed: { equal, gte }, - observer, + computed, run } = Ember; @@ -54,12 +53,12 @@ export default Ember.Controller.extend({ col1File: null, col2File: null, col3File: null, - col1Active: equal('activeEditorCol','1'), - col2Active: equal('activeEditorCol','2'), - col3Active: equal('activeEditorCol','3'), - showCol1: gte('realNumColumns', 1), - showCol2: gte('realNumColumns', 2), - showCol3: gte('realNumColumns', 3), + col1Active: computed.equal('activeEditorCol','1'), + col2Active: computed.equal('activeEditorCol','2'), + col3Active: computed.equal('activeEditorCol','3'), + showCol1: computed.gte('realNumColumns', 1), + showCol2: computed.gte('realNumColumns', 2), + showCol3: computed.gte('realNumColumns', 3), /** * Errors during build @@ -71,7 +70,7 @@ export default Ember.Controller.extend({ * Whether user wishes the code to automatically run * @type {boolean} */ - isLiveReload: true, + isLiveReload: false, /** * Build the application and set the iframe code @@ -97,25 +96,58 @@ export default Ember.Controller.extend({ }); }, + realNumColumns: computed('numColumns', function() { + return Math.min(this.get('numColumns'), MAX_COLUMNS); + }), + /** * Set the initial file columns */ - initializeColumns: observer('model', 'numColumns', function() { + initializeColumns() { let files = this.get('model.files'); - let numColumns = Math.min(this.get('numColumns'), MAX_COLUMNS); + let numColumns = this.get('realNumColumns'); let j = 0; for (let i = 0; i < numColumns; ++i) { let key = 'col' + (i + 1) + 'File'; if (!this.get(key)) { - if (files && files.objectAt(j)) { - this.set(key, files.objectAt(j++)); + if (files) { + j = 0; + while (!this.isOpen(files.objectAt(j))) { + j++; + } + let file = files.objectAt(j); + if (file) { + this.set(key, file); + } } } } + }, - this.set('realNumColumns', numColumns); - }), + /** + * Returns true if the passed in file is currently open + * @param {Object} one of the files in the gist + * @return {boolean} + */ + isOpen(file) { + if (!file) { + return false; + } + + console.log(this.get('col1File.fileName'), file.get('fileName')); + if (this.get('col1File.fileName') === file.get('fileName')) { + return false; + } + if (this.get('col2File.fileName') === file.get('fileName')) { + return false; + } + if (this.get('col3File.fileName') === file.get('fileName')) { + return false; + } + + return true; + }, rebuildApp: function() { if (this.get('isLiveReload')) { @@ -215,25 +247,22 @@ export default Ember.Controller.extend({ }, removeColumn (col) { - let key = "col" + col; let numColumns = this.get('realNumColumns'); - for (var i = (col|0) + 1; i <= numColumns; ++i) { - this.set(key + "File", this.get("col" + i + "File")); - this.set(key + "Active", this.get("col" + i + "Active")); + for (var i = (col|0); i < numColumns; ++i) { + this.set("col" + i + "File", this.get("col" + (i + 1) + "File")); + this.set("col" + i + "Active", this.get("col" + (i + 1) + "Active")); } + this.set("col" + numColumns + "File", undefined); + this.set("col" + numColumns + "Active", false); - this.transitionToRoute({queryParams: {numColumns: numColumns - 1}}).then(function() { - this.set('realNumColumns', numColumns - 1); - }.bind(this)); + this.transitionToRoute({queryParams: {numColumns: numColumns - 1}}); }, addColumn() { let numColumns = this.get('realNumColumns'); - this.transitionToRoute({queryParams: {numColumns: numColumns + 1}}).then(function() { - this.set('realNumColumns', numColumns + 1); - }.bind(this)); + this.transitionToRoute({queryParams: {numColumns: numColumns + 1}}).then(this.initializeColumns.bind(this)); } }, @@ -244,6 +273,9 @@ export default Ember.Controller.extend({ if(this.get('col2File') === file) { this.set('col2File', null); } + if(this.get('col3File') === file) { + this.set('col3File', null); + } }, setupWindowUpdate: function() { diff --git a/app/routes/gist-base-route.js b/app/routes/gist-base-route.js index f9e6706d..6ff65c65 100644 --- a/app/routes/gist-base-route.js +++ b/app/routes/gist-base-route.js @@ -2,6 +2,8 @@ import Ember from 'ember'; export default Ember.Route.extend({ setupController (controller, context) { - this.controllerFor('gist').set('model', context); + let gistController = this.controllerFor('gist'); + gistController.set('model', context); + gistController.initializeColumns(); } }); From 51df25f010b19a8ee0d3dcc565c5e6ce113e23c7 Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Sun, 9 Aug 2015 19:56:21 -0400 Subject: [PATCH 05/13] Cleanup --- app/gist/controller.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/gist/controller.js b/app/gist/controller.js index 6a6fee87..d22fa651 100644 --- a/app/gist/controller.js +++ b/app/gist/controller.js @@ -70,7 +70,7 @@ export default Ember.Controller.extend({ * Whether user wishes the code to automatically run * @type {boolean} */ - isLiveReload: false, + isLiveReload: true, /** * Build the application and set the iframe code @@ -135,7 +135,6 @@ export default Ember.Controller.extend({ return false; } - console.log(this.get('col1File.fileName'), file.get('fileName')); if (this.get('col1File.fileName') === file.get('fileName')) { return false; } From c09ccadafd19f795db32223a824da98e7f9d8402 Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Mon, 10 Aug 2015 12:47:22 -0400 Subject: [PATCH 06/13] Fix glitch --- app/gist/controller.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/gist/controller.js b/app/gist/controller.js index d22fa651..47d0534b 100644 --- a/app/gist/controller.js +++ b/app/gist/controller.js @@ -250,10 +250,13 @@ export default Ember.Controller.extend({ for (var i = (col|0); i < numColumns; ++i) { this.set("col" + i + "File", this.get("col" + (i + 1) + "File")); - this.set("col" + i + "Active", this.get("col" + (i + 1) + "Active")); } this.set("col" + numColumns + "File", undefined); - this.set("col" + numColumns + "Active", false); + + let activeCol = this.get('activeEditorCol'); + if (activeCol >= col) { + this.set('activeEditorCol', ((activeCol|0) - 1).toString()); + } this.transitionToRoute({queryParams: {numColumns: numColumns - 1}}); }, From 7ffff311c2ed47e96287f2fe0d5f9b508d640d57 Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Tue, 11 Aug 2015 13:34:56 -0400 Subject: [PATCH 07/13] Add ability to add column when no columns present --- app/gist/controller.js | 1 + app/gist/template.hbs | 3 +++ app/styles/app.scss | 4 ++++ 3 files changed, 8 insertions(+) diff --git a/app/gist/controller.js b/app/gist/controller.js index dda89b47..64b3d68f 100644 --- a/app/gist/controller.js +++ b/app/gist/controller.js @@ -102,6 +102,7 @@ export default Ember.Controller.extend({ realNumColumns: computed('numColumns', function() { return Math.min(this.get('numColumns'), MAX_COLUMNS); }), + noColumns: computed.equal('numColumns', 0), /** * Set the initial file columns diff --git a/app/gist/template.hbs b/app/gist/template.hbs index 9d25e2f2..dc55e13b 100644 --- a/app/gist/template.hbs +++ b/app/gist/template.hbs @@ -75,6 +75,9 @@
+ {{#if noColumns}} + + {{/if}} {{build-messages notify=notify isBuilding=isBuilding buildErrors=buildErrors diff --git a/app/styles/app.scss b/app/styles/app.scss index 286d4a40..c0149519 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -224,6 +224,10 @@ body { height: 100%; position: absolute; } + + span.glyphicon-plus { + cursor: pointer; + } } .header { From 19bcb76dc8ad4659896616519dce9e151fa4cb4b Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Tue, 11 Aug 2015 14:38:27 -0400 Subject: [PATCH 08/13] Add cursory integration tests for file-editor-column --- .../components/file-editor-column-test.js | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 tests/integration/components/file-editor-column-test.js diff --git a/tests/integration/components/file-editor-column-test.js b/tests/integration/components/file-editor-column-test.js new file mode 100644 index 00000000..6fee347b --- /dev/null +++ b/tests/integration/components/file-editor-column-test.js @@ -0,0 +1,39 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('file-editor-column', 'Integration | Component | file editor column', { + integration: true, + beforeEach() { + this.addColumnCalled = false; + this.removeColumnCalled = false; + + this.on('addColumn', () => { this.addColumnCalled = true; }); + this.on('removeColumn', () => { this.removeColumnCalled = true; }); + + this.render(hbs`{{file-editor-column col="2" + file=null + allFiles=null + keyMap=null + numColumns=2 + contentsChanged="contentsChanged" + addColumn=(action "addColumn") + removeColumn=(action "removeColumn") + }}`); + } +}); + +test('it calls addColumn when the add column glyph is clicked', function(assert) { + assert.expect(1); + + this.$('.glyphicon-plus').click(); + + assert.ok(this.addColumnCalled, 'addColumn was called'); +}); + +test('it calls removeColumn when the remove column glyph is clicked', function(assert) { + assert.expect(1); + + this.$('.glyphicon-remove').click(); + + assert.ok(this.removeColumnCalled, 'removeColumn was called'); +}); From e736445c077f1292a4e55d07a13e24d1ee2618d5 Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Tue, 11 Aug 2015 15:02:05 -0400 Subject: [PATCH 09/13] Add acceptance test for columns functionality --- tests/acceptance/columns-test.js | 65 ++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 tests/acceptance/columns-test.js diff --git a/tests/acceptance/columns-test.js b/tests/acceptance/columns-test.js new file mode 100644 index 00000000..d5532e55 --- /dev/null +++ b/tests/acceptance/columns-test.js @@ -0,0 +1,65 @@ +import Ember from 'ember'; +import { module, test } from 'qunit'; +import startApp from 'ember-twiddle/tests/helpers/start-app'; + +module('Acceptance | columns', { + beforeEach: function() { + this.application = startApp(); + + server.create('user', 'octocat'); + }, + + afterEach: function() { + Ember.run(this.application, 'destroy'); + } +}); + +const columns = ".code"; +const firstColumn = ".code:first-of-type"; +const plusGlyph = ".code .glyphicon-plus"; +const removeGlyph = firstColumn + " .glyphicon-remove"; +const outputPlusGlyph = ".output .glyphicon-plus"; + +test('you can add and remove columns', function(assert) { + visit('/'); + + andThen(function() { + assert.equal(currentURL(), '/', 'We are on the correct initial route'); + assert.equal(find(columns).length, 2, 'There are two columns to start'); + + find(plusGlyph).click(); + }); + + andThen(function() { + assert.equal(currentURL(), '/?numColumns=3', 'We are on the correct route for 3 columns'); + assert.equal(find(columns).length, 3, 'There are now 3 columns'); + + find(removeGlyph).click(); + }); + + andThen(function() { + assert.equal(currentURL(), '/', 'We are on the correct route for 2 columns'); + assert.equal(find(columns).length, 2, 'There are now 2 columns'); + + find(removeGlyph).click(); + }); + + andThen(function() { + assert.equal(currentURL(), '/?numColumns=1', 'We are on the correct route for 1 columns'); + assert.equal(find(columns).length, 1, 'There are now 1 columns'); + + find(removeGlyph).click(); + }); + + andThen(function() { + assert.equal(currentURL(), '/?numColumns=0', 'We are on the correct route for 0 columns'); + assert.equal(find(columns).length, 0, 'There are now 0 columns'); + + find(outputPlusGlyph).click(); + }); + + andThen(function() { + assert.equal(currentURL(), '/?numColumns=1', 'We are on the correct route for 1 columns'); + assert.equal(find(columns).length, 1, 'There are now 1 columns'); + }); +}); From 81002ea683ae19324c658d23a1af2c86b67bfb4a Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Sat, 15 Aug 2015 08:07:17 -0400 Subject: [PATCH 10/13] Cleanup after merge --- app/gist/controller.js | 34 +++++++++++++++------------------- 1 file changed, 15 insertions(+), 19 deletions(-) diff --git a/app/gist/controller.js b/app/gist/controller.js index 3511c103..86155814 100644 --- a/app/gist/controller.js +++ b/app/gist/controller.js @@ -140,14 +140,10 @@ export default Ember.Controller.extend({ return false; } - if (this.get('col1File.fileName') === file.get('fileName')) { - return false; - } - if (this.get('col2File.fileName') === file.get('fileName')) { - return false; - } - if (this.get('col3File.fileName') === file.get('fileName')) { - return false; + for (let i = 1; i <= MAX_COLUMNS; ++i) { + if (this.getColumnFile(i).get('fileName') === file.get('fileName')){ + return false; + } } return true; @@ -176,7 +172,7 @@ export default Ember.Controller.extend({ this.send('contentsChanged'); } }, - + /* * Test whether path is valid. Presently only tests whether components are hyphenated. */ @@ -194,6 +190,10 @@ export default Ember.Controller.extend({ return false; }, + getColumnFile(column) { + return this.get(`col${column}File`); + }, + setColumnFile(column, file){ let fileColumn = `col${column}File`; this.set(fileColumn, file); @@ -295,9 +295,9 @@ export default Ember.Controller.extend({ let numColumns = this.get('realNumColumns'); for (var i = (col|0); i < numColumns; ++i) { - this.set("col" + i + "File", this.get("col" + (i + 1) + "File")); + this.setColumnFile(i, this.getColumnFile(i + 1)); } - this.set("col" + numColumns + "File", undefined); + this.setColumnFile(numColumns, undefined); let activeCol = this.get('activeEditorCol'); if (activeCol >= col) { @@ -321,14 +321,10 @@ export default Ember.Controller.extend({ }, _removeFileFromColumns (file) { - if(this.get('col1File') === file) { - this.setColumnFile(1, null); - } - if(this.get('col2File') === file) { - this.setColumnFile(2, null); - } - if(this.get('col3File') === file) { - this.setColumnFile(3, null); + for (let i = 1; i <= MAX_COLUMNS; ++i) { + if (this.getColumnFile(i) === file) { + this.setColumnFile(i, null); + } } }, From dffa415224824f9be7eb9ab2f75c89761eeedd83 Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Sat, 15 Aug 2015 08:07:17 -0400 Subject: [PATCH 11/13] Cleanup after merge --- app/gist/controller.js | 34 +++++++++++++++------------------- 1 file changed, 15 insertions(+), 19 deletions(-) diff --git a/app/gist/controller.js b/app/gist/controller.js index 3511c103..7069ffdc 100644 --- a/app/gist/controller.js +++ b/app/gist/controller.js @@ -140,14 +140,10 @@ export default Ember.Controller.extend({ return false; } - if (this.get('col1File.fileName') === file.get('fileName')) { - return false; - } - if (this.get('col2File.fileName') === file.get('fileName')) { - return false; - } - if (this.get('col3File.fileName') === file.get('fileName')) { - return false; + for (let i = 1; i <= MAX_COLUMNS; ++i) { + if (this.get(`col${i}File.fileName`) === file.get('fileName')){ + return false; + } } return true; @@ -176,7 +172,7 @@ export default Ember.Controller.extend({ this.send('contentsChanged'); } }, - + /* * Test whether path is valid. Presently only tests whether components are hyphenated. */ @@ -194,6 +190,10 @@ export default Ember.Controller.extend({ return false; }, + getColumnFile(column) { + return this.get(`col${column}File`); + }, + setColumnFile(column, file){ let fileColumn = `col${column}File`; this.set(fileColumn, file); @@ -295,9 +295,9 @@ export default Ember.Controller.extend({ let numColumns = this.get('realNumColumns'); for (var i = (col|0); i < numColumns; ++i) { - this.set("col" + i + "File", this.get("col" + (i + 1) + "File")); + this.setColumnFile(i, this.getColumnFile(i + 1)); } - this.set("col" + numColumns + "File", undefined); + this.setColumnFile(numColumns, undefined); let activeCol = this.get('activeEditorCol'); if (activeCol >= col) { @@ -321,14 +321,10 @@ export default Ember.Controller.extend({ }, _removeFileFromColumns (file) { - if(this.get('col1File') === file) { - this.setColumnFile(1, null); - } - if(this.get('col2File') === file) { - this.setColumnFile(2, null); - } - if(this.get('col3File') === file) { - this.setColumnFile(3, null); + for (let i = 1; i <= MAX_COLUMNS; ++i) { + if (this.getColumnFile(i) === file) { + this.setColumnFile(i, null); + } } }, From 4e96640b342542fa93c5dd9f767633dfb6176b78 Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Mon, 17 Aug 2015 14:35:25 -0400 Subject: [PATCH 12/13] Refactor columns into an off-object array --- app/gist/controller.js | 52 ++++++++++++++++++------------ app/gist/template.hbs | 57 +++++++++------------------------ app/utils/column.js | 15 +++++++++ tests/unit/utils/column-test.js | 31 ++++++++++++++++++ 4 files changed, 93 insertions(+), 62 deletions(-) create mode 100644 app/utils/column.js create mode 100644 tests/unit/utils/column-test.js diff --git a/app/gist/controller.js b/app/gist/controller.js index e9b5b392..14386330 100644 --- a/app/gist/controller.js +++ b/app/gist/controller.js @@ -2,6 +2,7 @@ import Ember from "ember"; import config from '../config/environment'; import Settings from '../models/settings'; import ErrorMessages from 'ember-twiddle/helpers/error-messages'; +import Column from '../utils/column'; const { computed, @@ -19,6 +20,7 @@ export default Ember.Controller.extend({ init() { this._super(...arguments); + this.createColumns(); this.setupWindowUpdate(); }, @@ -52,15 +54,7 @@ export default Ember.Controller.extend({ */ activeEditorCol: null, - col1File: null, - col2File: null, - col3File: null, - col1Active: computed.equal('activeEditorCol','1'), - col2Active: computed.equal('activeEditorCol','2'), - col3Active: computed.equal('activeEditorCol','3'), - showCol1: computed.gte('realNumColumns', 1), - showCol2: computed.gte('realNumColumns', 2), - showCol3: computed.gte('realNumColumns', 3), + columns: [], settings: Settings.create(), @@ -106,16 +100,30 @@ export default Ember.Controller.extend({ noColumns: computed.equal('numColumns', 0), /** - * Set the initial file columns + * Creates the column objects + */ + createColumns() { + let columns = []; + for (let i = 0; i < MAX_COLUMNS; ++i) { + let col = (i + 1) + ""; + columns.pushObject(Column.create({ + col: col, + controller: this + })); + } + this.set('columns', columns); + }, + + /** + * Set the initial files in the columns */ initializeColumns() { let files = this.get('model.files'); let numColumns = this.get('realNumColumns'); let j = 0; - for (let i = 0; i < numColumns; ++i) { - let key = 'col' + (i + 1) + 'File'; - if (!this.get(key)) { + for (let i = 1; i <= numColumns; ++i) { + if (!this.getColumnFile(i)) { if (files) { j = 0; while (!this.isOpen(files.objectAt(j))) { @@ -123,7 +131,7 @@ export default Ember.Controller.extend({ } let file = files.objectAt(j); if (file) { - this.set(key, file); + this.setColumnFile(i, file); } } } @@ -141,7 +149,8 @@ export default Ember.Controller.extend({ } for (let i = 1; i <= MAX_COLUMNS; ++i) { - if (this.get(`col${i}File.fileName`) === file.get('fileName')){ + let colFile = this.getColumnFile(i); + if (colFile && colFile.get('fileName') === file.get('fileName')){ return false; } } @@ -191,12 +200,11 @@ export default Ember.Controller.extend({ }, getColumnFile(column) { - return this.get(`col${column}File`); + return this.get('columns').objectAt(column - 1).get('file'); }, - setColumnFile(column, file){ - let fileColumn = `col${column}File`; - this.set(fileColumn, file); + setColumnFile(column, file) { + this.get('columns').objectAt(column - 1).set('file', file); }, actions: { @@ -316,7 +324,11 @@ export default Ember.Controller.extend({ addColumn() { let numColumns = this.get('realNumColumns'); - this.transitionToRoute({queryParams: {numColumns: numColumns + 1}}).then(this.initializeColumns.bind(this)); + this.transitionToRoute({ + queryParams: { + numColumns: numColumns + 1 + } + }).then(this.initializeColumns.bind(this)); }, setEditorKeyMap (keyMap) { diff --git a/app/gist/template.hbs b/app/gist/template.hbs index d257acf3..dc1d46ce 100644 --- a/app/gist/template.hbs +++ b/app/gist/template.hbs @@ -31,48 +31,21 @@
- - {{#if showCol1}} -
- {{file-editor-column col="1" - file=col1File - allFiles=model.files - keyMap=settings.keyMap - numColumns=realNumColumns - contentsChanged="contentsChanged" - removeColumn=(action "removeColumn") - addColumn=(action "addColumn") - }} -
- {{/if}} - - {{#if showCol2}} -
- {{file-editor-column col="2" - file=col2File - allFiles=model.files - keyMap=settings.keyMap - numColumns=realNumColumns - contentsChanged="contentsChanged" - removeColumn=(action "removeColumn") - addColumn=(action "addColumn") - }} -
- {{/if}} - - {{#if showCol3}} -
- {{file-editor-column col="3" - file=col3File - allFiles=model.files - keyMap=settings.keyMap - numColumns=realNumColumns - contentsChanged="contentsChanged" - removeColumn=(action "removeColumn") - addColumn=(action "addColumn") - }} -
- {{/if}} + {{#each columns as |column|}} + {{#if column.show}} +
+ {{file-editor-column col=column.col + file=column.file + allFiles=model.files + keyMap=settings.keyMap + numColumns=realNumColumns + contentsChanged="contentsChanged" + removeColumn=(action "removeColumn") + addColumn=(action "addColumn") + }} +
+ {{/if}} + {{/each}}
diff --git a/app/utils/column.js b/app/utils/column.js new file mode 100644 index 00000000..4f52f20f --- /dev/null +++ b/app/utils/column.js @@ -0,0 +1,15 @@ +import Ember from "ember"; + +const { computed } = Ember; + +export default Ember.Object.extend ({ + col: "", + controller: null, + active: computed('controller.activeEditorCol', 'col', function() { + return this.get('controller.activeEditorCol') === this.get('col'); + }), + show: computed('controller.realNumColumns', 'col', function() { + return this.get('controller.realNumColumns') >= this.get('col'); + }), + file: null +}); diff --git a/tests/unit/utils/column-test.js b/tests/unit/utils/column-test.js new file mode 100644 index 00000000..572e2bb9 --- /dev/null +++ b/tests/unit/utils/column-test.js @@ -0,0 +1,31 @@ +import Ember from "ember"; +import Column from '../../../utils/column'; +import { module, test } from 'qunit'; + +module('Unit | Utility | column'); + +test('Active Column matches', function(assert) { + assert.expect(2); + var controller = Ember.Object.create({ + activeEditorCol: '2', + realNumColumns: 3 + }); + var column1 = Column.create({ col: '1', controller: controller }); + assert.ok(!column1.get('active')); + var column2 = Column.create({ col: '2', controller: controller }); + assert.ok(column2.get('active')); +}); + +test('Show Column if less than or equal to realNumColumns', function(assert) { + assert.expect(3); + var controller = Ember.Object.create({ + activeEditorCol: '3', + realNumColumns: 2 + }); + var column1 = Column.create({ col: '1', controller: controller }); + assert.ok(column1.get('show')); + var column2 = Column.create({ col: '2', controller: controller }); + assert.ok(column2.get('show')); + var column3 = Column.create({ col: '3', controller: controller }); + assert.ok(!column3.get('show')); +}); From 47072aa1c06415e88e0d2f127087bd7f1332cffb Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Mon, 17 Aug 2015 15:50:42 -0400 Subject: [PATCH 13/13] Minor Tweaks --- app/components/file-editor-column.js | 2 +- app/gist/controller.js | 2 +- app/templates/components/file-editor-column.hbs | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/file-editor-column.js b/app/components/file-editor-column.js index e7092782..62ed54ae 100644 --- a/app/components/file-editor-column.js +++ b/app/components/file-editor-column.js @@ -21,7 +21,7 @@ export default Ember.Component.extend({ } }), - lastColumn: computed('col', 'numColumns', function() { + isLastColumn: computed('col', 'numColumns', function() { let numColumns = this.get('numColumns'); return (this.get('col') | 0) === numColumns && numColumns < MAX_COLUMNS; }), diff --git a/app/gist/controller.js b/app/gist/controller.js index 14386330..b4f2cd0b 100644 --- a/app/gist/controller.js +++ b/app/gist/controller.js @@ -54,7 +54,7 @@ export default Ember.Controller.extend({ */ activeEditorCol: null, - columns: [], + columns: null, settings: Settings.create(), diff --git a/app/templates/components/file-editor-column.hbs b/app/templates/components/file-editor-column.hbs index dbb0495c..f42ba349 100644 --- a/app/templates/components/file-editor-column.hbs +++ b/app/templates/components/file-editor-column.hbs @@ -25,7 +25,7 @@ - {{#if lastColumn}} + {{#if isLastColumn}} {{/if}}