{"id":343,"date":"2024-06-28T11:29:44","date_gmt":"2024-06-28T10:29:44","guid":{"rendered":"https:\/\/phc.giantpeachtest.com\/?page_id=343"},"modified":"2024-08-29T13:03:03","modified_gmt":"2024-08-29T12:03:03","slug":"news","status":"publish","type":"page","link":"https:\/\/phc.giantpeachtest.com\/zh-hant\/news\/","title":{"rendered":"News"},"content":{"rendered":"<div class=\"block-69ee329de5c6e giantpeach-banner relative\">\n  <div class=\"relative -z-10\">\n          <picture class=\"block not-prose overflow-hidden  h-screen !h-svh min-h-[840px] lg:min-h-[500px]\">\n    <source srcset=\"https:\/\/phc.giantpeachtest.com\/img\/2024\/06\/Wellness_Clinic_img_1.jpg?w=375&amp;h=480&amp;fit=crop&amp;dpr=2&amp;q=100&amp;fm=webp\" media=\"(max-width: 767px)\" type=\"image\/webp\" \/>\n  \n    <source srcset=\"https:\/\/phc.giantpeachtest.com\/img\/2024\/06\/Wellness_Clinic_img_1.jpg?w=375&amp;h=480&amp;fit=crop&amp;dpr=2&amp;q=100\" media=\"(max-width: 767px)\" \/>\n  \n    <source srcset=\"https:\/\/phc.giantpeachtest.com\/img\/2024\/06\/Wellness_Clinic_img_1.jpg?w=1024&amp;h=768&amp;fit=crop&amp;dpr=2&amp;q=100&amp;fm=webp\" media=\"(min-width: 768px) and (max-width: 1023px)\" type=\"image\/webp\" \/>\n  \n    <source srcset=\"https:\/\/phc.giantpeachtest.com\/img\/2024\/06\/Wellness_Clinic_img_1.jpg?w=1024&amp;h=768&amp;fit=crop&amp;dpr=2&amp;q=100\" media=\"(min-width: 768px) and (max-width: 1023px)\" \/>\n  \n    <source srcset=\"https:\/\/phc.giantpeachtest.com\/img\/2024\/06\/Wellness_Clinic_img_1.jpg?w=1600&amp;h=900&amp;fit=crop&amp;dpr=2&amp;q=100&amp;fm=webp\" media=\"(min-width: 1024px)\" type=\"image\/webp\" \/>\n  \n    <source srcset=\"https:\/\/phc.giantpeachtest.com\/img\/2024\/06\/Wellness_Clinic_img_1.jpg?w=1600&amp;h=900&amp;fit=crop&amp;dpr=2&amp;q=100\" media=\"(min-width: 1024px)\" \/>\n  \n    <img loading=\"lazy\" decoding=\"async\" class=\" w-full !h-full object-cover\" src=\"https:\/\/phc.giantpeachtest.com\/img\/2024\/06\/Wellness_Clinic_img_1.jpg?w=1600&amp;h=900&amp;fit=crop&amp;dpr=2&amp;q=100\" alt=\"\"  \n    width=\"1600\" height=\"900\" \/>\n  \n  <\/picture>      <\/div>\n  <div class=\"absolute left-0 top-0 w-full flex items-center justify-center bg-black\/40 has-text-color has-beige-color  h-full \">\n    <div class=\"content\">\n      <div class=\"md:px-6 lg:px-0 md:w-4\/5 lg:w-3\/5 mx-auto\">\n        <div class=\"transition-block-prose prose text-center !static\">\n\n<p class=\"has-text-align-center is-style-eyebrow\"><\/p>\n\n\n\n<h1 class=\"wp-block-heading is-style-h2\">The Sphere<\/h1>\n\n\n\n<p class=\"has-text-align-center\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, phasellus eget lorem lacinia<\/p>\n\n<\/div>\n      <\/div>\n    <\/div>\n\n          <button type=\"button\" class=\"banner-scroll-down absolute bottom-0 left-1\/2 -translate-x-1\/2 text-[0px] text-center\" onclick=\"this.closest('.giantpeach-banner')?.nextElementSibling?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });\">\n        <span class=\"block uppercase text-12 lg:text-14 tracking-widest font-normal whitespace-nowrap\">Browse articles<\/span>\n        <div class=\"inline-block w-[2px] relative mt-5\">\n          <div class=\"absolute bottom-full left-0 bg-current h-[14px] w-full anim-anim-scroll-icon\"><\/div>\n          <div class=\"h-[46px] bg-current opacity-25\"><\/div>\n        <\/div>\n      <\/button>\n      <\/div>\n<\/div>\n\n<section \n  class=\"block-69ee329deb8ed giantpeach-newslist content py-14 lg:py-20 \"\n  x-data=\"newsList(8, '\/wp-json\/schnapps\/v1\/news-items')\" \n>\n        \n<div x-ref=\"categories\" class=\"categories relative mb-20\">\n  <h2 class=\"text-center mb-11 text-26\">Filter Articles<\/h2>\n\n  <ul class=\"flex justify-center lg:justify-center flex-wrap gap-2 lg:gap-3\">\n    <li>\n      <input class=\"peer\/catradio !hidden\" type=\"radio\" x-model=\"selectedCategory\" name=\"cat\" value=\"all\" x-on:change=\"updateSelectedCategory('all')\" id=\"cat-all\">\n      <label for=\"cat-all\" class=\"duration-100 text-center relative inline-block !inline-flex items-center justify-center text-18 min-h-[46px] px-4 py-2 flex-wrap text-center bg-green-light\/25 text-green-dark rounded text-16 cursor-pointer peer-checked\/catradio:text-beige peer-checked\/catradio:bg-orange\" data-category=\"\">All resources<\/label>\n    <\/li>\n\n          <li>\n        <input class=\"peer\/catradio !hidden\" type=\"radio\" x-model=\"selectedCategory\" name=\"cat\" value=\"overall-health\" x-on:change=\"updateSelectedCategory('overall-health')\" id=\"cat-overall-health\">\n        <label for=\"cat-overall-health\" class=\"duration-100 text-center relative inline-block !inline-flex items-center justify-center text-18 min-h-[46px] px-4 py-2 flex-wrap text-center bg-green-light\/25 text-green-dark rounded text-16 cursor-pointer peer-checked\/catradio:text-beige peer-checked\/catradio:bg-orange\" data-category=\"overall-health\">Overall Health<\/label>\n      <\/li>\n      <\/ul>\n\n      <div \n    class=\"absolute top-full left-1\/2 -translate-x-1\/2 mt-6 [&#038;_svg]:w-[40px] duration-100\"\n    :class=\"isLoading ? 'opacity-100 visible' : 'invisible opacity-0'\"\n  >\n    <!-- By Sam Herbert (@sherb), for everyone. More @ http:\/\/goo.gl\/7AJzbL -->\n<svg width=\"120\" height=\"30\" viewBox=\"0 0 120 30\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"#b4644a\">\n    <circle cx=\"15\" cy=\"15\" r=\"15\">\n        <animate attributeName=\"r\" from=\"15\" to=\"15\"\n                 begin=\"0s\" dur=\"0.8s\"\n                 values=\"15;9;15\" calcMode=\"linear\"\n                 repeatCount=\"indefinite\" \/>\n        <animate attributeName=\"fill-opacity\" from=\"1\" to=\"1\"\n                 begin=\"0s\" dur=\"0.8s\"\n                 values=\"1;.5;1\" calcMode=\"linear\"\n                 repeatCount=\"indefinite\" \/>\n    <\/circle>\n    <circle cx=\"60\" cy=\"15\" r=\"9\" fill-opacity=\"0.3\">\n        <animate attributeName=\"r\" from=\"9\" to=\"9\"\n                 begin=\"0s\" dur=\"0.8s\"\n                 values=\"9;15;9\" calcMode=\"linear\"\n                 repeatCount=\"indefinite\" \/>\n        <animate attributeName=\"fill-opacity\" from=\"0.5\" to=\"0.5\"\n                 begin=\"0s\" dur=\"0.8s\"\n                 values=\".5;1;.5\" calcMode=\"linear\"\n                 repeatCount=\"indefinite\" \/>\n    <\/circle>\n    <circle cx=\"105\" cy=\"15\" r=\"15\">\n        <animate attributeName=\"r\" from=\"15\" to=\"15\"\n                 begin=\"0s\" dur=\"0.8s\"\n                 values=\"15;9;15\" calcMode=\"linear\"\n                 repeatCount=\"indefinite\" \/>\n        <animate attributeName=\"fill-opacity\" from=\"1\" to=\"1\"\n                 begin=\"0s\" dur=\"0.8s\"\n                 values=\"1;.5;1\" calcMode=\"linear\"\n                 repeatCount=\"indefinite\" \/>\n    <\/circle>\n<\/svg>\n  <\/div>\n<\/div>  \n  \n      <div x-ref=\"list\" class=\"grid items-start md:grid-cols-2 lg:grid-cols-2 lg:px-20 xl:px-0 xl:grid-cols-4 gap-5 lg:gap-x-[25px] lg:gap-y-[30px]\"><\/div>\n  \n        \n<div class=\"mt-14 lg:mt-20 relative\">\n\n  <div class=\"flex justify-between flex-wrap gap-[6px] !transfrom-none\" x-show=\"pagination.hasPagination\">\n    <div class=\"mr-3\">\n      <button \n          x-on:click=\"getPage(pagination.currentPageNumber - 1)\" \n          class=\"inline-block text-center duration-100 text-18 leading-none text-orange font-chopard md:w-[120px]\"  \n          :class=\"pagination.currentPageNumber != 1 ? 'opacity-50 hover:opacity-100' : 'opacity-25'\"\n          x-bind:disabled=\"pagination.currentPageNumber == 1\"\n        >\n        <i class=\"inline-block fa-thin fa-angle-left translate-y-px text-[28px] align-middle mr-2\"><\/i>\n        <span class=\"align-middle hidden md:inline-block\">Previous<\/span>\n      <\/button>\n    <\/div>\n    <div class=\"flex gap-[6px]\">\n      <template x-for=\"i in pagination.totalPages\">\n        <div>\n          <button \n            x-text=\"i\" \n            x-on:click=\"pagination.currentPageNumber != i &#038;&#038; getPage(i)\" \n            class=\"inline-block text-center duration-100 text-18 leading-none text-orange font-chopard px-2\" \n            :class=\"pagination.currentPageNumber == i ? 'opacity-100' : 'opacity-50 hover:opacity-80'\"\n          ><\/button>\n        <\/div>\n      <\/template>\n    <\/div>\n    <div class=\"ml-3\">\n      <button \n          x-on:click=\"getPage(pagination.currentPageNumber + 1)\" \n          class=\"inline-block text-center duration-100 text-18 leading-none text-orange font-chopard md:w-[120px] text-right\" \n          :class=\"pagination.currentPageNumber == pagination.totalPages ? 'opacity-25' : 'opacity-50 hover:opacity-100'\"\n          x-bind:disabled=\"pagination.currentPageNumber == pagination.totalPages\"\n        >\n        <span class=\"align-middle hidden md:inline-block\">Next<\/span>\n        <i class=\"inline-block fa-thin fa-angle-right translate-y-px text-[28px] align-middle ml-2\"><\/i>\n      <\/button>\n    <\/div>\n  <\/div>\n\n      <div \n    class=\"absolute left-1\/2 bottom-full mb-[16px] -translate-x-1\/2 [&#038;_svg]:w-[32px] duration-100\"\n    :class=\"isLoading ? 'opacity-100 visible' : 'invisible opacity-0'\"\n  >\n    <!-- By Sam Herbert (@sherb), for everyone. More @ http:\/\/goo.gl\/7AJzbL -->\n<svg width=\"120\" height=\"30\" viewBox=\"0 0 120 30\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"#b4644a\">\n    <circle cx=\"15\" cy=\"15\" r=\"15\">\n        <animate attributeName=\"r\" from=\"15\" to=\"15\"\n                 begin=\"0s\" dur=\"0.8s\"\n                 values=\"15;9;15\" calcMode=\"linear\"\n                 repeatCount=\"indefinite\" \/>\n        <animate attributeName=\"fill-opacity\" from=\"1\" to=\"1\"\n                 begin=\"0s\" dur=\"0.8s\"\n                 values=\"1;.5;1\" calcMode=\"linear\"\n                 repeatCount=\"indefinite\" \/>\n    <\/circle>\n    <circle cx=\"60\" cy=\"15\" r=\"9\" fill-opacity=\"0.3\">\n        <animate attributeName=\"r\" from=\"9\" to=\"9\"\n                 begin=\"0s\" dur=\"0.8s\"\n                 values=\"9;15;9\" calcMode=\"linear\"\n                 repeatCount=\"indefinite\" \/>\n        <animate attributeName=\"fill-opacity\" from=\"0.5\" to=\"0.5\"\n                 begin=\"0s\" dur=\"0.8s\"\n                 values=\".5;1;.5\" calcMode=\"linear\"\n                 repeatCount=\"indefinite\" \/>\n    <\/circle>\n    <circle cx=\"105\" cy=\"15\" r=\"15\">\n        <animate attributeName=\"r\" from=\"15\" to=\"15\"\n                 begin=\"0s\" dur=\"0.8s\"\n                 values=\"15;9;15\" calcMode=\"linear\"\n                 repeatCount=\"indefinite\" \/>\n        <animate attributeName=\"fill-opacity\" from=\"1\" to=\"1\"\n                 begin=\"0s\" dur=\"0.8s\"\n                 values=\"1;.5;1\" calcMode=\"linear\"\n                 repeatCount=\"indefinite\" \/>\n    <\/circle>\n<\/svg>\n  <\/div>\n<\/div>  <\/section>\n\n<script>\n  document.addEventListener('alpine:init', () => {\n    Alpine.data('newsList', (perPage, fetchUrl) => ({\n      isLoading: false,\n      fetchController: null,\n      queryParams: null,\n      selectedCategory: 'all',\n      defaultParams: {\n        fetchUrl: fetchUrl,\n        perPage: perPage ?? 8,\n      },\n      pagination: {\n        currentPageNumber: 1,\n        hasPagination: false,\n        totalPages: 1\n      },\n\n      init() {\n        this.readUrlParams();\n        this.runQuery();\n      },\n\n      rebuildParams() {\n        let queryParams = new URL(window.location.href);\n        \n        queryParams.searchParams.delete('pagenum');\n        queryParams.searchParams.delete('category');\n\n        if (this.selectedCategory && this.selectedCategory != 'all') {\n          queryParams.searchParams.append(\"category\", this.selectedCategory);\n        }\n\n        if (this.pagination.currentPageNumber > 1) {\n          queryParams.searchParams.append('pagenum', this.pagination.currentPageNumber);\n        }\n\n        this.params = queryParams.searchParams;\n      },\n\n      readUrlParams() {\n        \/\/ Get params from url, update inputs and trigger filter if params are present\n        const queryParams = new URL(window.location.href);\n\n        if (parseInt(queryParams.searchParams.get('pagenum'))) {\n          this.pagination.currentPageNumber = parseInt(queryParams.searchParams.get('pagenum'));\n        }\n        if (queryParams.searchParams.get('category')) {\n          this.selectedCategory = queryParams.searchParams.get('category');\n        }\n      },\n\n      updateSelectedCategory(value) {\n        \/\/ this.selectedCategory = value; \/\/ selectedCategory auto updates using x-model\n        this.pagination.currentPageNumber = 1;\n\n        this.runQuery();\n      },\n\n      getFetchUrl() {\n        return `${this.defaultParams.fetchUrl}${this.params ? '?' + this.params : ''}`;\n      },\n\n      updateCurrentUrl() {\n         \/\/ Update URL based on params set.\n        if (this.params && this.params.size) {\n          window.history.replaceState({}, '', `${location.pathname}?${this.params}`);\n        } else {\n          window.history.replaceState({}, '', `${location.pathname}`);\n        }\n      },\n\n      runQuery(scrollToTop) {\n        if (this.fetchController) {\n          this.fetchController.abort({message: 'Fetching interrupted by user.'});\n        }\n\n        this.fetchController = new AbortController();\n\n        this.rebuildParams();\n        this.isLoading = true;\n\n        this.updateCurrentUrl();\n\n        this.params ? this.params.append(\"per_page\", this.defaultParams.perPage) : '';\n\n        const fetchUrl = this.getFetchUrl();\n\n        fetch(fetchUrl, {\n          signal: this.fetchController.signal\n        })\n          .then(response => response.json())\n          .then(data => {\n            this.fetchController = null;\n\n            \/\/ this.$refs.list.querySelectorAll('.transition-block').forEach(el => {\n            \/\/   el.style.opacity = 0;\n            \/\/ });\n\n            if (scrollToTop) {\n              this.$root.scrollIntoView({ behavior: \"smooth\"});\n            }\n\n            setTimeout(_ => {\n              this.pagination.totalPages = data.pagination.total_pages;\n              this.pagination.hasPagination = (parseInt(data.pagination.total_pages) > 1);\n              this.isLoading = false;\n\n              if (data.posts && data.posts.length) {\n                this.$refs.list.innerHTML = data.posts;\n              } else {\n                this.$refs.list.innerHTML = \"<p>No posts found. Please try a different search<\/p>\";\n              }\n\n              this.$dispatch('block:load');\n            }, 150);\n          })\n          .catch((err) => {\n            console.error(`Fetch error: ${err.message}`);\n          });\n      },\n\n      getPage(page) {\n        this.pagination.currentPageNumber = page;\n        this.rebuildParams();\n        this.runQuery(true);\n      }\n    }))\n  });\n<\/script>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":670,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-343","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/phc.giantpeachtest.com\/zh-hant\/wp-json\/wp\/v2\/pages\/343"}],"collection":[{"href":"https:\/\/phc.giantpeachtest.com\/zh-hant\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/phc.giantpeachtest.com\/zh-hant\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/phc.giantpeachtest.com\/zh-hant\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phc.giantpeachtest.com\/zh-hant\/wp-json\/wp\/v2\/comments?post=343"}],"version-history":[{"count":9,"href":"https:\/\/phc.giantpeachtest.com\/zh-hant\/wp-json\/wp\/v2\/pages\/343\/revisions"}],"predecessor-version":[{"id":705,"href":"https:\/\/phc.giantpeachtest.com\/zh-hant\/wp-json\/wp\/v2\/pages\/343\/revisions\/705"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phc.giantpeachtest.com\/zh-hant\/wp-json\/wp\/v2\/media\/670"}],"wp:attachment":[{"href":"https:\/\/phc.giantpeachtest.com\/zh-hant\/wp-json\/wp\/v2\/media?parent=343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}