Skip to content

Commit 8923802

Browse files
dalelottsdalelotts
committed
feat(datetimepicker): Add support for webpack
Added code and tests to support webpack. Not sure how to test that templates are loaded correctly via webpack. Closes #273, #294
1 parent 81ef83d commit 8923802

File tree

8 files changed

+173
-21
lines changed

8 files changed

+173
-21
lines changed

‎index.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/** See the file "LICENSE" for the full license governing this code.
2+
*
3+
* @author Dale "Ducky" Lotts
4+
* @since 9/11/16.
5+
*/
6+
7+
require('./src/js/datetimepicker');
8+
require('./src/js/datetimepicker.templates');
9+
10+
module.exports = 'ui.bootstrap.datetimepicker';

‎package.json

+7-4
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
},
1919
"license": "MIT",
2020
"homepage": "http://dalelotts.github.io/angular-bootstrap-datetimepicker",
21-
"main": "src/js/datetimepicker.js",
21+
"main": "index.js",
2222
"dependencies": {
2323
"angular": "^1.5.8",
2424
"moment": "^2.14.1"
@@ -59,6 +59,7 @@
5959
"karma-jasmine": "^1.0.2",
6060
"karma-phantomjs-launcher": "^1.0.2",
6161
"karma-threshold-reporter": "^0.1.15",
62+
"karma-webpack": "^1.8.0",
6263
"lodash": "^4.15.0",
6364
"matchdep": "^1.0.1",
6465
"moment-timezone": "^0.5.5",
@@ -68,13 +69,15 @@
6869
"semantic-release": "^6.2.0",
6970
"standard": "^8.0.0",
7071
"stylelint-config-standard": "^13.0.0",
71-
"tape": "^4.6.0"
72+
"tape": "^4.6.0",
73+
"webpack": "^1.13.2"
7274
},
7375
"scripts": {
74-
"test": "npm run test-browserify && gulp",
7576
"coverage:upload": "cat build/coverage/lcov.info | coveralls",
77+
"semantic-release": "semantic-release pre && npm publish && semantic-release post",
78+
"test": "npm run test-browserify && npm run test-webpack && gulp",
7679
"test-browserify": "run-browser test/commonjs/browserify.test.js -b",
77-
"semantic-release": "semantic-release pre && npm publish && semantic-release post"
80+
"test-webpack": "karma start test/webpack/karma.conf.js"
7881
},
7982
"repository": {
8083
"type": "git",

‎src/js/datetimepicker.js

+11-8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* globals define, jQuery, module, require */
1+
/* globals define, jQuery, module, require, angular, moment */
22
/* jslint vars:true */
33

44
/**
@@ -10,18 +10,21 @@
1010
* @since 2013-Jul-8
1111
*/
1212

13-
(function (factory) {
13+
(function (root, factory) {
1414
'use strict'
1515
/* istanbul ignore if */
16-
if (typeof define === 'function' && /* istanbul ignore next */ define.amd) {
17-
define(['angular', 'moment'], factory) // AMD
16+
if (typeof module !== 'undefined' && module.exports) {
17+
var ng = typeof angular === 'undefined' ? require('angular') : angular
18+
var mt = typeof moment === 'undefined' ? require('moment') : moment
19+
factory(ng, mt)
20+
module.exports = 'ui.bootstrap.datetimepicker'
1821
/* istanbul ignore next */
19-
} else if (typeof exports === 'object') {
20-
module.exports = factory(require('angular'), require('moment')) // CommonJS
22+
} else if (typeof define === 'function' && /* istanbul ignore next */ define.amd) {
23+
define(['angular', 'moment'], factory)
2124
} else {
22-
factory(window.angular, window.moment) // Browser global
25+
factory(root.angular, root.moment)
2326
}
24-
}(function (angular, moment) {
27+
}(this, function (angular, moment) {
2528
'use strict'
2629
angular.module('ui.bootstrap.datetimepicker', [])
2730
.service('dateTimePickerConfig', DateTimePickerConfigProvider)

‎src/js/datetimepicker.templates.js

+11-9
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,28 @@
1-
/* globals define, module, require */
1+
/* globals define, module, require, angular */
22

33
/**
44
* @license angular-bootstrap-datetimepicker
55
* Copyright 2016 Knight Rider Consulting, Inc. http://www.knightrider.com
66
* License: MIT
77
*
8-
* @author Dale "Ducky" Lotts
8+
* @author Dale "Ducky" Lotts
99
* @since 2016-Jan-31
1010
*/
1111

12-
(function (factory) {
12+
(function (root, factory) {
1313
'use strict'
1414
/* istanbul ignore if */
15-
if (typeof define === 'function' && /* istanbul ignore next */ define.amd) {
16-
define(['angular'], factory) // AMD
15+
if (typeof module !== 'undefined' && module.exports) {
16+
var ng = typeof angular === 'undefined' ? require('angular') : angular
17+
factory(ng)
18+
module.exports = 'ui.bootstrap.datetimepicker.templates'
1719
/* istanbul ignore next */
18-
} else if (typeof exports === 'object') {
19-
module.exports = factory(require('angular')) // CommonJS
20+
} else if (typeof define === 'function' && /* istanbul ignore next */ define.amd) {
21+
define(['angular'], factory)
2022
} else {
21-
factory(window.angular) // Browser global
23+
factory(root.angular, root.moment)
2224
}
23-
}(function (angular) {
25+
}(this, function (angular) {
2426
'use strict'
2527
angular.module('ui.bootstrap.datetimepicker').run(['$templateCache', function ($templateCache) {
2628
$templateCache.put('templates/datetimepicker.html', '<div class="datetimepicker table-responsive">\n <table class="table table-condensed {{ data.currentView }}-view">\n <thead>\n <tr>\n <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">{{ screenReader.previous }}</span></i>\n </th>\n <th class="switch" colspan="5" data-ng-show="data.previousViewDate.selectable" data-ng-click="changeView(data.previousView, data.previousViewDate, $event)">{{ data.previousViewDate.display }}</th>\n <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">{{ screenReader.next }}</span></i>\n </th>\n </tr>\n <tr>\n <th class="dow" data-ng-repeat="day in data.dayNames">{{ day }}</th>\n </tr>\n </thead>\n <tbody>\n <tr data-ng-if="data.currentView !== \'day\'">\n <td colspan="7">\n <span class="{{ data.currentView }}" data-ng-repeat="dateObject in data.dates" data-ng-class="{active: dateObject.active, past: dateObject.past, future: dateObject.future, disabled: !dateObject.selectable}" data-ng-click="changeView(data.nextView, dateObject, $event)">{{ dateObject.display }}</span></td>\n </tr>\n <tr data-ng-if="data.currentView === \'day\'" data-ng-repeat="week in data.weeks">\n <td data-ng-repeat="dateObject in week.dates" data-ng-click="changeView(data.nextView, dateObject, $event)" class="day" data-ng-class="{active: dateObject.active, past: dateObject.past, future: dateObject.future, disabled: !dateObject.selectable}">{{ dateObject.display }}</td>\n </tr>\n </tbody>\n </table>\n</div>')

‎test/webpack/app.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/* globals require */
2+
3+
/** See the file "LICENSE" for the full license governing this code.
4+
*
5+
*
6+
* @author Dale "Ducky" Lotts
7+
* @since 9/11/16.
8+
*/
9+
10+
var angular = require('angular');
11+
12+
angular.module('app', []);

‎test/webpack/karma.conf.js

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/* globals require */
2+
/* jshint node:true */
3+
4+
/**
5+
* See the file "LICENSE" for the full license governing this code.
6+
*
7+
* @author Dale "Ducky" Lotts
8+
* @since 9/11/16.
9+
*/
10+
11+
var webpackConfig = require('./webpack.conf');
12+
13+
module.exports = function(config) {
14+
'use strict';
15+
config.set({
16+
17+
// base path that will be used to resolve all patterns (eg. files, exclude)
18+
basePath: '',
19+
20+
// frameworks to use
21+
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
22+
frameworks: ['jasmine'],
23+
24+
// list of files / patterns to load in the browser
25+
files: [{
26+
pattern: 'webpack.test.js',
27+
watched: false,
28+
included: true,
29+
served: true
30+
}],
31+
32+
// webpack configuration
33+
webpack: webpackConfig,
34+
35+
// webpack middlewae configuration
36+
webpackMiddleware: { noInfo: true },
37+
38+
// list of files to exclude
39+
exclude: [],
40+
41+
// preprocess matching files before serving them to the browser
42+
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
43+
preprocessors: {
44+
'webpack.test.js': ['webpack']
45+
},
46+
47+
// test results reporter to use
48+
// possible values: 'dots', 'progress'
49+
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
50+
reporters: ['progress'],
51+
52+
// web server port
53+
port: 9876,
54+
55+
// enable / disable colors in the output (reporters and logs)
56+
colors: true,
57+
58+
// level of logging
59+
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
60+
logLevel: config.LOG_INFO,
61+
62+
// enable / disable watching file and executing tests whenever any file changes
63+
autoWatch: false,
64+
65+
// start these browsers
66+
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
67+
browsers: ['PhantomJS'],
68+
69+
// Continuous Integration mode
70+
// if true, Karma captures browsers, runs the tests and exits
71+
singleRun: true,
72+
73+
// Concurrency level
74+
// how many browser should be started simultaneous
75+
concurrency: Infinity
76+
});
77+
};

‎test/webpack/webpack.conf.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/* globals __dirname */
2+
/* jshint node:true */
3+
4+
/**
5+
* See the file "LICENSE" for the full license governing this code.
6+
*
7+
* @author Dale "Ducky" Lotts
8+
* @since 9/11/16.
9+
*/
10+
11+
var path = require('path')
12+
13+
module.exports = {
14+
entry: [path.join(__dirname, 'app.js')],
15+
output: {
16+
path: __dirname,
17+
filename: 'bundle.js'
18+
}
19+
};

‎test/webpack/webpack.test.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/* globals require, angular */
2+
3+
/**
4+
* See the file "LICENSE" for the full license governing this code.
5+
*
6+
* @author Dale "Ducky" Lotts
7+
* @since 9/11/16.
8+
*/
9+
10+
require('angular');
11+
describe('webpack require', function () {
12+
'use strict';
13+
14+
function loadDateTimePicker () {
15+
angular.module('ui.bootstrap.datetimepicker');
16+
}
17+
18+
it('should throw an error if the module is not defined', function () {
19+
expect(loadDateTimePicker).toThrow();
20+
});
21+
22+
it('should be available when required', function () {
23+
require('../../');
24+
expect(loadDateTimePicker).not.toThrow();
25+
});
26+
});

0 commit comments

Comments
 (0)