|
|
| Line 5: |
Line 5: |
| <div id="saveStatus"></div> | | <div id="saveStatus"></div> |
|
| |
|
| <table style="width:100%;max-width:900px;border-collapse:collapse;"> | | <table id="LatestArticlesTable" style="width:100%;max-width:900px;border-collapse:collapse;"> |
| <tr> | | <tr><th>#</th><th>Title</th><th>Link</th></tr> |
| <th>#</th>
| |
| <th>Title</th>
| |
| <th>Link (href)</th>
| |
| </tr> | |
|
| |
|
| <tr><td>1</td><td><input id="title1" style="width:100%;padding:6px"></td><td><input id="link1" style="width:100%;padding:6px"></td></tr> | | <tr><td>1</td><td><input id="title1" style="width:100%;padding:6px"></td><td><input id="link1" style="width:100%;padding:6px"></td></tr> |
| Line 25: |
Line 21: |
| </table> | | </table> |
|
| |
|
| <button id="saveBtn" class="mw-ui-button mw-ui-progressive" | | <button id="saveLatestArticlesBtn" class="mw-ui-button mw-ui-progressive" style="margin-top:15px;"> |
| style="margin-top:15px;">Save Latest Articles</button> | | Save Latest Articles |
| | </button> |
|
| |
|
| <script>
| |
| $(document).ready(function () {
| |
|
| |
| // LOAD EXISTING JSON
| |
| new mw.Api().get({
| |
| action: "query",
| |
| titles: "LatestArticlesJSON",
| |
| prop: "revisions",
| |
| rvprop: "content",
| |
| formatversion: "2"
| |
| }).done(function (res) {
| |
| let content = res.query.pages[0].revisions[0].content;
| |
| let data = [];
| |
|
| |
| try { data = JSON.parse(content); } catch (e) {}
| |
|
| |
| // PREFILL
| |
| data.forEach((row, index) => {
| |
| $("#title" + (index + 1)).val(row.title);
| |
| $("#link" + (index + 1)).val(row.link);
| |
| });
| |
| });
| |
|
| |
| // SAVE JSON
| |
| $("#saveBtn").click(function () {
| |
|
| |
| let list = [];
| |
|
| |
| for (let i = 1; i <= 10; i++) {
| |
| let t = $("#title" + i).val().trim();
| |
| let l = $("#link" + i).val().trim();
| |
|
| |
| if (t && l) list.push({ title: t, link: l });
| |
| }
| |
|
| |
| new mw.Api().postWithEditToken({
| |
| action: "edit",
| |
| title: "LatestArticlesJSON",
| |
| text: JSON.stringify(list, null, 2),
| |
| summary: "Updated Latest Articles"
| |
| }).done(function () {
| |
| $("#saveStatus").html("<b style='color:green;'>✔ Saved successfully!</b>");
| |
| });
| |
|
| |
| });
| |
|
| |
| });
| |
| </script>
| |
|
| |
| </html>
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| <html>
| |
| <div class="latestArticlesSlider">
| |
| <div class="latestArticlesInner" id="LatestArticlesOutput"></div>
| |
| </div>
| |
|
| |
| <script>
| |
| $(document).ready(function () {
| |
|
| |
| new mw.Api().get({
| |
| action: "query",
| |
| titles: "LatestArticlesJSON",
| |
| prop: "revisions",
| |
| rvprop: "content",
| |
| formatversion: "2"
| |
| }).done(function (res) {
| |
|
| |
| let content = res.query.pages[0].revisions[0].content;
| |
| let data = [];
| |
|
| |
| try { data = JSON.parse(content); } catch(e){}
| |
|
| |
| let out = $("#LatestArticlesOutput");
| |
| out.html("");
| |
|
| |
| data.forEach(item => {
| |
| out.append(`<a class="latestArticleBtn" href="${item.link}">${item.title}</a>`);
| |
| });
| |
|
| |
| });
| |
|
| |
| });
| |
| </script>
| |
|
| |
| </html> | | </html> |
Comments