應用sessionStorage改善WordPress “The Grid” plugin的UX

The Grid是在wordpress裡還算不錯用的plugin,可以將文章做grid排列展示,同時設定篩選條件來過濾。但有個比較大的問題是,當使用者點選grid上的連結,在回到原本grid頁面的時候,原本篩選器的設定就被重設(經過測試Firefox不會有這個問題,而Google Chrome會),導致使用者需要重新設定篩選,一整個UX很糟。

比較好的解決方式是用sessionStorage來處理,把使用者作的篩選存在sessionStorage中,然後利用jquery window load事件(即使是透過瀏覽器的back或者 javascript 的 history.go(-1)也會觸發)來處理。

基本上邏輯是,當sessionStorage沒東西的時候,代表第一次進入該頁面,要先做 initialize。然後要記錄使用者的set/unset (其實就是 click event)。比較需要注意的是,當使用者重新回到這頁面的時候,要回復先前的 set/unset,但是the grid的 set/unset比較簡單的方式是用 jquery 送 click 事件來達到 set/unset,這時候要避免跟之前的 click handling function 衝突或者造成 infinite loop。

假設有四組條件篩選器,當篩選項目被set的時候,會將同組內的其他篩選器unset,而The Grid對於 Set & Unset 可以給予不同的 css (例如不同的字體顏色,在例子中分別為 rgb(255,255,255)與 rgb(255,204,0))。下面例子只拿其中一組來舉例(要不然程式碼真的又臭又長),然後部分程式用了 eval() 來精簡程式碼長度。

/* region selector */
jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(2) > span').click(function() 
{ 
	sessionStorage.t22 = 1 - sessionStorage.t22;
	
	if (sessionStorage.t22 == 1)
	{
		sessionStorage.t23 = 0;
		sessionStorage.t24 = 0;
		sessionStorage.t25 = 0;
		
		if (jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(3) > span').css('color') == 'rgb(255, 204, 0)' )
		{ jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(3) ').click(); }
		
		if (jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(4) > span').css('color') == 'rgb(255, 204, 0)' )
		{ jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(4) ').click(); }
		
		if (jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(5) > span').css('color') == 'rgb(255, 204, 0)' )
		{ jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(5) ').click(); }
	}
});

jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(3) > span').click(function() 
{ 
	sessionStorage.t23 = 1 - sessionStorage.t23;
	
	if (sessionStorage.t23 == 1)
	{
		sessionStorage.t22 = 0;
		sessionStorage.t24 = 0;
		sessionStorage.t25 = 0;
		
		if (jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(2) > span').css('color') == 'rgb(255, 204, 0)' )
		{ jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(2) ').click(); }
		
		if (jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(4) > span').css('color') == 'rgb(255, 204, 0)' )
		{ jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(4) ').click(); }
		
		if (jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(5) > span').css('color') == 'rgb(255, 204, 0)' )
		{ jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(5) ').click(); }
	}
});

jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(4) > span').click(function() 
{ 
	sessionStorage.t24 = 1 - sessionStorage.t24;
	
	if (sessionStorage.t24 == 1)
	{
		sessionStorage.t22 = 0;
		sessionStorage.t23 = 0;
		sessionStorage.t25 = 0;
		
		if (jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(2) > span').css('color') == 'rgb(255, 204, 0)' )
		{ jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(2) ').click(); }
		
		if (jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(3) > span').css('color') == 'rgb(255, 204, 0)' )
		{ jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(3) ').click(); }
		
		if (jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(5) > span').css('color') == 'rgb(255, 204, 0)' )
		{ jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(5) ').click(); }
	}
});

jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(5) > span').click(function() 
{ 
	sessionStorage.t25 = 1 - sessionStorage.t25;
	
	if (sessionStorage.t25 == 1)
	{
		sessionStorage.t23 = 0;
		sessionStorage.t24 = 0;
		sessionStorage.t22 = 0;
		
		if (jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(3) > span').css('color') == 'rgb(255, 204, 0)' )
		{ jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(3) ').click(); }
		
		if (jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(4) > span').css('color') == 'rgb(255, 204, 0)' )
		{ jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(4) ').click(); }
		
		if (jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(2) > span').css('color') == 'rgb(255, 204, 0)' )
		{ jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(2) ').click(); }
	}
});




function run_region()
{
	for (var i = 2; i <= 5; i++)
    {
        eval("if (sessionStorage.t2" + i.toString() + " == undefined) { sessionStorage.t2" + i.toString() + " = 0; }");
        eval("if (sessionStorage.t2" + i.toString() + " == 0 && jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(" + i.toString() + ") > span').css('color') == 'rgb(255, 204, 0)' ) { jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(" + i.toString() + ") ').click(); sessionStorage.t2" + i.toString() + " = 0; }");
        eval("if (sessionStorage.t2" + i.toString() + " == 1 && jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(" + i.toString() + ") > span').css('color') == 'rgb(255, 255, 255)' ) { jQuery('.tg-grid-area-top2 > div:nth-child(1) > div:nth-child(" + i.toString() + ") ').click(); sessionStorage.t2" + i.toString() + " = 1; }");
    }
}


jQuery( window ).load(function()
{
    run_region();
});