Merge pull request #388 from syrk4web/dev
news script + multiples groups
This commit is contained in:
Théophile Diot
GitHub
commit
191c88238c
|
|
@ -21,21 +21,107 @@ class Menu {
|
|||
|
||||
class News {
|
||||
constructor() {
|
||||
this.sidebarEl = document.querySelector("[sidebar-info]");
|
||||
this.openBtn = document.querySelector("[sidebar-info-open]");
|
||||
this.closeBtn = document.querySelector("[sidebar-info-close]");
|
||||
this.openBtn.addEventListener("click", this.open.bind(this));
|
||||
this.closeBtn.addEventListener("click", this.close.bind(this));
|
||||
this.BASE_URL = "https://www.staging.bunkerweb.io/";
|
||||
this.init();
|
||||
}
|
||||
|
||||
open() {
|
||||
this.sidebarEl.classList.add("translate-x-0");
|
||||
this.sidebarEl.classList.remove("translate-x-90");
|
||||
init() {
|
||||
window.addEventListener("load", async () => {
|
||||
try {
|
||||
const res = await fetch(
|
||||
"https://www.staging.bunkerweb.io/api/posts/0/2",
|
||||
{
|
||||
headers: {
|
||||
method: "GET",
|
||||
},
|
||||
}
|
||||
);
|
||||
return await this.render(res);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
close() {
|
||||
this.sidebarEl.classList.add("translate-x-90");
|
||||
this.sidebarEl.classList.remove("translate-x-0");
|
||||
async render(lastNews) {
|
||||
const newsContainer = document.querySelector("[news-container]");
|
||||
//remove default message
|
||||
newsContainer.textContent = "";
|
||||
//render last news
|
||||
lastNews.forEach((news) => {
|
||||
//get info
|
||||
const slug = news.slug;
|
||||
const img = news.photo.url;
|
||||
const excerpt = news.excerpt;
|
||||
const tags = news.tags;
|
||||
const date = news.date;
|
||||
const lastUpdate = news.lastUpdate;
|
||||
//create html card from infos
|
||||
const cardHTML = this.template(
|
||||
slug,
|
||||
img,
|
||||
excerpt,
|
||||
tags,
|
||||
date,
|
||||
lastUpdate
|
||||
);
|
||||
//add to DOM
|
||||
document
|
||||
.querySelector("[news-container]")
|
||||
.insertAdjacentHTML("afterbegin", cardHTML);
|
||||
});
|
||||
}
|
||||
|
||||
template(slug, img, excerpt, tags, date, lastUpdate) {
|
||||
//loop on tags to get list
|
||||
let tagList = "";
|
||||
tags.forEach((tag) => {
|
||||
tagList += ` <a
|
||||
href="${this.BASE_URL}/blog/tag/${tag.slug}"
|
||||
class="my-0 mr-1 rounded bg-secondary hover:brightness-90 hover:-translate-y-0.4 text-white py-1 px-2 text-sm"
|
||||
>
|
||||
${tag.name}
|
||||
</a>`;
|
||||
});
|
||||
//create card
|
||||
const card = `
|
||||
<div
|
||||
class="min-h-[400px] w-full col-span-12 transition hover:-translate-y-2 bg-gray-100 dark:bg-slate-900 rounded px-6 py-4 m-2 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<img role="link"
|
||||
onclick="window.location.href='${this.BASE_URL}/blog/post/${slug}'"
|
||||
class="cursor-pointer rounded w-full h-40 m-0 object-cover"
|
||||
src="${img}"
|
||||
alt="image"
|
||||
/>
|
||||
<h3 role="link"
|
||||
onclick="window.location.href='${this.BASE_URL}/blog/post/${slug}'"
|
||||
class="cursor-pointer mt-3 mb-1 text-3xl dark:text-white tracking-wide">{{ post['title'] }}</h3>
|
||||
</div>
|
||||
<div>
|
||||
<div role="link"
|
||||
onclick="window.location.href='${this.BASE_URL}/blog/post/${slug}'"
|
||||
class="cursor-pointer min-h-[130px] mb-3 text-lg dark:text-gray-300 text-gray-600 pt-3">
|
||||
${excerpt}
|
||||
</div>
|
||||
<div class="min-h-[75px] mt-2 flex flex-wrap justify-start items-end align-bottom">
|
||||
${tagList}
|
||||
</div>
|
||||
|
||||
<div class="mt-2 flex flex-col justify-start items-start">
|
||||
<span class="text-xs dark:text-gray-300 text-gray-600"
|
||||
>Posted on : ${date}</span
|
||||
>
|
||||
{% if post["updatedAt"] %}
|
||||
<span class="text-xs dark:text-gray-300 text-gray-600"
|
||||
>Last update : ${lastUpdate}</span
|
||||
>
|
||||
{%endif%}
|
||||
</div>
|
||||
</div>
|
||||
</div> `;
|
||||
return card;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -102,7 +188,6 @@ class darkMode {
|
|||
|
||||
class FlashMsg {
|
||||
constructor() {
|
||||
this.delayBeforeRemove = 8000;
|
||||
this.openBtn = document.querySelector("[flash-sidebar-open]");
|
||||
this.flashCount = document.querySelector("[flash-count]");
|
||||
this.isMsgCheck = false;
|
||||
|
|
@ -112,7 +197,7 @@ class FlashMsg {
|
|||
init() {
|
||||
//animate message button if message + never opened
|
||||
window.addEventListener("load", (e) => {
|
||||
if (this.flashCount.textContent > 0) this.animeBtn();
|
||||
if (Number(this.flashCount.textContent) > 0) this.animeBtn();
|
||||
});
|
||||
//stop animate if clicked once
|
||||
this.openBtn.addEventListener("click", (e) => {
|
||||
|
|
@ -193,12 +278,17 @@ class Loader {
|
|||
|
||||
const setLoader = new Loader();
|
||||
const setMenu = new Menu();
|
||||
const setNews = new News();
|
||||
const setNewsSidebar = new Sidebar(
|
||||
"[sidebar-info]",
|
||||
"[sidebar-info-open]",
|
||||
"[sidebar-info-close]"
|
||||
);
|
||||
const setFlashSidebar = new Sidebar(
|
||||
"[flash-sidebar]",
|
||||
"[flash-sidebar-open]",
|
||||
"[flash-sidebar-close]"
|
||||
);
|
||||
const setNews = new News();
|
||||
const setDarkM = new darkMode();
|
||||
const setCheckbox = new Checkbox("[sidebar-info]");
|
||||
const setFlash = new FlashMsg();
|
||||
|
|
|
|||
|
|
@ -56,43 +56,12 @@
|
|||
/>
|
||||
<!-- end header -->
|
||||
<!-- news-->
|
||||
<div class="flex-auto overflow-auto">
|
||||
{% if posts %} {% for post in posts %}
|
||||
|
||||
<a
|
||||
class="transition hover:scale-102 bg-gray-100 dark:bg-slate-900 rounded px-6 py-4 m-2 col-span-12 md:col-span-6 flex flex-col justify-between"
|
||||
href="{{ post['link'] }}"
|
||||
target="_blank"
|
||||
>
|
||||
<div>
|
||||
<h3 class="title text-base dark:text-white">{{ post['title'] }}</h3>
|
||||
|
||||
<img
|
||||
class="rounded w-full h-30 m-0 object-cover"
|
||||
src="{{ post['image_url'] }}"
|
||||
alt="image"
|
||||
/>
|
||||
<div class="text-sm dark:text-gray-300 pt-3">
|
||||
{{ post['description'] }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex justify-between items-center">
|
||||
<span class="text-xs font-semibold dark:text-gray-300"
|
||||
>{{ post['date'] }}</span
|
||||
><span class="ml-3 text-xs italic dark:text-gray-300"
|
||||
>{{ post['reading_time'] }} read</span
|
||||
>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{% endfor %} {% else %}
|
||||
<div news-container class="flex-auto overflow-auto">
|
||||
<p
|
||||
class="text-center col-span-12 relative w-full p-4 text-blue-500 rounded-lg"
|
||||
>
|
||||
Impossible to connect to blog news.
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<!-- end news-->
|
||||
|
||||
|
|
|
|||
|
|
@ -221,25 +221,38 @@
|
|||
<!-- end plugin settings -->
|
||||
</div>
|
||||
<!-- end plugin settings not multiple -->
|
||||
|
||||
{# get number of multiple groups for the plugin #}
|
||||
{%set multList = []%}
|
||||
{% for setting, value in plugin["settings"].items() %}
|
||||
{% if current_endpoint
|
||||
== "global-config" and value['context'] == "global" and value['multiple'] and not value['multiple'] in multList or current_endpoint ==
|
||||
"services" and value['context'] == "multisite" and value['multiple'] and not value['multiple'] in multList %}
|
||||
{% set multList = multList.append(value['multiple']) %}
|
||||
{%endif%}
|
||||
{%endfor%}
|
||||
|
||||
<!-- plugin multiple -->
|
||||
{% if not plugin['multiple'] %}
|
||||
{%for multiple in multList %}
|
||||
<!-- plugin multiple handler -->
|
||||
<div multiple-handler class="flex items-center mx-0 sm:mx-4 md:mx-6 md:my-3 my-2 2xl:mx-6 2xl:my-3 col-span-12 ">
|
||||
<h5
|
||||
class="transition duration-300 ease-in-out dark:opacity-90 text-sm sm:text-md font-bold m-0 dark:text-gray-300"
|
||||
>
|
||||
{{plugin['name']}}
|
||||
{{multiple}}
|
||||
</h5>
|
||||
<button {{current_endpoint}}-multiple-add="{{plugin['name']}}" type="button" class="ml-3 dark:brightness-90 inline-block px-3 py-1.5 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md">
|
||||
<button {{current_endpoint}}-multiple-add="{{multiple}}" type="button" class="ml-3 dark:brightness-90 inline-block px-3 py-1.5 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md">
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
<div {{current_endpoint}}-settings-multiple="{{plugin['name']}}_SCHEMA" class="hidden w-full mb-8 grid-cols-12 border dark:border-gray-700">
|
||||
<!-- end plugin multiple handler-->
|
||||
|
||||
<!-- multiple settings -->
|
||||
<div {{current_endpoint}}-settings-multiple="{{multiple}}_SCHEMA" class="hidden w-full mb-8 grid-cols-12 border dark:border-gray-700">
|
||||
{% for setting, value in plugin["settings"].items() %}
|
||||
{# render only setting that match the multiple id and context #}
|
||||
{% if current_endpoint
|
||||
== "global-config" and value['context'] == "global" and value['multiple'] or current_endpoint ==
|
||||
"services" and value['context'] == "multisite" and value['multiple'] %}
|
||||
== "global-config" and value['context'] == "global" and value['multiple'] == multiple or current_endpoint ==
|
||||
"services" and value['context'] == "multisite" and value['multiple'] == multiple %}
|
||||
<div setting-container="{{setting}}_SCHEMA"
|
||||
class="
|
||||
mx-0 sm:mx-4 my-2 col-span-12 md:mx-6 md:my-3 md:col-span-6 2xl:mx-6 2xl:my-3 2xl:col-span-4"
|
||||
|
|
@ -416,8 +429,8 @@
|
|||
</div>
|
||||
<!-- end plugin settings -->
|
||||
</div>
|
||||
{%endif %}
|
||||
<!-- end plugin multiple -->
|
||||
{% endfor %}
|
||||
<!-- end multiple settings -->
|
||||
</div>
|
||||
{% endfor %}
|
||||
<!-- end plugin item -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue