whale-cmp 0.1.0 → 0.2.0

package/index.d.ts

@@ -0,0 +1,17 @@
+export class WhaleCMP {
+    ele: Element
+    focusEl: Element
+    cmpManageId: Element
+    mainId: string
+    focus: string
+    confirmUI: object
+    agreementUI: object
+    open: Function
+    onKeydown: Function
+    visible: boolean
+}
+declare global {
+    interface Window {
+        QRCode: any
+    }
+}

package/index.js

@@ -1 +1 @@
-function e(e,t){document.getElementById(e)&&(document.getElementById(e).style.visibility=t)}var t=function(){function t(e){this.callback=e,this.focusEl=null,this.id="cmp-reset-confirm"}return t.prototype.open=function(){if(document.getElementById(this.id))document.getElementById(this.id).style.visibility="visible";else{var e=document.createElement("div");e.setAttribute("id",this.id),e.setAttribute("tabindex","-1"),e.innerHTML='\n                        <div class="confirm-title zeasn-cmp-reset-tip"></div>\n                        <div class="confirm-buttons">\n                            <div tabindex="-1" id="reset-no" class="zeasn-cmp-no"></div>\n                            <div tabindex="-1" id="reset-yes" class="zeasn-cmp-yes"></div>\n                        </div>  \n                    ',document.body.appendChild(e)}this.focusDefault()},t.prototype.left=function(){this.focusEl.previousElementSibling&&(this.focusEl.previousElementSibling.focus(),this.focusEl=document.activeElement)},t.prototype.right=function(){this.focusEl.nextElementSibling&&(this.focusEl.nextElementSibling.focus(),this.focusEl=document.activeElement)},t.prototype.enter=function(){"reset-no"===this.focusEl.id?this.close():"reset-yes"===this.focusEl.id&&this.reset()},t.prototype.reset=function(){this.close()},t.prototype.close=function(){e(this.id,"hidden"),this.callback()},t.prototype.focusDefault=function(){document.getElementById("reset-yes")&&(document.getElementById("reset-yes").focus(),this.focusEl=document.activeElement)},t}(),i=function(){function t(e){this.callback=e,this.focusEl=null,this.id="cmp-manage",this.addQrScript(),this.qrCount=300,this.show=!0}return t.prototype.open=function(){if(document.getElementById(this.id))document.getElementById(this.id).style.visibility="visible";else{var e=document.createElement("div");e.setAttribute("id",this.id),e.setAttribute("tabindex","-1"),e.innerHTML='\n            <div class="cmp-manage-header">\n              <div class="zeasn-cmp-manage-personalized"></div>\n              <div class="zeasn-cmp-back-exit"></div>\n            </div>\n            <div class="cmp-manage-container">\n              <div class="cmp-manage-sub-container">\n                <div class="cmp-manage-sub-container-title zeasn-cmp-website"></div>\n                <div class="cmp-item">\n                  <div class="cmp-manage-tip">1</div>\n                  <div class="cmp-manage-type">\n                      <div class="type-address zeasn-cmp-address">:</div>\n                      <div id="website-address">uconsent.zeasn.tv</div>\n                  </div>\n                </div>\n                <div class="cmp-item">\n                  <div class="cmp-manage-tip">2</div>\n                  <div class="cmp-manage-type">\n                    <div class="zeasn-cmp-prompted">:</div>\n                    <div class="code">\n                      <span id="code" style="font-weight: 500;"></span>\n                      <div id="cmp-timer" style="display: inline-block;">\n                        <div class="timer-tip">\n                          <span>i</span>\n                        </div>\n                        <div id="timer-count" style="display: inline-block;"></div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div id="qr-container"> \n                <div class="qr-container-title zeasn-cmp-scan-qr"></div>\n                <div class="qr-container-tip zeasn-cmp-scan-with-phone"></div>\n                <div id="qrcode-cover"></div>\n              </div>\n            </div>\n            <div>\n              <div class="cmp-manage-footer-tip zeasn-cmp-close-interface"></div>\n              <button tabindex="-1" id="refresh-btn" class="zeasn-cmp-refresh"></button>\n            </div>',document.body.appendChild(e)}this.getCode()},t.prototype.getCode=function(){var e=this;document.getElementById("refresh-btn").style.visibility="hidden",function(e){(e=e||{}).type=(e.type||"GET").toUpperCase(),e.dataType=e.dataType||"json";var t,i=e.data||"";(t=window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP")).onreadystatechange=function(){if(4==t.readyState){var i=t.status;i>=200&&i<300?e.success&&e.success(t.responseText,t.responseXML):e.fail&&e.fail(i)}},"GET"==e.type?(t.open("GET",e.url+i,!0),t.send(null)):"POST"==e.type?(t.open("POST",e.url,!0),t.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),t.send(i)):"PUT"==e.type&&(t.open("PUT",e.url,!0),t.setRequestHeader("Content-Type","application/x-www-form-urlencoded;  charset=UTF-8"),t.send(i))}({url:"https://tou.zeasn.tv/tou/cmp/qrcode/generate?consumerId",success:function(t){var i=JSON.parse(t).data;e.getQRcode(i.cmpPhoneUrl),document.getElementById("website-address").innerText=i.cmpPhoneDomain,document.getElementById("code").innerText=i.cmpCode?i.cmpCode.replace(/(\w{3})(\w{3})(\w{3})/g,"$1-$2-$3"):"",document.getElementById("cmp-timer").style.display="inline-block",document.getElementById("timer-count").innerText=e.getTimer()}})},t.prototype.getTimer=function(){return"".concat(Math.floor(this.qrCount/60),":").concat(this.qrCount%60>9?this.qrCount%60:"0"+this.qrCount%60)},t.prototype.addQrScript=function(){var e=document.createElement("script");e.src="https://adsdk.zeasn.tv/webstatic/homepage_web/ad/cmp/qr.js",document.getElementsByTagName("head")[0].appendChild(e)},t.prototype.getQRcode=function(t){if(window.QRCode){var i=document.getElementById("qrcode");i&&(i.style.display="none",i.parentNode.removeChild(i));var n=document.createElement("div");n.id="qrcode",n.style.cssText="",i=document.getElementById("qrcode"),document.getElementById("qr-container").appendChild(n),new window.QRCode("qrcode",{text:t,width:200,height:200,colorDark:"#000000",colorLight:"#ffffff",correctLevel:1}),e("qrcode-cover","hidden")}},t.prototype.close=function(){e(this.id,"hidden"),this.callback()},t}(),n=function(){function e(e){var t=this;this.ele=e,this.mainId="ad-consent-management",this.focus="main",this.agreementUI=new i((function(){t.show(),document.getElementById("row-manage-options").focus(),t.focusEl=document.activeElement}))}return e.prototype.init=function(){var e=document.createElement("div");e.setAttribute("id",this.mainId),e.setAttribute("tabindex","-1"),e.innerHTML='\n            <div id="row-manage-options" tabindex="-1">\n                <div id="consent-management" class="zeasn-cmp-ad-setting"></div>\n                <div id="manage-options" class="zeasn-cmp-manage-options"></div>\n                <div id="manage-options-img"></div>\n            </div>\n            <div id="row-advertising-id" tabindex="-1">\n                <div id="advertising-id">\n                    <div class="zeasn-cmp-advertising-id">:</div>\n                    <div id="cmp-whaleadid">adsaddsa</div>\n                </div> \n                <div id="advertising-id-rest" class="zeasn-cmp-reset"></div>\n            </div>',this.cmpManageId=e,document.body.appendChild(e),this.addCssFile("//adsdk.zeasn.tv/webstatic/homepage_web/ad/cmp/style.css"),this.addCssFile("//adsdk.zeasn.tv/webstatic/homepage_web/ad/cmp/lang/en.css")},e.prototype.addCssFile=function(e){var t=document.createElement("link");t.setAttribute("rel","stylesheet"),"file:"==location.protocol&&(e="https:"+e),t.setAttribute("href",e),document.body.appendChild(t)},e.prototype.open=function(){document.getElementById(this.mainId)||this.init(),this.focusEl=document.getElementById("row-manage-options"),document.getElementById(this.mainId).style.display="block"},e.prototype.show=function(){this.focus="main",this.elementVisibility(this.mainId,"visible")},e.prototype.close=function(){document.getElementById(this.mainId).style.display="none"},e.prototype.enter=function(){this.confirmUI&&"reset"===this.focus?this.confirmUI.enter():("row-manage-options"===this.focusEl.id&&this.agreementDialog(),"row-advertising-id"===this.focusEl.id&&this.confirmDialog())},e.prototype.up=function(){"main"===this.focus&&this.focusEl.previousElementSibling&&(this.focusEl.previousElementSibling.focus(),this.focusEl=document.activeElement)},e.prototype.down=function(){"main"===this.focus&&this.focusEl.nextElementSibling&&(this.focusEl.nextElementSibling.focus(),this.focusEl=document.activeElement)},e.prototype.left=function(){"reset"===this.focus&&this.confirmUI&&this.confirmUI.left()},e.prototype.right=function(){"reset"===this.focus&&this.confirmUI&&this.confirmUI.right()},e.prototype.back=function(){"main"===this.focus?this.close():"reset"===this.focus&&this.confirmUI?this.confirmUI.close():"agreement"===this.focus&&this.agreementUI&&this.agreementUI.close()},e.prototype.confirmDialog=function(){var e=this;this.elementVisibility(this.mainId,"hidden"),this.focus="reset",this.confirmUI||(this.confirmUI=new t((function(){e.show(),document.getElementById("row-advertising-id").focus(),e.focusEl=document.activeElement}))),this.confirmUI.open()},e.prototype.agreementDialog=function(){var e=this;this.elementVisibility(this.mainId,"hidden"),this.focus="agreement",this.agreementUI||(this.agreementUI=new i((function(){e.show(),document.getElementById("row-manage-options").focus(),e.focusEl=document.activeElement}))),this.agreementUI.open()},e.prototype.elementVisibility=function(e,t){document.getElementById(e)&&(document.getElementById(e).style.visibility=t)},e}();export{n as WhaleCMP};
+function e(e,t){document.getElementById(e)&&(document.getElementById(e).style.visibility=t)}var t=function(){function t(e){this.callback=e,this.focusEl=null,this.id="cmp-reset-confirm"}return t.prototype.open=function(){if(document.getElementById(this.id))document.getElementById(this.id).style.visibility="visible";else{var e=document.createElement("div");e.setAttribute("id",this.id),e.setAttribute("tabindex","-1"),e.style.zIndex="1000",e.style.margin="auto",e.style.right="0px",e.style.bottom="0px",e.innerHTML='\n                        <div class="confirm-title zeasn-cmp-reset-tip"></div>\n                        <div class="confirm-buttons">\n                            <div tabindex="-1" id="reset-no" class="zeasn-cmp-no"></div>\n                            <div tabindex="-1" id="reset-yes" class="zeasn-cmp-yes"></div>\n                        </div>  \n                    ',document.body.appendChild(e)}this.focusDefault()},t.prototype.left=function(){this.focusEl.previousElementSibling&&(this.focusEl.previousElementSibling.focus(),this.focusEl=document.activeElement)},t.prototype.right=function(){this.focusEl.nextElementSibling&&(this.focusEl.nextElementSibling.focus(),this.focusEl=document.activeElement)},t.prototype.enter=function(){"reset-no"===this.focusEl.id?this.close():"reset-yes"===this.focusEl.id&&this.reset()},t.prototype.reset=function(){this.close()},t.prototype.close=function(){e(this.id,"hidden"),this.callback()},t.prototype.focusDefault=function(){document.getElementById("reset-yes")&&(document.getElementById("reset-yes").focus(),this.focusEl=document.activeElement)},t}(),i=function(){function t(e){this.callback=e,this.focusEl=null,this.id="cmp-manage",this.addQrScript(),this.qrCount=300,this.show=!0}return t.prototype.open=function(){if(document.getElementById(this.id))document.getElementById(this.id).style.visibility="visible";else{var e=document.createElement("div");e.setAttribute("id",this.id),e.setAttribute("tabindex","-1"),e.style.zIndex="1000",e.innerHTML='\n            <div class="cmp-manage-header">\n              <div class="zeasn-cmp-manage-personalized"></div>\n              <div class="zeasn-cmp-back-exit"></div>\n            </div>\n            <div class="cmp-manage-container">\n              <div class="cmp-manage-sub-container">\n                <div class="cmp-manage-sub-container-title zeasn-cmp-website"></div>\n                <div class="cmp-item">\n                  <div class="cmp-manage-tip">1</div>\n                  <div class="cmp-manage-type">\n                      <div class="type-address zeasn-cmp-address">:</div>\n                      <div id="website-address">uconsent.zeasn.tv</div>\n                  </div>\n                </div>\n                <div class="cmp-item">\n                  <div class="cmp-manage-tip">2</div>\n                  <div class="cmp-manage-type">\n                    <div class="zeasn-cmp-prompted">:</div>\n                    <div class="code">\n                      <span id="code" style="font-weight: 500;"></span>\n                      <div id="cmp-timer" style="display: inline-block;">\n                        <div class="timer-tip">\n                          <span>i</span>\n                        </div>\n                        <div id="timer-count" style="display: inline-block;"></div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div id="qr-container"> \n                <div class="qr-container-title zeasn-cmp-scan-qr"></div>\n                <div class="qr-container-tip zeasn-cmp-scan-with-phone"></div>\n                <div id="qrcode-cover"></div>\n              </div>\n            </div>\n            <div>\n              <div class="cmp-manage-footer-tip zeasn-cmp-close-interface"></div>\n              <button tabindex="-1" id="refresh-btn" class="zeasn-cmp-refresh"></button>\n            </div>',document.body.appendChild(e)}this.getCode()},t.prototype.getCode=function(){var e=this;document.getElementById("refresh-btn").style.visibility="hidden",function(e){(e=e||{}).type=(e.type||"GET").toUpperCase(),e.dataType=e.dataType||"json";var t,i=e.data||"";(t=window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP")).onreadystatechange=function(){if(4==t.readyState){var i=t.status;i>=200&&i<300?e.success&&e.success(t.responseText,t.responseXML):e.fail&&e.fail(i)}},"GET"==e.type?(t.open("GET",e.url+i,!0),t.send(null)):"POST"==e.type?(t.open("POST",e.url,!0),t.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),t.send(i)):"PUT"==e.type&&(t.open("PUT",e.url,!0),t.setRequestHeader("Content-Type","application/x-www-form-urlencoded;  charset=UTF-8"),t.send(i))}({url:"https://tou.zeasn.tv/tou/cmp/qrcode/generate?consumerId",success:function(t){var i=JSON.parse(t).data;e.getQRcode(i.cmpPhoneUrl),document.getElementById("website-address").innerText=i.cmpPhoneDomain,document.getElementById("code").innerText=i.cmpCode?i.cmpCode.replace(/(\w{3})(\w{3})(\w{3})/g,"$1-$2-$3"):"",document.getElementById("cmp-timer").style.display="inline-block",document.getElementById("timer-count").innerText=e.getTimer()}})},t.prototype.getTimer=function(){return"".concat(Math.floor(this.qrCount/60),":").concat(this.qrCount%60>9?this.qrCount%60:"0"+this.qrCount%60)},t.prototype.addQrScript=function(){var e=document.createElement("script");e.src="https://adsdk.zeasn.tv/webstatic/homepage_web/ad/cmp/qr.js",document.getElementsByTagName("head")[0].appendChild(e)},t.prototype.getQRcode=function(t){if(window.QRCode){var i=document.getElementById("qrcode");i&&(i.style.display="none",i.parentNode.removeChild(i));var n=document.createElement("div");n.id="qrcode",n.style.cssText="",i=document.getElementById("qrcode"),document.getElementById("qr-container").appendChild(n),new window.QRCode("qrcode",{text:t,width:200,height:200,colorDark:"#000000",colorLight:"#ffffff",correctLevel:1}),e("qrcode-cover","hidden")}},t.prototype.close=function(){e(this.id,"hidden"),this.callback()},t}(),n=function(){function e(e){var t=this;this.ele=e,this.mainId="ad-consent-management",this.focus="main",this.visible=!1,this.agreementUI=new i((function(){t.show(),document.getElementById("row-manage-options").focus(),t.focusEl=document.getElementById("row-manage-options")}))}return e.prototype.init=function(){var e=document.createElement("div");e.setAttribute("id",this.mainId),e.setAttribute("tabindex","-1"),e.style.zIndex="1000",e.style.margin="auto",e.style.right="0px",e.style.bottom="0px",e.innerHTML='\n            <div id="row-manage-options" tabindex="-1">\n                <div id="consent-management" class="zeasn-cmp-ad-setting"></div>\n                <div id="manage-options" class="zeasn-cmp-manage-options"></div>\n                <div id="manage-options-img"></div>\n            </div>\n            <div id="row-advertising-id" tabindex="-1">\n                <div id="advertising-id">\n                    <div class="zeasn-cmp-advertising-id">:</div>\n                    <div id="cmp-whaleadid">adsaddsa</div>\n                </div> \n                <div id="advertising-id-rest" class="zeasn-cmp-reset"></div>\n            </div>',this.cmpManageId=e,document.body.appendChild(e),this.addCssFile("//adsdk.zeasn.tv/webstatic/homepage_web/ad/cmp/style.css"),this.addCssFile("//adsdk.zeasn.tv/webstatic/homepage_web/ad/cmp/lang/en.css")},e.prototype.addCssFile=function(e){var t=document.createElement("link");t.setAttribute("rel","stylesheet"),"file:"==location.protocol&&(e="https:"+e),t.setAttribute("href",e),document.body.appendChild(t)},e.prototype.open=function(){document.getElementById(this.mainId)||this.init(),document.getElementById(this.mainId).style.display="block",document.getElementById("row-manage-options").focus(),this.focusEl=document.activeElement,this.show()},e.prototype.show=function(){this.focus="main",this.elementVisibility(this.mainId,"visible"),this.visible=!0},e.prototype.close=function(){document.getElementById(this.mainId).style.display="none",this.visible=!1},e.prototype.enter=function(){this.confirmUI&&"reset"===this.focus?this.confirmUI.enter():("row-manage-options"===this.focusEl.id&&this.agreementDialog(),"row-advertising-id"===this.focusEl.id&&this.confirmDialog())},e.prototype.onKeydown=function(e){switch(e.keyCode){case 8:this.back();break;case 13:this.enter();break;case 37:this.left();break;case 38:this.up();break;case 39:this.right();break;case 40:this.down()}},e.prototype.up=function(){"main"===this.focus&&this.focusEl.previousElementSibling&&(this.focusEl.previousElementSibling.focus(),this.focusEl=document.activeElement)},e.prototype.down=function(){"main"===this.focus&&this.focusEl.nextElementSibling&&(this.focusEl.nextElementSibling.focus(),this.focusEl=document.activeElement)},e.prototype.left=function(){"reset"===this.focus&&this.confirmUI&&this.confirmUI.left()},e.prototype.right=function(){"reset"===this.focus&&this.confirmUI&&this.confirmUI.right()},e.prototype.back=function(){"main"===this.focus?this.close():"reset"===this.focus&&this.confirmUI?this.confirmUI.close():"agreement"===this.focus&&this.agreementUI&&this.agreementUI.close()},e.prototype.confirmDialog=function(){var e=this;this.elementVisibility(this.mainId,"hidden"),this.focus="reset",this.confirmUI||(this.confirmUI=new t((function(){e.show(),document.getElementById("row-advertising-id").focus(),e.focusEl=document.activeElement}))),this.confirmUI.open()},e.prototype.agreementDialog=function(){var e=this;this.elementVisibility(this.mainId,"hidden"),this.focus="agreement",this.agreementUI||(this.agreementUI=new i((function(){e.show(),document.getElementById("row-manage-options").focus(),e.focusEl=document.activeElement}))),this.agreementUI.open()},e.prototype.elementVisibility=function(e,t){document.getElementById(e)&&(document.getElementById(e).style.visibility=t)},e}();export{n as WhaleCMP};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "whale-cmp",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "",
   "main": "index.js",
   "scripts": {