MAPG-147 [WIP]

MAPG-145 add CSS ::selection attribute

public/static/css/mapguesser.css

@@ -17,6 +17,11 @@ button::-moz-focus-inner, input::-moz-focus-inner {
     border: 0;
 }
 
+::selection {
+    background-color: #28a745;
+    color: #ffffff;
+}
+
 p, h1, h2, input, textarea, select, button, a {
     font-family: 'Roboto', sans-serif;
 }

public/static/js/game.js

@@ -336,34 +336,23 @@
         },
 
         rewriteGoogleLink: function () {
-            if (Game.googleLink) {
-                return;
-            }
-
-            var anchors = document.getElementById('panorama').getElementsByTagName('a');
-            for (var i = 0; i < anchors.length; i++) {
-                var a = anchors[i];
-                if (a.href.indexOf('maps.google.com/maps') !== -1) {
-                    Game.googleLink = a;
-                    break;
-                }
-            }
-
             if (!Game.googleLink) {
-                return;
-            }
-
-            var observer = new MutationObserver(function(mutationsList, observer) {
-                for (let mutation of mutationsList) {
-                    if (mutation.attributeName === 'href' && Game.googleLink.href !== 'https://maps.google.com/maps') {
-                        console.log(Game.googleLink.href + ' is changed.')
-                        Game.googleLink.title = 'Google Maps';
-                        Game.googleLink.href = 'https://maps.google.com/maps';
+                var anchors = document.getElementById('panorama').getElementsByTagName('a');
+                for (var i = 0; i < anchors.length; i++) {
+                    var a = anchors[i];
+                    if (a.href.indexOf('maps.google.com/maps') !== -1) {
+                        Game.googleLink = a;
+                        break;
                     }
                 }
-            });
+            }
 
-            observer.observe(Game.googleLink, { attributes: true });
+            setTimeout(function () {
+                if (Game.googleLink) {
+                    Game.googleLink.title = 'Google Maps';
+                    Game.googleLink.href = 'https://maps.google.com/maps';
+                }
+            }, 1);
         }
     };
 
@@ -436,6 +425,10 @@
         Game.rewriteGoogleLink();
     });
 
+    Game.panorama.addListener('pov_changed', function () {
+        Game.rewriteGoogleLink();
+    });
+
     Game.initialize();
 
     document.getElementById('showGuessButton').onclick = function () {

views/maps.php

@@ -63,6 +63,63 @@ $cssFiles = [
         <?php endif; ?>
     </div>
 </div>
+
+<style>
+div.popup {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    width: 250px;
+}
+div.popup>div.content, div.popup>div.tipContainer>div.tip {
+    background: white;
+    color: #333;
+    border: solid #555 1px;
+}
+
+div.popup>div.content {
+    margin-top: 20px;
+    padding: 20px 10px 8px 10px;
+    border-radius: 3px;
+}
+
+div.popup>div.tipContainer {
+    width: 40px;
+    height: 20px;
+    position: absolute;
+    top: 1px;
+    left: 50%;
+    margin-left: -20px;
+    overflow: hidden;
+}
+
+div.popup>div.tipContainer>div.tip {
+    width: 20px;
+    height: 20px;
+    padding: 1px;
+    margin: 10px auto 0;
+    transform: rotate(45deg);
+}
+
+div.popup>a.closeButton {
+    position: absolute;
+    top: 20px;
+    right: 0;
+    padding: 2px 6px;
+    color: #555;
+}
+</style>
+
+<div class="popup">
+    <div class="tipContainer">
+        <div class="tip"></div>
+    </div>
+    <div class="content">
+        <p>A pretty CSS3 popup.<br>Easily customizable.</p>
+    </div>
+    <a class="closeButton" href="#close">×</a>
+</div>
+
 <?php if ($isAdmin): ?>
 <script>
     (function() {