Skip to content

Commit 503e9dc

Browse files
yarlyarl
authored
Merge pull request #14 from hatnote/dev
version 17.04.01
2 parents 4a65e20 + ea1904e commit 503e9dc

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+1882
-461
lines changed

‎package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "monumental",
3-
"version": "17.03.02",
3+
"version": "17.04.01",
44
"private": true,
55
"description": "Monumental app",
66
"main": "src/index.js",
@@ -17,10 +17,12 @@
1717
"api-check": "^6.0.10",
1818
"babel-core": "^6.9.1",
1919
"babel-loader": "^6.2.4",
20+
"babel-plugin-transform-runtime": "^6.23.0",
2021
"babel-preset-es2015": "^6.9.0",
2122
"babel-preset-stage-2": "^6.0.0",
2223
"babel-register": "^6.16.3",
2324
"babel-runtime": "^6.11.6",
25+
"copy-webpack-plugin": "^4.0.1",
2426
"css-loader": "^0.23.1",
2527
"eslint": "^3.15.0",
2628
"eslint-config-airbnb": "^14.0.0",
@@ -63,8 +65,10 @@
6365
"angular-material": "^1.0.0",
6466
"angular-messages": "1.5.9",
6567
"angular-sanitize": "1.5.9",
68+
"angular-swipe": "^0.4.0",
6669
"angular-ui-router": "*",
6770
"babel-polyfill": "^6.16.0",
71+
"babel-runtime": "^6.23.0",
6872
"leaflet": "^1.0.2",
6973
"leaflet.markercluster": "^1.0.0",
7074
"lodash": "^4.16.2",

‎src/app-icons/drawable-hdpi/monumental.png

6.56 KB
Loading

‎src/app-icons/drawable-mdpi/monumental.png

3.86 KB
Loading

‎src/app-icons/drawable-xhdpi/monumental.png

9.51 KB
Loading

‎src/app-icons/drawable-xxhdpi/monumental.png

15.8 KB
Loading

‎src/app-icons/drawable-xxxhdpi/monumental.png

23.1 KB
Loading

‎src/components/image/image.js

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import './image.scss';
2+
import imageTemplate from './image.tpl.html';
3+
4+
const ImageService = ($mdDialog, $timeout) => {
5+
const service = {
6+
openImage,
7+
};
8+
9+
return service;
10+
11+
//
12+
13+
function openImage(params) {
14+
return $mdDialog.show({
15+
parent: angular.element(document.body),
16+
targetEvent: params.event,
17+
clickOutsideToClose: true,
18+
template: imageTemplate,
19+
controller: ($scope) => {
20+
const list = params.list;
21+
const vm = $scope;
22+
23+
vm.close = () => $mdDialog.hide();
24+
vm.image = params.image;
25+
vm.keyDown = keyDown;
26+
vm.nextImage = nextImage;
27+
vm.prevImage = prevImage;
28+
29+
init();
30+
$timeout(() => { vm.loaded = true; }, 150);
31+
32+
function init() {
33+
vm.author = vm.image.extmetadata.Artist ? vm.image.extmetadata.Artist.value : '';
34+
vm.date = vm.image.extmetadata.DateTime ? new Date(vm.image.extmetadata.DateTime.value) : '';
35+
vm.description = vm.image.extmetadata.ImageDescription ? vm.image.extmetadata.ImageDescription.value : '';
36+
vm.license = vm.image.extmetadata.LicenseShortName ? vm.image.extmetadata.LicenseShortName.value : '';
37+
}
38+
39+
function keyDown(key) {
40+
if (key.keyCode === 39) { nextImage(); }
41+
if (key.keyCode === 37) { prevImage(); }
42+
}
43+
44+
function nextImage() {
45+
let currentIndex = list.indexOf(vm.image);
46+
if (currentIndex > -1) {
47+
currentIndex = currentIndex + 1 === list.length ? 0 : currentIndex + 1;
48+
vm.image = list[currentIndex];
49+
init();
50+
}
51+
}
52+
53+
function prevImage() {
54+
let currentIndex = list.indexOf(vm.image);
55+
if (currentIndex > -1) {
56+
currentIndex = currentIndex ? currentIndex - 1 : list.length - 1;
57+
vm.image = list[currentIndex];
58+
init();
59+
}
60+
}
61+
},
62+
});
63+
}
64+
};
65+
66+
export default () => {
67+
angular
68+
.module('monumental')
69+
.factory('imageService', ImageService)
70+
.filter('htmlToPlaintext', () => text => angular.element(`<div>${text}</div>`).text());
71+
};

‎src/components/image/image.scss

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
@import '../../styles/variables';
2+
@import '../../styles/responsive';
3+
4+
.dialog__image {
5+
min-width: 80%;
6+
border-radius: 0 !important;
7+
8+
@include x-small {
9+
width: 100vw; min-width: 100vw; max-width: 100vw;
10+
height: 100%; min-height: 100%; max-height: 100%;
11+
}
12+
13+
md-dialog-content {
14+
overflow: hidden;
15+
16+
@include x-small { overflow: visible; }
17+
}
18+
19+
.dialog__close {
20+
position: absolute;
21+
width: 70px;
22+
height: 70px;
23+
top: 0;
24+
right: 0;
25+
margin: 0;
26+
padding: 15px;
27+
opacity: .75;
28+
}
29+
30+
.dialog__image-container {
31+
position: relative;
32+
background: black;
33+
min-height: 80vh;
34+
text-align: center;
35+
36+
@include x-small { min-height: 100vh; }
37+
38+
img {
39+
max-width: 100%;
40+
max-height: 100%;
41+
width: auto;
42+
height: auto;
43+
}
44+
45+
.md-button md-icon.material-icons {
46+
width: 40px;
47+
height: 40px;
48+
color: white;
49+
font-size: 40px;
50+
}
51+
52+
.md-button[disabled] md-icon.material-icons {
53+
opacity: .5;
54+
}
55+
}
56+
57+
.dialog__image-description {
58+
background: white;
59+
width: 250px;
60+
padding: 20px;
61+
overflow: scroll;
62+
63+
@include x-small {
64+
width: auto;
65+
overflow: visible;
66+
}
67+
68+
.md-title {
69+
margin-top: 0;
70+
}
71+
72+
.md-2-line {
73+
padding: 0;
74+
75+
.material-icons {
76+
margin-right: 20px;
77+
margin-left: 5px;
78+
}
79+
}
80+
}
81+
}

‎src/components/image/image.tpl.html

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<md-dialog class="dialog__image" ng-keydown="keyDown($event)">
2+
<form ng-cloak>
3+
<md-dialog-content layout="row" layout-align="start stretch"
4+
layout-xs="column" layout-align-xs="start stretch">
5+
<div class="dialog__image-container" flex flex-xs="none"
6+
layout="row" layout-align="center center"
7+
ng-swipe-right="nextImage()"
8+
ng-swipe-left="prevImage()">
9+
<md-button class="md-icon-button dialog__close" ng-click="close()">
10+
<md-icon>close</md-icon>
11+
</md-button>
12+
<img load-src="{{ image.thumburlbig }}">
13+
</div>
14+
<div class="dialog__image-description"
15+
layout="column" layout-align="start stretch">
16+
<h2 class="md-title">{{ (description || image.canonicaltitle) | htmlToPlaintext }}</h2>
17+
<div>{{ author | htmlToPlaintext }} / {{ license }}</div>
18+
<md-list flex>
19+
<md-list-item class="md-2-line">
20+
<md-icon>
21+
cloud_upload
22+
<md-tooltip>File upload date</md-tooltip>
23+
</md-icon>
24+
<div class="md-list-item-text">
25+
<h3>{{ date | date }}</h3>
26+
<p>{{ date | date:'EEEE' }}, {{ date | date:'H:mm' }}</p>
27+
</div>
28+
</md-list-item>
29+
<md-list-item class="md-2-line">
30+
<md-icon>
31+
image
32+
<md-tooltip>File resolution</md-tooltip>
33+
</md-icon>
34+
<div class="md-list-item-text">
35+
<h3>{{ (image.width * image.height) / 1000000 | number:2 }} Mpix</h3>
36+
<p>{{ image.width }} × {{ image.height }}</p>
37+
</div>
38+
</md-list-item>
39+
<md-divider></md-divider>
40+
<md-list-item class="md-2-line">
41+
<md-button class="md-primary" flex
42+
ng-href="{{ image.descriptionurl }}" target="_blank">
43+
Wikimedia Commons
44+
</md-button>
45+
</md-list-item>
46+
</md-list>
47+
<div flex></div>
48+
</div>
49+
</md-dialog-content>
50+
</form>
51+
</md-dialog>

‎src/components/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import nativeName from './main/monument/components/native-name';
99
import url from './main/monument/components/url';
1010

1111
import toolbar from './toolbar/toolbar';
12+
import image from './image/image';
1213

1314
import category from './main/games/category/games-category';
1415

@@ -24,6 +25,7 @@ export default () => {
2425
url();
2526

2627
toolbar();
28+
image();
2729

2830
category();
2931
};

0 commit comments

Comments
 (0)