es.javascript.info/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html at 1262db87fbbb853e0e3d6d23940d4f1422c8d687 · maksumi/es.javascript.info · 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
<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="index.css">
</head>

<body>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
    esse sequi officia sapiente.</p>

  <blockquote>
    Maestra: Por qué llegas tarde?
    Alumno: Alguien perdió un billete de cien dólares.
    Maestra: Que bueno. Lo estábas ayudando a buscarlo?
    Alumno: No. Estaba parado encima del billete.
  </blockquote>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
   esse sequi officia sapiente.</p>


  <script>
    /**
     * Posiciona elem en relación a  anchor como se indica en position.
     *
     * @param {Node} anchor    Elemento ancla para posicionamiento
     * @param {string} position Cualquiera de los siguientes: top/right/bottom
     * @param {Node} elem       Elemento para position
     *
     * Ambos elementos: elem y anchor deben estar en el documento
     */
    function positionAt(anchor, position, elem) {

      let anchorCoords = anchor.getBoundingClientRect();

      switch (position) {
        case "top":
          elem.style.left = anchorCoords.left + "px";
          elem.style.top = anchorCoords.top - elem.offsetHeight + "px";
          break;

        case "right":
          elem.style.left = anchorCoords.left + anchor.offsetWidth + "px";
          elem.style.top = anchorCoords.top + "px";
          break;

        case "bottom":
          elem.style.left = anchorCoords.left + "px";
          elem.style.top = anchorCoords.top + anchor.offsetHeight + "px";
          break;
      }

    }

    /**
     * Muestra una nota con el html proporcionado en el lugar indicado por position
     * relativa al elemento anchor.
     */
    function showNote(anchor, position, html) {

      let note = document.createElement('div');
      note.className = "note";
      note.innerHTML = html;
      document.body.append(note);

      positionAt(anchor, position, note);
    }

    // ¡Testéalo!
    let blockquote = document.querySelector('blockquote');

    showNote(blockquote, "top", "nota encima");
    showNote(blockquote, "right", "nota a la derecha");
    showNote(blockquote, "bottom", "nota debajo");
  </script>


</body>
</html>