MAPG-123 [WIP] use MutationObserver

public/static/css/mapguesser.css

@@ -17,11 +17,6 @@ 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,23 +336,34 @@
         },
 
         rewriteGoogleLink: function () {
-            if (!Game.googleLink) {
-                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 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;
                 }
             }
 
-            setTimeout(function () {
-                if (Game.googleLink) {
-                    Game.googleLink.title = 'Google Maps';
-                    Game.googleLink.href = 'https://maps.google.com/maps';
+            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';
+                    }
                 }
-            }, 1);
+            });
+
+            observer.observe(Game.googleLink, { attributes: true });
         }
     };
 
@@ -425,10 +436,6 @@
         Game.rewriteGoogleLink();
     });
 
-    Game.panorama.addListener('pov_changed', function () {
-        Game.rewriteGoogleLink();
-    });
-
     Game.initialize();
 
     document.getElementById('showGuessButton').onclick = function () {

views/maps.php

@@ -63,63 +63,6 @@ $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() {