Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Updated tooltip.js and tooltip.html. Documented tooltip.js. Added .ed…

…itorconfig.
  • Loading branch information...
commit 12eed4da9cab1089e84863cf17c578eca7540778 1 parent fc42c66
Ralph Holzmann authored
View
8 .editorconfig
@@ -0,0 +1,8 @@
+; Unix-style newlines
+[*]
+end_of_line = LF
+
+; Tab indentation (no size specified)
+[*.js]
+indent_style = tab
+indent_size = 4
View
18 positionable/positionable.js
@@ -196,23 +196,21 @@ steal('can/control', 'can/construct/proxy', 'can/construct/super', 'jquery', 'jq
this.move.apply(this, arguments)
//clicks elsewhere should hide
},
- move : function(el, ev, positionFrom){
+ move : function( el, ev, positionFrom ) {
var position = this.position.apply(this, arguments),
elem = this.element,
options = this.options;
// if elem is hidden, show it before setting offset
var visible = elem.is(":visible")
- if(!visible){
- elem.css("opacity", 0)
- .show()
-
+ if ( ! visible ) {
+ elem.css("opacity", 0).show()
}
- elem.offset( $.extend( position, { using: options.using } ) )
- if(!visible){
- elem.css("opacity", 1)
- .hide();
+ elem.offset( $.extend( position, { using: options.using } ) );
+
+ if ( ! visible ) {
+ elem.css("opacity", 1).hide();
}
if(this.options.hideWhenOfInvisible){
this.element.toggle(this.isOfVisible());
@@ -396,4 +394,4 @@ steal('can/control', 'can/construct/proxy', 'can/construct/super', 'jquery', 'jq
})
-});
+});
View
4 tooltip/tooltip.html
@@ -35,12 +35,12 @@
<script type='text/javascript' src='../../../steal/steal.js'></script>
<script type='text/javascript'>
- steal('canui/nav/tooltip', function(){
+ steal('canui/tooltip', function(){
var themes = [ "info", "huawei", "success", "error", "notice" ],
dirs = [ "n", "ne", "en", "e", "es", "se", "s", "sw", "ws", "w", "wn", "nw" ];
$(".target").each(function( i, target ) {
- new can.ui.nav.Tooltip($(target), {
+ new can.ui.Tooltip($(target), {
content: [ themes[ i % themes.length ], dirs[ i % dirs.length ] ].join(" "),
theme: themes[ i % themes.length ],
position: dirs[ i % dirs.length ]
View
166 tooltip/tooltip.js
@@ -1,17 +1,22 @@
-steal('can/construct/proxy',
+steal(
+ 'can/construct/proxy',
'can/construct/super',
'can/control',
'can/view/ejs',
+ 'can/util/function',
'canui/positionable',
'steal/less'
).then(
+ "./views/tooltip.ejs",
'./tooltip.less',
- function( $ ) {
-
+function() {
+
var prefixes = ' -webkit- -moz- -o- -ms- -khtml-'.split(' '),
- supportsTransitions = (function() {
+ supportsTransitions = (function() {
+
var elem = $("<div />"),
- support = false;
+ support = false;
+
$.each(prefixes, function( i, prefix ) {
var prop = prefix + "transition",
value = "all 1s ease-in-out";
@@ -24,8 +29,18 @@ steal('can/construct/proxy',
return support;
}());
-
- can.Control("can.ui.Tooltip", {
+ can.Control("can.ui.Tooltip",
+ /**
+ * @static
+ */
+ {
+ /**
+ * This is just a hash map that holds some values for positionable as
+ * well as some classes that get applied to the arrow depending on
+ * which position you choose for the tooltip.
+ *
+ * @hide
+ */
positions: {
n : {
my: "bottom",
@@ -52,8 +67,36 @@ steal('can/construct/proxy',
arrowMargin: "margin-left"
}
},
+ /**
+ * Default options for the tooltip.
+ *
+ * * `theme` - {String} String name of the theme to be applied to the
+ * tooltip. Possible values:
+ * * `info`
+ * * `success`
+ * * `error`
+ * * `notice`
+ * Default: `info`.
+ * * `showEvent` - {String|Boolean} The name of the event that should
+ * trigger the tooltip to be shown. Set to `false` to have the tooltip
+ * shown on initialization. Default: `mouseenter`.
+ * * `hideEvent` - {String} The name of the event that should trigger
+ * the tooltip to hide. Default: `mouseleave`.
+ * * `showEffect` - {String} Animation effect to be used to display the
+ * tooltip. Default: `show`.
+ * * `hideEffect` - {String} Animation effect to be used to hide the
+ * tooltip. Default: `fadeOut`.
+ * * `showTimeout` - {Integer} Length of time in ms to wait before
+ * showing the tooltip. Default: `200`.
+ * * `hideTimeout` - {Integer} Length of time in ms to wait before
+ * hiding the tooltip. Default: `500`.
+ * * `position` - {String} The position the tooltip should be relative
+ * to the element it's being initialized on.
+ *
+ * @attribute
+ */
defaults: {
- theme: "error",
+ theme: "info",
showEvent: "mouseenter",
hideEvent: "mouseleave",
showEffect: "show",
@@ -64,28 +107,32 @@ steal('can/construct/proxy',
hideTimeoutId: null,
position: "n"
}
- }, {
+ },
+ /** @prototype */
+ {
setup : function( el, options ) {
+
options = $.extend( this.constructor.defaults, options || {} );
+
+ // Append template to the offset parent
+ var offsetParent = el.offsetParent();
+ offsetParent.append( can.view( "./views/tooltip.ejs", options ) );
+
+ // save references to each component of the tooltip
options.$ = {
- tooltip : $( can.view( "./views/tooltip.ejs", options ) )
+ tooltip : offsetParent.children().eq(-1)
}
- $.each( ["outer", "inner", "arrow"], this.proxy( function( i, className ) {
+ can.each( ["outer", "inner", "arrow"], function( className ) {
options.$[ className ] = options.$.tooltip.find( "." + className );
- }));
+ });
+
this._super( el, options );
+
},
-
init : function() {
-
- // save references to each compontent of the tooltip
-
- // Append template to the offset parent
- this.element.offsetParent().append( this.options.$.tooltip );
-
// Spacing for arrows and stuff is calculated off the margin,
// perhaps should be changed to a setting
this.space = parseInt( this.options.$.outer.css("margin-left"), 10 );
@@ -114,23 +161,33 @@ steal('can/construct/proxy',
}
},
+ /**
+ * Methods to ensure that the tooltip doesn't hide when your mouse is
+ * over it.
+ * @hide
+ */
"{$.tooltip} mouseenter" : function() {
if ( this.options.showEvent == "mouseenter" ) {
this.show();
}
},
-
+ /** @hide */
"{$.tooltip} mouseleave" : function() {
if ( this.options.showEvent == "mouseenter" ) {
this.hide();
}
},
+ /**
+ * Determines where to position the "tip" of the tooltip depending on
+ * where the tooltip is being positioned.
+ * @hide
+ */
determineCorners: function() {
var arrowSpacing = this.space * 2,
- offsetSpacing = this.space * 4;
+ offsetSpacing = this.space * 4;
- this.corners= {
+ this.corners = {
ne: {
arrowCss: {
left: arrowSpacing
@@ -188,6 +245,10 @@ steal('can/construct/proxy',
}
},
+ /**
+ * Determines where to position the tooltip.
+ * @hide
+ */
determinePosition: function() {
var parts = "my at".split(" "),
@@ -198,8 +259,8 @@ steal('can/construct/proxy',
position = {};
// ZOMG double each, thats like, O(n^2)
- $.each( parts, this.proxy( function( i, part ) {
- $.each( this.options.position.split(""), function( i, c ) {
+ can.each( parts, this.proxy( function( part ) {
+ can.each( this.options.position.split(""), function( c ) {
positionArrays[part].push( can.ui.Tooltip.positions[ c ][part] );
});
@@ -210,15 +271,14 @@ steal('can/construct/proxy',
positionArrays[part] :
positionArrays[part].reverse()
).join(" ");
- } ));
+ }));
this.position = $.extend({},
can.ui.Tooltip.positions[ this.options.position.charAt(0) ],
position
);
- this.options.$
- .arrow
+ this.options.$.arrow
.addClass( this.position.arrowClass )
.css( "border-width", this.space )
@@ -235,8 +295,15 @@ steal('can/construct/proxy',
},
+ /**
+ * Sets the position of the tooltip. Takes into account if the tooltip
+ * is visible or not.
+ * @hide
+ */
setPosition: function() {
- var isHidden = this.options.$.tooltip.css("display") == "none", positionable;
+
+ var isHidden = this.options.$.tooltip.css("display") == "none",
+ positionable;
if ( isHidden ) {
this.options.$.tooltip.css({
@@ -244,7 +311,7 @@ steal('can/construct/proxy',
display: "block"
})
- positionable = new can.ui.layout.Positionable(this.options.$.tooltip,
+ positionable = new can.ui.Positionable(this.options.$.tooltip,
$.extend({
of : this.element,
collision : "none"
@@ -256,7 +323,7 @@ steal('can/construct/proxy',
display: "none"
})
} else {
- positionable = new can.ui.layout.Positionable(this.options.$.tooltip,
+ positionable = new can.ui.Positionable(this.options.$.tooltip,
$.extend({
of : this.element,
collision : "none",
@@ -269,38 +336,51 @@ steal('can/construct/proxy',
positionable.move();
},
+ /**
+ * Manually shows the tooltip according to the `showEvent` and
+ * `showEffect`.
+ */
show : function() {
clearTimeout( this.options.hideTimeoutId );
this.options.$.tooltip.stop( true, true )[ this.options.showEffect ]();
},
+ /**
+ * Manually hides the tooltip according to the `hideEvent` and
+ * `hideEffect`.
+ */
hide : function() {
this.options.hideTimeoutId = setTimeout(this.proxy( function() {
this.options.$.tooltip[ this.options.hideEffect ]();
}), this.options.hidetimeout );
},
- "{showEvent}" : function() {
- this.show();
- },
+ /**
+ * Binding of the show and hide events.
+ * @hide
+ */
+ " {showEvent}" : "show",
- "{hideEvent}" : function() {
- this.hide();
- },
+ /** @hide */
+ " {hideEvent}" : "hide",
+ /**
+ * Destroys the tooltip and unbinds events.
+ */
"destroy" : function() {
this.options.$.tooltip.remove();
delete this.options.$;
this._super();
},
- "{window} resize" : (function() {
- var timeout;
- return function() {
- clearTimeout( timeout );
- setTimeout( this.proxy( this.callback("setPosition")), 100 );
- }
- }())
+ /**
+ * Debounced window resize event to reposition the tooltip when the
+ * window resizes.
+ */
+ "{window} resize" : function() {
+ clearTimeout( this.windowTimeout );
+ this.windowTimeout = setTimeout( this.proxy( this.setPosition, this ), 100);
+ }
});
});
Please sign in to comment.
Something went wrong with that request. Please try again.