MancoLista/script.js at master · simone-arnhold/MancoLista · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
$(document).ready(function () {
  const addBtn = document.getElementById("add")
  var isDown = false

  $(document)
    .mousedown(function () {
      isDown = true
    })
    .mouseup(function () {
      isDown = false
    })

  function setClicked() {
    if (isDown) {
      $(this).toggleClass("clicked")
    }
  }

  function setClickedFirstClick() {
    // workaround because the first click does not work with onmouseover()
    $(this).toggleClass("clicked")
  }

  function setAlertValidate(input) {
    $(input).addClass("alert-validate")
  }

  $(".input50").each(function () {
    $(this).focus(function () {
      $(this).removeClass("alert-validate")
    })
  })

  addBtn.addEventListener("click", () => addNewMagSet())

  function addNewMagSet() {
    var magSetName = $("#mag-name")
      .val()
      .replace(/[^a-zA-Z0-9_-\s]/gi, "")
      .replaceAll(" ", "_")

    const magAmount = $("#mag-amount").val()

    var correctValues = true

    // || /^[a-zA-Z0-9]+$/.test($("#mag-name"))
    // hack to check if element exists with length
    if (!magSetName || $("#" + magSetName).length) {
      setAlertValidate($("#mag-name"))
      correctValues = false
    }
    if (!magAmount || magAmount == 0 || magAmount > 9999) {
      setAlertValidate($("#mag-amount"))
      correctValues = false
    }

    if (correctValues == false) {
      //if does not pass validation, exit
      return
    }

    $("body").append(
      $(`
    <div class="mag-block" id="${magSetName}">
      <div class="tools">
        <h4 class="mag-title">${magSetName.replaceAll("_", " ")}</h2>
        <button class="edit"><i class="fas fa-edit"></i></button>
        <button class="delete"><i class="fas fa-trash"></i></button>
      </div>
      <div class="mag-container" id="${magSetName}--mag-container"></div>
    </div>`)
    )

    //List mag-title button logic
    const currentMagBlock = document.getElementById(`${magSetName}`)
    const editBtn = currentMagBlock.querySelector(".edit")
    const delBtn = currentMagBlock.querySelector(".delete")

    editBtn.addEventListener("click", () => {
      // todo edit logic
      // pass
    })

    delBtn.addEventListener("click", () => {
      currentMagBlock.remove()
    })


    for (let i = 1; i <= magAmount; i++) {
      const newID = magSetName + " " + i

      // $("#" + magSetName).append(
      //   $(`<span class="circled-fill" id="${newID}">${i}</span>`).on(
      //     "click",
      //     function () {
      //       $(this).toggleClass("clicked")
      //     }
      //   )
      // )

      $("#" + magSetName + "--mag-container").append(
        $(`<span class="circled-fill" id="${newID}">${i}</span>`)
          .on("mouseover", setClicked)
          .on("click", setClickedFirstClick)
      )
    }
  }
})