var ManageSegment = function(core, target, data, returnCB, segmentValue){ var focusDefined = isDefined(segmentValue), events = new EventManager, template = new ManageSegmentsTemplate(focusDefined), renderObj = new RenderObj, createSegmentData = getCreateSegmentData(), dataObj = null, element = null, elements = null, apiObj = { 'segments/retargeting' : null }; if(focusDefined) new ApiManager(apiObj, segmentValue, init); else init(null, apiObj); this.exit = exit; function RenderObj(){ this.sidePanel = null; } function DataObj(d, id){ this.id = id; this.name = getDataObjValue(d, 'name'); this.targetConsumers = getDataObjValue(d, 'targetConsumers'); this.previouslySpentBetween = getDataObjValue(d, 'previouslySpentBetween', [0, 700]); this.lastVisitedBetween = getDataObjValue(d, 'lastVisitedBetween', [0, 90]); this.urlsVisited = getDataObjValue(d, 'urlsVisited'); this.skusVisited = getDataObjValue(d, 'skusVisited'); this.minimumPageViews = getDataObjValue(d, 'minimumPageViews', 0); this.includeParams = getDataObjValue(d, 'includeParams'); this.excludeParams = getDataObjValue(d, 'excludeParams'); this.uniqueUsers = getDataObjValue(d, 'uniqueUsers', 0); this.cvr = parseFloat(getDataObjValue(d, 'cvr', '0')); this.avgPurchase = getDataObjValue(d, 'avgPurchase', 0); } function init(error, d){ var sD = createSegmentData; segmentData = getSegmentData(d['segments/retargeting']); dataObj = new DataObj(segmentData, segmentValue); element = getElementFromString(render(template.index, { 'sidePanel' : getOverviewObj(dataObj) })); setElements(); updateRender('targetConsumers', sD.targetConsumers); initTabbedWindow(); returnCB(); insertElement(); returnCB = null; } function getSegmentData(d){ if(focusDefined && isDefined(d)) return d; return {}; } function initTabbedWindow(){ var obj = { 'data' : [ { 'title' : 'Settings', 'element' : elements.mainTab, 'initFn' : initMainElement }, ], 'config' : { 'prepend' : true } }; elements.tabbedContainer = new TabbedContainer(elements.section, obj); } function initMainElement(){ var e = elements.mainTab, psbd = dataObj.previouslySpentBetween || [20, 650], lvbd = dataObj.lastVisitedBetween || [0, 90], rd = !!dataObj.retention ? [dataObj.retention] : [90], tcv = getTargetConsumersValue(createSegmentData.targetConsumers); elements.segmentName = e.querySelector('.segmentName'); events.add(elements.segmentName, 'change', updateSegmentName); if(psbd[1] === -1) psbd[1] = 700; elements.previouslySpent = e.querySelector('.previouslySpent'); elements.previouslySpentInput = new SlideInput(elements.previouslySpent, { 'valueRange' : [0, 700], 'prependValue' : '$', 'startValues' : psbd, 'decimalPlaces' : 0 }, updatePreviouslySpentBetween); elements.lastVisitedBetween = new SlideInput(e.querySelector('.lastVisited'), { 'valueRange' : [0, 90], 'appendValue' : ' days', 'startValues' : lvbd, 'decimalPlaces' : 0 }, updateLastVisitedBetween); elements.targetConsumers = new ToggleNavigation(e.querySelector('.targetConsumers'), { 'data' : renderObj.targetConsumers, 'className' : 'toggle' }, updateTargetConsumers); if(isDefined(tcv) && tcv != 0) elements.targetConsumers.set(tcv); } function initAdvanced(){ var e = elements.advancedTab, mpvd = dataObj.minimumPageViews; elements.minimumPageViews = new SlideInput(e.querySelector('.minPageViews'), { 'valueRange' : [0, 30], 'appendValue' : ' views', 'startValues' : [mpvd], 'decimalPlaces' : 0, 'startNub' : false }, updateMinimumPageViews); elements.urlsVisited = e.querySelector('.urlsVisited'); elements.skusVisited = e.querySelector('.skusVisited'); elements.includeParams = e.querySelector('.includeParams'); elements.excludeParams = e.querySelector('.excludeParams'); events.add(elements.urlsVisited, 'change', updateURLsVisited); events.add(elements.skusVisited, 'change', updateSKUsVisited); events.add(elements.includeParams, 'change', updateIncludeParams); events.add(elements.excludeParams, 'change', updateExcludeParams); } function getAdvancedData(d) { var c = getSimpleJSONCopy(d); if (isDefined(c.urlsVisited)) c.urlsVisited = c.urlsVisited.join('\n'); if (isDefined(c.skusVisited)) c.skusVisited = c.skusVisited.join('\n'); if (isDefined(c.includeParams)) c.includeParams = c.includeParams.join('\n'); if (isDefined(c.excludeParams)) c.excludeParams = c.excludeParams.join('\n'); return c; } function getDataObjValue(d, k, r){ if(r === undefined) r = null; if(isDefined(d) && isDefined(d[k])) return d[k]; else return r; } function getSliderValue(e){ var a = []; forEach(e, process); return a; function process(t){ a.push(t.value); } } function getTargetConsumersValue(v){ var m = null, f = dataObj.targetConsumers; forEach(v, p); return m; function p(t, d, i){ if(t.value == f){ m = i; return false; } } } function getOverviewObj(d){ var o = { 'title' : 'Overview', 'info' : [ { 'title' : 'Segment Name', 'value' : d.name }, ] }; o.info.push({ 'title' : 'Target Consumers', 'value' : d.targetConsumers }); o.info.push({ 'title' : 'Last Visited Between', 'value' : d.lastVisitedBetween[0] + ' - ' + d.lastVisitedBetween[1] + ' days' }); if(d.targetConsumers == 'Has Converted') { if(d.previouslySpentBetween[1] === -1) { o.info.push({ 'title' : 'Previously Spent Between', 'value' : '$' + d.previouslySpentBetween[0] + ' - ∞' }); } else { o.info.push({ 'title' : 'Previously Spent Between', 'value' : '$' + d.previouslySpentBetween[0] + ' - $' + d.previouslySpentBetween[1] }); } } o.info.push(getMinimumPageViewsObj(d)); return o; } function getMinimumPageViewsObj(d){ return { 'title' : 'Minimum page views', 'value' : d.minimumPageViews + (d.minimumPageViews != 1 ? ' views' : ' view') }; } function setElements(){ elements = new Elements(element, { 'tabbedContainer' : {}, 'edit' : { 'selector' : '.editButton' }, 'mainTab' : { 'target' : getElementFromString(render(template.main, dataObj)) }, 'advancedTab' : { 'target' : getElementFromString(render(template.advanced, getAdvancedData(dataObj))) }, 'section' : { 'selector' : 'section' }, 'sidePanel' : { 'selector' : 'side-panel' }, 'save' : { 'selector' : '.saveButton' }, 'previouslySpent' : {}, 'previouslySpentInput' : {}, 'targetConsumers' : {}, 'lastVisitedBetween' : {}, 'urlsVisited' : {}, 'skusVisited' : {}, 'minimumPageViews' : {}, 'includeParams' : {}, 'excludeParams' : {}, 'segmentName' : {}, 'missing' : {} }); events.add(elements.save, 'click', saveAction); } function insertElement(){ target.appendChild(element); } function saveAction(e){ var ep = 'segments/retargeting'; if(e && e.preventDefault) e.preventDefault(); if(isDefined(dataObj.name) && dataObj.name !== '') focusDefined ? edit() : save(); else core.notifications.setMissingFields(['Segment name']); function save(){ apiRequest('POST', ep, core.userID, dataObj, redirect); } function edit(){ var id = dataObj.id; apiRequest('PUT', ep, id, dataObj, redirect); } function redirect(){ pop('Pop!', 'Dashboard - Segments', '/dashboard/segments'); } } function updateSegmentName(e){ updateData('name', e.target.value, false); } function updateDomain(e){ var val = e.target.value, host = parseURL(val).host.replace(/^www\./, ''); if(host !== val) val = e.target.value = host; updateData('domain', val, false); } function updateRetention(e){ updateData('retention', getSliderValue(e)[0]); } function updateTargetConsumers(e){ if(elements.previouslySpent){ if(e.value !== 'Has Converted') elements.previouslySpent.classList.add('noDisplay'); else elements.previouslySpent.classList.remove('noDisplay'); } updateData('targetConsumers', e.value, false); } function updateLastVisitedBetween(e){ updateData('lastVisitedBetween', getSliderValue(e), false); } function updateURLsVisited(e){ updateData('urlsVisited', e.target.value.split('\n'), true); } function updateSKUsVisited(e){ updateData('skusVisited', e.target.value.split('\n'), true); } function updatePreviouslySpentBetween(e){ var val = getSliderValue(e); if(val[1] === 700) { val[1] = -1; document.querySelector('.previouslySpent nub.end label').innerHTML = '∞'; } updateData('previouslySpentBetween', val, false); } function updateMinimumPageViews(e){ updateData('minimumPageViews', getSliderValue(e)[0], false); } function updateIncludeParams(e){ updateData('includeParams', e.target.value.split('\n'), true); } function updateExcludeParams(e){ updateData('excludeParams', e.target.value.split('\n'), true); } function updateData(k, v, no){ dataObj[k] = v; if(no !== true) refreshSidePanel(); } function updateRender(k, v){ renderObj[k] = v; } function refreshSidePanel(){ var e = getElementFromString(render(template.sidePanel, { 'sidePanel' : getOverviewObj(dataObj) })), s = elements.section; s.insertBefore(e, elements.sidePanel); s.removeChild(elements.sidePanel); elements.sidePanel = e; } function refreshPie(t, d){ new Chart(t.getContext('2d')).Pie(d); } function exit(){ if(events) events.reset(); if(element) removeChild(target, element); if(elements) elements.exit(); housekeeping(); } function housekeeping(){ core = target = data = returnCB = segmentValue = focusDefined = events = tempalte = renderObj = createSegmentData = apiObj = dataObj = element = elments = null; } };