nodebb-plugin-onekite-calendar 1.0.12 → 1.0.13

package/lib/widgets.js

@@ -0,0 +1,425 @@
+'use strict';
+
+const nconf = require.main.require('nconf');
+
+function forumBaseUrl() {
+  return String(nconf.get('url') || '').trim().replace(/\/$/, '');
+}
+
+function escapeHtml(s) {
+  return String(s || '')
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function makeDomId() {
+  const r = Math.floor(Math.random() * 1e9);
+  return `onekite-twoweeks-${Date.now()}-${r}`;
+}
+
+function widgetCalendarUrl() {
+  // Per request, keep the public URL fixed (even if forum base differs)
+  return 'https://www.onekite.com/calendar';
+}
+
+const widgets = {};
+
+widgets.defineWidgets = async function (widgetData) {
+  // NodeBB versions differ:
+  // - Some pass an object: { widgets: [...] }
+  // - Others pass the array directly
+  const list = Array.isArray(widgetData)
+    ? widgetData
+    : (widgetData && Array.isArray(widgetData.widgets) ? widgetData.widgets : null);
+
+  if (!list) {
+    return widgetData;
+  }
+
+  list.push({
+    widget: 'calendar-onekite-twoweeks',
+    name: 'Calendrier',
+    description: 'Affiche la semaine courante + la semaine suivante (FullCalendar via CDN).',
+    content: '',
+  });
+
+  return widgetData;
+};
+
+widgets.renderTwoWeeksWidget = async function (data) {
+  // data: { widget, ... }
+  const id = makeDomId();
+  const calUrl = widgetCalendarUrl();
+  const apiBase = forumBaseUrl();
+  const eventsEndpoint = `${apiBase}/api/v3/plugins/calendar-onekite/events`;
+
+  const idJson = JSON.stringify(id);
+  const calUrlJson = JSON.stringify(calUrl);
+  const eventsEndpointJson = JSON.stringify(eventsEndpoint);
+
+  const html = `
+<div class="onekite-twoweeks">
+  <div class="d-flex justify-content-between align-items-center mb-1">
+    <div style="font-weight: 600;">Calendrier</div>
+    <a href="${escapeHtml(calUrl)}" class="btn btn-sm btn-outline-secondary" style="line-height: 1.1;">Ouvrir</a>
+  </div>
+  <div id="${escapeHtml(id)}"></div>
+</div>
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@latest/main.min.css" />
+<script>
+(function(){
+  const containerId = ${idJson};
+  const calUrl = ${calUrlJson};
+  const eventsEndpoint = ${eventsEndpointJson};
+
+  function loadOnce(tag, attrs) {
+    return new Promise((resolve, reject) => {
+      try {
+        const key = attrs && (attrs.id || attrs.href || attrs.src);
+        if (key && document.querySelector((attrs.id ? ('#' + attrs.id) : (attrs.href ? ('link[href="' + attrs.href + '"]') : ('script[src="' + attrs.src + '"]'))))) {
+          resolve();
+          return;
+        }
+        const el = document.createElement(tag);
+        Object.keys(attrs || {}).forEach((k) => el.setAttribute(k, attrs[k]));
+        el.onload = () => resolve();
+        el.onerror = () => reject(new Error('load-failed'));
+        document.head.appendChild(el);
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
+
+  async function ensureFullCalendar() {
+    if (window.FullCalendar && window.FullCalendar.Calendar) {
+      return;
+    }
+    await loadOnce('script', {
+      id: 'onekite-fullcalendar-global',
+      src: 'https://cdn.jsdelivr.net/npm/fullcalendar@latest/index.global.min.js',
+      async: 'true'
+    });
+    await loadOnce('script', {
+      id: 'onekite-fullcalendar-locales',
+      src: 'https://cdn.jsdelivr.net/npm/@fullcalendar/core@latest/locales-all.global.min.js',
+      async: 'true'
+    });
+  }
+
+  async function init() {
+    const el = document.getElementById(containerId);
+    if (!el) return;
+
+    await ensureFullCalendar();
+
+    // Basic lightweight tooltip (no dependencies, works on hover + tap)
+    const tip = document.createElement('div');
+    tip.className = 'onekite-cal-tooltip';
+    tip.style.display = 'none';
+    document.body.appendChild(tip);
+
+    function setTipContent(html) {
+      tip.innerHTML = html;
+    }
+
+    function showTipAt(x, y) {
+      tip.style.left = Math.max(8, x + 12) + 'px';
+      tip.style.top = Math.max(8, y + 12) + 'px';
+      tip.style.display = 'block';
+    }
+
+    function hideTip() {
+      tip.style.display = 'none';
+    }
+
+    // Client-side escaping (the server-side helper is not in scope here)
+    function escapeHtml(s) {
+      return String(s || '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+    }
+
+    document.addEventListener('pointerdown', (e) => {
+      // Close when clicking outside an event
+      if (!e.target || !e.target.closest || (!e.target.closest('.fc-event') && !e.target.closest('.onekite-cal-tooltip'))) {
+        hideTip();
+      }
+    }, { passive: true });
+
+    // Define a 2-week dayGrid view
+    const calendar = new window.FullCalendar.Calendar(el, {
+      initialView: 'dayGridTwoWeek',
+      views: {
+        dayGridTwoWeek: {
+          type: 'dayGrid',
+          duration: { weeks: 2 },
+          buttonText: '2 semaines',
+        },
+      },
+      locale: 'fr',
+      firstDay: 1,
+      height: 'auto',
+      headerToolbar: {
+        left: 'prev,next',
+        // No range/title in the widget: it becomes redundant and, when the
+        // view crosses months, FullCalendar displays a start/end range.
+        center: '',
+        right: '',
+      },
+      navLinks: false,
+      eventTimeFormat: { hour: '2-digit', minute: '2-digit', hour12: false },
+      // Hide date numbers in column headers (keep only weekday)
+      dayHeaderFormat: { weekday: 'short' },
+      // Force day number to be numeric only (avoid '1 janvier' style labels)
+      dayCellContent: function(arg) {
+        try {
+          const t = String(arg.dayNumberText || '');
+          const m = t.match(/^\d+/);
+          return { html: '<span class="fc-daygrid-day-number">' + (m ? m[0] : t) + '</span>' };
+        } catch (e) {
+          return { html: '<span class="fc-daygrid-day-number">' + String(arg.dayNumberText || '') + '</span>' };
+        }
+      },
+      eventClassNames: function(arg) {
+        try {
+          const ev = arg && arg.event;
+          if (!ev) return ['onekite-singleday'];
+          if (ev.extendedProps && (ev.extendedProps.multiDay === true || ev.extendedProps.days > 1)) return ['onekite-multiday'];
+          if (ev.start && ev.end) {
+            const diff = (new Date(ev.end)).getTime() - (new Date(ev.start)).getTime();
+            return [diff > 86400000 ? 'onekite-multiday' : 'onekite-singleday'];
+          }
+        } catch (e) {}
+        return ['onekite-singleday'];
+      },
+      // Render: dot for single-day, pill for multi-day
+      eventContent: function(arg) {
+        const ev = arg && arg.event;
+        const isMulti = (function(){
+          try {
+            if (!ev || !ev.start || !ev.end) return false;
+            if (ev.extendedProps && (ev.extendedProps.multiDay === true || ev.extendedProps.days > 1)) return true;
+            const s = new Date(ev.start);
+            const e = new Date(ev.end);
+            const diff = e.getTime() - s.getTime();
+            return diff > 86400000; // strictly more than 1 day
+          } catch (e) { return false; }
+        })();
+
+        if (isMulti) {
+          const spacer = document.createElement('span');
+          spacer.className = 'onekite-pill-spacer';
+          spacer.appendChild(document.createTextNode('\u00A0'));
+          return { domNodes: [spacer] };
+        }
+
+        const bg = (ev.backgroundColor || (ev.extendedProps && ev.extendedProps.backgroundColor) || '').trim();
+        const border = (ev.borderColor || '').trim();
+        const color = bg || border || '#3788d8';
+        const wrap = document.createElement('span');
+        wrap.className = 'onekite-dot-wrap';
+        const dot = document.createElement('span');
+        dot.className = 'onekite-dot';
+        dot.style.backgroundColor = color;
+        wrap.appendChild(dot);
+        return { domNodes: [wrap] };
+      },
+      events: function(info, successCallback, failureCallback) {
+        const qs = new URLSearchParams({ start: info.startStr, end: info.endStr });
+        fetch(eventsEndpoint + '?' + qs.toString(), { credentials: 'same-origin' })
+          .then((r) => r.json())
+          .then((json) => successCallback(json || []))
+          .catch((e) => failureCallback(e));
+      },
+            eventDataTransform: function(ev) {
+        try {
+          if (ev && ev.extendedProps && String(ev.extendedProps.type) === 'special') {
+            // Unify rendering with rentals in the widget: use allDay layout
+            ev.allDay = true;
+          }
+        } catch (e) {}
+        return ev;
+      },
+dateClick: function() { window.location.href = calUrl; },
+      eventDidMount: function(info) {
+        try {
+          const ev = info.event;
+          // Improve centering for single-day dots by centering the harness,
+          // same visual behavior as rentals.
+          try {
+            const cls = (info.el && info.el.classList) ? info.el.classList : null;
+            const isSingle = cls && cls.contains('onekite-singleday');
+            const harness = info.el && info.el.closest ? info.el.closest('.fc-daygrid-event-harness') : null;
+            if (harness && harness.classList) {
+              if (isSingle) {
+                harness.classList.add('onekite-harness-dot');
+              } else {
+                harness.classList.remove('onekite-harness-dot');
+              }
+            }
+          } catch (e) {}
+
+          const ep = ev.extendedProps || {};
+          const title = (ep.itemNameLine || ep.title || ev.title || '').toString();
+          const statusLabel = (function(s){
+            const map = {
+              pending: 'En attente',
+              awaiting_payment: 'Validée – paiement en attente',
+              paid: 'Payée',
+              rejected: 'Rejetée',
+              expired: 'Expirée',
+            };
+            const k = String(s || '');
+            return map[k] || '';
+          });
+          const status = (String(ep.type || '') === 'reservation') ? statusLabel(ep.status) : '';
+          const start = ev.start ? new Date(ev.start) : null;
+          const end = ev.end ? new Date(ev.end) : null;
+          const pad2 = (n) => String(n).padStart(2, '0');
+          const fmt = (d) => d ? (pad2(d.getDate()) + '/' + pad2(d.getMonth() + 1) + '/' + String(d.getFullYear()).slice(-2)) : '';
+          const range = (start && end) ? ('Du ' + fmt(start) + ' au ' + fmt(end)) : '';
+          const html = '' +
+            '<div style="font-weight:600; margin-bottom:2px;">' + escapeHtml(title) + '</div>' +
+            (range ? ('<div style="opacity:.85">' + escapeHtml(range) + '</div>') : '') +
+            (status ? ('<div style="opacity:.75; margin-top:2px; font-size:.85em;">' + escapeHtml(status) + '</div>') : '');
+
+          // Hover (desktop)
+          info.el.addEventListener('pointerenter', () => {
+            // Only show on devices that actually hover
+            if (window.matchMedia && window.matchMedia('(hover: hover)').matches === false) return;
+            setTipContent(html);
+            const rect = info.el.getBoundingClientRect();
+            showTipAt(rect.left + rect.width / 2 + window.scrollX, rect.top + window.scrollY);
+          }, { passive: true });
+          info.el.addEventListener('pointerleave', hideTip, { passive: true });
+
+          // Tap (mobile) / click (fallback)
+          const openTipFromPoint = (pt) => {
+            setTipContent(html);
+            showTipAt((pt.clientX || 0) + window.scrollX, (pt.clientY || 0) + window.scrollY);
+          };
+
+          info.el.addEventListener('pointerdown', (e) => {
+            // On touch devices, FullCalendar can swallow click events during swipe;
+            // pointerdown is more reliable.
+            if (e && e.preventDefault) e.preventDefault();
+            if (e && e.stopPropagation) e.stopPropagation();
+            openTipFromPoint(e);
+          });
+
+          info.el.addEventListener('touchstart', (e) => {
+            const t = e.touches && e.touches[0];
+            if (!t) return;
+            if (e && e.stopPropagation) e.stopPropagation();
+            openTipFromPoint(t);
+          }, { passive: true });
+} catch (e) {}
+      },
+    });
+
+    calendar.render();
+
+    // Mobile swipe (left/right) to navigate weeks
+    try {
+      let touchStartX = null;
+      let touchStartY = null;
+      el.addEventListener('touchstart', (e) => {
+        const t = e.touches && e.touches[0];
+        if (!t) return;
+        touchStartX = t.clientX;
+        touchStartY = t.clientY;
+      }, { passive: true });
+      el.addEventListener('touchend', (e) => {
+        const t = e.changedTouches && e.changedTouches[0];
+        if (!t || touchStartX === null || touchStartY === null) return;
+        const dx = t.clientX - touchStartX;
+        const dy = t.clientY - touchStartY;
+        touchStartX = null;
+        touchStartY = null;
+        if (Math.abs(dx) < 55) return;
+        if (Math.abs(dx) < Math.abs(dy) * 1.2) return; // mostly vertical
+        if (dx < 0) {
+          calendar.next();
+        } else {
+          calendar.prev();
+        }
+      }, { passive: true });
+    } catch (e) {}
+  }
+
+  // Widgets can be rendered after ajaxify; delay a tick.
+  setTimeout(() => init().catch(() => {}), 0);
+})();
+</script>
+
+<style>
+  .onekite-twoweeks .fc .fc-toolbar-title { font-size: 1rem; }
+  .onekite-twoweeks .fc .fc-button { padding: .2rem .35rem; font-size: .75rem; }
+  .onekite-twoweeks .fc .fc-daygrid-day-number { font-size: .75rem; padding: 2px; }
+  .onekite-twoweeks .fc .fc-col-header-cell-cushion { font-size: .75rem; }
+
+  /* Single-day: show only a dot */
+  .onekite-twoweeks .fc .fc-event.onekite-singleday { background: transparent !important; border: none !important; }
+  .onekite-twoweeks .fc .fc-daygrid-event.onekite-singleday,
+  .onekite-twoweeks .fc .fc-daygrid-block-event.onekite-singleday {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+  }
+  .onekite-twoweeks .fc .fc-daygrid-block-event.onekite-singleday .fc-event-main { padding: 0 !important; }
+
+  /* Multi-day: keep FullCalendar bar, but hide text and make it a pill */
+  .onekite-twoweeks .fc .fc-event.onekite-multiday {
+    border-radius: 999px !important;
+    overflow: hidden;
+  }
+  .onekite-twoweeks .fc .fc-daygrid-event.onekite-multiday,
+  .onekite-twoweeks .fc .fc-daygrid-block-event.onekite-multiday {
+    border-radius: 999px !important;
+    box-shadow: none !important;
+  }
+  .onekite-twoweeks .fc .fc-event.onekite-multiday .fc-event-main { padding: 0 !important; }
+  .onekite-twoweeks .fc .fc-event.onekite-multiday .fc-event-title,
+  .onekite-twoweeks .fc .fc-event.onekite-multiday .fc-event-time { display:none !important; }
+
+  .onekite-twoweeks .fc .fc-daygrid-event-harness { margin-top: 2px; }
+  /* Center single-day dots inside the day cell (match rentals) */
+  .onekite-twoweeks .fc .fc-daygrid-event-harness.onekite-harness-dot {
+    display: flex;
+    justify-content: center;
+  }
+  .onekite-twoweeks .fc .fc-daygrid-event { padding: 0 !important; }
+  .onekite-twoweeks .fc .fc-event-main { color: inherit; }
+  .onekite-twoweeks .fc .fc-event-title { display:none; }
+  .onekite-dot-wrap { display:flex; align-items:center; justify-content:center; width: 100%; }
+  .onekite-dot { width: 10px; height: 10px; border-radius: 999px; display:inline-block; }
+  .onekite-pill-spacer { display:block; height: 10px; line-height: 10px; }
+  .onekite-cal-tooltip {
+    position: absolute;
+    z-index: 99999;
+    max-width: 260px;
+    background: rgba(0,0,0,.92);
+    color: #fff;
+    padding: 8px 10px;
+    border-radius: 10px;
+    font-size: 0.9rem;
+    box-shadow: 0 8px 24px rgba(0,0,0,.25);
+    pointer-events: none;
+  }
+</style>
+  `;
+
+  data = data || {};
+  data.html = html;
+  return data;
+};
+
+module.exports = widgets;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-onekite-calendar",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "FullCalendar-based equipment reservation workflow with admin approval & HelloAsso payment for NodeBB",
   "main": "library.js",
   "license": "MIT",

package/plugin.json

@@ -39,5 +39,5 @@
   "acpScripts": [
     "public/admin.js"
   ],
-  "version": "1.0.12"
+  "version": "1.0.13"
 }