Get the base URL of the forum in your JS

Dinoboff · March 2007

After looking at scriptaculous.js, I think I found a way to avoid relative path in the JS of our extensions:

var Vanilla = new function(){
	//get the path of vanilla by looking in the src of the link that load global.js
	//(got the hack from scriptaculous)
	var scriptTags = document.getElementsByTagName("script");
	for(var i=0;i<scriptTags.length;i++) {
		if(scriptTags[i].src && scriptTags[i].src.match(/js\/global\.js$/)) {
			this.baseURL = scriptTags[i].src.replace(/js\/global\.js$/,'');
			break;
		}
	}
	this.webRoot = this.baseURL.replace(/^http(s)?:\/\/[^\/]+/, '');
	this.httpMethod = document.URL.replace(/^(http|https)(:\/\/).*$/, "$1$2");
	if (this.webRoot == this.baseURL){
		this.baseURL = this.httpMethod+document.domain+this.webRoot;
	}
	return this;
};

alert(Vanilla.baseURL+', '+Vanilla.webRoot)

I tested it in IE7, FF2 and Opera and it seems to work

WallPhone · March 2007

Very cool. Better than the method I used in CommentLinks. Will have to use this when I update it.

Stash · March 2007

Does this work for:

FriendlyURLs on and off?
Vanilla installed at the root of a domain?
Vanilla installed at the root of a subdomain?
Vanilla installed in any level of subdirectory?

Dinoboff · March 2007

here's a better version, and easier to reuse:

var Lussumo = {};
Lussumo.PathFinder = function(jsPath){
	var params = new function(){
		var scriptTags = document.getElementsByTagName("script");
		var src = '';
		for(var i=0;i<scriptTags.length;i++) {
			if(scriptTags[i].getAttribute){
				src = scriptTags[i].getAttribute('src');
			} else {
				src = scriptTags[i].src
			}
			if(src.match(jsPath)){
				break;
			}
		}
		this.scriptSrc = src;
		this.URL = document.URL;
		this.domain = document.domain;
		return this;
	};
	if(params.scriptSrc){
		this.webRoot = params.scriptSrc.replace(jsPath, '');
		this.webRoot = this.webRoot.replace(/^http(s)?:\/\/[^\/]+/, ''); //because the src attr could have been a partial or complete url
		this.httpMethod = params.URL.replace(/^(http|https)(:\/\/).*$/, "$1$2");
		this.baseURL = this.httpMethod + params.domain + this.webRoot;
		return this;
	} else {
		return nil;
	}
};

var Vanilla = new Lussumo.PathFinder('js/global.js');

alert(Vanilla.webRoot+', '+Vanilla.baseURL+', '+Vanilla.httpMethod);

@ [-Stash-]: It get the src attribute of a link tag (in this example, js/global.js).
js addresses are always raw addresses in the core. So it should work what ever mode you are using.

And it should work whatever domain or http method you are using; from the src attribute http(s)://domain/path/to/vanilla/js/global.js or /path/to/vanilla/js/global.js, it will take 'js/global.js' to only keep the base URL or the web root.

If it works in safari that could be added to global.js or vanilla.js.

Stash · March 2007

So I could use this could help me out with this JQThickBox problem? I'm crap with JS, so how would I get to use this to set my variable of TB_LoadingAnimation with the correct path? Much appreciate this as it appears as if it may solve my problems.

Dinoboff · March 2007

new version, with the style folder url:

var Lussumo = {};
Lussumo.PathFinder = function(){
	var params = new function(){
		this.URL = document.URL;
		this.domain = document.domain;
		return this;
	};
	this.getRootPath = function(tag, attr, path){
		var Tags = document.getElementsByTagName(tag);
		var src = '';
		var root = '';
		for(var i=0;i<Tags.length;i++) {
			src = '';
			if(Tags[i].getAttribute && Tags[i].getAttribute(attr)){
				src = Tags[i].getAttribute(attr);
			} else if (eval("Tags["+i+"]."+attr)) { 
				src = eval("Tags["+i+"]."+attr);
			}
			if(src.match(path)){
				root = src.replace(path, '');
				root = root.replace(/^http(s)?:\/\/[^\/]+/, ''); //because the src attr could have been a partial or complete url
				break;
			}
		}
		if(root){
			return root;
		} else {
			return false;
		}
	};
	this.webRoot = this.getRootPath('script', 'src', 'js/global.js');
	this.styleUrl = this.getRootPath('link', 'href', 'vanilla.css');
	this.httpMethod = params.URL.replace(/^(http|https)(:\/\/).*$/, "$1$2");
	this.baseURL = this.httpMethod + params.domain + this.webRoot;
	return this;
};

var Vanilla = new Lussumo.PathFinder();
alert(Vanilla.baseURL+', '+Vanilla.httpMethod+', '+Vanilla.styleUrl+', '+Vanilla.webRoot);

@ [-Stash-]: If Mark add it to the core, you will just need something like:TB_LoadingAnimation = Vanilla.webRoot+'path/to/LoadingAnimation.gif';

Stash · March 2007

But for the time being I could just add this the thickbox.js right?

Dinoboff · March 2007

I will write a jquery version...

Dinoboff · March 2007

For jQuery, it would look like that:

if(!jQuery().PathFinder){
	jQuery.PathFinder = function(){
		var it = {};
		var params = new function(){
			this.URL = document.URL;
			this.domain = document.domain;
			return this;
		};
		it.getRootPath = function(tag, attr, path){
			var root = jQuery(tag+"[@"+attr+"$="+path+']').attr(attr);
			root = root.replace(path, '');
			root = root.replace(/^http(s)?:\/\/[^\/]+/, ''); //because the src attr could have been a partial or complete url
			if(root){
				return root;
			} else {
				return false;
			}
		};
		it.webRoot = it.getRootPath('script', 'src', 'js/global.js');
		it.styleUrl = it.getRootPath('link', 'href', 'vanilla.css');
		it.httpMethod = params.URL.replace(/^(http|https)(:\/\/).*$/, "$1$2");
		it.baseURL = it.httpMethod + params.domain + it.webRoot;
		return it;
	};
}

if (!window.Vanilla){
	var Vanilla = new jQuery.PathFinder();
}

Minisweeper · March 2007

Someone just wrote something in this thread I'm sure...

Mark · March 2007

Yeah - it was me - I meant to whisper it to someone, but then I forgot and I edited it back into a whisper.

Minisweeper · March 2007

Damnit! I thought i'd witnessed a mysteriously disappearing post!

Minisweeper · March 2007

Wait...didnt you post in here again not long ago Mark?

Stash · March 2007

It looks as if this PathFinder function is now in global.js in 1.1.2, so we should be able to use this now right?

Dinoboff · March 2007

yep, with something like that:

if (!window.Vanilla){
  var Vanilla = new PathFinder();
  Vanilla.webRoot = Vanilla.getRootPath('script', 'src', 'js/global.js');
  Vanilla.styleUrl = Vanilla.getRootPath('link', 'href', 'vanilla.css');
  Vanilla.baseURL = Vanilla.params.httpMethod + Vanilla.params.domain + Vanilla.webRoot;
}

Stash · March 2007

Christ, one day I hope to know enough JS to stop asking stupid questions... Where would I use this? I've tried putting this before al the code in thickbox.js and it just comes up with Vanilla is undefined. What am I doing wrong? P.S. I've updated to 1.1.2 and cleared cache etc.

Dinoboff · March 2007

sorry, it is working with if(!window.Vanilla)
(I edited the previous post)

Stash · March 2007

Thanks Dinoboff, this works for me!

MySchizoBuddy · March 2007

Since both JQthickbox and JQmedia use this method. it is causing conflict.
both cannot coexist.

Dinoboff · March 2007

The problem is with friendly url. There can be some problems with relative paths. So addons authors should avoid using relative path or rewrite rules have to be set to make the relative paths works.

I think relative path should be avoided since you would have to help your addon users to set the rewrite rules.

Stash · March 2007

There was also a problem with ThickBox if you wanted to use it outside of comments. Now you should be able to

Get the base URL of the forum in your JS

Comments