lrullo/chiasso_soundmap_wordpress_theme
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Upgrade Febrary

Browse Source
This commit is contained in:
Siroco 2019-02-06 14:36:51 +01:00
parent 0d50695302
commit 0d709bc1a7
20 changed files with 274 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/app-routing.module.ts
View File

@ -2,10 +2,11 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { TextInfoComponent } from './text-info/text-info.component';
const routes: Routes = [
{ path: '', component: AppComponent },
{ path: ':slug', component: AppComponent },
// { path: '', component: AppComponent },
// { path: 'sound/:slug', component: TextInfoComponent }
// { path: '/test/', component: PageComponent}.
// { path: '/item/:idno', component: AppComponent}
];

15
src/app/app.component.css
View File

@ -1,8 +1,19 @@
@import url('https://fonts.googleapis.com/css?family=Open+Sans:700|Raleway');
* { font-family:"Raleway",sans-serif;}
map-box {margin:0;}
div.title {position:absolute;z-index:10;}
div.title {font-size:1em;text-align:left;padding:10px;position:absolute;bottom:0;left:0;width:30vw;background-color:rgba(0,0,0,0);color:#fff;}
div.title h1 {font-family:"Open Sans";font-size:4em;}
div.title h1 {font-family:"Open Sans";font-size:4em;width:30vw;}
div.title h1 span {background:#d52b1e;padding:0 10px;}
div.title h2 span {background:#fff;padding:2px;color:#000;}
div.title h2 span {background:#fff;padding:2px;color:#000;cursor:pointer;background-color:#333;padding:5px 15px;margin:0 5px;}
div.title p span {line-height:1.4;background:#021011;}
div.title h3 {position:absolute;max-width:50vw;}
div.title h3 span.tablet-term { background:#d52b1e;color:#fff; padding:2px 10px;}
div.title h3 span.tablet-term b {font-weight:bold;cursor:pointer;}
div.title h3 span.tablet-term b:hover {transform:rotate(-45deg);opacity:0.6;}
@media screen and (max-device-width: 720px) {
div.title {position:relative;width:100vw;padding:10px 0; background:#d52b1e;}
div.title h2 span {float:left;width:40%;margin:5px 5px;text-align:center;}
}

7
src/app/app.component.html
View File

@ -1,8 +1,11 @@
<div class="title">
<h1><span>Ticino Soundmap</span></h1>
<!-- <h2><span>Listen</span> | <span>About</span> | <span>Contact</span></h2> -->
<h3 style="color:#000;" *ngIf="filter">Filtered by : <span class="tablet-term">{{filter.name}} <b (click)="delFilter(filter)">x</b></span></h3>
<h1><span>Ticino</span> <span>Soundmap</span></h1>
<h2><span *ngFor="let page of pages" style="" (click)="goToAnchor(page.slug)"><a style="color:#fff;" [innerHTML]="page.title.rendered"></a></span></h2>
<!-- <p><span>Welcome to SOINUMAPA.NET Basque country Sound Map open archive project. Based on phonography or the art of recording environmental sounds, our aim is to show, share and exchange field recordings made in the Basque Country. Right now, you will find more than 1500 sound recordings: city noises, natural ambiences, animals, celebrations and parties, places, happenings, cultural events… including images and texts that behind their apparent silence, keep many sounds (see ABOUT) inside.
You are free to listen, read, watch, consult and use our archive for any research, creative or educational purposes</span></p> -->
</div>
<map-box></map-box>
<app-pages [pages]="pages"></app-pages>
<text-info></text-info>
<router-outlet></router-outlet>

45
src/app/app.component.ts
View File

@ -2,6 +2,7 @@ import { Component } from '@angular/core';
import { WordpressService } from './wordpress.service';
import { ActivatedRoute,Router, NavigationEnd } from "@angular/router";
import {PageItem} from './page';
import {MapService} from './map.service';
@Component({
@ -11,20 +12,44 @@ import {PageItem} from './page';
})
export class AppComponent {
pages:PageItem[];
pages:PageItem[] = [];
public filter;
constructor(
private route: ActivatedRoute,
private wordpressService:WordpressService,
private mapService:MapService
) {
this.route.params.subscribe( params => {
let slug = params.slug;
console.log(slug)
this.wordpressService.getPage(slug)
.subscribe(data=> {
this.pages = data;
console.log(data)
})
})
this.mapService.filter$
.subscribe( (term) => {
this.filter = term
})
this.wordpressService.getPage()
.subscribe( data => {
this.pages = data as PageItem[];
})
this.route.params.subscribe();
// this.route.params.subscribe( params => {
// console.log(params)
// if (params) {
// this.wordpressService.getPage(params.slug)
// .subscribe(data=> {
// this.pages = data;
// console.log(data)
// })
// }
// })
}
goToAnchor(e) {
// console.log(e);
let loc = document.getElementById(e);
loc.scrollIntoView({block:"start"});
}
delFilter(filter) {
this.mapService.delFilter(filter);
}
}

7
src/app/app.module.ts
View File

@ -1,6 +1,6 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { MapBoxComponent } from './map-box/map-box.component';
@ -11,6 +11,7 @@ import { MessageService } from './message.service';
import { TextInfoComponent } from './text-info/text-info.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { PagesComponent } from './pages/pages.component';
@ -18,13 +19,15 @@ import { HttpClientModule } from '@angular/common/http';
declarations: [
AppComponent,
MapBoxComponent,
TextInfoComponent
TextInfoComponent,
PagesComponent
],
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
],
exports: [ RouterModule ],
providers: [
MapService,
WordpressService,

6
src/app/map-box/map-box.component.css
View File

@ -1 +1,5 @@
div.map {z-index:-10;position:absolute;top:0;left:0;width:100%;width:100vw;height:100%;height:100vh; }
div.map {z-index:1;position:absolute;top:0;left:0;width:100%;width:100vw;height:100%;height:100vh; }
@media screen and (max-device-width: 720px) {
div.map {position:relative;}
}

19
src/app/map-box/map-box.component.ts
View File

@ -31,12 +31,24 @@ export class MapBoxComponent implements OnInit {
public source:any;
private popup = new mapboxgl.Popup({closeButton: true, closeOnClick: true, offset: 0});
public filter;
// this.data = new FeatureCollection;
constructor(
private mapService: MapService,
private wordpressService:WordpressService,
private mService:MessageService
) {
this.featurecollection = new FeatureCollection([]);
// this.mapService.featureCollection$.subscribe()
this.mapService.filter$
.subscribe( (term) => {
this.source.setData(new FeatureCollection([]))
if( term!="") this.getSource(term);
this.filter = term;
})
}
ngOnInit() {
@ -103,6 +115,7 @@ export class MapBoxComponent implements OnInit {
this.source = this.map.getSource('ticino')
//set srouce from wordpress map
this.getSource();
//this.source.setData()
//layers
this.map.addLayer({
@ -143,10 +156,10 @@ export class MapBoxComponent implements OnInit {
})
}
private getSource():void {
private getSource(term:any=''):void {
//get All markers and converto to geoJSON for map Source
let fc = new FeatureCollection([]);
this.wordpressService.getMarker()
this.wordpressService.getMarker("",term)
.subscribe( data => {
data.map(
marker => {
@ -165,8 +178,8 @@ export class MapBoxComponent implements OnInit {
);
this.featurecollection = fc;
this.source.setData(fc)
console.log(fc);
});
//this.source.setData(this.mapService.getSource(term))
}

45
src/app/map.service.ts
View File

@ -1,20 +1,55 @@
import { Injectable } from '@angular/core';
import { environment } from '../environments/environment';
import { WordpressService } from './wordpress.service';
import { GeoJson, FeatureCollection } from './map';
import { Subject,of } from 'rxjs';
import { GeoJson } from './map';
import * as mapboxgl from 'mapbox-gl';
@Injectable()
export class MapService {
constructor() {
private featureCollectionSource = new Subject<FeatureCollection>();
public filterSource = new Subject<string>();
constructor(
private wordpressService:WordpressService,
) {
mapboxgl.accessToken = environment.mapbox.accessToken
}
filter$ = this.filterSource.asObservable();
featureCollection$ = this.featureCollectionSource.asObservable();
// getMarkers(): Observable<any> {
// return this.db.list('/markers')
// }
setFeatureCollection() {
let fc = new FeatureCollection([]);
this.wordpressService.getMarker()
.subscribe( data => {
data.map(
marker => {
let geojson = new GeoJson(
[marker.georeference[0],marker.georeference[1]],
{
title:marker.title.rendered,
content:marker.content.rendered,
id:marker.id,
slug:marker.slug,
}
);
geojson['id']=marker.id;
fc.features.push(geojson)
}
);
this.featureCollectionSource.next(fc)
});
}
public setFilter(filter:any) {
this.filterSource.next(filter);
}
public delFilter(filter:any) {
this.filterSource.next()
}
}

6
src/app/message.service.ts
View File

@ -10,12 +10,14 @@ export class MessageService {
constructor() { }
public addMessage(pageItem:PageItem):void {
console.log('addPage');
console.log(pageItem);
let b = document.getElementsByTagName('body')
b[0].style.overflowY = 'hidden';
this.message = [pageItem];
}
public clean() {
let b = document.getElementsByTagName('body')
b[0].style.overflowY = 'scroll';
this.message = [];
}

28
src/app/pages/pages.component.css Normal file
View File

@ -0,0 +1,28 @@
div.container {background-color:#d52b1e;}
div.page-container {min-height:100vh; background-color:#d52b1e;padding-top:15px;position:relative;clear:both;}
div.page-container h1 {font-family:"Raleway"; font-size:2.5rem;font-weight:bold;color:#fff; padding:0;border:5px solid #fff;width:80%;text-align:center;margin:15px 15px;}
div.page-container div.col-left { text-align:center; min-height:100vh; position:relative;float:left;width:45%;max-width:500px;min-width:320px;}
div.page-container div.col-right { position:relative; color:#fff !important;font-size:14pt;float:left;width:45%;min-width:320px;}
div.page-container div.col-right a {text-decoration:none; padding:0 5px; margin:2px 0; background-color:#333; color:#fff !important;font-weight:bold;}
div.middle-container {max-width:1000px;margin:auto;}
div.page-header {clear:both;width:100%;text-align:center;color:#fff;padding-top:20px;}
/* tricks */
.up_arrow {transform:rotate(-90deg); display: block; font-size:3em; color:#fff;}
.arrow { cursor:pointer; border: solid black; transition:0.3s; border-width: 0 5px 5px 0; display: inline-block; padding: 10px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); border-color:#fff;}
.arrow:hover { border-width:0 5px 5px 0; opacity:0.8;}
footer {width:100%;padding:20px 0;clear:both;}
footer div.info-footer {max-width:1000px;font-size:0.8rem;text-align:center;margin:auto;}
/* media query */
@media screen and (max-device-width: 720px) {
div.page-container div.col-left {margin:auto; width:100%;width:100%; min-height:0;clear:both;}
div.page-container div.col-right {background-color:#d52b1e;margin:auto; width:100%;width:80vw;clear:both;}
div.page-container h1 {min-width:0;width:100%;height:80%;margin:auto;padding:0;text-align:center;}
div.page-container {padding:0 20px;}
div.container-map-pages {background-color:#d52b1e;}
}

14
src/app/pages/pages.component.html Normal file
View File

@ -0,0 +1,14 @@
<div class="container-map-pages" id="pages">
<div class="page-container" *ngFor="let page of pages">
<span [id]="page.slug"></span>
<div class="page-header"><span class="arrow" (click)="goUp()"></span></div>
<div class="middle-container">
<div class="col-left"><h1>{{page.title.rendered}}</h1></div>
<div class="col-right" [innerHTML]="page.content.rendered"></div>
</div>
<!-- <div class="page-header" style="width:100%;text-align:center;color:#fff;padding-top:20px;"><span style="transform: rotate(-315deg);" class="arrow" (click)="goUp()"></span></div> -->
</div>
</div>
<footer>
<div class="info-footer">© 2019 SUPSI - <a target="_blank" href="http://www.supsi.ch/home/strumenti/disclaimer.html">Disclaimer</a> - <a target="_blank" href="http://www.supsi.ch/home/supsi/contatti.html">Contatti</a> - UX Develop and mantained by <a href="https://www.audio-lab.org" target="_blank">Audiolab</a></div>
</footer>

25
src/app/pages/pages.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PagesComponent } from './pages.component';
describe('PagesComponent', () => {
let component: PagesComponent;
let fixture: ComponentFixture<PagesComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PagesComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PagesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

24
src/app/pages/pages.component.ts Normal file
View File

@ -0,0 +1,24 @@
import { Component, OnInit, Input } from '@angular/core';
import { WordpressService } from '../wordpress.service';
import { PageItem } from '../page';
@Component({
selector: 'app-pages',
templateUrl: './pages.component.html',
styleUrls: ['./pages.component.css']
})
export class PagesComponent implements OnInit {
@Input() pages:PageItem[] = []
constructor(
private wordpressService:WordpressService,
) { }
ngOnInit() {}
goUp() {
window.scrollTo(0,0)
}
}

6
src/app/text-info/text-info.component.css
View File

@ -0,0 +1,6 @@
ul.categories li ,
ul.tags li
{ cursor:pointer; transition:0.3s; }
ul.categories li:hover,
ul.tags li:hover { color:#d52b1e; font-weight: bold; background:#fff;}

9
src/app/text-info/text-info.component.html
View File

@ -13,6 +13,9 @@
<div class="content-container" [innerHTML]="page.content.rendered"></div>
</div>
<div class="col-right-30 content-col">
<div *ngFor="let m of page.media" class="audio-box">
<audio style="width:100%;" [src]="m.url" controls autoplay></audio>
</div>
<div class="date-container">
<strong>Date:</strong> <p>{{ page.date | date }}</p>
</div>
@ -21,14 +24,14 @@
</div>
<div class="categories-container" *ngIf="page._embedded && page._embedded['wp:term']">
<strong i18n>Categories</strong>
<ul class="categories"><li *ngFor="let cat of page._embedded['wp:term'][0]">{{cat.name}}</li></ul>
<ul class="categories"><li *ngFor="let cat of page._embedded['wp:term'][0]" (click)="setTerm(cat)">{{cat.name}}</li></ul>
</div>
<div class="tags-container" *ngIf="page._embedded && page._embedded['wp:term']">
<strong i18n>Tags</strong>
<ul class="tags"><li *ngFor="let cat of page._embedded['wp:term'][1]">{{cat.name}}</li></ul>
<ul class="tags"><li *ngFor="let cat of page._embedded['wp:term'][1]" (click)="setTerm(cat)">{{cat.name}}</li></ul>
</div>
<div *ngFor="let m of page.media" class="audio-box">
<audio style="width:100%;" [src]="m.url" controls autoplay></audio>
<!-- <audio style="width:100%;" [src]="m.url" controls autoplay></audio> -->
<div class="content-metadata" (click)="showMetadata=!showMetadata" style="cursor:pointer;"><strong>Metadata <span *ngIf="!showMetadata || showMetadata==false">&darr;</span><span *ngIf="showMetadata==true">&uarr;</span></strong></div>
<ul *ngIf="showMetadata && m">
<li>Title: {{m.title}}</li>

12
src/app/text-info/text-info.component.ts
View File

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { MessageService } from '../message.service'
import {MapService} from '../map.service'
@Component({
selector: 'text-info',
@ -9,10 +10,19 @@ import { MessageService } from '../message.service'
export class TextInfoComponent implements OnInit {
constructor(
public mService:MessageService
public mService:MessageService,
public mapService:MapService
) { }
ngOnInit() {
}
setTerm(term) {
// console.log("setTerm: "+term);
//this.mapService.filter = term;
this.mapService.setFilter(term);
this.mService.clean();
// this.wordpressService.getMarker('',term);
}
}

9
src/app/wordpress.service.ts
View File

@ -6,7 +6,7 @@ import {PageItem} from './page';
@Injectable()
export class WordpressService {
apiUrl : string = "https://chiasso.soinumapa.net/wp-json/wp/v2"
apiUrl : string = "https://ticino.soinumapa.net/wp-json/wp/v2"
constructor(
private http:HttpClient,
@ -29,9 +29,14 @@ export class WordpressService {
return this.http.get<PageItem[]>(url,{ headers:headers, params: searchParams })
}
public getMarker(slug:string = ""):Observable<PageItem[]> {
public getMarker(slug:string = "", term:any = ''):Observable<PageItem[]> {
let params = "?_embed";
if (slug!="") params = params+"&slug="+slug;
if (term!="") {
let collection = term["_links"]['collection'][0]['href']
let collectionStr = collection.split("/").slice(-1)[0]
params = params+"&"+collectionStr+"="+term.id
}
let url = this.apiUrl+"/marker"+params;
return this.http.get<PageItem[]>(url);
}

5
src/environments/environment.prod.ts
View File

@ -1,3 +1,6 @@
export const environment = {
production: true
production: true,
mapbox: {
accessToken: 'pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w'
}
};

1
src/index.html
View File

@ -4,7 +4,6 @@
<meta charset="utf-8">
<title>Ticino Soundmap</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css' rel='stylesheet' />

28
src/styles.css
View File

@ -1,14 +1,17 @@
/* You can add global styles to this file, and also import other style files */
@import url('https://fonts.googleapis.com/css?family=Oswald|Raleway');
body {padding:0;font-size:12pt;overflow:hidden;font-family:'Raleway',sans-serif;}
html { scroll-behavior: smooth;}
body {padding:0;font-size:12pt;overflow-x:hidden;font-family:'Raleway',sans-serif;margin:0}
a {color:#fff;padding:0 5px;background-color:#333;font-weight:bold;text-decoration:none;}
h1,h2,h3,h4,h5,h6 {font-family:'Oswald';}
div.modal {display:block;position:absolute;top:0;left:0;width:100vw;height:100vh;width:100%;height:100%; background-color:rgba(255,255,255,0.8);overflow-y:scroll;}
div.content { position:relative;display:block;height:100%;overflow:auto;font-size:1em;background:#fff;border:1px solid #eee;padding:30px;border-radius:1px; position:relative; width:80vw;min-height:50vh;margin:auto;margin-top:10vh;margin-bottom:10vh;}
div.modal {z-index:20;display:block;position:absolute;top:0;left:0;width:100vw;height:100vh;width:100%;height:100%; background-color:rgba(255,255,255,0.8);overflow-y:scroll;}
div.content { position:relative;display:block;height:100%;overflow:auto;font-size:1em;background:#fff;border:1px solid #eee;padding:30px;border-radius:1px; position:relative; width:80vw;min-height:50vh;margin:auto;margin-top:2vh;margin-bottom:10vh;}
div.col-left-70 {position:relative;float:right;width:66%;padding-left:1%;padding-right:1%;}
div.col-right-30 {border-right:1px solid #ccc;position:relative;float:right;width:28%;padding-left:1%;padding-right:1%;}
div.content h1 span {background-color:#d52b1e;color:#fff;font-size:3em;padding:0 20px;}
div.content h1,h2,h3,h4,h5 {font-size:1em;color:#d52b1e;}
div.content h1 span {font-size:3em;padding:0 20px;}
div.title h2 span { background:#ccc; color:#fff; padding:0 20px;}
div.content h1,h2,h3,h4,h5 {text-decoration:none; font-size:1em;color:#d52b1e;}
div.content div.content-col > * {margin:0 20px;height:100%;display:block;}
div.content div.col-right-30 > * {margin-bottom:20px;}
div.content div.tags-container,
@ -24,3 +27,18 @@ div.content ul.tags li {float:left;padding:5px;margin:2px;background-color:#d52b
div.content div.audio-box audio {margin-top:10px;margin-bottom:10px;}
div.close-button {cursor:pointer;position:absolute;right:0;top:0;z-index:100;padding:10px;}
div close-button:hover {background:#eee;}
div.content div.audio-box {clear:both;}
div.content-metadata {top:20px;position:relative;}
div.content div.audio-box ul li {padding:3px 0;font-size:0.8em;}
/* pages */
app-pages div.container-map-pages {padding-top:100vh;background-color:#d52b1e;}
/* trick */
div.mapboxgl-ctrl-bottom-right,
div.mapboxgl-ctrl-bottom-left { display:none;}
@media screen and (max-device-width: 720px) {
body { background-color:#d52b1e}
}