Wapka: Dữ liệu tùy chỉnh (API Data)

By Asuna, Released at 26.08.2021 - 11:37 2792 View

Share on Facebook Share on Tweet Share on Google+

Demo:https://merci.wapka.co
Edited by @Dai & @Asuna

I) Control panel => Pages => Index => Codes
1. Tạo Data với PID giá trị 0 và CATEGORY không theo giá trị mặc định bằng API Data Creator
2. Thêm API Data Lister
Enter codes

<div class="phdr"><i class="fa fa-weixin" aria-hidden="true"></i> Trò chuyện / <i class="fa fa-clock-o" aria-hidden="true"></i> <span id="TimeNow"><script>var e=new Date;document.write(e.getHours()+":"+e.getMinutes()+":"+e.getSeconds());</script></span></div><div class="menu">
<div class="redactor_box" style="border-bottom: 1px solid #D7EDFC;margin-bottom:2px;"><style>.color a {float:left; display: block; width: 10px; height: 10px; margin: 1px; border: 1px solid black;}</div></style>
<ul class="redactor_toolbar">
 <li class="redactor_btn_group">
 <a href="javascript:tag('*text', '*')"><i class="fa fa-bold" aria-hidden="true"></i></a>
 <a href="javascript:tag('**text', '**')"><i class="fa fa-italic" aria-hidden="true"></i></a>
 <a href="javascript:tag('~~text', '~~')"><i class="fa fa-strikethrough" aria-hidden="true"></i></a>
 <a href="javascript:tag('[', '](https://)')"><i class="fa fa-link" aria-hidden="true"></i></a>
 </li>
 <li class="redactor_btn_group">
 <a href="javascript:tag('![](link', ')', '')"><i class="fa fa-picture-o" aria-hidden="true"></i></a>
 <a href="javascript:tag('{video:', 'link}', '')"><i class="fa fa-video-camera" aria-hidden="true"></i></a>
 <a href="javascript:tag('{youtube:', 'link}', '')"><i class="fa fa-youtube-play" aria-hidden="true"></i></a>
 </li>
</ul>
 <form onsubmit="return postComment()" id="form" autocomplete="off">
 <input id="username" name="username" type="hidden" placeholder="" required="" value=":VAR(USER_NAME);">
 <input id="userid" name="userid" type="hidden" placeholder="" required="" value=":VAR(USER_ID);">
 <center><textarea id="commentsend" name="msg" rows="4" placeholder="có thể sử dụng markdown" required=""></textarea></center></div>
 <input style="display:none" type="file" id="f" accept="image/*">
 <button id="comment-submit" name="submit" type="submit" id="submit"> Gửi bình luận <i class="fa fa-paper-plane-o" aria-hidden="true"></i> </button> 
 <a id="upload">[ <i class="fa fa-upload" aria-hidden="true"></i> ]</a>
</div>

Enter Config

<pid>0</pid><limit>1</limit>

Header

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
 integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.11/jquery.csv.min.js"
 integrity="sha512-Y8iWYJDo6HiTo5xtml1g4QqHtl/PO1w+dmUpQfQSOTqKNsMhExfyPN2ncNAe9JuJUSKzwK/b6oaNPop4MXzkwg=="
 crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/validator/13.1.1/validator.min.js"
 integrity="sha512-rVYlbsnsxljzvf4sgKzI6ncbNKKxupFhoQ/9ptW7R5fhKE9wQevsfUAZEbJ6xl+VyaiGm3lAKChPLoV/VuaZJA=="
 crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-linkify/2.1.9/linkify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-linkify/2.1.9/linkify-jquery.min.js"></script>
<script src="/marked-ext"></script>
<script src="/comment-section?page=/index"></script>

Footer

<div class="menu"><div id="commentSection"><div id="no-comments">Loading...</div></div></div>
<center><div class="pagination" id="phan-trang"></div></center>
<script src="/widget-chat"></script>

Item will be visible for

Admin & user

II) Từ bảng điều khiển (Control panel), tạo page comment-section với loại nội dung trang (Page Content Type) là application/javascript
1. Thêm API Data Lister
Enter codes

var thisPageUrl="https://:VAR(HOST);:GET(page);",visibleComments=[];function getQueryVariable(r){for(var e=window.location.search.substring(1).split("&"),t=0;t<e.length;t++){var i=e[t].split("=");if(i[0]==r)return i[1]}return!1}
function displayComments(n){if(null!=n&&""!==n){n=`timestamp,username,userid,comment
${n}`,commentList=$.csv.toObjects(n),console.log("Tong comment"+commentList.length);var e=1;getQueryVariable("page")&&(e=getQueryVariable("page")),commentList.reverse(),console.log("Page hien tai = "+e);var a,t=7*(e-1),o=7*e-1,s=t;console.log("Dau "+t),console.log("Cuoi"+o);var m=1;m=commentList.length%7>0?Math.floor(commentList.length/7)+1:Math.floor(commentList.length/7),console.log("Tong page "+m),$("#phan-trang").empty();var l=e-1,c=e-2,p=Number(e)+1,i=Number(e)+2;for(e>1&&$("#phan-trang").append('<a class="pagenav" href="?page='+l+'">«</a>'),e>3&&$("#phan-trang").append('<a class="pagenav" href="?page=1">1</a>'),e>4&&$("#phan-trang").append("..."),e>2&&$("#phan-trang").append('<a class="pagenav" href="?page='+c+'">'+c+"</a>"),e>1&&$("#phan-trang").append('<a class="pagenav" href="?page='+l+'">'+l+"</a>"),$("#phan-trang").append('<span class="current"><b>'+e+"</b></span>"),e<m-1&&$("#phan-trang").append('<a class="pagenav" href="?page='+p+'">'+p+"</a>"),e<m-2&&$("#phan-trang").append('<a class="pagenav" href="?page='+i+'">'+i+"</a>"),e<m-3&&$("#phan-trang").append("..."),e<m&&$("#phan-trang").append('<a class="pagenav" href="?page='+m+'">'+m+"</a>"),e<m&&$("#phan-trang").append('<a class="pagenav" href="?page='+p+'">»</a>'),a=t;a<=o;a++){if(s>=commentList.length){console.log("Load xong, id cuoi "+s);break}if(s++,visibleComments.includes(JSON.stringify(commentList[a])))return;var h=$(`





<div class="chatbox"><a href="/user?id=${commentList[a].userid}"><b>${commentList[a].username}</b></a> <small><font color="#999">(<i class="fa fa-clock-o"></i> ${commentList[a].timestamp})</font><br/>${marked(validator.escape(commentList[a].comment))}</div>







 		`).hide();$("#commentSection").append(h),h.fadeIn(),visibleComments.push(JSON.stringify(commentList[a])),$(".comment-item").linkify(),$("#no-comments").hide()}}else 0==visibleComments.length&&$("#no-comments").show()}function displayNewComments(n){if(null!=n&&""!==n){n=`timestamp,username,userid,comment
${n}`,commentList=$.csv.toObjects(n),console.log("Tong comment"+commentList.length);var e=1;getQueryVariable("page")&&(e=getQueryVariable("page")),commentList.reverse(),console.log("Page hien tai = "+e);var a,t=7*(e-1),o=7*e-1,s=t;console.log("Dau "+t),console.log("Cuoi"+o);var m=1;m=commentList.length%10>0?Math.floor(commentList.length/10)+1:Math.floor(commentList.length/10),console.log("Tong page "+m),$("#phan-trang").empty();var l=e-1,c=e-2,p=Number(e)+1,i=Number(e)+2;for(e>1&&$("#phan-trang").append('<a class="pagenav" href="?page='+l+'">«</a>'),e>3&&$("#phan-trang").append('<a class="pagenav" href="?page=1">1</a>'),e>4&&$("#phan-trang").append("..."),e>2&&$("#phan-trang").append('<a class="pagenav" href="?page='+c+'">'+c+"</a>"),e>1&&$("#phan-trang").append('<a class="pagenav" href="?page='+l+'">'+l+"</a>"),$("#phan-trang").append('<span class="current"><b>'+e+"</b></span>"),e<m-1&&$("#phan-trang").append('<a class="pagenav" href="?page='+p+'">'+p+"</a>"),e<m-2&&$("#phan-trang").append('<a class="pagenav" href="?page='+i+'">'+i+"</a>"),e<m-3&&$("#phan-trang").append("..."),e<m&&$("#phan-trang").append('<a class="pagenav" href="?page='+m+'">'+m+"</a>"),e<m&&$("#phan-trang").append('<a class="pagenav" href="?page='+p+'">»</a>'),a=t;a<=o;a++){if(s>=commentList.length){console.log("Load xong, id cuoi "+s);break}if(s++,visibleComments.includes(JSON.stringify(commentList[a])))return;var h=$(`
<div class="chatbox"><a href="/user?id=${commentList[a].userid}"><b>${commentList[a].username}</b></a> <small><font color="#999">(<i class="fa fa-clock-o"></i> ${commentList[a].timestamp})</font><br/>${marked(validator.escape(commentList[a].comment))}</div>


 		`).hide();$("#commentSection").prepend(h),h.fadeIn(),visibleComments.push(JSON.stringify(commentList[a])),$(".comment-item").linkify(),$("#no-comments").hide()}}else 0==visibleComments.length&&$("#no-comments").show()}function loadAllComments(){var n=encodeURIComponent(`SELECT A, C, D, E WHERE B = '${thisPageUrl}'`);fetch(`url lấy ở bước 6/gviz/tq?tqx=out:csv&sheet=comments&tq=${n}&headers=0`).then(n=>n.text()).then(n=>displayComments(n))}function loadNewComments(){var n=encodeURIComponent(`SELECT A, C, D, E WHERE B = '${thisPageUrl}'`);fetch(`url lấy ở bước 6/gviz/tq?tqx=out:csv&sheet=comments&tq=${n}&headers=0`).then(n=>n.text()).then(n=>displayNewComments(n))}loadAllComments(),setInterval(loadNewComments,6e3);const encodeFormData=n=>Object.keys(n).map(e=>encodeURIComponent(e)+"="+encodeURIComponent(n[e])).join("&");

Enter Config

<pid>0</pid><limit>1</limit>

Item will be visible for

All user

2. Thêm Code
Enter codes

function postComment(){var n=$("#username").val(),k=$("#userid").val(),e=$("#commentsend").val();return fetch("url lấy ở bước 4/formResponse",{method:"POST",mode:"no-cors",headers:{"Content-Type":"application/x-www-form-urlencoded"},body:encodeFormData({"entry article url":thisPageUrl,"entry username":n,"entry userid":k,"entry comment":e})}).then(n=>{$("#commentsend").val(""),loadNewComments()}).catch(n=>{console.log(n)}),!1}

Item will be visible for

Admin & user

III) Từ bảng điều khiển (Control panel), tạo page marked-ext với loại nội dung trang (Page Content Type) là application/javascript
Thêm Code
Enter codes

function mediaParseIdFromUrl(e,i){if("youtube"===e){var o=i.match(/^.*((youtu.be/)|(v/)|(/u/w/)|(embed/)|(watch?))??v?=?([^#&?]*).*/);return o&&11==o[7].length?o[7]:void 0}if("vimeo"===e){var v=i.match(/^.*vimeo.com/(d+)/);return v&&8==v[1].length?v[1]:void 0}if("viddler"===e){var d=i.match(/^.*((viddler.com/)|(v/)|(/u/w/)|(embed/)|(watch?))??v?=?([^#&?]*).*/);return d&&8==d[7].length?d[7]:void 0}if("dailymotion"===e){var t=i.match(/^.+dailymotion.com/((video|hub)/([^_]+))?[^#]*(#video=([^_&]+))?/);return t&&(t[5]||t[3])?t[5]?t[5]:t[3]?t[3]:void 0:void 0}}
const youtubeExt = {
 name: 'youtube',
 level: 'block',
 start (src) { return src.match(/{/)?.index },
 tokenizer (src, tokens) {
 const rule = /^{youtube:([^
]+)}$/;
 const match = rule.exec(src);
 if (match) {
 return {
 type: 'youtube',
 raw: match[0],
 src: mediaParseIdFromUrl('youtube', match[1].trim())
 }
 }
 },
 renderer (token) {
 return `
<div class="video-wrapper"><iframe width="727" height="409" src="https://www.youtube.com/embed/${token.src}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
`;
 }
}

const videoExt = {
 name: 'video',
 level: 'block',
 start (src) { return src.match(/{/)?.index },
 tokenizer (src, tokens) {
 const rule = /^{video:([^
]+)}$/;
 const match = rule.exec(src);
 if (match) {
 return {
 type: 'video',
 raw: match[0],
 src: match[1].trim()
 }
 }
 },
 renderer (token) {
 return `
<video class="kvideo" width="400" controls><source src="${token.src}" type="video/mp4"></video>
`;
 }
}
marked.use({ extensions: [youtubeExt] });
marked.use({ extensions: [videoExt] });

Item will be visible for

All user

IV) Từ bảng điều khiển (Control panel), tạo page widget-chat với loại nội dung trang (Page Content Type) là application/javascript
Thêm Code
Enter codes

function imgur(e,a){document.querySelector(e).onchange=function(){var e=this.files[0];if(e&&e.type.match(/image.*/)){var t=new FormData;t.append("image",e);var n=new XMLHttpRequest;n.open("POST","https://api.imgur.com/3/image.json"),n.upload.onprogress=function(e){if(e.lengthComputable){var t=Math.floor(e.loaded/e.total*100)+"%";a.loading(t)}},n.onload=function(){var e=JSON.parse(n.responseText);if(200===e.status&&!0===e.success){var t=e.data;a.loaded(t.link,t.type,t.size,t.datetime)}else window.alert("Lỗi: tải lên thất bại")},n.setRequestHeader("Authorization","Client-ID 71ae7b89253621e"),n.send(t)}else window.alert("Chỉ cho phép chọn ảnh")}}document.querySelector("#upload").onclick=function(){document.querySelector("#f").click()},imgur("#f",{loading:function(e){document.querySelector("#upload").innerHTML='[ <i class="fa fa-upload" aria-hidden="true"></i> '+e+" ]"},loaded:function(e,a,t,n){var o=$("textarea").val();$("textarea").val(o+" ![]("+e+")"),document.querySelector("#upload").innerHTML='[ <i class="fa fa-upload" aria-hidden="true"></i> ]'}});
function tag(e,t){if(document.selection)document.form.msg.focus(),document.form.document.selection.createRange().text=e+document.form.document.selection.createRange().text+t;else if(null!=document.forms.form.elements.msg.selectionStart){var n=document.forms.form.elements.msg,o=n.value,s=n.selectionStart,l=n.selectionEnd-n.selectionStart;n.value=o.substr(0,s)+e+o.substr(s,l)+t+o.substr(s+l)}else document.form.msg.value+=e+t}function show_hide(e){obj=document.getElementById(e),"none"==obj.style.display?obj.style.display="block":obj.style.display="none"}
function TimeNow(){var e=new Date,t=(e.getHours()+":"+e.getMinutes()+":"+e.getSeconds());document.getElementById("TimeNow").innerHTML=t}
setInterval(TimeNow, 1000);

Item will be visible for

All user

Danh sách chương (2) Link
Wapka: Dữ liệu tùy chỉnh (API Data) [ Đang đọc ]
Wap4: Hàm commentSection Đọc ngay