{"database": "fishbowl_archive", "table": "biscript", "rows": [[32, "_binary \u0001", "let zoom = 100;\r\nlet canvas = document.querySelector(\"#canvas\");\r\nlet printable = document.querySelector(\"#printable\");\r\nconst partContainer = document.querySelector('#partContainer');\r\nlet qr = document.querySelector(\".qr-code\");\r\nlet save = document.querySelector(\"#save\");\r\nlet edit = document.querySelector(\"#edit\");  \r\nlet desc = document.querySelector(\".desc-drag\");\r\nlet part = document.querySelector(\".part-drag\");\r\nlet custText = document.querySelector(\".custom-drag\");\r\nlet select = document.querySelector(\".selected\");\r\nlet partNum = '$PART{Part_Number|%|General}';\r\nlet count = '$NUM{Count|90|General}'\r\npartNum == -1 ? (partNum = '%') : true;\r\nlet showDesc = '$CHECK{Show_Description|1|General}';\r\nlet showPart = '$CHECK{Show_Part_Num|1|General}';\r\nlet showBarcode = '$CHECK{Show_Barcode|1|General}';\r\nlet showCustomText = '$CHECK{Show_Custom_Text|0|General}';\r\nlet startRange = '$NUM{Page_Start_From|1|General}';\r\nlet endRange = '$NUM{Through_To_Page|90|General}';\r\nstartRange -= 1;\r\nvar total;\r\nvar limit;\r\nvar offset;\r\nvar qrWidth;\r\nvar editMode = false;\r\nlet LABEL = {\r\n   width: 2,\r\n   height: 1,\r\n   qrWidth: 84,\r\n   qrTransform: \"translate(9px, 5px)\",\r\n   qrTranslateX: 9,\r\n   qrTranslateY: 5,\r\n   partFontSize: 14,\r\n   partTransform: \"translate(98px, 13px)\",\r\n   partTranslateX: 98,\r\n   partTranslateY: 13,\r\n   partWidth: 84.375,\r\n   partHeight: 17,\r\n   partBold: \"false\",\r\n   partItalic: \"false\",\r\n   partUnderlined: \"false\",\r\n   partAlign: \"center\",\r\n   partVAlign: \"start\",\r\n   partFontFamily: \"Arial\",\r\n   descFontSize: 12,\r\n   descTransform: \"translate(98px, 42px)\",\r\n   descTranslateX: 98,\r\n   descTranslateY: 42,\r\n   descWidth: 84.0469,\r\n   descHeight: 42,\r\n   descBold: \"false\",\r\n   descItalic: \"false\",\r\n   descUnderlined: \"false\",\r\n   descAlign: \"center\",\r\n   descVAlign: \"start\",\r\n   descFontFamily: \"Arial\",\r\n   descFontSize: 12,\r\n   custTransform: \"translate(0px, 0px)\",\r\n   custTranslateX: 0,\r\n   custTranslateY: 0,\r\n   custWidth: 84.0469,\r\n   custHeight: 17,\r\n   custBold: \"false\",\r\n   custItalic: \"false\",\r\n   custUnderlined: \"false\",\r\n   custAlign: \"center\",\r\n   custVAlign: \"start\",\r\n   custFontFamily: \"Arial\",\r\n   custFontSize: 12,\r\n   custText: \"Custom Text\",\r\n};\r\n\r\nfunction getLabelData() {\r\n    if (loadReportData() === '') {\r\n        saveReportData(JSON.stringify(LABEL));\r\n    } \r\n    return JSON.parse(loadReportData());\r\n}\r\n\r\n//let savedLabel = LABEL;\r\nlet savedLabel = getLabelData();\r\n\r\nif(savedLabel.custWidth == null) {\r\n    savedLabel.custTransform = LABEL.custTransform;\r\n    savedLabel.custTranslateX = LABEL.custTranslateX;\r\n    savedLabel.custTranslateY = LABEL.custTranslateY;\r\n    savedLabel.custWidth = LABEL.custWidth;\r\n    savedLabel.custHeight = LABEL.custHeight;\r\n    savedLabel.custBold = LABEL.custBold;\r\n    savedLabel.custItalic = LABEL.custItalic;\r\n    savedLabel.custUnderlined = LABEL.custUnderlined;\r\n    savedLabel.custAlign = LABEL.custAlign;\r\n    savedLabel.custFontFamily = LABEL.custFontFamily;\r\n    savedLabel.custFontSize = LABEL.custFontSize;\r\n    savedLabel.custText = LABEL.custText;\r\n}\r\n\r\nif(savedLabel.partVAlign == null) {\r\n    savedLabel.partVAlign = LABEL.partVAlign;\r\n    savedLabel.descVAlign = LABEL.descVAlign;\r\n    savedLabel.custVAlign = LABEL.custVAlign;\r\n}\r\n\r\nif (partNum == '%') {\r\n    limit = endRange - startRange;\r\n    offset = startRange;\r\n} else {\r\n    limit = count;\r\n    offset = 0;\r\n}\r\n\r\n\r\n\r\nvar leftArrow = document.querySelector( '.arrow-left' );\r\nvar rightArrow = document.querySelector( '.arrow-right' );\r\nvar firstArrow = document.querySelector( '.arrow-first' );\r\nvar lastArrow = document.querySelector( '.arrow-last' );\r\n\r\nlet Items = JSON.parse(runQuery(`\r\n    SELECT part.NUM AS partnum, part.description\r\n    FROM part\r\n    WHERE part.id > 0\r\n    AND part.activeflag = 1\r\n    AND part.id LIKE '${partNum}'\r\n    LIMIT ${limit} OFFSET ${offset}\r\n`));\r\ndesc.innerHTML = Items[0].description;\r\npart.innerHTML = Items[0].partnum;\r\n\r\nfunction generateQR(data) {   \r\n    document.getElementById(\"myCanvas\").setAttribute(\"src\", \"http://bwipjs-api.metafloor.com/?bcid=qrcode&text=\" + data + \"&scale=10\");\r\n}; \r\n\r\n\r\n\r\ngenerateQR(Items[0].partnum);\r\n\r\n    function generateCards(length) {\r\n        let i;\r\n        for (let b = 0; b < length; b++) {\r\n            if (partNum == '%'){i = b}else{i = 0};\r\n            document.getElementById(\"partContainer\").insertAdjacentHTML('beforeend',`<div class='card'>\r\n            <img id='qrBarcode_' class='qr-code qr-drag' style=\"transform: ${savedLabel.qrTransform}; width: ${savedLabel.qrWidth}px; height: ${savedLabel.qrWidth}px\">\r\n            <div id='partDesc_' class='title desc-drag' style=\"text-align: ${savedLabel.descAlign}; font-size: ${savedLabel.descFontSize}px; transform: ${savedLabel.descTransform}; width: ${savedLabel.descWidth}px; height: ${savedLabel.descHeight}px;\"></div>\r\n            <div id='partNum_' class='title part-drag' style=\"text-align: ${savedLabel.partAlign}; font-size: ${savedLabel.partFontSize}px; width: ${savedLabel.partWidth}px; height: ${savedLabel.partHeight}px; transform: ${savedLabel.partTransform};\"></div>\r\n            <div id='customText_' class='title custom-drag' style=\"text-align: ${savedLabel.custAlign}; font-size: ${savedLabel.custFontSize}px; width: ${savedLabel.custWidth}px; height: ${savedLabel.custHeight}px; transform: ${savedLabel.custTransform};\"></div>\r\n            <p style=\"page-break-after: always; margin: 0;\"></p></div>`);\r\n            \r\n            document.getElementById(\"partNum_\").setAttribute('id',\"partNum_\" + b.toString());\r\n            document.getElementById(\"qrBarcode_\").setAttribute('id',\"qrBarcode_\" + b.toString());\r\n            document.getElementById(\"partDesc_\").setAttribute('id',\"partDesc_\" + b.toString());\r\n            document.getElementById(\"customText_\").setAttribute('id',\"customText_\" + b.toString());\r\n            document.getElementById(\"qrBarcode_\" + b.toString()).setAttribute(\"src\", \"http://bwipjs-api.metafloor.com/?bcid=qrcode&text=\" + Items[i].partnum + \"&scale=10\");\r\n            \r\n            /******* \r\n            Adding Text to the partnum and description divs   \r\n            *******/\r\n            \r\n            document.getElementById(\"partNum_\" + b.toString()).innerHTML = Items[i].partnum;\r\n            document.getElementById(\"partDesc_\" + b.toString()).innerHTML = Items[i].description; \r\n            document.getElementById(\"customText_\" + b.toString()).innerHTML = savedLabel.custText; \r\n            \r\n        }\r\n    }\r\n\r\nfunction makeCards() {\r\n    if (partNum == '%') {\r\n            total = Items.length; \r\n            generateCards(total);   \r\n    } else {\r\n            total = count;\r\n            generateCards(total); \r\n    } \r\n}  \r\nmakeCards();          \r\n               \r\n              \r\n\r\n\r\nlet index = 1;\r\n    \r\n    document.querySelector( '.counter' ).innerHTML = ( index ) + ' / ' + total;\r\n    \r\n       \r\n    leftArrow.addEventListener('click', (e) => {\r\n        if (index > 1) {\r\n            index -= 1;\r\n            document.querySelector( '.counter' ).innerHTML = ( index  ) + ' / ' + total;\r\n        }\r\n        desc.innerHTML = Items[index - 1].description;\r\n        part.innerHTML = Items[index - 1].partnum;\r\n        generateQR(Items[index - 1].partnum);\r\n    });\r\n    \r\n    rightArrow.addEventListener('click', (e) => {\r\n        if (index < total) {\r\n            index += 1;\r\n            document.querySelector( '.counter' ).innerHTML = ( index  ) + ' / ' + total;\r\n        }\r\n        desc.innerHTML = Items[index - 1].description;\r\n        part.innerHTML = Items[index - 1].partnum;\r\n        generateQR(Items[index - 1].partnum);\r\n    });\r\n    \r\n    firstArrow.addEventListener('click', (e) => {\r\n         if (index != 1) {\r\n             index = 1;\r\n             document.querySelector( '.counter' ).innerHTML = '1 / ' + total;\r\n         }\r\n         desc.innerHTML = Items[0].description;\r\n         part.innerHTML = Items[0].partnum;\r\n         generateQR(Items[0].partnum);\r\n     });\r\n     lastArrow.addEventListener('click', (e) => {\r\n          if (index != total) {\r\n              index = total;\r\n              document.querySelector( '.counter' ).innerHTML = ( total ) + ' / ' + total;\r\n          }\r\n          desc.innerHTML = Items[total - 1].description;\r\n          part.innerHTML = Items[total - 1].partnum;\r\n          generateQR(Items[total - 1].partnum);\r\n      });\r\n\r\n\r\n\r\n\r\n\r\n\r\nvar cssPagedMedia = (function () {\r\n    var style = document.createElement('style');\r\n    document.head.appendChild(style);\r\n    return function (rule) {\r\n        style.innerHTML = rule;\r\n    };\r\n}());\r\n     \r\ncssPagedMedia.size = function (size) {\r\n    cssPagedMedia('@page {size: auto; margin: 0mm;} @media print {@page {size: ' + size + '}}');\r\n};\r\n     \r\ncssPagedMedia.size(savedLabel.width + \"in \" + savedLabel.height + \"in\");\r\n     \r\n     \r\n\r\nfunction resize(Rect){\r\n    interact(\".selected\").resizable({\r\n        edges: { left: true, right: true, bottom: true, top: true },\r\n        listeners: {\r\n            move(event) {\r\n            var target = event.target;\r\n            var rect = event.rect;\r\n            let drag = zoom / 100;\r\n\r\n            // update the element's style\r\n            if (target.classList.contains('qr-code')) {   \r\n                position.x += event.deltaRect.left / drag\r\n                position.y += event.deltaRect.left / drag                 \r\n                target.style.transform = 'translate(' + position.x + 'px,' + position.y + 'px)'                   \r\n                target.setAttribute('data-x', position.x)\r\n                target.setAttribute('data-y', position.y)                              \r\n                target.style.width = Math.floor(rect.width / drag) + \"px\";\r\n                target.style.height = Math.floor(rect.width / drag) + \"px\";\r\n                qrWidth = Math.floor(rect.width / drag);\r\n                savedLabel.qrWidth = Math.floor(rect.width / drag);            \r\n                let qrcodes = document.querySelectorAll(\".qr-code\");\r\n                qrcodes.forEach(function(elem) {\r\n                    elem.style.transform = 'translate(' + position.x + 'px,' + position.y + 'px)'                   \r\n                    elem.setAttribute('data-x', position.x)\r\n                    elem.setAttribute('data-y', position.y)                              \r\n                    elem.style.width = Math.floor(rect.width / drag) + \"px\";\r\n                    elem.style.height = Math.floor(rect.width / drag) + \"px\";\r\n                });                                                                    \r\n                } else {\r\n                    target.style.width = rect.width / drag + \"px\";\r\n                    target.style.height = rect.height / drag + \"px\";\r\n                    \r\n                    if (target.classList.contains(\"part-drag\")) {\r\n                        partposition.x += event.deltaRect.left / drag\r\n                        partposition.y += event.deltaRect.top / drag                 \r\n                        target.style.transform = 'translate(' + partposition.x + 'px,' + partposition.y + 'px)'                   \r\n                        target.setAttribute('data-x', partposition.x)\r\n                        target.setAttribute('data-y', partposition.y)\r\n                        let parts = document.querySelectorAll(\".part-drag\");\r\n                        parts.forEach(function(elem) {\r\n                            elem.style.transform = 'translate(' + partposition.x + 'px,' + partposition.y + 'px)'                 \r\n                            elem.setAttribute('data-x', partposition.x)\r\n                            elem.setAttribute('data-y', partposition.y)    \r\n                            elem.style.width = Math.floor(rect.width / drag) + \"px\";\r\n                            elem.style.height = Math.floor(rect.height / drag) + \"px\";                         \r\n                        });\r\n                        savedLabel.partWidth = rect.width / drag;\r\n                        savedLabel.partHeight = rect.height / drag;\r\n                    } else if (target.classList.contains(\"desc-drag\")) {\r\n                        descposition.x += event.deltaRect.left / drag\r\n                        descposition.y += event.deltaRect.top / drag                 \r\n                        target.style.transform = 'translate(' + descposition.x + 'px,' + descposition.y + 'px)'                   \r\n                        target.setAttribute('data-x', descposition.x)\r\n                        target.setAttribute('data-y', descposition.y)\r\n                        let descs = document.querySelectorAll(\".desc-drag\");\r\n                        descs.forEach(function(elem) {\r\n                            elem.style.transform = 'translate(' + descposition.x + 'px,' + descposition.y + 'px)'                 \r\n                            elem.setAttribute('data-x', descposition.x)\r\n                            elem.setAttribute('data-y', descposition.y)    \r\n                            elem.style.width = Math.floor(rect.width / drag) + \"px\";\r\n                            elem.style.height = Math.floor(rect.height / drag) + \"px\";                         \r\n                        });\r\n                        savedLabel.descWidth = rect.width / drag;\r\n                        savedLabel.descHeight = rect.height / drag;\r\n                    } else if (target.classList.contains(\"custom-drag\")) {\r\n                        custposition.x += event.deltaRect.left / drag\r\n                        custposition.y += event.deltaRect.top / drag                 \r\n                        target.style.transform = 'translate(' + custposition.x + 'px,' + custposition.y + 'px)'                   \r\n                        target.setAttribute('data-x', custposition.x)\r\n                        target.setAttribute('data-y', custposition.y)\r\n                        let custs = document.querySelectorAll(\".custom-drag\");\r\n                        custs.forEach(function(elem) {\r\n                            elem.style.transform = 'translate(' + custposition.x + 'px,' + custposition.y + 'px)'                 \r\n                            elem.setAttribute('data-x', custposition.x)\r\n                            elem.setAttribute('data-y', custposition.y)    \r\n                            elem.style.width = Math.floor(rect.width / drag) + \"px\";\r\n                            elem.style.height = Math.floor(rect.height / drag) + \"px\";                         \r\n                         });\r\n                         savedLabel.custWidth = rect.width / drag;\r\n                         savedLabel.custHeight = rect.height / drag;\r\n                      }\r\n                }                                       \r\n            }\r\n        },\r\n        modifiers: [     \r\n            // minimum size\r\n            interact.modifiers.restrictSize({\r\n                min: { width: 15, height: 15 }\r\n            }),\r\n            interact.modifiers.restrictEdges({\r\n                outer: {\r\n                    left: Rect.left,    \r\n                    right: Rect.right,\r\n                    top: Rect.top,\r\n                    bottom: Rect.bottom  \r\n                }\r\n            })\r\n        ]\r\n                  \r\n    });\r\n};  \r\n\r\n\r\nwindow.addEventListener(\"resize\", (e) => {\r\n    var divRectNew = printable.getBoundingClientRect();\r\n    resize(divRectNew);\r\n});\r\n\r\n  \r\n  $('#labelH').on('change', function() {\r\n   var size = $(this).val();\r\n   $('#printable').css('height', size + 'in');\r\n   $('.card').css('height', size + 'in');\r\n   savedLabel.height = size;\r\n   cssPagedMedia.size($('#labelW').val() + \"in \" + $('#labelH').val() + \"in\");\r\n   var divRectNew = printable.getBoundingClientRect();\r\n   resize(divRectNew);\r\n});\r\n\r\n$('#labelW').on('change', function() {\r\n   var size = $(this).val();\r\n   $('#printable').css('width', size + 'in');\r\n   $('.card').css('width', size + 'in');\r\n   savedLabel.width = size;\r\n   cssPagedMedia.size($('#labelW').val() + \"in \" + $('#labelH').val() + \"in\");\r\n   var divRectNew = printable.getBoundingClientRect();\r\n   resize(divRectNew);\r\n});\r\n\r\n$('#size').on('change', function() {\r\n   var size = $(this).val();\r\n   $('.selected').css('fontSize', size + 'px');\r\n   if ($('.selected').hasClass('desc-drag')) {\r\n      let descs = document.querySelectorAll(\".desc-drag\");\r\n      savedLabel.descFontSize = size;\r\n      descs.forEach(function(elem) {\r\n          elem.style.fontSize = size;                                        \r\n      });\r\n   } else if ($('.selected').hasClass('part-drag')) {\r\n      let parts = document.querySelectorAll(\".part-drag\");\r\n      savedLabel.partFontSize = size;\r\n      parts.forEach(function(elem) {\r\n          elem.style.fontSize = size;                                       \r\n      });\r\n   } else if ($('.selected').hasClass('custom-drag')) {\r\n            let custs = document.querySelectorAll(\".custom-drag\");\r\n            savedLabel.custFontSize = size;\r\n            custs.forEach(function(elem) {\r\n                elem.style.fontSize = size;                                       \r\n            });\r\n         }\r\n   \r\n});\r\n\r\n$('#bold').on('click', function() {\r\n   let parts = document.querySelectorAll(\".part-drag\");\r\n   let descs = document.querySelectorAll(\".desc-drag\");\r\n   let custs = document.querySelectorAll(\".custom-drag\");\r\n   if ($('.selected').hasClass('bold')) {\r\n      if ($('.selected').hasClass('part-drag')) {\r\n          parts.forEach(function(elem) {\r\n              elem.classList.remove('bold');                                       \r\n          });\r\n      } else if ($('.selected').hasClass('desc-drag')) {\r\n          descs.forEach(function(elem) {\r\n              elem.classList.remove('bold');                                       \r\n          });\r\n      } else if ($('.selected').hasClass('custom-drag')) {\r\n                    custs.forEach(function(elem) {\r\n                        elem.classList.remove('bold');                                       \r\n                    });\r\n                };\r\n   } else {\r\n    if ($('.selected').hasClass('part-drag')) {\r\n        parts.forEach(function(elem) {\r\n            elem.classList.add('bold');                                       \r\n        });\r\n    } else if ($('.selected').hasClass('desc-drag')) {\r\n        descs.forEach(function(elem) {\r\n            elem.classList.add('bold');                                       \r\n        });\r\n    } else if ($('.selected').hasClass('custom-drag')) {\r\n                custs.forEach(function(elem) {\r\n                    elem.classList.add('bold');                                       \r\n                });\r\n            };\r\n   }  \r\n});\r\n\r\n$('#italic').on('click', function() {\r\n   let parts = document.querySelectorAll(\".part-drag\");\r\n   let descs = document.querySelectorAll(\".desc-drag\");\r\n   let custs = document.querySelectorAll(\".custom-drag\");\r\n   if ($('.selected').hasClass('italic')) {\r\n      if ($('.selected').hasClass('part-drag')) {\r\n          parts.forEach(function(elem) {\r\n              elem.classList.remove('italic');                                       \r\n          });\r\n      } else if ($('.selected').hasClass('desc-drag')) {\r\n          descs.forEach(function(elem) {\r\n              elem.classList.remove('italic');                                       \r\n          });\r\n      } else if ($('.selected').hasClass('custom-drag')) {\r\n                    custs.forEach(function(elem) {\r\n                        elem.classList.remove('italic');                                       \r\n                    });\r\n                };\r\n   } else {\r\n    if ($('.selected').hasClass('part-drag')) {\r\n        parts.forEach(function(elem) {\r\n            elem.classList.add('italic');                                       \r\n        });\r\n    } else if ($('.selected').hasClass('desc-drag')) {\r\n        descs.forEach(function(elem) {\r\n            elem.classList.add('italic');                                       \r\n        });\r\n    } else if ($('.selected').hasClass('custom-drag')) {\r\n            custs.forEach(function(elem) {\r\n                elem.classList.add('italic');                                       \r\n            });\r\n        };\r\n   }   \r\n});\r\n\r\n$('#underline').on('click', function() {\r\n   let parts = document.querySelectorAll(\".part-drag\");\r\n   let descs = document.querySelectorAll(\".desc-drag\");\r\n   let custs = document.querySelectorAll(\".custom-drag\");\r\n   if ($('.selected').hasClass('underline')) {\r\n      if ($('.selected').hasClass('part-drag')) {\r\n          parts.forEach(function(elem) {\r\n              elem.classList.remove('underline');                                       \r\n          });\r\n      } else if ($('.selected').hasClass('desc-drag')) {\r\n          descs.forEach(function(elem) {\r\n              elem.classList.remove('underline');                                       \r\n          });\r\n      } else if ($('.selected').hasClass('custom-drag')) {\r\n                    custs.forEach(function(elem) {\r\n                        elem.classList.remove('underline');                                       \r\n                    });\r\n                };\r\n   } else {\r\n    if ($('.selected').hasClass('part-drag')) {\r\n        parts.forEach(function(elem) {\r\n            elem.classList.add('underline');                                       \r\n        });\r\n    } else if ($('.selected').hasClass('desc-drag')) {\r\n        descs.forEach(function(elem) {\r\n            elem.classList.add('underline');                                       \r\n        });\r\n    } else if ($('.selected').hasClass('custom-drag')) {\r\n            custs.forEach(function(elem) {\r\n                elem.classList.add('underline');                                       \r\n            });\r\n        };\r\n       }\r\n});\r\n\r\n$('#align-left').on('click', function() {\r\n   document.execCommand('justifyLeft', false, null);\r\n   if ($('.selected').hasClass('part-drag')) {\r\n       savedLabel.partAlign = \"left\";\r\n       let parts = document.querySelectorAll(\".part-drag\");\r\n       parts.forEach(function(elem) {\r\n           elem.style.justifyContent = \"left\";  \r\n           elem.style.textAlign = \"left\";                                        \r\n       });\r\n      } else if ($('.selected').hasClass('desc-drag')) {\r\n       savedLabel.descAlign = \"left\";\r\n       let descs = document.querySelectorAll(\".desc-drag\");\r\n       descs.forEach(function(elem) {\r\n           elem.style.justifyContent = \"left\"; \r\n           elem.style.textAlign = \"left\";                     \r\n       });\r\n      } else if ($('.selected').hasClass('custom-drag')) {\r\n              savedLabel.custAlign = \"left\";\r\n              let custs = document.querySelectorAll(\".custom-drag\");\r\n              custs.forEach(function(elem) {\r\n                  elem.style.justifyContent = \"left\";    \r\n                  elem.style.textAlign = \"left\";                  \r\n              });\r\n             }\r\n});\r\n\r\n$('#align-center').on('click', function() {\r\n   document.execCommand('justifyCenter', false, null);\r\n   if ($('.selected').hasClass('part-drag')) {\r\n      savedLabel.partAlign = \"center\";\r\n      let parts = document.querySelectorAll(\".part-drag\");\r\n      parts.forEach(function(elem) {\r\n          elem.style.justifyContent = \"center\";   \r\n          elem.style.textAlign = \"center\";                                      \r\n      });\r\n     } else if ($('.selected').hasClass('desc-drag')) {\r\n      savedLabel.descAlign = \"center\";\r\n      let descs = document.querySelectorAll(\".desc-drag\");\r\n      descs.forEach(function(elem) {\r\n          elem.style.justifyContent = \"center\";   \r\n          elem.style.textAlign = \"center\";                   \r\n      });\r\n     } else if ($('.selected').hasClass('custom-drag')) {\r\n            savedLabel.custAlign = \"center\";\r\n            let custs = document.querySelectorAll(\".custom-drag\");\r\n            custs.forEach(function(elem) {\r\n                elem.style.justifyContent = \"center\"; \r\n                elem.style.textAlign = \"center\";                     \r\n            });\r\n           }\r\n});\r\n\r\n$('#align-right').on('click', function() {\r\n   document.execCommand('justifyRight', false, null);\r\n   if ($('.selected').hasClass('part-drag')) {\r\n      savedLabel.partAlign = \"right\";\r\n      let parts = document.querySelectorAll(\".part-drag\");\r\n      parts.forEach(function(elem) {\r\n        elem.style.justifyContent = \"right\"; \r\n        elem.style.textAlign = \"right\";                                       \r\n      });\r\n     } else if ($('.selected').hasClass('desc-drag')) {\r\n      savedLabel.descAlign = \"right\";\r\n      let descs = document.querySelectorAll(\".desc-drag\");\r\n      descs.forEach(function(elem) {\r\n          elem.style.justifyContent = \"right\";    \r\n          elem.style.textAlign = \"right\";                   \r\n      });\r\n     } else if ($('.selected').hasClass('custom-drag')) {\r\n            savedLabel.custAlign = \"right\";\r\n            let custs = document.querySelectorAll(\".custom-drag\");\r\n            custs.forEach(function(elem) {\r\n                elem.style.justifyContent = \"right\";    \r\n                elem.style.textAlign = \"right\";                   \r\n            });\r\n           }\r\n});\r\n\r\n$('#align-top').on('click', function() {\r\n   if ($('.selected').hasClass('part-drag')) {\r\n      savedLabel.partVAlign = \"start\";\r\n      let parts = document.querySelectorAll(\".part-drag\");\r\n      parts.forEach(function(elem) {\r\n        elem.style.alignContent = \"start\";                                        \r\n      });\r\n     } else if ($('.selected').hasClass('desc-drag')) {\r\n      savedLabel.descVAlign = \"start\";\r\n      let descs = document.querySelectorAll(\".desc-drag\");\r\n      descs.forEach(function(elem) {\r\n          elem.style.alignContent = \"start\";                     \r\n      });\r\n     } else if ($('.selected').hasClass('custom-drag')) {\r\n            savedLabel.custVAlign = \"start\";\r\n            let custs = document.querySelectorAll(\".custom-drag\");\r\n            custs.forEach(function(elem) {\r\n                elem.style.alignContent = \"start\";                     \r\n            });\r\n           }\r\n});\r\n\r\n$('#align-middle').on('click', function() {\r\n   if ($('.selected').hasClass('part-drag')) {\r\n      savedLabel.partVAlign = \"center\";\r\n      let parts = document.querySelectorAll(\".part-drag\");\r\n      parts.forEach(function(elem) {\r\n        elem.style.alignContent = \"center\";                                        \r\n      });\r\n     } else if ($('.selected').hasClass('desc-drag')) {\r\n      savedLabel.descVAlign = \"center\";\r\n      let descs = document.querySelectorAll(\".desc-drag\");\r\n      descs.forEach(function(elem) {\r\n          elem.style.alignContent = \"center\";                     \r\n      });\r\n     } else if ($('.selected').hasClass('custom-drag')) {\r\n            savedLabel.custVAlign = \"center\";\r\n            let custs = document.querySelectorAll(\".custom-drag\");\r\n            custs.forEach(function(elem) {\r\n                elem.style.alignContent = \"center\";                     \r\n            });\r\n           }\r\n});\r\n\r\n$('#align-bottom').on('click', function() {\r\n   if ($('.selected').hasClass('part-drag')) {\r\n      savedLabel.partVAlign = \"end\";\r\n      let parts = document.querySelectorAll(\".part-drag\");\r\n      parts.forEach(function(elem) {\r\n        elem.style.alignContent = \"end\";                                        \r\n      });\r\n     } else if ($('.selected').hasClass('desc-drag')) {\r\n      savedLabel.descVAlign = \"end\";\r\n      let descs = document.querySelectorAll(\".desc-drag\");\r\n      descs.forEach(function(elem) {\r\n          elem.style.alignContent = \"end\";                     \r\n      });\r\n     } else if ($('.selected').hasClass('custom-drag')) {\r\n            savedLabel.custVAlign = \"end\";\r\n            let custs = document.querySelectorAll(\".custom-drag\");\r\n            custs.forEach(function(elem) {\r\n                elem.style.alignContent = \"end\";                     \r\n            });\r\n           }\r\n});\r\n\r\n$('#fonts').on('change', function() {\r\n   var font = $(this).val();\r\n   if ($('.selected').hasClass('desc-drag')) {\r\n      let descs = document.querySelectorAll(\".desc-drag\");\r\n      savedLabel.descFontFamily = font;\r\n      descs.forEach(function(elem) {\r\n          elem.style.fontFamily = font;                     \r\n      });\r\n   } else if ($('.selected').hasClass('part-drag')) {\r\n      let parts = document.querySelectorAll(\".part-drag\");\r\n      savedLabel.partFontFamily = font;\r\n      parts.forEach(function(elem) {\r\n          elem.style.fontFamily = font;                                        \r\n      });\r\n   } else if ($('.selected').hasClass('custom-drag')) {\r\n            let custs = document.querySelectorAll(\".custom-drag\");\r\n            savedLabel.custFontFamily = font;\r\n            custs.forEach(function(elem) {\r\n                elem.style.fontFamily = font;                                        \r\n            });\r\n         }\r\n});\r\n  \r\n/******* \r\nzoom in & zoom out\r\n*******/ \r\n  \r\n\r\nlet plus = document.querySelector(\".plus\");\r\nplus.addEventListener(\"click\", (e) => {\r\n    if(zoom < 325) {zoom += 25;};\r\n    printable.style.transform = \"scale(\" + zoom / 100 + \")\";\r\n    var divRect = printable.getBoundingClientRect();\r\n    resize(divRect);  \r\n});\r\n  \r\nlet minus = document.querySelector(\".minus\");\r\nminus.addEventListener(\"click\", (e) => {\r\n    if(zoom > 25) {zoom -= 25;};\r\n    printable.style.transform = \"scale(\" + zoom / 100 + \")\";\r\n    var divRect = printable.getBoundingClientRect();\r\n    resize(divRect);  \r\n});\r\n \r\n/******* \r\nitem selection functionality  \r\n*******/ \r\n\r\nfunction removeSelect() {\r\n    let select = document.querySelector(\".selected\");\r\n    if (select != null) {\r\n        select.style.boxShadow = \"0 0 0px 1px grey\"\r\n        select.classList.remove(\"selected\");\r\n    }\r\n}      \r\n      \r\nfunction canvasEvent() {\r\n    let select = document.querySelector(\".selected\");\r\n    if (select != null) {select.classList.remove(\"selected\");};\r\n};    \r\nfunction qrEvent() {\r\n    removeSelect();\r\n    qr.classList.add('selected');\r\n    qr.style.boxShadow = \"0 0 0px 2px #0984e3\";\r\n};  \r\nfunction partEvent() {\r\n    removeSelect();\r\n    part.classList.add('selected');\r\n    part.style.boxShadow = \"0 0 0px 2px #0984e3\";\r\n    let sizeOptions = document.getElementById('size').getElementsByTagName('option');   \r\n    for(var i = 0; i < sizeOptions.length; i++){\r\n        if (sizeOptions[i].value + \"px\" == part.style.fontSize) {\r\n            sizeOptions[i].selected = 'selected';       \r\n        };\r\n    };\r\n    let fontOptions = document.getElementById('fonts').getElementsByTagName('option');  \r\n    for(var i = 0; i < fontOptions.length; i++){\r\n        if (fontOptions[i].value == part.style.fontFamily) {\r\n            fontOptions[i].selected = 'selected';       \r\n        };\r\n    }; \r\n};  \r\nfunction descEvent() {\r\n    removeSelect();\r\n    desc.classList.add('selected');\r\n    desc.style.boxShadow = \"0 0 0px 2px #0984e3\";\r\n    let sizeOptions = document.getElementById('size').getElementsByTagName('option');  \r\n    for(var i = 0; i < sizeOptions.length; i++){\r\n        if (sizeOptions[i].value + \"px\" == desc.style.fontSize) {\r\n            sizeOptions[i].selected = 'selected';       \r\n        };\r\n    };\r\n           \r\n    let fontOptions = document.getElementById('fonts').getElementsByTagName('option');  \r\n    for(var i = 0; i < fontOptions.length; i++){\r\n        if (fontOptions[i].value == desc.style.fontFamily) {\r\n            fontOptions[i].selected = 'selected';   \r\n                     \r\n        };\r\n    };\r\n};    \r\nfunction custTextEvent() {\r\n    removeSelect();\r\n    custText.classList.add('selected');\r\n    custText.style.boxShadow = \"0 0 0px 2px #0984e3\";\r\n    let sizeOptions = document.getElementById('size').getElementsByTagName('option');   \r\n    for(var i = 0; i < sizeOptions.length; i++){\r\n        if (sizeOptions[i].value + \"px\" == custText.style.fontSize) {\r\n            sizeOptions[i].selected = 'selected';       \r\n        };\r\n    };\r\n    let fontOptions = document.getElementById('fonts').getElementsByTagName('option');  \r\n    for(var i = 0; i < fontOptions.length; i++){\r\n        if (fontOptions[i].value == custText.style.fontFamily) {\r\n            fontOptions[i].selected = 'selected';       \r\n        };\r\n    }; \r\n}; \r\nfunction activateEditMode() {      \r\n    if (editMode == false) {      \r\n        canvas.addEventListener(\"click\", removeSelect, true);\r\n     \r\n        if (select != null) {select.classList.remove(\"selected\");}; \r\n        qr.addEventListener(\"click\", qrEvent);\r\n        desc.addEventListener(\"click\", descEvent);   \r\n        part.addEventListener(\"click\", partEvent);\r\n        custText.addEventListener(\"click\", custTextEvent);    \r\n    } else {\r\n        canvas.removeEventListener(\"click\", removeSelect, true);\r\n        qr.removeEventListener(\"click\", qrEvent);\r\n        desc.removeEventListener(\"click\", descEvent);   \r\n        part.removeEventListener(\"click\", partEvent);\r\n        custText.removeEventListener(\"click\", custTextEvent);\r\n    };\r\n };\r\n\r\n  /******* \r\n  dragging items functionality  \r\n  *******/ \r\n  \r\n  \r\nconst position = { x: savedLabel.qrTranslateX, y: savedLabel.qrTranslateY };\r\nconst descposition = { x: savedLabel.descTranslateX, y: savedLabel.descTranslateY };\r\nconst partposition = { x: savedLabel.partTranslateX, y: savedLabel.partTranslateY };\r\nconst custposition = { x: savedLabel.custTranslateX, y: savedLabel.custTranslateY };\r\n  \r\n                       \r\n\r\n  \r\nfunction changeToolbarColors(on) {\r\n    let alignRight = document.querySelector(\"#align-right\");\r\n    let alignLeft = document.querySelector(\"#align-left\");\r\n    let alignCenter = document.querySelector(\"#align-center\");\r\n    let alignBox = document.querySelectorAll(\".align-box\");\r\n    let lineTop = document.querySelectorAll(\".line-top\");\r\n    let lineBottom = document.querySelectorAll(\".line-bottom\");\r\n    let bold = document.querySelector(\"#bold\");\r\n    let italic = document.querySelector(\"#italic\");\r\n    let underline = document.querySelector(\"#underline\");\r\n    let labelSizeTitle = document.querySelector(\"#labelSizeTitle\");\r\n    let labelSizeX = document.querySelector(\"#labelSizeX\");\r\n    let labelW = document.querySelector(\"#labelW\");\r\n    let labelH = document.querySelector(\"#labelH\");\r\n    let toolbarButtons = document.querySelectorAll(\".toolbar button\");\r\n    let save = document.querySelector(\"#save\");\r\n    let edit = document.querySelector(\"#edit\");\r\n    let size = document.querySelector(\"#size\");\r\n    let fonts = document.querySelector(\"#fonts\");\r\n    if (on == true) {\r\n        alignRight.style.color = \"black\";\r\n        alignLeft.style.color = \"black\";\r\n        alignCenter.style.color = \"black\";\r\n        alignBox.forEach(function(elem) {\r\n            elem.style.borderColor = \"black\";\r\n        });\r\n        lineTop.forEach(function(elem) {\r\n            elem.style.background = \"black\";\r\n        });\r\n        lineBottom.forEach(function(elem) {\r\n            elem.style.background = \"black\";\r\n        });\r\n        bold.style.color = \"black\";\r\n        italic.style.color = \"black\";\r\n        underline.style.color = \"black\";\r\n        labelSizeTitle.style.color = \"black\";\r\n        labelSizeX.style.color = \"black\";\r\n        labelW.style.color = \"black\";\r\n        labelH.style.color = \"black\";\r\n        labelW.style.cursor = \"pointer\";\r\n        labelH.style.cursor = \"pointer\";\r\n        size.style.cursor = \"pointer\";\r\n        fonts.style.cursor = \"pointer\";\r\n        toolbarButtons.forEach(function(elem) {\r\n            elem.classList.add('hover');\r\n        });\r\n        save.classList.add('hover');\r\n        save.style.background = \"#153dff\";\r\n        edit.classList.remove('hover');\r\n        edit.style.background = \"#a6a6a6\";\r\n    } else {\r\n        alignRight.style.color = \"#a6a6a6\";\r\n        alignLeft.style.color = \"#a6a6a6\";\r\n        alignCenter.style.color = \"#a6a6a6\";\r\n        alignBox.forEach(function(elem) {\r\n            elem.style.borderColor = \"#a6a6a6\";\r\n        });\r\n        lineTop.forEach(function(elem) {\r\n            elem.style.background = \"#a6a6a6\";\r\n        });\r\n        lineBottom.forEach(function(elem) {\r\n            elem.style.background = \"#a6a6a6\";\r\n        });\r\n        bold.style.color = \"#a6a6a6\";\r\n        italic.style.color = \"#a6a6a6\";\r\n        underline.style.color = \"#a6a6a6\";\r\n        labelSizeTitle.style.color = \"#a6a6a6\";\r\n        labelSizeX.style.color = \"#a6a6a6\";\r\n        labelW.style.color = \"#a6a6a6\";\r\n        labelH.style.color = \"#a6a6a6\";\r\n        labelW.style.cursor = \"default\";\r\n        labelH.style.cursor = \"default\";\r\n        size.style.cursor = \"default\";\r\n        fonts.style.cursor = \"default\";\r\n        toolbarButtons.forEach(function(elem) {\r\n            elem.classList.remove('hover');\r\n        });\r\n        edit.classList.add('hover');\r\n        edit.style.background = \"green\";\r\n        save.classList.remove('hover');\r\n        save.style.background = \"#a6a6a6\";\r\n    }\r\n  \r\n}\r\n  \r\nfunction editButton() {\r\n    let editModeLabel = document.querySelector(\"#editMode\");\r\n    let labelW = document.querySelector(\"#labelW\");\r\n    let labelH = document.querySelector(\"#labelH\");\r\n    let size = document.querySelector(\"#size\");\r\n    let fonts = document.querySelector(\"#fonts\");\r\n    \r\n        \r\n        labelW.removeAttribute('readonly');\r\n        labelH.removeAttribute('readonly');\r\n        size.removeAttribute(\"disabled\");\r\n        size.removeChild(size.options[0]);\r\n        fonts.removeAttribute(\"disabled\");\r\n        fonts.removeChild(fonts.options[0]);\r\n        editModeLabel.style.display = \"block\";\r\n        changeToolbarColors(true);\r\n        interact('.qr-drag').draggable({  \r\n            restrict: {\r\n                restriction: printable,\r\n                elementRect: { top: 0, left: 0, bottom: 1, right: 1 }\r\n            },\r\n            listeners: {\r\n                start (event) {\r\n                    console.log(event.type, event.target)\r\n                },\r\n                move (event) {\r\n                    let drag = zoom / 100;\r\n                    let qrcodes = document.querySelectorAll(\".qr-code\");\r\n                    qrcodes.forEach(function(elem) {\r\n                        elem.style.transform = `translate(${position.x}px, ${position.y}px)`\r\n                    });\r\n                    position.x += event.dx / drag\r\n                    position.y += event.dy / drag\r\n                    event.target.style.transform = `translate(${position.x}px, ${position.y}px)`;\r\n                    savedLabel.qrTransform = `translate(${position.x}px, ${position.y}px)`;\r\n                    savedLabel.qrTranslateX = position.x;\r\n                    savedLabel.qrTranslateY = position.y;\r\n                },\r\n            }\r\n        });\r\n           \r\n        interact('.desc-drag').draggable({ \r\n            restrict: {\r\n                restriction: printable,\r\n                elementRect: { top: 0, left: 0, bottom: 1, right: 1 }\r\n            },\r\n            listeners: {\r\n                start (event) {\r\n                   console.log(event.type, event.target)\r\n                },\r\n                move (event) {\r\n                    let drag = zoom / 100;\r\n                    descposition.x += event.dx / drag\r\n                    descposition.y += event.dy / drag\r\n                    let descriptions = document.querySelectorAll(\".desc-drag\");\r\n                    descriptions.forEach(function(elem) {\r\n                        elem.style.transform = `translate(${descposition.x}px, ${descposition.y}px)`\r\n                    });\r\n                    event.target.style.transform = `translate(${descposition.x}px, ${descposition.y}px)`;\r\n                    savedLabel.descTransform = `translate(${descposition.x}px, ${descposition.y}px)`;\r\n                    savedLabel.descTranslateX = descposition.x;\r\n                    savedLabel.descTranslateY = descposition.y;   \r\n                },\r\n            }\r\n        });\r\n  \r\n        interact('.part-drag').draggable({ \r\n            restrict: {\r\n                restriction: printable,\r\n                elementRect: { top: 0, left: 0, bottom: 1, right: 1 }\r\n            },\r\n            listeners: {\r\n                start (event) {\r\n                    console.log(event.type, event.target)\r\n                },\r\n                move (event) {\r\n                    let drag = zoom / 100;\r\n                    partposition.x += event.dx / drag\r\n                    partposition.y += event.dy / drag\r\n                    let parts = document.querySelectorAll(\".part-drag\");\r\n                    parts.forEach(function(elem) {\r\n                        elem.style.transform = `translate(${partposition.x}px, ${partposition.y}px)`\r\n                    });\r\n                    event.target.style.transform = `translate(${partposition.x}px, ${partposition.y}px)`;\r\n                    savedLabel.partTransform = `translate(${partposition.x}px, ${partposition.y}px)`;\r\n                    savedLabel.partTranslateX = partposition.x;\r\n                    savedLabel.partTranslateY = partposition.y;\r\n                },\r\n            }\r\n        });\r\n        \r\n        interact('.custom-drag').draggable({ \r\n                    restrict: {\r\n                        restriction: printable,\r\n                        elementRect: { top: 0, left: 0, bottom: 1, right: 1 }\r\n                    },\r\n                    listeners: {\r\n                        start (event) {\r\n                            console.log(event.type, event.target)\r\n                        },\r\n                        move (event) {\r\n                            let drag = zoom / 100;\r\n                            custposition.x += event.dx / drag\r\n                            custposition.y += event.dy / drag\r\n                            let custs = document.querySelectorAll(\".custom-drag\");\r\n                            custs.forEach(function(elem) {\r\n                                elem.style.transform = `translate(${custposition.x}px, ${custposition.y}px)`\r\n                            });\r\n                            event.target.style.transform = `translate(${custposition.x}px, ${custposition.y}px)`;\r\n                            savedLabel.custTransform = `translate(${custposition.x}px, ${custposition.y}px)`;\r\n                            savedLabel.custTranslateX = custposition.x;\r\n                            savedLabel.custTranslateY = custposition.y;\r\n                        },\r\n                    }\r\n                });\r\n                \r\n                        document.querySelector(\"#canvasPart\").style.boxShadow = \"0 0 0px 1px grey\";\r\n                        document.querySelector(\"#canvasDesc\").style.boxShadow = \"0 0 0px 1px grey\";\r\n                        document.querySelector(\".qr-code\").style.boxShadow = \"0 0 0px 1px grey\";\r\n                        document.querySelector(\"#customText\").style.boxShadow = \"0 0 0px 1px grey\";\r\n                        custText.contentEditable = \"true\";\r\n                        canvas.addEventListener(\"click\", removeSelect, true);\r\n                             \r\n                        if (select != null) {select.classList.remove(\"selected\");}; \r\n                        qr.addEventListener(\"click\", qrEvent);\r\n                        desc.addEventListener(\"click\", descEvent);   \r\n                        part.addEventListener(\"click\", partEvent);\r\n                        custText.addEventListener(\"click\", custTextEvent); \r\n                        edit.removeEventListener(\"click\", editButton);\r\n                        save.addEventListener(\"click\", saveButton); \r\n    } \r\n    \r\n    function saveButton() {\r\n    let editModeLabel = document.querySelector(\"#editMode\");\r\n        let labelW = document.querySelector(\"#labelW\");\r\n        let labelH = document.querySelector(\"#labelH\");\r\n        let size = document.querySelector(\"#size\");\r\n        let fonts = document.querySelector(\"#fonts\");\r\n        interact('.part-drag').unset();\r\n        interact('.desc-drag').unset();\r\n        interact('.qr-drag').unset();\r\n        interact('.custom-drag').unset();\r\n        editModeLabel.style.display = \"none\";\r\n        changeToolbarColors(false);\r\n        labelW.setAttribute('readonly', 'readonly');\r\n        labelH.setAttribute('readonly', 'readonly');\r\n        size.setAttribute(\"disabled\", \"disabled\");\r\n        size.insertAdjacentHTML('afterbegin',`<option disabled selected value></option>`);\r\n        fonts.setAttribute(\"disabled\", \"disabled\");\r\n        fonts.insertAdjacentHTML('afterbegin',`<option disabled selected value></option>`);\r\n        let select = document.querySelector(\".selected\");\r\n        if (select != null) {\r\n            //select.contentEditable = \"false\"; \r\n            select.style.boxShadow = \"none\"\r\n            select.classList.remove(\"selected\");\r\n        };\r\n    \r\n    \r\n        document.querySelector(\"#canvasPart\").style.boxShadow = \"none\";\r\n        document.querySelector(\"#canvasDesc\").style.boxShadow = \"none\";\r\n        document.querySelector(\".qr-code\").style.boxShadow = \"none\";\r\n        document.querySelector(\"#customText\").style.boxShadow = \"none\";\r\n        custText.contentEditable = \"false\";\r\n        canvas.removeEventListener(\"click\", removeSelect, true);\r\n        qr.removeEventListener(\"click\", qrEvent);\r\n        desc.removeEventListener(\"click\", descEvent);   \r\n        part.removeEventListener(\"click\", partEvent);\r\n        custText.removeEventListener(\"click\", custTextEvent);\r\n          \r\n        savedLabel.custText = custText.innerHTML;\r\n        setToolbarSettings();\r\n        saveReportData(JSON.stringify(savedLabel)); \r\n        getToolbarSettings();\r\n        \r\n        edit.addEventListener(\"click\", editButton);\r\n        save.removeEventListener(\"click\", saveButton);\r\n};\r\n    \r\n/******* \r\nhide/show checkbox functionality  \r\n*******/   \r\n\r\nif (showPart == false) {\r\n    let parts = document.querySelectorAll(\".part-drag\");\r\n    parts.forEach(function(elem) {\r\n        elem.style.display = 'none';\r\n    });\r\n} else {\r\n    let parts = document.querySelectorAll(\".part-drag\");\r\n    parts.forEach(function(elem) {\r\n        elem.style.display = 'flex';\r\n    });\r\n};    \r\n                          \r\nif (showDesc == false) {\r\n    let descriptions = document.querySelectorAll(\".desc-drag\");\r\n    descriptions.forEach(function(elem) {\r\n        elem.style.display = 'none';\r\n    });\r\n} else {\r\n    let descriptions = document.querySelectorAll(\".desc-drag\");\r\n    descriptions.forEach(function(elem) {\r\n        elem.style.display = 'flex';\r\n    });\r\n};\r\n\r\nif (showBarcode == false) {\r\n    let barcodes = document.querySelectorAll(\".qr-code\");\r\n    barcodes.forEach(function(elem) {\r\n        elem.style.display = 'none';\r\n    });\r\n} else {\r\n    let barcodes = document.querySelectorAll(\".qr-code\");\r\n    barcodes.forEach(function(elem) {\r\n        elem.style.display = 'block';\r\n    });\r\n}; \r\n\r\nif (showCustomText == false) {\r\n    let text = document.querySelectorAll(\".custom-drag\");\r\n    text.forEach(function(elem) {\r\n        elem.style.display = 'none';\r\n    });\r\n} else {\r\n    let text = document.querySelectorAll(\".custom-drag\");\r\n    text.forEach(function(elem) {\r\n        elem.style.display = 'flex';\r\n    });\r\n}; \r\n                          \r\n                          \r\nfunction removeAllChildNodes(parent) {\r\n    while (parent.firstChild) {\r\n        parent.removeChild(parent.firstChild);\r\n    }\r\n};\r\n\r\nfunction setToolbarSettings() {\r\n    if (part.classList.contains('bold')) {\r\n        savedLabel.partBold = \"true\";\r\n    } else {\r\n        savedLabel.partBold = \"false\";\r\n    }\r\n    if (part.classList.contains('italic')) {\r\n        savedLabel.partItalic = \"true\";\r\n    } else {\r\n        savedLabel.partItalic = \"false\";\r\n    }\r\n    if (part.classList.contains('underline')) {\r\n        savedLabel.partUnderlined = \"true\";\r\n    } else {\r\n        savedLabel.partUnderlined = \"false\";\r\n    }\r\n    if (desc.classList.contains('bold')) {\r\n        savedLabel.descBold = \"true\";\r\n    } else {\r\n        savedLabel.descBold = \"false\";\r\n    }\r\n    if (desc.classList.contains('italic')) {\r\n        savedLabel.descItalic = \"true\";\r\n    } else {\r\n        savedLabel.descItalic = \"false\";\r\n    }\r\n    if (desc.classList.contains('underline')) {\r\n        savedLabel.descUnderlined = \"true\";\r\n    } else {\r\n        savedLabel.descUnderlined = \"false\";\r\n    }\r\n    if (custText.classList.contains('bold')) {\r\n            savedLabel.custBold = \"true\";\r\n        } else {\r\n            savedLabel.custBold = \"false\";\r\n        }\r\n        if (custText.classList.contains('italic')) {\r\n            savedLabel.custItalic = \"true\";\r\n        } else {\r\n            savedLabel.custItalic = \"false\";\r\n        }\r\n        if (custText.classList.contains('underline')) {\r\n            savedLabel.custUnderlined = \"true\";\r\n        } else {\r\n            savedLabel.custUnderlined = \"false\";\r\n        }\r\n};\r\n\r\n\r\nfunction getToolbarSettings() {\r\n    let parts = document.querySelectorAll(\".part-drag\");\r\n    let descriptions = document.querySelectorAll(\".desc-drag\");\r\n    let customTexts = document.querySelectorAll(\".custom-drag\");\r\n    if (savedLabel.partBold == 'true') { \r\n        parts.forEach(function(elem) {\r\n            elem.classList.add('bold');\r\n        });\r\n    }\r\n    if (savedLabel.partItalic == 'true') {\r\n        parts.forEach(function(elem) {\r\n            elem.classList.add('italic');\r\n        });\r\n    }\r\n    if (savedLabel.partUnderlined == 'true') {\r\n        parts.forEach(function(elem) {\r\n            elem.classList.add('underline');\r\n        });\r\n    }\r\n    if (savedLabel.descBold == 'true') { \r\n        descriptions.forEach(function(elem) {\r\n            elem.classList.add('bold');\r\n        });\r\n    }\r\n    if (savedLabel.descItalic == 'true') {\r\n        descriptions.forEach(function(elem) {\r\n            elem.classList.add('italic');\r\n        });\r\n    }\r\n    if (savedLabel.descUnderlined == 'true') {\r\n        descriptions.forEach(function(elem) {\r\n            elem.classList.add('underline');\r\n        });\r\n    }\r\n    if (savedLabel.custBold == 'true') { \r\n            customTexts.forEach(function(elem) {\r\n                elem.classList.add('bold');\r\n            });\r\n        }\r\n        if (savedLabel.custItalic == 'true') {\r\n            customTexts.forEach(function(elem) {\r\n                elem.classList.add('italic');\r\n            });\r\n        }\r\n        if (savedLabel.custUnderlined == 'true') {\r\n            customTexts.forEach(function(elem) {\r\n                elem.classList.add('underline');\r\n            });\r\n        }\r\n}\r\n\r\n\r\n// save settings //\r\n                                 \r\nlet test;                     \r\n                          \r\n  edit.addEventListener(\"click\", editButton);\r\n \r\n getToolbarSettings();   \r\n qr.style.width = savedLabel.qrWidth + \"px\";\r\n qr.style.height = savedLabel.qrWidth + \"px\";\r\n qr.style.transform = savedLabel.qrTransform;\r\n desc.style.width = savedLabel.descWidth + \"px\";\r\n desc.style.height = savedLabel.descHeight + \"px\";\r\n desc.style.transform = savedLabel.descTransform;\r\n desc.style.fontSize = savedLabel.descFontSize + \"px\";\r\n desc.style.justifyContent = savedLabel.descAlign;\r\n desc.style.textAlign = savedLabel.descAlign;\r\n desc.style.alignContent = savedLabel.descVAlign;\r\n desc.style.fontFamily = savedLabel.descFontFamily;\r\n part.style.width = savedLabel.partWidth + \"px\";\r\n part.style.height = savedLabel.partHeight + \"px\";\r\n part.style.transform = savedLabel.partTransform;\r\n part.style.fontSize = savedLabel.partFontSize + \"px\";\r\n part.style.justifyContent = savedLabel.partAlign;\r\n part.style.textAlign = savedLabel.partAlign;\r\n part.style.alignContent = savedLabel.partVAlign;\r\n part.style.fontFamily = savedLabel.partFontFamily;\r\n custText.style.width = savedLabel.custWidth + \"px\";\r\n  custText.style.height = savedLabel.custHeight + \"px\";\r\n  custText.style.transform = savedLabel.custTransform;\r\n  custText.style.fontSize = savedLabel.custFontSize + \"px\";\r\n  custText.style.justifyContent = savedLabel.custAlign;\r\n  custText.style.textAlgin = savedLabel.custAlign;\r\n  custText.style.alignContent = savedLabel.custVAlign;\r\n  custText.style.fontFamily = savedLabel.custFontFamily;\r\n  custText.innerHTML = savedLabel.custText;\r\n $('.card').css('width', savedLabel.width + 'in');\r\n $('.card').css('height', savedLabel.height + 'in');\r\n $('#printable').css('width', savedLabel.width + 'in');\r\n $('#printable').css('height', savedLabel.height + 'in');  \r\n $('#labelW').val(savedLabel.width);\r\n $('#labelH').val(savedLabel.height);   \r\n var divRect = printable.getBoundingClientRect();\r\n resize(divRect);                              ", "2023-04-20 16:40:15.656000", "Resizable part labels with QR code", "Part QR Code Label", "", 20, 4, "part-qr-code-label", 0]], "columns": ["id", "active", "data", "dateLastModified", "description", "name", "note", "typeId", "fbVersion", "fbName", "published"], "primary_keys": ["id"], "primary_key_values": ["32"], "units": {}, "query_ms": 1.5439800336025655}