Merge pull request #9 from maxplanck-ie/jmv_dev

fidelram · web-flow · commit bb3bce205427 · 2016-11-11T13:42:59.000+01:00
html based configuration
diff --git a/hicbrowser/client/README.md b/hicbrowser/client/README.md
@@ -11,6 +11,36 @@ This project aims to visualize gene expression profiles in the context of mitoch
 3. Compile the project
 `grunt dist`
 
+## Usage
+
+```
+<html>
+    <head>
+
+        <!-- 1. Import the app styles CSS -->
+        <link href='css/App.css' rel='stylesheet' type='text/css'>
+
+    </head>
+
+    <body></body>
+
+    <!-- 2. Import javascript  -->
+    <script src="js/App.min.js"></script>
+
+    <script>
+        // 3. Initialize application!
+        App.init({
+          browser_example: 'X:3800000-4340000',
+          gene_example: 'mof',
+          icon: '/static/img/fly.svg'
+        });
+
+        // Alternatively use the default configuration:
+        // App.init();
+    </script>
+</html>
+```
+
 ## Built With
 
 * [NPM](https://www.npmjs.com/) - Dependency Management
diff --git a/hicbrowser/client/html/index.html b/hicbrowser/client/html/index.html
@@ -62,4 +62,15 @@
     <!-- build:js /static/js/App.js -->
     <script src="../static/js/App.js"></script>
     <!-- /build -->
+
+    <script>
+
+      App.init({
+        browser_example: 'X:3800000-4340000',
+        gene_example: 'mof',
+        icon: '/static/img/fly.svg'
+      });
+
+    </script>
+
 </html>
diff --git a/hicbrowser/client/index.js b/hicbrowser/client/index.js
@@ -12,56 +12,46 @@ var GeneView = require('./js/views/gene');
 var BrowserView = require('./js/views/browser');
 var Intro = require('./js/views/intro-header');
 
-function initViews(){
-  // Render initial views
-  App.views.intro.render(App.config);
-  App.views.search.render(App.config);
-}
-
 App = {};
 
-App.init = function(){
-
-    //Views
-    App.views = {};
-    App.views.loading = new Loading({el:'body'});
-    App.views.search = new Search({el:'#search'});
-    App.views.index = new Index({el:'#content'});
-    App.views.gene = new GeneView({el:'#content'});
-    App.views.browser = new BrowserView({el:'#content'});
-    App.views.intro = new Intro({el:'.intro-header'});
-
-    // Models
-    App.models = {};
-    App.models.Gene = require('./js/models/gene');
-    App.models.Browser = require('./js/models/browser');
-    App.models.Config = require('./js/models/config');
-
-    // Init config with defaults
+//Views
+App.views = {};
+App.views.loading = new Loading({el:'body'});
+App.views.search = new Search({el:'#search'});
+App.views.index = new Index({el:'#content'});
+App.views.gene = new GeneView({el:'#content'});
+App.views.browser = new BrowserView({el:'#content'});
+App.views.intro = new Intro({el:'.intro-header'});
+
+// Models
+App.models = {};
+App.models.Gene = require('./js/models/gene');
+App.models.Browser = require('./js/models/browser');
+App.models.Config = require('./js/models/config');
+
+//Router
+App.router = require('./js/router');
+
+// listen to ajax
+$(document).ajaxStart(function() {
+    App.views.loading.show();
+}).ajaxStop(function() {
+    setTimeout(App.views.loading.hide, 800);
+});
+
+App.init = function(config){
+
+    // Init config
     App.config = new App.models.Config();
-
-    // See if there is a config file defined.
-    // If not, load app with defaults
-    App.config.fetch({
-      success: initViews,
-      error: initViews
-    });
-
-    //Router
-    App.router = require('./js/router');
-
-    // listen to ajax
-    $(document).ajaxStart(function() {
-        App.views.loading.show();
-    }).ajaxStop(function() {
-        setTimeout(App.views.loading.hide, 800);
-    });
+    App.config.set(config);
 
     // Render loading
     App.views.loading.render();
 
     // Select all elements with data-toggle="tooltips" in the document
     $('[data-toggle="tooltip"]').tooltip();
-};
 
-App.init();
+    // Render initial views
+    App.views.intro.render(App.config);
+    App.views.search.render(App.config);
+};
diff --git a/hicbrowser/static/js/App.js b/hicbrowser/static/js/App.js
@@ -14,59 +14,49 @@ var GeneView = require('./js/views/gene');
 var BrowserView = require('./js/views/browser');
 var Intro = require('./js/views/intro-header');
 
-function initViews(){
-  // Render initial views
-  App.views.intro.render(App.config);
-  App.views.search.render(App.config);
-}
-
 App = {};
 
-App.init = function(){
-
-    //Views
-    App.views = {};
-    App.views.loading = new Loading({el:'body'});
-    App.views.search = new Search({el:'#search'});
-    App.views.index = new Index({el:'#content'});
-    App.views.gene = new GeneView({el:'#content'});
-    App.views.browser = new BrowserView({el:'#content'});
-    App.views.intro = new Intro({el:'.intro-header'});
+//Views
+App.views = {};
+App.views.loading = new Loading({el:'body'});
+App.views.search = new Search({el:'#search'});
+App.views.index = new Index({el:'#content'});
+App.views.gene = new GeneView({el:'#content'});
+App.views.browser = new BrowserView({el:'#content'});
+App.views.intro = new Intro({el:'.intro-header'});
+
+// Models
+App.models = {};
+App.models.Gene = require('./js/models/gene');
+App.models.Browser = require('./js/models/browser');
+App.models.Config = require('./js/models/config');
+
+//Router
+App.router = require('./js/router');
+
+// listen to ajax
+$(document).ajaxStart(function() {
+    App.views.loading.show();
+}).ajaxStop(function() {
+    setTimeout(App.views.loading.hide, 800);
+});
 
-    // Models
-    App.models = {};
-    App.models.Gene = require('./js/models/gene');
-    App.models.Browser = require('./js/models/browser');
-    App.models.Config = require('./js/models/config');
+App.init = function(config){
 
-    // Init config with defaults
+    // Init config
     App.config = new App.models.Config();
-
-    // See if there is a config file defined.
-    // If not, load app with defaults
-    App.config.fetch({
-      success: initViews,
-      error: initViews
-    });
-
-    //Router
-    App.router = require('./js/router');
-
-    // listen to ajax
-    $(document).ajaxStart(function() {
-        App.views.loading.show();
-    }).ajaxStop(function() {
-        setTimeout(App.views.loading.hide, 800);
-    });
+    App.config.set(config);
 
     // Render loading
     App.views.loading.render();
 
     // Select all elements with data-toggle="tooltips" in the document
     $('[data-toggle="tooltip"]').tooltip();
-};
 
-App.init();
+    // Render initial views
+    App.views.intro.render(App.config);
+    App.views.search.render(App.config);
+};
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
 },{"./js/models/browser":2,"./js/models/config":3,"./js/models/gene":4,"./js/router":5,"./js/views/browser":7,"./js/views/gene":8,"./js/views/index":9,"./js/views/intro-header":10,"./js/views/loading":11,"./js/views/search":12,"backbone":16,"bootstrap":18,"jquery":78}],2:[function(require,module,exports){
diff --git a/hicbrowser/static/js/App.min.js b/hicbrowser/static/js/App.min.js
diff --git a/hicbrowser/static/json/config.json b/hicbrowser/static/json/config.json
diff --git a/hicbrowser/templates/index.html b/hicbrowser/templates/index.html
@@ -56,4 +56,15 @@
 
     </body>
     <script src="/static/js/App.js"></script>
+
+    <script>
+
+      App.init({
+        browser_example: 'X:3800000-4340000',
+        gene_example: 'mof',
+        icon: '/static/img/fly.svg'
+      });
+
+    </script>
+
 </html>
