From 3a2c518942218e7cd315302930f32814d86ab244 Mon Sep 17 00:00:00 2001
From: Robert Buels <rbuels@gmail.com>
Date: Thu, 30 Aug 2012 17:24:40 -0400
Subject: [PATCH] Add `css` configuration variable that allows users to specify
 either strings or URLs containing CSS to add.

---
 release-notes.txt      |  3 +++
 src/JBrowse/Browser.js | 20 +++++++++++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/release-notes.txt b/release-notes.txt
index 2f716ec4cf..87db200e1e 100644
--- a/release-notes.txt
+++ b/release-notes.txt
@@ -1,5 +1,8 @@
 {{$NEXT}}
 
+ * Add `css` configuration variable that allows users to specify
+   either strings or URLs containing CSS to add.
+
  * Fixed feature-layout performance problem when zoomed very far in
    on features that are much larger than the viewing window.
 
diff --git a/src/JBrowse/Browser.js b/src/JBrowse/Browser.js
index d19c373db4..d3d51abb6f 100644
--- a/src/JBrowse/Browser.js
+++ b/src/JBrowse/Browser.js
@@ -64,6 +64,10 @@ var Browser = function(params) {
 
     this.startTime = Date.now();
 
+    this.container = dojo.byId(this.config.containerID);
+    this.container.onselectstart = function() { return false; };
+    this.container.genomeBrowser = this;
+
     // init our touch device support
     this.addDeferred( Touch.loadTouch );
 
@@ -71,6 +75,7 @@ var Browser = function(params) {
     // process, to happen when the page is done loading
     dojo.addOnLoad( dojo.hitch( this,'loadConfig' ) );
 
+    dojo.connect( this, 'onConfigLoaded',  Util.debugHandler( this, 'loadUserCSS' ));
     dojo.connect( this, 'onConfigLoaded',  Util.debugHandler( this, 'loadRefSeqs' ));
     dojo.connect( this, 'onConfigLoaded',  Util.debugHandler( this, 'loadNames'   ));
     dojo.connect( this, 'onRefSeqsLoaded', Util.debugHandler( this, 'initView'    ));
@@ -145,6 +150,18 @@ Browser.prototype.loadRefSeqs = function() {
  */
 Browser.prototype.onRefSeqsLoaded = function() {};
 
+Browser.prototype.loadUserCSS = function() {
+    if( this.config.css && ! dojo.isArray( this.config.css ) )
+        this.config.css = [ this.config.css ];
+    dojo.forEach( this.config.css || [], function(css) {
+        if( typeof css == 'string' ) {
+            dojo.create('style', { type: 'text/css', innerHTML: css }, this.container );
+        } else if( typeof css == 'object' ) {
+            dojo.create('link', { rel: 'stylesheet', href: css.url, type: 'text/css'}, document.head );
+        }
+    },this);
+};
+
 /**
  * Load our name index.
  */
@@ -157,9 +174,6 @@ Browser.prototype.loadNames = function() {
 Browser.prototype.initView = function() {
     //set up top nav/overview pane and main GenomeView pane
     dojo.addClass(document.body, "tundra");
-    this.container = dojo.byId(this.config.containerID);
-    this.container.onselectstart = function() { return false; };
-    this.container.genomeBrowser = this;
     var topPane = dojo.create( 'div',{ style: {overflow: 'hidden'}}, this.container );
 
     var overview = dojo.create( 'div', { className: 'overview', id: 'overview' }, topPane );