1st commit

wco/simplemobnav/examplenav_fr.json

@@ -0,0 +1,99 @@
+{
+  "contentwconame": "apxauth",
+  "contentid": "signature",
+  "logo": {
+    "src": "/src/static/img/logo/logobgdark.png",
+    "alt": "smatchit"
+  },
+  "claim": {
+    "textContent": "Never miss an opportunity"
+  },
+  "textlist": true,
+  "commentmenutype": "textlist: vertical list of menu with texte, buttonlist: horizontal btn",
+  "profilmenu": [
+    {
+      "mainprofil": "persons",
+      "link": "mytribes"
+    },
+    {
+      "mainprofil": "pagans",
+      "link": "logout"
+    },
+    {
+      "mainprofil": "anonymous",
+      "link": "signin"
+    }
+  ],
+  "links": [
+    {
+      "link": "signup",
+      "label": "Pas encore d'identité apxtri ?",
+      "textlink": "Créer mon identité",
+      "tpl": "apxauthscreensignup",
+      "allowedprofil":["anonymous"],
+      "next": [
+        "signin",
+        "forgetkey",
+        "information"
+      ]
+    },
+    {
+      "link": "signin",
+      "label": "S'identifier ?",
+      "textlink": "Accédez à vos données",
+      "tpl": "apxauthscreensignin",
+      "allowedprofil":["anonymous"],
+      "next": [
+        "signup",
+        "forgetkey",
+        "information"
+      ]
+    },
+    {
+      "link": "forgetkey",
+      "label": "Clé oubliée ?",
+      "textlink": "Récupérez par email",
+      "tpl": "apxauthscreenforgetkey",
+      "allowedprofil":["anonymous"],
+      "next": [
+        "signin",
+        "signup",
+        "information"
+      ]
+    },
+    {
+      "link": "information",
+      "label": " C'est quoi une identité apxtri ?",
+      "textlink": "En savoir plus",
+      "allowedprofil":["anonymous"],
+      "tpl": "apxauthscreeninformation",
+      "next": [
+        "back"
+      ]
+    },
+    {
+      "link": "back",
+      "label": "Retour au menu ",
+      "allowedprofil":["anonymous"],
+      "tpl": "sc",
+      "textlink": "Retour",
+      "next": []
+    },
+    {
+      "link": "logout",
+      "label": " ",
+      "allowedprofil":["pagans"],
+      "tpl": "apxauthscreenlogout",
+      "textlink": "",
+      "next": []
+    },
+    {
+      "link": "mytribes",
+      "label": " ",
+      "tpl": "apxauthscreenmytribes",
+      "allowedprofil":["persons"],
+      "textlink": "",
+      "next": []
+    }
+  ]
+}

wco/simplemobnav/main.mustache

@@ -0,0 +1,29 @@
+ <div class="py-1">
+    <img
+        class="mx-auto w-auto block dark:hidden"
+        data-wco="logo"
+        src="{{logobglight.src}}"
+        alt="{{logobglight.alt}}"
+        src="{{logobgdark.src}}"
+        alt="{{logobgdark.alt}}"
+    />
+    <img
+        class="mx-auto w-auto hidden dark:block"
+        data-wco="logo"
+        src="{{logobgdark.src}}"
+        alt="{{logobgdark.alt}}"
+    />
+    <h2
+        class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight"
+        data-wco="claim"
+    >
+        {{claim.textContent}}
+    </h2>
+</div>
+<div id="loading" class="flex min-h-full flex-col justify-center">
+    <div class="sm:mx-auto sm:w-full sm:max-w-sm py-4 text-center">
+          <span class="loading loading-spinner loading-lg text-secondary"></span>
+    </div>
+</div>
+<div id="{{contentid}}" wco-name="{{contentwconame}}" wco-link="{{contentscreen}}" class="mt-5 sm:mx-auto sm:w-full sm:max-w-sm"></div>
+<div class="navlink"></div>

wco/simplemobnav/navbuttonh.mustache

@@ -0,0 +1,11 @@
+<div class="flex justify-center gap-2 p-4">
+  {{#links}}
+  <button class="btn {{classnavbutton}} flex-col gap-1" onclick="apx.simplemobnav.action('{{id}}','{{link}}','{{action}}','{{wconame}}');">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-16 h-16 box-content">
+         <path stroke-linecap="round" stroke-linejoin="round" d="{{d}}" />
+    </svg>
+    <span class="text-sm">{{{shortlabel}}}</span>
+  </button>
+  {{/links}}
+</div>
+

wco/simplemobnav/navlist.mustache

@@ -0,0 +1,9 @@
+{{#links}}
+<p class=" mt-1 text-center text-sm text-gray-500">
+    {{{label}}} 
+    <a class="font-semibold leading-6 text-secondary hover:text-primary" 
+       onclick="apx.simplemobnav.action('{{id}}','{{link}}','{{action}}','{{wconame}}');">
+       {{{textlink}}}
+    </a>
+</p>
+{{/links}}

wco/simplemobnav/simplemobnav.js

@@ -0,0 +1,102 @@
+var apx = apx || {};
+apx.simplemobnav = {};
+apx.simplemobnav.loadwco = (id, ctx) => {
+
+  const tpldataname = `${apx.data.pagename}_${id}_simplemobnav`;
+  const simplemobnavid = document.getElementById(id)
+  console.log("load simplemobnav with tpldataname:", tpldataname, " id:", id, " ctx:", ctx);
+
+  let initmenu;
+  if (simplemobnavid.innerHTML.trim() === "") {
+    // Get 1st menu matching the first profil in profilmenu
+    apx.simplemobnav.checktpldataname(tpldataname);
+    for (const menulist of apx.data.tpldata[tpldataname].profilmenu) {
+      if (apx.data.headers.xprofils.includes(menulist.mainprofil)) {
+        initmenu = menulist.link
+        break;
+      }
+    }
+    ctx.link = initmenu;
+    apx.data.tpldata[tpldataname].contentscreen = initmenu;
+    simplemobnavid.innerHTML = Mustache.render(
+      apx.data.tpl.simplemobnavmain,
+      apx.data.tpldata[tpldataname]
+    );
+  } else {
+    //just update wco-link this will also run apx.{contentwconame}.loadwco()
+    simplemobnavid.querySelectorAll('[wco-name]').forEach(elt => { elt.setAttribute('wco-link', ctx.link) });
+  }
+  // shom menulist from next
+  const screendata = apx.data.tpldata[tpldataname].links.find(
+    (m) => m.link == ctx.link
+  );
+  // add in menulink the data needed to customize
+  const menulinks = apx.data.tpldata[tpldataname].links
+    .filter(m =>
+      screendata.next.includes(m.link) && m.allowedprofil.some(el => apx.data.headers.xprofils.includes(el)))
+    .map(m => {
+      const newm = { ...m }
+      if (!m.classnavbutton && apx.data.tpldata[tpldataname].classnavbutton) {
+        newm.classnavbutton = apx.data.tpldata[tpldataname].classnavbutton
+      }
+      if (!m.classnavlist && apx.data.tpldata[tpldataname].classnavlist) {
+        newm.classnavlist = apx.data.tpldata[tpldataname].classnavlist
+      }
+      return newm
+    })
+  console.log("menulminks", menulinks);
+  simplemobnavid.querySelector('.navlink').innerHTML = Mustache.render(
+    apx.data.tpl[`simplemobnav${apx.data.tpldata[tpldataname].navtpl}`],
+    { id, links: menulinks }
+  );
+  document.getElementById("loading").classList.add("hidden");
+  console.log(`Request to show screen ${ctx.link}`);
+};
+
+apx.simplemobnav.action = (id, link, action, wconame) => {
+  /**
+   * Manage action per menu 
+   * if navigation then it just propagate wco-link in all the wco-name component
+   */
+  if (action == "navigation") {
+    document.getElementById(id).setAttribute("wco-link", link);
+    /*document.getElementById(id).querySelectorAll("[wco-name]").forEach(lnk => {
+      console.log("lnk:",lnk) 
+      console.log(link)
+      lnk.setAttribute('wco-link', link) 
+      console.log(link,lnk)
+       });*/
+    return;
+  }
+  if (!apx[wconame]) {
+    console.log(`%c⚠️ warning:%c this requested compoment ${wconame}} does not exist`);
+  }
+  if (!apx[wconame][action]) {
+    console.log(`%c⚠️ warning:%c this function apx.${wconame}}.${action} does not exist`);
+  }
+  apx[wconame][action]();
+}
+
+apx.simplemobnav.reload = () => {
+  location.reload();
+}
+apx.simplemobnav.checktpldataname = (tpldataname) => {
+  /**
+   * This is to help dev to build a correct json file
+   */
+  if (!apx.data.tpldata[tpldataname]) {
+    console.log(`%c⚠️ warning:%c ${tpldataname} does not exist in localstorage tpldata `, 'color:red;')
+    return false;
+  }
+  const mandatoryprop = ["contentwconame", "contentid", "profilmenu", "links"]
+  let missingprop = ""
+  mandatoryprop.forEach(p => {
+    if (!apx.data.tpldata[tpldataname][p]) {
+      missingprop += ` ${p}`
+    }
+  });
+  if (missingprop !== "") {
+    console.log(`%c⚠️ warning:%c Missing property(ies) in ${tpldataname}: ${missingprop} `, 'color:red;')
+    return false
+  }
+};