mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-08 00:42:15 +02:00
API structuring + webpack config
This commit is contained in:
parent
8651d69b42
commit
41efa76a5b
2
.babelrc
2
.babelrc
|
@ -1,3 +1,3 @@
|
|||
{
|
||||
"presets": ["es2015", "stage-0", "react"]
|
||||
"presets": ["es2015", "stage-0"]
|
||||
}
|
||||
|
|
|
@ -1,62 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
class Choices {
|
||||
constructor() {
|
||||
const DEFAULT_CONFIG = {
|
||||
element: '[data-choice]',
|
||||
disabled: false,
|
||||
maxItems: 0,
|
||||
debug: false,
|
||||
callbackOnInit: function(){},
|
||||
callbackOnKeyDown: function(){},
|
||||
callbackOnEnter: function(){},
|
||||
callbackOnSearch: function(){}
|
||||
};
|
||||
|
||||
this.onClick = this.onClick.bind(this);
|
||||
this.onKeyDown = this.onKeyDown.bind(this);
|
||||
this.onChange = this.onChange.bind(this);
|
||||
this.onFocus = this.onFocus.bind(this);
|
||||
this.onBlur = this.onChange.bind(this);
|
||||
|
||||
this.render();
|
||||
}
|
||||
|
||||
onKeyDown() {
|
||||
console.log('Key down');
|
||||
}
|
||||
|
||||
onFocus() {
|
||||
console.log('Focus');
|
||||
}
|
||||
|
||||
onClick() {
|
||||
console.log('Click');
|
||||
}
|
||||
|
||||
onChange() {
|
||||
console.log('Change');
|
||||
}
|
||||
|
||||
addEventListeners() {
|
||||
document.addEventListener('click', this.onClick);
|
||||
document.addEventListener('keydown', this.onKeyDown);
|
||||
document.addEventListener('change', this.onChange);
|
||||
document.addEventListener('focus', this.onFocus);
|
||||
document.addEventListener('blur', this.onBlur);
|
||||
}
|
||||
|
||||
removeEventListeners() {
|
||||
document.removeEventListener('click', this.onClick);
|
||||
document.removeEventListener('keydown', this.onKeyDown);
|
||||
document.removeEventListener('change', this.onChange);
|
||||
document.removeEventListener('focus', this.onFocus);
|
||||
document.removeEventListener('blur', this.onBlur);
|
||||
}
|
||||
|
||||
render(){
|
||||
console.log('Render');
|
||||
}
|
||||
}
|
||||
|
||||
new Choices();
|
1
assets/scripts/dist/bundle.js
vendored
Normal file
1
assets/scripts/dist/bundle.js
vendored
Normal file
|
@ -0,0 +1 @@
|
|||
!function(e){function n(o){if(t[o])return t[o].exports;var i=t[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,n),i.loaded=!0,i.exports}var t={};return n.m=e,n.c=t,n.p="/assets/scripts/dist/",n(0)}([function(e,n,t){e.exports=t(1)},function(e,n,t){function o(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}var i,u=function(){function e(e,n){for(var t=0;t<n.length;t++){var o=n[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(n,t,o){return t&&e(n.prototype,t),o&&e(n,o),n}}();"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e};!function(o,u){i=function(){return u(o)}.call(n,t,n,e),!(void 0!==i&&(e.exports=i))}(void 0,function(e){"use strict";var n=function(){function e(){o(this,e);this.onClick=this.onClick.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.onChange=this.onChange.bind(this),this.onFocus=this.onFocus.bind(this),this.onBlur=this.onChange.bind(this),this.render()}return u(e,[{key:"isOpen",value:function(){}},{key:"isDisabled",value:function(){}},{key:"isEmpty",value:function(){}},{key:"onKeyDown",value:function(){console.log("Key down")}},{key:"onFocus",value:function(){console.log("Focus")}},{key:"onClick",value:function(){console.log("Click")}},{key:"onChange",value:function(){console.log("Change")}},{key:"addEventListeners",value:function(){document.addEventListener("click",this.onClick),document.addEventListener("keydown",this.onKeyDown),document.addEventListener("change",this.onChange),document.addEventListener("focus",this.onFocus),document.addEventListener("blur",this.onBlur)}},{key:"removeEventListeners",value:function(){document.removeEventListener("click",this.onClick),document.removeEventListener("keydown",this.onKeyDown),document.removeEventListener("change",this.onChange),document.removeEventListener("focus",this.onFocus),document.removeEventListener("blur",this.onBlur)}},{key:"setPlaceholder",value:function(){}},{key:"setValue",value:function(){}},{key:"getValue",value:function(){}},{key:"getPlaceholder",value:function(){}},{key:"search",value:function(){}},{key:"addItem",value:function(){}},{key:"removeItem",value:function(){}},{key:"removeAllItems",value:function(){}},{key:"createItemList",value:function(){}},{key:"render",value:function(){console.log("Render")}},{key:"destroy",value:function(){}}]),e}();new n})}]);
|
137
assets/scripts/src/choices.js
Normal file
137
assets/scripts/src/choices.js
Normal file
|
@ -0,0 +1,137 @@
|
|||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(function() {
|
||||
return factory(root);
|
||||
});
|
||||
} else if (typeof exports === 'object') {
|
||||
module.exports = factory;
|
||||
} else {
|
||||
root.Choices = factory(root);
|
||||
}
|
||||
})(this, function (root) {
|
||||
|
||||
'use strict';
|
||||
|
||||
class Choices {
|
||||
constructor() {
|
||||
const DEFAULT_CONFIG = {
|
||||
element: '[data-choice]',
|
||||
disabled: false,
|
||||
maxItems: 0,
|
||||
debug: false,
|
||||
callbackOnInit: function(){},
|
||||
callbackOnRender: function(){},
|
||||
callbackOnKeyUp: function(){},
|
||||
callbackOnKeyDown: function(){},
|
||||
callbackOnEntry: function(){},
|
||||
callbackOnRemove: function(){}
|
||||
};
|
||||
|
||||
this.onClick = this.onClick.bind(this);
|
||||
this.onKeyDown = this.onKeyDown.bind(this);
|
||||
this.onChange = this.onChange.bind(this);
|
||||
this.onFocus = this.onFocus.bind(this);
|
||||
this.onBlur = this.onChange.bind(this);
|
||||
|
||||
this.render();
|
||||
}
|
||||
|
||||
/* State */
|
||||
|
||||
isOpen() {
|
||||
|
||||
}
|
||||
|
||||
isDisabled() {
|
||||
|
||||
}
|
||||
|
||||
isEmpty() {
|
||||
|
||||
}
|
||||
|
||||
/* Event handling */
|
||||
|
||||
onKeyDown() {
|
||||
console.log('Key down');
|
||||
}
|
||||
|
||||
onFocus() {
|
||||
console.log('Focus');
|
||||
}
|
||||
|
||||
onClick() {
|
||||
console.log('Click');
|
||||
}
|
||||
|
||||
onChange() {
|
||||
console.log('Change');
|
||||
}
|
||||
|
||||
/* Event listeners */
|
||||
|
||||
addEventListeners() {
|
||||
document.addEventListener('click', this.onClick);
|
||||
document.addEventListener('keydown', this.onKeyDown);
|
||||
document.addEventListener('change', this.onChange);
|
||||
document.addEventListener('focus', this.onFocus);
|
||||
document.addEventListener('blur', this.onBlur);
|
||||
}
|
||||
|
||||
removeEventListeners() {
|
||||
document.removeEventListener('click', this.onClick);
|
||||
document.removeEventListener('keydown', this.onKeyDown);
|
||||
document.removeEventListener('change', this.onChange);
|
||||
document.removeEventListener('focus', this.onFocus);
|
||||
document.removeEventListener('blur', this.onBlur);
|
||||
}
|
||||
|
||||
/* Methods */
|
||||
|
||||
setPlaceholder() {
|
||||
|
||||
}
|
||||
|
||||
setValue() {
|
||||
|
||||
}
|
||||
|
||||
getValue() {
|
||||
|
||||
}
|
||||
|
||||
getPlaceholder() {
|
||||
|
||||
}
|
||||
|
||||
search() {
|
||||
|
||||
}
|
||||
|
||||
addItem() {
|
||||
|
||||
}
|
||||
|
||||
removeItem() {
|
||||
|
||||
}
|
||||
|
||||
removeAllItems() {
|
||||
|
||||
}
|
||||
|
||||
createItemList() {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log('Render');
|
||||
}
|
||||
|
||||
destroy() {
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
new Choices();
|
||||
});
|
|
@ -6,6 +6,6 @@
|
|||
</head>
|
||||
<body>
|
||||
<input type="text" data-choice>
|
||||
<script src="assets/js/src/choices.js"></script>
|
||||
<script src="assets/scripts/dist/bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
44
package.json
Normal file
44
package.json
Normal file
|
@ -0,0 +1,44 @@
|
|||
{
|
||||
"name": "choices",
|
||||
"version": "1.0.0",
|
||||
"description": "A vanilla JS customisable select box plugin",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "node server.js",
|
||||
"lint": "eslint ./assets/scripts/src",
|
||||
"css:watch": "nodemon -e scss -x \"npm run css:build\"",
|
||||
"css:build": "npm run css:sass -s && npm run css:prefix -s && npm run css:min -s",
|
||||
"css:sass": "node-sass --include-path scss assets/styles/scss/main.scss assets/styles/css/main.css",
|
||||
"css:prefix": "postcss --use autoprefixer -b 'last 2 versions' assets/styles/css/*.css -d assets/styles/css/",
|
||||
"css:min": "csso assets/styles/css/main.css assets/styles/css/main.min.css",
|
||||
"js:build": "webpack --config webpack.config.prod.js",
|
||||
"js:test": "./node_modules/karma/bin/karma start --single-run --no-auto-watch tests/karma.config.js",
|
||||
"js:test_watch": "./node_modules/karma/bin/karma start --auto-watch --no-single-run tests/karma.config.js"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/jshjohnson/Choices.git"
|
||||
},
|
||||
"author": "Josh Johnson",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/jshjohnson/Choices/issues"
|
||||
},
|
||||
"homepage": "https://github.com/jshjohnson/Choices#readme",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.3.3",
|
||||
"babel-core": "^6.7.2",
|
||||
"babel-eslint": "^5.0.0",
|
||||
"babel-loader": "^6.2.4",
|
||||
"babel-preset-es2015": "^6.6.0",
|
||||
"babel-preset-stage-0": "^6.5.0",
|
||||
"csso": "^1.7.0",
|
||||
"eslint": "^2.4.0",
|
||||
"node-sass": "^3.4.2",
|
||||
"nodemon": "^1.9.1",
|
||||
"opn-cli": "^3.1.0",
|
||||
"postcss-cli": "^2.5.1",
|
||||
"webpack": "^1.12.14",
|
||||
"webpack-dev-server": "^1.14.1"
|
||||
}
|
||||
}
|
13
server.js
Normal file
13
server.js
Normal file
|
@ -0,0 +1,13 @@
|
|||
var webpack = require('webpack');
|
||||
var WebpackDevServer = require('webpack-dev-server');
|
||||
var config = require('./webpack.config.dev');
|
||||
var opn = require('opn');
|
||||
|
||||
new WebpackDevServer(webpack(config), {
|
||||
publicPath: config.output.publicPath,
|
||||
historyApiFallback: true,
|
||||
}).listen(3000, 'localhost', function (err, result) {
|
||||
if (err) console.log(err);
|
||||
opn('http://localhost:3000');
|
||||
console.log('Listening at localhost:3000');
|
||||
});
|
32
webpack.config.dev.js
Normal file
32
webpack.config.dev.js
Normal file
|
@ -0,0 +1,32 @@
|
|||
var path = require('path');
|
||||
var webpack = require('webpack');
|
||||
|
||||
module.exports = {
|
||||
devtool: 'eval',
|
||||
entry: [
|
||||
'webpack-dev-server/client?http://localhost:3000',
|
||||
'./assets/scripts/src/choices'
|
||||
],
|
||||
output: {
|
||||
path: path.join(__dirname, 'dist'),
|
||||
filename: 'bundle.js',
|
||||
publicPath: '/assets/scripts/dist/'
|
||||
},
|
||||
plugins: [
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new webpack.NoErrorsPlugin(),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
'NODE_ENV': JSON.stringify('development')
|
||||
}
|
||||
})
|
||||
],
|
||||
module: {
|
||||
loaders: [{
|
||||
test: /\.js$/,
|
||||
exclude: /(node_modules|bower_components)/,
|
||||
loaders: ['babel'],
|
||||
include: path.join(__dirname, 'assets/scripts/src')
|
||||
}]
|
||||
}
|
||||
};
|
41
webpack.config.prod.js
Normal file
41
webpack.config.prod.js
Normal file
|
@ -0,0 +1,41 @@
|
|||
var path = require('path');
|
||||
var webpack = require('webpack');
|
||||
|
||||
module.exports = {
|
||||
devtool: 'cheap-module-source-map',
|
||||
entry: [
|
||||
'./assets/scripts/src/choices'
|
||||
],
|
||||
output: {
|
||||
path: path.join(__dirname, '/assets/scripts/dist'),
|
||||
filename: 'bundle.js',
|
||||
publicPath: '/assets/scripts/dist/'
|
||||
},
|
||||
plugins: [
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
sourceMap: false,
|
||||
mangle: true,
|
||||
output: {
|
||||
comments: false
|
||||
},
|
||||
compress: {
|
||||
warnings: false,
|
||||
screw_ie8: true
|
||||
}
|
||||
}),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
// This has effect on the react lib size
|
||||
'NODE_ENV': JSON.stringify('production'),
|
||||
}
|
||||
}),
|
||||
],
|
||||
module: {
|
||||
loaders: [{
|
||||
test: /\.js$/,
|
||||
exclude: /(node_modules|bower_components)/,
|
||||
loaders: ['babel'],
|
||||
include: path.join(__dirname, 'assets/scripts/src')
|
||||
}]
|
||||
}
|
||||
};
|
Loading…
Reference in a new issue