Merge pull request #20 from eddiepantoja/master

Legend/Layers in tabs
tomwayson · Aug 11, 2016 · 30ba87b · 30ba87b
2 parents feda313 + 3ecc27e
commit 30ba87b
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 14 deletions.
diff --git a/app/app.component.ts b/app/app.component.ts
@@ -4,8 +4,11 @@ import { SearchComponent } from './search.component';
 import { LegendComponent } from './legend.component';
 import { BasemapSelect } from './basemapselect.component';
 import { LayerComponent } from './layer.component';
+import { TabComponent } from './tab.component';
+import { TabsComponent } from './tabs.component';
+
 @Component({
-  directives: [MapComponent, SearchComponent, LegendComponent, BasemapSelect, LayerComponent],
+  directives: [MapComponent, SearchComponent, LegendComponent, BasemapSelect, LayerComponent, TabComponent, TabsComponent],
     selector: 'my-app',
     template:
     `
@@ -17,14 +20,18 @@ import { LayerComponent } from './layer.component';
       </div>
       <div class="col-sm-4 col-md-3 col-lg-2">
         <h3>{{title}}</h3>
-        <h4>Layer Visibility</h4>
-        <esri-layer></esri-layer>
-        <h4>Legend</h4>
-        <esri-legend class="legend-container"></esri-legend>
-        <h4>Basemap</h4>
-        <div>
-          <basemap-select (basemapSelected)="onBasemapSelected($event)"></basemap-select>
-        </div>
+        <tabs>
+          <tab tabTitle="Legend">
+            <h4>Legend</h4>
+            <esri-legend></esri-legend>
+          </tab>  
+          <tab tabTitle="Options">
+            <h4>Layer Visibility</h4>
+              <esri-layer></esri-layer>
+            <h4>Basemap</h4>
+            <basemap-select (basemapSelected)="onBasemapSelected($event)"></basemap-select>
+          </tab>
+        </tabs> 
       </div>
     </div>
     `

diff --git a/app/styles/main.css b/app/styles/main.css
@@ -19,8 +19,6 @@ esri-map esri-search .arcgisSearch {
   left: 65px;
 }
 
-.legend-container {
-  display: block;
-  max-height: 360px;
-  overflow-y: auto;
-}
+.pane{
+      padding: 1em;
+    }
diff --git a/app/tab.component.ts b/app/tab.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'tab',
+    template: 
+    `
+    <div [hidden]="!active" class="pane">
+      <ng-content></ng-content>
+    </div>
+    `
+})
+export class TabComponent {
+    @Input('tabTitle') title: string;
+    @Input() active = false;
+}
diff --git a/app/tabs.component.ts b/app/tabs.component.ts
@@ -0,0 +1,40 @@
+import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
+import { TabComponent } from './tab.component';
+
+@Component({
+    selector: 'tabs',
+    template:
+    `
+    <ul class="nav nav-tabs" style="float: right; width:100%; margin-bottom:20px;">
+      <li *ngFor="#tab of tabs" (click)="selectTab(tab)" [class.active]="tab.active">
+        <a href="#">
+            {{ tab.title }}
+        </a>
+      </li>
+    </ul>
+    <ng-content></ng-content>
+   `
+})
+export class TabsComponent implements AfterContentInit {
+
+    @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
+
+    ngAfterContentInit() {
+        // get all active tabs
+        let activeTabs = this.tabs.filter((tab)=>tab.active);
+
+        // if there is no active tab set, activate the first
+        if(activeTabs.length === 0) {
+            this.selectTab(this.tabs.first);
+        }
+    }
+
+    selectTab(tab: TabComponent){
+        // deactivate all tabs
+        this.tabs.toArray().forEach(tab => tab.active = false);
+
+        // activate current tab
+        tab.active = true;
+    }
+
+}