Masonry waterfall layout with filtering<\/title>\n \n\n \n <style>\n :root {\n --main-bg-color: #ff7675;\n }\n\n *,\n *::after,\n *::before {\n box-sizing: border-box;\n }\n\n html {\n \/*font-size: .625em;*\/\n \/*font-size: calc(1em * .625);*\/\n background: #f4f4f4;\n -ms-text-size-adjust: 100%;\n -webkit-text-size-adjust: 100%;\n }\n\n \/*body {*\/\n \/* -webkit-font-smoothing: antialiased;*\/\n \/* -moz-osx-font-smoothing: grayscale;*\/\n \/* margin: 0;*\/\n \/* padding: 0;*\/\n \/* font: normal 300 1.4em \/ 1.2 'Open-sans', helvetica, sans-serif;*\/\n \/* color: #111;*\/\n \/*}*\/\n\n \/*a {*\/\n \/* text-decoration: none;*\/\n \/* color: #111;*\/\n \/* cursor: pointer;*\/\n \/*}*\/\n\n \/*ol,*\/\n \/*ul {*\/\n \/* list-style: none;*\/\n \/* margin: 0;*\/\n \/* padding: 0;*\/\n \/*}*\/\n\n img {\n max-width: 100%;\n }\n\n b,\n strong {\n font-weight: 600;\n }\n\n hr {\n background: #111;\n box-shadow: none;\n border: none;\n height: 1px;\n width: 100%;\n margin: 10px 0;\n }\n\n ::selection {\n background: var(--main-bg-color);\n color: #fff;\n }\n\n ::-moz-selection {\n background: var(--main-bg-color);\n color: #fff;\n }\n\n .container {\n width: 100%;\n max-width: 980px;\n margin: 0 auto;\n padding: 0 10px;\n }\n\n .wrapper {\n padding: 40px 0;\n }\n\n .card {\n background: #fff;\n border-radius: 6px;\n box-shadow: 0px 2px 6px rgba(0, 0, 0, .1);\n display: flex;\n flex-direction: column;\n transition: box-shadow .2s ease-in-out;\n }\n\n .card__picture {\n display: block;\n width: 100%;\n height: auto;\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n }\n\n .card-infos {\n padding: 20px;\n background: #fff;\n border-bottom-left-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n .card__title {\n font-family: 'Hind';\n font-size: 1.2rem;\n font-weight: 600;\n line-height: 1.4;\n margin: 0 0 10px;\n }\n\n .card__text {\n font-size: 1.4rem;\n font-weight: 300;\n margin: 0;\n color: #86888A;\n }\n\n .card__text--high {\n font-weight: 600;\n }\n\n .header {\n background: var(--main-bg-color);\n height: 160px;\n display: flex;\n }\n\n .header__title {\n margin: auto;\n font-weight: 300;\n font-size: 3.2rem;\n color: #fff;\n }\n\n .header__title--high {\n font-weight: 600;\n }\n\n .sortable__nav {\n display: flex;\n justify-content: center;\n margin-bottom: 20px;\n }\n\n .nav__link {\n cursor: pointer;\n padding: 0 20px 4px;\n color: #111;\n font-size: 1rem;\n font-weight: 300;\n display: block;\n border-bottom: 2px solid transparent;\n }\n\n .nav__link.is-active {\n border-color: var(--main-bg-color);\n }\n\n .footer__list.list {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .list__item.item {\n display: flex;\n }\n\n .item__link.link {\n margin: 0;\n }\n\n .item__link.link:not(:first-child) {\n margin-left: 20px;\n }\n\n .link__icon {\n height: 2rem;\n width: 2rem;\n }\n\n .isolde-default {\n position: relative;\n padding: 0;\n margin: 0;\n opacity: 0;\n transition: height .2s ease-out, opacity .2s ease-out .2s;\n }\n\n [data-isolde-el] {\n opacity: 0;\n position: absolute;\n top: 0;\n left: 0;\n transition: transform .2s ease-out;\n }\n <\/style>\n\n<\/head>\n\n<body>\n \n \n \n \n \n <main class=\"sortable\">\n <div class=\"container\">\n\n <div class=\"wrapper\">\n <ul class=\"sortable__nav nav\">\n <li>\n <a data-isolde-link=\"all\" class=\"nav__link\" style=\"text-decoration: none\">\n full\n <\/a>\n <\/li>\n <li>\n <a data-isolde-link=\"robot\" class=\"nav__link\" style=\"text-decoration: none\">\n Robot\n <\/a>\n <\/li>\n <li>\n <a data-isolde-link=\"assembly\" class=\"nav__link\" style=\"text-decoration: none\">\n subassemblies\n <\/a>\n <\/li>\n <li>\n <a data-isolde-link=\"accessory\" class=\"nav__link\" style=\"text-decoration: none\">\n Accessories\n <\/a>\n <\/li>\n <\/ul>\n <div id=\"isolde\" class=\"isolde-default\">\n \n <div data-isolde-el=\"robot\">\n <div class=\"card\">\n <img decoding=\"async\" class=\"card__picture\"\n src=\"https:\/\/assets.iqr-robot.com\/wp-content\/uploads\/2023\/08\/robotGroup.png\"\n alt=\"\">\n <div class=\"card-infos\">\n <h2 class=\"card__title\">Scout Mini Swarm Robot<\/h2>\n <a href=\"https:\/\/doc.iqr-robot.com\/scout_mini_swarm_user_manual\/\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"text-decoration: none\">View Document<\/a>\n <\/div>\n <\/div>\n <\/div>\n \n <div data-isolde-el=\"robot\">\n <div class=\"card\">\n <img decoding=\"async\" class=\"card__picture\"\n src=\"https:\/\/assets.iqr-robot.com\/wp-content\/uploads\/2023\/09\/20230906182909680335.jpg\"\n alt=\"\">\n <div class=\"card-infos\">\n <h2 class=\"card__title\">IQR Turtlebot4<\/h2>\n <a href=\"https:\/\/doc.iqr-robot.com\/new_TB4_user_manual\/site\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"text-decoration: none\">View Document<\/a>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div data-isolde-el=\"assembly\">\n <div class=\"card\">\n <img decoding=\"async\" class=\"card__picture\"\n src=\"https:\/\/assets.iqr-robot.com\/wp-content\/uploads\/2023\/08\/navigation1.png\"\n alt=\"\">\n <div class=\"card-infos\">\n <h2 class=\"card__title\">IQR NV Base Gen1<\/h2>\n <a href=\"https:\/\/doc.iqr-robot.com\/slam_portable_user_manual\/\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"text-decoration: none\">View Document<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div data-isolde-el=\"assembly\">\n <div class=\"card\">\n <img decoding=\"async\" class=\"card__picture\"\n src=\"https:\/\/assets.iqr-robot.com\/wp-content\/uploads\/2023\/08\/navigation2.png\"\n alt=\"\">\n <div class=\"card-infos\">\n <h2 class=\"card__title\">IQR NV Base Gen2<\/h2>\n <a href=\"https:\/\/doc.iqr-robot.com\/nv_base_user_manual\/\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"text-decoration: none\">View Document<\/a>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div data-isolde-el=\"accessory\">\n <div class=\"card\">\n <img decoding=\"async\" class=\"card__picture\"\n src=\"https:\/\/assets.iqr-robot.com\/wp-content\/uploads\/2023\/05\/20220513112443971.webp\"\n alt=\"\">\n <div class=\"card-infos\">\n <h2 class=\"card__title\">IQR PAU<\/h2>\n <a href=\"https:\/\/doc.iqr-robot.com\/pau_user_manual\/\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"text-decoration: none\">View Document<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div data-isolde-el=\"accessory\">\n <div class=\"card\">\n <img decoding=\"async\" class=\"card__picture\"\n src=\"https:\/\/assets.iqr-robot.com\/wp-content\/uploads\/2023\/08\/\u4ea7\u54c1\u56fe.png\"\n alt=\"\">\n <div class=\"card-infos\">\n <h2 class=\"card__title\">IQR PTU2<\/h2>\n <a href=\"https:\/\/doc.iqr-robot.com\/pan_tilt_unit_user_manual\/\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"text-decoration: none\">View Document<\/a>\n <\/div>\n <\/div>\n <\/div>\n \n <\/div>\n <\/div>\n <\/div>\n <\/main>\n \n <script type=\"module\">\n \/\/ import isolde from '.\/isolde.js';\n class isolde {\n constructor({\n parent = document.querySelector('#isolde'),\n links = document.querySelectorAll('[data-isolde-link]'),\n active = 'is-active',\n margin = 20,\n responsive = {\n 980: {\n columns: 3\n },\n 480: {\n columns: 2\n },\n 0: {\n columns: 1\n }\n },\n fadeDuration = {\n in: 300,\n out: 0\n }\n } = {}) {\n this.parent = parent\n this.links = Array.from(links)\n this.active = active\n this.margin = margin\n this.responsive = responsive\n this.fadeDuration = fadeDuration\n this.elements = Array.from(this.parent.children)\n this.activeElements = this.elements\n this.columns = 1\n this.dataLink = 'all'\n this.winWidth = window.innerWidth\n\n this.init()\n }\n\n orderelements() {\n let { parent, activeElements, columns, blocWidth, responsive, margin } = this\n\n let arrayRectHeight = activeElements.reduce((acc, el, id) => {\n let columnsHeight = this._sumArrHeight(acc, columns)\n let positionX = (id % columns) * (blocWidth + margin)\n let rectHeight = (id - columns >= 0) ? (columnsHeight[id % columns] + (margin * Math.floor(id \/ columns))) : 0\n\n el.style.transform = `translate3d(${positionX}px, ${rectHeight}px, 0)`\n\n acc.push(el.offsetHeight)\n return acc\n }, [])\n\n let columnsMaxHeight = this._sumArrHeight(arrayRectHeight, columns)\n let parentHeight = Math.max(...columnsMaxHeight) + (margin * (Math.floor(activeElements.length \/ columns) - 1))\n parent.style.height = `${parentHeight}px`\n }\n\n handleFilterClick(ev, element) {\n ev.preventDefault()\n let { links, active } = this\n\n if (element.dataset.isoldeLink === this.dataLink) {\n return\n } else {\n this.dataLink = element.dataset.isoldeLink\n links.forEach(el => {\n el.isEqualNode(element) ? el.classList.add(active) : el.classList.remove(active)\n })\n this._filterElements(() => {\n this.orderelements()\n })\n }\n }\n\n resize() {\n window.addEventListener('resize', () => {\n clearTimeout(window.sortableResize)\n window.sortableResize = setTimeout(() => {\n this.winWidth = window.innerWidth\n this._setBlocWidth(() => {\n this.orderelements()\n })\n }, 500)\n })\n }\n\n init() {\n let { parent, links, active } = this\n\n links.forEach((el, id) => {\n if (id === 0) {\n el.classList.add(active)\n this.dataLink = el.dataset.isoldeLink\n }\n el.addEventListener('click', ev => {\n this.handleFilterClick(ev, el)\n })\n })\n\n this._setBlocWidth()\n\n window.addEventListener('load', () => {\n this._filterElements(() => {\n this.orderelements()\n })\n parent.style.opacity = 1\n })\n\n this.resize()\n }\n\n _setBlocWidth(callback) {\n let { parent, elements, margin, responsive } = this\n\n let columns = this.columns = this._columnsCount(responsive)['columns']\n let blocWidth = this.blocWidth = (parent.clientWidth - (margin * (columns - 1))) \/ columns\n\n elements.forEach(el => {\n el.style.width = `${blocWidth}px`\n })\n if (callback) {\n callback()\n }\n }\n _filterElements(callback) {\n let { elements, dataLink, fadeDuration } = this\n\n this.activeElements = elements.filter(el => {\n if (dataLink === 'all') {\n this._fadeIn(el, fadeDuration.in)\n return true\n } else {\n if (el.dataset.isoldeEl !== dataLink) {\n this._fadeOut(el, fadeDuration.out)\n return false\n } else {\n this._fadeIn(el, fadeDuration.in)\n return true\n }\n }\n })\n\n if (callback) {\n callback()\n }\n }\n _sumArrHeight(arr, col) {\n return arr.reduce((acc, val, id) => {\n let cle = id % col\n if (!acc[cle]) {\n acc[cle] = 0\n }\n acc[cle] = acc[cle] + val\n return acc\n }, [])\n }\n _columnsCount(obj) {\n let { winWidth } = this\n return Object.entries(obj).reduce((acc, val) => {\n return winWidth > val[0] && val[0] >= Math.max(acc['width'])\n ? { width: val[0], columns: val[1]['columns'] }\n : acc\n }, { width: 0, columns: 4 })\n }\n _fadeIn(el, duration = 300, callback) {\n let opacity = parseFloat(window.getComputedStyle(el, null).getPropertyValue(\"opacity\")),\n interval = 16,\n gap = interval \/ duration\n\n el.style.display = 'block'\n\n function animation() {\n opacity += gap\n\n if (opacity <= 1) {\n el.style.opacity = opacity\n requestAnimationFrame(animation)\n } else {\n el.style.opacity = 1\n if (callback) {\n callback()\n }\n }\n }\n requestAnimationFrame(animation)\n }\n _fadeOut(el, duration = 300, callback) {\n let opacity = parseFloat(window.getComputedStyle(el, null).getPropertyValue(\"opacity\")),\n interval = 16,\n gap = duration ? (interval \/ duration) : 1\n\n function animation() {\n opacity -= gap\n\n if (opacity >= 0) {\n el.style.opacity = opacity\n requestAnimationFrame(animation)\n } else {\n el.style.opacity = 0\n el.style.display = 'none'\n if (callback) {\n callback()\n }\n }\n }\n requestAnimationFrame(animation)\n }\n }\n const isoldejs = new isolde();\n <\/script>\n\n<\/body>\n\n<\/html>\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>Masonry Waterfall Layout with Filtering All Robots Components Accessories Scout Mini Group Robot View Documentation IQR [...]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-3","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/iqr-robot.com\/en\/wp-json\/wp\/v2\/pages\/3","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iqr-robot.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/iqr-robot.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/iqr-robot.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iqr-robot.com\/en\/wp-json\/wp\/v2\/comments?post=3"}],"version-history":[{"count":137,"href":"https:\/\/iqr-robot.com\/en\/wp-json\/wp\/v2\/pages\/3\/revisions"}],"predecessor-version":[{"id":12426,"href":"https:\/\/iqr-robot.com\/en\/wp-json\/wp\/v2\/pages\/3\/revisions\/12426"}],"wp:attachment":[{"href":"https:\/\/iqr-robot.com\/en\/wp-json\/wp\/v2\/media?parent=3"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n \n \n \n \n Masonry waterfall layout with filtering<\/title>\n \n\n \n <style>\n :root {\n --main-bg-color: #ff7675;\n }\n\n *,\n *::after,\n *::before {\n box-sizing: border-box;\n }\n\n html {\n \/*font-size: .625em;*\/\n \/*font-size: calc(1em * .625);*\/\n background: #f4f4f4;\n -ms-text-size-adjust: 100%;\n -webkit-text-size-adjust: 100%;\n }\n\n \/*body {*\/\n \/* -webkit-font-smoothing: antialiased;*\/\n \/* -moz-osx-font-smoothing: grayscale;*\/\n \/* margin: 0;*\/\n \/* padding: 0;*\/\n \/* font: normal 300 1.4em \/ 1.2 'Open-sans', helvetica, sans-serif;*\/\n \/* color: #111;*\/\n \/*}*\/\n\n \/*a {*\/\n \/* text-decoration: none;*\/\n \/* color: #111;*\/\n \/* cursor: pointer;*\/\n \/*}*\/\n\n \/*ol,*\/\n \/*ul {*\/\n \/* list-style: none;*\/\n \/* margin: 0;*\/\n \/* padding: 0;*\/\n \/*}*\/\n\n img {\n max-width: 100%;\n }\n\n b,\n strong {\n font-weight: 600;\n }\n\n hr {\n background: #111;\n box-shadow: none;\n border: none;\n height: 1px;\n width: 100%;\n margin: 10px 0;\n }\n\n ::selection {\n background: var(--main-bg-color);\n color: #fff;\n }\n\n ::-moz-selection {\n background: var(--main-bg-color);\n color: #fff;\n }\n\n .container {\n width: 100%;\n max-width: 980px;\n margin: 0 auto;\n padding: 0 10px;\n }\n\n .wrapper {\n padding: 40px 0;\n }\n\n .card {\n background: #fff;\n border-radius: 6px;\n box-shadow: 0px 2px 6px rgba(0, 0, 0, .1);\n display: flex;\n flex-direction: column;\n transition: box-shadow .2s ease-in-out;\n }\n\n .card__picture {\n display: block;\n width: 100%;\n height: auto;\n border-top-left-radius: 6px;\n border-top-right-radius: 6px;\n }\n\n .card-infos {\n padding: 20px;\n background: #fff;\n border-bottom-left-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n .card__title {\n font-family: 'Hind';\n font-size: 1.2rem;\n font-weight: 600;\n line-height: 1.4;\n margin: 0 0 10px;\n }\n\n .card__text {\n font-size: 1.4rem;\n font-weight: 300;\n margin: 0;\n color: #86888A;\n }\n\n .card__text--high {\n font-weight: 600;\n }\n\n .header {\n background: var(--main-bg-color);\n height: 160px;\n display: flex;\n }\n\n .header__title {\n margin: auto;\n font-weight: 300;\n font-size: 3.2rem;\n color: #fff;\n }\n\n .header__title--high {\n font-weight: 600;\n }\n\n .sortable__nav {\n display: flex;\n justify-content: center;\n margin-bottom: 20px;\n }\n\n .nav__link {\n cursor: pointer;\n padding: 0 20px 4px;\n color: #111;\n font-size: 1rem;\n font-weight: 300;\n display: block;\n border-bottom: 2px solid transparent;\n }\n\n .nav__link.is-active {\n border-color: var(--main-bg-color);\n }\n\n .footer__list.list {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .list__item.item {\n display: flex;\n }\n\n .item__link.link {\n margin: 0;\n }\n\n .item__link.link:not(:first-child) {\n margin-left: 20px;\n }\n\n .link__icon {\n height: 2rem;\n width: 2rem;\n }\n\n .isolde-default {\n position: relative;\n padding: 0;\n margin: 0;\n opacity: 0;\n transition: height .2s ease-out, opacity .2s ease-out .2s;\n }\n\n [data-isolde-el] {\n opacity: 0;\n position: absolute;\n top: 0;\n left: 0;\n transition: transform .2s ease-out;\n }\n <\/style>\n\n<\/head>\n\n<body>\n \n \n \n \n \n <main class=\"sortable\">\n <div class=\"container\">\n\n <div class=\"wrapper\">\n <ul class=\"sortable__nav nav\">\n <li>\n <a data-isolde-link=\"all\" class=\"nav__link\" style=\"text-decoration: none\">\n full\n <\/a>\n <\/li>\n <li>\n <a data-isolde-link=\"robot\" class=\"nav__link\" style=\"text-decoration: none\">\n Robot\n <\/a>\n <\/li>\n <li>\n <a data-isolde-link=\"assembly\" class=\"nav__link\" style=\"text-decoration: none\">\n subassemblies\n <\/a>\n <\/li>\n <li>\n <a data-isolde-link=\"accessory\" class=\"nav__link\" style=\"text-decoration: none\">\n Accessories\n <\/a>\n <\/li>\n <\/ul>\n <div id=\"isolde\" class=\"isolde-default\">\n \n <div data-isolde-el=\"robot\">\n <div class=\"card\">\n <img decoding=\"async\" class=\"card__picture\"\n src=\"https:\/\/assets.iqr-robot.com\/wp-content\/uploads\/2023\/08\/robotGroup.png\"\n alt=\"\">\n <div class=\"card-infos\">\n <h2 class=\"card__title\">Scout Mini Swarm Robot<\/h2>\n <a href=\"https:\/\/doc.iqr-robot.com\/scout_mini_swarm_user_manual\/\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"text-decoration: none\">View Document<\/a>\n <\/div>\n <\/div>\n <\/div>\n \n <div data-isolde-el=\"robot\">\n <div class=\"card\">\n <img decoding=\"async\" class=\"card__picture\"\n src=\"https:\/\/assets.iqr-robot.com\/wp-content\/uploads\/2023\/09\/20230906182909680335.jpg\"\n alt=\"\">\n <div class=\"card-infos\">\n <h2 class=\"card__title\">IQR Turtlebot4<\/h2>\n <a href=\"https:\/\/doc.iqr-robot.com\/new_TB4_user_manual\/site\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"text-decoration: none\">View Document<\/a>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div data-isolde-el=\"assembly\">\n <div class=\"card\">\n <img decoding=\"async\" class=\"card__picture\"\n src=\"https:\/\/assets.iqr-robot.com\/wp-content\/uploads\/2023\/08\/navigation1.png\"\n alt=\"\">\n <div class=\"card-infos\">\n <h2 class=\"card__title\">IQR NV Base Gen1<\/h2>\n <a href=\"https:\/\/doc.iqr-robot.com\/slam_portable_user_manual\/\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"text-decoration: none\">View Document<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div data-isolde-el=\"assembly\">\n <div class=\"card\">\n <img decoding=\"async\" class=\"card__picture\"\n src=\"https:\/\/assets.iqr-robot.com\/wp-content\/uploads\/2023\/08\/navigation2.png\"\n alt=\"\">\n <div class=\"card-infos\">\n <h2 class=\"card__title\">IQR NV Base Gen2<\/h2>\n <a href=\"https:\/\/doc.iqr-robot.com\/nv_base_user_manual\/\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"text-decoration: none\">View Document<\/a>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div data-isolde-el=\"accessory\">\n <div class=\"card\">\n <img decoding=\"async\" class=\"card__picture\"\n src=\"https:\/\/assets.iqr-robot.com\/wp-content\/uploads\/2023\/05\/20220513112443971.webp\"\n alt=\"\">\n <div class=\"card-infos\">\n <h2 class=\"card__title\">IQR PAU<\/h2>\n <a href=\"https:\/\/doc.iqr-robot.com\/pau_user_manual\/\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"text-decoration: none\">View Document<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div data-isolde-el=\"accessory\">\n <div class=\"card\">\n <img decoding=\"async\" class=\"card__picture\"\n src=\"https:\/\/assets.iqr-robot.com\/wp-content\/uploads\/2023\/08\/\u4ea7\u54c1\u56fe.png\"\n alt=\"\">\n <div class=\"card-infos\">\n <h2 class=\"card__title\">IQR PTU2<\/h2>\n <a href=\"https:\/\/doc.iqr-robot.com\/pan_tilt_unit_user_manual\/\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"text-decoration: none\">View Document<\/a>\n <\/div>\n <\/div>\n <\/div>\n \n <\/div>\n <\/div>\n <\/div>\n <\/main>\n \n <script type=\"module\">\n \/\/ import isolde from '.\/isolde.js';\n class isolde {\n constructor({\n parent = document.querySelector('#isolde'),\n links = document.querySelectorAll('[data-isolde-link]'),\n active = 'is-active',\n margin = 20,\n responsive = {\n 980: {\n columns: 3\n },\n 480: {\n columns: 2\n },\n 0: {\n columns: 1\n }\n },\n fadeDuration = {\n in: 300,\n out: 0\n }\n } = {}) {\n this.parent = parent\n this.links = Array.from(links)\n this.active = active\n this.margin = margin\n this.responsive = responsive\n this.fadeDuration = fadeDuration\n this.elements = Array.from(this.parent.children)\n this.activeElements = this.elements\n this.columns = 1\n this.dataLink = 'all'\n this.winWidth = window.innerWidth\n\n this.init()\n }\n\n orderelements() {\n let { parent, activeElements, columns, blocWidth, responsive, margin } = this\n\n let arrayRectHeight = activeElements.reduce((acc, el, id) => {\n let columnsHeight = this._sumArrHeight(acc, columns)\n let positionX = (id % columns) * (blocWidth + margin)\n let rectHeight = (id - columns >= 0) ? (columnsHeight[id % columns] + (margin * Math.floor(id \/ columns))) : 0\n\n el.style.transform = `translate3d(${positionX}px, ${rectHeight}px, 0)`\n\n acc.push(el.offsetHeight)\n return acc\n }, [])\n\n let columnsMaxHeight = this._sumArrHeight(arrayRectHeight, columns)\n let parentHeight = Math.max(...columnsMaxHeight) + (margin * (Math.floor(activeElements.length \/ columns) - 1))\n parent.style.height = `${parentHeight}px`\n }\n\n handleFilterClick(ev, element) {\n ev.preventDefault()\n let { links, active } = this\n\n if (element.dataset.isoldeLink === this.dataLink) {\n return\n } else {\n this.dataLink = element.dataset.isoldeLink\n links.forEach(el => {\n el.isEqualNode(element) ? el.classList.add(active) : el.classList.remove(active)\n })\n this._filterElements(() => {\n this.orderelements()\n })\n }\n }\n\n resize() {\n window.addEventListener('resize', () => {\n clearTimeout(window.sortableResize)\n window.sortableResize = setTimeout(() => {\n this.winWidth = window.innerWidth\n this._setBlocWidth(() => {\n this.orderelements()\n })\n }, 500)\n })\n }\n\n init() {\n let { parent, links, active } = this\n\n links.forEach((el, id) => {\n if (id === 0) {\n el.classList.add(active)\n this.dataLink = el.dataset.isoldeLink\n }\n el.addEventListener('click', ev => {\n this.handleFilterClick(ev, el)\n })\n })\n\n this._setBlocWidth()\n\n window.addEventListener('load', () => {\n this._filterElements(() => {\n this.orderelements()\n })\n parent.style.opacity = 1\n })\n\n this.resize()\n }\n\n _setBlocWidth(callback) {\n let { parent, elements, margin, responsive } = this\n\n let columns = this.columns = this._columnsCount(responsive)['columns']\n let blocWidth = this.blocWidth = (parent.clientWidth - (margin * (columns - 1))) \/ columns\n\n elements.forEach(el => {\n el.style.width = `${blocWidth}px`\n })\n if (callback) {\n callback()\n }\n }\n _filterElements(callback) {\n let { elements, dataLink, fadeDuration } = this\n\n this.activeElements = elements.filter(el => {\n if (dataLink === 'all') {\n this._fadeIn(el, fadeDuration.in)\n return true\n } else {\n if (el.dataset.isoldeEl !== dataLink) {\n this._fadeOut(el, fadeDuration.out)\n return false\n } else {\n this._fadeIn(el, fadeDuration.in)\n return true\n }\n }\n })\n\n if (callback) {\n callback()\n }\n }\n _sumArrHeight(arr, col) {\n return arr.reduce((acc, val, id) => {\n let cle = id % col\n if (!acc[cle]) {\n acc[cle] = 0\n }\n acc[cle] = acc[cle] + val\n return acc\n }, [])\n }\n _columnsCount(obj) {\n let { winWidth } = this\n return Object.entries(obj).reduce((acc, val) => {\n return winWidth > val[0] && val[0] >= Math.max(acc['width'])\n ? { width: val[0], columns: val[1]['columns'] }\n : acc\n }, { width: 0, columns: 4 })\n }\n _fadeIn(el, duration = 300, callback) {\n let opacity = parseFloat(window.getComputedStyle(el, null).getPropertyValue(\"opacity\")),\n interval = 16,\n gap = interval \/ duration\n\n el.style.display = 'block'\n\n function animation() {\n opacity += gap\n\n if (opacity <= 1) {\n el.style.opacity = opacity\n requestAnimationFrame(animation)\n } else {\n el.style.opacity = 1\n if (callback) {\n callback()\n }\n }\n }\n requestAnimationFrame(animation)\n }\n _fadeOut(el, duration = 300, callback) {\n let opacity = parseFloat(window.getComputedStyle(el, null).getPropertyValue(\"opacity\")),\n interval = 16,\n gap = duration ? (interval \/ duration) : 1\n\n function animation() {\n opacity -= gap\n\n if (opacity >= 0) {\n el.style.opacity = opacity\n requestAnimationFrame(animation)\n } else {\n el.style.opacity = 0\n el.style.display = 'none'\n if (callback) {\n callback()\n }\n }\n }\n requestAnimationFrame(animation)\n }\n }\n const isoldejs = new isolde();\n <\/script>\n\n<\/body>\n\n<\/html>\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>Masonry Waterfall Layout with Filtering All Robots Components Accessories Scout Mini Group Robot View Documentation IQR [...]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-3","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/iqr-robot.com\/en\/wp-json\/wp\/v2\/pages\/3","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iqr-robot.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/iqr-robot.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/iqr-robot.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iqr-robot.com\/en\/wp-json\/wp\/v2\/comments?post=3"}],"version-history":[{"count":137,"href":"https:\/\/iqr-robot.com\/en\/wp-json\/wp\/v2\/pages\/3\/revisions"}],"predecessor-version":[{"id":12426,"href":"https:\/\/iqr-robot.com\/en\/wp-json\/wp\/v2\/pages\/3\/revisions\/12426"}],"wp:attachment":[{"href":"https:\/\/iqr-robot.com\/en\/wp-json\/wp\/v2\/media?parent=3"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}