Map link to wordpress
Markers by text symbols
This commit is contained in:
Siroco
parent
cee29e8692
commit
8bed8e419a
@ -1,60 +0,0 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"project": {
|
||||
"name": "chiasso-soundmap"
|
||||
},
|
||||
"apps": [
|
||||
{
|
||||
"root": "src",
|
||||
"outDir": "dist",
|
||||
"assets": [
|
||||
"assets",
|
||||
"favicon.ico"
|
||||
],
|
||||
"index": "index.html",
|
||||
"main": "main.ts",
|
||||
"polyfills": "polyfills.ts",
|
||||
"test": "test.ts",
|
||||
"tsconfig": "tsconfig.app.json",
|
||||
"testTsconfig": "tsconfig.spec.json",
|
||||
"prefix": "app",
|
||||
"styles": [
|
||||
"styles.css"
|
||||
],
|
||||
"scripts": [],
|
||||
"environmentSource": "environments/environment.ts",
|
||||
"environments": {
|
||||
"dev": "environments/environment.ts",
|
||||
"prod": "environments/environment.prod.ts"
|
||||
}
|
||||
}
|
||||
],
|
||||
"e2e": {
|
||||
"protractor": {
|
||||
"config": "./protractor.conf.js"
|
||||
}
|
||||
},
|
||||
"lint": [
|
||||
{
|
||||
"project": "src/tsconfig.app.json",
|
||||
"exclude": "**/node_modules/**"
|
||||
},
|
||||
{
|
||||
"project": "src/tsconfig.spec.json",
|
||||
"exclude": "**/node_modules/**"
|
||||
},
|
||||
{
|
||||
"project": "e2e/tsconfig.e2e.json",
|
||||
"exclude": "**/node_modules/**"
|
||||
}
|
||||
],
|
||||
"test": {
|
||||
"karma": {
|
||||
"config": "./karma.conf.js"
|
||||
}
|
||||
},
|
||||
"defaults": {
|
||||
"styleExt": "css",
|
||||
"component": {}
|
||||
}
|
||||
}
|
||||
132
angular.json
Normal file
132
angular.json
Normal file
@ -0,0 +1,132 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"chiasso-soundmap": {
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"projectType": "application",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"outputPath": "dist",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
"tsConfig": "src/tsconfig.app.json",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"assets": [
|
||||
"src/assets",
|
||||
"src/favicon.ico"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.css"
|
||||
],
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
"extractCss": true,
|
||||
"namedChunks": false,
|
||||
"aot": true,
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true,
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"browserTarget": "chiasso-soundmap:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "chiasso-soundmap:build:production"
|
||||
}
|
||||
}
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "chiasso-soundmap:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "src/test.ts",
|
||||
"karmaConfig": "./karma.conf.js",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "src/tsconfig.spec.json",
|
||||
"scripts": [],
|
||||
"styles": [
|
||||
"src/styles.css"
|
||||
],
|
||||
"assets": [
|
||||
"src/assets",
|
||||
"src/favicon.ico"
|
||||
]
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"src/tsconfig.app.json",
|
||||
"src/tsconfig.spec.json"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules/**"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"chiasso-soundmap-e2e": {
|
||||
"root": "e2e",
|
||||
"sourceRoot": "e2e",
|
||||
"projectType": "application",
|
||||
"architect": {
|
||||
"e2e": {
|
||||
"builder": "@angular-devkit/build-angular:protractor",
|
||||
"options": {
|
||||
"protractorConfig": "./protractor.conf.js",
|
||||
"devServerTarget": "chiasso-soundmap:serve"
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"e2e/tsconfig.e2e.json"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules/**"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "chiasso-soundmap",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"prefix": "app",
|
||||
"styleext": "css"
|
||||
},
|
||||
"@schematics/angular:directive": {
|
||||
"prefix": "app"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -4,24 +4,22 @@
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
basePath: '',
|
||||
frameworks: ['jasmine', '@angular/cli'],
|
||||
frameworks: ['jasmine', '@angular-devkit/build-angular'],
|
||||
plugins: [
|
||||
require('karma-jasmine'),
|
||||
require('karma-chrome-launcher'),
|
||||
require('karma-jasmine-html-reporter'),
|
||||
require('karma-coverage-istanbul-reporter'),
|
||||
require('@angular/cli/plugins/karma')
|
||||
require('@angular-devkit/build-angular/plugins/karma')
|
||||
],
|
||||
client:{
|
||||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||
},
|
||||
coverageIstanbulReporter: {
|
||||
reports: [ 'html', 'lcovonly' ],
|
||||
dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
|
||||
fixWebpackSourcePaths: true
|
||||
},
|
||||
angularCli: {
|
||||
environment: 'dev'
|
||||
},
|
||||
|
||||
reporters: ['progress', 'kjhtml'],
|
||||
port: 9876,
|
||||
colors: true,
|
||||
|
||||
7676
package-lock.json
generated
7676
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
36
package.json
36
package.json
@ -12,38 +12,40 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^5.2.0",
|
||||
"@angular/common": "^5.2.0",
|
||||
"@angular/compiler": "^5.2.0",
|
||||
"@angular/core": "^5.2.0",
|
||||
"@angular/forms": "^5.2.0",
|
||||
"@angular/http": "^5.2.0",
|
||||
"@angular/platform-browser": "^5.2.0",
|
||||
"@angular/platform-browser-dynamic": "^5.2.0",
|
||||
"@angular/router": "^5.2.0",
|
||||
"@angular/animations": "7.1.3",
|
||||
"@angular/common": "7.1.3",
|
||||
"@angular/compiler": "7.1.3",
|
||||
"@angular/core": "7.1.3",
|
||||
"@angular/forms": "7.1.3",
|
||||
"@angular/http": "7.1.3",
|
||||
"@angular/platform-browser": "7.1.3",
|
||||
"@angular/platform-browser-dynamic": "7.1.3",
|
||||
"@angular/router": "7.1.3",
|
||||
"core-js": "^2.4.1",
|
||||
"mapbox-gl": "^0.51.0",
|
||||
"rxjs": "^5.5.6",
|
||||
"zone.js": "^0.8.19"
|
||||
"rxjs": "^6.3.3",
|
||||
"tslib": "^1.9.0",
|
||||
"zone.js": "^0.8.26"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "~1.7.4",
|
||||
"@angular/compiler-cli": "^5.2.0",
|
||||
"@angular/language-service": "^5.2.0",
|
||||
"@angular-devkit/build-angular": "~0.11.0",
|
||||
"@angular/cli": "7.1.3",
|
||||
"@angular/compiler-cli": "7.1.3",
|
||||
"@angular/language-service": "7.1.3",
|
||||
"@types/jasmine": "~2.8.3",
|
||||
"@types/jasminewd2": "~2.0.2",
|
||||
"@types/node": "~6.0.60",
|
||||
"codelyzer": "^4.0.1",
|
||||
"jasmine-core": "~2.8.0",
|
||||
"jasmine-spec-reporter": "~4.2.1",
|
||||
"karma": "~2.0.0",
|
||||
"karma": "^3.1.3",
|
||||
"karma-chrome-launcher": "~2.2.0",
|
||||
"karma-coverage-istanbul-reporter": "^1.2.1",
|
||||
"karma-jasmine": "~1.1.0",
|
||||
"karma-jasmine-html-reporter": "^0.2.2",
|
||||
"protractor": "~5.1.2",
|
||||
"protractor": "^5.4.1",
|
||||
"ts-node": "~4.1.0",
|
||||
"tslint": "~5.9.1",
|
||||
"typescript": "~2.5.3"
|
||||
"typescript": "3.1.6"
|
||||
}
|
||||
}
|
||||
|
||||
25
src/app/app-routing.module.ts
Normal file
25
src/app/app-routing.module.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', component: AppComponent },
|
||||
{ path: ':slug', component: AppComponent },
|
||||
// { path: '/test/', component: PageComponent}.
|
||||
// { path: '/item/:idno', component: AppComponent}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
declarations: [],
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule.forRoot(routes)
|
||||
],
|
||||
exports: [
|
||||
RouterModule,
|
||||
]
|
||||
})
|
||||
|
||||
export class AppRoutingModule {
|
||||
}
|
||||
@ -3,6 +3,6 @@
|
||||
map-box {margin:0;}
|
||||
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 span {background:#3f00dd;}
|
||||
div.title h1 span {background:#d52b1e;padding:5px;}
|
||||
div.title h2 span {background:#fff;padding:2px;color:#000;}
|
||||
div.title p span {line-height:1.4;background:#021011;}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<div class="title">
|
||||
<h1><span>Chiasso Soundmap</span></h1>
|
||||
<h2><span>Listen</span> | <span>About</span> | <span>Contact</span></h2>
|
||||
<h1><span>Ticino Soundmap</span></h1>
|
||||
<!-- <h2><span>Listen</span> | <span>About</span> | <span>Contact</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>
|
||||
|
||||
@ -1,4 +1,8 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { WordpressService } from './wordpress.service';
|
||||
import { ActivatedRoute,Router, NavigationEnd } from "@angular/router";
|
||||
import {PageItem} from './page';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
@ -6,5 +10,20 @@ import { Component } from '@angular/core';
|
||||
styleUrls: ['./app.component.css']
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'Chiasso Soundmap';
|
||||
|
||||
pages:PageItem[];
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private wordpressService:WordpressService,
|
||||
) {
|
||||
this.route.params.subscribe( params => {
|
||||
let slug = params.slug;
|
||||
console.log(slug)
|
||||
this.wordpressService.getPage(slug)
|
||||
.subscribe(data=> {
|
||||
this.pages = data;
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,13 @@ import { NgModule } from '@angular/core';
|
||||
import { AppComponent } from './app.component';
|
||||
import { MapBoxComponent } from './map-box/map-box.component';
|
||||
import { MapService } from './map.service';
|
||||
import { WordpressService } from './wordpress.service';
|
||||
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';
|
||||
|
||||
|
||||
|
||||
@NgModule({
|
||||
@ -15,10 +21,14 @@ import { TextInfoComponent } from './text-info/text-info.component';
|
||||
TextInfoComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule
|
||||
BrowserModule,
|
||||
HttpClientModule,
|
||||
AppRoutingModule,
|
||||
],
|
||||
providers: [
|
||||
MapService
|
||||
MapService,
|
||||
WordpressService,
|
||||
MessageService,
|
||||
],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import * as mapboxgl from 'mapbox-gl';
|
||||
import { MapService } from '../map.service';
|
||||
import { WordpressService } from '../wordpress.service';
|
||||
import { GeoJson, FeatureCollection } from '../map';
|
||||
import { Observable } from 'rxjs';
|
||||
import { MessageService } from '../message.service';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'map-box',
|
||||
@ -12,17 +16,28 @@ export class MapBoxComponent implements OnInit {
|
||||
|
||||
/// default settings
|
||||
map: mapboxgl.Map;
|
||||
style = 'mapbox://styles/mapbox/satellite-streets-v9';
|
||||
// style = 'mapbox://styles/mapbox/satellite-streets-v9';
|
||||
//style = 'mapbox://styles/lrullo/cjonkoeiu3hrk2rqstkofqku9';
|
||||
style = 'mapbox://styles/lrullo/cjplquc7x0eil2qo95qhxtq80';
|
||||
//chiasso 45.8289397,8.9803456
|
||||
lat = 45.836700;
|
||||
lng = 9.024611;
|
||||
public lat = 46.238752301105706;
|
||||
public lng = 8.841247558593752;
|
||||
public zoom = 8
|
||||
message = 'Chiasso Soundmap';
|
||||
private hoveredStateId:number = null;
|
||||
|
||||
// data
|
||||
source: any;
|
||||
markers: any;
|
||||
public featurecollection:FeatureCollection;
|
||||
public source:any;
|
||||
private popup = new mapboxgl.Popup({closeButton: true, closeOnClick: true, offset: 0});
|
||||
|
||||
constructor(private mapService: MapService) { }
|
||||
constructor(
|
||||
private mapService: MapService,
|
||||
private wordpressService:WordpressService,
|
||||
private mService:MessageService
|
||||
) {
|
||||
this.featurecollection = new FeatureCollection([]);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.initializeMap()
|
||||
@ -36,13 +51,114 @@ export class MapBoxComponent implements OnInit {
|
||||
this.map = new mapboxgl.Map({
|
||||
container: 'map',
|
||||
style: this.style,
|
||||
zoom: 13,
|
||||
pitch: 40, // pitch in degrees
|
||||
zoom: this.zoom,
|
||||
pitch: 0, // pitch in degrees
|
||||
bearing: 0, // bearing in degrees
|
||||
center: [this.lng, this.lat]
|
||||
});
|
||||
|
||||
this.map.addControl(new mapboxgl.NavigationControl());
|
||||
|
||||
this.map.on('mousemove','ticino', (e) => {
|
||||
if (e.features.length>0) {
|
||||
var coord = e.features[0].geometry.coordinates.slice();
|
||||
this.popup.setLngLat(coord)
|
||||
.setHTML(e.features[0].properties.title)
|
||||
// .setHTML("<strong class='type-"+type_tag+"'>"+type+"</strong><br/> "+e.features[0].properties.title)
|
||||
//.addTo(this.map)
|
||||
if (this.hoveredStateId) {
|
||||
this.map.setFeatureState({source: 'ticino', id: this.hoveredStateId}, { hover: false});
|
||||
}
|
||||
|
||||
this.hoveredStateId = e.features[0].id;
|
||||
this.map.setFeatureState({source: 'ticino', id: this.hoveredStateId}, { hover: true});
|
||||
console.log(this.hoveredStateId);
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
this.map.on("mouseleave", "ticino", function() {
|
||||
if (this.hoveredStateId) {
|
||||
this.map.setFeatureState({source: 'ticino', id: this.hoveredStateId}, { hover: false});
|
||||
}
|
||||
this.hoveredStateId = null;
|
||||
});
|
||||
|
||||
this.map.on('click','ticino', (e) => {
|
||||
if (e.features.length>0) {
|
||||
var slug = e.features[0].properties.slug;
|
||||
this.wordpressService.getMarker(slug)
|
||||
.subscribe(data => {
|
||||
data.map(page => {
|
||||
console.log(page)
|
||||
this.mService.addMessage(page);
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
this.map.on('load',(e)=>{
|
||||
this.map.addSource('ticino', {
|
||||
type: 'geojson',
|
||||
data: new FeatureCollection([]),
|
||||
});
|
||||
this.source = this.map.getSource('ticino')
|
||||
//set srouce from wordpress map
|
||||
this.getSource();
|
||||
|
||||
//layers
|
||||
this.map.addLayer({
|
||||
id: "ticino",
|
||||
type: "symbol",
|
||||
source: "ticino",
|
||||
layout: {
|
||||
// 'icon-size': 1,
|
||||
// 'icon-image': "sound-marker",
|
||||
// 'icon-allow-overlap': true,
|
||||
"text-field": "{title}",
|
||||
'text-allow-overlap': true,
|
||||
'text-size':18,
|
||||
'text-offset':[0,0],
|
||||
'text-transform':'lowercase',
|
||||
},
|
||||
paint: {
|
||||
// 'text-halo-color':"#d52b1e",
|
||||
'text-halo-width':20,
|
||||
'text-color':"#fff",
|
||||
'text-halo-color':["case",
|
||||
["boolean", ["feature-state", "hover"], false],
|
||||
"#000",
|
||||
"#d52b1e"
|
||||
]
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
private getSource():void {
|
||||
//get All markers and converto to geoJSON for map Source
|
||||
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.featurecollection = fc;
|
||||
this.source.setData(fc)
|
||||
console.log(this.source)
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
12
src/app/message.service.spec.ts
Normal file
12
src/app/message.service.spec.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MessageService } from './message.service';
|
||||
|
||||
describe('MessageService', () => {
|
||||
beforeEach(() => TestBed.configureTestingModule({}));
|
||||
|
||||
it('should be created', () => {
|
||||
const service: MessageService = TestBed.get(MessageService);
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
22
src/app/message.service.ts
Normal file
22
src/app/message.service.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { PageItem } from './page';
|
||||
|
||||
@Injectable()
|
||||
|
||||
export class MessageService {
|
||||
|
||||
public message:PageItem[] = [];
|
||||
|
||||
constructor() { }
|
||||
|
||||
public addMessage(pageItem:PageItem):void {
|
||||
console.log('addPage');
|
||||
console.log(pageItem);
|
||||
this.message = [pageItem];
|
||||
}
|
||||
|
||||
public clean() {
|
||||
this.message = [];
|
||||
}
|
||||
|
||||
}
|
||||
23
src/app/page.ts
Normal file
23
src/app/page.ts
Normal file
@ -0,0 +1,23 @@
|
||||
export class PageItem {
|
||||
constructor(
|
||||
public id : string,
|
||||
public title : {rendered:string},
|
||||
public excerpt : string,
|
||||
public content : {rendered:string},
|
||||
public slug : string,
|
||||
public parent? : string,
|
||||
public background_image? : string,
|
||||
public link?: string,
|
||||
public featuredmedia ? : any[],
|
||||
public hasChild? : boolean,
|
||||
public childs?: PageItem[],
|
||||
public parent_title? : string,
|
||||
public language? : {
|
||||
current:string,
|
||||
es:{ slug:string},
|
||||
eu:{ slug:string},
|
||||
},
|
||||
public pdf?:any,
|
||||
public georeference?:number[],
|
||||
) {}
|
||||
}
|
||||
@ -1,2 +1,10 @@
|
||||
div.modal {display:none;position:absolute;top:0;left:0;width:100vw;height:100vh;width:100%;height:100%; background-color:rgba(255,255,255,0.8);}
|
||||
div.content { background:#fff;border:1px solid #eee;padding:10px;border-radius:1px; position:relative; width:50vw;height:50vh;margin:auto;margin-top:20vh;}
|
||||
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 { background:#fff;border:1px solid #eee;padding:10px;border-radius:1px; position:relative; width:80vw;min-height:50vh;margin:auto;margin-top:10vh;margin-bottom:10vh;}
|
||||
div.content div.tags-container,
|
||||
div.content div.categories-container,
|
||||
div.content div.content-container {width:100%;clear:both;position:relative;padding:10px 0px;}
|
||||
div.content ul {list-style:none;width:100%;clear:both;}
|
||||
div.content ul.categories li,
|
||||
div.content ul.tags li {float:left;padding:5px;margin:2px;background-color:#d52b1e;color:#fff;}
|
||||
div.content div.audio-box audio {margin-top:10px;margin-bottom:10px;}
|
||||
div.close-button {position:absolute;right:0;top:0;z-index:100;padding:10px;}
|
||||
|
||||
@ -1,6 +1,27 @@
|
||||
<div class="modal">
|
||||
<div class="content">
|
||||
<h1>Info</h1>
|
||||
<p>More info</p>
|
||||
<div *ngIf="mService.message.length>0" class="modal">
|
||||
<div class="content" *ngFor="let page of mService.message">
|
||||
<div class="close-button" (click)="mService.clean()">[X]</div>
|
||||
<h1 [innerHTML]="page.title.rendered"></h1>
|
||||
<p>{{ page.date | date }}</p>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
<div class="content-container" [innerHTML]="page.content.rendered"></div>
|
||||
<div *ngFor="let m of page.media" class="audio-box">
|
||||
<audio style="width:100%;" [src]="m.url" controls autoplay></audio>
|
||||
<strong>Metadata <span (click)="showMetadata=!showMetadata">[+]</span></strong>
|
||||
<ul *ngIf="showMetadata && m">
|
||||
<li>Title: {{m.title}}</li>
|
||||
<li>Author: {{m.meta.artist}}</li>
|
||||
<li>Album: {{m.meta.album}}</li>
|
||||
<li>Bitrate: {{m.meta.bitrate}}</li>
|
||||
<li>Original filename: {{m.filename}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { MessageService } from '../message.service'
|
||||
|
||||
@Component({
|
||||
selector: 'text-info',
|
||||
@ -7,7 +8,9 @@ import { Component, OnInit } from '@angular/core';
|
||||
})
|
||||
export class TextInfoComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
constructor(
|
||||
public mService:MessageService
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
12
src/app/wordpress.service.spec.ts
Normal file
12
src/app/wordpress.service.spec.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { WordpressService } from './wordpress.service';
|
||||
|
||||
describe('WordpressService', () => {
|
||||
beforeEach(() => TestBed.configureTestingModule({}));
|
||||
|
||||
it('should be created', () => {
|
||||
const service: WordpressService = TestBed.get(WordpressService);
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
39
src/app/wordpress.service.ts
Normal file
39
src/app/wordpress.service.ts
Normal file
@ -0,0 +1,39 @@
|
||||
import { Injectable,LOCALE_ID, Inject } from '@angular/core';
|
||||
import { HttpClient, HttpParams, HttpHeaders, HttpErrorResponse} from '@angular/common/http';
|
||||
import { Observable } from 'rxjs';
|
||||
import {PageItem} from './page';
|
||||
|
||||
@Injectable()
|
||||
export class WordpressService {
|
||||
|
||||
apiUrl : string = "https://chiasso.soinumapa.net/wp-json/wp/v2"
|
||||
|
||||
constructor(
|
||||
private http:HttpClient,
|
||||
@Inject(LOCALE_ID) protected localeId: string
|
||||
) {
|
||||
|
||||
}
|
||||
|
||||
public getPage(slug:string = ""):Observable<PageItem[]> {
|
||||
let headers = new HttpHeaders();
|
||||
let searchParams = new HttpParams();
|
||||
searchParams.append('orderby','menu_order');
|
||||
searchParams.append('_embed','');
|
||||
searchParams.append('per_page',"20");
|
||||
searchParams.append('lang',this.localeId);
|
||||
searchParams.append('slug',slug);
|
||||
let params = "orderby=menu_order&_embed&_linked&per_page=20&lang="+this.localeId;
|
||||
if (slug!="") params = params+"&slug="+slug;
|
||||
let url = this.apiUrl+"/pages?"+params;
|
||||
return this.http.get<PageItem[]>(url,{ headers:headers, params: searchParams })
|
||||
}
|
||||
|
||||
public getMarker(slug:string = ""):Observable<PageItem[]> {
|
||||
let params = "?_embed";
|
||||
if (slug!="") params = params+"&slug="+slug;
|
||||
let url = this.apiUrl+"/marker"+params;
|
||||
return this.http.get<PageItem[]>(url);
|
||||
}
|
||||
|
||||
}
|
||||
98
src/assets/sound-marker.svg
Normal file
98
src/assets/sound-marker.svg
Normal file
@ -0,0 +1,98 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
version="1.1"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 50 68.17596"
|
||||
enable-background="new 0 0 1000 1000"
|
||||
xml:space="preserve"
|
||||
id="svg5045"
|
||||
sodipodi:docname="sound-marker.svg"
|
||||
inkscape:version="0.92.1 r15371"
|
||||
width="50"
|
||||
height="68.175957"><defs
|
||||
id="defs5049" /><sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1366"
|
||||
inkscape:window-height="734"
|
||||
id="namedview5047"
|
||||
showgrid="false"
|
||||
inkscape:zoom="15.166281"
|
||||
inkscape:cx="5.464593"
|
||||
inkscape:cy="16.294522"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="18"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg5045"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0" /><metadata
|
||||
id="metadata5023"> Svg Vector Icons : http://www.onlinewebfonts.com/icon <rdf:RDF><cc:Work
|
||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><g
|
||||
id="g5294"
|
||||
transform="matrix(2.4512531,0,0,2.4512531,-23.37369,-13.465334)"><path
|
||||
inkscape:connector-curvature="0"
|
||||
id="path5053"
|
||||
d="m 19.73427,32.848178 c 0,0 22.283552,-27.0639638 0,-27.0639638 -22.2835522,0 0,27.0639638 0,27.0639638 z"
|
||||
style="fill:#a5c9df;fill-opacity:1;stroke:#000000;stroke-width:0.58193809;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.14009663" /><circle
|
||||
r="6.7589064"
|
||||
cy="15.125909"
|
||||
cx="19.73427"
|
||||
id="path5087"
|
||||
style="opacity:1;fill:#5197c1;fill-opacity:1;stroke:#e9e9e9;stroke-width:0.3819415;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.58454111" /><g
|
||||
style="fill:#ffffff;stroke:none;stroke-width:19.89921188;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58454111"
|
||||
transform="matrix(0.01455134,0,0,0.01455134,12.458527,7.2853582)"
|
||||
id="g5043"><g
|
||||
style="fill:#ffffff;stroke:none;stroke-width:198.99212646;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58454111"
|
||||
id="g5041"
|
||||
transform="matrix(0.1,0,0,-0.1,0,511)"><path
|
||||
style="fill:#ffffff;stroke:none;stroke-width:198.99212646;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58454111"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path5025"
|
||||
d="m 6633.3,110 v -4900 h 331.8 331.8 V 110 5010 h -331.8 -331.8 z" /><path
|
||||
style="fill:#ffffff;stroke:none;stroke-width:198.99212646;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58454111"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path5027"
|
||||
d="m 5331.8,110 v -3930.2 h 319 319 V 110 4040.2 h -319 -319 z" /><path
|
||||
style="fill:#ffffff;stroke:none;stroke-width:198.99212646;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58454111"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path5029"
|
||||
d="m 2703.1,110 v -2934.9 h 331.8 331.8 V 110 3044.9 h -331.8 -331.8 z" /><path
|
||||
style="fill:#ffffff;stroke:none;stroke-width:198.99212646;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58454111"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path5031"
|
||||
d="m 7934.9,110 v -2603.1 h 331.8 331.8 V 110 2713.1 h -331.8 -331.8 z" /><path
|
||||
style="fill:#ffffff;stroke:none;stroke-width:198.99212646;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58454111"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path5033"
|
||||
d="m 1401.6,110 v -2299.4 l 326.7,7.6 324.1,7.7 V 110 2394.1 l -324.1,7.7 -326.7,7.7 z" /><path
|
||||
style="fill:#ffffff;stroke:none;stroke-width:198.99212646;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58454111"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path5035"
|
||||
d="m 4030.2,110 v -1965.1 h 319 319 V 110 2075.1 h -319 -319 z" /><path
|
||||
style="fill:#ffffff;stroke:none;stroke-width:198.99212646;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58454111"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path5037"
|
||||
d="m 9241.6,117.7 7.7,-1960 326.7,-7.7 324.1,-7.6 V 110 2075.1 h -331.8 -331.8 z" /><path
|
||||
style="fill:#ffffff;stroke:none;stroke-width:198.99212646;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.58454111"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path5039"
|
||||
d="M 100,110 V -1191.6 H 431.8 763.6 V 110 1411.6 H 431.8 100 Z" /></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 5.2 KiB |
@ -43,7 +43,7 @@
|
||||
|
||||
/** Evergreen browsers require these. **/
|
||||
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
|
||||
import 'core-js/es7/reflect';
|
||||
|
||||
|
||||
|
||||
/**
|
||||
|
||||
@ -10,7 +10,8 @@
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"test.ts"
|
||||
"test.ts",
|
||||
"polyfills.ts"
|
||||
],
|
||||
"include": [
|
||||
"**/*.spec.ts",
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"importHelpers": true,
|
||||
"outDir": "./dist/out-tsc",
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
@ -14,6 +15,8 @@
|
||||
"lib": [
|
||||
"es2017",
|
||||
"dom"
|
||||
]
|
||||
],
|
||||
"module": "es2015",
|
||||
"baseUrl": "./"
|
||||
}
|
||||
}
|
||||
@ -18,7 +18,6 @@
|
||||
"forin": true,
|
||||
"import-blacklist": [
|
||||
true,
|
||||
"rxjs",
|
||||
"rxjs/Rx"
|
||||
],
|
||||
"import-spacing": true,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user