{"id":1003,"date":"2022-02-24T09:31:21","date_gmt":"2022-02-24T09:31:21","guid":{"rendered":"https:\/\/avamonitoring.com\/?page_id=1003"},"modified":"2022-02-24T16:29:31","modified_gmt":"2022-02-24T16:29:31","slug":"video","status":"publish","type":"page","link":"https:\/\/avamonitoring.com\/en\/video\/","title":{"rendered":"Video"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"1003\" class=\"elementor elementor-1003\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-211bd35 elementor-section-height-min-height elementor-section-boxed elementor-section-height-default elementor-section-items-middle\" data-id=\"211bd35\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-bec78d4\" data-id=\"bec78d4\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2587917 elementor-widget elementor-widget-html\" data-id=\"2587917\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script>\n  window.addEventListener('load', function () {\n    fetchVideos().then(function (metadata) {\n      window.allAvaVideos = metadata.videos;\n      createVideoList(metadata.videos);\n      createCategoryList(metadata.categories);\n    });\n  });\n  function fetchVideos() {\n    return fetch(\"https:\/\/avamonitoring.com\/api\/dreambroker.php\")\n      .then(function (response) {\n        if (!response.ok) {\n          onVideoListError({ httpStatus: response.status });\n          return;\n        }\n        return response.json();\n      })\n      .then(function (metadata) {\n        return {\n          videos: metadata.items,\n          categories: metadata.categories\n        }\n      })\n      .catch(onVideoListError);\n  }\n  function onVideoListError(error) {\n    \/\/  Hantera fel med filmer.\n  }\n  function createVideoList(videos) {\n    const list = document.getElementById('ava-video-list');\n    list.innerHTML = \"\";\n    for (let video of videos) {\n      list.appendChild(createVideoListItem(video));\n    }\n  }\n  function createVideoListItem(video) {\n    const listItem = document.createElement('div');\n    listItem.setAttribute('role', 'listitem');\n    listItem.classList.add('ava-video-list-item');\n    listItem.setAttribute('data-category-id', video.categoryId);\n    const player = document.createElement('iframe');\n    player.src = video.player;\n    const title = document.createElement('h3');\n    title.innerHTML = video.title;\n    listItem.appendChild(player);\n    listItem.appendChild(title);\n    return listItem;\n  }\n  function filterVideosByCategoryId(categoryId) {\n    const list = document.getElementById('ava-video-list');\n    list.classList.add('bye');  \/\/  Hide list\n    setTimeout(function () {\n      list.classList.remove('bye');\n      createVideoList(window.allAvaVideos.filter(function (video) {\n        return video.categoryId === categoryId;\n      }))\n    }, 400);\n  }\n  function createCategoryList(categories) {\n    const list = document.getElementById('ava-video-category-list');\n    list.innerHTML = \"\";\n    for (let category of categories) {\n      list.appendChild(createCategoryListItem(category));\n    }\n  }\n  function createCategoryListItem(category) {\n    const listItem = document.createElement('label');\n    listItem.htmlFor = category.categoryId;\n    listItem.classList.add('ava-video-category-list-item');\n    const radio = document.createElement('input');\n    radio.id = category.categoryId;\n    radio.type = 'radio';\n    radio.name = 'category';\n    radio.style.display = 'none';\n    radio.addEventListener('change', function () {\n      if (radio.checked) {\n        filterVideosByCategoryId(category.categoryId);\n      }\n    });\n    const button = document.createElement('button');\n    button.addEventListener('click', function () {\n      listItem.click();\n    });\n    button.innerHTML = category.category;\n    listItem.appendChild(radio);\n    listItem.appendChild(button);\n    return listItem;\n  }\n<\/script>\n<style>\n  .ava-video-header {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n  }\n  #ava-video-category-list {\n    display: flex;\n    flex-direction: row;\n    gap: 6px;\n  }\n  .ava-video-category-list-item input:checked+button {\n    opacity: 0.75;\n    color: red;\n    \/* G\u00f6r n\u00e5gon cool styling h\u00e4r med knappen. *\/\n  }\n  #ava-video-list {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr;\n    gap: 24px;\n    min-width: 100%;\n    max-width: 100%;\n    animation: ava-video-list-enter 400ms ease-out forwards;\n  }\n  #ava-video-list.bye {\n    animation-name: ava-video-list-exit;\n    animation-timing-function: ease-in forwards;\n  }\n  .ava-video-list-item {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n  @keyframes ava-video-list-enter {\n    from {\n      transform: translateX(8px);\n      opacity: 0;\n    }\n  }\n  @keyframes ava-video-list-exit {\n    to {\n      transform: translateX(-8px);\n      opacity: 0;\n    }\n  }\n<\/style>\n<header class=\"ava-video-header\">\n  <h2>Videos<\/h2>\n  <form onsubmit=\"event.preventDefault(); return false;\" id=\"ava-video-category-list\" role=\"list\" action=\"\">\n  <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n<\/header>\n<div id=\"ava-video-list\" role=\"list\">\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Videos<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1003","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/avamonitoring.com\/en\/wp-json\/wp\/v2\/pages\/1003","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/avamonitoring.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/avamonitoring.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/avamonitoring.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/avamonitoring.com\/en\/wp-json\/wp\/v2\/comments?post=1003"}],"version-history":[{"count":16,"href":"https:\/\/avamonitoring.com\/en\/wp-json\/wp\/v2\/pages\/1003\/revisions"}],"predecessor-version":[{"id":1024,"href":"https:\/\/avamonitoring.com\/en\/wp-json\/wp\/v2\/pages\/1003\/revisions\/1024"}],"wp:attachment":[{"href":"https:\/\/avamonitoring.com\/en\/wp-json\/wp\/v2\/media?parent=1003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}