updating to get sharing button

.github/workflows/build.yml

@@ -0,0 +1,31 @@
+on: push
+name: Build Angular
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [12.x]
+
+    steps:
+      - uses: actions/checkout@v1
+
+      - name: Cache node modules
+        uses: actions/cache@v1
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - name: Node ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Push to GitHub Packages
+        uses: docker/build-push-action@v1
+        with:
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+          registry: docker.pkg.github.com
+          repository: openhistorymap/ohm-map/ohm-map
+          tag_with_ref: true

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "angular.enable-strict-mode-prompt": false
+}

angular.json

@@ -127,5 +127,8 @@
       }
     }
   },
-  "defaultProject": "ohm-map"
+  "defaultProject": "ohm-map",
+  "cli": {
+    "analytics": false
+  }
 }

package.json

@@ -24,6 +24,8 @@
     "@modalnodes/mn-configurator": "0.0.4",
     "@modalnodes/mn-docker": "0.0.3",
     "@modalnodes/mn-registry": "0.0.3",
+    "ngx-capture": "^0.12.1",
+    "ngx-matomo": "^0.1.4",
     "ol": "^6.4.3",
     "rxjs": "~6.5.5",
     "tslib": "^2.0.0",

src/app/app.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 
 import { MnDockerService } from '@modalnodes/mn-docker';
 import { HttpClient } from '@angular/common/http';
+import { MatomoInjector } from 'ngx-matomo';
 
 import env from '../assets/env.json';
 
@@ -15,8 +16,10 @@ declare const mapboxgl;
 export class AppComponent implements OnInit {
 
   constructor(
+    private matomoInjector: MatomoInjector
   ) {}
 
   ngOnInit() {
+    this.matomoInjector.init('//tracker.openhistorymap.org/', 2);
   }
 }

src/app/app.module.ts

@@ -4,6 +4,7 @@ import { MnConfiguratorModule } from '@modalnodes/mn-configurator';
 import { MnDockerModule } from '@modalnodes/mn-docker';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { MatomoModule } from 'ngx-matomo';
 
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -12,6 +13,8 @@ import { StyleSelectorComponent } from './style-selector/style-selector.componen
 import { DecimaldatePipe } from './decimaldate.pipe';
 import { NicedatePipe } from './nicedate.pipe';
 import { DateComponent } from './date/date.component';
+import {ClipboardModule} from '@angular/cdk/clipboard';
+import { ShareDirective } from './share.directive';
 
 @NgModule({
   declarations: [
@@ -20,15 +23,18 @@ import { DateComponent } from './date/date.component';
     StyleSelectorComponent,
     DecimaldatePipe,
     NicedatePipe,
-    DateComponent
+    DateComponent,
+    ShareDirective
   ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     AppRoutingModule,
+    ClipboardModule,
     MnDockerModule,
     MnConfiguratorModule,
     SharedModule,
+    MatomoModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/decimaldate.pipe.ts

@@ -58,5 +58,4 @@ export class DecimaldatePipe implements PipeTransform {
     ret.setMilliseconds(rest);
     return ret;
   }
-
 }

src/app/map/map.component.html

@@ -1,5 +1,5 @@
 <mat-toolbar color="primary">
-    <button mat-button mat-icon-button (click)="lbar.toggle()"><mat-icon>info</mat-icon></button>
+    <button mat-button mat-icon-button (click)="lbar.toggle()"><mat-icon>menu</mat-icon></button>
     <h1>OpenHistoryMap</h1>
     <span class="spacer"></span>
     <span class="spacer"></span>
@@ -8,15 +8,18 @@ <h1>OpenHistoryMap</h1>
     <ohm-style-selector (styleChange)="changeStyle($event)"></ohm-style-selector>
     <button mat-button mat-icon-button class="hidesmall" (click)="info()"><mat-icon>help</mat-icon></button>
     <span class="spacer"></span>
-    <button mat-button class="hidesmall" (click)="selectDate()">{{atDate|decimaldate|date:'d/M/y G - hh:mm:ss'|nicedate}}</button>
-    <button mat-button class="hidesmall" mat-icon-button (click)="startstop()"><mat-icon>{{startstopicon}}</mat-icon></button>
-    <button mat-button class="hidesmall" mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>speed</mat-icon></button>
+    <button mat-button class="hidesmall">{{atDate|decimaldate|date:'d/M/y G - hh:mm:ss'|nicedate}}</button>
+    <button mat-button class="hidesmall" disabled mat-icon-button (click)="startstop()"><mat-icon>{{startstopicon}}</mat-icon></button>
+    <button mat-button class="hidesmall" disabled mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>speed</mat-icon></button>
 
     <span class="spacer hidesmall"></span>
     <span class="spacer hidesmall"></span>
     <span class="spacer hidesmall"></span>
     <span class="spacer hidesmall"></span>
-    <button mat-button mat-icon-button (click)="rbar.toggle()" class="hidesmall"><mat-icon>menu</mat-icon></button>
+    <button mat-button mat-icon-button (click)="copy_url()" class="hidesmall"><mat-icon>share</mat-icon></button>
+    <button disabled mat-button mat-icon-button (click)="rbar.toggle()" class="hidesmall"><mat-icon>menu</mat-icon></button>
+    <button disabled mat-button mat-icon-button (click)="pbar.toggle()" class="hidesmall"><mat-icon>person</mat-icon></button>
+    <button disabled mat-button mat-icon-button (click)="ibar.toggle()" class="hidesmall"><mat-icon>location_on</mat-icon></button>
 
 </mat-toolbar>
 
@@ -26,12 +29,22 @@ <h1>OpenHistoryMap</h1>
 
         </div>
         <mat-nav-list>
-            <mat-list-item>About</mat-list-item>
-            <mat-list-item>How to join</mat-list-item>
-            <mat-list-item>How to help</mat-list-item>
-            <mat-list-item>Donate</mat-list-item>
+            <a target="_blank" href="https://www.openhistorymap.org/" mat-list-item>OHM Home</a>
+            <a target="_blank" href="https://blog.openhistorymap.org/" mat-list-item>OHM Blog</a>
+            <a target="_blank" href="https://index.openhistorymap.org/" mat-list-item>OHM Index</a>
+            <a target="_blank" href="https://www.openhistorymap.org/about/" mat-list-item>About OHM</a>
+            <a target="_blank" href="https://www.openhistorymap.org/help/" mat-list-item>How to help/donate to OHM</a>
         </mat-nav-list>
     </mat-sidenav>
+    <mat-sidenav class="sidebar" mode="over" #ibar position="end">
+        <mat-toolbar>
+            <h1>What is here</h1>
+        </mat-toolbar>
+
+        <mat-list *ngFor="let event of selectedFeatures">
+            <a mat-list-item (click)="goTimeSpace(event.ohm_from, event.geom)">{{event.properties.name}}</a>
+        </mat-list>
+    </mat-sidenav>
     <mat-sidenav class="sidebar" mode="over" #rbar position="end">
         <mat-toolbar color="primary">
             <h1>Events</h1>
@@ -41,11 +54,35 @@ <h1>Events</h1>
             <a mat-list-item (click)="goTimeSpace(event.ohm_from, event.geom)">{{event.properties.name}}</a>
         </mat-list>
     </mat-sidenav>
-    <mat-sidenav-content>
+    <mat-sidenav class="sidebar" mode="over" #pbar position="end">
+        <mat-toolbar color="primary">
+            <h1>Ephemeral</h1>
+        </mat-toolbar>
+
+        <mat-list *ngFor="let event of (events|async)">
+            <a mat-list-item (click)="goTimeSpace(event.ohm_from, event.geom)">{{event.properties.name}}</a>
+        </mat-list>
+    </mat-sidenav>
+    <mat-sidenav class="sidebar" mode="over" #sharebar position="end">
+        <mat-toolbar color="primary">
+            <h1>Sharing</h1>
+            <span class="spacer"></span>
+            <button mat-button mat-icon-button (click)="sharebar.close()" class="hidesmall"><mat-icon>close</mat-icon></button>
+        </mat-toolbar>
+
+        <mat-list>
+            <a share="https://www.facebook.com/sharer/sharer.php?u={{share_link}}" mat-list-item><mat-icon>facebook</mat-icon> Share on Facebook</a>
+            <a share="" mat-list-item><mat-icon>twitter</mat-icon> Share on Twitter</a>
+            <a share="" mat-list-item><mat-icon></mat-icon> Share on Linkedin</a>
+            <a share="" mat-list-item><mat-icon>class</mat-icon> Share on Classroom</a>
+        </mat-list>
+
+    </mat-sidenav>
+    <mat-sidenav-content #screen>
 
         <mat-menu #menu="matMenu">
-            <button mat-menu-item (click)="setSpeed(4000)">Slow</button>
-            <button mat-menu-item (click)="setSpeed(2000)">Medium</button>
+            <button mat-menu-item (click)="setSpeed(5)">Slow</button>
+            <button mat-menu-item (click)="setSpeed(50)">Medium</button>
             <button mat-menu-item (click)="setSpeed(500)">High</button>
         </mat-menu>
         <div class="row">

src/app/map/map.component.scss

@@ -17,8 +17,15 @@
     width: 256px;
     background-color: #3f51b5;
     color: white;
+    a{
+        color:white;
+    }
 }
 
 .info{
     padding: 16px;
+    color:white;
+    a, a:hover, a:visited{
+        color:white;
+    }
 }