From 8ffcc2bbd0460616495d18feb74763f31a459c1d Mon Sep 17 00:00:00 2001 From: Yuval Adam Date: Sat, 2 Jan 2016 00:55:45 +0200 Subject: Add slider and styles --- geshem.js | 10 +- package.json | 7 +- static/js/bundle.js | 6209 +++++++++++++++++++++++++++++++++++++++++++++++++- style.scss | 34 + templates/index.html | 6 - webpack.config.js | 4 +- 6 files changed, 6250 insertions(+), 20 deletions(-) create mode 100644 style.scss diff --git a/geshem.js b/geshem.js index f736c3c..7c5f65d 100644 --- a/geshem.js +++ b/geshem.js @@ -1,10 +1,15 @@ import React from 'react' import ReactDOM from 'react-dom' +import 'rc-slider/assets/index.css' +import Slider from 'rc-slider' + // Need to directly script-load instead of proper import since GL JS doesn't support webpack // https://github.com/mapbox/mapbox-gl-js/issues/1649 require('script!mapbox-gl/dist/mapbox-gl.js') +import './style.scss' + class GLMap extends React.Component { // Adapted from Tim Welch's code that can be found at @@ -162,9 +167,12 @@ class Map extends React.Component { style: mapStyle, hash: false } - return + + + } } diff --git a/package.json b/package.json index c1cfb13..355f6a9 100644 --- a/package.json +++ b/package.json @@ -8,10 +8,15 @@ "babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.3.13", "babel-preset-stage-0": "^6.3.13", + "css-loader": "^0.23.1", "mapbox-gl": "^0.12.2", + "node-sass": "^3.4.2", + "rc-slider": "^3.3.1", "react": "^0.14.5", "react-dom": "^0.14.5", - "script-loader": "^0.6.1" + "sass-loader": "^3.1.2", + "script-loader": "^0.6.1", + "style-loader": "^0.13.0" }, "devDependencies": {}, "scripts": { diff --git a/static/js/bundle.js b/static/js/bundle.js index 7eb9497..bb4f28b 100644 --- a/static/js/bundle.js +++ b/static/js/bundle.js @@ -56,6 +56,14 @@ var _reactDom2 = _interopRequireDefault(_reactDom); + __webpack_require__(159); + + var _rcSlider = __webpack_require__(163); + + var _rcSlider2 = _interopRequireDefault(_rcSlider); + + __webpack_require__(219); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -66,7 +74,7 @@ // Need to directly script-load instead of proper import since GL JS doesn't support webpack // https://github.com/mapbox/mapbox-gl-js/issues/1649 - __webpack_require__(159); + __webpack_require__(221); var GLMap = (function (_React$Component) { _inherits(GLMap, _React$Component); @@ -234,9 +242,14 @@ style: mapStyle, hash: false }; - return _react2.default.createElement(GLMap, { - view: view, - token: 'pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpaWRuaWFxazAwMTJ2b2tyZGRmaWpsNWYifQ.qf_V3CFP_NZtLjk5luNM4g' }); + return _react2.default.createElement( + 'div', + null, + _react2.default.createElement(GLMap, { + view: view, + token: 'pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpaWRuaWFxazAwMTJ2b2tyZGRmaWpsNWYifQ.qf_V3CFP_NZtLjk5luNM4g' }), + _react2.default.createElement(_rcSlider2.default, { step: 2, defaultValue: 50 }) + ); } }]); @@ -19838,25 +19851,6199 @@ /* 159 */ /***/ function(module, exports, __webpack_require__) { - __webpack_require__(160)(__webpack_require__(161)) + // style-loader: Adds some css to the DOM by adding a