Permalink
Browse files

Improving the movetip control to the point of releasing and documenting.

This allows it to handle repositioning after initial placement,
as well as clicking the current feature and sticking the tooltip.
  • Loading branch information...
1 parent 43d8313 commit 0a62b1e913dc0c2ed09ed1025ff2ca58a1ef9bc0 @tmcw tmcw committed Mar 26, 2012
Showing with 246 additions and 216 deletions.
  1. +6 −14 control/lib/interaction.js
  2. +11 −3 control/lib/movetip.js
  3. +21 −16 control/lib/tooltip.js
  4. +39 −34 dist/wax.g.js
  5. +2 −2 dist/wax.g.min.js
  6. +39 −34 dist/wax.leaf.js
  7. +2 −2 dist/wax.leaf.min.js
  8. +39 −34 dist/wax.mm.js
  9. +2 −2 dist/wax.mm.min.js
  10. +39 −34 dist/wax.ol.js
  11. +2 −2 dist/wax.ol.min.js
  12. +39 −34 dist/wax.p.js
  13. +2 −2 dist/wax.p.min.js
  14. +3 −3 theme/controls.css
View
@@ -6,7 +6,6 @@ wax.interaction = function() {
_downLock = false,
_clickTimeout = false,
// Active feature
- _af,
// Down event
_d,
// Touch tolerance
@@ -65,20 +64,13 @@ wax.interaction = function() {
if (err || !g) return;
feature = g.tileFeature(pos.x, pos.y, tile);
if (feature) {
- if (feature && _af !== feature) {
- _af = feature;
- bean.fire(interaction, 'on', {
- parent: parent(),
- data: feature,
- formatter: gm.formatter().format,
- e: e
- });
- } else if (!feature) {
- _af = null;
- bean.fire(interaction, 'off');
- }
+ bean.fire(interaction, 'on', {
+ parent: parent(),
+ data: feature,
+ formatter: gm.formatter().format,
+ e: e
+ });
} else {
- _af = null;
bean.fire(interaction, 'off');
}
});
View
@@ -49,26 +49,34 @@ wax.movetip = function() {
function on(o) {
var content;
- hide();
- if ((o.e.type === 'mousemove' || !o.e.type) && !popped) {
+ if (popped) return;
+ if ((o.e.type === 'mousemove' || !o.e.type)) {
content = o.formatter({ format: 'teaser' }, o.data);
if (!content) return;
+ hide();
parent.style.cursor = 'pointer';
tooltip = parent.appendChild(getTooltip(content));
} else {
- content = o.formatter({ format: 'full' }, o.data);
+ // content = o.formatter({ format: 'full' }, o.data);
+ content = o.formatter({ format: 'teaser' }, o.data);
if (!content) return;
+ hide();
var tt = parent.appendChild(getTooltip(content));
tt.className += ' wax-popup';
var close = tt.appendChild(document.createElement('a'));
close.href = '#close';
close.className = 'close';
close.innerHTML = 'Close';
+
popped = true;
tooltip = tt;
+ _tooltipOffset = wax.u.offset(tooltip);
+ _contextOffset = wax.u.offset(parent);
+ moveTooltip(o.e);
+
bean.add(close, 'click touchend', function closeClick(e) {
e.stop();
hide();
View
@@ -6,8 +6,16 @@ wax.tooltip = function() {
animate = false,
t = {},
tooltips = [],
+ _currentContent,
+ transitionEvent,
parent;
+ if (document.body.style['-webkit-transition'] !== undefined) {
+ transitionEvent = 'webkitTransitionEnd';
+ } else if (document.body.style.MozTransition !== undefined) {
+ transitionEvent = 'transitionend';
+ }
+
// Get the active tooltip for a layer or create a new one if no tooltip exists.
// Hide any tooltips on layers underneath this one.
function getTooltip(feature) {
@@ -17,26 +25,19 @@ wax.tooltip = function() {
return tooltip;
}
+
+ function remove() {
+ if (this.parentNode) this.parentNode.removeChild(this);
+ }
+
// Hide a given tooltip.
function hide() {
- var event;
-
- function remove() {
- if (this.parentNode) this.parentNode.removeChild(this);
- }
-
- if (document.body.style['-webkit-transition'] !== undefined) {
- event = 'webkitTransitionEnd';
- } else if (document.body.style.MozTransition !== undefined) {
- event = 'transitionend';
- }
-
var _ct;
while (_ct = tooltips.pop()) {
- if (animate && event) {
+ if (animate && transitionEvent) {
// This code assumes that transform-supporting browsers
// also support proper events. IE9 does both.
- bean.add(_ct, event, remove);
+ bean.add(_ct, transitionEvent, remove);
_ct.className += ' wax-fade';
} else {
if (_ct.parentNode) _ct.parentNode.removeChild(_ct);
@@ -46,15 +47,18 @@ wax.tooltip = function() {
function on(o) {
var content;
- hide();
if ((o.e.type === 'mousemove' || !o.e.type) && !popped) {
content = o.formatter({ format: 'teaser' }, o.data);
- if (!content) return;
+ if (!content || content == _currentContent) return;
+ hide();
parent.style.cursor = 'pointer';
tooltips.push(parent.appendChild(getTooltip(content)));
+ _currentContent = content;
} else {
content = o.formatter({ format: 'full' }, o.data);
if (!content) return;
+ hide();
+ parent.style.cursor = 'pointer';
var tt = parent.appendChild(getTooltip(content));
tt.className += ' wax-popup';
@@ -76,6 +80,7 @@ wax.tooltip = function() {
function off() {
parent.style.cursor = 'default';
+ _currentContent = null;
if (!popped) hide();
}
View
@@ -1,4 +1,4 @@
-/* wax - 6.0.0-beta1 - 1.0.4-523-g3e24313 */
+/* wax - 6.0.0-beta1 - 1.0.4-524-g43d8313 */
!function (name, context, definition) {
@@ -2246,7 +2246,6 @@ wax.interaction = function() {
_downLock = false,
_clickTimeout = false,
// Active feature
- _af,
// Down event
_d,
// Touch tolerance
@@ -2305,20 +2304,13 @@ wax.interaction = function() {
if (err || !g) return;
feature = g.tileFeature(pos.x, pos.y, tile);
if (feature) {
- if (feature && _af !== feature) {
- _af = feature;
- bean.fire(interaction, 'on', {
- parent: parent(),
- data: feature,
- formatter: gm.formatter().format,
- e: e
- });
- } else if (!feature) {
- _af = null;
- bean.fire(interaction, 'off');
- }
+ bean.fire(interaction, 'on', {
+ parent: parent(),
+ data: feature,
+ formatter: gm.formatter().format,
+ e: e
+ });
} else {
- _af = null;
bean.fire(interaction, 'off');
}
});
@@ -2573,26 +2565,34 @@ wax.movetip = function() {
function on(o) {
var content;
- hide();
- if ((o.e.type === 'mousemove' || !o.e.type) && !popped) {
+ if (popped) return;
+ if ((o.e.type === 'mousemove' || !o.e.type)) {
content = o.formatter({ format: 'teaser' }, o.data);
if (!content) return;
+ hide();
parent.style.cursor = 'pointer';
tooltip = parent.appendChild(getTooltip(content));
} else {
- content = o.formatter({ format: 'full' }, o.data);
+ // content = o.formatter({ format: 'full' }, o.data);
+ content = o.formatter({ format: 'teaser' }, o.data);
if (!content) return;
+ hide();
var tt = parent.appendChild(getTooltip(content));
tt.className += ' wax-popup';
var close = tt.appendChild(document.createElement('a'));
close.href = '#close';
close.className = 'close';
close.innerHTML = 'Close';
+
popped = true;
tooltip = tt;
+ _tooltipOffset = wax.u.offset(tooltip);
+ _contextOffset = wax.u.offset(parent);
+ moveTooltip(o.e);
+
bean.add(close, 'click touchend', function closeClick(e) {
e.stop();
hide();
@@ -2731,8 +2731,16 @@ wax.tooltip = function() {
animate = false,
t = {},
tooltips = [],
+ _currentContent,
+ transitionEvent,
parent;
+ if (document.body.style['-webkit-transition'] !== undefined) {
+ transitionEvent = 'webkitTransitionEnd';
+ } else if (document.body.style.MozTransition !== undefined) {
+ transitionEvent = 'transitionend';
+ }
+
// Get the active tooltip for a layer or create a new one if no tooltip exists.
// Hide any tooltips on layers underneath this one.
function getTooltip(feature) {
@@ -2742,26 +2750,19 @@ wax.tooltip = function() {
return tooltip;
}
+
+ function remove() {
+ if (this.parentNode) this.parentNode.removeChild(this);
+ }
+
// Hide a given tooltip.
function hide() {
- var event;
-
- function remove() {
- if (this.parentNode) this.parentNode.removeChild(this);
- }
-
- if (document.body.style['-webkit-transition'] !== undefined) {
- event = 'webkitTransitionEnd';
- } else if (document.body.style.MozTransition !== undefined) {
- event = 'transitionend';
- }
-
var _ct;
while (_ct = tooltips.pop()) {
- if (animate && event) {
+ if (animate && transitionEvent) {
// This code assumes that transform-supporting browsers
// also support proper events. IE9 does both.
- bean.add(_ct, event, remove);
+ bean.add(_ct, transitionEvent, remove);
_ct.className += ' wax-fade';
} else {
if (_ct.parentNode) _ct.parentNode.removeChild(_ct);
@@ -2771,15 +2772,18 @@ wax.tooltip = function() {
function on(o) {
var content;
- hide();
if ((o.e.type === 'mousemove' || !o.e.type) && !popped) {
content = o.formatter({ format: 'teaser' }, o.data);
- if (!content) return;
+ if (!content || content == _currentContent) return;
+ hide();
parent.style.cursor = 'pointer';
tooltips.push(parent.appendChild(getTooltip(content)));
+ _currentContent = content;
} else {
content = o.formatter({ format: 'full' }, o.data);
if (!content) return;
+ hide();
+ parent.style.cursor = 'pointer';
var tt = parent.appendChild(getTooltip(content));
tt.className += ' wax-popup';
@@ -2801,6 +2805,7 @@ wax.tooltip = function() {
function off() {
parent.style.cursor = 'default';
+ _currentContent = null;
if (!popped) hide();
}
View
Oops, something went wrong.
Oops, something went wrong.

0 comments on commit 0a62b1e

Please sign in to comment.