MooTools Tips extension: Tips.Glossary
Posted by: atom, 2009 05.10
This is just a little something I whipped up because I found it useful. Tips.Glossary is used for helpful tool-tips that gracefully degrade when JavaScript is not available for whatever reason. The basic idea is that you include an HTML glossary in the page, and if Tips.Glossary is available, the tips will come up however you specify, if not, they are simply anchors to their entries in the HTML.
This probably works with most MooTools stuff post 1.2, you are smart and will figure it out.
Check it out here.
Download the example.
or have a look at the code:
Selectors.Pseudo.hash = function(hash){
if(!$chk(hash))
return this.get('href').contains('#');
var currentHash = this.get('href').split('#')[1];
return currentHash === hash;
}
Tips.Glossary = new Class({
Extends: Tips,
options: {
'anchorClass': false,
'hideGlossary': true
},
initialize: function(glossary, options){
this.parent(options);
this.glossary = $(glossary);
if(!$chk(this.glossary))
throw "Glossary not found / defined, quitting";
if(this.options.hideGlossary)
this.glossary.setStyle('display', 'none');
this.indexGlossary();
return this;
},
indexGlossary: function(){
this.items = this.glossary.getElements('*[id]');
this.anchors = new Elements();
this.items.each(function(e){
var anchor = $(document.body).getElement('a:hash('+e.get('id')+')');
if($chk(anchor)){
if(this.options.hideGlossary);
anchor.addEvent('click', function(event){
new Event(event).stop();
});
this.setTipContent(anchor, e);
this.anchors.push(anchor);
}
if(this.options.anchorClass)
this.anchors.addClass(this.options.anchorClass);
this.attach(this.anchors);
}, this);
},
setTipContent: function(anchor, target){
anchor.store('tip:title', target.get('title'));
anchor.store('tip:text', target.get('html'));
this.fireEvent('settingContent', [anchor, target]);
}
});
or have a look at the code:
Selectors.Pseudo.hash = function(hash){ if(!$chk(hash)) return this.get('href').contains('#'); var currentHash = this.get('href').split('#')[1]; return currentHash === hash; } Tips.Glossary = new Class({ Extends: Tips, options: { 'anchorClass': false, 'hideGlossary': true }, initialize: function(glossary, options){ this.parent(options); this.glossary = $(glossary); if(!$chk(this.glossary)) throw "Glossary not found / defined, quitting"; if(this.options.hideGlossary) this.glossary.setStyle('display', 'none'); this.indexGlossary(); return this; }, indexGlossary: function(){ this.items = this.glossary.getElements('*[id]'); this.anchors = new Elements(); this.items.each(function(e){ var anchor = $(document.body).getElement('a:hash('+e.get('id')+')'); if($chk(anchor)){ if(this.options.hideGlossary); anchor.addEvent('click', function(event){ new Event(event).stop(); }); this.setTipContent(anchor, e); this.anchors.push(anchor); } if(this.options.anchorClass) this.anchors.addClass(this.options.anchorClass); this.attach(this.anchors); }, this); }, setTipContent: function(anchor, target){ anchor.store('tip:title', target.get('title')); anchor.store('tip:text', target.get('html')); this.fireEvent('settingContent', [anchor, target]); } });
On a side note, notice the psuedo selector being added. This has been added because for whatever reason, the following CSS3 selector is goofy:
$(document.body).getElements('a[href="http://trickeries.com"]'); // works $(document.body).getElements('a[href="#glossary-username"]'); // does not work
Anyone have any idea why?
February 27th, 2010 at 10:04 pm
Nice work