Skip to content

Commit f062c95

Browse files
adamfortunaadamfortuna
committed
Refactoring cross directive communication to share a controller
1 parent b7e5235 commit f062c95

8 files changed

Lines changed: 61 additions & 83 deletions

File tree

‎client/javascriptcom/directives/challenge.directive.js‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
angular.module('javascriptcom').directive('jsChallenge', [function() {
1+
angular.module('javascriptcom').directive('jsChallenge', ['jsChallengeProgress', function(jsChallengeProgress) {
22
return {
33
templateUrl: 'javascripts/javascriptcom/templates/challenge.html',
44
replace: true,
@@ -7,12 +7,18 @@ angular.module('javascriptcom').directive('jsChallenge', [function() {
77
},
88
bindToController: true,
99
controllerAs: 'ctrl',
10-
controller: function jsChallengeController() {
11-
this.isActive = function() {
12-
return this.challenge.active;
10+
controller: function jsChallengeController(jsChallengeProgress) {
11+
this.onSuccess = function onSuccess(challenge) {
12+
challenge.completed = true;
13+
jsChallengeProgress.next();
1314
}
14-
this.hasStarted = function() {
15-
return this.challenge.started;
15+
16+
this.onFailure = function onFailure(challenge) {
17+
console.log('challenge failure');
18+
}
19+
20+
this.activate = function(challenge) {
21+
jsChallengeProgress.activate(challenge);
1622
}
1723
}
1824
};

‎client/javascriptcom/directives/console.directive.js‎

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,14 @@
1-
angular.module('javascriptcom').directive('jsConsole', ['CSConsole', 'jsCommand', 'jsChallengeProgress', function(CSConsole, jsCommand, jsChallengeProgress) {
1+
angular.module('javascriptcom').directive('jsConsole', ['CSConsole', 'jsCommand', function(CSConsole, jsCommand) {
22
return {
33
templateUrl: 'javascripts/javascriptcom/templates/console.html',
44
replace: true,
5-
scope: {
6-
challenge: '='
7-
},
5+
scope: true,
86
bindToController: true,
97
controllerAs: 'ctrl',
8+
require: '^jsChallenge',
109
link: function(scope, element, attrs, ctrl) {
11-
function onConsoleSuccess() {
12-
ctrl.challenge.completed = true;
13-
jsChallengeProgress.next();
14-
}
15-
function onConsoleError() { }
16-
1710
var el = $(element).find('.console-ui')[0];
18-
var command = new jsCommand(ctrl.challenge, onConsoleSuccess, onConsoleError);
11+
var command = new jsCommand(ctrl.challenge, ctrl.onSuccess, ctrl.onFailure);
1912

2013
ctrl.csConsole = new CSConsole(el, {
2114
prompt: '> ',
@@ -25,14 +18,6 @@ angular.module('javascriptcom').directive('jsConsole', ['CSConsole', 'jsCommand'
2518
commandValidate: command.validate,
2619
commandHandle: command.handler
2720
});
28-
29-
30-
$(element).on('click', function(e) {
31-
e.preventDefault();
32-
jsChallengeProgress.activate(ctrl.challenge);
33-
})
34-
},
35-
controller: function jsConsoleController() {
3621
}
3722
};
3823
}]);

‎client/javascriptcom/directives/instructions.directive.js‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,9 @@ angular.module('javascriptcom').directive('jsInstructions', ['$compile', 'marked
22
return {
33
templateUrl: 'javascripts/javascriptcom/templates/instructions.html',
44
replace: true,
5-
scope: {
6-
challenge: '='
7-
},
5+
scope: true,
86
bindToController: true,
97
controllerAs: 'ctrl',
10-
controller: function() {
11-
12-
}
8+
require: '^jsChallenge'
139
};
1410
}]);

‎client/javascriptcom/services/command.factory.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ angular.module('javascriptcom').factory('jsCommand', ['_', 'jsCommandFactory', f
1414

1515
command(vm.challenge, line).then(function(content) {
1616
report(jsReportAdapter(content));
17-
successCallback();
17+
successCallback(vm.challenge);
1818
}, function(content) {
1919
report(jsReportAdapter(content));
20-
errorCallback();
20+
errorCallback(vm.challenge);
2121
});
2222
}
2323

‎client/javascriptcom/services/jsChallengeProgress.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,11 @@ angular.module('javascriptcom').factory('jsChallengeProgress', ['_', function(_)
2020
},
2121

2222
activate: function(challenge) {
23-
this.deactivateAll();
24-
challenge.active = true;
25-
challenge.started = true;
23+
if(!challenge.active) {
24+
this.deactivateAll();
25+
challenge.active = true;
26+
challenge.started = true;
27+
}
2628
},
2729

2830
deactivateAll: function() {

‎public/javascripts/application.js‎

Lines changed: 33 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -58944,7 +58944,7 @@ angular.module('javascriptcom', ['ngResource', 'ngAnimate'])
5894458944
$httpProvider.defaults.cache = true;
5894558945
}]);
5894658946

58947-
angular.module('javascriptcom').directive('jsChallenge', [function() {
58947+
angular.module('javascriptcom').directive('jsChallenge', ['jsChallengeProgress', function(jsChallengeProgress) {
5894858948
return {
5894958949
templateUrl: 'javascripts/javascriptcom/templates/challenge.html',
5895058950
replace: true,
@@ -58953,35 +58953,34 @@ angular.module('javascriptcom').directive('jsChallenge', [function() {
5895358953
},
5895458954
bindToController: true,
5895558955
controllerAs: 'ctrl',
58956-
controller: function jsChallengeController() {
58957-
this.isActive = function() {
58958-
return this.challenge.active;
58956+
controller: function jsChallengeController(jsChallengeProgress) {
58957+
this.onSuccess = function onSuccess(challenge) {
58958+
challenge.completed = true;
58959+
jsChallengeProgress.next();
5895958960
}
58960-
this.hasStarted = function() {
58961-
return this.challenge.started;
58961+
58962+
this.onFailure = function onFailure(challenge) {
58963+
console.log('challenge failure');
58964+
}
58965+
58966+
this.activate = function(challenge) {
58967+
jsChallengeProgress.activate(challenge);
5896258968
}
5896358969
}
5896458970
};
5896558971
}]);
5896658972

58967-
angular.module('javascriptcom').directive('jsConsole', ['CSConsole', 'jsCommand', 'jsChallengeProgress', function(CSConsole, jsCommand, jsChallengeProgress) {
58973+
angular.module('javascriptcom').directive('jsConsole', ['CSConsole', 'jsCommand', function(CSConsole, jsCommand) {
5896858974
return {
5896958975
templateUrl: 'javascripts/javascriptcom/templates/console.html',
5897058976
replace: true,
58971-
scope: {
58972-
challenge: '='
58973-
},
58977+
scope: true,
5897458978
bindToController: true,
5897558979
controllerAs: 'ctrl',
58980+
require: '^jsChallenge',
5897658981
link: function(scope, element, attrs, ctrl) {
58977-
function onConsoleSuccess() {
58978-
ctrl.challenge.completed = true;
58979-
jsChallengeProgress.next();
58980-
}
58981-
function onConsoleError() { }
58982-
5898358982
var el = $(element).find('.console-ui')[0];
58984-
var command = new jsCommand(ctrl.challenge, onConsoleSuccess, onConsoleError);
58983+
var command = new jsCommand(ctrl.challenge, ctrl.onSuccess, ctrl.onFailure);
5898558984

5898658985
ctrl.csConsole = new CSConsole(el, {
5898758986
prompt: '> ',
@@ -58991,14 +58990,6 @@ angular.module('javascriptcom').directive('jsConsole', ['CSConsole', 'jsCommand'
5899158990
commandValidate: command.validate,
5899258991
commandHandle: command.handler
5899358992
});
58994-
58995-
58996-
$(element).on('click', function(e) {
58997-
e.preventDefault();
58998-
jsChallengeProgress.activate(ctrl.challenge);
58999-
})
59000-
},
59001-
controller: function jsConsoleController() {
5900258993
}
5900358994
};
5900458995
}]);
@@ -59027,14 +59018,10 @@ angular.module('javascriptcom').directive('jsInstructions', ['$compile', 'marked
5902759018
return {
5902859019
templateUrl: 'javascripts/javascriptcom/templates/instructions.html',
5902959020
replace: true,
59030-
scope: {
59031-
challenge: '='
59032-
},
59021+
scope: true,
5903359022
bindToController: true,
5903459023
controllerAs: 'ctrl',
59035-
controller: function() {
59036-
59037-
}
59024+
require: '^jsChallenge'
5903859025
};
5903959026
}]);
5904059027

@@ -59057,14 +59044,6 @@ angular.module('javascriptcom').directive('jsSafeHtml', ['$sce', function SafeHt
5905759044
};
5905859045
}]);
5905959046

59060-
angular.module('javascriptcom')
59061-
.filter('markdown', ['marked', function Markdown(marked) {
59062-
return function(text) {
59063-
return marked(text);
59064-
};
59065-
}]
59066-
);
59067-
5906859047
angular.module('javascriptcom').factory('jsCourseChallengeResource', function($resource) {
5906959048
return $resource('/courses/:course/challenges.json', {}, {});
5907059049
});
@@ -59073,6 +59052,14 @@ angular.module('javascriptcom').factory('jsCourseResource', function($resource)
5907359052
return $resource('/courses/:course.json', {}, {});
5907459053
});
5907559054

59055+
angular.module('javascriptcom')
59056+
.filter('markdown', ['marked', function Markdown(marked) {
59057+
return function(text) {
59058+
return marked(text);
59059+
};
59060+
}]
59061+
);
59062+
5907659063
angular.module('javascriptcom').factory('jsCommand', ['_', 'jsCommandFactory', function(_, jsCommandFactory) {
5907759064
return function jsCommand(challenge, successCallback, errorCallback) {
5907859065
var vm = this;
@@ -59089,10 +59076,10 @@ angular.module('javascriptcom').factory('jsCommand', ['_', 'jsCommandFactory', f
5908959076

5909059077
command(vm.challenge, line).then(function(content) {
5909159078
report(jsReportAdapter(content));
59092-
successCallback();
59079+
successCallback(vm.challenge);
5909359080
}, function(content) {
5909459081
report(jsReportAdapter(content));
59095-
errorCallback();
59082+
errorCallback(vm.challenge);
5909659083
});
5909759084
}
5909859085

@@ -59220,9 +59207,11 @@ angular.module('javascriptcom').factory('jsChallengeProgress', ['_', function(_)
5922059207
},
5922159208

5922259209
activate: function(challenge) {
59223-
this.deactivateAll();
59224-
challenge.active = true;
59225-
challenge.started = true;
59210+
if(!challenge.active) {
59211+
this.deactivateAll();
59212+
challenge.active = true;
59213+
challenge.started = true;
59214+
}
5922659215
},
5922759216

5922859217
deactivateAll: function() {

‎public/javascripts/javascriptcom/templates/challenge.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class='js-challenge' ng-class="{ 'is-active': ctrl.challenge.active, 'is-started': ctrl.challenge.started }">
22
<h3>{{::ctrl.challenge.title}}</h3>
3-
<js-instructions challenge='ctrl.challenge'></js-instructions>
4-
<js-console challenge='ctrl.challenge'></js-console>
3+
<js-instructions></js-instructions>
4+
<js-console></js-console>
55
</div>

‎public/javascripts/javascriptcom/templates/console.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<div class='js-console console console--single'>
1+
<div class='js-console console console--single' ng-click='ctrl.activate(ctrl.challenge)'>
22
<div class='console-ui'></div>
33
</div>

0 commit comments

Comments
 (0)