...
 
Commits (3)
......@@ -43,6 +43,7 @@
<li class="infobox-item" *ngIf="selectedItem.p3090"><b>Flight number:</b> {{ selectedItem.p3090 }}</li>
</ul>
</div>
<div class="image" *ngIf="selectedItem.associatedMedias && selectedItem.associatedMedias.length > 0" [ngStyle]="{ 'background-image': 'url(' + selectedItem.associatedMedias[0] + ')' }"></div>
<div class="text" *ngIf="selectedItem.description" [innerHTML]="selectedItem.description | underline : selectedItem.sources | colorize : (selectedItem.annotations || [])"></div>
</div>
</div>
......
......@@ -14,6 +14,14 @@
padding-right: 1em;
}
.image {
background-repeat: no-repeat;
background-color: transparent;
background-size: cover;
width: 100%;
height: 200px;
}
.infobox {
float: right;
max-width: 40%;
......
......@@ -101,13 +101,27 @@ export class HomeDetailsComponent implements OnInit {
getAnnotationName(annotationType: string) {
switch (annotationType) {
case 'http://adel.eurecom.fr/Stanford/Person': return 'Person';
case 'http://adel.eurecom.fr/Stanford/Location': return 'Location';
case 'http://adel.eurecom.fr/Stanford/Misc': return 'Misc';
case 'http://adel.eurecom.fr/Stanford/Organization': return 'Organization';
case 'http://adel.eurecom.fr/Stanford/Thing': return 'Thing';
case 'http://adel.eurecom.fr/Stanford/Event': return 'Event';
case 'http://adel.eurecom.fr/Stanford/Product': return 'Product';
case 'http://adel.eurecom.fr/Stanford/Person':
case 'http://adel.eurecom.fr/Stanford/PERSON':
return 'Person';
case 'http://adel.eurecom.fr/Stanford/Location':
case 'http://adel.eurecom.fr/Stanford/LOCATION':
return 'Location';
case 'http://adel.eurecom.fr/Stanford/Misc':
case 'http://adel.eurecom.fr/Stanford/MISC':
return 'Misc';
case 'http://adel.eurecom.fr/Stanford/Organization':
case 'http://adel.eurecom.fr/Stanford/ORGANIZATION':
return 'Organization';
case 'http://adel.eurecom.fr/Stanford/Thing':
case 'http://adel.eurecom.fr/Stanford/THING':
return 'Thing';
case 'http://adel.eurecom.fr/Stanford/Event':
case 'http://adel.eurecom.fr/Stanford/EVENT':
return 'Event';
case 'http://adel.eurecom.fr/Stanford/Product':
case 'http://adel.eurecom.fr/Stanford/PRODUCT':
return 'Product';
}
return annotationType;
}
......
......@@ -5,30 +5,35 @@ import { NewsService } from '../../services/news/news.service';
@Pipe({ name: 'colorize' })
export class ColorizePipe implements PipeTransform {
// Each html tag created by this transform increases the total offset
tagsOffset: number;
constructor(public sanitizer: DomSanitizer) {
this.tagsOffset = 0;
}
calculateAdelOffset(htmlText: string, start: number, end: number) {
// Adel is based on stripped html text
var pattern = /<(?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])+>/g;
var pattern = /<(?:(?! ))(?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])+>/g;
var match = pattern.exec(htmlText);
var totalTagsLength = 0;
while (match != null) {
if (match.index > start + totalTagsLength) {
if (match.index > start + totalTagsLength + this.tagsOffset) {
break;
}
console.log(match[0], match.index);
// console.log(match[0], match.index);
totalTagsLength += match[0].length;
if (match[0].indexOf('</') === 0) {
if (match[0].startsWith('</')) {
totalTagsLength -= 1; // Adel Annotator adds a space after closing tags
}
match = pattern.exec(htmlText)
}
return {
start: start + totalTagsLength,
end: end + totalTagsLength
start: start + totalTagsLength + this.tagsOffset,
end: end + totalTagsLength + this.tagsOffset
};
}
......@@ -50,19 +55,23 @@ export class ColorizePipe implements PipeTransform {
return a.start > b.start ? 1 : -1;
});
console.log(flatAnnotations);
// console.log(flatAnnotations);
flatAnnotations.forEach((value: any) => {
var colorType = NewsService.getAnnotationColor(value.type);
var adelOffset = this.calculateAdelOffset(text, value.start, value.end);
console.log('"' + text.substr(adelOffset.start, adelOffset.end - adelOffset.start) + '"');
// console.log('"' + text.substr(adelOffset.start, adelOffset.end - adelOffset.start) + '"');
let replacement = '<span asrael class="colorize color-' + colorType + '">' + text.substr(adelOffset.start, adelOffset.end - adelOffset.start) + '</span>';
let replacement = '<a href="' + value.source + '" target="_blank"><span asrael class="colorize color-' + colorType + '">' + text.substr(adelOffset.start, adelOffset.end - adelOffset.start) + '</span></a>';
text = text.substr(0, adelOffset.start) + replacement + text.substr(adelOffset.end);
this.tagsOffset += 2; // </span></a>
});
this.tagsOffset = 0;
return text;
} else {
return text;
......
......@@ -114,7 +114,7 @@ export class NewsService {
// Generate query
let query = `
${this.getPrefixes()}
SELECT DISTINCT ?s ?dateCreated ?dateModified ?datePublished ?description ?genre ?genreLabel (GROUP_CONCAT(?subject; separator="|") AS ?subjects) (GROUP_CONCAT(?subjectLabel; separator="|") AS ?subjectsLabels) ?dateline ?headline ?identifier ?language ?slug ?country ?locality ?annotations ?p1561 ?p1339 ?p1120 ?p137 ?p426 ?p3090
SELECT DISTINCT ?s ?dateCreated ?dateModified ?datePublished ?description ?genre ?genreLabel (GROUP_CONCAT(?subject; separator="|") AS ?subjects) (GROUP_CONCAT(?subjectLabel; separator="|") AS ?subjectsLabels) ?dateline ?headline ?identifier ?language ?slug (GROUP_CONCAT(?associatedMedia; separator="|") AS ?associatedMedias) ?country ?locality ?annotations
FROM <http://asrael.eurecom.fr/agencefrancepresse/news>
WHERE {
?s a rnews:NewsItem .
......@@ -144,13 +144,7 @@ export class NewsService {
OPTIONAL { ?s rnews:identifier ?identifier . }
OPTIONAL { ?s rnews:inLanguage ?language . }
OPTIONAL { ?s rnews:slug ?slug . }
OPTIONAL { ?s wdt:P1561 ?p1561 . }
OPTIONAL { ?s wdt:P1339 ?p1339 . }
OPTIONAL { ?s wdt:P1120 ?p1120 . }
OPTIONAL { ?s wdt:P137 ?p137 . }
OPTIONAL { ?s wdt:P426 ?p426 . }
OPTIONAL { ?s wdt:P3090 ?p3090 . }
OPTIONAL { ?s rnews:associatedMedia ?associatedMedia . }
OPTIONAL {
?s schema:contentLocation ?location .
......@@ -191,7 +185,7 @@ export class NewsService {
binding[k] = binding[k].value;
}
// Split subjects
// Subjects
if (binding.subjects) {
binding.subjects = binding.subjects.split('|');
}
......@@ -199,6 +193,11 @@ export class NewsService {
binding.subjectsLabels = binding.subjectsLabels.split('|');
}
// Associated medias
if (binding.associatedMedias) {
binding.associatedMedias = binding.associatedMedias.split('|');
}
// Annotations
if (binding.annotations) {
// Split and decode the values
......@@ -328,13 +327,27 @@ export class NewsService {
static getAnnotationColor(annotationType: string) {
switch (annotationType) {
case 'http://adel.eurecom.fr/Stanford/Person': return 'person';
case 'http://adel.eurecom.fr/Stanford/Location': return 'location';
case 'http://adel.eurecom.fr/Stanford/Misc': return 'misc';
case 'http://adel.eurecom.fr/Stanford/Organization': return 'organization';
case 'http://adel.eurecom.fr/Stanford/Thing': return 'thing';
case 'http://adel.eurecom.fr/Stanford/Event': return 'event';
case 'http://adel.eurecom.fr/Stanford/Product': return 'product';
case 'http://adel.eurecom.fr/Stanford/Person':
case 'http://adel.eurecom.fr/Stanford/PERSON':
return 'person';
case 'http://adel.eurecom.fr/Stanford/Location':
case 'http://adel.eurecom.fr/Stanford/LOCATION':
return 'location';
case 'http://adel.eurecom.fr/Stanford/Misc':
case 'http://adel.eurecom.fr/Stanford/MISC':
return 'misc';
case 'http://adel.eurecom.fr/Stanford/Organization':
case 'http://adel.eurecom.fr/Stanford/ORGANIZATION':
return 'organization';
case 'http://adel.eurecom.fr/Stanford/Thing':
case 'http://adel.eurecom.fr/Stanford/THING':
return 'thing';
case 'http://adel.eurecom.fr/Stanford/Event':
case 'http://adel.eurecom.fr/Stanford/EVENT':
return 'event';
case 'http://adel.eurecom.fr/Stanford/Product':
case 'http://adel.eurecom.fr/Stanford/PRODUCT':
return 'product';
}
return 'default';
}
......
......@@ -50,6 +50,7 @@ input, select, textarea, button {
a {
color: $primary-color;
text-decoration: none;
}
a:hover {
color: darken($primary-color, 20%);
......@@ -264,24 +265,45 @@ form {
.colorize {
&.color-person {
color: #ff225a;
&:hover {
color: darken(#ff225a, 20%);
}
}
&.color-misc {
color: #6713e8;
&:hover {
color: darken(#6713e8, 20%);
}
}
&.color-location {
color: #22a6ff;
&:hover {
color: darken(#22a6ff, 20%);
}
}
&.color-organization {
color: #13e864;
&:hover {
color: darken(#13e864, 20%);
}
}
&.color-thing {
color: #D820e8;
&:hover {
color: darken(#D820e8, 20%);
}
}
&.color-event {
color: #ff8c22;
&:hover {
color: darken(#ff8c22, 20%);
}
}
&.color-product {
color: #ffcc2e;
&:hover {
color: darken(#ffcc2e, 20%);
}
}
}
......