01

js/Module/alerts.js

@@ -1,60 +0,0 @@
-function addAlert(
-    addToEl, alertMessage,
-    type = "primary",
-    timeout = 5,
-    info = undefined,
-    onAdd, onClose
-  ) {
-    function setAttributes(el, attrs) {
-      if (!attrs)
-        return;
-      for (var key in attrs) 
-        el.setAttribute(key, attrs[key]);
-    }
-    function addElement({
-      tag = "div", parent = null,
-      classes = [], attrs = {},
-      innerText = null,
-      children = []
-    } = {}) {
-      let result = document.createElement(tag);
-      result.innerText = innerText;
-      result.classList.add(...classes);
-      setAttributes(result, attrs)
-      parent?.appendChild(result);
-      result.append(...(children?.filter(c => c) ?? []));
-      return result;
-    }
-
-    if (!info && ["success", "danger", "warning", "info"].includes(type.toLowerCase()))
-      info = type.charAt(0).toUpperCase() + type.slice(1);
-
-    let alertDiv = null;
-    addElement(
-    { 
-      parent: addToEl, classes: ["container"],
-      children: 
-      [
-        alertDiv = addElement(
-        {
-          classes: ["alert", "alert-" + type, "alert-dismissible", "fade", "show"], role: "alert",
-          children: 
-          [
-            info ? addElement({tag: "strong", innerText: info + " "}) : null,
-            addElement({tag: "a", innerText: alertMessage}),
-            addElement({ tag: "button", classes: ["btn-close"], attrs: {"type": "button", "data-bs-dismiss": "alert", "aria-label": "Close" }})
-          ]
-        })
-      ]
-    });
-
-    if (onClose)
-      alertDiv.addEventListener("closed.bs.alert", onClose);
-    if (onAdd)
-      onAdd();
-    if (timeout > 0)
-    {
-      var bootstrapAlert = new bootstrap.Alert(alertDiv);
-      setTimeout(() => bootstrapAlert.close(), timeout * 1000);
-    }
-  }

js/Module/index.css

@@ -1,188 +0,0 @@
-.badge:after {
-    content: attr(value);
-    font-size: 12px;
-    color: #fff;
-    background: red;
-    border-radius: 50%;
-    padding: 0 5px;
-    position: relative;
-    left: -8px;
-    top: -10px;
-    opacity: 0.9;
-}
-
-body {
-    padding: 0;
-    margin: 0;
-    background: #f2f6e9;
-}
-
-.navbar {
-    background: rgb(63, 239, 192);
-}
-
-.nav-link,
-.navbar-brand {
-    color: rgb(39, 34, 34);
-    cursor: pointer;
-}
-
-.nav-link {
-    margin-right: 1em !important;
-}
-
-/*.nav-link:hover {
-    color: #000;
-    }*/
-.navbar-collapse {
-    justify-content: flex-end;
-}
-
-.categories-list {
-    background-color: #333;
-    color: #dedec8;
-}
-
-.header {
-    background-image: url("images/header-background.jpg");
-    background-size: cover;
-    background-position: center;
-    position: relative;
-}
-
-/*.overlay {
-    position: absolute;
-    min-height: 100%;
-    min-width: 100%;
-    left: 0;
-    top: 0;
-    background: rgba(0, 0, 0, 0.6);
-    }*/
-.description {
-    left: 50%;
-    position: absolute;
-    top: 45%;
-    transform: translate(-50%, -55%);
-    text-align: center;
-}
-
-.description h1 {
-    color: #6ab446;
-}
-
-.description p {
-    color: #fff;
-    font-size: 1.3rem;
-    line-height: 1.5;
-}
-
-.description button {
-    border: 1px solid #6ab446;
-    background: #6ab446;
-    border-radius: 0;
-    color: #fff;
-}
-
-/*.description button:hover {
-    border: 1px solid #fff;
-    background: #fff;
-    color: #000;
-    }*/
-.features {
-    margin: 4em auto;
-    padding: 1em;
-    position: relative;
-}
-
-.feature-title {
-    color: #333;
-    font-size: 1.3rem;
-    font-weight: 700;
-    margin-bottom: 20px;
-    text-transform: uppercase;
-}
-
-.features img {
-    -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
-    -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
-    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
-    margin-bottom: 16px;
-}
-
-.features .form-control,
-.features input {
-    border-radius: 0;
-}
-
-.features .btn {
-    background-color: #589b37;
-    border: 1px solid #589b37;
-    color: #fff;
-    margin-top: 20px;
-}
-
-.features .btn:hover {
-    background-color: #333;
-    border: 1px solid #333;
-}
-
-.background {
-    background: #dedec8;
-    padding: 4em 0;
-}
-
-.team {
-    color: #5e5e55;
-    padding: 0 180px;
-}
-
-.team .card-columns {
-    -webkit-column-count: 4;
-    -moz-column-count: 4;
-    column-count: 4;
-}
-
-.team .card {
-    background: none;
-    border: none;
-}
-
-.team .card-title {
-    font-size: 1.3rem;
-    margin-bottom: 0;
-    text-transform: uppercase;
-}
-
-.page-footer {
-    background-color: #222;
-    color: #ccc;
-    padding: 60px 0 30px;
-}
-
-.footer-copyright {
-    color: #666;
-    padding: 40px 0;
-}
-
-@media (max-width: 575.98px) {
-    .description {
-        left: 0;
-        padding: 0 15px;
-        position: absolute;
-        top: 10%;
-        transform: none;
-        text-align: center;
-    }
-
-    .description h1 {
-        font-size: 2em;
-    }
-
-    .description p {
-        font-size: 1.2rem;
-    }
-
-    .features {
-        margin: 0;
-    }
-}

js/Module/login.js

@@ -1,83 +0,0 @@
-function LoginForm(parent, open) {
-    function Login(parent) {
-        this.input = document.createElement("input");
-        parent.append(this.input);
-        this.setValue = function (value) {
-            this.input.value = value;
-        }
-        this.getValue = function () {
-            return this.input.value;
-        }
-        this.input.oninput = this.input.onchange = function () {
-            if (this.onChange)
-                this.onChange(this.getValue());
-        }.bind(this);
-    }
-    function Password(parent, open) {
-        this.input = document.createElement("input");
-        parent.append(this.input);
-        this.setValue = function (value) {
-            this.input.value = value;
-        }
-        this.getValue = function () {
-            return this.input.value;
-        }
-        this.input.oninput = this.input.onchange = function () {
-            if (this.onChange)
-                this.onChange(this.getValue());
-        }.bind(this);
-
-
-        this.setOpen = function (open) {
-            this.input.type = open ? "text" : "password";
-        }
-        this.getOpen = function () {
-            return this.input.type == "text";
-        }
-        let check = document.createElement("input");
-        parent.append(check);
-        check.onchange = function () {
-            this.setOpen(check.checked);
-            if (this.onOpenChange)
-                this.onOpenChange(this.getOpen());
-        }.bind(this);
-
-        check.checked = open;
-        check.value = "open";
-        check.type = "checkbox";
-        this.setOpen(open);
-    }
-
-    let form = document.createElement("form");
-    parent.append(form);
-    this.login = new Login(form);
-    this.password = new Password(form, open);
-    this.button = document.createElement("button");
-    this.button.innerText = "OK";
-    this.button.classList.add('btn');
-    this.button.classList.add('ref-button');
-    form.append(this.button);
-
-    let setButtonStateCallback = function setButtonState() {
-        this.button.disabled = !this.login.getValue() || !this.password.getValue();
-    }.bind(this);
-    this.login.onChange = setButtonStateCallback;
-    this.password.onChange = setButtonStateCallback;
-    this.button.disabled = true;
-    this.button.onclick = function () {
-        if (this.onLogin)
-            this.onLogin(this.login.getValue(), this.password.getValue());
-    }.bind(this);
-}
-
-function loginPromise(parent) {
-    function executor(fulfill, reject) {
-        const form = new LoginForm(parent);
-        form.onLogin = (login, password) => {
-            fulfill({ 'login': login, 'password': password })
-        }
-    }
-    return new Promise(executor);
-}
-/*loginPromise(document.body)
-   .then(({ login, password }) => console.log(`Вы ввели ${login} и ${password}`));*/

js/Module/pagination.js

@@ -1,123 +0,0 @@
-function Pagination(paginatedList, paginationContainer, paginationLimit = 5, listItemTag = "li") {
-  const createMainPagination = () => {
-    paginationContainer.innerHTML =
-      `
-      <nav aria-label="Page navigation example">
-        <ul class="pagination justify-content-center">
-          <li class="page-item disabled" id="prev-button" tabindex="-1">
-            <a class="page-link" href="${location.hash}" tabindex="-1">Previous</a>
-          </li>
-          <!--<li class="page-item"><a class="page-link" href="${location.hash}">1</a></li>
-          <li class="page-item"><a class="page-link" href="${location.hash}">2</a></li>
-          <li class="page-item"><a class="page-link" href="${location.hash}">3</a></li>-->
-          <li class="page-item" id="next-button">
-            <a class="page-link" href="${location.hash}">Next</a>
-          </li>
-        </ul>
-      </nav>
-      `;
-  }
-  createMainPagination();
-  const listItems = paginatedList.querySelectorAll(listItemTag);
-  const nextButton = paginationContainer.querySelectorAll("#next-button")[0];
-  const prevButton = paginationContainer.querySelectorAll("#prev-button")[0];
-
-  const pageCount = Math.ceil(listItems.length / paginationLimit);
-  let currentPage = 1;
-
-  const disableButton = (button) => {
-    button.classList.add("disabled");
-    button.setAttribute("disabled", true);
-  };
-
-  const enableButton = (button) => {
-    button.classList.remove("disabled");
-    button.removeAttribute("disabled");
-  };
-
-  const handlePageButtonsStatus = () => {
-    if (currentPage === 1) {
-      disableButton(prevButton);
-    } else {
-      enableButton(prevButton);
-    }
-
-    if (pageCount === currentPage) {
-      disableButton(nextButton);
-    } else {
-      enableButton(nextButton);
-    }
-  };
-
-  const handleActivePageNumber = () => {
-    document.querySelectorAll(".page-item").forEach((button) => {
-      button.classList.remove("active");
-      const pageIndex = Number(button.getAttribute("page-index"));
-      if (pageIndex == currentPage) {
-        button.classList.add("active");
-      }
-    });
-  };
-
-  const appendPageNumber = (index) => {
-    const pageNumber = document.createElement("li");
-    pageNumber.classList.add("page-item");
-    pageNumber.innerHTML = `<a class="page-link" href="#${location.hash}">${index}</a>`;
-    pageNumber.setAttribute("page-index", index);
-    pageNumber.setAttribute("aria-label", "Page " + index);
-    nextButton.parentNode.insertBefore(pageNumber, nextButton);
-  };
-
-  const getPaginationNumbers = () => {
-    for (let i = 1; i <= pageCount; i++) {
-      appendPageNumber(i);
-    }
-  };
-
-  const setCurrentPage = (pageNum) => {
-    currentPage = pageNum;
-    if (currentPage < 1 || currentPage > pageCount)
-      return;
-
-    handleActivePageNumber();
-    handlePageButtonsStatus();
-
-    const prevRange = (pageNum - 1) * paginationLimit;
-    const currRange = pageNum * paginationLimit;
-
-    listItems.forEach((item, index) => {
-      item.classList.add("d-none");
-      if (index >= prevRange && index < currRange) {
-        item.classList.remove("d-none");
-      }
-    });
-  };
-
-  function init() {
-    getPaginationNumbers();
-    setCurrentPage(1);
-
-    prevButton.addEventListener("click", (event) => {
-      event.preventDefault();
-      setCurrentPage(currentPage - 1);
-    });
-
-    nextButton.addEventListener("click", (event) => {
-      event.preventDefault();
-      setCurrentPage(currentPage + 1);
-    });
-
-    document.querySelectorAll(".page-item").forEach((button) => {
-      const pageIndex = Number(button.getAttribute("page-index"));
-
-      if (pageIndex) {
-        button.childNodes[0].addEventListener("click", (event) => {
-          event.preventDefault();
-          if (pageIndex && !button.classList.contains('disabled'))
-            setCurrentPage(pageIndex);
-        });
-      }
-    });
-  }
-  init();
-}