Webbserverprogrammering 1

Show sourcecode

The following files exists in this folder. Click to view.

webbutv3/word-app/public/

PageElement.js
practice.js
style.css

PageElement.js

94 lines ASCII Windows (CRLF)
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
// utility functions

function PageElement(name, element) {
  this.uniqueId = Math.random();
  this.name = name;
  this.id;
  this.element = element;

  this.onRemoved = [];
}

PageElement.prototype.setId = function (id) {
  this.id = id;
  this.element.setAttribute("id", id);
  return this;
};
PageElement.prototype.setName = function (newName) {
  this.name = newName;
  return this;
};
PageElement.prototype.remove = function () {
  this.element.remove();
};
PageElement.prototype.addEventListener = function (event, func) {
  this.element.addEventListener(event, func);
  return this;
};
PageElement.prototype.appendChild = function (pageElement) {
  this.element.appendChild(pageElement.element);
  return this;
};
PageElement.prototype.classList = function (pageElement) {
  return this.element.classList;
};
PageElement.prototype.replaceChildren = function (pageElements) {
  this.element.replaceChildren(pageElements.map((x) => x.element));
  return this;
};
PageElement.prototype.hide = function (pageElement) {
  this.element.classList.add("hidden");
  return this;
};
PageElement.prototype.show = function (pageElement) {
  this.element.classList.remove("hidden");
  return this;
};

PageElement.prototype.elementToggleButton = function (text) {
  const button = document.createElement("button");
  button.innerText = text;
  button.addEventListener("click", () => {
    button.toggleAttribute("toggled");
  });
  button.classList.add("button-toggle");
  this.element = button;
  return this;
};

PageElement.prototype.fromTag = function (tag) {
  const button = document.createElement(tag);
  this.element = button;
  return this;
};

PageElement.prototype.getElementById = function (id) {
  this.element = document.getElementById(id);
  return this;
};

function Page() {
  this.pageElements = [];
}

Page.prototype.remove = function (pageElement) {
  const index = this.pageElements.findIndex(
    (v) => v.uniqueId === pageElement.uniqueId
  );
  pageElement.remove();
  this.pageElements.splice(index, 1);
  return this;
};

Page.prototype.addPageElement = function (pageElement) {
  this.pageElements.push(pageElement);
  return this;
};

Page.prototype.getPageElement = function ({ name, id }) {
  let selector = () => false;
  if (name) selector = (v) => v.name === name;
  else if (id) selector = (v) => v.id === id;
  return this.pageElements.find(selector);
};