Skip to content

Commit 0b7720f

Browse files
dalelottsdalelotts
committed
refactor(demo-controller): Refactor demo-controller to use papa above the fold style.
Merge pull request #246 from dalemanthei/develop * Favor function declaration over function expression. https://github.com/johnpapa/angular-styleguide#style-y034 * All functions are exposed on the scope bindable elements but if any of them are purely internal they should, be removed from the scope. * Wrapped with iffe https://github.com/johnpapa/angular-styleguide#style-y010 * Coded the injector directly. The real ideal would be a build step that leverages the gulp-ng-annotate plugin to add the injector statement at build time. I took a quick look but didn't see a step to wire it to so manually wrote the inject. https://github.com/johnpapa/angular-styleguide#style-y091
1 parent 36b2c94 commit 0b7720f

17 files changed

+257
-115
lines changed

‎demo/demo-controller.js

Lines changed: 123 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,126 @@
11
/*globals angular, moment, $ */
2+
(function () {
3+
'use strict';
4+
5+
angular
6+
.module('demo.demoController', [])
7+
.controller('demoController', demoController);
8+
9+
demoController.$inject = ['$scope', '$log'];
10+
11+
function demoController($scope, $log) {
12+
13+
var validViews = ['year', 'month', 'day', 'hour', 'minute'];
14+
var selectable = true;
15+
16+
$scope.controllerName = 'demoController';
17+
18+
/* Bindable functions
19+
-----------------------------------------------*/
20+
$scope.beforeRender = beforeRender;
21+
$scope.changeConfig = changeConfig;
22+
$scope.checkboxOnTimeSet = checkboxOnTimeSet;
23+
$scope.configFunction = configFunction;
24+
$scope.getLocale = getLocale;
25+
$scope.guardianOnSetTime = guardianOnSetTime;
26+
$scope.inputOnTimeSet = inputOnTimeSet;
27+
$scope.renderOnBeforeRender = renderOnBeforeRender;
28+
$scope.renderOnClick = renderOnClick;
29+
$scope.setLocale = setLocale;
30+
31+
moment.locale('en');
32+
33+
$scope.config = {
34+
datetimePicker: {
35+
startView: 'year'
36+
}
37+
};
38+
39+
$scope.data = {
40+
guardians: [
41+
{
42+
name: 'Peter Quill',
43+
dob: null
44+
},
45+
{
46+
name: 'Groot',
47+
dob: null
48+
}
49+
]
50+
};
51+
52+
$scope.config = {
53+
configureOnConfig: {
54+
startView: 'year',
55+
configureOn: 'config-changed'
56+
},
57+
renderOnConfig: {
58+
startView: 'year',
59+
renderOn: 'valid-dates-changed'
60+
}
61+
};
62+
63+
function checkboxOnTimeSet() {
64+
$scope.data.checked = false;
65+
}
66+
67+
function inputOnTimeSet(newDate) {
68+
// If you are not using jQuery or bootstrap.js,
69+
// this will throw an error.
70+
// However, can write this function to take any
71+
// action necessary once the user has selected a
72+
// date/time using the picker
73+
$log.info(newDate);
74+
$('#dropdown3').dropdown('toggle');
75+
}
76+
77+
function getLocale() {
78+
return moment.locale();
79+
}
80+
81+
function setLocale(newLocale) {
82+
moment.locale(newLocale);
83+
}
284

3-
angular.module('demo.demoController', [])
4-
.controller('demoController', [
5-
'$scope',
6-
'$log',
7-
function ($scope, $log) {
8-
'use strict';
9-
$scope.controllerName = 'demoController';
10-
11-
moment.locale('en');
12-
13-
$scope.data = {
14-
guardians: [
15-
{
16-
name: 'Peter Quill',
17-
dob: null
18-
},
19-
{
20-
name: 'Groot',
21-
dob: null
22-
}
23-
]
24-
};
25-
26-
$scope.checkboxOnTimeSet = function () {
27-
$scope.data.checked = false;
28-
};
29-
30-
$scope.inputOnTimeSet = function (newDate) {
31-
// If you are not using jQuery or bootstrap.js,
32-
// this will throw an error.
33-
// However, can write this function to take any
34-
// action necessary once the user has selected a
35-
// date/time using the picker
36-
$log.info(newDate);
37-
$('#dropdown3').dropdown('toggle');
38-
};
39-
40-
$scope.getLocale = function () {
41-
return moment.locale();
42-
};
43-
44-
$scope.setLocale = function (newLocale) {
45-
moment.locale(newLocale);
46-
};
47-
48-
49-
$scope.guardianOnSetTime = function ($index, guardian, newDate, oldDate) {
50-
$log.info($index);
51-
$log.info(guardian.name);
52-
$log.info(newDate);
53-
$log.info(oldDate);
54-
angular.element('#guardian' + $index).dropdown('toggle');
55-
};
56-
57-
$scope.beforeRender = function ($dates) {
58-
var index = Math.ceil($dates.length / 2);
59-
$log.info(index);
60-
$dates[index].selectable = false;
61-
};
62-
63-
$scope.config = {
64-
datetimePicker: {
65-
startView: 'year'
66-
}
67-
};
68-
69-
$scope.configFunction = function configFunction() {
70-
return {startView: 'month'};
71-
};
72-
73-
$scope.config = {
74-
configureOnConfig: {
75-
startView: 'year',
76-
configureOn: 'config-changed'
77-
},
78-
renderOnConfig: {
79-
startView: 'year',
80-
renderOn: 'valid-dates-changed'
81-
}
82-
};
83-
84-
var validViews = ['year', 'month', 'day', 'hour', 'minute'];
85-
86-
$scope.changeConfig = function changeConfig() {
87-
var newIndex = validViews.indexOf($scope.config.configureOnConfig.startView) + 1;
88-
console.log(newIndex);
89-
if (newIndex >= validViews.length) {
90-
newIndex = 0;
91-
}
92-
$scope.config.configureOnConfig.startView = validViews[newIndex];
93-
$scope.$broadcast('config-changed');
94-
};
95-
96-
var selectable = true;
97-
98-
$scope.renderOnBeforeRender = function ($dates) {
99-
angular.forEach($dates, function (dateObject) {
100-
dateObject.selectable = selectable;
101-
});
102-
};
103-
104-
$scope.renderOnClick = function renderOnClick() {
105-
selectable = (!selectable);
106-
$scope.$broadcast('valid-dates-changed');
107-
};
85+
function guardianOnSetTime($index, guardian, newDate, oldDate) {
86+
$log.info($index);
87+
$log.info(guardian.name);
88+
$log.info(newDate);
89+
$log.info(oldDate);
90+
angular.element('#guardian' + $index).dropdown('toggle');
91+
};
92+
93+
function beforeRender($dates) {
94+
var index = Math.ceil($dates.length / 2);
95+
$log.info(index);
96+
$dates[index].selectable = false;
97+
};
98+
99+
function configFunction() {
100+
return {startView: 'month'};
108101
}
109-
]);
102+
103+
function changeConfig() {
104+
var newIndex = validViews.indexOf($scope.config.configureOnConfig.startView) + 1;
105+
console.log(newIndex);
106+
if (newIndex >= validViews.length) {
107+
newIndex = 0;
108+
}
109+
$scope.config.configureOnConfig.startView = validViews[newIndex];
110+
$scope.$broadcast('config-changed');
111+
}
112+
113+
function renderOnBeforeRender($dates) {
114+
angular.forEach($dates, function (dateObject) {
115+
dateObject.selectable = selectable;
116+
});
117+
}
118+
119+
function renderOnClick() {
120+
selectable = (!selectable);
121+
$scope.$broadcast('valid-dates-changed');
122+
}
123+
124+
}
125+
126+
})();

‎src/js/datetimepicker.js

Lines changed: 44 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,36 @@
3737
renderOn: null,
3838
startView: 'day'
3939
})
40-
.directive('datetimepicker', ['$log', 'dateTimePickerConfig', function datetimepickerDirective($log, defaultConfig) {
40+
.constant('srDictionary', {
41+
'bg': {prev: 'предишна', next: 'следваща'},
42+
'ca': {prev: 'anterior', next: 'següent'},
43+
'da': {prev: 'forrige', next: 'næste'},
44+
'de': {prev: 'vorige', next: 'weiter'},
45+
'en-au': {prev: 'previous', next: 'next'},
46+
'en-gb': {prev: 'previous', next: 'next'},
47+
'en': {prev: 'previous', next: 'next'},
48+
'es-us': {prev: 'atrás', next: 'siguiente'},
49+
'es': {prev: 'atrás', next: 'siguiente'},
50+
'fi': {prev: 'edellinen', next: 'seuraava'},
51+
'fr': {prev: 'précédent', next: 'suivant'},
52+
'hu': {prev: 'előző', next: 'következő'},
53+
'it': {prev: 'precedente', next: 'successivo'},
54+
'ja': {prev: '前へ', next: '次へ'},
55+
'ml': {prev: 'മുൻപുള്ളത്', next: 'അടുത്തത്'},
56+
'nl': {prev: 'vorige', next: 'volgende'},
57+
'pl': {prev: 'poprzednia', next: 'następna'},
58+
'pt-br': {prev: 'anteriores', next: 'próximos'},
59+
'pt': {prev: 'anterior', next: 'próximo'},
60+
'ro': {prev: 'anterior', next: 'următor'},
61+
'ru': {prev: 'предыдущая', next: 'следующая'},
62+
'sk': {prev: 'predošlá', next: 'ďalšia'},
63+
'sv': {prev: 'föregående', next: 'nästa'},
64+
'tr': {prev: 'önceki', next: 'sonraki'},
65+
'uk': {prev: 'назад', next: 'далі'},
66+
'zh-cn': {prev: '上一页', next: '下一页'},
67+
'zh-tw': {prev: '上一頁', next: '下一頁'}
68+
})
69+
.directive('datetimepicker', ['$log', 'dateTimePickerConfig', 'srDictionary', function datetimepickerDirective($log, defaultConfig, srDictionary) {
4170

4271
function DateObject() {
4372

@@ -46,6 +75,7 @@
4675
this.utcDateValue = tempDate.getTime();
4776
this.selectable = true;
4877

78+
4979
this.localDateValue = function () {
5080
return this.utcDateValue + localOffset;
5181
};
@@ -145,9 +175,9 @@
145175
'<table class="table table-condensed {{ data.currentView }}-view">' +
146176
' <thead>' +
147177
' <tr>' +
148-
' <th class="left" data-ng-click="changeView(data.currentView, data.leftDate, $event)" data-ng-show="data.leftDate.selectable"><i class="glyphicon glyphicon-arrow-left"/></th>' +
178+
' <th class="left" data-ng-click="changeView(data.currentView, data.leftDate, $event)" data-ng-show="data.leftDate.selectable"><i class="glyphicon glyphicon-arrow-left"><span class="sr-only">{{ data.srText.prev }}</span></i></th>' +
149179
' <th class="switch" colspan="5" data-ng-show="data.previousViewDate.selectable" data-ng-click="changeView(data.previousView, data.previousViewDate, $event)">{{ data.previousViewDate.display }}</th>' +
150-
' <th class="right" data-ng-click="changeView(data.currentView, data.rightDate, $event)" data-ng-show="data.rightDate.selectable"><i class="glyphicon glyphicon-arrow-right"/></th>' +
180+
' <th class="right" data-ng-click="changeView(data.currentView, data.rightDate, $event)" data-ng-show="data.rightDate.selectable"><i class="glyphicon glyphicon-arrow-right"><span class="sr-only">{{ data.srText.next }}</span></i></th>' +
151181
' </tr>' +
152182
' <tr>' +
153183
' <th class="dow" data-ng-repeat="day in data.dayNames" >{{ day }}</th>' +
@@ -194,7 +224,7 @@
194224
};
195225

196226
var configuration = configure();
197-
227+
var srText = srDictionary[moment.locale().toLowerCase()];
198228

199229
var startOfDecade = function startOfDecade(milliseconds) {
200230
var startYear = (parseInt(moment.utc(milliseconds).year() / 10, 10) * 10);
@@ -264,7 +294,8 @@
264294
}),
265295
'leftDate': new DateObject({utcDateValue: moment.utc(startDate).subtract(9, 'year').valueOf()}),
266296
'rightDate': new DateObject({utcDateValue: moment.utc(startDate).add(11, 'year').valueOf()}),
267-
'dates': []
297+
'dates': [],
298+
'srText': srText
268299
};
269300

270301
for (var i = 0; i < 12; i += 1) {
@@ -299,7 +330,8 @@
299330
}),
300331
'leftDate': new DateObject({utcDateValue: moment.utc(startDate).subtract(1, 'year').valueOf()}),
301332
'rightDate': new DateObject({utcDateValue: moment.utc(startDate).add(1, 'year').valueOf()}),
302-
'dates': []
333+
'dates': [],
334+
'srText': srText
303335
};
304336

305337
for (var i = 0; i < 12; i += 1) {
@@ -338,7 +370,8 @@
338370
'leftDate': new DateObject({utcDateValue: moment.utc(startOfMonth).subtract(1, 'months').valueOf()}),
339371
'rightDate': new DateObject({utcDateValue: moment.utc(startOfMonth).add(1, 'months').valueOf()}),
340372
'dayNames': [],
341-
'weeks': []
373+
'weeks': [],
374+
'srText': srText
342375
};
343376

344377

@@ -381,7 +414,8 @@
381414
}),
382415
'leftDate': new DateObject({utcDateValue: moment.utc(selectedDate).subtract(1, 'days').valueOf()}),
383416
'rightDate': new DateObject({utcDateValue: moment.utc(selectedDate).add(1, 'days').valueOf()}),
384-
'dates': []
417+
'dates': [],
418+
'srText': srText
385419
};
386420

387421
for (var i = 0; i < 24; i += 1) {
@@ -413,7 +447,8 @@
413447
}),
414448
'leftDate': new DateObject({utcDateValue: moment.utc(selectedDate).subtract(1, 'hours').valueOf()}),
415449
'rightDate': new DateObject({utcDateValue: moment.utc(selectedDate).add(1, 'hours').valueOf()}),
416-
'dates': []
450+
'dates': [],
451+
'srText': srText
417452
};
418453

419454
var limit = 60 / configuration.minuteStep;

‎test/view/de/day.spec.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,12 @@ describe('German day view with initial date of 2013-01-22', function () {
5555
it('has 1 `.active` element with a value of 22', function () {
5656
expect(jQuery('.active', element).text()).toBe('22');
5757
});
58+
it('has a `<th class=`left`>` that contains a sr description set in german', function () {
59+
expect(jQuery('th[class*=left] .sr-only', element).text()).toBe('vorige');
60+
});
61+
it('has a `<th class=`right`>` that contains a sr description set in english', function () {
62+
expect(jQuery('th[class*=right] .sr-only', element).text()).toBe('weiter');
63+
});
5864
});
5965

6066

‎test/view/de/hour.spec.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,12 @@ describe('hour view with initial date of 2013-01-22', function () {
5151
it('has 1 `.active` element with a value of 0:00', function () {
5252
expect(jQuery('.active', element).text()).toBe(moment(rootScope.date).format('LT'));
5353
});
54+
it('has a `<th class=`left`>` that contains a sr description set in german', function () {
55+
expect(jQuery('th[class*=left] .sr-only', element).text()).toBe('vorige');
56+
});
57+
it('has a `<th class=`right`>` that contains a sr description set in english', function () {
58+
expect(jQuery('th[class*=right] .sr-only', element).text()).toBe('weiter');
59+
});
5460
});
5561

5662

‎test/view/de/minute.spec.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,12 @@ describe('minute view with initial date of 2013-01-22 0:00', function () {
5252
it('`.active` element with a value of 0:00', function () {
5353
expect(jQuery('.active', element).text()).toBe('00:00');
5454
});
55+
it('has a `<th class=`left`>` that contains a sr description set in german', function () {
56+
expect(jQuery('th[class*=left] .sr-only', element).text()).toBe('vorige');
57+
});
58+
it('has a `<th class=`right`>` that contains a sr description set in english', function () {
59+
expect(jQuery('th[class*=right] .sr-only', element).text()).toBe('weiter');
60+
});
5561
});
5662

5763

0 commit comments

Comments
 (0)