wiki:Development/Styles/JavaScript

Version 4 (modified by clynx, 12 years ago) (diff)

add function hideSameTimestamps

TracNav(Development)? This is part of the Development Documentation Project, please help document Colloquy if you know anything that would be relevant here for other users to know about.

HOWTO

When you want to use homebrewed functions you need to create at least one HTML file. The genericTemplate.html will be used for every window. The only thing you have to do is to create the file and add your script into the <head> section.

JavaScript Tips and Code Snippets

Got a cool JavaScript tip or snippet? Post it!

Display only changed timestamps

This function allows you to hide elements by classnames which have the same value. This is the script which is used inside the Frugal Style.

function hideSameTimestamps() {
    function getElementsByClassName( className, tagName, rootNode ) {
        rootNode = rootNode || document;
        tagName = tagName || '*';

        var result = [];
        var elements = rootNode.getElementsByTagName( tagName );
        for( var x = 0; x < elements.length; x++ ) {
            if ( !elements[x].className || elements[x].className != className ) { continue; }
            result.push( elements[x] );
        }
        return result;
    }

    var elements = getElementsByClassName( 'envelope', 'div' );
    var parentTimestamp = getElementsByClassName( 'timestamp', 'span', elements[ elements.length - 2 ] )[0];
    var currentTimestamp = getElementsByClassName( 'timestamp', 'span', elements[ elements.length - 1 ] )[0];

    elements[ elements.length - 1 ].scrollIntoView( true );

    if ( parentTimestamp.innerHTML == currentTimestamp.innerHTML ) {
        currentTimestamp.style.visibility = 'hidden';
    }
}

Orkut-style text fading

Here is a cool script, pulled from Orkut's site. It fades in all the text. I would like to try this in a style sometime. Might be really neat. Maybe Standard would be suitable for this?

col = 255;
function sa() {
	document.getElementById( "ws" ).style.color="rgb(" + col + ","
		+ col + "," + col + ")";
	col -= 5;
	if( col > 0 ) setTimeout( 'sa()', 10 );
}

Automatic image fit-to-window resizing

Here is some code to resize images to fit the width of the window (from the Picturesque style).

function resizeImagesIfNeeded() {
	for( i = 0; i < document.images.length; i++ ) {
		if( document.images[[i].realWidth > ( window.innerWidth - 35 ) )
			document.images[[i].width = ( window.innerWidth - 35 );
		else document.images[[i].width = document.images[[i].realWidth;
	}
}

window.onresize = resizeImagesIfNeeded;

function resizeIfNeeded( image ) {
	image.realWidth = image.width;
	if( image.width > ( window.innerWidth - 35 ) )
		image.width = ( window.innerWidth - 35 );
	scrollToBottomIfNeeded();
}

Than in the HTML/XSL you would do:

<img src="http://www.javelin.cc/colloquy/images/icon.png" onload="resizeIfNeeded( this )" />

Emoticon text / image flip

Some interesting image substitution code to make images flip between text and image. I believe Adium uses this for clickable emotions now.

http://homepage.mac.com/wabin/tests/imagetest.html

Scrollback limiting

I've got a supplement.html for my hack-up of the Bland style that enforces a scrollback limit. I've tried both an elaborate way of doing it, and a quick & dirty way of doing it, and the quick way seems to work fine. Unfortunately, I have to cut & paste functions from the template.html in order to wedge in my scrollback check, but eh.

Here it is:

<script type="text/ecmascript" defer="defer">
var scrollBackLimit = 250;

function enforceScrollbackLimit() {
	var bodyNode = document.getElementsByTagName('body').item( 0 );

	// Quick removal of divs of any kind.
	var messages = document.getElementsByTagName('div');

	// Careful removal of only message and event divs.
	//var messages = [];
	//var divNodes = document.getElementsByTagName('div');
	//for (var i=0; i<divNodes.length; i++) {
	//	currNode = divNodes[[i];
	//	if ( (currNode.className.indexOf('envelope') != -1) ||
	//	 (currNode.className.indexOf('event') != -1) )
	//	messages[[messages.length] = currNode;
	//}

if (messages.length > scrollBackLimit)
	for (var i=0; i < (messages.length - scrollBackLimit); i++)
	bodyNode.removeChild(messages[[i])
}

function appendMessage( html ) {
	checkIfScrollToBottomIsNeeded();
	removeConsecutiveInsertPoint();

	range = document.createRange();
	range.selectNode( document.getElementsByTagName( "body" ).item( 0 ) );
	documentFragment = range.createContextualFragment( html );
	document.body.appendChild( documentFragment );

	enforceScrollbackLimit();

	scrollToBottomIfNeeded();
}

function appendConsecutiveMessage( html ) {
	checkIfScrollToBottomIsNeeded();

	insert = document.getElementById( "consecutiveInsert" );
	if( ! insert ) {
		appendMessage( html );
		return;
	}

	range = document.createRange();
	range.selectNode( insert.parentNode );
	documentFragment = range.createContextualFragment( html );
	insert.parentNode.replaceChild( documentFragment, insert );

	enforceScrollbackLimit();

	scrollToBottomIfNeeded();
}

</script>