Clement in a Nutshell

原來 GC!J 已有一年歷史，最近和電鋸商議後轉到 google code，方便管理，亦歡迎任何人提意見或參與維護。

趁今日打風有空，我更新了 GC!J 到 0.3b，把那些字碼存放到另一個 JS 檔再用 XHR 擷取，有新字碼時就不需要重新安裝整個 User Script，容易管理得多。

不知 GC!J 為何啥的我就再說一下吧：
GC!J 是一個 Greasemonkey user script，它主要把壹傳媒 那些圖像香港字轉為實在的文字，並把中文字間的空格移除，方便用家轉貼新聞。若想保留中文字間空格，可按 Firefox 的 Tools -> Greasemonkey -> User Script Commands -> Toogle Chinese Spaces。

安裝
GC!J 0.3b 需要 Firefox 3.0 或以上¹ 及 Greasemonkey。安裝 Greasemonkey 後到 GC!J project home page 按 Installation 下的連結就，再 reload atnext.com 就可看到效果。

Know Issues
蘋果動新聞的圖片說明因為會不停轉換，文字會再被轉回圖像。²

若有意見歡迎留言，發現 bug 的話亦請留言相告，謝謝。

1. 因為用到 native 的 getElementsByClassName [↩]
2. 這個走馬燈式的圖片轉換方法真的好 Web 1.0，既不 accessible 亦不 user friendly，其實整個動新聞網真的 “動” 過籠，版面亦怪怪的。 [↩]

Challenge: A traditional media organisation publishes various press releases daily via a central system to different channels, e.g. fax, data terminal and internet. As some special reasons, the system is not able to markup the content for the internet version. It can only change the line break to <br> and consecutive spaces to &nbsp; i.e. No hyperlinks even if there are any URLs or e-mail addresses written in the articles. It is definitely not user-friendly for internet readers and something should be made in order to improve usability.

No way to intervene the publication system but it is able to add post-publishing logic to the external JavaScript file included in the HTML output.

I decide to solve it by JavaScript regex but badly my regex sux! Theoretically it can be done by two lines of regex replace code (one for URLs and another for e-mail addresses) but they crash when replace globally at the same time. (e.g. ‘chiunam.net’ of ‘no-reply@chiunam.net’ – MY REGEX SUX!)

Finally I made it by scanning the article from start and create hyperlink for matched pattern once. It is clumsy but it works pretty good.

See my code in action.

jQuery自稱 “New Wave Javascript”，半點也不假。讀 jQuery 的 tutorials 及 15 Days of jQuery 就和初看 Ruby on Rails 時的感覺一樣：「這才是 Programming 嘛！」，用過 jQuery 就很自然對其他 JS lib 不感興趣。

RoR 很少地方技援，也沒時間建 server 練習，但 JQuery 不同，有個 Firefox + Firebug 就可以寫，很方便。不過這不能保證你寫的 code 能在 IE run (!)，先陣子把以前用 Prototype 及 script.aculo.us 寫的陽春 Ajax Gallery 改為 jQuery，也花了不少時間為 IE debug 或改寫 workaround，特此記下兩則以作日後參考：

.ajaxstop() IE Bug: jQuery 1.0.4 將會有 bug fixed，等不及可以到 SVN 自行更新。
IE image cache not fire .load() : 這個嚴格來說不是 jQuery 的錯，是 IE 的問題。 Workaround 是 pass 個 random query string 給 image.src() 去避免 IE cache。

我想很多人把網頁改為 XHTML 1.1 或 XHTML 1.0 strict doctype 時都會遇到一個問題：就是 hyperlink 不能再用 target 指定開啟新視窗，w3c 更指出你要是堅持用 target 的話就要使用 XHTML 1.0 transitional。

但我們在建立符合標準的網頁時，不能使用 “新視窗” 這種說法很缺說服力，尤其大多數人會堅持外部連結應要用 “新視窗” 來演示，故我們必須找個兩存其美的方法，既能符合網頁標準，亦能保持開啟新視窗這個操作模式。

其實我們可以利用 hyperlink 的 rel attribute，先把外部連結的 relationship 定義為 “external”，再透過 JavaScript 的 DOM ，把 rel=”external” 的連結加上開啟新視窗的 event，就能達成外部連結用 “新視窗” 開啟這個目的，又能保持網頁的 Semantic Markup。

明白原理其實就可以寫 code：

function externalLinks() {
	if (!document.getElementsByTagName) return;
	var anchors = document.getElementsByTagName("a");
	for (var i=0; i < anchors.length; i++) {
		var anchor = anchors[i];
		if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external")
			if (anchor.addEventListener)
				anchor.addEventListener("click", newWindow, false);
			else if (window.attachEvent)
				anchor.attachEvent("onclick", newWindow);
			else
				anchor.onclick = newWindow;
		}
}
function newWindow(e) {
	if (!e) var e = window.event;
	var a = e.target ? e.target : e.srcElement;
	var newwin = window.open(a.href);
	// prevent default action of the link
	if (newwin && e.preventDefault) e.preventDefault();
	// if the new window cannot open, use the original window to load the page
	return !newwin;
}
if (window.addEventListener)
	window.addEventListener("load", externalLinks, false);
else if (window.attachEvent)
	window.attachEvent("onload", externalLinks);
else
	window.onload = externalLinks;

下載原始檔

參考資料：

• New-Window Links in a Standards-Compliant World
• Standards-based Replacement for target="_blank" in External Links

範例：
例如我想別人在看到這個耗資逾億的政府新網站連結時不會再看不到我的 cheap blog，我現在就可以用新視窗開啟了。