| 1 |
/* $Id: skyliner.js,v 1.7 2007/10/16 16:03:51 dvessel Exp $ */
|
| 2 |
|
| 3 |
$(document).ready(function() {
|
| 4 |
$('#sidebar-right').slide_blocks({ fade: 1800, fadeDelay: 7000, slide: 370 });
|
| 5 |
$('#search-theme-form').alter_search();
|
| 6 |
$('#content-content .node .content > p').leader();
|
| 7 |
$('#main a[@href^=http://]').mark({ useClass: 'external', filter: window.location.hostname });
|
| 8 |
});
|
| 9 |
|
| 10 |
jQuery.fn.extend({
|
| 11 |
// Slide block behavior.
|
| 12 |
slide_blocks : function (settings) {
|
| 13 |
var parentRegion = this;
|
| 14 |
settings = jQuery.extend({fade: 2000, fadeDelay: 9000, slide: 'medium'}, settings);
|
| 15 |
$('.block', this).each(function() {
|
| 16 |
// Process header clicks and it's behavior.
|
| 17 |
// Just so it looks like a link.
|
| 18 |
$('> h2', this).wrapInner('<a href="#"></a>').click(function(e){
|
| 19 |
e.preventDefault();
|
| 20 |
// Hide everything.
|
| 21 |
$('.content.expanded', parentRegion).slideUp(settings.slide, function() {
|
| 22 |
$(this).addClass('hide').removeClass('expanded');
|
| 23 |
});
|
| 24 |
// This determins which content block the click belonged to.
|
| 25 |
var contentMatch = $('.content', $(this).parents('.block')).get(0);
|
| 26 |
if ($(contentMatch).hasClass('hide')) {
|
| 27 |
// Show the block.
|
| 28 |
$(contentMatch).slideDown(settings.slide, function() {
|
| 29 |
$(this).addClass('expanded').removeClass('hide');
|
| 30 |
});
|
| 31 |
}
|
| 32 |
else {
|
| 33 |
// This toggles the block contents.
|
| 34 |
$(contentMatch).slideUp(settings.slide, function() {
|
| 35 |
$(this).addClass('hide').removeClass('expanded');
|
| 36 |
});
|
| 37 |
}
|
| 38 |
});
|
| 39 |
// Look for the active class in blocks. When not present, just hide.
|
| 40 |
if ($('a.active', this).length < 1) {
|
| 41 |
$('.content', this).addClass('hide');
|
| 42 |
}
|
| 43 |
else {
|
| 44 |
// Referrer and current page compared to fade or hide immediately since the fade animation isn't always wanted.
|
| 45 |
// window.location.search looks for strings after "?" so it depends on clean urls being enabled.
|
| 46 |
if (document.referrer != document.URL && document.referrer.indexOf(window.location.search) !== -1) {
|
| 47 |
// This is meant to give the user a chance to keep drilling in the navigation
|
| 48 |
// but a kill switch or 'gesture' would be nice since it obscures too.
|
| 49 |
var fadeTimer = ($('li.expanded > a.active', this).length < 1) ? settings.fade : settings.fadeDelay;
|
| 50 |
$('.content', this).fadeOut(fadeTimer, function() {
|
| 51 |
$(this).addClass('hide');
|
| 52 |
$('h2 a', this.parentNode).addClass('active');
|
| 53 |
});
|
| 54 |
}
|
| 55 |
else {
|
| 56 |
$('.content', this).addClass('hide');
|
| 57 |
$('h2 a', this).addClass('active');
|
| 58 |
}
|
| 59 |
}
|
| 60 |
});
|
| 61 |
return this;
|
| 62 |
},
|
| 63 |
// Adds a class to the first occurring element and character for styling.
|
| 64 |
leader : function() {
|
| 65 |
$(this).each(function() {
|
| 66 |
if ($(this).siblings('.leader').length == 0) {
|
| 67 |
$(this).addClass('leader');
|
| 68 |
var first = this.innerHTML.substr(0,1);
|
| 69 |
if (/[a-zA-Z0-9]/.test(first)) {
|
| 70 |
var node = this.firstChild;
|
| 71 |
node.nodeValue = node.nodeValue.slice(1);
|
| 72 |
// "first-c" = first character. Each character gets a class also for possible kerning.
|
| 73 |
// It's recommended you set rule for all upper or lowercase if you do any letter spacing adjustments. (kerning)
|
| 74 |
// Note: the classes for each character are all lowercase.
|
| 75 |
$('<span class="first-c fc-'+first.toLowerCase()+'">'+first+'</span>').prependTo(this);
|
| 76 |
}
|
| 77 |
}
|
| 78 |
});
|
| 79 |
return this;
|
| 80 |
},
|
| 81 |
// Mark external links and add class.
|
| 82 |
mark : function(settings) {
|
| 83 |
settings = jQuery.extend({ useClass: '', filter: '' }, settings);
|
| 84 |
if (settings.useClass) {
|
| 85 |
this.each(function() {
|
| 86 |
if ($(this).attr('href').indexOf(settings.filter) === -1) {
|
| 87 |
$(this).addClass(settings.useClass);
|
| 88 |
}
|
| 89 |
});
|
| 90 |
}
|
| 91 |
return this;
|
| 92 |
},
|
| 93 |
// Alter search box.
|
| 94 |
alter_search : function() {
|
| 95 |
this.each(function() {
|
| 96 |
var button_val = $('input:submit:eq(0)', this).val();
|
| 97 |
$('input:text', this)
|
| 98 |
.before('<span class="sbox-l"></span>')
|
| 99 |
.after('<span class="sbox-r"></span>')
|
| 100 |
.wrap('<span class="sbox"></span>')
|
| 101 |
.addClass('place-holder')
|
| 102 |
.attr('value', button_val)
|
| 103 |
.focus(function() {
|
| 104 |
// Clear values and set color when it's the place holder.
|
| 105 |
if ($(this).attr('value') == button_val) {
|
| 106 |
$(this).attr('value', '').removeClass('place-holder');
|
| 107 |
}
|
| 108 |
})
|
| 109 |
.blur(function() {
|
| 110 |
// If value is the place holder or if it's empty.
|
| 111 |
if ($(this).attr('value') == button_val || !$(this).attr('value')) {
|
| 112 |
$(this).addClass('place-holder').attr('value', button_val);
|
| 113 |
}
|
| 114 |
})
|
| 115 |
.keyup(function(e) {
|
| 116 |
if ($(this).attr('value')) { // Has value? Then show clear button.
|
| 117 |
$('~.sbox-r', this.parentNode).addClass('can-clear');
|
| 118 |
}
|
| 119 |
else { // No value? Then hide clear button.
|
| 120 |
$('~.sbox-r', this.parentNode).removeClass('can-clear');
|
| 121 |
}
|
| 122 |
});
|
| 123 |
$('.sbox-r', this).click(function() { // Clear button click. Clears then focuses on input box.
|
| 124 |
$('.sbox input:text', this.parentNode).attr('value', '').get(0).focus();
|
| 125 |
$(this).removeClass('can-clear');
|
| 126 |
});
|
| 127 |
$('.sbox-l', this).click(function() { // Magnifying glass click. Selects text.
|
| 128 |
$('.sbox input:text', this.parentNode).get(0).select();
|
| 129 |
});
|
| 130 |
});
|
| 131 |
return this;
|
| 132 |
}
|
| 133 |
});
|
Parent Directory
| 
Revision Log
| 
Revision Graph