Merge pull request #13 from hatnote/dev

version 17.03.02

Author: yarl

package.json

@@ -1,6 +1,6 @@
 {
   "name": "monumental",
-  "version": "17.03.01",
+  "version": "17.03.02",
   "private": true,
   "description": "Monumental app",
   "main": "src/index.js",

src/components/main/dashboard/dashboard.html

@@ -144,7 +144,7 @@ <h4 class="md-title">Showcases</h4>
               </p>
               <p layout="column" layout-align="start stretch">
                 <strong>Games</strong>
-                <a ui-sref="main.game.category({country: '145'})">Wikidata entry – Wikimedia Commons category matching for Great Britain</a>
+                <a ui-sref="main.game.category()">Wikidata entry – Wikimedia Commons category matching</a>
               </p>
             </div>
           </div>

src/components/main/games/category/games-category.html

@@ -1,4 +1,32 @@
-<div class="container" layout="column" layout-align="space-between stretch" flex>
+<div class="container" flex
+      layout="column" layout-align="space-between stretch"
+      ng-if="!$ctrl.country">
+  <md-content layout="column" layout-align="start center" flex>
+    <div class="list" layout="column" layout-align="start stretch">
+      <div class="game__title">
+        <h3 class="md-headline">Matching Wikidata entry with Wikimedia Commons category</h3>
+        <h4 class="md-subhead muted">Monumental Wikidata Games</h4>
+      </div>
+      <div layout="row" layout-align="center center">
+        <md-button class="md-raised" ui-sref="main.game.category({country: '142'})" flex>France</md-button>
+        <md-button class="md-raised" ui-sref="main.game.category({country: '183'})" flex>Germany</md-button>
+        <md-button class="md-raised" ui-sref="main.game.category({country: '145'})" flex>Great Britain</md-button>
+        <md-button class="md-raised" ui-sref="main.game.category({country: '36'})" flex>Poland</md-button>
+        <md-button class="md-raised" ui-sref="main.game.category({country: '30'})" flex>United States</md-button>
+      </div>
+    </div>
+  </md-content>
+</div>
+<div class="container" flex
+      layout="column" layout-align="space-between stretch"
+      ng-if="$ctrl.country">
+  <div class="game__reminder"
+        layout="column" layout-align="start stretch"
+        ng-if="$ctrl.isReminderShown">
+    <span>Please choose the category that is <strong>specifically</strong> for photos of the monument. If the category doesn't exist, you can skip it for now.</span>
+    <md-button ng-if="$ctrl.isReminderShown !== 'check'" ng-click="$ctrl.isReminderShown = 'check'">got it</md-button>
+    <md-button ng-if="$ctrl.isReminderShown === 'check'" ng-click="$ctrl.isReminderShown = false">you sure?</md-button>
+  </div>
   <div layout="column" layout-align="start stretch" flex="none" ng-if="!$ctrl.error">
     <div class="game__subheader" layout="row" layout-align="center center">
       <div class="list" layout="row" layout-align="start center">
@@ -14,20 +42,27 @@
             </md-input-container>
             <span>with image but without Wikimedia Commons category.</span>
           </span>
-          <small class="muted">Click plus next to category sugestion to add it.</small>
+          <p class="game__instructions">The goal of the game is to connect each monument on Wikidata with a category on Wikimedia Commons. For each monument (on the left), please choose the category (on the right) that is <strong>specifically for photos of the monument</strong>. If the category doesn't exist, you can skip it for now.</p>
+          <p class="game__instructions">Click the <md-icon>add_circle_outline</md-icon> button to add the category to a monument. You can click on the name of the category to view it on Commons.</p>
         </div>
         <div flex></div>
-        <md-button ng-if="!$ctrl.loading">
-          <md-tooltip md-direction="bottom">This is cached value. It means it is not updated real-time.</md-tooltip>
-          <span>{{$ctrl.total}} results</span>
-        </md-button>
-        <md-button ng-click="$ctrl.reload()">
-          <md-icon>forward</md-icon> next entries
-        </md-button>
+        <div layout="column" layout-align="center stretch">
+          <md-button ng-if="!$ctrl.loading">
+            <md-tooltip md-direction="bottom">This is cached value. It means it is not updated real-time.</md-tooltip>
+            <span>{{$ctrl.total}} results</span>
+          </md-button>
+        </div>
       </div>
     </div>
   </div>
   <md-content layout="column" layout-align="start center" flex>
+    <div class="list" flex
+          layout="row" layout-align="end center"
+          ng-if="!$ctrl.error && !$ctrl.loading">
+      <md-button flex ng-click="$ctrl.reload()">
+        <md-icon>forward</md-icon> next entries
+      </md-button>
+    </div>
     <div class="list" flex
           layout="column" layout-align="start stretch"
           ng-if="!$ctrl.error && !$ctrl.loading">
@@ -49,26 +84,27 @@
                 <span><span>{{ ::item.place }}</span><span ng-if="item.place && item.admin"> · </span><span>{{ ::item.admin }}</span></span>
               </p>
               <div flex layout="column" layout-align="start stretch">
+                <p class="list__category muted" ng-if="!item.categories.length"><span class="muted">No suggestions</span></p>
                 <p class="list__category"
                     layout="row" layout-align="start center"
                     ng-repeat="category in item.categories"
                     ng-class="{ 'list__category--underlined' : !$last }">
                   <md-button class="md-primary" aria-label="Add category"
-                              ng-click="$ctrl.saveCategory(item, category)"
-                              ng-if="item.success !== category"
+                              ng-click="$ctrl.saveCategory(item, category.name)"
+                              ng-if="item.success !== category.name"
                               ng-disabled="item.loading || item.success">
-                    <md-icon ng-if="item.loading !== category && item.success !== category">add_circle_outline</md-icon>
-                    <md-progress-circular md-mode="indeterminate" md-diameter="24px" ng-if="item.loading === category"></md-progress-circular>
-                    <md-icon ng-if="item.success === category">check_circle</md-icon>
+                    <md-icon ng-if="item.loading !== category.name && item.success !== category.name">add_circle_outline</md-icon>
+                    <md-progress-circular md-mode="indeterminate" md-diameter="24px" ng-if="item.loading === category.name"></md-progress-circular>
+                    <md-icon ng-if="item.success === category.name">check_circle</md-icon>
                   </md-button>
                   <md-button class="md-primary" aria-label="Category added"
                               ng-href="//wikidata.org/w/index.php?title={{ ::item.name.value_id }}&diff=last" target="_blank"
-                              ng-if="item.success === category">
+                              ng-if="item.success === category.name">
                     <md-tooltip md-direction="bottom">Click to see diff or revert edit</md-tooltip>
                     <md-icon>check_circle</md-icon>
                   </md-button>
                   <span>
-                    <a ng-href="//commons.wikimedia.org/wiki/Category:{{ ::category }}" target="_blank">{{ ::category }}</a>
+                    <a ng-href="//commons.wikimedia.org/wiki/Category:{{ ::category.name }}" target="_blank">{{ ::category.name }}</a>
                   </span>
                 </p>
               </div>

src/components/main/games/category/games-category.js

@@ -7,21 +7,28 @@ const GamesCategoryComponent = { controller, template };
 
 function controller($mdToast, $q, $state, $stateParams, $window, WikiService, langService, wikidata) {
   const vm = this;
-  const id = $stateParams.country.includes('Q') ? $stateParams.country : `Q${$stateParams.country}`;
+  const id = getId();
 
   vm.countries = [
     { name: 'France', code: 'Q142' },
     { name: 'Germany', code: 'Q183' },
     { name: 'Great Britain', code: 'Q145' },
     { name: 'Poland', code: 'Q36' },
-    { name: 'the USA', code: 'Q30' },
+    { name: 'the United States', code: 'Q30' },
   ];
-  vm.country = id || 'Q36';
+  vm.country = id;
+  vm.isReminderShown = true;
   vm.loading = true;
 
   vm.reload = () => $state.go($state.current, { country: vm.country }, { reload: true });
   vm.saveCategory = saveCategory;
 
+  const regexes = {
+    Q30: /(20[01][0-9] in.*|Churches in .*|National Register of Historic Places in .*|Photographs of|Photographs taken|in Alabama|in Alaska|in Arizona|in Arkansas|in California|in Colorado|in Connecticut|in Delaware|in Florida|in Georgia (U.S. state)|in Hawaii|in Idaho|in Illinois|in Indiana|in Iowa|in Kansas|in Kentucky|in Louisiana|in Maine|in Maryland|in Massachusetts|in Michigan|in Minnesota|in Mississippi|in Missouri|in Montana|in Nebraska|in Nevada|in New Hampshire|in New Jersey|in New Mexico|in New York|in North Carolina|in North Dakota|in Ohio|in Oklahoma|in Oregon|in Pennsylvania|in Rhode Island|in South Carolina|in South Dakota|in Tennessee|in Texas|in Utah|in Vermont|in Virginia|in Washington, D.C.|in West Virginia|in Wisconsin|in Wyoming|in the United States)/gi,
+    Q36: /(20[01][0-9] in.*|Cultural heritage monuments in.*|in Greater Poland Voivodeship|in Kuyavian-Pomeranian Voivodeship|in Lesser Poland Voivodeship|in Lower Silesian Voivodeship|in Lublin Voivodeship|in Lubusz Voivodeship|in Łódź Voivodeship|in Masovian Voivodeship|in Opole Voivodeship|in Podlaskie Voivodeship|in Pomeranian Voivodeship|in Silesian Voivodeship|in Subcarpathian Voivodeship|in Świętokrzyskie Voivodeship|in Warmian-Masurian Voivodeship|in West Pomeranian Voivodeship|in Poland)/gi,
+    Q145: /(20[01][0-9] in.*|listed [a-z]* in.*|in Bedfordshire|in Berkshire|in Bristol|in Buckinghamshire|in Cambridgeshire|in Cheshire|in Cornwall|in County Durham|in Cumbria|in Derbyshire|in Devon|in Dorset|in East Sussex|in Essex|in Gloucestershire|in Greater Manchester|in Hampshire|in Herefordshire|in Hertfordshire|on the Isle of Wight|in Kent|in Lancashire|in Leicestershire|in Lincolnshire|in London|in Merseyside|in Middlesex|in Norfolk, England|in Northamptonshire|in Northumberland|in Nottinghamshire|in Oxfordshire|in Rutland|in Shropshire|in Somerset|in Staffordshire|in Suffolk|in Surrey|in Tyne and Wear|in Warwickshire|in the West Midlands|in West Sussex|in Wiltshire|in Worcestershire|in North Yorkshire|in South Yorkshire|in the East Riding of Yorkshire|in West Yorkshire|in England|in Scotland|in the United Kingdom)/gi,
+  };
+
   init();
 
   function getCategories(filenames) {
@@ -37,6 +44,15 @@ function controller($mdToast, $q, $state, $stateParams, $window, WikiService, la
       });
   }
 
+  function getCategoryEligibility(name) {
+    const regex = regexes[vm.country];
+    if (!regex) { return true; }
+
+    regex.lastIndex = 0;
+    const matches = regex.exec(name.trim());
+    return !matches;
+  }
+
   function getCountry() {
     wikidata.get({ ids: id })
       .then((response) => {
@@ -45,6 +61,13 @@ function controller($mdToast, $q, $state, $stateParams, $window, WikiService, la
       });
   }
 
+  function getId() {
+    const param = $stateParams.country;
+    if (!param) { return false; }
+    if (param.includes('Q')) { return param; }
+    return `Q${param}`;
+  }
+
   function getList() {
     const langs = langService.getNativeLanguages(id);
     if (!langs) { return $q.reject('Provided ID is not a country'); }
@@ -63,6 +86,8 @@ function controller($mdToast, $q, $state, $stateParams, $window, WikiService, la
   }
 
   function init() {
+    if (!vm.country) { return; }
+
     vm.loading = true;
     vm.list = [];
 
@@ -92,7 +117,12 @@ function controller($mdToast, $q, $state, $stateParams, $window, WikiService, la
       .then(list => getCategories(list.map(entry => entry.image.name)))
       .then((response) => {
         vm.list.forEach((element) => {
-          element.categories = response[element.image.name];
+          element.categories = response[element.image.name]
+            .map(category => ({
+              name: category,
+              isEligible: getCategoryEligibility(category),
+            }))
+            .filter(category => category.isEligible);
         });
         vm.loading = false;
       })

src/components/main/games/games.scss

@@ -1,12 +1,38 @@
 @import '../../../styles/variables';
 @import '../../../styles/responsive';
 
+.game__title {
+  margin-bottom: 20px;
+  .md-headline, .md-subhead {
+    margin: 0;
+  }
+}
+
+.game__reminder {
+  position: fixed;
+  width: 200px;
+  padding: 20px 20px 15px;
+  font-size: 85%;
+  z-index: 1;
+  right: 10px;
+  top: 10px;
+  background: white;
+  border: 1px solid #e5e5e5;
+  border-radius: 2px;
+}
+
 mo-game-category {
   .game__subheader {
     padding: 15px 25px;
+    z-index: 10;
     background: #fafafa;
     border-bottom: 1px solid $softGrey;
 
+    .game__instructions {
+      margin: 5px 0;
+      font-size: 90%;
+    }
+
     md-input-container {
       margin-bottom: 0;
       margin-top: 0;

src/services/lang.service.js

@@ -210,7 +210,8 @@ const LangService = function ($q, localStorageService) {
     if (userLanguages.length) { return angular.copy(userLanguages); }
 
     const ls = localStorageService.get('languages');
-    const def = navigator.language || navigator.userLanguage;
+    let def = navigator.language || navigator.userLanguage;
+    def = def.split('-')[0];
 
     userLanguages = ls || [def];
     if (!userLanguages.includes('en')) { userLanguages.push('en'); }

src/styles/_general.scss

@@ -73,6 +73,14 @@ small {
   text-align: right;
 }
 
+.text-small {
+  font-size: small;
+
+  &p {
+    margin: 5px 0;
+  }
+}
+
 .invisible {
   width: 0;
   height: 0;