Bookmarklet E3
Long time no update.
1. Tớ mới viết (thêm) một bookmarklet mới, lấy tên là E3. Nếu theo dõi tumblelog của tớ thì bạn hẳn đã biết về nó, và cũng có thể đã dùng thử E3 rồi:
Bookmarklet hỗ trợ chèn nhanh emoticon tớ mới viết. Đã test qua loa trên Firefox - ngon và Safari - hỏng. Hiện mới chỉ hỗ trợ textarea, chứ iframe kiểu WYSIWYG như TinyMCE và FCKeditor thì chưa.
- E3
Đoạn mã khởi động E3 như sau:
javascript:var%20e3%20=%20document.createElement("script");%20e3.setAttribute("src","http://onetruebrace.com/e3/e3.js?mc="+new%20Date().getTime());%20void(document.getElementsByTagName("head")[0].appendChild(e3));
Để tiện lợi nhất cho việc sử dụng, bạn hãy tạo một bookmark mới trên Bookmark bar của mình (cách gọi của Firefox), với URL là đoạn mã trên. Như vậy, lúc nào cần đến bạn chỉ việc bấm vào Bookmark để khởi động E3 - nhớ chú ý góc phải dưới của các textarea trong trang web bạn đang truy cập. Một icon nho nhỏ màu xanh mang chữ E3 sẽ hiện ra tại vị trí đó, đợi bạn bấm vào để hiển thị danh sách các emoticon có thể chèn.
Do file javascript sẽ load hơi lớn (gần 100 KB) và host tớ không nhanh lắm, nên có lẽ bạn sẽ phải đợi lâu.
Nếu quan tâm bạn có thể xem mã nguồn của bookmarklet này ở URL: http://onetruebrace.com/e3/e3.js. E3 có sử dụng thư viện jQuery và các plugin impromptu, dimension, cookie.
Emoticon trong E3 lấy từ BuzzIcon, do Buzz Bạn Bè Team thu thập từ nhiều nguồn.
E3 tớ viết tặng bạn nấm 
2. Nguyên tắc hoạt động của bookmarklet này là tìm kiếm tất cả các textarea có thể nhìn thấy được trên trang web hiện tại - và gắn vào góc dưới của nó icon E3.
jQuery('textarea:visible').each(function(i, n) {
var current = this;
var pos = jQuery(this).offset();
var top = pos.top + jQuery(this).outerHeight();
var left = pos.left + jQuery(this).outerWidth() - 33;
jQuery('<img class="e3" id="e3_' + i+ '" src="' + e3_base_url + 'e3.png" />').appendTo('body');
jQuery('#e3_' + i).css({
position: 'absolute',
top: top,
left: left,
cursor: 'pointer',
border: 'solid 1px',
'z-index': '999'
}).click(function() {
e3_target = current;
showPack(packs[current_pack]);
});
});
Tớ cũng xin bật mí chút về tên gọi E3: Ban đầu tớ định đặt tên bookmarklet này là… E2, nghĩa là Easy Emoticon, nhưng sau đó nghĩ đến cách thức tích hợp của E2 trong trang web - hiện ra icon ở góc để thông báo cho người sử dụng biết bookmarklet đã có hiệu lực - nên Easy Emoticon đã trở thành Easy Emoticon “Enabled”. Chữ E3 ở góc textarea mang nghĩa như thế.
Các rich text editor như FCKeditor và TinyMCE đều sử dụng IFrame, do đó tớ không thể dùng cách tiếp cận trên. Khó có thể biết IFrame nào chứa rich text editor, IFrame nào không, tớ tạm thời bỏ qua, chỉ xét textarea đơn thuần trong phiên bản 0.1.
Muốn hỗ trợ FCKeditor, TinyMCE,… tớ nghĩ mình cần thay đổi hoàn toàn cách thức hoạt động của E3, nghĩa là hiển thị một global toolbar cho phép chọn emoticon, sau đó chèn vào vị trí con trỏ hiện tại. Code phần này có thể tham khảo các bộ gõ tiếng Việt như AVIM, HIM,… nhưng thời gian có hạn và tớ chưa làm được.
3. Vẫn về E3. Như đã nói ở trên, dữ liệu của bookmarklet này tớ lấy từ trang web BuzzIcon, hard code thẳng vào file javascript theo dạng:
var horoscope_name = 'Horoscope';
var horoscope_base_url = 'http://emo.buzzbanbe.net/sets/horoscope/';
var horoscope_files = ['aquarius.gif', 'aries.gif', 'cancer.gif', 'capricorn.gif', 'gemini.gif', 'leo.gif', 'libra.gif', 'pisces.gif', 'sagittarius.gif', 'scorpio.gif', 'taurus.gif', 'virgo.gif'];
packs.push('horoscope');
Để sinh đoạn mã này từ một trang index bất kỳ của BuzzIcon, tớ có thể dùng cURL để fetch về và lấy PHP xử lý hàng loạt. Nhưng do… lười chuyển qua code editor để gõ code nên tớ viết tạm một đoạn javascript để extract thông tin và output thẳng vào console của Firebug:
Đoạn code đó như sau:
name = document.getElementsByTagName('title')[0].innerHTML.replace(/BuzzIcon - /, '').replace(/^\s*/g, '').replace(/\s*$/g, '');
id = name.replace(/[-\s]/g, '_').toLowerCase();
emo = $x('//li/div/img');
console.log('var ' + id + "_name = '" + name + "';");
console.log('var ' + id + "_base_url = '" + emo[0].src.match(/(http:\/\/emo.buzzbanbe.net\/sets\/.*?\/)/)[0] + "';");
for (var i = 0; i < emo.length; i++) {
emo[i] = emo[i].src;
}
console.log('var ' + id + "_files = ['" + emo.join("', '").replace(/http:\/\/emo.buzzbanbe.net\/sets\/.*?\//g, '') + "']" + ";");
console.log("packs.push('" + id + "');");
4. Thế đi. Bài viết sắp tới của tớ, có lẽ sẽ về CakePHP.
Bài viết được gửi hôm 13.07.08 · Mang các từ khóa bookmarklet, code, e3, javascript
Bài viết liên quan:
Mèo gửi hôm 13.07.08 lúc 5:55 pm #
Bạn QA vất vả rồi :”>
NPP gửi hôm 16.07.08 lúc 8:07 am #
vậy làm sao chèn E3 vào phầ comment của wordpress ạ ?
johan tran gửi hôm 16.07.08 lúc 1:40 pm #
UI! Hay quá, bạn sáng tạo thật đấy. Cảm ơn nhiều nhé!
Danh ba web 2.0 gửi hôm 18.07.08 lúc 11:35 am #
Ông anh giỏi lập trình thật!
y5cafe gửi hôm 18.07.08 lúc 4:09 pm #
Quá tuyệt.
Bạn có thể chỉ cách add nó vào wordpress được không.
Nếu vào đc TinyMCE thì càng tốt.
QAD gửi hôm 20.07.08 lúc 3:21 am #
@Mèo: :”>
@johan tran, Danh ba web 2.0: Thanks :D
@y5cafe, NPP: Vì mục đích là để làm bookmarklet nên tớ không để E3 tích hợp với hệ thống nào (ít nhất là phiên bản hiện thời). Screenshot tớ chụp trong admin panel của WordPress cũng là kích hoạt E3 thủ công thôi (bấm vào bookmark).
TinyMCE, FCKeditor,… tớ vẫn chưa xử lý. Nếu bạn có cách nào thì có thể góp ý thẳng cho tớ. Thanks.
Hon tap gửi hôm 05.08.08 lúc 9:53 am #
Hay lam QAD, may cai study case nay rat huu ich. Thanks!
Kan gửi hôm 06.08.08 lúc 10:55 am #
ay oy co link down emoticon co trong buzzicon ko