var products = []; var addButton = false; var watchOrItem = ''; var lastFileType = ''; var currentSubmission = 0; const maxProducts = 5; const customFileUpload = `

FrontChoose an image

BackChoose an image

AdditionalChoose up to 4 images

` function onFormLoad() { $('.form_generater_form_div').prepend($('.steps-wrapper')); $('.steps-wrapper').find('.step').eq(0).append('01Personal Details') .end() .eq(1).append('02Watch Details') .end() .eq(2).append('03Selling Preferences'); $('.formElement_8 a').prop('outerHTML', '' + $('.formElement_8 a').html() + ''); $('.formElement_15').append(customFileUpload); $('.formElement_13 label.block_label').after($('.formElement_13 .infoMessage')); $('.formElement_14 label.block_label').after($('.formElement_14 .infoMessage')); $('.formElement_18 label.block_label').append(''); $('.formElement_19 label.block_label').append(''); $('.formElement_4').find('input').on('input',function(){ $(this).val($(this).val().replace(/[^0-9+\-/\d]+/g, '')); if($(this).val().charAt(0) != '+'){ $(this).val('+',$(this).val()); } }) } $('#nextBtn').on('click', function () { setTimeout(() => { if (document.querySelector('.tab:nth-child(3)').style.display === 'block') { createAddButton(watchOrItem); } }, 500) }) function tab2watchOrItem() { document.querySelector('.formElement_7 input:checked').value.includes('watches') ? watchOrItem = 'watch' : watchOrItem = 'item'; if (watchOrItem === 'item') { $('.formElement_10 label').text('Tell us about your collectible'); $('.formElement_11 label').text('Brand or Artist'); $('.formElement_12 label').text('Model, Title or category of the product'); $('.formElement_13 .infoMessage').text('This is the original branded box or packaging that was issued by the brand with the product when first sold.') $('.formElement_14 .infoMessage').text('It can be a certificate of authenticity issued by the brand or artist, a signature on item itself or an invoice/receipt issued at the moment of the initial purchase.'); $('.formElement_15 label').text('Upload photos of your item'); $('.file_1, .file_2').css('display', 'none'); $('label[aria-label="Not applicable"]').each(function(){ $(this).css('display','flex'); }) $('.file_3 .upload_text strong').text('Images'); $('.steps-wrapper .step:nth-child(2) .step-title').text('Submission Details'); $('.formElement_11 input').attr('placeholder',''); $('.formElement_12 input').attr('placeholder',''); } else if (watchOrItem === 'watch'){ $('.formElement_10 label').text('Tell us about your watch'); $('.formElement_11 label').text('Brand'); $('.formElement_12 label').text('Model/Reference Number'); $('.formElement_13 .infoMessage').text('This is the branded presentation box(es) that the watch came in from the manufacturer.'); $('.formElement_14 .infoMessage').text('The brand warranty cards or papers that come with a watch at its original time of purchase'); $('.formElement_15 label').text('Upload photos of your watch'); $('.file_1, .file_2').css('display', 'grid'); $('label[aria-label="Not applicable"]').each(function(){ $(this).css('display','none'); }) $('.file_3 .upload_text strong').text('Additional'); $('.steps-wrapper .step:nth-child(2) .step-title').text('Watch Details'); $('.formElement_11 input').attr('placeholder','Rolex'); $('.formElement_12 input').attr('placeholder','12345'); } } function createAddButton(productType) { if (!addButton) { const button = document.createElement('div'); button.classList.add('add-another'); button.textContent = `Add another ${productType}`; console.log(button); $('.form_generater_form_div .tab:nth-child(3) .form_element')[0].append(button); addButton = true; button.addEventListener('click', ()=>{ submissionCall('save'); }); } tab2watchOrItem(); } function isValidSubmission() { let errors = 0; let textInputs = document.querySelectorAll('.tab:nth-child(3) input[type="text"]'); let radio1 = document.querySelector('.formElement_13'); let radio2 = document.querySelector('.formElement_14'); textInputs.forEach((input) => { if (input.value == '') { input.classList.add('error'); errors++ } }) if (!radio1.querySelector('input:checked')) { radio1.classList.add('radio-error'); errors++ } if (!radio2.querySelector('input:checked')) { radio2.classList.add('radio-error'); errors++ } if (watchOrItem == 'watch' && ($('.file_1 .upload-container').length == 0)){ $('.file_1').addClass('error'); errors++ } if (watchOrItem == 'watch' && ($('.file_2 .upload-container').length == 0)){ $('.file_2').addClass('error'); errors++ } if (watchOrItem == 'item' && ($('.file_3 .upload-container').length == 0)){ $('.file_3').addClass('error'); errors++ } setTimeout(()=>{ $('.error').each(function(){$(this).removeClass('error')}); $('.radio-error').each(function(){$(this).removeClass('radio-error')}); },2000) if(errors)return false; else return true; } function createSubmissionLine(productName,productAdditional){ let entry = document.createElement('div'); entry.classList.add('product-entry'); entry.innerHTML = `

✓${productName} - ${productAdditional} Editing this watch will wipe your current submission progress

EditRemove CancelContinue

` $('.form_generater_form_div .tab:nth-child(3) .form_element')[0].append(entry); } function customInputClick(){ $('.custom-file').each(function(){ $(this).on('click',function(e){ if(!e.target.classList.contains('delete_upload')){ $(`input[type="file"][name="Product ${currentSubmission+1}"]`).click(); lastFileType = e.target.closest('.custom-file').classList[1]; console.log('Detected click on custom input',lastFileType,$(`input[type="file"][name="Product ${currentSubmission+1}"]`).get()[0]); } }) }) } function returnProduct() { return { name: $('#productName').val(), details: $('#productAdditional').val(), hasBox: $('.radio:has(#isBox) input:checked').val(), hasPapers: $('.radio:has(#isPapers) input:checked').val(), frontImage: $('.file_1 .upload-container img').length ? { name: $('.file_1 .upload-container img').attr('data-filename'), src: $('.file_1 .upload-container img').attr('src'), } : undefined, backImage: $('.file_2 .upload-container img').length ? { name: $('.file_2 .upload-container img').attr('data-filename'), src: $('.file_2 .upload-container img').attr('src'), } : undefined, additionalImage: (()=>{ let images = []; if (!($('.file_3 .upload-container img').length)) return undefined else{ $('.file_3 .upload-container img').each(function(){ const image = { name: $(this).attr('data-filename'), src: $(this).attr('src'), } images.push(image); }) } return images })() } } function clearForm(){ let inputs = document.querySelectorAll('.tab:nth-child(3) input:not(input[type="file"]'); inputs.forEach((input)=>{ if (input.type === 'text'){ input.value = '' } else if (input.type === 'radio'){ input.checked = false; } }) $('.upload-container').each(function(){ $(this).remove(); }) } function handleEdit(e){ submissionCall('edit',e.target.closest('.product-entry').getAttribute('data-order')); } function handleDelete(e){ submissionCall('delete',e.target.closest('.product-entry').getAttribute('data-order')); } function attachActions(){ let i = 0; $('.product-entry').each(function(){ $(this).find('.product-edit').off() .end() .find('.product-remove').off() .end() .find('.product-edit').on('click',handleEdit) .end() .find('.product-remove').on('click',handleDelete) .end() .attr('data-order',i); i++; }) } function handleFileUpload(e){ let inputType = e.target.classList[1]; let files = e.target.files; for (const file of files){ let reader = new FileReader(); handleReadEvent(reader,file.name); reader.readAsDataURL(file); } } function handleReadEvent(reader,fileName){ let base64Output = ''; reader.addEventListener('loadend',function (event){ let base64 = event.target.result; base64Output = base64; createImage(base64Output,lastFileType,fileName); $('.upload-container .delete_upload').each(function(){ $(this).off(); $(this).on('click',deleteUpload); }) }) } function createImage(source,place,fileName) { let imageWrapper = document.createElement('div'); imageWrapper.classList.add('upload-container'); let deleteButton = document.createElement('span'); deleteButton.textContent = 'x'; deleteButton.classList.add('delete_upload'); let uploadedImage = document.createElement('img'); uploadedImage.setAttribute('data-filename',fileName); uploadedImage.classList.add('upload_image') uploadedImage.src = source; imageWrapper.appendChild(uploadedImage); imageWrapper.appendChild(deleteButton); document.querySelector(`.${place}`).appendChild(imageWrapper); $('.upload-container .delete_upload').each(function(){ $(this).off(); $(this).on('click',deleteUpload); }) } function deleteUpload(e){ console.log('deleteUpload armed'); let imageFile = e.target.previousElementSibling.getAttribute('data-filename').replace(/\.(svg|png|jpg|jpeg)$/, "").replace(/[^a-zA-Z0-9-]/g,'_'); $(`.remove-multi-text[aria-label="${imageFile}"]`).next().click(); e.target.closest('.upload-container').remove(); console.log('We have deleted image',imageFile,'as per your request.'); } function submissionCall(action, submissionNo) { switch (action) { case ('save'): if (isValidSubmission() && products.length < maxProducts) { products.push(returnProduct()); clearForm(); console.log('Save action > Success'); createSubmissionLine(products[currentSubmission].name,products[currentSubmission].details) currentSubmission++; } break; case ('delete'): console.log('Delete action > ',submissionNo); products.splice(submissionNo,1); $(`[data-order="${submissionNo}"]`).remove(); $(`.form-group:has(input[name="Product ${parseInt(submissionNo)+1}"])`).find('button.remove-multi-image').each(function(){$(this).click();}); if (currentSubmission > 0) currentSubmission--; break; case ('edit'): console.log('Edit request on',submissionNo); if(submissionNo == currentSubmission) break; $(`.product-entry[data-order="${submissionNo}"]`).addClass('edit'); $(`.product-entry[data-order="${submissionNo}"]`).find('.warning-cancel').one('click',function(){ $(`.product-entry[data-order="${submissionNo}"]`).removeClass('edit'); }) $(`.product-entry[data-order="${submissionNo}"]`).find('.warning-remove').one('click',function(){ $(`.product-entry[data-order="${submissionNo}"]`).removeClass('edit'); $('.formElement_11 input').val(products[submissionNo].name); $('.formElement_12 input').val(products[submissionNo].details); $(`.formElement_13 input[value="${products[submissionNo].hasBox}"]`).click(); $(`.formElement_14 input[value="${products[submissionNo].hasPapers}"]`).click(); createImage(products[submissionNo]?.frontImage?.src,'file_1',products[submissionNo]?.frontImage?.name); // Front image createImage(products[submissionNo]?.backImage?.src,'file_2',products[submissionNo]?.backImage?.name); // Back image if(products[submissionNo].additionalImage){ for (image of products[submissionNo].additionalImage){ createImage(image.src,'file_3',image.name); } } submissionCall('delete',submissionNo); }) break; } console.log(products); console.log('current submission',currentSubmission); attachActions(); } function finaliseSubmission(){ console.log('clicked'); let completeEntry = ''; for (const product of products){ let lineEntry = `Product Brand: ${product.name}\nProduct Model: ${product.details}\nOriginal Box: ${product.hasBox}\nPapers: ${product.hasPapers}\n-----------------\n` completeEntry += lineEntry; } $('#submission_parsed').val(completeEntry); } $(document).ready(function () { onFormLoad(); customInputClick(); $('input[type="file"]').each(function(){ $(this).on('change',handleFileUpload); }) $('.formElement_18 .custom-tooltip').on('click',function(){ $('.formElement_19').toggleClass('slide-show'); }) $('body').on('click',function(event){ if ($('.formElement_19').hasClass('slide-show') && event.target != document.querySelector('.formElement_19') && event.target != document.querySelector('.formElement_18 .custom-tooltip')){ $('.formElement_19').removeClass('slide-show'); } setTimeout(()=>{ if(document.querySelector('.tab:nth-child(4)').style.display === 'block'){ console.log('Final page'); finaliseSubmission(); } },800) }) })

Josh Sperling

Part 6/32

Part 6/32

Join us on Instagram

Become a VIP