Skip to content

Commit c1b1d34

Browse files
author
Jason White
committed
initial mod for menu resizing, some more angularization/splitting of the controllers
1 parent b375cc0 commit c1b1d34

File tree

5 files changed

+164
-125
lines changed

5 files changed

+164
-125
lines changed

src/main/webapp/WEB-INF/pages/main_new.jsp

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
</head>
6363

6464
<body class="animated fadeIn" ng-app="goatApp">
65-
<section id="container" ng-controller="goatLesson">
65+
<section id="container">
6666
<header id="header">
6767
<!--logo start-->
6868
<div class="brand">
@@ -75,7 +75,7 @@
7575
</button>
7676
</div><!--toggle navigation end-->
7777
<div class="lessonTitle" >
78-
<h1 id="lessonTitle">Lesson Title in here</h1>
78+
<h1 id="lessonTitle"></h1>
7979
</div><!--lesson title end-->
8080
<div class="user-nav pull-right" style="margin-right: 75px;">
8181
<div class="dropdown" style="display:inline">
@@ -107,12 +107,12 @@
107107
</header>
108108

109109
<!--sidebar left start-->
110-
<aside class="sidebar">
111-
<div id="leftside-navigation" class="nano">
110+
<aside class="sidebar" >
111+
<div id="leftside-navigation" ng-controller="goatMenu" class="nano">
112112
<ul class="nano-content">
113113
<li class="sub-menu" ng-repeat="item in menuTopics">
114-
<a ng-click="expanded = !expanded" href=""><i class="fa {{item.class}}"></i><span>{{item.name}}</span></a>
115-
<ul class="slideDown" ng-show="expanded">
114+
<a ng-click="accordionMenu(item.id)" href=""><i class="fa {{item.class}}"></i><span>{{item.name}}</span></a><!-- expanded = !expanded-->
115+
<ul class="slideDown lessonsAndStages" id="{{item.id}}" isOpen=0>
116116
<li ng-repeat="lesson in item.children">
117117
<a ng-click="renderLesson(lesson.link)" title="link to {{lesson.name}}" href="">{{lesson.name}}</a>
118118
<span ng-repeat="stage in lesson.children" >
@@ -122,15 +122,13 @@
122122
</ul>
123123
</li>
124124
</ul>
125-
126125
</div>
127126

128127
</aside>
129128
<!--sidebar left end-->
130129
<!--main content start-->
131130
<section class="main-content-wrapper">
132-
133-
<section id="main-content" > <!-- ng-controller="lessonController" -->
131+
<section id="main-content" ng-controller="goatLesson">
134132
<div class="row">
135133
<div class="col-md-8">
136134
<div class="col-md-12" align="left">
@@ -293,10 +291,10 @@
293291
var DEBUG_FORM_SUBMISSION = false;
294292
295293
$(document).ready(function() {
294+
//TODO merge appliction.js code into other js files
296295
app.init();
297-
//can be augmented later to 'resume' for a given user ... currently kluged to start at fixed lesson
298-
var url = 'attack?Screen=32&menu=5';
299-
angular.element($('#leftside-navigation')).scope().renderLesson(url);
296+
297+
300298
});
301299
// make all forms ajax forms
302300
var options = {

src/main/webapp/css/main.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -807,6 +807,12 @@ fieldset[disabled] .btn-warning.active {
807807
display: none;
808808
background-color: #eee;
809809
}
810+
811+
#showPrevHintBtn, #showNextHintBtn {
812+
cursor: pointer;
813+
}
814+
815+
810816
.info {
811817
color:#e84c3d;
812818
font-weight: bold;

src/main/webapp/js/goatControllers.js

Lines changed: 118 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -6,87 +6,135 @@
66
/** Lesson Controller (includes menu stuff)
77
* prepares and updates menu topic items for the view
88
*/
9-
goat.controller('goatLesson', function($scope, $http, $modal, $log, $sce) { //$templateCache
9+
//<<<<<<< Updated upstream
10+
//goat.controller('goatLesson', function($scope, $http, $modal, $log, $sce) { //$templateCache
11+
//=======
12+
var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
1013
$scope.cookies = [];
1114
$scope.params = [];
12-
//TODO: implement via separate promise and use config for menu (goat.data.loadMenuData())
13-
$http({method: 'GET', url: goatConstants.lessonService}).then(
14-
function(menuData) {
15-
var menuItems = goat.utils.addMenuClasses(goatConstants.menuPrefix.concat(menuData.data));
16-
$scope.menuTopics = menuItems;
17-
},
18-
function(error) {
19-
// TODO - handle this some way other than an alert
20-
console.error("Error rendering menu: " + error);
21-
}
22-
);
15+
$scope.renderMenu = function() {
16+
goat.data.loadMenu($http).then( //$http({method: 'GET', url: goatConstants.lessonService})
17+
function(menuData) {
18+
var menuItems = goat.utils.addMenuClasses(goatConstants.menuPrefix.concat(menuData.data));
19+
for (var i=0;i<menuItems.length;i++) {
20+
if (menuItems[i].name) {
21+
menuItems[i].id = menuItems[i].name.replace(/\s|\(|\)/g,'');
22+
}
23+
}
24+
25+
$scope.menuTopics = menuItems;
26+
},
27+
function(error) {
28+
// TODO - handle this some way other than an alert
29+
console.error("Error rendering menu: " + error);
30+
}
31+
);
32+
};
2333

2434
$scope.renderLesson = function(url) {
2535
//console.log(url + ' was passed in');
2636
// use jquery to render lesson content to div
2737
$scope.hintIndex = 0;
28-
2938
var curScope = $scope;
3039

3140
curScope.parameters = goat.utils.scrapeParams(url);
32-
goat.data.loadLessonContent(url).then(
33-
function(reply) {
34-
$("#lesson_content").html(reply);
35-
goat.data.loadLessonTitle().then(
36-
function(reply) {
37-
$("#lessonTitle").text(reply);
38-
}
39-
);
40-
41-
//hook forms
42-
goat.utils.makeFormsAjax();
43-
$('#hintsView').hide();
44-
// adjust menu to lessonContent size if necssary
45-
//@TODO: this is still clunky ... needs some TLC
46-
if ($('div.panel-body').height() > 400) {
47-
$('#leftside-navigation').height($(window).height());
48-
}
49-
//cookies
50-
goat.data.loadCookies().then(
51-
function(resp) {
52-
curScope.cookies = resp;
53-
}
54-
);
55-
//hints
56-
curScope.hintIndex = 0;
57-
goat.data.loadHints().then(
58-
function(resp) {
59-
curScope.hints = resp;
60-
if (curScope.hints.length > 0 && curScope.hints[0].hint.indexOf(goatConstants.noHints) === -1) {
61-
goat.utils.displayButton('showHintsBtn', true);
62-
} else {
63-
goat.utils.displayButton('showHintsBtn', false);
64-
}
65-
}
66-
);
67-
//source
68-
goat.data.loadSource().then(
69-
function(resp) {
70-
curScope.source = resp;
71-
}
72-
);
73-
//plan
74-
goat.data.loadPlan().then(
75-
function(resp) {
76-
curScope.plan = resp;
77-
}
78-
);
79-
//solution
80-
goat.data.loadSolution().then(
81-
function(resp) {
82-
curScope.solution = resp;
83-
}
84-
);
85-
goat.utils.scrollToTop();
86-
}
87-
);
41+
goat.data.loadLessonContent($http,url).then(
42+
function(reply) {
43+
goat.data.loadLessonTitle($http).then(
44+
function(reply) {
45+
$("#lessonTitle").text(reply.data);
46+
}
47+
);
48+
$("#lesson_content").html(reply.data);
49+
$('#leftside-navigation').height($('#main-content').height()+15)
50+
}
51+
)};
52+
$scope.accordionMenu = function(id) {
53+
if ($('ul#'+id).attr('isOpen') == 0) {
54+
$scope.expandMe = true;
55+
} else {
56+
$('ul#'+id).slideUp(300).attr('isOpen',0);
57+
return;
58+
}
59+
$('.lessonsAndStages').not('ul#'+id).slideUp(300).attr('isOpen',0);
60+
if ($scope.expandMe) {
61+
$('ul#'+id).slideDown(300).attr('isOpen',1);
62+
}
63+
console.log('accordion for ' + id);
64+
}
65+
$scope.renderMenu();
66+
//can be augmented later to 'resume' for a given user ... currently kluged to start at fixed lesson
67+
var url = 'attack?Screen=32&menu=5';
68+
angular.element($('#leftside-navigation')).scope().renderLesson(url);
69+
}
70+
71+
/*goatMenu.animation('.slideDown', function() {
72+
var NgHideClassName = 'ng-hide';
73+
return {
74+
beforeAddClass: function(element, className, done) {
75+
if (className === NgHideClassName) {
76+
$(element).slideUp(done);
77+
}
78+
},
79+
removeClass: function(element, className, done) {
80+
if (className === NgHideClassName) {
81+
$(element).hide().slideDown(done);
82+
}
83+
}
8884
};
8985
86+
87+
});*/
88+
89+
var goatLesson = function($scope,$http,$log) {
90+
//hook forms
91+
92+
$('#hintsView').hide();
93+
// adjust menu to lessonContent size if necssary
94+
//@TODO: this is still clunky ... needs some TLC
95+
if ($('div.panel-body').height() > 400) {
96+
$('#leftside-navigation').height($(window).height());
97+
}
98+
//cookies
99+
goat.data.loadCookies($http).then(
100+
function(resp) {
101+
curScope.cookies = resp.data;
102+
}
103+
);
104+
//hints
105+
curScope = $scope; //TODO .. update below, this curScope is probably not needed
106+
curScope.hintIndex = 0;
107+
goat.data.loadHints($http).then(
108+
function(resp) {
109+
curScope.hints = resp.data;
110+
if (curScope.hints.length > 0 && curScope.hints[0].hint.indexOf(goatConstants.noHints) === -1) {
111+
goat.utils.displayButton('showHintsBtn', true);
112+
} else {
113+
goat.utils.displayButton('showHintsBtn', false);
114+
}
115+
}
116+
);
117+
//source
118+
goat.data.loadSource($http).then(
119+
function(resp) {
120+
curScope.source = resp.data;
121+
}
122+
);
123+
//plan
124+
goat.data.loadPlan($http).then(
125+
function(resp) {
126+
curScope.plan = resp.data;
127+
}
128+
);
129+
//solution
130+
goat.data.loadSolution($http).then(
131+
function(resp) {
132+
curScope.solution = resp.data;
133+
}
134+
);
135+
goat.utils.scrollToTop();
136+
137+
90138
$scope.showLessonSource = function() {
91139
$('.lessonHelp').hide();
92140
$('#lesson_source_row').show();
@@ -164,22 +212,6 @@ goat.controller('goatLesson', function($scope, $http, $modal, $log, $sce) { //$t
164212
//remote: 'about.mvc'
165213
});
166214
};
215+
}
167216

168217

169-
}).animation('.slideDown', function() {
170-
var NgHideClassName = 'ng-hide';
171-
return {
172-
beforeAddClass: function(element, className, done) {
173-
if (className === NgHideClassName) {
174-
$(element).slideUp(done);
175-
}
176-
},
177-
removeClass: function(element, className, done) {
178-
if (className === NgHideClassName) {
179-
$(element).hide().slideDown(done);
180-
}
181-
}
182-
};
183-
184-
185-
});

src/main/webapp/js/goatData.js

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,39 @@
22

33
goat.data = {
44
/**** jQuery loads ... ****/
5-
loadLessonContent: function (_url) {
5+
loadLessonContent: function ($http,_url) {
66
//TODO: switch to $http (angular) later
7-
//return $http({method:'GET', url: _url});
8-
9-
return $.get(_url, {}, null, "html");
7+
return $http({method:'GET', url: _url});
8+
//return $.get(_url, {}, null, "html");
109
},
11-
loadCookies: function() {
12-
return $.get(goatConstants.cookieService, {});
10+
loadCookies: function($http) {
11+
return $http({method: 'GET', url: goatConstants.cookieService});
12+
//return $.get(goatConstants.cookieService, {});
1313
},
14-
loadHints: function () {
15-
return $.get(goatConstants.hintService, {});
14+
loadHints: function ($http) {
15+
return $http({method: 'GET', url: goatConstants.hintService});
16+
//return $.get(goatConstants.hintService, {});
1617
},
17-
loadSource: function() {
18-
return $.get(goatConstants.sourceService, {});
18+
loadSource: function($http) {
19+
return $http({method: 'GET', url: goatConstants.sourceService});
20+
//return $.get(goatConstants.sourceService, {});
1921
},
20-
loadSolution: function () {
21-
return $.get(goatConstants.solutionService, {});
22+
loadSolution: function ($http) {
23+
return $http({method: 'GET', url: goatConstants.solutionService});
24+
//return $.get(goatConstants.solutionService, {});
2225
},
23-
loadPlan: function () {
24-
return $.get(goatConstants.lessonPlanService, {});
26+
loadPlan: function ($http) {
27+
return $http({method: 'GET', url: goatConstants.lessonPlanService});
28+
//return $.get(goatConstants.lessonPlanService, {});
2529
},
26-
loadParams: function() {
27-
return $.get(goatConstants.paramsService,{});
30+
loadParams: function($http) {
31+
return $http({method: 'GET', url: goatConstants.paramsService});
32+
//return $.get(goatConstants.paramsService,{});
2833
},
29-
/*** angular data grabs ***/
30-
loadMenuData: function() {
31-
//TODO use goatConstants var for url
32-
return $http({method: 'GET', url: goatConstants.menuService});
34+
loadMenu: function($http) {
35+
return $http({method: 'GET', url: goatConstants.lessonService});
3336
},
34-
loadLessonTitle: function () {
35-
return $.get(goatConstants.lessonTitleService, {});
37+
loadLessonTitle: function ($http) {
38+
return $http({method: 'GET', url: goatConstants.lessonTitleService});
3639
}
3740
};

0 commit comments

Comments
 (0)