Fixed all 404 errors and added actions.js again

docs/examples/actions.html

@@ -101,7 +101,7 @@
         >
         and
         <a
-          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/actions.js"
+          href="https://github.com/codedgar/Puppertino/blob/master/src/js/actions.js"
           target="_blank"
           >Download the JS</a
         >

docs/examples/modals.html

@@ -102,7 +102,7 @@
         >
         and
         <a
-          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/modals.js"
+          href="https://github.com/codedgar/Puppertino/blob/master/src/js/modals.js"
           target="_blank"
           >Modals JS</a
         >

docs/examples/segmented_controls.html

@@ -49,7 +49,7 @@
       <p>
         Segmented controls are commonly used to toggle diffent states or views in your website or App and are greatly featured in many apps in iOS. You can use the segmented buttons by using the 
         <a
-          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/segmented/controls.css"
+          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/segmented-controls.css"
           target="_blank"
           >CSS of Segmented controls</a
         >

docs/examples/shadows.html

@@ -49,7 +49,7 @@
       <p>
         Shadows are not so common on iOS or MacOS. But having a curated collection of shadows can help your interface, which is why I added it! You can use Shadows by downloading the  
         <a
-          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/segmented_controls.css"
+          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/shadows.css"
           target="_blank"
           >CSS of Shadows</a
         >

docs/examples/tabs.html

@@ -61,7 +61,7 @@
         >
         and
         <a
-          href="https://github.com/codedgar/Puppertino/src/js/tabs.js"
+          href="https://github.com/codedgar/Puppertino/blob/master/src/js/tabs.js"
           target="_blank"
           >downloading the JS for tabs</a
         >

src/js/actions.js

@@ -0,0 +1,52 @@
+    (function (document) {
+
+        var p_actions = document.querySelectorAll("[data-p-open-actions]");
+        var actions = document.querySelectorAll(".p-action-big-container");
+        var cancel_action = document.querySelectorAll("[data-p-cancel-action]");
+
+        for (var item of p_actions) {
+            item.addEventListener("click", function (event) {
+                event.preventDefault();
+                var selector = this.getAttribute("data-p-open-actions");
+                if (selector.length == 0) {
+                    console.warn(
+                        "Error. The data-p-open-action attribute is empty, please add the ID of the action you want to open."
+                    );
+                    return false;
+                }
+                document.querySelector(".p-action-background").classList.add("nowactive");
+                document.body.classList.add("p-modal-opened");
+                document.querySelector(selector).classList.add("active");
+            });
+        }
+
+        for (var element of cancel_action) {
+            element.addEventListener("click", function (event) {
+                event.preventDefault();
+                document.querySelector(".p-action-big-container.active").classList.remove("active");
+                document.querySelector(".p-action-background").classList.remove("nowactive");
+                document.body.classList.remove("p-modal-opened");
+            });
+        }
+
+        document
+            .querySelector(".p-action-background")
+            .addEventListener("click", function (event) {
+                event.preventDefault();
+                var opened_action = document.querySelector(".p-action-big-container.active");
+                if (opened_action.getAttribute("data-p-close-on-outside") == "true") {
+                    event.stopPropagation();
+                    opened_action.classList.remove("active");
+                    document
+                        .querySelector(".p-action-background")
+                        .classList.remove("nowactive");
+                    document.body.classList.remove("p-modal-opened");
+                }
+            });
+
+        for (var action of actions) {
+            action.addEventListener("click", function (event) {
+                event.stopPropagation();
+            });
+        }
+    })(document)