function ClientsTemplate(){ var header = '

Create Client

', edit = 'Edit Info', del = '', manageRow = '

Manage Clients

'+ edit + del + '

', manageTable = '

'; this.index = '

' + header + manageRow + manageTable + '

'; this.fresh = '

Oh no! It appears that we have no clients here. We should add some. Try it out - it\'s simple!

'; } function AdvertisersTemplate(){ var header = '

Create Advertiser

', switchAdvertiser = 'Switch to Advertiser', edit = 'Edit', del = '', manageRow = '

Manage Advertisers

'+ switchAdvertiser + edit + del + '

', manageTable = '

'; this.index = '

' + header + manageRow + manageTable + '

'; this.fresh = '

Oh no! It appears that we have no advertisers here. We should add some. Try it out - it\'s simple!

'; } function AgenciesTemplate(){ var header = '

Create Agency

', switchAgency = 'Switch to Agency', edit = 'Edit', del = '', manageRow = '

Manage Agencies

'+ switchAgency + edit + del + '

', manageTable = '

'; this.index = '

' + header + manageRow + manageTable + '

'; this.fresh = '

Oh no! It appears that we have no agencies here. We should add some. Try it out - it\'s simple!

'; } function SegmentsTemplate(){ var header = '

', view = 'View', edit = 'Edit', duplicate = '', del = '', manageRow = '

Manage Segments

' + view + edit + duplicate + del + '

', manageTable = '

'; this.index = '

' + header + manageRow + manageTable + '

'; this.fresh = '

Oh no! It appears that we have no segments here. We should add some. Try it out - it\'s simple!

'; } function AdGroupsTemplate(){ var header = '

Create new group

Add

', edit = 'Edit', del = '', manageRow = '

Manage Ad Groups

' + edit + del + '

', manageTable = '

'; this.index = '

' + header + manageRow + manageTable + '

'; this.fresh = '

Oh no! It appears that we have no ad groups here. We should add some. Try it out - it\'s simple!

'; } function BillingTemplate(){ var header = '

Edit Billing

', tc = '

', overview = '{{# sidePanel }}

Billing Overview:

Weekly budgets combined:

{{ weeklyBudgetsCombined }}

Payment History: more

{{# paymentHistory }}{{# pending }}Pending{{/ pending }}

{{ date }} | {{ description }} | view

{{/ paymentHistory }}

{{/ sidePanel }}', section = '

' + overview + '

', footer = ''; var paymentInfo = '

Payment info:

/

', billingInfo = '

Billing address:

', filledPayment = '{{# billing.basic.lastFour }}

Payment info

{{ . }}

- Edit payment method - Remove payment method

{{/ billing.basic.lastFour }}'; var insertionInfo = '

We will verify your insertion order amount and complete the deposit of new credit into your account. For expedited service please contact us

', insertionRow = '

I/O amount

'; var chargeHistory = '

Charge history:

{{# chargeHistory }}

{{ date }}

{{# charges }}

{{ campaignName }} | {{# success }}ID ({{ id }}) | {{ amount }}{{/ success }}{{^ success }}Declined{{/ success }}

{{/ charges }}{{/ chargeHistory }}'; this.sidePanel = overview; this.index = '

' + header + section + footer + '

'; this.card = '

' + filledPayment+ paymentInfo + billingInfo + '

'; this.insertionOrder = '

' + insertionInfo + insertionRow + '

'; this.paymentHistory = '

' + chargeHistory + '

'; } function ManageAgencyTemplate(editState){ var actionName = editState === true ? 'Edit' : 'Create', updateName = editState === true ? 'Save' : 'Create'; var status = '

Status:

', name = '

Agency name:

', notes = '

Notes:

', agencyFee = '

Agency fee:

', fixedFee = '

Fixed fee:

', ioState = '

IO Client:

', salesRep = '

Sales Rep:

', setUsername = '

Set username:

', setPassword = '{{^ id }}

Set password:

{{/ id }}'; var header = '

' + actionName + ' Agency

', tc = '

', overview = '

{{ title }}:

{{# info }}

{{ title }}:{{ value }}

{{/ info }}

', section = '

' + overview + '

', footer = ''; this.sidePanel = overview; this.index = '

' + header + section + footer + '

'; this.main = '

' + status + name + notes + agencyFee + (core.isAdmin ? fixedFee : '') + ioState + salesRep + setUsername + setPassword + '

'; this.chargeHistory = '

Charge history:

{{# chargeHistory }}

{{ date }}

{{# charges }}

{{ campaignName }} | ID ({{ id }}) | {{ amount }}

{{/ charges }}{{/ chargeHistory }}

'; } function ManageSegmentsTemplate(editState){ var actionName = editState === true ? 'Edit' : 'Create', updateName = editState === true ? 'Save' : 'Create'; var header = '

' + actionName + ' Segment

', tc = '

', overview = '{{# sidePanel }}

{{title}}:

{{# info }}

{{ title }}:{{ value }}

{{/ info }}

{{/ sidePanel }}', section = '

' + overview + '

', footer = ''; var segmentName = '

Segment name:

', targetConsumers = '

Target consumers:

', previouslySpent = '

Previously spent between:

', lastVisited = '

Last visited between:

'; var urlsVisited = '

URLs visited:

', skusViewed = '

SKUs viewed:

', includeParams = '

Include params:

', excludeParams = '

Exclude params:

'; var meteoraStuff = targetConsumers + previouslySpent + lastVisited; this.sidePanel = overview; this.index = '

' + header + section + footer + '

'; this.main = '

' + segmentName + meteoraStuff + urlsVisited + skusViewed + includeParams + excludeParams +'

'; } function UploadBannerAdsTemplate(){ var header = '

Banner Ads - Upload

', footer = '{{# saveState }}'; var upload = '

Add banners:

Select file(s)', adGroup = '

Ad group:

', landingPageURL = '

Landing page url:

', result = '

Result:

'; var container = '' + upload + adGroup + landingPageURL + advancedAdsTemplate() + result + ''; var sidePanel = '{{# sidePanel }}

Ads pending upload:

{{# ads }}

{{ image.name }}

Size {{ image.width }}x{{ image.height }} | {{ image.fileSize }}

{{/ ads }}

{{/ sidePanel }}'; this.index = '

' + header + '

' + container + sidePanel + '

' + footer + '

'; this.sidePanel = sidePanel; this.footer = footer; } function ProductAdTemplate(){ var canvas = document.createElement('canvas'), context = canvas.getContext('2d'), fontStyle = '400 12px Arial'; context.font = fontStyle; this.getTextWidth = getTextWidth; this['300x250'] = function(){ return function(obj){ var productPriceWidth = context.measureText(obj.price).width; var o = { 'config' : { 'width' : 300, 'height' : 250, 'views' : [ { 'title' : 'Main', 'managerView' : true, 'save' : true, 'key' : 'jsUpgrade' }, { 'title' : 'Re-position background', 'managerView' : true } ], 'updateItems' : { 2 : { 'title' : 'Logo Image', 'key' : 'logo', 'set' : 'src', 'type' : 'logo' }, 4 : { 'title' : 'Product Name', 'key' : 'name', 'set' : 'content', 'type' : 'input' }, 5 : { 'title' : 'Product Price', 'key' : 'price', 'set' : 'content', 'type' : 'input', 'fn' : getPrice }, 6 : { 'title' : 'Sale Positioning', 'key' : 'price', 'set' : 'x', 'fn' : getSalePositioning, 'target' : 5 } } }, 'template' : [ { 'type' : 'rect', 'width' : 300, 'height' : 162, 'x' : 0, 'y' : 40, 'fill' : 'rgb(255, 255, 255)', 'views' : { '0' : true, '1' : true } }, { 'type' : 'image', 'scale' : true, 'src' : obj['imageURL'], 'x': 0, 'y' : 40, 'width' : 300, 'height' : 162, 'views' : { '0' : true, '1' : { 'adjustPosition' : { 'editorFn' : true } } } }, { 'type' : 'image', 'scale' : true, 'src' : obj['logo'], 'x': 0, 'y' : 0, 'width' : 300, 'height' : 40, 'views' : { '0' : true } }, { 'type' : 'rect', 'width' : 300, 'height' : 48, 'x' : 0, 'y' : 202, 'fill' : 'rgb(255, 255, 255)', 'views' : { '0' : true } }, //White box { 'type' : 'text', 'content' : getProductName(obj.name), 'x' : 12, 'y' : 214, 'fontFamily' : 'Arial', 'fontWeight' : 400, 'fontSize' : 14, 'lineHeight' : 1.4, 'fontColor' : '#000000', 'views' : { '0' : true } }, { 'type' : 'text', 'content' : getPrice(obj.price), 'x' : 12, 'y' : 232, 'fontFamily' : 'Arial', 'fontWeight' : 800, 'fontSize' : 12, 'lineHeight' : 1.4, 'fontColor' : '#000000', 'views' : { '0' : true } }, { 'type' : 'text', 'content' : 'On sale!', 'x' : getSalePositioning(getPrice(obj.price)), 'y' : 233, 'fontFamily' : 'Arial', 'fontWeight' : 400, 'fontSize' : 10, 'lineHeight' : 1.4, 'fontColor' : '#bf2b2b', 'views' : { '0' : true } }, { 'type' : 'rect', 'width' : 90, 'height' : 34, 'x' : 202, 'y' : 208, 'fill' : 'rgb(191, 43, 43)', 'views' : { '0' : true } }, //White box { 'type' : 'text', 'content' : 'See More', 'x' : 212, 'y' : 214, 'fontFamily' : 'Arial', 'fontWeight' : 600, 'fontSize' : 16, 'lineHeight' : 1.4, 'fontColor' : '#ffffff', 'views' : { '0' : true } }, ] }; return o; function getSalePositioning(s){ return getTextWidth(s) + 16; } function getPrice(p){ return '$' + p; } function getProductName(name){ if(isDefined(name) && name.length >= 24) return name.substr(0, 21) + '...'; else return name; } }; }(); function getTextWidth(s){ return context.measureText(s).width; } } function TextAdTemplate(){ var canvas = document.createElement('canvas'), context = canvas.getContext('2d'), fontStyle = '700 32px Lato'; context.font = fontStyle; this.getTextWidth = getTextWidth; this['300x250'] = function(){ return function(obj){ var width = 300, height = 250, buttonRects = getButtonRects(), o = { 'config' : { 'width' : width, 'height' : height, 'views' : [ { 'title' : 'Main', 'managerView' : true, 'save' : true, 'key' : 'jsUpgrade' } ], 'updateItems' : { 2 : { 'title' : 'Title', 'key' : 'adTitle', 'set' : 'content', 'type' : 'input' }, 3 : { 'title' : 'Text', 'key' : 'adText', 'set' : 'content', 'type' : 'input' }, 4 : { 'title' : 'Button', 'key' : 'buttonText', 'set' : ['width', 'x'], 'fn' : getButtonPositioning, 'target' : 5 }, 5 : { 'title' : 'Button Text', 'key' : 'buttonText', 'set' : ['content', 'x'], 'type' : 'input', 'fn' : getTextButtonValues } } }, 'template' : [ { 'type' : 'rect', 'width' : 300, 'height' : 191, 'x' : 0, 'y' : 0, 'fill' : 'rgb(21, 141, 212)', 'views' : { '0' : true, '1' : true } }, { 'type' : 'rect', 'width' : 300, 'height' : 59, 'x' : 0, 'y' : 191, 'fill' : 'rgb(51, 51, 51)', 'views' : { '0' : true } }, //White box { 'type' : 'text', 'content' : obj.adTitle, 'x' : 18, 'y' : 21, 'fontFamily' : 'Lato', 'fontWeight' : 700, 'fontSize' : 32, 'lineHeight' : 1.4, 'fontColor' : '#ffffff', 'views' : { '0' : true } }, { 'type' : 'postText', 'content' : obj.adText, 'x' : 22, 'y' : 76, 'maxWidth' : 252, 'fontFamily' : 'Lato', 'fontWeight' : 300, 'fontSize' : 20, 'lineHeight' : 1.4, 'fontColor' : '#ffffff', 'views' : { '0' : true } }, { 'type' : 'roundedRect', 'width' : buttonRects.buttonWidth, 'height' : 31, 'x' : buttonRects.buttonX, 'y' : 205, 'fill' : 'rgb(255, 138, 0)', 'radius' : 3, 'stroke' : false, 'views' : { '0' : true, '1' : true } }, { 'type' : 'postText', 'content' : getButtonText(obj.buttonText), 'x' : buttonRects.textX, 'y' : 208, 'maxWidth' : 180, 'fontFamily' : 'Lato', 'fontWeight' : 500, 'fontSize' : 15, 'lineHeight' : 1.4, 'fontColor' : '#ffffff', 'views' : { '0' : true } } ] }; return o; function getDotComPositioning(){ return 18 + getTitleWidth() + 2; } function getProductName(name){ if(isDefined(name) && name.length >= 24) return name.substr(0, 21) + '...'; else return name; } function getButtonText(s){ var v = isDefined(s) ? s : 'Button Text'; return '> ' + v.toUpperCase(); } function getButtonPositioning(){ var o = getButtonRects(); return { 'x' : o.buttonX, 'width' : o.buttonWidth }; } function getTextButtonValues(){ return { 'x' : getButtonRects().textX, 'content' : getButtonText(obj.buttonText) }; } function getButtonRects(){ var tw = getButtonTextWidth(), padding = 18, w = tw + (18 * 2), bX = (width - w) / 2, tX = bX + padding; return { 'buttonX' : bX, 'buttonWidth' : w, 'textX' : tX }; } function getButtonTextWidth(){ context.font = '500 16px Lato'; return getTextWidth(getButtonText(obj.buttonText)); } function getTitleWidth(){ context.font = '700 32px Lato'; return getTextWidth(obj.adTitle); } }; }(); function getTextWidth(s){ return context.measureText(s).width; } } function CreateDynamicAdsTemplate(){ var header = '

Dynamic Ads - Create

'; function stepOne(){ var tmplContainer = '

{{ buttonText }}'; return '

Step 1.) Select your dynamic template

{{# adTemplates }}' + tmplContainer + '{{/ adTemplates }}

'; } function stepTwo(){ var adGroup = '

Ad group:

', logo = '

Logo area image:

Select file', buttonText = '

Button text:

', backupBanner = '

Backup banner:

Select file', backupLandingUrl = '

Backup landing page url:

', customize = '

Step 2.) Customize your dynamic template

' + adGroup + logo + buttonText + backupBanner + backupLandingUrl + advancedAdsTemplate() + '', preview = '

Preview ad:

' + adTemplate() + '', footer = ''; return '

' + customize + preview + footer + '

'; } function adTemplate(){ var logo = '

Logo area ({{ logoWidth }}x{{ logoHeight }})

', product = '

', productName = '

Product name here{{# extendedName }} Product name extended...{{/ extendedName }}

', productPrice = '

Product price here

', content = '

' + productName + productPrice + '

', preImageContent = '{{# preImageContent }}' + content + '{{/ preImageContent }}', postImageContent = '{{# postImageContent }}' + content + '{{/ postImageContent }}', footerContent = '{{# footerContent }}' + content + '{{/ footerContent }}', footer = ''; return '' + logo + preImageContent + product + postImageContent + footer + ''; } function adTemplatePreview(){ var logo = '

', pContent = '

Product Name

$Product Price

', preic = '{{# preImageContent }}' + pContent + '{{/ preImageContent }}', product = '

', posic = '{{# postImageContent }}' + pContent + '{{/ postImageContent }}', footerBtn = '

{{ buttonText }}

', footer = ''; return '' + logo + preic + product + posic + footer + ''; } this.index = '

' + header + '

'; this.stepOne = stepOne(); this.stepTwo = stepTwo(); this.adTemplate = adTemplate(); this.adTemplatePreview = adTemplatePreview(); this.hidden = ''; } function advancedAdsTemplate() { var availableMacros = '

Available Macros:

{{AdID}} - Ad ID {{CampaignID}} - Campaign ID {{UUID}} - User ID {{Width}} - Width of ad {{Height}} - Height of Ad {{Size}} - Width x Height {{Domain}} - Impression Domain {{PageURL}} - Impression Page {{Referrer}} - Referring URL {{Cachebuster}} {{ClickURL}} - Ad Click URL {{EncodedClickURL}} ', impTrack = '

Imp Tracker:

', clickTrack = '

Click Tracker:

'; return '

Advanced:

' + availableMacros + impTrack + clickTrack + '

'; } function DomainListsTemplate(){ var type = '

List Type:

', domains = '

Domains:

', header = '

New List

', edit = 'Edit', del = '', manageRow = '

Manage Domain Lists

' + edit + del + '

', manageTable = '

'; this.index = '

' + header + manageRow + manageTable + '

'; this.fresh = '

Oh no! It appears that we have no domain lists here. We should add some. Try it out - it\'s simple!

'; this.edit = '

List Name:

' + type + domains; }