應用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();
});

Original link: Phanix's Blog