docuhelp/createMarkup.js

self service knowledgebase software

let create = function(data){
  
  let contentCard = data.articles.map(item => {
    return `<div class="dh-content-card" id="${item.id}">
      <div class="dh-content-card__title">
        ${item.short_title}
      </div>
      <div class="dh-content-card__body">
        ${item.excerpt}
      </div>
    </div>
    `
  })
  
  let htmlString = `
  
    <div class="dh-wrapper" id="dh-wrapper">
      <div class="dh-frame hidden" id="dh-frame">
        <div class="dh-header">
          <span id="dh-back-button" class="hidden">&larr;</span>
          <span id="dh-cancel-button" class="hidden">&larr;</span>
          <div class="dh-header-title">${data.headerText}</div>
        </div>
        <div class="dh-content scrollbar" id="dh-content">
          <div id="dh-content-list">
            ${contentCard.join(' ')}
          </div>

          <div id="dh-content-card-open" class="scrollbar hidden"></div>
        
        </div>
        <div class="dh-footer">
          <input type="text" id="dh-search" placeholder="${data.searchOptions.searchText}">
          <button id="dh-search-button">
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">  <image id="image0" width="50" height="50" x="0" y="0"
              xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAsVBMVEUAAABJSUlmZmZVVVUAAAAA
              AABAQEAzMzNVVVVERERJSUlVVVWAgID///9AQEBVVVUqKipOTk6AgIBGRkZAQEBNTU1gYGAAAAAD
              AwMAAAAMDAwAAAAEBAQzMzMEBAQAAAAEBAQODg4AAAAGBgYAAAAAAAAAAAAAAAA5OTkYGBgAAAAF
              BQUAAAAAAAAFBQUsLCwBAQEAAAAAAAAAAAAAAAABAQECAgIDAwMEBAMEBAQDAwLC0IQqAAAANHRS
              TlMABwUDAgEEBQYPDgkCAQgMBg0ECwwKCEGlokL++hTnR4wkELHl3hY+CSsG21N20he2nQiZ7bjW
              rAAAAplJREFUSMeNlol22jAQRccYJcZxHVygG+m+0X0TFPj/D+ub0eKRrDSRzgmOpKfR1Sw2USV9
              RjXNyZBqBgMXdEmNX+J6Q/izQG/pCtOdVjzAJj1dY2qhektLkp8BiodYlCmqiWKgFVtpaQ3FDIuM
              VlxgajVRbDCOhzU9gqLLFX1RISwDFPfk2GBrbOzIM46uwNHCasNbz6Yc3S0cK4zKYa4KHI+fPH1W
              5Kh5YY3bTTns3h7sX3u0pwlH7bbOOKwojqxAzzlEMU84tvvRhvSbhMMEWKNMsMKTP3eqlMMFnzoU
              2+jh2sGfx2kSjrRtYWPLrh3vijUvYDW71NjYRu6PE6gUedZsQbGgoz1jtHgq8QdH4pBFyRn3cbvi
              kHB4f+DO90VFB5LDy3Uhrl5hL6WIj4gr7FbKjwp72bQgxIyCzzMO70GrJAZYMT9e4zZLGdWRkhj8
              W8fK8AZxNeEQf4wStjFTlQFWphx8u1HCigaFLVaGND9UJAaJkTK1cQ9SGRBNb0sZ9c5LmKORJIgV
              7kZl1KAyCor3XjHDRi2nWIgrRO2HnIPoozPiODaY6mmscD6fsoyyIgkc7Diwx3rlNUlGBYXjYMWO
              VIX75HNQ5QcrPnuOEE645tHnX6A5fh0rwzcrLXC4hTtKIvG75Yw6RH/4NnKIlSaJkh+sQLTHZqTo
              NCr1dlTKqCjYglwKm04L/+LTlfpnEPxy/oDirII8sZJVuBiJUOiQVVYKFc7Ii2Yl5TYs60lz5BUu
              eJBD9vR7YkVHYpJR4o+SFR2JmiP44894mPipUCAXjkkpXNKdHJni2ln5P0emkE+FuziSS+3dp0LR
              g1VRUXG1DBWuwDFMTsWHkal7c/TuMEsAZe+COWYusWOPGHS9R+eF/JX3D3qjXtUl+cYNAAAAAElF
              TkSuQmCC" />
            </svg>
          </button>
        </div>
      </div>
      <div class="dh-button" id="dh-button">
        <span>X</span>
        
      </div>
    </div>
  `

  return htmlString
}

module.exports  = create