Show toolbar

2011年11月6日 星期日

ChatBoxy

標題:閒聊方盒子 v2.3
HTML (index.html):
<!--[if !IE]><!-->
<style>
/*播放按鈕圖示*/
button.btn {
    margin-bottom: -4px;
    margin-right: 3px;
    background-color: white;
    width: 20px !important;
    padding: 4px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
span.play {
    border-color: transparent transparent transparent black;
    border-style: solid;
    border-width: 4px 0 4px 8px;
    float: left;
    height: 0px;
    width: 0px;
    text-indent: -999px;
}
</style>
<!--<![endif]-->
<h2>ChatBoxy v2.3</h2>
<span id="nameboxy" style="font-weight: bold;" onClick="chatboxy.name.change()">Ghost</span>
<input type="text" id="c_msg" style="padding-left:16px; width:400px;" onkeypress="chatboxy.submit.enter(event)" />
<button id="sendboxy" onClick="chatboxy.submit.send()">Send</button>
Color: <span id="colorboxy"></span>
FPS: <input type="text" id="fpsboxy" style="width:40px" value="1000" onclick="select()" onchange="chatboxy.cookie();" />(ms)
<hr style="border: thin dotted lightgrey;" />
<div id="chatboxy"></div>

<script type="text/javascript">
var chatboxy = new function() {
    var nameboxy = null; //暱稱暫存器
    var colorboxy = null; //暱稱顏色暫存器
    var fpsboxy = null; //刷新速度暫存器
    var lastmsg = null; //尾筆資料暫存器
    var lastimer = null; //刷新計時器
    //最近一筆Json資料連結
    var lastJUrl = "YourLink1";
    //最近20筆Json資料連結
    var nowJUrl = "YourLink2";
    //訊息發送連結
    //https://docs.google.com/spreadsheet/viewform?formkey=YourKey
    var postUrl = "https://docs.google.com/spreadsheet/formResponse?formkey=YourKey&ifq";
    //訊息發送等待圖片
    var imgwait = "http://lh5.googleusercontent.com/-VKa7sSMAhM8/Tmh90z7dq_I/AAAAAAAADj0/Z-3uoZJYcbU/loader2.gif";
    //訊息完成待命圖片
    var imgdone = "http://lh6.googleusercontent.com/-43c3UDWF7ps/TqhV5wA-hAI/AAAAAAAADjQ/yKHXnbmfdxM/chat.png";
    //影像Error圖片
    var imgerror = "http://lh6.googleusercontent.com/-mP25Uu39du0/TX8oHA02a8I/AAAAAAAACO0/1sOUbn7HBBI/s64/blocked_login.png";
    //定義正規表示
    var picture = /^((((ht|f)tps?:\/\/)|(www.))[-a-zA-Z0-9@:%_\+.~#?&//=]+)\.(jpg|jpeg|gif|png|bmp)/i
    var youtube = /^http:\/\/w{0,3}\.youtube[^' '\n\r]+/
    var hyperlink = /^(((ht|f)tps?:\/\/)|(www.))[a-zA-Z0-9_\-.:#/~}?]+/i
    //定義函式類別
    return {
        getJsonp : function(url, func) { //Jsonp呼叫函式
            var cp = url.indexOf("callback=?"); //尋找CallBack字串位置
            var today = new Date(); //建立日期物件
            var rnd = today.getFullYear() + '' +
                 today.getMonth() + '' +
                today.getDate() + '' +
                today.getDay() + '' +
                today.getHours() + '' +
                today.getMinutes() + '' +
                today.getSeconds() + '' +
                Math.round(Math.random()*99); //定義隨機數值
            var rm = document.getElementById('scriptBoxy');
            if(rm) rm.parentNode.removeChild(rm); //刪除舊腳本
            var script = document.createElement('script'); //建立新腳本
            script.type = 'text/javascript';
            script.id = 'scriptBoxy';
            //加入rnd以避免瀏覽器取到舊資訊
            script.src = url.substring(0, cp)+"callback="+func+url.substring(cp+10, url.length)+"&rnd="+rnd;
            document.getElementsByTagName('head')[0].appendChild(script); //產生腳本
        },
        lastscan : function(json) { //尾筆資料掃描器
            try { //合併標題(暱稱)與內容(日期+時間+訊息)
                var msg = json.feed.entry[0].title.$t+''+json.feed.entry[0].content.$t;
            } catch(e) {
                var msg = "";
            }
            if(json && lastmsg != msg) {
                lastmsg = msg; //刷新尾筆資料
                this.getJsonp(nowJUrl, 'chatboxy.refresh'); //呼叫Jsonp函式(刷新資料)
            } else {
                this.getJsonp(lastJUrl,'chatboxy.delay'); //呼叫Jsonp函式(掃描尾筆資料)
            }
        },
        delay : function(json) { //延遲查詢函式
                if(lastimer) { //清除記憶
                    window.clearInterval(lastimer); //清除計時器
                    lastimer = null; //清除計時器內容
                }
                lastimer = window.setTimeout(function() { //啟動計時器
                    chatboxy.lastscan(json);
                }, fpsboxy);
        },
        refresh : function(json) { //留言刷新器
            var title = ""; //暱稱
            var content = ""; //內容(日期+時間+訊息)
            var name = ""; //暱稱
            var color = ""; //暱稱顏色
            var date = ""; //日期
            var time = ""; //時間
            var chat = ""; //訊息
            var output = ""; //輸出暫存器
            for (var i = 0; i < json.feed.entry.length; ++i) {
                title = json.feed.entry[i].title.$t; //取得標題(暱稱)
                content = json.feed.entry[i].content.$t; //取得內容(日期+時間+訊息)
                date = content.substring(3, content.indexOf(" ",3)); //取得日期
                time = content.substring(content.indexOf(" ",3), content.indexOf(", c: @")); //取得時間
                chat = content.substring(content.indexOf(", c: @")+6, content.length); //取得訊息
                name = title.substring(title.indexOf("@")+1, title.length); //取得暱稱
                color = title.substring(0, title.indexOf("@")); //取得暱稱顏色
                output += time + "<span style=\"color:orange;\"> ‹ </span><span style=\"color:" + color + ";font-weight: bold;\">" +
                            name + "</span><span style=\"color:orange;\"> › </span> " + this.msgFilter(chat) + "<br />";
            }
            document.getElementById("chatboxy").innerHTML = output; //刷新資料
            this.lastscan();
        },
        msgFilter : function(msg) { //媽媽訊息過濾器
            var pos = 0; //空白位置首
            var nextpos = 0; //空白位置尾
            var output = ""; //輸出暫存器
            for(var i=0;nextpos!=-1;i++) {
                nextpos = msg.indexOf(" ",pos+1); //取得尾端空白位置
                str = msg.substring(pos, nextpos!=-1?nextpos:nextpos.length); //取得各段字串
                if(picture.test(str)) { //圖片類型
                    var reviseIE = "";
                    if(navigator.userAgent.toLowerCase().indexOf("msie") == -1)
                        reviseIE = "style=\"display:none;\"";
                    output += "<img src=\""+str+"\"" +
                                "onerror=\"chatboxy.image.error(this)\"" +
                                "onload=\"chatboxy.image.resize(this);\"" + reviseIE + " />";
                } else if(youtube.test(str)) { //水管類型
                    var vp = str.indexOf("v=") + 2; //v的get值開始位置
                    //取得v的get值,當字串『v=』後有『&』字元則取到該字元位置,否則取到字串尾
                    var v = str.substring(vp, str.indexOf("&", vp)!=-1?str.indexOf("&", vp):str.length);
                    output += " <button class=\"btn\" onclick=\"window.open('http://www.youtube.com/embed/" +
                                v + "?autoplay=1&loop=1&playlist=" + v +
                                "', 'images', 'catalogmode, scrollbars, width=480, height=390')\" />" +
                                "<span class=\"play\">Play</span></button>" +
                                "<a target=\"_blank\" href=\"http://youtu.be/" + v + "\">Youtu.be/" + v + "</a>";
                } else if(hyperlink.test(str)) { //超連結類型
                    output += " <a target=\"_blank\" href=\"" + str + "\">" + str + "</a>";
                } else { //一般訊息
                    output += " " + str;
                }
                pos = nextpos + 1; //尾端成為新首端
            }
            return output;
        },
        image : new function() { //暱稱類別
            return {
                resize : function(image) {
                    if(typeof image.width != 'undefined') {
                        var w = image.width;
                        var h = image.height;
                        image.removeAttribute('onload'); //移除onload事件
                        if(w > 0 && h>0 && w <= 200 && h <=200) { //圖示模式
                            image.title = "("+w+" x "+h+")";
                            if(navigator.userAgent.toLowerCase().indexOf("msie") == -1)
                                image.style.display = "inline";
                        } else if(w > 200 && w < 800 && h > 200 && h < 600) { //一般模式
                            image.title = "(Size: "+w+" x "+h+")";
                            image.parentNode.insertBefore(document.createElement('br'), image);
                            var p = image.parentNode;
                            if(p.lastChild == image) {
                                p.appendChild(document.createElement('br'));
                            } else {
                                p.insertBefore(document.createElement('br'), image.nextSibling);
                            }
                            if(navigator.userAgent.toLowerCase().indexOf("msie") == -1)
                                image.style.display = "inline";
                        } else { //大圖模式
                                image.title = "(Size: "+w+" x "+h+") Open in New Window";
                                image.parentNode.insertBefore(document.createElement('br'), image);
                                var alink = document.createElement('a'); //建立超連結物件
                                alink.target = "_blank"; //加入新視窗屬性
                                alink.href = image.src; //加入連結屬性
                                if(h > w) { //圖片為直圖
                                    w = w/h*600;
                                    h = 600;
                                } else { //圖片為橫圖
                                    h = h/w*800;
                                    w = 800;
                                }
                                image.width = w;
                                image.height = h;
                                if(navigator.userAgent.toLowerCase().indexOf("msie") == -1)
                                    image.style.display = "inline";
                                alink.appendChild(image.cloneNode(true)); //克隆自己
                                image.parentNode.replaceChild(alink, image); //取代舊物件
                        }
                    }
                },
                error : function(image) {
                    image.removeAttribute('onload'); //移除onload事件
                    image.removeAttribute('onerror'); //移除onerror事件
                    var alink = document.createElement('a'); //建立超連結物件
                    alink.target = "_blank"; //加入新視窗屬性
                    alink.href = image.src; //加入連結屬性
                    image.src = imgerror;
                    if(navigator.userAgent.toLowerCase().indexOf("msie") == -1)
                        image.style.display = "inline";
                    alink.appendChild(image.cloneNode(true)); //克隆自己
                    image.parentNode.replaceChild(alink, image); //取代舊物件
                }
            };
        },
        name : new function() { //暱稱類別
            return {
                change : function() { //變更暱稱
                    var name = document.getElementById('nameboxy');
                    name.onclick = function(){};
                    name.innerHTML = "<input type='text' style='text-align:center;width:80px;' " +
                                    "onmouseover='focus()' onfocus='select()' " + //選擇文字事件
                                    "onblur='chatboxy.name.mouse(this)' " + //滑鼠離開事件
                                    "onkeyup='chatboxy.name.keyboard(event,this)'" + //鍵盤ENTER事件
                                    "value='" + name.innerHTML + "'>";
                },
                mouse : function(me) { //滑鼠事件
                    var name = document.getElementById('nameboxy');
                    name.onclick = chatboxy.name.change;
                    name.innerHTML = me.value;
                    nameboxy = me.value;
                    chatboxy.cookie();
                },
                keyboard : function(e, me) { //鍵盤事件
                    e = e||window.event;
                    var key = e.charCode||e.keyCode;
                    if(key==13) {
                        this.mouse(me); //借用滑鼠事件
                    }
                }
            };
        },
        color : new function() { //顏色類別
            return {
                create : function() { //建立顏色Button
                    var bb = "";
                    var thecolor = document.getElementById('colorboxy');
                    var colors = new Array("Black", "Hotpink", "Tomato", "Darkorange", "Gold", //暱稱色碼
                                            "Lime", "Greenyellow", "Green", "Skyblue", "Royalblue", 
                                            "Blue", "Darkslateblue", "Purple", "Mediumorchid");
                    for(var i=0;i<colors.length;i++) {
                        bb = colors[i] != colorboxy?"0px solid":"3px solid"; //標記已選中之顏色
                        thecolor.innerHTML += "<div style='border-bottom: " + bb + "; color: " + //建立顏色按鈕
                            colors[i] + "; display: inline; cursor: pointer;' onClick='chatboxy.color.change(this)' title='" + colors[i] +"'>■</div> ";
                    }
                },
                change : function(me) { //變更顏色
                    this.clear();
                    me.style.borderBottom = "3px solid"; //標記已選中之顏色
                    colorboxy = me.title;
                    document.getElementById('nameboxy').style.color = colorboxy; //刷新畫面數值
                    chatboxy.cookie();
                },
                clear : function() { //清除重置
                    var thecolor = document.getElementById('colorboxy');
                    var colors = thecolor.getElementsByTagName('div');
                    for(var i=0;i<colors.length;i++) {
                        colors[i].style.borderBottom = "0px solid";
                    }
                }
            };
        },
        submit : new function() {
            return {
                send : function() { //發送事件
                    var msg = document.getElementById('c_msg').value;
                    var params = {'entry.0.single':colorboxy +'@'+nameboxy, 'entry.1.single':'@'+msg}; //欲發送項目
                    this.wait(); //顯示等待送出處理
                    this.post(params); //發送POST
                },
                enter : function(e) { //鍵盤事件
                    e = e||window.event;
                    var key = e.charCode||e.keyCode;
                    if(key==13) {
                        this.send(); //借用發送事件
                    }
                },
                post : function(params) { //虛擬表單送出POST
                    var rm = document.getElementById('formBoxy');
                    if(rm) rm.parentNode.removeChild(rm); //刪除舊虛擬表單
                    var form = document.createElement('form'); //建立新虛擬表單
                    form.target = 'iframeboxy'; //指向隱藏框架
                    form.id = 'formBoxy';
                    form.method = 'post';
                    form.action = postUrl;
                    for(var key in params) { //加入表單子項目
                        var input = document.createElement('input');
                        input.type = 'hidden';
                        input.name = key;
                        input.value = params[key];
                        form.appendChild(input);
                    }
                    document.getElementsByTagName('body')[0].appendChild(form); //產生虛擬表單
                    form.submit(); //送出表單
                },
                wait : function() { //等待狀態函式
                    var msg = document.getElementById('c_msg');
                    msg.style.background = "url(" + imgwait + ")"; //等待圖片
                    msg.style.backgroundRepeat = "no-repeat"; //圖片不重複
                    msg.disabled = true; //禁用輸入框
                    var btn = document.getElementById('sendboxy');
                    btn.disabled = true; //禁用送出鈕
                },
                done : function() { //完成狀態函式
                    var msg = document.getElementById('c_msg');
                    msg.style.background = "url(" + imgdone + ")"; //訊息圖片
                    msg.style.backgroundRepeat = "no-repeat"; //圖片不重複
                    msg.value = ""; //清除訊息
                    msg.disabled = false; //解開輸入框
                    var btn = document.getElementById('sendboxy');
                    btn.disabled = false; //解開送出鈕
                    msg.select();
                    window.clearInterval(lastimer); //中斷計時器
                    lastimer = null; //清除計時器內容
                    chatboxy.getJsonp(lastJUrl,'chatboxy.lastscan'); //繼續掃描
                }
            };
        },
        fps : function() { //重新啟動掃瞄器
            window.clearInterval(lastimer); //中斷計時器
            lastimer = null; //清除計時器內容
            this.lastscan(); //繼續掃描
        },
        cookie : function() { //Cookie設定
            var c_name = this.getCookie("nameboxy"); //暱稱值
            var c_color = this.getCookie("colorboxy"); //顏色值
            var c_fps = this.getCookie("fpsboxy"); //刷新數值
            /* 刷新Cookie紀錄 - Cookie有舊值,將舊值刷新成新值。 *
             * 繼承Cookie紀錄 - Cookie有舊值,將空值以舊值繼承。 *
             * 建立Cookie紀錄 - Cookie無 值,建立預設值於空值。 */
            if(c_name && nameboxy) { //刷新Cookie紀錄
                document.cookie = "nameboxy=" + escape(nameboxy); //刷新Cookie
            } else if(c_name && !nameboxy) { //繼承Cookie紀錄
                nameboxy = c_name;
                document.getElementById('nameboxy').innerHTML = nameboxy; //刷新顯示
            } else { //建立Cookie紀錄
                nameboxy = "Ghost";
                document.cookie = "nameboxy=" + escape(nameboxy);
            }
            if(c_color && colorboxy) { //刷新Cookie紀錄
                document.cookie = "colorboxy=" + escape(colorboxy); //刷新Cookie
            } else if(c_color && !colorboxy) { //繼承Cookie紀錄
                colorboxy = c_color;
                document.getElementById('nameboxy').style.color = colorboxy; //刷新顯示
            } else { //建立Cookie紀錄
                colorboxy = "Black"; //初始化預設值
                document.cookie = "colorboxy=" + escape(colorboxy); //存入Cookie
            }
            if(c_fps && fpsboxy) { //刷新Cookie紀錄
                fpsboxy = document.getElementById('fpsboxy').value;
                document.cookie = "fpsboxy=" + escape(fpsboxy); //刷新Cookie
                this.fps(); //重新啟動掃瞄器
            } else if(c_fps && !fpsboxy) { //繼承Cookie紀錄
                fpsboxy = c_fps;
                document.getElementById('fpsboxy').value = Number(fpsboxy); //刷新顯示
            } else { //建立Cookie紀錄
                fpsboxy = "1000";
                document.cookie = "fpsboxy=" + escape(fpsboxy);
            }
        },
        getCookie : function(name) { //取Cookie函式
            var n = name + "=";
            var nlen = n.length;
            var clen = document.cookie.length;
            var i = 0;
            while(i < clen) {
                var j = i + nlen;
                if(document.cookie.substring(i, j) == n) {
                    var endstr = document.cookie.indexOf(";", j);
                    if(endstr == -1)
                        endstr = clen;
                    return unescape(document.cookie.substring(j, endstr));
                }
                i = document.cookie.indexOf(" ", i) + 1;
                if(i == 0) break;
            }
            return null;
        },
        init : function() { //系統初始化
            this.cookie();
            this.color.create();
            document.getElementsByTagName('body')[0].innerHTML +=
            "<iframe name=\"iframeboxy\" onload=\"chatboxy.submit.done()\" style=\"display:none;\"></iframe>"; //產生腳本
        }
    };
};
chatboxy.init(); //啟動
</script>
說明:
原始碼由QQBoxy釋出, 轉載請遵守創用CC授權條款,謝謝。

沒有留言:

張貼留言