https://ta-tum.com/js/modules/student/help/StudentHelp.js

1/**
2 * Module Help (Student)
3 * @description
4 * @author Alejandro Micheloud
5 */
6
7var StudentHelp = function (sco) {
8  var scope = sco;
9  var builded = false;
10
11  /**
12   * Se invoca cuando el módulo recibe foco
13   * @returns {undefined}
14   */
15  function show() {
16    console.log("StudentHelp:show();");
17    if (!builded) {
18      build(doStart);
19    } else {
20      doStart();
21    }
22    
23  }
24
25  function doStart() {
26    scope.show();
27  }
28
29  function renderVideos(data) {
30    if (!data.hasOwnProperty(userLang)) {
31      return mToast.toast("Idioma no encontrado: " + userLang);
32    }
33    const videos = data[userLang];
34    scope.find(".tutorials .d-card-container.students").html("");
35    videos.students.map((video) => {
36      scope
37        .find(".tutorials .d-card-container.students")
38        .append(getHtmlCard(video));
39    });
40
41    scope.find(".d-card .btn-play").click(playVideo);
42  }
43  function playVideo() {
44    const url = "https://www.youtube.com/embed/" + $(this).attr("video");
45    console.log(url);
46    mDiscover.showVideo(url);
47  }
48  /**
49   * Constructor de módulo
50   * @returns {undefined}
51   */
52  function build(callback) {
53    builded = true;
54
55    scope.append(getHtmlModule());
56    scope = scope.find(">.d-module-help");
57
58    $.getJSON("config/config.help.json", function (data) {
59      renderVideos(data);
60    });
61
62    mTooltip.setTooltip(scope.find(".d-btn-help"), lang.teacher_work_help);
63  }
64
65  // helpers
66  /* html of module */
67  function getHtmlModule() {
68    return `<div class="d-module-help student">
69                <div class="section tutorials">
70                  <div class="subtitle">${lang.help_student_tutorials||'Vídeos para estudiantes'}</div>
71                  <div class="d-card-container students"></div>
72                </div>
73               </div>`;
74  }
75  function getHtmlCard(video) {
76    const idVideo = getYoutubeIdFromUrl(video.video);
77    const thumb = `//img.youtube.com/vi/${idVideo}/0.jpg`;
78    return `
79    <div class="d-card">
80        <div class="btn-play btn btn-bitmap" video="${idVideo}">
81          <div class="img-video" style="background-image:url(${thumb})"></div>
82          <div class="bt-play-bg">
83            <div class="bt-play"></div>
84          </div>
85        </div>
86        <div class="title">${video.title || ""}</div>
87        <div class="time">${video.duration || "00:00"}</div>
88        <div class="d-lang ${video.lang || "es"}"></div>
89        <div class="description">${video.description || ""}</div>
90    </div>
91    `;
92  }
93
94  // public methods
95  this.show = show;
96};