fixes #599

iliakan · iliakan · commit 7e0cf5bb58e2 · 2015-05-23T00:17:05.000+03:00
diff --git a/client/head/modal.js b/client/head/modal.js
@@ -69,6 +69,7 @@ Modal.prototype.remove = function() {
   document.body.classList.remove('paranja-open');
   document.body.removeChild(this.elem);
   document.removeEventListener("keydown", this.onDocumentKeyDown);
+  this.elem.dispatchEvent(new CustomEvent("modal-remove"));
 };
 
 module.exports = Modal;
diff --git a/handlers/tutorial/client/index.js b/handlers/tutorial/client/index.js
@@ -13,8 +13,9 @@ function init() {
   initSidebarHighlight();
 
   delegate(document, '[data-action="tutorial-map"]', 'click', function(event) {
-    new TutorialMapModal();
+    if (event.which != 1) return; // only left-click, FF needs this
     event.preventDefault();
+    showTutorialMapModal();
   });
 
   prism.init();
@@ -28,10 +29,23 @@ function init() {
   var tutorialMapElem = document.querySelector('.tutorial-map');
   if (tutorialMapElem) {
     new TutorialMap(tutorialMapElem);
+  } else if (/[&?]map\b/.test(location.href)) {
+    showTutorialMapModal();
   }
 
 }
 
+function showTutorialMapModal() {
+
+  if (!/[&?]map\b/.test(location.href)) {
+    window.history.replaceState(null, null, ~location.href.indexOf('?') ? (location.href + '&map') : (location.href + '?map'));
+  }
+  var modal = new TutorialMapModal();
+  modal.elem.addEventListener('tutorial-map-remove', function() {
+    window.history.replaceState(null, null, location.href.replace(/[&?]map\b/, ''));
+  });
+
+}
 
 function initSidebarHighlight() {
 
diff --git a/handlers/tutorial/client/tutorialMapModal.js b/handlers/tutorial/client/tutorialMapModal.js
@@ -15,6 +15,9 @@ var trackSticky = require('client/trackSticky');
  *       - after registration for "confirm email" link
  */
 function TutorialMapModal() {
+  this.elem = document.createElement('div');
+  document.body.appendChild(this.elem);
+
   var modal = new Modal({hasClose: false});
   var spinner = new Spinner();
   modal.setContent(spinner.elem);
@@ -28,11 +31,13 @@ function TutorialMapModal() {
 
   request.addEventListener('success', (event) => {
     modal.remove();
-    document.body.insertAdjacentHTML('beforeEnd', '<div class="tutorial-map-overlay"></div>');
-    this.elem = document.body.lastChild;
-    this.elem.innerHTML = event.result +  '<button class="close-button tutorial-map-overlay__close"></button>';
 
-    this.elem.addEventListener('click', (e) => {
+    this.elem.innerHTML = '<div class="tutorial-map-overlay"></div>';
+    this.mapElem = this.elem.firstChild;
+
+    this.mapElem.innerHTML = event.result +  '<button class="close-button tutorial-map-overlay__close"></button>';
+
+    this.mapElem.addEventListener('click', (e) => {
       if (e.target.classList.contains('tutorial-map-overlay__close')) {
         this.remove();
       }
@@ -42,9 +47,9 @@ function TutorialMapModal() {
 
     document.body.classList.add('tutorial-map_on');
 
-    this.elem.addEventListener('scroll', trackSticky);
+    this.mapElem.addEventListener('scroll', trackSticky);
 
-    new TutorialMap(this.elem.firstElementChild);
+    new TutorialMap(this.mapElem.firstElementChild);
   });
 
   request.addEventListener('fail', () => modal.remove());
@@ -54,6 +59,7 @@ function TutorialMapModal() {
 delegate.delegateMixin(TutorialMapModal.prototype);
 
 TutorialMapModal.prototype.remove = function() {
+  this.elem.dispatchEvent(new CustomEvent('tutorial-map-remove'));
   this.elem.remove();
   document.body.classList.remove('tutorial-map_on');
   document.removeEventListener("keydown", this.onDocumentKeyDown);
