Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**
- * For the day job, pay it no mind
- */
- (function () {
- if (document.getElementById('quicktabs-5')) {
- var faculty = $('.faculty-name'),
- rootBlock = $('#block-block-12'),
- nameOuter = rootBlock.find('> div > div').eq(0),
- letters = {}, alpha = '', listItems = '', node,
- navList = document.createElement('ul');
- nameOuter.parent()[0].style.position = 'relative';
- // change id to whatever matches your naming scheme and style as needed
- navList.id = 'faculty-alpha-nav';
- /* --------------------------------------------------------------
- * -- START TEST-ONLY SECTION
- * -- All style stuff that follows should be in CSS, not here */
- // this was just a quick way to demonstration/dev in the console
- var style = document.createElement('style');
- style.type = 'text/css';
- /* TESTING
- * SET THESE PROPERTIES IN CSS IN PLACE OF CURRENT DISPLAY:NONE
- * I don't understand what is going on with this, and don't
- * and don't have time to work it out, but would suggest there
- * is almost certainly a better solution to whatever problem
- * this was meant to solve. It is very odd.
- */
- style.innerHTML = '.page-patient-care-faculty-staff #content-area { position: absolute; left: -99999em; display: block }\n ';
- // these styles are for testing only, standard drupal search pager
- // styling would be better for the real thing
- style.innerHTML += '#faculty-alpha-nav { padding:0 !important;list-style:none;float:left;clear:right } #faculty-alpha-nav li { width: 1.2em; margin-left:2px;height:1em;float:left;cursor:pointer;border:1px solid #444;text-align:center;padding-bottom:3px } #faculty-alpha-nav li:hover { color:#aaa;background:#000 } #faculty-alpha-nav + div { clear:both !important }';
- document.getElementsByTagName('head')[0].appendChild(style);
- /* --------------------------------------------------------------
- * -- END TEST-ONLY SECTION
- * -- everything below this line is required
- */
- // we need to build a hash of jQuery objects that each contain a reference
- // to the outer most div that surrounds a single faculty name, in each case
- // it will be the first name to begin with that letter, A-Z
- faculty.each(function() {
- var alpha = $(this).text().charAt(0);
- if (!letters[alpha]) {
- node = $(this.parentNode.parentNode.parentNode.parentNode);
- node.buttonEl = $(this.parentNode.parentNode.parentNode); // store a reference to the node that the event listeners appear to be attached to for the ajax stuff, unfortunately, synthetic events don't bubble in jQuery before 1.3, or we could just store $(this). We'll trigger a click on this after scrolling to it
- if (node.parent().css('display') != 'none')
- letters[alpha] = node;
- }
- });
- // next we create a list item for each letter that exists
- for (prop in letters) {
- if (Object.prototype.hasOwnProperty.call(letters, prop)) {
- listItems += '<li>' + prop + '</li>';
- }
- }
- navList.innerHTML = listItems;
- // overwrite the reference to the UL node with a jQuery object containing it
- navList = $(navList);
- // and insert it into the DOM after the block title
- rootBlock.find('h2').eq(0).css('float', 'left').after(navList);
- // we need a function to do the scrolling
- function scrollTo(container, stopAt) {
- if (!!stopAt[0].offsetParent) {
- container.animate({scrollTop: stopAt.position().top}, 333);
- // the same event should trigger adding and removing the button active
- // class. It doesn't at the moment, but this would be an easy fix.
- return stopAt.buttonEl.trigger('click');
- }
- }
- // there's no event delegation in the version of jQuery that ships with Drupal,
- // but for clicks it is very simple to do
- navList.bind('click', function(e) {
- if (e.target.nodeName.toLowerCase() == 'li')
- return scrollTo(nameOuter, letters[e.target.innerHTML])
- });
- }
- }());
Add Comment
Please, Sign In to add comment