From 0435c4793c525d591122cb87a768955f57a6fd10 Mon Sep 17 00:00:00 2001
From: Ansis Brammanis <ansis.brammanis@gmail.com>
Date: Thu, 28 Mar 2013 11:58:56 -0400
Subject: [PATCH] better positioned walkthrough tooltips

---
 css/app.css           | 14 ++-----
 js/id/core/history.js |  3 +-
 js/lib/d3.curtain.js  | 85 ++++++++++++++++++++++---------------------
 3 files changed, 50 insertions(+), 52 deletions(-)

diff --git a/css/app.css b/css/app.css
index d40fd5ea7..0e890da64 100644
--- a/css/app.css
+++ b/css/app.css
@@ -2355,16 +2355,6 @@ div.typeahead a:first-child {
     padding: 20px;
 }
 
-.curtain-tooltip.left .tooltip-arrow,
-.curtain-tooltip.right .tooltip-arrow {
-    top: -5px;
-}
-
-.curtain-tooltip.right .tooltip-inner,
-.curtain-tooltip.left .tooltip-inner {
-    margin-top: -30%;
-}
-
 .curtain-tooltip .tooltip-inner {
     font-size: 15px;
 }
@@ -2385,6 +2375,10 @@ div.typeahead a:first-child {
     margin: 0;
 }
 
+.curtain-tooltip.intro-points-describe {
+    top: 133px !important;
+}
+
 /* Tooltip illustrations */
 
 .intro-points-add .tooltip-inner::before,
diff --git a/js/id/core/history.js b/js/id/core/history.js
index 2f3c30036..498b8bb92 100644
--- a/js/id/core/history.js
+++ b/js/id/core/history.js
@@ -217,9 +217,10 @@ iD.History = function(context) {
         },
 
         save: function() {
-            if (!lock) return;
+            if (!lock) return history;
             context.storage(getKey('lock'), null);
             context.storage(getKey('saved_history'), this.toJSON() || null);
+            return history;
         },
 
         clearSaved: function() {
diff --git a/js/lib/d3.curtain.js b/js/lib/d3.curtain.js
index a4c4a390a..82c2e57b1 100644
--- a/js/lib/d3.curtain.js
+++ b/js/lib/d3.curtain.js
@@ -15,28 +15,16 @@ d3.curtain = function() {
                 'position': 'absolute',
                 'top': 0,
                 'left': 0
-            })
-            .attr({
-                width: window.innerWidth,
-                height: window.innerHeight
             });
 
         darkness = surface.append('path')
             .attr({
                 x: 0,
                 y: 0,
-                width: window.innerWidth,
-                height: window.innerHeight,
                 'class': 'curtain-darkness'
             });
 
-        d3.select(window).on('resize.curtain', function() {
-            surface.attr({
-                width: window.innerWidth,
-                height: window.innerHeight
-            });
-            curtain.cut(darkness.datum());
-        });
+        d3.select(window).on('resize.curtain', resize);
 
         tooltip = selection.append('div')
             .attr('class', 'tooltip')
@@ -45,8 +33,15 @@ d3.curtain = function() {
         tooltip.append('div').attr('class', 'tooltip-arrow');
         tooltip.append('div').attr('class', 'tooltip-inner');
 
-        curtain.cut();
+        resize();
 
+        function resize() {
+            surface.attr({
+                width: window.innerWidth,
+                height: window.innerHeight
+            });
+            curtain.cut(darkness.datum());
+        }
     }
 
     curtain.reveal = function(box, text, tooltipclass, duration) {
@@ -55,37 +50,46 @@ d3.curtain = function() {
 
         curtain.cut(box, duration);
 
-        var pos;
-
-        var w = window.innerWidth,
-            h = window.innerHeight,
-            twidth = 200;
-
-        if (box.top + box.height < Math.min(100, box.width + box.left)) {
-            side = 'bottom';
-            pos = [box.left + box.width / 2 - twidth / 2, box.top + box.height];
-        } else if (box.left + box.width + 300 < window.innerWidth) {
-            side = 'right';
-            pos = [box.left + box.width, box.top + box.height / 2];
-        } else if (box.left > 300) {
-            side = 'left';
-            pos = [box.left - 200, box.top + box.height / 2];
-        } else {
-            side = 'bottom';
-            pos = [box.left, box.top + box.height];
-        }
-
-        pos = [
-            Math.min(Math.max(10, pos[0]), w - twidth - 10),
-            Math.min(Math.max(10, pos[1]), h - 100 - 10)
-        ];
-
-        // pseudo markdown bold text hack
         if (text) {
+            // pseudo markdown bold text hack
             var parts = text.split('**');
             var html = parts[0] ? '<span>' + parts[0] + '</span>' : '';
             if (parts[1]) html += '<span class="bold">' + parts[1] + '</span>';
 
+            var size = tooltip.classed('in', true)
+                .select('.tooltip-inner')
+                    .html(html)
+                    .size();
+
+            var pos;
+
+            var w = window.innerWidth,
+                h = window.innerHeight;
+
+            if (box.top + box.height < Math.min(100, box.width + box.left)) {
+                side = 'bottom';
+                pos = [box.left + box.width / 2 - size[0]/ 2, box.top + box.height];
+
+            } else if (box.left + box.width + 300 < window.innerWidth) {
+                side = 'right';
+                pos = [box.left + box.width, box.top + box.height / 2 - size[1] / 2];
+
+            } else if (box.left > 300) {
+                side = 'left';
+                pos = [box.left - 200, box.top + box.height / 2 - size[1] / 2];
+            } else {
+                side = 'bottom';
+                pos = [box.left, box.top + box.height];
+            }
+
+            pos = [
+                Math.min(Math.max(10, pos[0]), w - size[0] - 10),
+                Math.min(Math.max(10, pos[1]), h - size[1] - 10)
+            ];
+
+
+            if (duration !== 0 || !tooltip.classed(side)) tooltip.call(iD.ui.Toggle(true));
+
             tooltip
                 .style('top', pos[1] + 'px')
                 .style('left', pos[0] + 'px')
@@ -93,7 +97,6 @@ d3.curtain = function() {
                 .select('.tooltip-inner')
                     .html(html);
 
-            if (duration !== 0) tooltip.call(iD.ui.Toggle(true));
         } else {
             tooltip.call(iD.ui.Toggle(false));
         }