blogger_ext2.js 0.7.0 分支全新功能 beta 版發表

0.7.0 分支 beta 版本計劃:
由於 jQuery 1.1.3 在 DOM Selector 上大幅的進步, 所以阿土伯的 blogger-ext2 也改寫了, 把 DOM Traversing 上依 id 來直接找物件(這樣最快, 但需要動態新增的 element 都配上 id) 拿掉了, 因為二者在速度上已沒什麼差別了. 但程式碼看起來比較單純簡短.

使用者偏好設定:
0.7 上最大的功能, 就是加入了使用者偏好設定的機制, 也就是除了網誌作者利用 Blogger-ext2 來擴充您的 Blogger 之外, 您的讀者更可以依個人喜好調整這些設定, 達到個人最佳的閱讀感受.
##CONTINUE##
舉個例來說好了:

像是 LabelCloud 這個 Web2.0 最酷必備的功能, 就被我老婆嫌棄: "我才不管什麼 Cloud, 字大大小小的不好看@@"
再者社群書籤也是, "那麼多國外的, 可不可以只留 hemi, yahoo, funp @@".

也就是說網誌作者的喜好不一定是最貼近您的讀者, 現在, 利用 Blogger-ext2 的新功能 ,您除了提供最酷的功能之外, 更能提供最合乎使用者閱讀習慣的網誌環境.
由於這是全新實作的介面, 所以才將原 0.6.x 分支成 0.7 , 0.6.x 的 bug 阿土伯依然會處理.
但較新的功能會在 0.7.x 上實作.


偏好設定本身亦提供 API 給 plugins 的開發者, 您不用處理設定畫面, 只需要將您的設值名稱及呈現方式列出, Blogger-ext2 會自行將 Form 畫出, 並處理使用者設定的細節.
0.7 本身亦向下相容 0.6 的 plugins, 所以比較複雜, 大部份阿土伯都測過了, 但為求穩定, 會於更努力測試完整後, 正式發表 0.7.0 的版本.

changelog:
* 使用者偏好設定.
* 社群書籤按鈕新增 funp

當然, 阿土伯需要大家幫忙測試, 以下為 0.7.0b 的使用方式.請大家幫忙測試並告知阿土伯您的意見.

0.7.0b 版 script,目前在 svn 中.
All-in-one:

<script src='http://blogger-ext2.googlecode.com/svn/trunk/src/blogger_ext2.js' type='text/javascript'></script>

只有核心:

<script src='http://blogger-ext2.googlecode.com/svn/trunk/src/blogger_ext2-core.js' type='text/javascript'></script>

如何出現使用者偏好設定的區塊:
只要您在您的部落格任何想要提供設定區塊的地方, 加上

<div id="user_pref_container"></div>

即可, 就是這麼容易.
更方便的方式就是像阿土伯一樣, 直接利用 "網頁元素"->"HTML/JavaScript", 在內容中打入您想要的訊息及

<div id="user_pref_container"></div>

即可嘍 .

美化偏好設定:
偏好設定可以利用 CSS 設定風格, 以下為阿土伯目前的 CSS:

<style type='text/css'>
#user_pref_container ul {
padding-left: 10px;
}
#user_pref_container li{
margin: 0 2px;
padding: 0 2px;
display: inline;
background-color: black;
border-bottom: 1px solid white;
}
#user_pref_container li a{
color: white;
text-decoration: none;
}
#user_pref_container li.tabs-selected {
background-color: #D25A0B; /*Brown color theme*/
border-color: #D25A0B; /*Brown color theme*/
}
#user_pref_container div.menuline {
clear: both;
width: 100%;
height: 5px;
background: #D25A0B; /*Brown color theme*/
}
</style>

plugin 實作偏好設定的範例:
只要為您原先開發的 plugin 新增二個 function 即可.

user_pref:
如果您有實作 user_pref function , 您的 plugins 設定便會出現在偏好設定中.
您無需處理偏好設定表單細節, 您只要回傳一個陣列, 包含您所有設定的欄位即可.
格式:
{tab_name: 'sample', name: 'sample', display_name: 'Sample Enable', data_type:'bool', default_value: BloggerExtOptions['sample'] }

tab_name: 您的 plugin 所要產生的 page control tab.
name: 設定參數名稱
display_name: 設定參數功能說明
data_type: 目前的 datatype 有 string , bool, enum 分別為 input[@type=text], input[@type=checkbox], 以及 select 的下拉選單.
其中如果您的 data_type: enum, 您必需再提供一個選項的陣列
options: [{display: 'Full Mode', value: 'full'},{display: 'Summary', value: 'summary'}, {display: 'Title', value: 'title'}]
default_value:

update_pref:
使用者設定完成, blogger-ext2 呼叫 update_pref 並傳給您使用者的設定, 供您做相關設定處理. 基本上, 您只要將設定值, 設定至 BloggerExtUserPrefs 即可.


以 hide_navbar 為例, 只比原先 0.6.x 多實作二個 function , 沒有實作亦可以, 只是不提供使用者設定而已, 並不會影響運作.

// Register Sample
BloggerExt.sample = function() {
// Plugin 會由此開始, 此 Sample 無功能.
};
BloggerExt.sample.user_pref = function() {
var prefs = [];
prefs.push({tab_name: 'sample', name: 'sample', display_name: 'Sample Enable', data_type:'bool', default_value: BloggerExtOptions['sample'] });
prefs.push({tab_name: 'sample', name: 'sample_input', display_name:'Sample Text', data_type:'string', 'default_value': BloggerExtOptions['sample_input'] });
prefs.push({tab_name: 'sample', name: 'sample_opt', display_name:'Sample Option', data_type:'enum', 'default_value': BloggerExtOptions['sample_opt'],
 'options': [{display: 'Full Mode', value: 'full'},{display: 'Summary', value: 'summary'}, {display: 'Title', value: 'title'}]});
return prefs;
};
BloggerExt.sample.update_pref = function(prefs) {
BloggerExtUserPrefs['sample'] = (typeof prefs['sample'] != 'undefined') ? true : false ;
BloggerExtUserPrefs['sample_input'] = (typeof prefs['sample_input'] != 'undefined') ? prefs['sample_input'] : 'default_input' ;
BloggerExtUserPrefs['sample_opt'] = (typeof prefs['sample_opt'] != 'undefined') ? prefs['sample_opt'] : 'full';
};
BloggerExt.register('sample', { sample: true} );

Technorati Tags: Blogger, Javascript, Programming