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