{"id":63598,"date":"2026-09-29T16:06:46","date_gmt":"2026-09-29T08:06:46","guid":{"rendered":"https:\/\/student.edcity.hk\/pri\/piccks-202526\/copy-of-fun-post\/"},"modified":"2026-10-08T15:27:10","modified_gmt":"2026-10-08T07:27:10","slug":"piccks-funpost-comics","status":"publish","type":"page","link":"https:\/\/student.edcity.hk\/pri\/zh-hant\/piccks\/funpost\/comics\/","title":{"rendered":"Comics"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"63598\" class=\"elementor elementor-63598\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e3c8720 e-flex e-con-boxed e-con e-parent\" data-id=\"e3c8720\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-feb49bc elementor-widget elementor-widget-shortcode\" data-id=\"feb49bc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"breadcrumbs\" vocab=\"https:\/\/schema.org\/\" typeof=\"BreadcrumbList\"><span property=\"itemListElement\" typeof=\"ListItem\"><a property=\"item\" typeof=\"WebPage\" href=\"https:\/\/student.edcity.hk\/pri\/en\/piccks\/202627\/home\/\" title=\"PICCKS Student Scheme\"><span property=\"name\">PICCKS Student Scheme<\/span><\/a><meta property=\"position\" content=\"1\" \/><\/span> &gt; <span property=\"itemListElement\" typeof=\"ListItem\"><a property=\"item\" typeof=\"WebPage\" href=\"https:\/\/student.edcity.hk\/pri\/en\/piccks\/funpost\/comics\/\" title=\"Comics\"><span property=\"name\">Comics<\/span><\/a><meta property=\"position\" content=\"2\" \/><\/span><\/div><style>div.breadcrumbs>span>a:hover{color:#E55125;}<\/style><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c5ef5f9 elementor-widget elementor-widget-html\" data-id=\"c5ef5f9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"category-filters\"><\/div>\r\n<div id=\"comic-grid\"><\/div>\r\n<div id=\"loading\" style=\"display: none;\"><\/div>\r\n<div id=\"no-comics\" style=\"display: none;\"><\/div>\r\n\r\n<script>\r\n  \/\/ Get language from URL path\r\n  var lang = window.location.pathname.split('\/').find(s => ['zh-hant', 'en', 'zh-hans'].includes(s)) || 'zh-hant'\r\n\r\n  \/\/ Dictionary for translations\r\n  const i18n = {\r\n    'zh-hant': {\r\n      noComics: '\u66ab\u7121\u6f2b\u756b\u53ef\u986f\u793a',\r\n      lastUpdated: '\u6700\u5f8c\u66f4\u65b0',\r\n    },\r\n    'en': {\r\n      noComics: 'No comics available',\r\n      lastUpdated: 'Last Updated',\r\n    },\r\n    'zh-hans': {\r\n      noComics: '\u6682\u65e0\u6f2b\u753b\u53ef\u663e\u793a',\r\n      lastUpdated: '\u6700\u540e\u66f4\u65b0',\r\n    }\r\n  }\r\n\r\n  \/\/ Pagination state\r\n  let allComics = []\r\n  let filteredComics = []\r\n  let currentPage = 1\r\n  const ITEMS_PER_PAGE = 12\r\n  let selectedCategories = []\r\n  let loadingMore = false\r\n  const COMIC_DOMAIN = window.location.hostname.includes('uat')\r\n    ? 'https:\/\/www-uat.hkreadingcity.net'\r\n    : 'https:\/\/www.hkreadingcity.net'\r\n\r\n  \/\/ Initialize page\r\n  $(function () {\r\n    loadComics()\r\n  })\r\n\r\n  \/\/ Load comics from API (only once)\r\n  async function loadComics() {\r\n    $('#loading').show()\r\n    try {\r\n      const today = new Date()\r\n      const cutoffYear = today.getFullYear() - 1\r\n      const cutoffMonthLastDay = new Date(cutoffYear, today.getMonth() + 1, 0).getDate()\r\n      const beforeDate = new Date(\r\n        cutoffYear,\r\n        today.getMonth(),\r\n        Math.min(today.getDate(), cutoffMonthLastDay)\r\n      )\r\n      beforeDate.setDate(beforeDate.getDate() - 1)\r\n      const beforeTime = [\r\n        beforeDate.getFullYear(),\r\n        String(beforeDate.getMonth() + 1).padStart(2, '0'),\r\n        String(beforeDate.getDate()).padStart(2, '0')\r\n      ].join('-')\r\n\r\n      const formData = new FormData()\r\n      formData.append('fx', 'get_commic_resource')\r\n      formData.append('before_time', beforeTime)\r\n\r\n      const response = await fetch(`${COMIC_DOMAIN}\/sites\/default\/api\/comic_api.php`, {\r\n        method: 'POST',\r\n        body: formData\r\n      })\r\n\r\n      if (!response.ok) {\r\n        throw new Error(`Comic API proxy returned HTTP ${response.status}`)\r\n      }\r\n\r\n      const result = await response.json()\r\n\r\n      allComics = result.status === 'success' && result.data && typeof result.data === 'object'\r\n        ? Object.values(result.data)\r\n        : []\r\n      const categories = result.categories || []\r\n\r\n      if (allComics.length === 0) {\r\n        $('#no-comics').text(i18n[lang].noComics).show()\r\n      } else {\r\n        $('#comic-grid').data('comics', allComics)\r\n        setupCategoryFilters(categories)\r\n        selectedCategories = ['all']\r\n        filteredComics = filterComics(allComics, selectedCategories)\r\n        renderComicsPage(1)\r\n        setupInfiniteScroll()\r\n      }\r\n    } catch (error) {\r\n      console.error('Failed to load comics:', error)\r\n      $('#no-comics').text(i18n[lang].noComics).show()\r\n    } finally {\r\n      $('#loading').hide()\r\n    }\r\n  }\r\n\r\n  \/\/ Filter comics by selected categories\r\n  function filterComics(comics, selectedCategories) {\r\n    const showAll = selectedCategories.includes('all') || selectedCategories.length === 0\r\n    return showAll\r\n      ? comics\r\n      : comics.filter(comic => comic.cate && selectedCategories.includes(comic.cate.slug))\r\n  }\r\n\r\n  \/\/ Render a page of comics\r\n  function renderComicsPage(page) {\r\n    if (page === 1) {\r\n      $('#comic-grid').empty()\r\n      $('#no-comics').hide()\r\n    }\r\n    const startIdx = (page - 1) * ITEMS_PER_PAGE\r\n    const endIdx = startIdx + ITEMS_PER_PAGE\r\n    const pageComics = filteredComics.slice(startIdx, endIdx)\r\n    if (pageComics.length === 0 && page === 1) {\r\n      $('#no-comics').text(i18n[lang].noComics).show()\r\n      return\r\n    }\r\n    pageComics.forEach(comic => {\r\n      const comicTitle = comic.title?.chi || ''\r\n      const imagePath = comic.image?.chi || ''\r\n      const comicImage = \/^https?:\\\/\\\/\/i.test(imagePath)\r\n        ? imagePath\r\n        : `${COMIC_DOMAIN}${imagePath}`\r\n      const comicLink = `${COMIC_DOMAIN}\/resource\/${comic.id}`\r\n      const lastUpdated = comic.last_modify?.modify_date?.date?.slice(0, 10) || ''\r\n      const comicElement = `\r\n        <div class=\"comic-item\">\r\n          <a href=\"${comicLink}\">\r\n            <div class=\"comic-thumbnail\">\r\n              <img decoding=\"async\" src=\"${comicImage}\" alt=\"${comicTitle}\">\r\n            <\/div>\r\n            <h3>${comicTitle}<\/h3>\r\n          <\/a>\r\n          <div class=\"comic-meta\">\r\n            <p class=\"comic-last-updated\">${i18n[lang].lastUpdated}: ${lastUpdated}<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      `\r\n      $('#comic-grid').append(comicElement)\r\n    })\r\n    loadingMore = false\r\n  }\r\n\r\n  \/\/ Setup infinite scroll\r\n  function setupInfiniteScroll() {\r\n    $(window).off('scroll.aicorner').on('scroll.aicorner', function () {\r\n      if (loadingMore) return\r\n      if ($(window).scrollTop() + $(window).height() > $(document).height() - 200) {\r\n        \/\/ Near bottom, load next page\r\n        if (currentPage * ITEMS_PER_PAGE < filteredComics.length) {\r\n          loadingMore = true\r\n          currentPage++\r\n          renderComicsPage(currentPage)\r\n        }\r\n      }\r\n    })\r\n  }\r\n\r\n  \/\/ Setup category filters using the categories data from API\r\n  function setupCategoryFilters(categories) {\r\n    \/\/ Get comics data\r\n    const comics = $('#comic-grid').data('comics') || []\r\n\r\n    \/\/ Add change handler to filter checkboxes\r\n    $('.filter-checkbox').on('change', function () {\r\n      const $this = $(this)\r\n      const category = $this.data('category')\r\n      const isChecked = $this.prop('checked')\r\n\r\n      \/\/ Handle \"All\" checkbox behavior\r\n      if (category === 'all') {\r\n        \/\/ Check\/uncheck all other checkboxes when \"All\" changes\r\n        $('.filter-checkbox').not(this).prop('checked', isChecked)\r\n      } else {\r\n        \/\/ If unchecking any category, also uncheck \"All\"\r\n        if (!isChecked) {\r\n          $('.filter-checkbox[data-category=\"all\"]').prop('checked', false)\r\n        }\r\n        \/\/ If all individual categories are checked, check \"All\" too\r\n        else if ($('.filter-checkbox:not([data-category=\"all\"]):checked').length === categories.length) {\r\n          $('.filter-checkbox[data-category=\"all\"]').prop('checked', true)\r\n        }\r\n      }\r\n\r\n      \/\/ Get all selected categories\r\n      selectedCategories = $('.filter-checkbox:checked').map(function () {\r\n        return $(this).data('category')\r\n      }).get()\r\n      \/\/ Filter and re-render comics\r\n      filteredComics = filterComics(allComics, selectedCategories)\r\n      currentPage = 1\r\n      renderComicsPage(currentPage)\r\n    })\r\n  }\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":4,"featured_media":0,"parent":34118,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-63598","page","type-page","status-publish","hentry"],"pp_statuses_selecting_workflow":false,"pp_workflow_action":"current","pp_status_selection":"publish","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Comics - PICCKS 2025-26 - EdCity - Student (Pri)<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/student.edcity.hk\/pri\/en\/piccks\/funpost\/comics\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comics - PICCKS 2025-26 - EdCity - Student (Pri)\" \/>\n<meta property=\"og:url\" content=\"https:\/\/student.edcity.hk\/pri\/zh-hant\/piccks\/funpost\/comics\/\" \/>\n<meta property=\"og:site_name\" content=\"EdCity - Student (Pri)\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-08T07:27:10+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/student.edcity.hk\\\/pri\\\/zh-hant\\\/piccks\\\/funpost\\\/comics\\\/\",\"url\":\"https:\\\/\\\/student.edcity.hk\\\/pri\\\/zh-hant\\\/piccks\\\/funpost\\\/comics\\\/\",\"name\":\"Comics - PICCKS 2025-26 - EdCity - Student (Pri)\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/student.edcity.hk\\\/pri\\\/en\\\/#website\"},\"datePublished\":\"2026-09-29T08:06:46+00:00\",\"dateModified\":\"2026-10-08T07:27:10+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/student.edcity.hk\\\/pri\\\/zh-hant\\\/piccks\\\/funpost\\\/comics\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/student.edcity.hk\\\/pri\\\/zh-hant\\\/piccks\\\/funpost\\\/comics\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/student.edcity.hk\\\/pri\\\/zh-hant\\\/piccks\\\/funpost\\\/comics\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/student.edcity.hk\\\/pri\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"PICCKS 2025-26\",\"item\":\"https:\\\/\\\/student.edcity.hk\\\/pri\\\/en\\\/piccks\\\/202526\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comics\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/student.edcity.hk\\\/pri\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/student.edcity.hk\\\/pri\\\/en\\\/\",\"name\":\"\u9999\u6e2f\u6559\u80b2\u57ce - \u5c0f\u5b78\u751f\",\"description\":\"Student (Pri)\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/student.edcity.hk\\\/pri\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Comics - PICCKS 2025-26 - EdCity - Student (Pri)","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/student.edcity.hk\/pri\/en\/piccks\/funpost\/comics\/","og_locale":"en_US","og_type":"article","og_title":"Comics - PICCKS 2025-26 - EdCity - Student (Pri)","og_url":"https:\/\/student.edcity.hk\/pri\/zh-hant\/piccks\/funpost\/comics\/","og_site_name":"EdCity - Student (Pri)","article_modified_time":"2026-10-08T07:27:10+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/student.edcity.hk\/pri\/zh-hant\/piccks\/funpost\/comics\/","url":"https:\/\/student.edcity.hk\/pri\/zh-hant\/piccks\/funpost\/comics\/","name":"Comics - PICCKS 2025-26 - EdCity - Student (Pri)","isPartOf":{"@id":"https:\/\/student.edcity.hk\/pri\/en\/#website"},"datePublished":"2026-09-29T08:06:46+00:00","dateModified":"2026-10-08T07:27:10+00:00","breadcrumb":{"@id":"https:\/\/student.edcity.hk\/pri\/zh-hant\/piccks\/funpost\/comics\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/student.edcity.hk\/pri\/zh-hant\/piccks\/funpost\/comics\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/student.edcity.hk\/pri\/zh-hant\/piccks\/funpost\/comics\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/student.edcity.hk\/pri\/en\/"},{"@type":"ListItem","position":2,"name":"PICCKS 2025-26","item":"https:\/\/student.edcity.hk\/pri\/en\/piccks\/202526\/"},{"@type":"ListItem","position":3,"name":"Comics"}]},{"@type":"WebSite","@id":"https:\/\/student.edcity.hk\/pri\/en\/#website","url":"https:\/\/student.edcity.hk\/pri\/en\/","name":"\u9999\u6e2f\u6559\u80b2\u57ce - \u5c0f\u5b78\u751f","description":"Student (Pri)","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/student.edcity.hk\/pri\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/student.edcity.hk\/pri\/en\/wp-json\/wp\/v2\/pages\/63598","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/student.edcity.hk\/pri\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/student.edcity.hk\/pri\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/student.edcity.hk\/pri\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/student.edcity.hk\/pri\/en\/wp-json\/wp\/v2\/comments?post=63598"}],"version-history":[{"count":20,"href":"https:\/\/student.edcity.hk\/pri\/en\/wp-json\/wp\/v2\/pages\/63598\/revisions"}],"predecessor-version":[{"id":64917,"href":"https:\/\/student.edcity.hk\/pri\/en\/wp-json\/wp\/v2\/pages\/63598\/revisions\/64917"}],"up":[{"embeddable":true,"href":"https:\/\/student.edcity.hk\/pri\/en\/wp-json\/wp\/v2\/pages\/34118"}],"wp:attachment":[{"href":"https:\/\/student.edcity.hk\/pri\/en\/wp-json\/wp\/v2\/media?parent=63598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}