Skip to content

Commit 9b59f4c

Browse files
yarlyarl
authored
Merge pull request #2 from yarl/dev
version 0.2
2 parents fbbe9cd + c937502 commit 9b59f4c

15 files changed

Lines changed: 284 additions & 55 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "monumental",
3-
"version": "0.1.0",
3+
"version": "0.2.0",
44
"private": true,
55
"description": "Monumental app",
66
"main": "src/index.js",

‎src/components/main/dashboard/dashboard.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<md-content layout="column" layout-gt-sm="row" layout-align="start stretch" flex>
2-
<a ui-sref="main.monument({id: 'Q765569'})">Zamek Gryf (Q765569)<a/>
2+
<a ui-sref="main.object({id: 'Q765569'})">Zamek Gryf (Q765569)<a/>
33
</md-content>

‎src/components/main/main.html‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,24 @@
1-
<md-toolbar class="toolbar md-whiteframe-3dp">
1+
<md-toolbar class="toolbar md-whiteframe-3dp" layout="column" layout-align="start center">
22
<div class="md-toolbar-tools">
33
<md-button ui-sref="main.dashboard">
44
Dashboard
55
</md-button>
6+
<span flex></span>
7+
<md-autocomplete
8+
md-input-name="autocompleteField"
9+
md-selected-item="$ctrl.search.selectedItem"
10+
md-search-text="$ctrl.search.text"
11+
md-items="item in $ctrl.querySearch($ctrl.search.text)"
12+
md-selected-item-change="$ctrl.goToItem(item)"
13+
md-item-text="item.label"
14+
md-min-length="1"
15+
placeholder="Search"
16+
md-menu-class="autocomplete-custom-template">
17+
<md-item-template>
18+
<strong>{{item.label}}</strong>
19+
<span>{{item.description}}</span>
20+
</md-item-template>
21+
</md-autocomplete>
622
</div>
723
</md-toolbar>
824
<div class="container" layout="column" layout-align="space-between stretch" flex>

‎src/components/main/main.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,12 @@ const MainComponent = {
77
template: template
88
};
99

10-
function controller() {
10+
function controller(wikidata, $state) {
11+
let vm = this;
12+
13+
vm.goToItem = (item) => $state.go('main.object', {id: item.title});
14+
vm.querySearch = (text) => wikidata.getSearch(text);
15+
vm.search = {};
1116

1217
}
1318

‎src/components/main/main.scss‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,13 @@
11
@import '../../styles/variables';
2-
@import '../../styles/responsive';
2+
@import '../../styles/responsive';
3+
4+
.toolbar {
5+
.md-toolbar-tools {
6+
max-width: 980px;
7+
padding: 0;
8+
9+
md-autocomplete {
10+
width: 300px;
11+
}
12+
}
13+
}

‎src/components/main/monument/monument.html‎

Lines changed: 67 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,85 @@
11
<md-content layout="column" layout-align="start center" flex>
2-
<div class="monument"
3-
layout="row" layout-align="space-between stretch">
2+
<div class="monument" layout="row" layout-align="space-between stretch">
3+
4+
<!-- LEFT -->
45
<div class="monument__left">
56
<h2 class="monument__title md-display-1">{{$ctrl.monument.labels[$ctrl.lang] || 'no name'}}</h2>
67
<h4 class="monument__subtitle md-headline muted">{{$ctrl.monument.labels.en || 'no english name'}}</h4>
7-
<ul>
8-
<li ng-repeat="claim in $ctrl.monument.claims">
9-
<span>{{claim.property[$ctrl.lang]}}:</span>
10-
<span ng-repeat="value in claim.values">
11-
<span ng-if="value.value_type === 'wikibase-item'">{{value.value[$ctrl.lang] || value.value.en}}</span>
12-
<span ng-if="value.value_type === 'string'">{{value.value}}</span>
13-
<span ng-if="value.value_type === 'commonsMedia'">{{value.value}}</span>
14-
<span ng-if="value.value_type === 'external-id'">{{value.value}}</span>
15-
<span ng-if="value.value_type === 'globe-coordinate'">{{value.value.latitude}} / {{value.value.longitude}}</span>
16-
<span ng-if="value.value_type === 'quantity'">{{value.value.amount}}</span>
17-
<span ng-show="!$last">/</span>
18-
</span>
19-
</li>
20-
</ul>
218

9+
<div class="monument__place" layout="row" layout-align="start center">
10+
<span><md-icon>place</md-icon></span>
11+
<span>
12+
<span ng-repeat="place in $ctrl.location"><a ng-href="{{place.link}}">{{place.value}}</a><span ng-if="!$last"> · </span></span>
13+
<span class="muted" ng-if="!$ctrl.location">no location</span>
14+
</span>
15+
</div>
16+
17+
<div class="monument__article" layout="column" layout-align="start stretch">
18+
<div class="article__header"
19+
layout="row" layout-align="start center">
20+
<h4 class="monument__subtitle md-headline">Wikipedia</h4>
21+
<span flex></span>
22+
<md-button class="md-primary md-icon-button"
23+
ng-repeat="wiki in $ctrl.shownInterwiki"
24+
ng-disabled="!$ctrl.monument.interwiki[wiki + 'wiki']"
25+
ng-href="{{$ctrl.monument.interwiki[wiki + 'wiki'].link}}">
26+
{{wiki}}
27+
</md-button>
28+
</div>
29+
30+
<div class="article__text"
31+
ng-class="{'article__text--long' : $ctrl.showArticleLong}"
32+
ng-bind-html="$ctrl.article"></div>
33+
<md-button class="md-primary"
34+
ng-if="$ctrl.isArticleLong && !$ctrl.showArticleLong"
35+
ng-click="$ctrl.showArticleLong = true">
36+
Show more
37+
</md-button>
38+
</div>
39+
40+
<div class="monument__details">
41+
<h4 class="monument__subtitle md-headline">Properties</h4>
42+
<div class="monument__details-item"
43+
layout="row" layout-align="center stretch"
44+
ng-repeat="claim in $ctrl.monument.claims">
45+
<span class="muted" flex="35">{{claim.property[$ctrl.lang]}}</span>
46+
<span flex="65"
47+
layout="column" layout-align="start stretch">
48+
<span class="monument__details-value" ng-repeat="value in claim.values">
49+
<span ng-if="value.value_type === 'commonsMedia'">{{value.value}}</span>
50+
<span ng-if="value.value_type === 'external-id'">{{value.value}}</span>
51+
<span ng-if="value.value_type === 'globe-coordinate'">{{value.value.latitude}} / {{value.value.longitude}}</span>
52+
<span ng-if="value.value_type === 'quantity'">{{value.value.amount}}</span>
53+
<span ng-if="value.value_type === 'string'">{{value.value}}</span>
54+
<span ng-if="value.value_type === 'time'">{{value.value.time.substring(1) | date : 'yyyy'}}</span>
55+
<span ng-if="value.value_type === 'url'">{{value.value}}</span>
56+
<a ng-if="value.value_type === 'wikibase-item'"
57+
ng-href="http://www.wikidata.org/wiki/{{value.value_id}}">{{value.value[$ctrl.lang] || value.value.en}}</a>
58+
</span>
59+
</span>
60+
</div>
61+
</div>
2262
<md-button class="md-primary"
2363
aria-label="Show raw data"
24-
ng-click="$ctrl.showRawData = !$ctrl.showRawData">Show raw data</md-button>
64+
ng-click="$ctrl.showRawData = !$ctrl.showRawData">
65+
Show raw data
66+
</md-button>
67+
<md-button ng-href="http://www.wikidata.org/wiki/{{$ctrl.monument.id}}">
68+
Show Wikidata page
69+
</md-button>
2570
<pre ng-show="$ctrl.showRawData">{{$ctrl.monument | json}}</pre>
2671
</div>
72+
73+
<!-- RIGHT -->
2774
<div class="monument__right"
2875
layout="column" layout-align="start stretch">
2976
<div class="monument__image"
3077
layout="column" layout-align="center center"
3178
ng-if="!$ctrl.image">
3279
<md-icon>crop_original</md-icon>
3380
</div>
34-
<a ng-if="$ctrl.image" ng-href="{{$ctrl.image.descriptionurl}}">
35-
<img ng-src="{{$ctrl.image.thumburl}}">
81+
<a ng-repeat="image in $ctrl.image" ng-href="{{image.descriptionurl}}">
82+
<img ng-src="{{image.thumburl}}">
3683
</a>
3784
<div class="monument__images" ng-if="$ctrl.images">
3885
<a ng-repeat="image in $ctrl.images" ng-href="{{image.descriptionurl}}">
@@ -42,7 +89,7 @@ <h4 class="monument__subtitle md-headline muted">{{$ctrl.monument.labels.en || '
4289
<md-button class="md-primary"
4390
ng-if="$ctrl.monument.claims.P373"
4491
ng-href="{{$ctrl.getCommonsLink()}}">
45-
<md-icon>collections</md-icon> more in wikimedia commons
92+
<md-icon>collections</md-icon> {{$ctrl.monument.claims.P373.property[$ctrl.lang]}}
4693
</md-button>
4794
</div>
4895
</div>

‎src/components/main/monument/monument.js‎

Lines changed: 44 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,50 +8,86 @@ const MonumentComponent = {
88
template: template
99
};
1010

11-
function controller($http, $q, $stateParams, CommonsService, wikidata) {
11+
function controller($http, $q, $sce, $stateParams, $timeout, $window, WikiService, wikidata) {
1212
let vm = this;
1313
const id = $stateParams.id;
1414

1515
vm.getCommonsLink = getCommonsLink;
16-
vm.lang = 'pl';
16+
vm.image = [];
17+
vm.lang = $stateParams.lang || 'pl';
1718

18-
wikidata.setLanguages(['pl', 'en']);
19+
wikidata.setLanguages([vm.lang, 'en']);
1920
getWikidata();
2021

2122
// functions
2223

2324
function getCategoryMembers(category) {
24-
CommonsService.getCategoryMembers(category).then(data => {
25-
const promises = data.map(image => CommonsService.getImage(image, { iiurlheight: 75 }));
25+
WikiService.getCategoryMembers(category).then(data => {
26+
const promises = data.map(image => WikiService.getImage(image, { iiurlheight: 75 }));
2627
$q.all(promises).then(data => {
2728
vm.images = data.map(image => image.imageinfo);
2829
});
2930
});
3031
}
3132

33+
function getArticleHeader(name) {
34+
WikiService.getArticleHeader(vm.lang, name).then(data => {
35+
vm.article = $sce.trustAsHtml(data);
36+
$timeout(() => {
37+
let height = document.querySelector('.article__text').offsetHeight;
38+
vm.isArticleLong = height === 320;
39+
});
40+
});
41+
}
42+
3243
function getCommonsLink() {
3344
const name = vm.monument.claims.P373.values[0].value;
3445
return 'https://commons.wikimedia.org/wiki/Category:' + encodeURIComponent(name);
3546
}
3647

48+
function getFullLocation(id) {
49+
wikidata.getRecursive(id, 'P131').then(data => {
50+
vm.location = data;
51+
});
52+
}
53+
3754
function getImage(image) {
38-
CommonsService.getImage(image).then(data => {
39-
vm.image = data.imageinfo;
55+
WikiService.getImage(image).then(data => {
56+
vm.image.push(data.imageinfo);
4057
});
4158
}
4259

60+
function getInterwiki() {
61+
vm.shownInterwiki = ['de', 'en', 'es', 'fr', 'it', 'ja', 'pl', 'pt', 'ru', 'zh'];
62+
vm.monument.interwiki = _.mapValues(vm.monument.interwiki, (wiki) => ({
63+
code: wiki.site.replace('wiki', ''),
64+
title: wiki.title,
65+
link: 'https://' + wiki.site.replace('wiki', '') + '.wikipedia.org/wiki/' + wiki.title
66+
}));
67+
}
68+
4369
function getWikidata() {
4470
wikidata.getById(id).then(data => {
4571
const first = Object.keys(data)[0];
4672
vm.monument = data[first];
4773
const claims = vm.monument.claims;
4874

4975
if (vm.monument.claims.P18) {
50-
getImage(claims.P18.values[0].value);
76+
claims.P18.values.forEach(image => getImage(image.value));
5177
}
5278
if (vm.monument.claims.P373) {
5379
getCategoryMembers(claims.P373.values[0].value);
5480
}
81+
if (vm.monument.claims.P131) {
82+
getFullLocation(claims.P131.values[0].value_id);
83+
}
84+
if(vm.monument.interwiki[vm.lang + 'wiki']) {
85+
getArticleHeader(vm.monument.interwiki[vm.lang + 'wiki'].title);
86+
}
87+
getInterwiki();
88+
89+
let title = vm.monument.labels[vm.lang] || vm.monument.labels.en || vm.monument.id;
90+
$window.document.title = title + ' – Monumental';
5591
});
5692
}
5793
}

‎src/components/main/monument/monument.scss‎

Lines changed: 72 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,15 @@
33

44
mo-monument {
55
.monument {
6-
width: 1200px;
6+
width: 980px;
77
max-width: 100%;
88
}
99

10+
.monument__left {
11+
width: 100%;
12+
margin-right: 50px;
13+
}
14+
1015
.monument__right {
1116
width: 300px;
1217
min-width: 300px;
@@ -37,7 +42,7 @@ mo-monument {
3742
width: 400px;
3843

3944
img {
40-
margin-right: 5px;
45+
margin-right: 1px;
4146
display: inline-block;
4247
}
4348
}
@@ -46,7 +51,72 @@ mo-monument {
4651
margin-top: 0;
4752
margin-bottom: 0;
4853
}
54+
4955
.monument__subtitle {
5056
margin-top: 0;
57+
margin-bottom: 15px;
58+
}
59+
60+
.monument__place {
61+
margin-bottom: 15px;
62+
63+
.material-icons {
64+
margin-right: 5px;
65+
color: $lightGrey;
66+
}
67+
}
68+
69+
.monument__article {
70+
margin-top: 30px;
71+
72+
.article__header {
73+
.md-button.md-primary {
74+
margin-left: 0;
75+
margin-right: 0;
76+
}
77+
}
78+
79+
.article__text {
80+
position:relative;
81+
max-height: 320px;
82+
overflow: hidden;
83+
font-family: 'Merriweather', serif;
84+
font-size: 15px;
85+
text-align: justify;
86+
line-height: 1.8;
87+
88+
p:first-child {
89+
margin-top: 0;
90+
}
91+
92+
&.article__text--long {
93+
max-height: none;
94+
}
95+
96+
&:after {
97+
content: "";
98+
position: absolute; top: 0; bottom: 0; left: -15px; right: -15px;
99+
box-shadow: inset rgb(250,250,250) 0 -20px 10px;
100+
}
101+
}
102+
103+
.md-button {
104+
margin-top: -18px;
105+
}
106+
}
107+
108+
.monument__details {
109+
.monument__details-item {
110+
margin-bottom: 15px;
111+
112+
strong {
113+
margin-right: 20px;
114+
}
115+
}
116+
117+
.monument__details-value {
118+
line-height: 1.5;
119+
}
51120
}
121+
52122
}

‎src/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ function stateConfig($stateProvider, $urlRouterProvider) {
5252
template: `<mo-dashboard></mo-dashboard>`,
5353
resolve: {}
5454
})
55-
.state('main.monument', {
56-
url: '/monument/:id',
55+
.state('main.object', {
56+
url: '/object/:id?lang',
5757
template: `<mo-monument></mo-monument>`,
5858
resolve: {}
5959
});

‎src/index_dev.ejs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head lang="en">
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<title>Zabytki</title>
6+
<title>Monumental</title>
77
</head>
88
<body ng-app="monumental" ng-cloak>
99
<ui-view/>

0 commit comments

Comments
 (0)