Add close button to dialog

language/ar.json

@@ -74,9 +74,11 @@
         },
         {
           "englishLabel": "Try again button text",
-          "label": "Try again button text",
-          "englishDefault": "Try again?",
-          "default": "Try again?"
+          "englishDefault": "Try again?"
+        },
+        {
+          "englishLabel": "Close button label",
+          "englishDefault": "Close"
         }
       ]
     }

language/bs.json

@@ -76,10 +76,14 @@
           "default": "BRAVO!"
         },
         {
-          "englishLabel": "Tekst na dugmetu pokušaj ponovo",
+          "englishLabel": "Try again button text",
           "label": "Tekst na dugmetu pokušaj ponovo",
-          "englishDefault": "Pokušaj ponovo?",
+          "englishDefault": "Try again?",
           "default": "Pokušaj ponovo?"
+        },
+        {
+          "englishLabel": "Close button label",
+          "englishDefault": "Close"
         }
       ]
     }

language/de.json

@@ -77,9 +77,11 @@
         },
         {
           "englishLabel": "Try again button text",
-          "label": "Try again button text",
-          "englishDefault": "Try again?",
-          "default": "Try again?"
+          "englishDefault": "Try again?"
+        },
+        {
+          "englishLabel": "Close button label",
+          "englishDefault": "Close"
         }
       ]
     }

language/fr.json

@@ -77,9 +77,11 @@
         },
         {
           "englishLabel": "Try again button text",
-          "label": "Try again button text",
-          "englishDefault": "Try again?",
-          "default": "Try again?"
+          "englishDefault": "Try again?"
+        },
+        {
+          "englishLabel": "Close button label",
+          "englishDefault": "Close"
         }
       ]
     }

language/it.json

@@ -74,9 +74,11 @@
         },
         {
           "englishLabel": "Try again button text",
-          "label": "Try again button text",
-          "englishDefault": "Try again?",
-          "default": "Try again?"
+          "englishDefault": "Try again?"
+        },
+        {
+          "englishLabel": "Close button label",
+          "englishDefault": "Close"
         }
       ]
     }

language/nb.json

@@ -99,6 +99,12 @@
           "label": "Prøv på nytt-tekst",
           "englishDefault": "Try again?",
           "default": "Prøv på nytt?"
+        },
+        {
+          "englishLabel": "Close button label",
+          "label": "Lukk knapp-merkelapp",
+          "englishDefault": "Close",
+          "default": "Lukk"
         }
       ]
     }

memory-game.css

@@ -248,6 +248,26 @@
   margin-bottom: 0.5em;
   text-align: center;
 }
+.h5p-memory-game .h5p-memory-close {
+  cursor: pointer;
+  position: absolute;
+  top: 0.5em;
+  right: 0.5em;
+  font-size: 2em;
+  width: 1em;
+  height: 1em;
+  text-align: center;
+  color: #888;
+}
+.h5p-memory-game .h5p-memory-close:before {
+  content: "\00D7"
+}
+.h5p-memory-game .h5p-memory-close:hover {
+  color: #666;
+}
+.h5p-memory-game .h5p-memory-close:focus {
+  outline: 2px dashed pink;
+}
 .h5p-memory-reset {
   position: absolute;
   top: 50%;

memory-game.js

@@ -319,7 +319,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
         timer = new MemoryGame.Timer($status.find('.h5p-time-spent')[0]);
         counter = new MemoryGame.Counter($status.find('.h5p-card-turns'));
-        popup = new MemoryGame.Popup($container, cardStyles ? cardStyles.popup : undefined);
+        popup = new MemoryGame.Popup($container, cardStyles ? cardStyles.popup : undefined, parameters.l10n);
 
         $container.click(function () {
           popup.close();

popup.js

@@ -6,17 +6,28 @@
    * @class H5P.MemoryGame.Popup
    * @param {H5P.jQuery} $container
    * @param {string} [styles]
+   * @param {Object.<string, string>} l10n
    */
-  MemoryGame.Popup = function ($container, styles) {
+  MemoryGame.Popup = function ($container, styles, l10n) {
     /** @alias H5P.MemoryGame.Popup# */
     var self = this;
 
     var closed;
 
-    var $popup = $('<div class="h5p-memory-pop"><div class="h5p-memory-top"' + (styles ? styles : '') + '></div><div class="h5p-memory-desc"></div></div>').appendTo($container);
+    var $popup = $('<div class="h5p-memory-pop"><div class="h5p-memory-top"' + (styles ? styles : '') + '></div><div class="h5p-memory-desc"></div><div class="h5p-memory-close" role="button" tabindex="0" title="' + (l10n.closeLabel || 'Close') + '"></div></div>').appendTo($container);
     var $desc = $popup.find('.h5p-memory-desc');
     var $top = $popup.find('.h5p-memory-top');
 
+    // Hook up the close button
+    $popup.find('.h5p-memory-close').on('click', function () {
+      self.close();
+    }).on('keypress', function (event) {
+      if (event.which === 13 || event.which === 32) {
+        self.close();
+        event.preventDefault();
+      }
+    });
+
     /**
      * Show the popup.
      *

semantics.json

@@ -141,6 +141,13 @@
         "name": "tryAgain",
         "type": "text",
         "default": "Try again?"
+      },
+      {
+        "label": "Close button label",
+        "importance": "low",
+        "name": "closeLabel",
+        "type": "text",
+        "default": "Close"
       }
     ]
   }