var UploadBannerAds = function(core, target, data, returnCB){ var events = new EventManager, template = new UploadBannerAdsTemplate, data = null, dataObj = new DataObj(), element = getElementFromString(render(template.index, dataObj)), elements = null, inboundData = null, currentSet = null; new ApiManager({ 'adGroupsList' : null }, core.userID, init); this.exit = exit; function DataObj(){ this.sidePanel = null; this.saveState = false; } function Image(data, rects, name, fileSize){ this.data = data; this.rects = rects; this.name = name; this.fileSize = fileSize; } function init(error, d){ inboundData = d; data = getDataObj(d); elements = new Elements(element, { 'section' : { 'selector' : 'section' }, 'footer' : {}, 'sidePanel' : { 'selector' : 'side-panel' }, 'hiddenInput' : { 'target' : getHiddenInput() }, 'uploadImage' : { 'selector' : '.uploadImage' }, 'result' : { 'selector' : '.result' }, 'resultImage' : {}, 'toQueue' : { 'selector' : '.toQueue' }, 'landingPageURL' : { 'selector' : '.landingPageURL' }, 'trackers' : { 'selector' : '.trackers + div' }, 'impTrack' : { 'selector' : '.impTrack' }, 'clickTrack' : { 'selector' : '.clickTrack' }, 'adGroups' : {}, 'save' : {} }); elements.resultImage = elements.result.querySelector('img'); currentSet = new AdSet({ 'landingURL' : null, 'adGroup' : null, 'impTrack' : null, 'clickTrack' : null }, elements.hiddenInput, elements.result, {impTrack: true, clickTrack: true}); elements.trackersToggle = new ToggleInput(element.querySelector('.trackers'), toggleTrackers, { 'initialValue': false }); events.add(elements.impTrack, 'change', getInputSetter(currentSet, 'impTrack', trackerCheck)); events.add(elements.clickTrack, 'change', getInputSetter(currentSet, 'clickTrack', trackerCheck)); initAdGroups(); initUpload(); initLandingPageURL(); initToQueue(); returnCB(); insertElement(); returnCB = null; } function toggleTrackers(e) { if(e) { return elements.trackers.classList.remove('noDisplay') } elements.trackers.classList.add('noDisplay') currentSet.setValue('impTrack', null); currentSet.setValue('clickTrack', null); } function validateTrackers() { var it = currentSet.getValue('impTrack'), ct = currentSet.getValue('clickTrack'); if(!!it && it.length > 0 && it.indexOf('https://') !== 0) return false; if(!!ct && ct.length > 0 && ct.indexOf('https://') !== 0) return false; return true; } function trackerCheck(url, e) { if(typeof url === 'string' && url.toLowerCase().indexOf('https://') === 0 || url.length === 0) { return url; } core.notifications.setError("Please use an HTTPS url for the tracker."); } function initAdGroups(){ elements.adGroups = new Dropdown(element.querySelector('.adGroup'), data.adGroups, updateAdGroup); } function initUpload(){ events.add(elements.uploadImage, 'click', openFileInput); events.add(elements.hiddenInput, 'change', checkFileInput); } function initLandingPageURL(){ events.add(elements.landingPageURL, 'change', updateLandingPageURL); } function initToQueue(){ events.add(elements.toQueue, 'click', toQueue); } function initSaveButton(){ elements.save = element.querySelector('.saveButton'); events.add(elements.save, 'click', saveAction); } function getDataObj(o){ return { "adGroups" :{ "data" : getAdGroups(getAdGroupData(o.adGroupsList)), "options" : { "dropdownClass" : "cool", "menuItemClass" : "cool", "carrotClass" : "cool" } }, "adGroupsList" : getAdGroupsList(o.adGroupsList) } } function getAdGroups(d){ var a = [{ "title" : "Change Ad Group", "value" : "", "placeholder" : true }]; forEach(d, p); return a; function p(t){ a.push({ 'title' : t.name, 'value' : t.name }); } } function getAdGroupsList(list){ var a = []; forEach(list, p); return a; function p(t, d, i){ a.push(new AdGroup(t)); } } function getAdGroupData(list){ var a = []; forEach(list, p); return a; function p(t, d, i){ a.push(t.data); } } function getIDFromName(adGroup){ var match = null; forEach(data.adGroupsList, p); return match; function p(t, d, i){ if(t.name == adGroup){ match = t.id; return true; } } } function AdGroup(t){ this.name = t.data.name; this.id = t.id; } function insertElement(){ target.appendChild(element); } function saveAction(){ if(validateTrackers()) { new AdSave(core, dataObj.sidePanel.ads, 'banner', core.userID, saveCB); return true; } core.notifications.setError('Please populate all the required fields before saving.'); } function saveCB(e){ if (e) { core.notifications.setError(e); return; } pop('Pop!', 'Dashboard - Ads', '/dashboard/ads'); } function getHiddenInput(){ var t = document.createElement('input'); t.type = 'file'; t.setAttribute('multiple', true); return t; } function getImage(d, i){ var f = elements.hiddenInput.files[i]; return new Image(d.result, getImageRects(resultImage), f.name, getKilobytesFromBytes(f.size) + 'K') } function getImageRects(t){ var o = t.getClientRects()[0]; return { 'width' : o.width, 'height' : o.height }; } function SetAdImages(d){ var l = d.length , c = 0, r = elements.result, ri = elements.resultImage; setUploadToValid(); next(); function Set(d, i){ ri.src = d.result; setTimeout(setCurrent, 10); function setCurrent(){ r.classList.remove('noDisplay'); currentSet.setCurrentImage(d, i); r.classList.add('noDisplay'); next(); } } function next(){ if(c < l) new Set(d[c], c++); else complete(); } function complete(){ elements.uploadImage.textContent = currentSet.getAdCount() + ' selected'; } } function setUploadToValid(){ var u = elements.uploadImage; u.classList.add('mist'); u.classList.remove('cool'); } function setUploadToDefault(){ var u = elements.uploadImage; u.classList.remove('mist'); u.classList.add('cool'); u.textContent = 'Select file(s)'; } function updateAdGroup(e){ currentSet.setValue('adGroup', getIDFromName(e)); } function updateLandingPageURL(e){ landingPageCheck(e.target.value); currentSet.setValue('landingURL', e.target.value); } function landingPageCheck(s){ if(!isValidURL(s)){ elements.landingPageURL.classList.add('alert') core.notifications.setError("Please ensure you have entered a valid URL."); return false; } else elements.landingPageURL.classList.remove('alert') return true; } function updateAds(ads){ if(!dataObj.sidePanel) dataObj.sidePanel = { 'ads' : [] }; updateSaveState(); var t = dataObj.sidePanel.ads, l = t.length; forEach(ads, process); refreshSidePanel(); function process(ad){ t[l] = ad; ad.setIndex(l++); } } function updateSaveState(){ if(dataObj.saveState === false){ dataObj.saveState = true; refreshFooter(); } } function updateData(k, v, no){ dataObj[k] = v; if(no !== true) refreshSidePanel(); } function resetCurrent(noReset){ updateAds(currentSet.getAds()); refreshSidePanel(); currentSet.resetAds(); if(noReset !== true) resetInputs(); } function resetInputs(){ elements.hiddenInput.value = ''; elements.landingPageURL.value = ''; setUploadToDefault(); } function openFileInput(e){ if(e && e.preventDefault) e.preventDefault(); elements.hiddenInput.click(); } function checkFileInput(){ new FileToImageData(elements.hiddenInput, returnFileInputData); } function returnFileInputData(a){ var v = getValidImages(a); if(v.length > 0){ new SetAdImages(v); } } function getValidImages(a){ var v = [], tooLarge = false; for(var i=0, l=a.length; i