{"id":1403,"date":"2022-05-27T10:22:10","date_gmt":"2022-05-27T10:22:10","guid":{"rendered":"https:\/\/lukatilinger.com\/?page_id=1403"},"modified":"2022-05-27T12:38:18","modified_gmt":"2022-05-27T12:38:18","slug":"komponente","status":"publish","type":"page","link":"https:\/\/lukatilinger.com\/index.php\/komponente\/","title":{"rendered":"Komponente"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1403\" class=\"elementor elementor-1403\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-02412f7 elementor-section-stretched elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"02412f7\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\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-d90ffeb\" data-id=\"d90ffeb\" 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-37fb415 elementor-widget elementor-widget-heading\" data-id=\"37fb415\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"id-naslov\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Naslov<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9804376 nasa-slika elementor-widget elementor-widget-image\" data-id=\"9804376\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"id-slika\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/lukatilinger.com\/wp-content\/plugins\/elementor\/assets\/images\/placeholder.png\" title=\"\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-26bcf8f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"26bcf8f\" 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-33 elementor-inner-column elementor-element elementor-element-3269b21\" data-id=\"3269b21\" 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-1fa07b8 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"1fa07b8\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"id-previous\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-size-md\" role=\"button\" id=\"id-button-1\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Previous<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\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<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-bb00d5c\" data-id=\"bb00d5c\" 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-b017a8b elementor-align-center elementor-widget elementor-widget-button\" data-id=\"b017a8b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-size-md\" role=\"button\" id=\"id-button-add\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Add<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\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<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-cbff05b\" data-id=\"cbff05b\" 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-77a3e95 elementor-align-center elementor-widget__width-inherit elementor-widget elementor-widget-button\" data-id=\"77a3e95\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"id-next\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-size-md\" role=\"button\" id=\"id-button-2\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Next<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\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\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b7ecf03 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b7ecf03\" 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-99751ab\" data-id=\"99751ab\" 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-37ddc40 elementor-widget elementor-widget-html\" data-id=\"37ddc40\" 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\n<div class=\"collapsable-block\">\n    <div class=\"collapsable-header\" id=\"kutija-header\" onclick=tgl()>\n        Ovo je naslov box-a\n    <\/div>\n<div class=\"collapsable-body\" id=\"kutija\">\n    <div style=\"padding:1rem\" class=\"body-container\" id=\"lista-slika\">\n    <img decoding=\"async\" src=\"https:\/\/lukatilinger.com\/wp-content\/uploads\/2021\/09\/ABVG-Korica.jpg\" class=\"small-img\">\n    <img decoding=\"async\" src=\"https:\/\/lukatilinger.com\/wp-content\/uploads\/2021\/09\/ABVG-Korica.jpg\" class=\"small-img\">\n    <\/div>\n<\/div>\n<\/div>\n\n<script>\n\nvar slikaIndex = 0;\nvar isCollapsed;\nvar prevDugme;\nvar nextDugme;\nvar addDugme;\nvar slika;\nvar naslov;\nvar collapsable;\nvar collapsableHeader;\nvar listaSlika;\n\nvar url1 = \"https:\/\/lukatilinger.com\/wp-content\/uploads\/2021\/09\/ABVG-Korica.jpg\";\nvar slike = \n[\n    {url: url1, naslov:\"ABVG\" },\n    {url: \"https:\/\/lukatilinger.com\/wp-content\/uploads\/2021\/09\/Korica3.jpg\", naslov:\"Krov\" },\n    {url: \"https:\/\/lukatilinger.com\/wp-content\/uploads\/2021\/10\/01_Stan-1-768x747.jpg\", naslov:\"Ruke\" }\n]\n\nfunction imgClick(event)\n{\n    console.log(event);\n}\n\n\nfunction addImg()\n{\n    console.log(\"!!\");\n    var newImg = document.createElement(\"Img\");\n    newImg.src=slike[slikaIndex].url;\n    listaSlika.appendChild(newImg);\n    newImg.classList=[\"small-img\"];\n    if (!isCollapsed)\n        collapsable.style.maxHeight= kutija.scrollHeight+\"px\";\n}\n\nfunction tgl()\n{\n    console.log(\"Toggle!\");\n    isCollapsed = !isCollapsed;\n    if (isCollapsed)\n    {\n        collapsable.style.maxHeight= \"0px\";\n    }\n    else\n    {\n        \n        collapsable.style.maxHeight= kutija.scrollHeight+\"px\";\n    }\n    \n    if (isCollapsed)\n    {\n        if (!collapsableHeader.classList.contains(\"collapsed-header\"))\n        {\n            collapsableHeader.classList.add(\"collapsed-header\");\n        }\n    }\n    else\n    {\n        if (collapsableHeader.classList.contains(\"collapsed-header\"))\n        {\n            collapsableHeader.classList.remove(\"collapsed-header\");\n        }\n    }\n}\n\nfunction uradi()\n{\n    inicijalizacijaReferenci();\n    console.log(collapsable);\n    slika.style.height=\"400px\";\n    addDugme.classList.add('nase-dugme-opste');\n    prevDugme.classList.add('nase-dugme-opste');\n    nextDugme.classList.add('nase-dugme-opste');\n    prevDugme.onclick = previousImage;\n    nextDugme.onclick = nextImage;\n    addDugme.onclick = addImg;\n    refreshDOM();\n    \n}\n\nfunction inicijalizacijaReferenci()\n{\n    prevDugme = document.getElementById(\"id-button-1\");\n    nextDugme = document.getElementById(\"id-button-2\");\n    addDugme = document.getElementById(\"id-button-add\");\n    listaSlika = document.getElementById(\"lista-slika\");\n    collapsable = document.getElementById(\"kutija\");\n    collapsableHeader = document.getElementById(\"kutija-header\");\n    \n    for (let element of document.getElementById(\"id-naslov\").childNodes)\n    { \n        if (element.classList != null)\n        if (element.classList.contains(\"elementor-widget-container\")) \n           {\n             for (let element2 of element.childNodes)\n                { \n                    if (element2.classList != null)\n                    if (element2.classList.contains(\"elementor-heading-title\"))\n                        naslov = element2;\n                        \/\/console.log(element2);  \n                        \/\/element2.innerHTML \/\/=\"Pozdrav!\";\n                }\n           }\n    }\n      for (let element of document.getElementById(\"id-slika\").childNodes)\n    { \n        if (element.classList != null)\n        if (element.classList.contains(\"elementor-widget-container\")) \n           {\n             for (let element2 of element.childNodes)\n                { \n                    if (element2.nodeName == \"IMG\")\n                        slika = element2; \n                }\n           }\n    }\n}\n\nfunction previousImage()\n{\n    slikaIndex--;\n    if (slikaIndex<0)\n        slikaIndex = slike.length-1;\n    refreshDOM();\n}\n\nfunction nextImage()\n{\n    slikaIndex++;\n    \n    if (slikaIndex>= slike.length)\n        slikaIndex = 0;\n        refreshDOM();\n}\n\nfunction refreshDOM()\n{\n      postaviNaslov(slike[slikaIndex].naslov);\n    slika.src = slike[slikaIndex].url;\n}\n\nfunction postaviNaslov(noviNaslov)\n{\n    naslov.innerHTML = noviNaslov;\n}\n\nuradi()\n<\/script>\n\n\n<style>\n    .collapsable-block{\n        width: 60vw;\n    }\n    .collapsable-header{\n    \n    background-color: red;\n    min-height: 2rem;\n    font-family: Raleway;\n    color: white;\n    padding: 0.4rem 2rem;\n    }\n    \n    .collapsable-body{\n    background-color: #eeeeee;\n    color: black;\n    overflow: hidden;\n    max-height: 1000px;\n    transition: max-height 1s;\n    }\n    \n    .body-container\n    {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    \n    }\n    \n    .collapsed-header\n    {\n        background-color: blue;\n    }\n    \n    .small-img\n    {\n        height:120px !important; \n        width:300px; \n        object-fit: cover;\n        margin:1rem;\n    }\n    \/*.collapsed\n    {\n    max-height: 0px;\n    }*\/\n<\/style>\n\n\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>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Naslov Previous Add Next Ovo je naslov box-a<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-1403","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/lukatilinger.com\/index.php\/wp-json\/wp\/v2\/pages\/1403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lukatilinger.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lukatilinger.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lukatilinger.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lukatilinger.com\/index.php\/wp-json\/wp\/v2\/comments?post=1403"}],"version-history":[{"count":154,"href":"https:\/\/lukatilinger.com\/index.php\/wp-json\/wp\/v2\/pages\/1403\/revisions"}],"predecessor-version":[{"id":1578,"href":"https:\/\/lukatilinger.com\/index.php\/wp-json\/wp\/v2\/pages\/1403\/revisions\/1578"}],"wp:attachment":[{"href":"https:\/\/lukatilinger.com\/index.php\/wp-json\/wp\/v2\/media?parent=1403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}