我写了一个FiveStarPlugin,欢迎试用完善。

17 views
Skip to first unread message

Jelly

unread,
Sep 1, 2009, 12:50:05 PM9/1/09
to TiddlyWiki 華語支援論壇
i have wrote a five star plugin for tiddlywiki.
i want to find someone help me to make it much better.

you can find it at:
http://sinojelly.blog.51cto.com/attachment/200909/479153_1251823255.rar
or at:
http://sinojelly.blog.51cto.com/479153/197110


/***
|''Name''|FiveStarPlugin|
|''Description''|Five star rating system for tiddlywiki|
|''Icon''|<...>|
|''Author''|Jelly Chen|
|''Contributors''|<...>|
|''Version''|0.1.0|
|''Date''|Sep 1 2009|
|''Status''|stable|
|''Source''|http://sinojelly.TiddlySpot.com/#FiveStarPlugin|
|''CodeRepository''|<...>|
|''Copyright''|Guodong Workshop. 2009-2019. All rights reserved.|
|''License''|GPL2|
|''CoreVersion''|2.1.0|
|''Requires''|<...>|
|''Overrides''|<...>|
|''Feedback''|sino...@163.com|
|''Documentation''|http://sinojelly.blog.51cto.com/479153/197110|
|''Keywords''|FiveStar, vote, rating|
!Description
Five star rating system for tiddlywiki, the rating info associate with
one tiddler are stored in a tiddler named *_filestar_rating, * is
tiddler name.
The rating info tiddler associate with "FiveStarPlugin" looks like
this:
tiddler title: FiveStarPlugin_filestar_rating
|!rating|16|!votes|4|
|!user|!ip|!rating|!time|
|Jelly Chen|127.0.0.1|5|Tue Sep 01 2009 22:15:24 GMT+0800|
|Jelly Chen|127.0.0.1|4|Tue Sep 01 2009 22:19:07 GMT+0800|
|Jelly Chen|127.0.0.1|4|Tue Sep 01 2009 22:21:54 GMT+0800|
|Jelly Chen|127.0.0.1|3|Tue Sep 01 2009 22:22:10 GMT+0800|
!Notes
Only one rating macro in a tiddler and in SinglePageMode.
First vote a tiddler, save it, and then flush, you'll find the new
auto created tiddler.
After voting a tiddler, then display the associated *_fivestar_rating
tiddler, you'll find the last voting info in the last line.
Thanks to FND for answering my question on Google TiddlyWikiDev Group.
!Usage
You can add macro invoke in the tiddler as follows.
{{{
<<rating>>
}}}
Also, if you want to add fivestar to every tiddlers, you should modify
ViewTemplate as follows:
modify:
{{{
<div class='viewer' macro='view text wikified'></div>
}}}
to:
{{{
<div class='viewer'><div><span macro='view text wikified'></
div><div><span macro='rating'/></div><br/></div>
}}}
!!Parameters
None
!!Examples
See the footer of this tiddler.
!Configuration Options
None
!Revision History
!!v0.0.1 (2009-08-27) Client OK.
* View fivestar ok.
* Can be clicked to vote, but not any rating info stored.
!!v0.1.0 (2009-09-01) Write rating info tiddler OK.
* Rating info store in *_fivestar_rating tiddler.
!To Do
# Load the rating info while displying a tiddler and display the
rating info as "(Rated 4 with 176 votes)".
# Using lock to protect a *_fivestar_rating tiddler being broken by
more than one user at the same time to vote the same tiddler.
# Get the real IP address.
# Auto save and upload rating info after voting.
# Fix the Bug: when more than one tiddler in place, while mouse over
the second fivestar, but the fist fivestar highlight.
# Tag the rating info tiddler as shadowed.
# Use tag to avoid some tiddler to be voted.
# How to get all the tiddlers with the same rating?
# Avoid the *_fivestar_rating tiddlers to be voted.
# Fix the Bug: Sometimes, the stars still unhighlighted after voting.
(if alert a message box such as alert(n), no problem. Message box
avoid mouse rollover the stars.)
# Make others can vote the tiddlers, not only the owner can.
# Support IE.
You're welcome to make these ToDo's implemented.I have no more time
now.
!Code
***/
//{{{
//var set=false;
var v=1; // initial value is average??? (Rated 4 with 176 votes)
var RatingLevel = new Array("poor", "below average", "average", "above
average", "excellent", "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp");
function loadStars()
{
star1 = new Image();
star1.src = "star1.png";
star2 = new Image();
star2.src= "star2.png";
//setStar(v); // something wrong
}
function highlight(x)
{
//if (set==false)
{
y=x*1+1;
for (i=1;i<y;i++)
{
document.getElementById(i).src= star2.src;
}
document.getElementById('vote').innerHTML=RatingLevel[x - 1];
}
}
function losehighlight(x)
{
//if (set==false)
{
for (i=1;i<6;i++)
{
document.getElementById(i).src=star1.src;
document.getElementById('vote').innerHTML=RatingLevel[5];//""
}
}
}
function setStar(n)
{
y = n * 1 + 1;
for (i=1;i<y;i++)
{
document.getElementById(i).src= star2.src;
}
}
function saveStar(n, tiddlerTitle)
{
v = n; // should be new average ?
setStar(v);
//set=true;
document.getElementById('vote').innerHTML="Thank you for your
vote!";
title = tiddlerTitle+"_fivestar_rating";
var tiddler = store.createTiddler(title);
if (tiddler.text == "")
{
tiddler.text = "|!rating|0|!votes|0|\n";
tiddler.text += "|!user|!ip|!rating|!time|\n";
}
ratinginfo=tiddler.text.substr(0,40); // should be less than 40
ratingnums = ratinginfo.split("|"); // split to array
ratingnums.shift(); //first ""
ratingnums.shift(); //second "!rating"
ratingnum1 = ratingnums.shift();
ratingnums.shift(); //fourth "!votes"
ratingnum2 = ratingnums.shift();
regexhead= "|!rating|"+ratingnum1 +"|!votes|"+ratingnum2+"|";
ratingnum1 = Number(ratingnum1) + Number(n);
ratingnum2 = Number(ratingnum2) + 1;
tiddler.text = tiddler.text.replace(regexhead, "|!
rating|"+ratingnum1 + "|!votes|"+ratingnum2+"|");
var now = new Date();
tiddler.text += "|"+config.options.txtUserName +"|"+getHostIp()
+"|"+n+"|"+now+"|\n";
alert(n);
}
function getHostIp()
{
if((navigator.appName == "Microsoft Internet Explorer")
&&
((navigator.appVersion.indexOf('3.') != -1) ||
(navigator.appVersion.indexOf('4.') != -1)))
{
//document.write("Not with MS IE 3.0/4.0");
return "Not with MS IE 3.0/4.0";
}
else
{
window.onerror=null;
yourAddress=java.net.InetAddress.getLocalHost();
yourAddress2=java.net.InetAddress.getLocalHost();
yhost=yourAddress.getHostName();
yip=yourAddress.getHostAddress();
//document.write("Host Name:"+yhost);
//document.write("<br>IP:"+yip);
return yip;
}
}
config.macros.rating = {
handler: function(place, macroName, params, wikifier,
paramString, tiddler) {
loadStars();
wikify('<html><img src="star1.png" onmouseover="highlight
(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight
(this.id)" onmouseup="saveStar(id,title)" id="1" title='+tiddler.title
+' style="width:30px; height:30px; float:left;" /><img src="star1.png"
onmouseover="highlight(this.id)" onclick="setStar(this.id)"
onmouseout="losehighlight(this.id)" onmouseup="saveStar(id,title)"
id="2" title='+tiddler.title+' style="width:30px; height:30px;
float:left;" /><img src="star1.png" onmouseover="highlight(this.id)"
onclick="setStar(this.id)" onmouseout="losehighlight(this.id)"
onmouseup="saveStar(id,title)" id="3" title='+tiddler.title+'
style="width:30px; height:30px; float:left;" /><img src="star1.png"
onmouseover="highlight(this.id)" onclick="setStar(this.id)"
onmouseout="losehighlight(this.id)" onmouseup="saveStar(id,title)"
id="4" title='+tiddler.title+' style="width:30px; height:30px;
float:left;" /><img src="star1.png" onmouseover="highlight(this.id)"
onclick="setStar(this.id)" onmouseout="losehighlight(this.id)"
onmouseup="saveStar(id,title)" id="5" title='+tiddler.title+'
style="width:30px; height:30px; float:left;" /><div
id="vote">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</div></html>',
place);
}
};
//}}}

BramChen

unread,
Sep 2, 2009, 2:48:55 AM9/2/09
to tiddly...@googlegroups.com
Nice Job!


發現一個小 bug:
所有開啟的 tiddlers 的「星星」 的 id 重複了,程式會抓取最上面的 tiddler 裡的 id,會造成滑鼠選其他 tiddlers 等級時,卻於最上面的 tiddler 顯示待選的效果。

附件為修正後的源碼。



可考慮改以 extended fields 存放 rating 的相關資訊,可減少 tiddler 的數量。應也能簡化相關處理,例如:顯示各 tiddlers 的評等 ...。

附件中的 saveStar() 可修改如下:
function saveStar(id)
{
    var s=id.split("_star_");
    var title = s[0],
        n=s[1];
    setStar(id);

    document.getElementById(title+'_vote').innerHTML="Thank you for your vote!";

    var tiddler = store.getTiddler(title);
    tiddler.fields["rating"] = ((tiddler.fields["rating"] || 0)    + parseInt(n)).toString();
    tiddler.fields["rating_info"] = (tiddler.fields["rating_info"] || "|!user|!ip|!rating|!time|\n")
        + "|"+config.options.txtUserName +"|"+getHostIp()+"|"+n+"|"+new Date()+"|\n";
    tiddler.fields["votes"] = ((tiddler.fields["votes"] || 0) + 1).toString();
}

/*
這段程式碼的小缺點是,不支援 shadowed tiddlers(多數的情形下還算合理)。
需另外的處理。
*/

取用的方式:
1) 於 ViewTemplate 加入以下內容,例如:
<div>Rating: <span macro="view rating"></span><br />Vote: <span class='viewer' macro='view votes'></span></div>
Rating info:<div class='viewer' macro='view rating_info wikified'></div>


2) 程式碼:
例如:
wikify("''Rating:'' <<view rating>> ''Vote:''votes"",place)

3) TiddlyWiki 標記語法:
例如:
<<view rating_info wikified>>




另外,貴站使用 TiddlyPedia 佈景,預設並未啟用該佈景,建議另增一 tiddler 標籤設為 systemConfig 加入以下內容:

config.options.txtTheme = "TiddlyPedia";

存檔後,刷新頁面即可。



2009/9/2 Jelly <sino...@gmail.com>
FivestarsPlugin.js

BramChen

unread,
Sep 6, 2009, 9:02:56 PM9/6/09
to TiddlyWiki 華語支援論壇

很抱歉,先前論壇暫時無法發文,現已解決。

摘錄 Jelly email 的兩個問題,其餘 jelly 已於新版 FiveStartPlugin 中修訂,歡迎各位先進同好更新使用。

> 您帖子里的附件看起来不仅仅是插件代码的内容?

論壇附件僅僅是該套件的修改後的純文字檔而已。
若所指為下載後,於 WinXP/SP2+欲開啟編輯時的 「安全警示」,
解決方式如同下載 TW 文件時,「解除封鎖」即可編輯並複製剪貼至 tiddler。

> AttachFilePlugin 上传的附件怎么在html中应用?
> <img src="[img[star1.png]]" 不能正常工作,下面这些指定图片位置的地方我都想换成使用上传的图片的tiddler,有办法做到不?谢谢!

請參考:

http://www.tiddlytools.com/#AttachFilePluginInfo

http://ptw.sourceforge.net/TiddlyWiki123.zh-Hant.html#%E5%B8%B6%E5%9C%96%E8%B5%B0
(google group 可能截斷連結,請注意完整複製連結)


[img[star1.png]] 是 TW 的標記語法,不能直接設為 <img> 的來源

若圖檔的資料已使用 AttachFilePlugin 載入至名為 star.png 的 tiddler,
使用方式:
1)
[img[star1.png]]

2)
複製 star.png 的 data 段落內容
<html><img src="貼至此 " /></html>

3)
或以程式碼取得的 data 段落內容,存至 變數中使用:
store.getTiddlerText("star.png##data")

注意事項:
AttchFilePlugin 可將圖檔載入,以 base64 編碼存放於 tiddler。因此你的 TW 資料量可能增數 KB 乃至於數十、
數百 KB,請斟酌使用。


請盡可能利用論壇討論 TW 相關問題,方便於同好先進分享心得。

Jelly

unread,
Sep 7, 2009, 1:05:47 AM9/7/09
to TiddlyWiki 華語支援論壇

谢谢,我也是在犹豫,虽然两张图片即使只增加3k左右,但是还需要安装其它插件,总的来说还是不太好。
对于一个实用的TiddlyWiki,我想从外面链接应该更合适,也避免html文件增大带来的麻烦。

目前我用了一个单机版最简单的FiveStarsPlugin:
http://sinojellylearn.tiddlyspot.com/#FiveStarsPlugin

另外TiddlyWiki上有人也提供了另外一种方法:

If you want installation of AttachFilePluginFormatters to be
optional,
you can write something like this:


var URL="http://.../filename.jpg"; // hard-coded fallback/default
if (config.macros.attach)
URL=config.macros.attach.getAttachment("TiddlerName");


If the plugin is installed, it will use attachments, otherwise it
will
fall back to using the hard-coded URL.

On 9月7日, 上午9时02分, BramChen <bram.c...@gmail.com> wrote:
> 很抱歉,先前論壇暫時無法發文,現已解決。
>
> 摘錄 Jelly email 的兩個問題,其餘 jelly 已於新版 FiveStartPlugin 中修訂,歡迎各位先進同好更新使用。
>
> > 您帖子里的附件看起来不仅仅是插件代码的内容?
>
> 論壇附件僅僅是該套件的修改後的純文字檔而已。
> 若所指為下載後,於 WinXP/SP2+欲開啟編輯時的 「安全警示」,
> 解決方式如同下載 TW 文件時,「解除封鎖」即可編輯並複製剪貼至 tiddler。
>
> > AttachFilePlugin 上传的附件怎么在html中应用?
> > <img src="[img[star1.png]]" 不能正常工作,下面这些指定图片位置的地方我都想换成使用上传的图片的tiddler,有办法做到不?谢谢!
>
> 請參考:
>
> http://www.tiddlytools.com/#AttachFilePluginInfo
>

> http://ptw.sourceforge.net/TiddlyWiki123.zh-Hant.html#%E5%B8%B6%E5%9C...

Jelly

unread,
Sep 7, 2009, 1:10:52 AM9/7/09
to TiddlyWiki 華語支援論壇
关于搜索指定星级的tiddler,本来打算把这个功能添加到SearchOptionsPlugin中,我还没有找到好的方法。
如果用SearchOptionsPlugin本身的fields搜索关键字"5", 那么可以搜索出5星级tiddler,但是存在少量其它不满足条
件的匹配tiddler,暂时没有好的方法将就着用用。


function search_avg_rating(n) {
var titles=[];
store.forEachTiddler(function(title, tiddler){
if (tiddler.fields["average_rating"] == n.toString())
titles.push(tiddler.title);
});
return titles;

> > 請盡可能利用論壇討論 TW 相關問題,方便於同好先進分享心得。- 隐藏被引用文字 -
>
> - 显示引用的文字 -

Message has been deleted

BramChen

unread,
Sep 7, 2009, 2:36:20 AM9/7/09
to TiddlyWiki 華語支援論壇
其實先前給你的這段程式碼,只需去「用它」即可

可以將取得的 titles 表列至指定的 tiddler 中,即為搜尋結果。

底下是簡單的範例:

<html><a id="s5" class="button" href="javascript:;">searche rating 5</
a><p id="result" /></html><<tiddler - with:{{


function search_avg_rating(n) {
var titles=[];
store.forEachTiddler(function(title, tiddler){
if (tiddler.fields["average_rating"] == n.toString())
titles.push(tiddler.title);});
return titles;
}

jQuery("#s5").click(function(){
var titles=search_avg_rating(1);
jQuery("#result").html(titles.join("<br />"));
})
}}>>


另外:
SearchOptionsPlugin 若只勾選 fields 仍可能找出其他 extended fields 中含 "5" 的
tiddlers,例如: changecount = 5 的 ....
若未取消其他選項,則出現的包含可能出現在 tiddler.text, tiddler.title ... 的 "5"

先前回覆中建議:
2)
記憶中 http://www.tiddlytools.com/#SearchOptionsPlugin 選項中可勾選搜尋 ,若單勾此選項,則只
會搜尋 extended fields。

主要是建議*參考 SearchOptionsPlugin 相關程式碼寫法*。

Jelly

unread,
Sep 7, 2009, 9:23:18 AM9/7/09
to TiddlyWiki 華語支援論壇
是的,谢谢!精确搜索指定星级的文章的功能我试了下你的代码,我知道它的运行结果了。暂时还没做成可实际应用的样子加进去,有空了再来弄弄:)

On 9月7日, 下午2时36分, BramChen <bram.c...@gmail.com> wrote:
> 其實先前給你的這段程式碼,只需去「用它」即可
>
> 可以將取得的 titles 表列至指定的 tiddler 中,即為搜尋結果。
>
> 底下是簡單的範例:
>
> <html><a id="s5" class="button" href="javascript:;">searche rating 5</
> a><p id="result" /></html><<tiddler - with:{{
> function search_avg_rating(n) {
> var titles=[];
> store.forEachTiddler(function(title, tiddler){
> if (tiddler.fields["average_rating"] == n.toString())
> titles.push(tiddler.title);});
> return titles;
> }
> jQuery("#s5").click(function(){
> var titles=search_avg_rating(1);
> jQuery("#result").html(titles.join("<br />"));
>
> })
> }}>>
>
> 另外:
> SearchOptionsPlugin 若只勾選 fields 仍可能找出其他 extended fields 中含 "5" 的
> tiddlers,例如: changecount = 5 的 ....
> 若未取消其他選項,則出現的包含可能出現在 tiddler.text, tiddler.title ... 的 "5"
>
> 先前回覆中建議:
> 2)

> 記憶中http://www.tiddlytools.com/#SearchOptionsPlugin選項中可勾選搜尋 ,若單勾此選項,則只

Message has been deleted
Message has been deleted

BramChen

unread,
Sep 9, 2009, 12:27:43 AM9/9/09
to TiddlyWiki 華語支援論壇
> 1、怎么显示一个编辑框,让用户输入要搜索的关键字?

應 jelly 要求,將前面程式碼擴充後,如下:
''Search ratigng: ''<html><input id="i_1" type="text" size=6/
><aid="a_1" class="button" href="javascript:;";>go</a></html>
{{r_1{<br />}}}


<<tiddler - with:{{
function search_avg_rating(n) {
var titles=[];
store.forEachTiddler(function(title, tiddler){
if (tiddler.fields["average_rating"] == n.toString())
titles.push(tiddler.title);});
return titles;

}

(function($){
$("#a_1").click(function(){
var input=$("#i_1")[0].value,
titles=search_avg_rating(input),
li=(titles.length==0) ? "* Not found." : "#
[["+ titles.join("]]\n#[[")+"]]",
r=$("#tiddler"+tiddler.title).find(".r_1")
;
r.text(" ");
wikify(li,r[0]);
})

})(jQuery);

BramChen

unread,
Sep 9, 2009, 12:37:41 AM9/9/09
to TiddlyWiki 華語支援論壇
補上代碼附件,方便檢視。

2009/9/9 BramChen <bram...@gmail.com>
SearchRatingTiddler.txt

Jelly

unread,
Sep 9, 2009, 1:23:15 AM9/9/09
to TiddlyWiki 華語支援論壇
非常感谢,这么详细。我研究一下。

ps:谷歌浏览器怎么就不支持google工具栏呢?我把链接保存在google书签里,无法用谷歌浏览器替代掉ie或者firefox。

另外,我还遇到谷歌浏览器无法保存tw文件,我只能用FireFox编辑TW文件。

On 9月9日, 下午12时37分, BramChen <bram.c...@gmail.com> wrote:
> 補上代碼附件,方便檢視。
>
> 2009/9/9 BramChen <bram.c...@gmail.com>

>  SearchRatingTiddler.txt
> < 1K查看下载- 隐藏被引用文字 -
>
> - 显示引用的文字 -

BramChen

unread,
Sep 9, 2009, 2:20:44 AM9/9/09
to TiddlyWiki 華語支援論壇
不客氣,舉手之勞。


與討論主題無關之討論,請斟酌另起討論串,方便有相同問題者搜尋檢視。
1)
不了解你"?"後面的問題,請舉例說明。

2) 請善用搜尋
http://groups.google.com/group/tiddlywiki-zh/browse_thread/thread/1d256a81cb43b99

Jelly

unread,
Sep 9, 2009, 2:39:59 AM9/9/09
to TiddlyWiki 華語支援論壇
哦,是的,这个论坛主要不是讨论Google的东西,所以没另起。

我?后面的意思是这样的:
Google工具栏支持书签功能,类似于IE的收藏夹。但是是存储在网上的,任何电脑上都可以访问。
我把经常要访问的链接放在它里面的。但是谷歌浏览器不支持工具栏,我也就没有办法用书签中保存的链接了。
我用谷歌浏览器,还只是听说用它访问google邮箱、论坛更快。

我还觉得比较奇怪呢,我怎么没有在论坛贴图的权限?也不能粘贴附件?是不是要达到一定级别才行?
而且,论坛也不支持设置文字颜色什么的。

TiddlySaver.jar这个文件,我之前也看到了,不过没想到它是可以帮助浏览器保存文件的。

On 9月9日, 下午2时20分, BramChen <bram.c...@gmail.com> wrote:
> 不客氣,舉手之勞。
>
> 與討論主題無關之討論,請斟酌另起討論串,方便有相同問題者搜尋檢視。
> 1)
> 不了解你"?"後面的問題,請舉例說明。
>

> 2) 請善用搜尋http://groups.google.com/group/tiddlywiki-zh/browse_thread/thread/1d2...

BramChen

unread,
Sep 9, 2009, 4:06:14 AM9/9/09
to TiddlyWiki 華語支援論壇
1)
原來如此,我是用這個 bookmarklet :
http://www.google.com/support/chrome/bin/answer.py?hl=en&answer=100215

若是在 TW 的網頁,提供給訪客 bookmark 至其常用的書籤服務,可以安裝:
http://ptw.sourceforge.net/ptwe.html#BookmarksCommand

不需修改程式碼,即可自行刪減、擴充常用的書籤服務。

(這就跟 TW 連上關係了,不過與本討論串主題無關,就此打住。)

2) 論壇貼圖、附件的方式在論選輯可以找到說明:
http://groups.google.com/group/tiddlywiki-zh/web

Jelly

unread,
Sep 9, 2009, 7:41:14 AM9/9/09
to TiddlyWiki 華語支援論壇
bookmarklet这个非常好。谢谢:)
Reply all
Reply to author
Forward
0 new messages