modules/components/generators.js

  1. /**
  2.  * The generators module includes functions that either return HTMLElements or HTML-formatted strings
  3.  * that are used as templates for building blocks of the app.
  4.  * Most functions take arguments providing content to fill these templates.
  5.  * @namespace generators
  6.  */
  8. module.exports = {
  9.   infoCardDummy, infoCardContent,
  10.   searchResult, upNextPoster, upNextTitle,
  11.   confirmActionAlertBox
  12. }
  15. /**
  16.  * Generates an element containing the basic html structure of a single info card.
  17.  * @memberof generators
  18.  * @param {'left_stack'|'middle_stack'|'right_stack'} stack Card stack it will be placed onto
  19.  * @param {Number} index Position of this card in the total stack
  20.  * @param {String} id Reference ID for trakt database
  21.  * @returns {HTMLElement}
  22.  */
  23. function infoCardDummy(stack, index, id) {
  24.   let infocard = document.createElement('div')
  25.   infocard.classList.add('infocard', 'shadow_b', stack)
  26.   infocard.id = 'card_'+index
  27.   infocard.dataset.trakt_id = id
  28.   infocard.innerHTML = `
  29.     <div id="infocard_close" class="btn-close black_d_b z4 elmHover" onclick="triggerInfoCardOverlay()">
  30.       <img src="../../assets/icons/app/close.svg">
  31.     </div>
  32.     <div class="cardcontent">
  33.       <div class="center">
  34.         <img class="logo gray-animation" style="height: 200px" src="../../assets/icons/traktify/512x512.png">
  35.       </div>
  36.     </div>
  37.   `
  38.   return infocard
  39. }
  42. /**
  43.  * Generates html-string containing all elements that are placed inside one info card.
  44.  * @memberof generators
  45.  * @param {Object} item 
  46.  * @param {Number} item.ratingPercent
  47.  * @param {Number} item.seasonNumber
  48.  * @param {Number} item.episodeNumber
  49.  * @param {String} item.episodeTitle
  50.  * @param {String} item.description
  51.  * @returns {String}
  52.  */
  53. function infoCardContent(item) {
  54.   let html = ` 
  55.     <div class="infocard_child black_b z4">
  56.       <div id="infocard_close" class="btn-close black_d_b z4 elmHover" onclick="triggerInfoCardOverlay()">
  57.         <img src="../../assets/icons/app/close.svg">
  58.       </div>
  59.       <div class="infocard_left">
  60.         <img src="">
  61.         <img src="" class="shadow_b">
  62.       </div>
  63.       <div class="infocard_right">
  64.         <h2 class="h2 white_t" style="margin: 0 0 12px">${item.episodeTitle}</h2>
  65.         <div class="horizontal_border"></div>
  66.         <p class="p white_d_t" style="margin-bottom:0">${item.description}</p>
  67.         ${actionButtons(item.matcher, 'card')}
  68.       </div>
  69.     </div> 
  70.   `
  71.   return html
  72. }
  75. /**
  76.  * Generates a html element for one search result and adds it to the sidebar.
  77.  * @memberof generators
  78.  * @param {Object} item 
  79.  * @param {String} item.img
  80.  * @param {String} item.title
  81.  * @param {String} item.description
  82.  * @param {String} item.type
  83.  * @param {Number} item.rating
  84.  * @param {Number} item.id Reference ID for TMDB database
  85.  * @returns {HTMLElement}
  86.  */
  87. function searchResult(item) {
  88.   let panel_box = document.createElement('div')
  89.   panel_box.classList.add('panel_box', 'search', 'animation_slide_right')
  90.   panel_box.innerHTML = `
  91.     <img class="poster" src="${item.img}">
  92.     <div class="panel_box_container">
  93.       <h3 class="fs18 tOverflow">${item.title}</h3>
  94.       <p class="tOverflow normal">${item.description}</p>
  95.       <div class="poster-content">
  96.         <div class="poster-content-left">
  97.           <img src="../../assets/icons/app/heart.svg">
  98.           <span class="fs16">${item.rating}%</span>
  99.         </div>
  100.         <div class="poster-content-right tC">${item.type}</div>
  101.       </div>
  102.     </div>
  103.   `
  104.   return panel_box
  105. }
  108. /**
  109.  * Generates the an element for a single poster that is displayed on the up-next dashboard.
  110.  * @memberof generators
  111.  * @param {Object} item
  112.  * @param {String} item.title
  113.  * @param {String} item.subtitle
  114.  * @param {Number} item.rating
  115.  * @param {String} item.id Reference ID for TVDB database
  116.  * @param {Number} item.season
  117.  * @param {String} item.matcher
  118.  * @returns {HTMLElement}
  119.  */
  120. function upNextPoster(item) {
  121.   let li = document.createElement('li')
  123.   li.classList.add('poster', 'poster_dashboard')
  124.   li.setAttribute('data_title', item.title)
  125.   li.setAttribute('data_subtitle', item.subtitle)
  126.   li.setAttribute('onmouseover', 'animateText(this, true)')
  127.   li.setAttribute('onmouseleave', 'animateText(this, false)')
  129.   let posterTile = document.createElement('div')
  130.   posterTile.classList.add('hidden')
  132.   posterTile.innerHTML = `
  133.     <div class="poster_tile shadow_h">
  134.       <div class="poster_rating">
  135.         <img src="../../assets/icons/app/heart.svg"><span class="fw700 white_t">${Math.round(item.rating*10)}%</span>
  136.       </div>
  137.       ${actionButtons(item.matcher, 'poster')}
  138.     </div>
  139.   `
  141.   li.appendChild(posterTile)
  143.   requestAndLoadImage({
  144.     parent: li,
  145.     use: 'poster',
  146.     type: 'season',
  147.     itemId: item.id,
  148.     reference: item.season,
  149.     classes: ['shadow_h', 'z1'],
  150.     attributes: {
  151.       'style': 'cursor:pointer',
  152.       'onclick': 'openInfoCard(this)',
  153.       'data_matcher': item.matcher
  154.     }
  155.   }, () => {
  156.     posterTile.classList.remove('hidden')
  157.   })
  159.   return li
  160. }
  162. /**
  163.  * Generates html-string used for the title block on the up-next dashboard.
  164.  * @memberof generators
  165.  * @param {Object} item 
  166.  * @param {String} item.title
  167.  * @param {String} item.subtitle
  168.  * @returns {String}
  169.  */
  170. function upNextTitle(item) {
  171.   let html = `
  172.     <h3 class="h3 red_t tu">
  173.       up next to watch
  174.     </h3>
  175.     <h1 class="h1 white_t tu tOverflow">
  176.       ${item.title}
  177.     </h1>
  178.     <h1 class="h1 white_d_t tOverflow">
  179.       ${item.subtitle}
  180.     </h1>
  181.   `
  182.   return html
  183. }
  186. /**
  187.  * Generates html-string containing the action buttons.
  188.  * It contains three main buttons that are styled depending on the type.
  189.  * @memberof generators
  190.  * @param {String} matcher 
  191.  * @param {'poster'|'card'} modal
  192.  * @returns {String}
  193.  */
  194. function actionButtons(matcher, modal) {
  195.   let q = "'"
  196.   let html = `
  197.   <div class="action_btns">
  198.     <div class="action_btn play tu elmHover" onclick="playNow(this, ${q+matcher+q}, ${q+modal+q})"></div>
  199.     <div class="action_btn watchlist tu elmHover" onclick="addToWatchlist(this, ${q+matcher+q}, ${q+modal+q})"></div>
  200.     <div class="action_btn history tu elmHover" onclick="addToHistory(this, ${q+matcher+q}, ${q+modal+q})"></div>
  201.   </div>
  202.   `
  203.   return html
  204. }
  206. /**
  207.  * Generates element used for an alert box with a yes/no option.
  208.  * Takes a callback that allows different actions depending on the clicked button.
  209.  * @memberof generators
  210.  * @param {Object} options Data to render in the alert box
  211.  * @param {String} options.title
  212.  * @param {String} options.description
  213.  * @param {String} options.acceptButtonText
  214.  * @param {String} options.declineButtonText
  215.  * @param {Function} proceed Callback function for button clicks
  216.  * @returns {HTMLElement}
  217.  */
  218. function confirmActionAlertBox(options, proceed) {
  219.   let box = document.createElement('div')
  220.   box.classList = 'alertBox black_b shadow_h'
  221.   box.innerHTML = `
  222.     <h4 class="fs23 fw700 white_t">${options.title}</h4>
  223.     <p class="fs18 fw200 white_d_t" style="margin-bottom:10px">${options.description}</p>
  224.     <div class="alert_btns"></div>
  225.   `
  227.   let close = document.createElement('div')
  228.   close.classList = 'btn-close black_d_b elmHover'
  229.   close.innerHTML = `<img src="../../assets/icons/app/close.svg">`
  230.   close.onclick = function() { proceed(false) }
  231.   box.appendChild(close)
  233.   let buttons = box.getElementsByClassName('alert_btns')[0]
  235.   let accept = document.createElement('div')
  236.   accept.classList = 'alert_btn red_b white_t elmHover'
  237.   accept.innerText = options.acceptButtonText
  238.   accept.onclick = function() { proceed(true) }
  239.   buttons.appendChild(accept)
  241.   let decline = document.createElement('div')
  242.   decline.classList = 'alert_btn black_d_b white_t elmHover'
  243.   decline.innerHTML = options.declineButtonText
  244.   decline.onclick = function() { proceed(false) }
  245.   buttons.appendChild(decline)
  247.   return box
  248. }