refactor to be more extendable

Author: isaacchansky

index.html

@@ -54,8 +54,8 @@
       <aside id="sidebar" class="sidebar">
         <nav class="sidebar-nav">
           <ul class="items">
-            <li><a class="select-list active" href="#">List</a></li>
-            <li><a class="select-facet" href="#">Filter</a></li>
+            <li><a data-select="list" class="sidebar-action active" href="#">List</a></li>
+            <li><a data-select="facets" class="sidebar-action" href="#">Filter</a></li>
           </ul>
         </nav>
         <div id="list" class="control sidebar-item"></div>

src/ui/sidebar.js

@@ -6,56 +6,74 @@ define(function(require, exports, module) {
 
   module.exports = flight.component(function sidebar() {
 
+    var potentialSidebarItems = ['facets', 'list'];
+    var presentItems = [];
+
     this.defaultAttrs({
-      listButton: '.select-list',
-      facetButton: '.select-facet',
-      list: '#list',
-      facet: '#facets'
+      toggleButtons: '.sidebar-action',
+      sidebarItems: '.sidebar-item'
     });
 
+    this.configureSidebar = function(e, config){
+      var configAttr = _.keys(config);
+      presentItems = _.intersection(potentialSidebarItems, configAttr);
 
-    this.showList = function(e){
-      e.preventDefault();
-      this.select('list').show();
-      this.select('facet').hide();
-      this.select('listButton').addClass('active');
-      this.select('facetButton').removeClass('active');
+      var $sidebar = this.$node;
+
+      // add class .sidebar-items-X based on active sidebar items
+      $sidebar.addClass('sidebar-items-'+presentItems.length);
+      // activate configured sidebar items
+      _.each(presentItems, function(item){
+        $sidebar.find(item).show();
+        $sidebar.find('[data-select="'+item+'"]').parent().show();
+      });
+
+      if( presentItems.length === 1) {
+        $sidebar.find('.sidebar-nav').hide();
+        $sidebar.addClass('no-tabs');
+      }
     };
 
-    this.showFacet = function(e){
+    this.showItem = function(e, elemObj) {
+      // generic toggle fn for sidebar tabs
       e.preventDefault();
-      this.select('facet').show();
-      this.select('list').hide();
-      this.select('facetButton').addClass('active');
-      this.select('listButton').removeClass('active');
+      var $el = $(elemObj.el);
+      var itemTitle = $el.data('select');
+      this.select('sidebarItems').hide();
+      this.$node.find('#'+itemTitle).show();
+      this.select('toggleButtons').removeClass('active');
+      $el.addClass('active');
     };
 
     this.showFullSidebar = function() {
-      this.select('facet').show();
-      this.select('list').show();
+      var $sidebar = this.$node;
+      _.each(presentItems, function(item){
+        $sidebar.find(item).show();
+      });
     };
 
-    this.toggleSidebar = function(e) {
+    this.toggleHiddenSidebar = function(e) {
       e.preventDefault();
       this.$node.toggleClass('open');
       $('.sidebar-toggle').toggleClass('active');
     };
 
     this.after('initialize', function() {
+      this.on(document, 'config', this.configureSidebar);
+
       this.on('click', {
-        listButton: this.showList,
-        facetButton: this.showFacet
+        toggleButtons: this.showItem
       });
 
       // This is outside of the component, but it controls it.. perhaps refactor to include within root element?
-      $(document).on('click', '.sidebar-toggle', this.toggleSidebar.bind(this) );
+      $(document).on('click', '.sidebar-toggle', this.toggleHiddenSidebar.bind(this) );
+
       $(window).on('resize', function(){
         if( document.body.clientWidth > 955 ) {
           this.showFullSidebar();
         }
       }.bind(this));
 
-
     });
   });
 });

styles/style.css

@@ -48,6 +48,10 @@ body > div.container {
   color: #69579c;
 }
 
+.navbar-form {
+  width: 80%;
+}
+
 .navbar-form .btn {
   border:none;
   outline:none;
@@ -255,12 +259,15 @@ body > div.container {
   margin-left: 0;
 }
 
-@media (max-width: 955px) {
+
+@media (max-width: 1200px) {
   .sidebar {
-    width: 30%;
+    width: 33%;
     margin-left: 0%;
     padding-top: 50px;
-
+  }
+  .sidebar.no-tabs {
+    padding-top: 0;
   }
 }
 
@@ -279,12 +286,19 @@ body > div.container {
   height: 100%;
   overflow-y: scroll;
   overflow-x: hidden;
-  width: 50%;
   float: left;
   padding: 0 10px;
+  display: none;
+}
+
+.sidebar-items-2 .control {
+  width: 50%;
+}
+.sidebar-items-1 .control {
+  width: 100%;
 }
 
-@media (max-width: 955px) {
+@media (max-width: 1200px) {
 .sidebar .control {
     width: 100%;
     float: none;
@@ -302,7 +316,7 @@ body > div.container {
 }
 
 /* Only display this when we have a tabbed view (mid-screen size & lower) */
-@media (max-width: 955px) {
+@media (max-width: 1200px) {
   .sidebar-nav {
     display: initial;
   }
@@ -316,8 +330,14 @@ body > div.container {
 }
 
 .sidebar-nav .items li{
-  width: 50%;
   float: left;
+  display: none;
+}
+.sidebar-items-2 .sidebar-nav .items li{
+  width: 50%;
+}
+.sidebar-items-1 .sidebar-nav .items li{
+  width: 100%;
 }
 
   /*buttons*/
@@ -334,37 +354,35 @@ body > div.container {
 
 
 /* map offset should be zero no matter the configuration of the sidebar since sidebar is an overlay*/
-body.has-facets.has-list #map {
+body #map {
   left: 0;
 }
 
 /* At larger sizes, adjust map to fit sidebar space depending on configuration */
 @media (min-width: 768px) {
-  body.has-facets #map {
-    left: 15%;
-  }
-  body.has-list #map {
+  .sidebar-items-1 + #map {
     left: 15%;
   }
-  body.has-facets.has-list #map {
+  .sidebar-items-2 + #map {
     left: 30%;
   }
 }
-@media (min-width: 956px) {
-  body.has-facets #map {
-    left: 22.5%;
+@media (min-width: 1201px) {
+  .sidebar-items-1 {
+    width: 330px;
   }
-  body.has-list #map {
-    left: 22.5%;
+  .sidebar-items-2 {
+    width: 500px;
   }
-  body.has-facets.has-list #map {
-    left: 45%;
+ .sidebar-items-1 + #map {
+    left: 330px;
+  }
+  .sidebar-items-2 + #map {
+    left: 500px;
   }
 }
 
 
-
-
 #facets .checkbox.selected label {
   font-weight: bold;
 }