swaggerHighlightUI.js

qsa = (q, c) => Array.from((c || document).querySelectorAll(q))
qs = (q, c) => (c || document).querySelector(q)

swgr = {
  injected: false,
  rules: `
.opblock .checked:after {
  content: '✓';
  font-size: 24px;
  color: firebrick;
  font-weight: bold;
  padding: 0.5rem;
} 
`,
  injectStyle: function(style) {
    if (swgr.injected) { return }
    let sheet = document.createElement('style')
    sheet.innerHTML = style || swgr.rules
    document.head.appendChild(sheet)
    swgr.injected = true
  }
}

getProp = (list, key='opblock-summary-') => (Array.from(list).find(v => v.includes(key)) || '').replace(key, '')
getPayload = (el, list, key) => {
  const prop = getProp(list, key)
  return {[prop] : el.textContent}
}
 
// getEntries = () => Array.from(document.querySelectorAll('.opblock-summary'))
queryEntries = () => qsa('.opblock-summary').map(ctx => ({row:qsa('[class^="opblock-summary-"]', ctx), opblock: ctx.parentNode}))
getEntries = () => queryEntries()
  .map(({row, opblock}) => 
    row.reduce((acc, el) => ([...acc, {el, prop: getProp(el.classList), value: getPayload(el, el.classList), prop: getProp(el.classList) }]), 
  []))
  .map(v => v.reduce((acc, v) => ({...acc, ...v.value}), {}) )



hlOne = ({method, path}) => {
  // const opblock = qs('.opblock-summary-get > [data-path="/system/prototype/{id}"]').parentElement
  const opblock = qs(`.opblock-summary-${ method } > [data-path="${ path }"]`).parentElement
  if (opblock.matches('.opblock-summary')) {
    opblock.classList.add('checked')
  }
}

confDefault = [
  {method: 'PATCH', path: '/v1/file/{id}', text: '5'},
  {method: 'GET', path: '/system/memory', text: '2'}
]

hl = (conf = confDefault) => {
  if (!Array.isArray(conf) || !conf.length) {
     console.log( 'conf must look like: ', confDefault)
     return
  }
  swgr.injectStyle(swgr.rules)
  conf.forEach( item => hlOne({...item, method: String(item.method || '').toLowerCase()}) )
}

// https://tie.hypergraph.dev.k8s.id-network.ru/tie/api/swagger