Merge pull request #14 from hatnote/dev

version 17.04.01

package.json

@@ -1,6 +1,6 @@
 {
   "name": "monumental",
-  "version": "17.03.02",
+  "version": "17.04.01",
   "private": true,
   "description": "Monumental app",
   "main": "src/index.js",
@@ -17,10 +17,12 @@
     "api-check": "^6.0.10",
     "babel-core": "^6.9.1",
     "babel-loader": "^6.2.4",
+    "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-stage-2": "^6.0.0",
     "babel-register": "^6.16.3",
     "babel-runtime": "^6.11.6",
+    "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.23.1",
     "eslint": "^3.15.0",
     "eslint-config-airbnb": "^14.0.0",
@@ -63,8 +65,10 @@
     "angular-material": "^1.0.0",
     "angular-messages": "1.5.9",
     "angular-sanitize": "1.5.9",
+    "angular-swipe": "^0.4.0",
     "angular-ui-router": "*",
     "babel-polyfill": "^6.16.0",
+    "babel-runtime": "^6.23.0",
     "leaflet": "^1.0.2",
     "leaflet.markercluster": "^1.0.0",
     "lodash": "^4.16.2",

src/components/image/image.js

@@ -0,0 +1,71 @@
+import './image.scss';
+import imageTemplate from './image.tpl.html';
+
+const ImageService = ($mdDialog, $timeout) => {
+  const service = {
+    openImage,
+  };
+
+  return service;
+
+  //
+
+  function openImage(params) {
+    return $mdDialog.show({
+      parent: angular.element(document.body),
+      targetEvent: params.event,
+      clickOutsideToClose: true,
+      template: imageTemplate,
+      controller: ($scope) => {
+        const list = params.list;
+        const vm = $scope;
+
+        vm.close = () => $mdDialog.hide();
+        vm.image = params.image;
+        vm.keyDown = keyDown;
+        vm.nextImage = nextImage;
+        vm.prevImage = prevImage;
+
+        init();
+        $timeout(() => { vm.loaded = true; }, 150);
+
+        function init() {
+          vm.author = vm.image.extmetadata.Artist ? vm.image.extmetadata.Artist.value : '';
+          vm.date = vm.image.extmetadata.DateTime ? new Date(vm.image.extmetadata.DateTime.value) : '';
+          vm.description = vm.image.extmetadata.ImageDescription ? vm.image.extmetadata.ImageDescription.value : '';
+          vm.license = vm.image.extmetadata.LicenseShortName ? vm.image.extmetadata.LicenseShortName.value : '';
+        }
+
+        function keyDown(key) {
+          if (key.keyCode === 39) { nextImage(); }
+          if (key.keyCode === 37) { prevImage(); }
+        }
+
+        function nextImage() {
+          let currentIndex = list.indexOf(vm.image);
+          if (currentIndex > -1) {
+            currentIndex = currentIndex + 1 === list.length ? 0 : currentIndex + 1;
+            vm.image = list[currentIndex];
+            init();
+          }
+        }
+
+        function prevImage() {
+          let currentIndex = list.indexOf(vm.image);
+          if (currentIndex > -1) {
+            currentIndex = currentIndex ? currentIndex - 1 : list.length - 1;
+            vm.image = list[currentIndex];
+            init();
+          } 
+        }
+      },
+    });
+  }
+};
+
+export default () => {
+  angular
+    .module('monumental')
+    .factory('imageService', ImageService)
+    .filter('htmlToPlaintext', () => text => angular.element(`<div>${text}</div>`).text());
+};

src/components/image/image.scss

@@ -0,0 +1,81 @@
+@import '../../styles/variables';
+@import '../../styles/responsive';
+
+.dialog__image {
+  min-width: 80%;
+  border-radius: 0 !important;
+
+  @include x-small { 
+    width: 100vw; min-width: 100vw; max-width: 100vw;
+    height: 100%; min-height: 100%; max-height: 100%;
+  }
+
+  md-dialog-content {
+    overflow: hidden;
+
+    @include x-small { overflow: visible; }
+  }
+
+  .dialog__close {
+    position: absolute;
+    width: 70px;
+    height: 70px;
+    top: 0;
+    right: 0;
+    margin: 0;
+    padding: 15px;
+    opacity: .75;
+  }
+
+  .dialog__image-container {
+    position: relative;
+    background: black;
+    min-height: 80vh;
+    text-align: center;
+
+    @include x-small { min-height: 100vh; }
+
+    img {
+      max-width: 100%;
+      max-height: 100%;
+      width: auto;
+      height: auto;
+    }
+
+    .md-button md-icon.material-icons {
+      width: 40px;
+      height: 40px;
+      color: white;
+      font-size: 40px;
+    }
+
+    .md-button[disabled] md-icon.material-icons {
+      opacity: .5;
+    }
+  }
+
+  .dialog__image-description {
+    background: white;
+    width: 250px;
+    padding: 20px;
+    overflow: scroll;
+
+    @include x-small { 
+      width: auto;
+      overflow: visible;   
+    }
+
+    .md-title {
+      margin-top: 0;
+    }
+
+    .md-2-line {
+      padding: 0;
+
+      .material-icons {
+        margin-right: 20px;
+        margin-left: 5px;
+      }
+    }
+  }
+}

src/components/image/image.tpl.html

@@ -0,0 +1,51 @@
+<md-dialog class="dialog__image" ng-keydown="keyDown($event)">
+  <form ng-cloak>
+    <md-dialog-content layout="row" layout-align="start stretch"
+                        layout-xs="column" layout-align-xs="start stretch">
+      <div class="dialog__image-container" flex flex-xs="none"
+            layout="row" layout-align="center center"
+            ng-swipe-right="nextImage()"
+            ng-swipe-left="prevImage()">
+        <md-button class="md-icon-button dialog__close" ng-click="close()">
+          <md-icon>close</md-icon>
+        </md-button>
+        <img load-src="{{ image.thumburlbig }}">
+      </div>
+      <div class="dialog__image-description"
+         layout="column" layout-align="start stretch">
+        <h2 class="md-title">{{ (description || image.canonicaltitle) | htmlToPlaintext }}</h2>
+        <div>{{ author | htmlToPlaintext }} / {{ license }}</div>
+        <md-list flex>
+          <md-list-item class="md-2-line">
+            <md-icon>
+              cloud_upload
+              <md-tooltip>File upload date</md-tooltip>
+            </md-icon>
+            <div class="md-list-item-text">
+              <h3>{{ date | date }}</h3>
+              <p>{{ date | date:'EEEE' }}, {{ date | date:'H:mm' }}</p>
+            </div>
+          </md-list-item>
+          <md-list-item class="md-2-line">
+            <md-icon>
+              image
+              <md-tooltip>File resolution</md-tooltip>
+            </md-icon>
+            <div class="md-list-item-text">
+              <h3>{{ (image.width * image.height) / 1000000 | number:2 }} Mpix</h3>
+              <p>{{ image.width }} × {{ image.height }}</p>
+            </div>
+          </md-list-item>
+          <md-divider></md-divider>
+          <md-list-item class="md-2-line">
+            <md-button class="md-primary" flex
+                        ng-href="{{ image.descriptionurl }}" target="_blank">
+              Wikimedia Commons
+            </md-button>
+          </md-list-item>
+        </md-list>
+        <div flex></div>
+      </div>
+    </md-dialog-content>
+  </form>
+</md-dialog>

src/components/index.js

@@ -9,6 +9,7 @@ import nativeName from './main/monument/components/native-name';
 import url from './main/monument/components/url';
 
 import toolbar from './toolbar/toolbar';
+import image from './image/image';
 
 import category from './main/games/category/games-category';
 
@@ -24,6 +25,7 @@ export default () => {
   url();
 
   toolbar();
+  image();
 
   category();
 };