📝 Introduced new installing method + 🎨 JS Cleanup

* FIX: Sanitation
Getting rid of deprecated `var` and changing in `let` and `const`.
Sanitation of equals in vanilla JS from `==` to `===`

* FEATURE: Package.json

Adding Package.json in order to make the library downloadable by NPM, and in the future perhaps being able to publish it to the public npm registry

* FEATURE: Automated build

* FEATURE: Automated build

* Revert "FEATURE: Automated build"

This reverts commit 19d66813f4e98a8bdeff12ce958c07d567144356.

* Revert "FEATURE: Automated build"

This reverts commit a2434abb6794fe81a87eb6925e9e3ab7a28a94e6.

* FEATURE: NPM+GIT install - README.md update

* FEATURE: NPM+GIT install - README.md update

README.md

@@ -35,6 +35,34 @@ If you only need specific components, you can import them individually to reduce
 
 You can also find the full list of individual components and their CDN links on the [Components page](https://codedgar.github.io/Puppertino/examples/).
 
+### NPM
+
+You can install this repository through NPM + GIT:
+```bash
+# Via SSH
+npm i --save git@github.com:codedgar/Puppertino.git#{{BRANCH_NAME}}
+
+# Eg.
+npm i --save git@github.com:codedgar/Puppertino.git#master
+
+# Or Via HTTPS
+npm i --save https://github.com/codedgar/Puppertino.git#BRANCH_NAME
+
+# Eg.
+npm i --save https://github.com/codedgar/Puppertino.git#master
+```
+
+You can change master with the branch of your choosing to install a specific branch. After NPM installation,
+you can simply import the library from `node_modules`
+
+#### In your CSS
+```css
+@import("path/to/node_modules/puppertino/dist/full.css")
+```
+#### In your Javascript
+```js
+require("path/to/node_modules/puppertino/src/js/{{file you need, eg tabs.js}}")
+```
 
 ## Current Components
 

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "puppertino",
+  "version": "1.0.0",
+  "description": "A CSS framework based on Human Guidelines from Apple",
+  "main": "none",
+  "directories": {
+    "doc": "docs"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/codedgar/Puppertino.git"
+  },
+  "keywords": [
+    "css",
+    "framework",
+    "ui",
+    "uikit",
+    "apple"
+  ],
+  "author": "Codedgar",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/codedgar/Puppertino/issues"
+  },
+  "homepage": "https://github.com/codedgar/Puppertino#readme"
+}

src/js/Puppertino.js

@@ -2,7 +2,7 @@ function Puppertino(options, selector){
     return {
         options: options,
         selector: selector,
-        modal: function(selector){
+        modal: function(selector) {
             console.log('AAAAAAAA');
 
             this.init = function(){
@@ -12,7 +12,6 @@ function Puppertino(options, selector){
                 console.log(document.querySelector(selector));
             }
             this.hide = function(selector){
-
                 console.log(document.querySelector(selector));
             }
             this.toggle = function(selector){

src/js/actions.js

@@ -1,14 +1,14 @@
     (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]");
+        let p_actions = document.querySelectorAll("[data-p-open-actions]");
+        let actions = document.querySelectorAll(".p-action-big-container");
+        let cancel_action = document.querySelectorAll("[data-p-cancel-action]");
 
-        for (var item of p_actions) {
+        for (const item of p_actions) {
             item.addEventListener("click", function (event) {
                 event.preventDefault();
-                var selector = this.getAttribute("data-p-open-actions");
-                if (selector.length == 0) {
+                let 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."
                     );
@@ -20,7 +20,7 @@
             });
         }
 
-        for (var element of cancel_action) {
+        for (const element of cancel_action) {
             element.addEventListener("click", function (event) {
                 event.preventDefault();
                 document.querySelector(".p-action-big-container.active").classList.remove("active");
@@ -33,8 +33,8 @@
             .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") {
+                let 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
@@ -44,7 +44,7 @@
                 }
             });
 
-        for (var action of actions) {
+        for (let action of actions) {
             action.addEventListener("click", function (event) {
                 event.stopPropagation();
             });

src/js/modals.js

@@ -1,13 +1,13 @@
 (function (document) {
-  var p_selector_modal = document.querySelectorAll("[data-p-open-modal]");
-  var modals = document.querySelectorAll(".p-modal");
-  var cancel_button = document.querySelectorAll("[data-p-cancel]");
+  let p_selector_modal = document.querySelectorAll("[data-p-open-modal]");
+  let modals = document.querySelectorAll(".p-modal");
+  let cancel_button = document.querySelectorAll("[data-p-cancel]");
 
-  for (var item of p_selector_modal) {
+  for (const item of p_selector_modal) {
     item.addEventListener("click", function (event) {
       event.preventDefault();
-      var selector = this.getAttribute("data-p-open-modal");
-      if (selector.length == 0) {
+      let selector = this.getAttribute("data-p-open-modal");
+      if (selector.length === 0) {
         console.warn(
           "Error. The data-p-open-modal attribute is empty, please add the ID of the modal you want to open."
         );
@@ -19,7 +19,7 @@
     });
   }
 
-  for (var element of cancel_button) {
+  for (const element of cancel_button) {
     element.addEventListener("click", function (event) {
       event.preventDefault();
       document.querySelector(".p-modal.active").classList.remove("active");
@@ -32,8 +32,8 @@
     .querySelector(".p-modal-background")
     .addEventListener("click", function (event) {
       event.preventDefault();
-      var opened_modal = document.querySelector(".p-modal.active");
-      if (opened_modal.getAttribute("data-p-close-on-outside") == "true") {
+      let opened_modal = document.querySelector(".p-modal.active");
+      if (opened_modal.getAttribute("data-p-close-on-outside") === "true") {
         event.stopPropagation();
         opened_modal.classList.remove("active");
         document
@@ -43,7 +43,7 @@
       }
     });
 
-  for (var modal of modals) {
+  for (let modal of modals) {
     modal.addEventListener("click", function (event) {
       event.stopPropagation();
     });

src/js/segmented_controls.js

@@ -1,6 +1,6 @@
 (function (document) {
-  var p_segmented_controls = document.querySelectorAll(".p-segmented-controls a");
-  for (var item of p_segmented_controls) {
+  let p_segmented_controls = document.querySelectorAll(".p-segmented-controls a");
+  for (const item of p_segmented_controls) {
     item.addEventListener("click", function (event) {
       event.preventDefault();
       this.parentElement.querySelector("a.active").classList.remove("active");

src/js/tabs.js

@@ -19,7 +19,7 @@
 
 let mobile_tabs_pupper = document.querySelectorAll('.p-mobile-tabs a');
 
-for (var item of mobile_tabs_pupper) {
+for (const item of mobile_tabs_pupper) {
     item.addEventListener("click", function (event) {
       event.preventDefault();
       var remover_pupper = this.parentNode.parentNode;