Nikola auto commit.

Nikola version: 8.3.3

files/assets/js/gancio-events-detect.js

@@ -1,45 +1,78 @@
 /*
-*  Detect no next Gancio events and deactivate Next events
+*  Detect next Gancio events and activate Next events
 */
 
-function GetNextEventsCount(ge_id) {
-  const entryComponent = document.querySelector('#' + ge_id);
-  const shadowRoot = entryComponent.shadowRoot; 
-  const app = shadowRoot.querySelector('div');
-  if (app != null) {
-    return app.children.length;
-  } else {
-    return 0;
-  }
-}
-
-function ActivePastEvents(tab_next, tab_past) {
+function ActiveNext(tab_next, tab_past) {
   const nexttab = document.getElementById("tab-" + tab_next);
   const next = document.getElementById("tab-pane-" + tab_next);
   const pasttab = document.getElementById("tab-" + tab_past);
   const past = document.getElementById("tab-pane-" + tab_past);
   if (nexttab != null && next !== null){
-    next.classList.remove("active");
-    nexttab.classList.remove("active");
-    next.classList.add("fade");
+    past.classList.remove("active");
+    pasttab.classList.remove("active");
+    past.classList.add("fade");
   }
   if (pasttab != null && past !== null){
-    past.classList.remove("fade");
-    past.classList.add("active");
-    pasttab.classList.add("active");
+    next.classList.remove("fade");
+    next.classList.add("active");
+    nexttab.classList.add("active");
   }
 }
 
-function ShowElement(id) {
+function HideElement(id) {
   const element = document.getElementById(id);
   if (element) {
-    element.style.display = "block";
+    element.style.display = "none";
   }
 }
 
-function ActivePastEventsIfNotNexts(ge_id, tab_next, tab_past, msg_id) {
-  if (GetNextEventsCount(ge_id) == 0) {
-    ActivePastEvents(tab_next, tab_past);
-  }
-  ShowElement(msg_id);
+function ActiveNextEvents(tab_next, tab_past, msg_id) {
+  ActiveNext(tab_next, tab_past);
+  HideElement(msg_id);
+}
+
+// Using MutationObserver
+
+function CheckNextEvents(ge_id, callbackifdiv) {
+  // Select element with ge_id
+  const targetNode = document.getElementById(ge_id);
+
+  // Verify existence of element and that it has ShadowRoot
+  if (targetNode && targetNode.shadowRoot) {
+    const shadowRoot = targetNode.shadowRoot;
+      
+    // Look for a div element in shadowRoot
+    const divElement = shadowRoot.querySelector('div');
+    if (divElement) {
+      // console.log('<div> is present in ShadowRoot');
+      callbackifdiv();
+      return true;
+    } else {  // In there are not div, keep looking
+      // MutationObserver configuration
+      const config = { childList: true };
+
+      // Callback to execute when changes in shadowRoot
+      const callback = (mutationsList) => {
+        for (const mutation of mutationsList) {
+          if (mutation.type === 'childList') {
+            // Verify new child nodes
+            mutation.addedNodes.forEach((node) => {
+              // Check in node is <div>
+              if (node.nodeType === Node.ELEMENT_NODE && node.nodeName === 'DIV') {
+                // console.log('New <div> added to ShadowRoot');
+                callbackifdiv();
+              }
+            });
+          }
+        }
+      };
+
+      // Instance a MutationObserver
+      const observer = new MutationObserver(callback);
+
+      // Start to observ the ShadowRoot
+      observer.observe(shadowRoot, config);
+    }
+  }
+  return false;
 }

pages/events.md

@@ -10,7 +10,7 @@
 .. hidemastodon: True
 -->
 
-  {{% tabpannel active='1' %}}
+  {{% tabpannel active='2' %}}
     Próximos
     <gancio-events baseurl='https://eventos.txs.es' title='Próximos eventos' theme='light' sidebar='false' tags='educatic' id='nextevents'></gancio-events>
 	<div id="msg_non_nexts" style="display:none">
@@ -28,7 +28,6 @@ Para que puedas estar al tanto de los nuevos eventos que organizamos, sin la nec
 Si quieres organizar un evento con nosotros {{% doc %}}contáctanos <contact>{{% /doc %}}.
 
 
-
 <script src='/assets/js/gancio-events.es.js'></script>
 
 {{% gancio-events-detect ge_id='nextevents' tab_next='0' tab_past='1' msg_id='msg_non_nexts' %}}

shortcodes/gancio-events-detect.tmpl

@@ -25,10 +25,11 @@ where <id_ge> is the ID of past gancio-events HTML tag, tab_next and tab_past ar
 % else:
       <% mid = msg_id %>
 % endif
-
+ 
+<!-- site.template_hooks['body_end'].append('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>') -->
 
 <% site.template_hooks['body_end'].append('<script src="/assets/js/gancio-events-detect.js"></script>') %>
 
-<% params = '\"' +  ge_id + '\", \"' + tn + '\", \"' + tp + '\", \"' + mid + '\"' %>
+<% params = '\"' + tn + '\", \"' + tp + '\", \"' + mid + '\"' %>
 
-<% site.template_hooks['body_end'].append('<script> $(document).ready(function(){ ActivePastEventsIfNotNexts(' + params + '); });</script>') %>
+<% site.template_hooks['body_end'].append('<script> $(document).ready(function(){ CheckNextEvents(\"' + ge_id + '\", () => ActiveNextEvents(' + params + ')); }); </script>') %>