setup foundation

demos/default/demo.config.json

@@ -1 +1,3 @@
-{}
+{
+  "template": "./index.jade"
+}

demos/default/index.jade

@@ -0,0 +1,7 @@
+doctype html
+html(lang="en")
+  head
+    title= title
+  body
+    .toolbar-container
+    script(type="application/javascript", src=bundle)

demos/default/index.js

@@ -1,5 +1,14 @@
-var backboneToolbar = require('../../js/index');
+import { Toolbar } from '../../js';
+import 'bootstrap-webpack';
 
-document.open();
-document.write('<h1>' + backboneToolbar + '</h1>');
-document.close();
+const toolbar = new Toolbar({
+  el: '.toolbar-container',
+}).set({
+  items: [{
+    type: 'button',
+    classes: ['btn', 'btn-primary'],
+    title: 'A button',
+    name: 'first-button',
+    onClick: () => console.log('click first-button'),
+  }],
+}).render();

demos/webpack.config.js

@@ -0,0 +1,16 @@
+var webpack = require('webpack');
+
+var webpackConfig = require('../webpack.config');
+
+webpackConfig.plugins = webpackConfig.plugins || [];
+webpackConfig.plugins.push(new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }));
+
+webpackConfig.module.loaders = webpackConfig.module.loaders.concat([
+  { test: /bootstrap[\\\/]js[\\\/]/, loader: 'imports?jQuery=jquery' },
+  { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
+  { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },
+  { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
+  { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' },
+]);
+
+module.exports = webpackConfig;

js/button.js

@@ -0,0 +1,3 @@
+export function buildButtonViewModel({ items, events }, button) {
+  
+}

js/index.js

@@ -1,3 +1 @@
-define([], function () {
-  return '"backbone-toolbar" is an awesome library.';
-});
+export { Toolbar } from './toolbar.js';

js/toolbar.jade

@@ -0,0 +1,3 @@
+.grid-toolbar
+  each item in items
+    != item.html

js/toolbar.js

@@ -0,0 +1,56 @@
+import _ from 'underscore';
+import Backbone from 'backbone';
+import toolbarTemplate from './toolbar.jade';
+import { buildButtonViewModel } from './button.js';
+
+const builders = {
+  button: buildButtonViewModel,
+};
+
+function convertToViewModel({ items, events }) {
+  const viewModel = _.reduce(items, (memo, item) => {
+    const builder = builders[item.type] || _.identity;
+    return builder(memo, item);
+  }, { items: [], events });
+  return viewModel;
+}
+
+export class Toolbar extends Backbone.View {
+  initialize() {
+    this._props = {};
+    this._state = {
+      items: [],
+      events: {},
+    };
+  }
+
+  set(state) {
+    this._state = state;
+    this._redraw();
+    return this;
+  }
+
+  get(attr) {
+    return this._state.get(attr);
+  }
+
+  _buildItems() {
+  }
+
+  _redraw() {
+    if (this._isRendered) {
+      const { items, events } = this._buildItems();
+      this.undelegateEvents();
+      this.$el.html(toolbarTemplate({ items }));
+      this.delegateEvents(events);
+    }
+  }
+
+  render() {
+    this._isRendered = true;
+    this._redraw();
+    return this;
+  }
+}
+
+

package.json

@@ -24,12 +24,20 @@
     "babel-core": "^6.13.2",
     "babel-loader": "^6.2.5",
     "babel-preset-es2015": "^6.13.2",
+    "babel-preset-stage-3": "^6.11.0",
+    "backbone": "^1.3.3",
+    "bootstrap": "^3.3.7",
+    "bootstrap-webpack": "0.0.5",
     "chai": "^3.5.0",
+    "css-loader": "^0.23.1",
     "del": "^2.2.2",
     "democase": "^0.1.9",
     "eslint": "^3.3.1",
     "eslint-config-xo": "^0.15.3",
     "eslint-config-xo-space": "^0.14.0",
+    "exports-loader": "^0.6.3",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^0.9.0",
     "gulp": "^3.9.1",
     "gulp-coveralls": "^0.1.4",
     "gulp-democase": "0.0.1",
@@ -37,9 +45,11 @@
     "gulp-exclude-gitignore": "^1.0.0",
     "gulp-file": "^0.3.0",
     "gulp-util": "^3.0.7",
+    "imports-loader": "^0.6.5",
     "istanbul-instrumenter-loader": "^0.2.0",
     "jade": "^1.11.0",
     "jade-loader": "^0.8.0",
+    "jquery": "^3.1.0",
     "karma": "^1.2.0",
     "karma-chrome-launcher": "^2.0.0",
     "karma-coverage": "^1.1.1",
@@ -48,12 +58,16 @@
     "karma-phantomjs-launcher": "^1.0.1",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.8.0",
+    "less": "^2.7.1",
+    "less-loader": "^2.2.3",
     "lodash": "^4.15.0",
     "mocha": "^3.0.2",
     "phantomjs-prebuilt": "^2.1.12",
     "requirejs": "^2.2.0",
     "source-map-loader": "^0.1.5",
+    "style-loader": "^0.13.1",
     "underscore": "^1.8.3",
+    "url-loader": "^0.5.7",
     "wdio-junit-reporter": "^0.1.0",
     "wdio-mocha-framework": "^0.4.0",
     "webdriverio": "^4.2.7",

webpack.config.js

@@ -41,16 +41,13 @@ module.exports = {
       { test: /\.jade$/, loader: 'jade-loader' },
       // jade-end
       // es2015
-      {
-        test: /\.(js|es6?)$/,
-        exclude: /node_modules/,
-        loader: 'babel-loader',
-        query: { presets: ['es2015'] },
-      },
+      { test: /\.js$/, exclude: /\bnode_modules\b/, loader: 'babel-loader' },
       // es2015-end
       // react
+      { test: /\.less$/, loader: 'style!css!less' },
     ],
   },
+  babel: { presets: ['es2015', 'stage-3'] },
   externals: [getExternals()],
   resolve: { alias: webpackAlias },
   devtool: 'source-map',