นิยาย Code for Dek-d Customization > ลำดับตอนที่ #9 : [code] Chapter List Order - เรียงลำดับตอนในหน้าหลักของบทความตามต้องการ : Dek-D.com

ลำดับตอนที่ #9

ลำดับตอนที่ #9 : [code] Chapter List Order - เรียงลำดับตอนในหน้าหลักของบทความตามต้องการ

อัปเดตล่าสุด 13 พ.ค. 59

โค้ดนี้เป็นโค้ดที่ทำการเรียงรายชื่อตอนย่อยในหน้าหลักของบทความในแบบต่างๆ โดยปัจจุบันสามารถเรียงได้แบบ

เรียงด้วยเลยของตอน (คอลัมน์ "ตอน") แบบน้อยไปมาก
เรียงด้วยเลยของตอน (คอลัมน์ "ตอน") แบบมากไปน้อย
เรียงด้วยวันที่อัพเดทล่าสุด (คอลัมน์ "อัพเดท") แบบน้อยไปมาก
เรียงด้วยวันที่อัพเดทล่าสุด (คอลัมน์ "อัพเดท") แบบมากไปน้อย

นอกจากนี้โค้ดยังได้ทำการเพิ่มฟังก์ชันให้กับหัวข้อคอลัมน์ (ตอน, ชื่อตอน, และอัพเดท) โดยเมื่อผู้ใช้ทำการคลิกบนหัวข้อดังกล่าว จะทำให้การเรียงลำดับของรายชื่อตอนนั้นเปลี่ยนไป

เมื่อนำโค้ดนี้ไปเพิ่มลงในหน้าหลักจะต้องมีการเขียนโค้ดเพิ่มดังนี้เพื่อเป็นการเริ่มต้นการทำงานของโค้ด

var chapterListOrder = new ChapterListOrder()

และหลังจากนั้นจะสามารถคลิกที่หัวข้อคอลัม และ/หรือใช้คำสั่งนี้เพื่อเรียงลำดับตอนได้

chapterListOrder.reorder(ฟังก์ชันการเปรียบเทียบ, ลำดับ)

โดยฟังก์ชันการเปรียบเทียบมีสองฟังก์ชัน คือ

CompareFunction.compareChapterId - เพื่อทำการเรียงด้วยเลขของตอน (คอลัมน์ "ตอน")
CompareFunction.compareChapterUpdateDate - เพื่อทำการเรียงด้วยวันที่อัพเดทล่าสุด (คอลัมน์ "อัพเดท")

และลำดับสามารถใส่ได้หนึ่งอันจากสองอันนี้

chapterListOrder.ASCENDING_ORDER - เพื่อทำการเรียงจากน้อยไปมาก
chapterListOrder.DESCENDING_ORDER - เพื่อทำการเรียงจากมากไปน้อย

โดยตัวอย่างสามารถดูได้จากหน้าหลักของบทความนี้

Note: Subject to change to ChapterList, and it will include automatic pin option; Click listeners to change the order of the list will also be included. It will be able to automatic change some text tag into icon that appear before the rest of the text; however, tags that were used will be disappear from text...or maybe not?

$("document").ready(function () {
  ChapterListOrder = {};
  ChapterListOrder.months = ["ม.ค.", "ก.พ.", "มี.ค.", "เม.ย.", "พ.ค.", "มิ.ย.", "ก.ค.", "ส.ค.", "ก.ย.", "ต.ค.", "พ.ย.", "ธ.ค."];
  ChapterListOrder.getContainer = function () {
    return $((document.getElementsByClassName("box03")[0] || document.querySelector("#storydiv > center > table (n) > tbody > tr (2) > td > table (2)")).children[0]);
  };
  ChapterListOrder.getChapterList = function () {
     return this.getContainer().find("li:not(.box03_22)").get();
  };
  
  ChapterListOrder.Order = {};
  ChapterListOrder.Order.compare = function (a, b) {
    if (a < b) {
      return -1
    } else if (a > b) {
      return 1
    }
    return 0;
  };
  ChapterListOrder.Order.default = function (list) {
    list.sort(function (a, b) {
      var ta = $(a).find("div  p").text();
      var tb = $(b).find("div  p").text();
      
      var cmpResult = ChapterListOrder.Order.compare(parseInt(ta), parseInt(tb));
      
      return cmpResult;
    });
    return list;
  };
  ChapterListOrder.Order.reverse = function (list) {
    return list.reverse();
  };
  ChapterListOrder.Order.lastUpdated = function (list) {
    list.sort(function (a, b) {
      var ta = $(a).find("div p.t-right").text().split(" ");
      var tb = $(b).find("div p.t-right").text().split(" ");
      
      var cmpResult = ChapterListOrder.Order.compare(parseInt(ta[2]), parseInt(tb[2]));
      if (cmpResult == 0) {
        cmpResult = ChapterListOrder.Order.compare(ChapterListOrder.months.indexOf(ta[1]), ChapterListOrder.months.indexOf(tb[1]));
        if (cmpResult == 0) {
          cmpResult = ChapterListOrder.Order.compare(parseInt(ta[0]), parseInt(tb[0]));
        }
      }
      
      return cmpResult;
    });
    return list;
  };
  
  ChapterListOrder.changeOrder = function (list) {
    var c = ChapterListOrder.getContainer();
    c.find("li:not(.box03_22)").detach();
    $(list).insertBefore(c.find("div.clear"));
  };
  
  clo = ChapterListOrder;
  clo.o = clo.Order;
  
  clo.changeOrder(clo.o.reverse(clo.o.lastUpdated(clo.getChapterList())));
});

See the Pen Dek-D - Reversed Chapter List by Krerkkiat Chusap (@krerkkiat) on CodePen.

ติดตามเรื่องนี้

เก็บเข้าคอลเล็กชัน

ลำดับตอนที่ #9 : [code] Chapter List Order - เรียงลำดับตอนในหน้าหลักของบทความตามต้องการ

krerkkiat

ผู้อ่านนิยมอ่านต่อ ดูทั้งหมด

อีบุ๊ก ดูทั้งหมด

ความคิดเห็น

ความคิดเห็น

คืนค่าการตั้งค่าทั้งหมด

ลำดับตอนที่ #9 : [code] Chapter List Order - เรียงลำดับตอนในหน้าหลักของบทความตามต้องการ

krerkkiat

ผู้อ่านนิยมอ่านต่อ ดูทั้งหมด

อีบุ๊ก ดูทั้งหมด

ความคิดเห็น

ความคิดเห็น