var EcpWebChatEntry = { //[可 設 定]WebChat根目錄 //clientRoot : "http://88.8.111.152/webchat_weixin", //國泰測試環境 //clientRoot : "http://poc.chainsea.com.tw:8050/webchat", //國泰正式環境 clientRoot : "https://neko.t-cat.com.tw/webchat", //clientRoot: location.protocol + "//" + location.host + "/webchat", //測試用 //WebChat Main Page clientUrl : "/index.html", //[可 設 定]開啟WebChat服務按鈕圖樣 //客服按鈕-頭像 //serviceIcon : "/image/btn_cathay_service.png", serviceIcon : "/image/Qbi_TradeMark_a.png", //客服按鈕-文字 //minServiceIcon: "/image/btn_cathay_service.png", minServiceIcon: "/image/Qbi_TradeMark_a.png", //關閉按鈕-x closeIcon : "/image/close_btn_l.png", //箭頭按鈕-> arrowIconHover: "/image/arrow_btn.png", //loadIcon : "/image/load.gif", loadIcon : "/image/Qbi_TradeMark_a.png", //serviceText : "智能客服", //[可 設 定]客服按鈕文字(HTML Encode) serviceText : "", //[可 設 定]客服按鈕文字(HTML Encode) closeText : "收摺", //[可 設 定]收摺按鈕文字(HTML Encode) closeIconWidth:32, //[可 設 定]最小化WebChat服務按鈕寬度 paneRightWidth:477, //[可 設 定]Panel寬度 buttonId : "EcpWebChatEntryButton", //[系統變數]WebChat服務按鈕ID paneId : "EcpWebChatEntryPane", //[系統變數]WebChat區塊ID paneLeftId : "EcpWebChatEntryLeft", //[系統變數]WebChat區塊左側ID paneRightId : "EcpWebChatEntryRight", //[系統變數]WebChat區塊右側ID frameId : "EcpWebChatIFrame", //[系統變數]WebChat IFrame ID loadId : "EcpWebChatLoad", maxPanelWidth : 0, //[系統變數]WebChat寬度 + 關閉按鈕寬度 panelWidth : 0, //[系統變數]動畫執行期間的Panel寬度 unitWidth : 30, //[可 設 定]動畫每毫秒單位位移寬度 interval : null, //[系統變數]計時器Object reqType : "get", //[可 設 定]設定iFrame傳遞參數時使用get|post version : "20151223", //[常 數]每次改版時修訂 bindEvent: function(ele, type, handle){ if (ele.addEventListener) { ele.addEventListener(type, handle); } else if (ele.attachEvent) { ele.attachEvent('on' + type, handle); } }, //Init WebChat---------------------------------------------- initialize: function(){ EcpWebChatEntry.clientUrl = EcpWebChatEntry.clientRoot + EcpWebChatEntry.clientUrl; //--- var plugResPath = EcpWebChatEntry.getPlugResPath(); EcpWebChatEntry.serviceIcon = plugResPath + EcpWebChatEntry.serviceIcon; EcpWebChatEntry.minServiceIcon = plugResPath + EcpWebChatEntry.minServiceIcon; EcpWebChatEntry.closeIcon = plugResPath + EcpWebChatEntry.closeIcon; EcpWebChatEntry.arrowIconHover = plugResPath + EcpWebChatEntry.arrowIconHover; EcpWebChatEntry.loadIcon = plugResPath + EcpWebChatEntry.loadIcon; EcpWebChatEntry.maxPanelWidth = EcpWebChatEntry.paneRightWidth + EcpWebChatEntry.closeIconWidth; if (document.body == null) { EcpWebChatEntry.bindEvent(window, 'load', EcpWebChatEntry.createCSS); //TODO //EcpWebChatEntry.bindEvent(window, 'load', EcpWebChatEntry.createPanel); EcpWebChatEntry.bindEvent(window, 'load', EcpWebChatEntry.initResizeEvent); EcpWebChatEntry.bindEvent(window, 'load', EcpWebChatEntry.createButton); //TODO EcpWebChatEntry.bindEvent(window, 'load', EcpWebChatEntry.doResize); } else { EcpWebChatEntry.createCSS(); //TODO //EcpWebChatEntry.createPanel(); EcpWebChatEntry.initResizeEvent(); EcpWebChatEntry.createButton(); //TODO EcpWebChatEntry.doResize(); } }, getPlugResPath:function(){ var srcPath = EcpWebChatEntry.clientRoot; //srcPath = srcPath.substring(0,srcPath.lastIndexOf("/")); //srcPath = srcPath.substring(0,srcPath.lastIndexOf("/")); return srcPath;// + "/plugin_res"; }, //Main Event--------------------------------------------------- doButtonClick: function(){ setTimeout(function(){}, 3000); //TODO EcpWebChatEntry.createPanel(); EcpWebChatEntry.doShowPanel(); EcpWebChatEntry.doResize(); var pane = document.getElementById(EcpWebChatEntry.paneId); pane.style.width = "0px"; pane.style.display = "block"; var paneRight = document.getElementById(EcpWebChatEntry.paneRightId); paneRight.style.width = "0px"; paneRight.style.display = "block"; }, doCloseButtonClick: function(){ EcpWebChatEntry.doHidePanel(); }, //Browser Resize---------------------------------------------------- initResizeEvent:function(){ EcpWebChatEntry.bindEvent(window, 'resize', function(){ EcpWebChatEntry.doResize(); }) }, doResize:function(){ var newHeight = Math.max( window.innerHeight||0, document.body.clientHeight, 0 ); var newPanelHeight = parseInt(newHeight * 0.8); var pane = document.getElementById(EcpWebChatEntry.paneId); var frame = document.getElementById(EcpWebChatEntry.frameId); var load = document.getElementById(EcpWebChatEntry.loadId); if(load != null){ load.style.height = newPanelHeight + "px"; } if (pane != null) { pane.style.height = newPanelHeight + "px"; } if (frame != null) { frame.style.height = newPanelHeight + "px"; } var newWidth = Math.max( window.innerWidth||0, document.body.clientWidth, 0 ); var button = document.getElementById(EcpWebChatEntry.buttonId); if(button != null){ //在未執行動畫前,直接透過CSS's class去控制按鈕的大小,但執行過動畫後會改變Tag屬性使class失效,故需再檢查按鈕現在是否可見,若為可見則設定正確大小,被免按鈕切半或浮空 //配合國泰新官網調整,小QIcon 一律顯示小圖,不顯示大圖Icon by Patty @20161102 //button.className = "EcpWebChat_min"; // if(parseInt(button.style.width) > 0){ // button.style.width = EcpWebChatEntry.maxMinButtonWidth + "px"; // } //width小於1024的以小圖icon呈現 if(newWidth >= 1024){ button.className = ""; if(parseInt(button.style.width) > 0){ button.style.width = EcpWebChatEntry.maxButtonWidth + "px"; } }else{ button.className = "EcpWebChat_min"; if(parseInt(button.style.width) > 0){ button.style.width = EcpWebChatEntry.maxMinButtonWidth + "px"; } } } }, //Panel Control--------------------------------- doShowPanel:function(){ EcpWebChatEntry.interval = setInterval(function(){ EcpWebChatEntry.showPanel() },1); }, doHidePanel:function(){ EcpWebChatEntry.interval = setInterval(function(){ EcpWebChatEntry.hidePanel() },1); }, showPanel:function(){ if(EcpWebChatEntry.panelWidth < EcpWebChatEntry.maxPanelWidth){ EcpWebChatEntry.panelWidth = EcpWebChatEntry.panelWidth + EcpWebChatEntry.unitWidth; if(EcpWebChatEntry.panelWidth > EcpWebChatEntry.maxPanelWidth){ EcpWebChatEntry.panelWidth = EcpWebChatEntry.maxPanelWidth; } var pane = document.getElementById(EcpWebChatEntry.paneId); pane.style.width = EcpWebChatEntry.panelWidth + "px"; var paneRight = document.getElementById(EcpWebChatEntry.paneRightId); if(EcpWebChatEntry.panelWidth - EcpWebChatEntry.closeIconWidth > 0){ paneRight.style.width = EcpWebChatEntry.panelWidth - EcpWebChatEntry.closeIconWidth + "px"; } }else{ if(EcpWebChatEntry.interval != null){ clearInterval(EcpWebChatEntry.interval); var paneLeft = document.getElementById(EcpWebChatEntry.paneLeftId); paneLeft.style.width = EcpWebChatEntry.closeIconWidth + "px"; EcpWebChatEntry.doHideButton(); } } },hidePanel:function(){ if(EcpWebChatEntry.panelWidth > 0){ EcpWebChatEntry.panelWidth = EcpWebChatEntry.panelWidth - EcpWebChatEntry.unitWidth; if(EcpWebChatEntry.panelWidth < 0){ EcpWebChatEntry.panelWidth = 0; } var pane = document.getElementById(EcpWebChatEntry.paneId); pane.style.width = EcpWebChatEntry.panelWidth + "px"; var paneRight = document.getElementById(EcpWebChatEntry.paneRightId); if(EcpWebChatEntry.panelWidth - EcpWebChatEntry.closeIconWidth > 0){ paneRight.style.width = EcpWebChatEntry.panelWidth - EcpWebChatEntry.closeIconWidth + "px"; }else{ paneRight.style.width = "0px"; } var paneLeft = document.getElementById(EcpWebChatEntry.paneLeftId); paneLeft.style.width = "0px"; }else{ if(EcpWebChatEntry.interval != null){ clearInterval(EcpWebChatEntry.interval); EcpWebChatEntry.doShowButton(); } } }, //========================================================= buttonInterval:null, maxButtonWidth:200, //maxButtonWidth:138, maxMinButtonWidth:40, buttonWidth:0, buttonUnitWidth:10, buttonMinUnitWidth:3, doShowButton:function(){ EcpWebChatEntry.buttonInterval = setInterval(function(){ EcpWebChatEntry.showButton() },EcpWebChatEntry.buttonUnitWidth); }, doHideButton:function(){ EcpWebChatEntry.buttonInterval = setInterval(function(){ EcpWebChatEntry.hideButton() },EcpWebChatEntry.buttonUnitWidth); }, showButton:function(){ //plug-in按鈕最大size與動畫單位移動距離設定 //區分大按鈕/小按鈕 var maxWidth = EcpWebChatEntry.maxButtonWidth; var unitWidth = EcpWebChatEntry.buttonUnitWidth; var button = document.getElementById(EcpWebChatEntry.buttonId); /*if(button != null && button.className == "EcpWebChat_min"){ maxWidth = EcpWebChatEntry.maxMinButtonWidth; unitWidth = EcpWebChatEntry.buttonMinUnitWidth; } */ //目前寬度小於最大寬度時,則執行寬度調整 if(EcpWebChatEntry.buttonWidth < maxWidth){ //計算新的按鈕寬度 EcpWebChatEntry.buttonWidth = EcpWebChatEntry.buttonWidth + unitWidth; if(EcpWebChatEntry.buttonWidth > maxWidth){ EcpWebChatEntry.buttonWidth = maxWidth; } //調整按鈕寬度 var button = document.getElementById(EcpWebChatEntry.buttonId); button.style.width = EcpWebChatEntry.buttonWidth + "px"; }else{//否則註銷Interval if(EcpWebChatEntry.buttonInterval != null){ clearInterval(EcpWebChatEntry.buttonInterval); } } },hideButton:function(){ if(EcpWebChatEntry.buttonWidth > 0){ EcpWebChatEntry.buttonWidth = EcpWebChatEntry.buttonWidth - EcpWebChatEntry.buttonUnitWidth; if(EcpWebChatEntry.buttonWidth < 0){ EcpWebChatEntry.buttonWidth = 0; } var pane = document.getElementById(EcpWebChatEntry.buttonId); pane.style.width = EcpWebChatEntry.buttonWidth + "px"; }else{ if(EcpWebChatEntry.buttonInterval != null){ clearInterval(EcpWebChatEntry.buttonInterval); } } }, //========================================================== //Chat Args----------------------------------------------- getFromTitle:function(){ var fromTitle = "No Title"; if(typeof(document.getElementsByTagName("title")[0])!=='undefined'){ fromTitle = document.getElementsByTagName("title")[0].innerHTML; } return encodeURIComponent(fromTitle); }, getFromDevice:function(){ var fromDevice = ""; if(/Android|iPhone|iPad/i.test(navigator.userAgent)){ fromDevice = "MOBILE_APP"; }else{ fromDevice = "WEB_SITE"; } return fromDevice; }, getFromUrl:function(){ var url = location.href, protocol = location.protocol, hostname = location.hostname, pathname = location.pathname, search = location.search; if(search){ search = search.replace(//g, ""); search = search.replace(/%3E/g, ""); search = search.replace(/'/g, ""); search = search.replace(/%27/g, ""); search = search.replace(/"/g, ""); search = search.replace(/%22/g, ""); search = search.replace(/\//g, ""); return protocol+"//"+hostname+pathname+search; }else{ return url; } }, //INIT UI-------------------------------------- createCSS:function(){ //Define CSS and insert to head tag var css = document.createElement('style'); css.type = 'text/css'; var styles = ""; styles+= "html, body { height:100%; } ";//處理HTML5文件宣告無法正確取得高度問題 styles+= "#EcpWebChatEntryPane{ "; styles+= " position: fixed; "; styles+= " bottom: 0px; "; styles+= " right: 0px; "; styles+= " width: 0px; "; styles+= " height: 600px; "; styles+= " padding: 0px; "; styles+= " font-size: 16px; "; styles+= " cursor: default; "; styles+= " box-sizing: border-box; "; styles+= " resize: both; "; styles+= " border: 0px solid rgb(64, 64, 128); "; styles+= " z-index: 99999; "; styles+= " display: block; "; styles+= "} "; styles+= "#EcpWebChatEntryButton{ "; styles+= " position: fixed; "; styles+= " bottom: 30%; "; styles+= " right: 0px; "; styles+= " width: 100px; "; //styles+= " width: 138px; "; styles+= " height: 100px; "; styles+= " cursor:pointer; "; styles+= " text-align:center; "; styles+= " line-height:30px; "; styles += " font-family:\"Microsoft JhengHei\",sans-serif; "; styles += " font-weight: bolder; "; styles += " color:#006f73; "; styles+= " z-index: 99998; "; styles+= " overflow: hidden; "; styles+= "} "; styles+= "#EcpWebChatEntryButton .EcpWebChat_text{ "; //styles+= " text-shadow: black 0.1em 0.1em 0.2em; "; styles += " font-weight: bolder; "; styles+= " padding-top:115px; "; styles+= " font-size:13px; "; styles+= "} "; styles += "#EcpWebChatEntryButton:hover{color: color: #006f73} "; styles += "#EcpWebChatEntryButton.EcpWebChat_min{ "; styles += " width: 180px; "; //styles += " width: 180px; "; styles += " height: 180px; "; styles += " padding: 0px; "; styles += " color:#006f73; "; styles += " font-family:\"Microsoft JhengHei\",sans-serif; "; styles += " font-weight: bold; "; styles+= "} "; styles+= "#EcpWebChatEntryButton.EcpWebChat_min:hover .EcpWebChat_arrow{ "; styles+= " margin: 8px 0 0 17px; "; styles+= " width:40px; "; styles+= " height: 30px; "; styles+= "} "; styles+= "#EcpWebChatEntryButton.EcpWebChat_min .EcpWebChat_text{ "; styles+= " padding-top:20px; "; styles+= " width:22px; "; styles+= " text-shadow: black 0.1em 0.1em 0.2em; "; styles+= " font-size:1.5em; "; styles+= " line-height:25px; "; styles+= " margin:0 8px; "; styles+= "} "; styles += "#EcpWebChatEntryButton.EcpWebChat_min:hover{color: #ffffff;} "; styles += "#EcpWebChatEntryButton.EcpWebChat_min:active{color:#006f73;} "; styles+= "#EcpWebChatPostFrameForm{ "; styles+= " display:none; "; styles+= "} "; styles+= "#EcpWebChatIFrame{ "; styles += " height:600px; "; styles+= " width:477px; "; styles+= " right:0 "; styles+= " border-radius: 10px; "; styles+= " -webkit-box-shadow: rgba(0, 0, 0, 0.15) -8px 10px 15px 0;"; styles+= " -moz-box-shadow: rgba(0, 0, 0, 0.15) -8px 10px 15px 0; "; styles+= " box-shadow: rgba(0, 0, 0, 0.15) -8px 10px 15px 0; "; styles+= "} "; styles+= "#EcpWebChatEntryLeft{ "; styles+= " width:0px; "; styles+= " float:left; "; styles+= " margin-top:10px; "; styles+= "} "; styles+= "#EcpWebChatEntryRight{ "; styles+= " width:0px; "; styles+= " float:right; "; styles+= "} "; styles+= "#EcpWebChatEntryClean{clear:both;} "; styles+= "#EcpWebChatCloseButton{ "; styles+= " background-repeat: no-repeat; "; styles+= " width:32px; "; styles+= " height:100px; "; styles+= " cursor:pointer; "; styles+= " font-family:\"Microsoft JhengHei\",sans-serif; "; styles+= " color:#000; "; styles+= " padding-top:10px; "; styles+= "} "; styles+= "#EcpWebChatCloseButton .EcpWebChat_text{ "; styles+= " padding-top:15px; "; styles+= " width:20px; "; styles+= " font-size:1.1em; "; styles+= " line-height:25px; "; styles+= " margin:0 5px; "; styles+= "} "; styles+= "#EcpWebChatCloseButton .EcpWebChat_text:hover{ "; styles+= " color: #ff0000; "; styles+= "} "; styles+= "#EcpWebChatCloseButton .EcpWebChat_arrow{ "; styles+= " margin-left:11px; "; styles+= " width:40px; "; styles+= "} "; styles+= "#EcpWebChatLoad{ "; styles+= " z-index:99997; "; styles+= " position: fixed; "; styles+= " text-align:center; "; styles+= " padding-top:150px; "; styles+= " background-color:#F8F6F1; "; styles+= " border-radius: 10px 0 10px 0;width:477px; "; styles+= " width:477px; "; styles+= "} "; //圖片CSS styles+= "#EcpWebChatCloseButton{background: url(" + EcpWebChatEntry.closeIcon + ") no-repeat 0 center;} " styles+= "#EcpWebChatEntryButton{background: url(" + EcpWebChatEntry.serviceIcon + ") no-repeat 0 center;background-size: contain;} " styles+= "#EcpWebChatEntryButton.EcpWebChat_min{background: url(" + EcpWebChatEntry.minServiceIcon + ") no-repeat 0 center;background-size: contain;} " //styles+= "#EcpWebChatEntryButton.EcpWebChat_min:hover .EcpWebChat_arrow{background: url(" + EcpWebChatEntry.arrowIconHover + ") no-repeat 0 center;} "; styles+= "#EcpWebChatCloseButton:hover .EcpWebChat_arrow{background: url(" + EcpWebChatEntry.arrowIconHover + ") no-repeat 0 center;} "; if (css.styleSheet){ css.styleSheet.cssText = styles; } else { css.appendChild(document.createTextNode(styles)); } document.getElementsByTagName("head")[0].appendChild(css); }, createButton: function(){ var button = document.getElementById(EcpWebChatEntry.buttonId); if (button == null) { var button = document.createElement("div"); button.id = EcpWebChatEntry.buttonId; button.onclick = EcpWebChatEntry.doButtonClick; button.innerHTML = "