Remove base.entry.js, declare all JS dependencies in explore using np…

…m. Pin older select2 version to enable select2Sortable.
apache · Feb 24, 2016 · 3e83460 · 3e83460
1 parent 71073d8
commit 3e83460
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 59 deletions.
diff --git a/panoramix/assets/html/index.html b/panoramix/assets/html/index.html
@@ -1,10 +1,4 @@
-{% extends "refactor/base.html" %}
-
-{% block content_fluid %}
-  <div id="app">
-    Oops! React.js is not working properly.
-  </div>
-{% endblock %}
+{% extends "panoramix/base.html" %}
 
 {% block tail_js %}
   {{ super() }}

diff --git a/panoramix/assets/javascripts/base.js b/panoramix/assets/javascripts/base.js
diff --git a/panoramix/assets/javascripts/explore.js b/panoramix/assets/javascripts/explore.js
@@ -2,17 +2,22 @@
 // Init explorer view -> load vis dependencies -> read data (from dynamic html) -> render slice
 // nb: to add a new vis, you must also add a Python fn in viz.py
 
-// css
-require('../vendor/pygments.css');
-require('../vendor/bootstrap-toggle/bootstrap-toggle.min.css');
-
 // js
-var $  = window.$  || require('jquery');
-var px = window.px || require('./modules/panoramix.js');
+var $ = window.$ = require('jquery');
+var jQuery = window.jQuery = $;
+var px = require('./modules/panoramix.js');
+var d3 = require('d3');
+
+require('bootstrap');
+require('jquery-ui');
 require('select2');
 require('../vendor/bootstrap-toggle/bootstrap-toggle.min.js');
 require('../vendor/select2.sortable.js');
 
+// css
+require('../vendor/pygments.css');
+require('../vendor/bootstrap-toggle/bootstrap-toggle.min.css');
+
 // vis sources
 var sourceMap = {
   area:           'nvd3_vis.js',

diff --git a/panoramix/assets/javascripts/index.jsx b/panoramix/assets/javascripts/index.jsx
@@ -1,7 +1,8 @@
+var $ = require('jquery');
+var jQuery = $;
 import React from 'react';
 import { render } from 'react-dom';
 import { Jumbotron } from 'react-bootstrap';
-require('bootstrap');
 
 class App extends React.Component {
   render () {

diff --git a/panoramix/assets/javascripts/modules/panoramix.js b/panoramix/assets/javascripts/modules/panoramix.js
@@ -1,5 +1,5 @@
-var $  = window.$  || require('jquery');
-var d3 = window.d3 || require('d3');
+var $  = require('jquery'), jQuery = $;
+var d3 = require('d3');
 
 var color = function(){
   // Color related utility functions go in this object
@@ -447,7 +447,8 @@ var px = (function() {
           }
       }
       var obj = parent.append(
-          '<input class="' + $(this).attr('class') + '" name="'+ name +'" type="text" value="' + selected + '">');
+          '<input class="' + $(this).attr('class') + '" name="'+ name +'" type="text" value="' + selected + '">'
+      );
       $("input[name='" + name  +"']").select2({
           createSearchChoice: create_choices,
           initSelection: initSelectionToValue,

diff --git a/panoramix/assets/package.json b/panoramix/assets/package.json
@@ -54,7 +54,7 @@
     "react": "^0.14.7",
     "react-bootstrap": "^0.28.3",
     "react-dom": "^0.14.7",
-    "select2": "^4.0.1",
+    "select2": "3.5",
     "topojson": "^1.6.22",
     "webpack": "^1.12.12"
   },

diff --git a/panoramix/assets/stylesheets/panoramix.css b/panoramix/assets/stylesheets/panoramix.css
@@ -61,10 +61,6 @@ form div {
     text-align: right;
 }
 
-.select2-results .select2-highlighted {
-    background-color: #005c66;
-}
-
 .notbtn {
     cursor: default;
 }
@@ -154,10 +150,6 @@ legend {
   border: 5px solid black;
 }
 
-.datasource .select2-container-multi .select2-choices {
-  height: 70px;
-  overflow: auto;
-}
 .datasource form div.form-control {
   margin-bottom: 5px !important;
 }

diff --git a/panoramix/assets/webpack.config.js b/panoramix/assets/webpack.config.js
@@ -7,10 +7,9 @@ var BUILD_DIR = path.resolve(__dirname, './javascripts/dist'); // output
 var config = {
   // for now generate one compiled js file per entry point / html page
   entry: {
-    base: APP_DIR + '/javascripts/base.js',
     index: APP_DIR + '/javascripts/index.jsx',
-    // dashboard: APP_DIR + '/javascripts/dist/dashboard.js',
     explore: APP_DIR + '/javascripts/explore.js',
+    // dashboard: APP_DIR + '/javascripts/dist/dashboard.js',
   },
   output: {
     path: BUILD_DIR,
@@ -31,19 +30,7 @@ var config = {
       }
     ]
   },
-  plugins: [
-    // // @TODO: this will be used in the future to expose these packages through global window vars
-    // new webpack.ProvidePlugin({
-    //     '$': "jquery",
-    //     'window.$': "jquery",
-
-    //     'jQuery': "jquery",
-    //     'window.jQuery': "jquery",
-
-    //     'window.d3': "d3",
-    //     'window.px':  APP_DIR + '/javascripts/modules/panoramix.js'
-    // })
-  ]
+  plugins: []
 };
 
 module.exports = config;
diff --git a/panoramix/templates/panoramix/basic.html b/panoramix/templates/panoramix/basic.html
@@ -1,19 +1,21 @@
 <html>
   <head>
-    <title>{% block title %}{{ app_name }}{% endblock %}</title>
+    <title>
+      {% block title %}
+        {% if appbuilder and appbuilder.app_name %} {{ appbuilder.app_name }} {% endif %}
+      {% endblock %}
+    </title>
     {% block head_meta %}{% endblock %}
     {% block head_css %}
+        <link rel="stylesheet" type="text/css" href="/static/refactor/node_modules/jquery-ui/themes/base/minified/jquery-ui.min.css" />
         <link rel="stylesheet" type="text/css" href="/static/refactor/node_modules/font-awesome/css/font-awesome.min.css" />
-        <link rel="stylesheet" type="text/css" href="/static/refactor/node_modules/select2/dist/css/select2.min.css" />
-        <link rel="stylesheet" type="text/css" href="/static/refactor/stylesheets/themes/bootswatch.paper.min.css" />
+        <link rel="stylesheet" type="text/css" href="/static/refactor/node_modules/select2/select2.css" />
+        <link rel="stylesheet" type="text/css" href="/static/refactor/node_modules/select2/select2-bootstrap.css" />
         <link rel="stylesheet" type="text/css" href="/static/refactor/stylesheets/panoramix.css" />
+        <!-- Replace with custom bootstrap theme -->
+        <link rel="stylesheet" type="text/css" href="/static/refactor/stylesheets/themes/bootswatch.paper.min.css" />
     {% endblock %}
-    {% block head_js %}
-        <script src="/static/refactor/node_modules/jquery/dist/jquery.min.js"></script>
-        <script src="/static/refactor/node_modules/select2/dist/js/select2.full.min.js"></script>
-        <script src="/static/refactor/vendor/jquery-ui/jquery-ui.min.js"></script>
-        <script src="/static/refactor/vendor/select2.sortable.js"></script>
-    {% endblock %}
+    {% block head_js %}{% endblock %}
   </head>
 
   <body>
@@ -31,8 +33,6 @@
       </div>
     {% endblock %}
 
-    {% block tail_js %}
-        <script src="/static/refactor/javascripts/dist/base.entry.js"></script>
-    {% endblock %}
+    {% block tail_js %}{% endblock %}
   </body>
 </html>