[wp-hackers] Start of new themes page

Sat Jun 4 11:12:04 GMT 2005

On 6/4/05, David House <dmhouse at gmail.com> wrote:
> Okay, this has been developed now. There's three more functions that
> need to be added to the theme-scroll.js file. I actually made some
> other ammendments to highlightLink() to increase performance, so it
> would be easiest to just replace the entire theme-scroll.js file with
> the one I've attached.

Let's attach it this time.

-- 
-David House, dmhouse at gmail.com, http://xmouse.ithium.net
-------------- next part --------------
function addEvent(obj, evType, fn, useCapture){
  if (obj.addEventListener){
    obj.addEventListener(evType, fn, useCapture);
    return true;
  } else if (obj.attachEvent){
    var r = obj.attachEvent("on"+evType, fn);
    return r;
  } else {
    alert("Handler could not be attached");
  }
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
// - - - - - - ( smooth scrolling between internal links ) - - - - - - - - - - - 
// http://www.sitepoint.com/article/scroll-smoothly-javascript
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
// set vars
var ss_INTERVAL;
var ss_STEPS = 15;

function ss_fixAllLinks() {
	// grab all the links
	var allLinks = document.getElementsByTagName('a');

	// loop through all the links
	for (var i=0; i<allLinks.length; i++) {
		var lnk = allLinks[i];

		// check to see if there's a hash, and if the current url completely matches the one in the link
		if ( lnk.href && lnk.href.indexOf('#') != -1 ) {
			addEvent(lnk, 'click', smoothScroll);
		}
	}
}

function highlightLink( target ) {
	var allLinks = document.getElementById('content').getElementsByTagName('a');

	// loop through all the links
	for (var i=0; i<allLinks.length; i++) {
		var lnk = allLinks[i];

		// check to see if there's a hash, and if the current url completely matches the one in the link
		if ( lnk.className == 'activelink' ) {
			lnk.className = '';
		}
	}
	target.className = 'activelink';
}

var smoothScrolling;

function smoothScroll(e) {
	//prevent highlightOnScroll from firing during smooth scrolling
	smoothScrolling = true;

	var target;
	// checks with event model to use
	if (window.event) {
		// ie
		target = window.event.srcElement;
	} else if (e) {
		// other
		target = e.target;
		}
	else return;
	highlightLink(target);
	// strip off the hash
	var anchor = target.hash.substr(1);
	// grab all the anchors on the page
	var destinationLink = frames['themes'].document.getElementById(anchor);
	// if none found, exit
	if (!destinationLink) return true;

	// find position of destination link
	var destx = destinationLink.offsetLeft; 

	var thisNode = destinationLink;
	// loop up through offsetParent until we hit the document body, as IE requires
	while (thisNode.offsetParent && (thisNode.offsetParent != frames['themes'].document.body)) {
		thisNode = thisNode.offsetParent;
		destx += thisNode.offsetLeft;
	}

	// clear the interval timer (why here?)
	clearInterval(ss_INTERVAL);

	// get current y-position
	var cyxpos = ss_getCurrentXPos();

	// calculate the step sizes
	var ss_stepsize = parseInt((destx-cyxpos)/ss_STEPS);

	// run the scroll
	ss_INTERVAL = setInterval('ss_scrollWindow('+ss_stepsize+','+destx+',"'+anchor+'")',10);

	// stop the browser handling the event as normal and opening the link
	// kills the bubble
	if (window.event)
		{
		window.event.cancelBubble = true;
		window.event.returnValue = false;
		}
	if (e && e.preventDefault && e.stopPropagation)
		{
		// hmmm, safari gets inside here, but then fails to stop the event, and so a 'jump' rather than a 'scroll' takes place. I can't figure it out...
		e.preventDefault();
		e.stopPropagation();
		}
	return true;
	}

function ss_scrollWindow(scramount, dest, anchor) {
	var wascyxpos = ss_getCurrentXPos();
	var isAbove = (wascyxpos < dest);
	frames['themes'].window.scrollTo(wascyxpos + scramount, 0);
	var iscyxpos = ss_getCurrentXPos();
	var isAboveNow = (iscyxpos < dest);
	// if finished cancel timer and jump anchor so url is correct
	if ((isAbove != isAboveNow) || (wascyxpos == iscyxpos))
		{
		//finished smooth scrolling, let highlightOnScroll work again
		smoothScrolling = false;
		frames['themes'].window.scrollTo(dest,0);
		clearInterval(ss_INTERVAL);
		//location.hash = anchor;
		}
	}

function ss_getCurrentXPos() {
	// ie5 and ie5.5
	if (frames['themes'].document.body && frames['themes'].document.body.scrollLeft)
	return frames['themes'].document.body.scrollLeft;
	// ie6
	if (frames['themes'].document.documentElement && frames['themes'].document.documentElement.scrollLeft)
	return frames['themes'].document.documentElement.scrollLeft;
	// netscape etc
	if (frames['themes'].window.pageXOffset)
	return frames['themes'].window.pageXOffset;
	return 0;
	}

addEvent(window, 'load', ss_fixAllLinks);

// allow /extend/themes/#foo to act as if the link for theme 'foo' had be clicked
function autoScrollToTheme() {
	//if there's a hash, copy that has to the themes frame
	if (window.location.hash) {
		frames['themes'].window.location.hash = window.location.hash;
	}

	//highlight the link for the selected theme
	els = document.getElementsByTagName('a');
	for (var i = 0; i < els.length; i++) {
		var thishref = els.item(i).getAttribute('href');
		if (thishref.indexOf(window.location.hash) != -1 && 
			thishref.indexOf(window.location.hash) == (thishref.length - window.location.hash.length))
			highlightLink(els.item(i));
	}

	//don't let the browser scroll down to the top of the iframe
	window.scrollTo(0,0);
}

addEvent(window, 'load', autoScrollToTheme);

//gets all elements given a class name.
//http://www.snook.ca/archives/000370.html
function getElementsByClassName(node, classname) {
	var a = [];
	var re = new RegExp('\\b' + classname + '\\b');
	var els = node.getElementsByTagName("*");
	for(var i=0,j=els.length; i<j; i++)
		if(re.test(els[i].className))a.push(els[i]);
	return a;
}

//highlight links as users scroll past corresponding themes
function highlightOnScroll() {
	//don't highlight during smoothSroll
	if (smoothScrolling)
		return true;

	//get the width of one theme
	var themes = getElementsByClassName(frames['themes'].document.getElementById('rap'), 'featured');
	var themesframe = document.getElementById('themes');
	var themewidth = themes[0].offsetWidth;

	//find the current x position of the middle of the viewport
	var xpos = ss_getCurrentXPos() + Math.floor(themesframe.offsetWidth / 2)
	//get which number theme we're looking at
	var themenum = Math.floor(xpos / themewidth);
	//highlight the correct numbered link
	var navlinks = getElementsByClassName(document, 'themenav')[0].getElementsByTagName('a');
	if (navlinks.item(themenum).className.indexOf('activelink') == -1)
		highlightLink(navlinks.item(themenum));
}

//as frames aren't loaded when this JS file is parsed, we have
//to attach the event onload.
function addScrollEvent() {
	addEvent(frames['themes'].window, 'scroll', highlightOnScroll);
}

addEvent(window, 'load', addScrollEvent);