Merge pull request #34 from basiclines/develop

Add Display Network implementation

Author: basiclines

src/App.css

@@ -46,8 +46,8 @@
 	--color-separator: rgba(0, 0, 0, 0.12);
 }
 
-body { text-align: left; }
-root-ui { transition: opacity 0.05s linear; display: block; }
+body { text-align: left; overflow: hidden; }
+root-ui { transition: opacity 0.05s linear; display: block; position: relative; height: 539px; }
 root-ui[notready] { opacity: 0; pointer-events: none; }
 
 .c-icon {

src/App.js

@@ -9,18 +9,23 @@ import Element from 'src/ui/Element'
 import 'src/ui/components/toolbar/ToolbarComponent'
 import 'src/ui/views/form/FormView'
 import 'src/ui/views/preferences/PreferencesView'
+import 'src/ui/components/display/DisplayComponent'
 
 
 class ui extends Element {
 
 	beforeMount() {
 		window.addEventListener('message', e => {
 			let msg = event.data.pluginMessage
-			if (msg.type == 'init') {
+			if (msg.type == 'init-hidden' || msg.type == 'init') {
 				this.data.preferences = msg.preferences
 				Tracking.setup(WP_AMPLITUDE_KEY, msg.UUID)
 				Tracking.track('openPlugin', { cmd: msg.cmd })
 			}
+			
+			if (msg.type == 'init') {
+				this.insertDisplay(msg.AD_LAST_SHOWN_DATE)
+			}
 		})
 
 		Router.setup({
@@ -33,6 +38,13 @@ class ui extends Element {
 		Router.on('change:url', url => this.showActiveView(url))
 	}
 
+	insertDisplay(lastShownDate) {
+		let elem = document.createElement('c-display')
+		elem.setAttribute('lastshowndate', lastShownDate)
+		elem.setAttribute('hidden', '')				
+		document.body.insertBefore(elem, document.body.querySelector('root-ui'))
+	}
+	
 	showActiveView(url) {
 		let view = url.replace('#', '')
 		this.findAll('[data-view]').forEach(view => view.setAttribute('hidden', ''))

src/Core.js

@@ -148,11 +148,13 @@ function cmdTidy(xSpacing, ySpacing, wrapInstances) {
 Promise.all([
 	figma.clientStorage.getAsync('UUID'),
 	figma.clientStorage.getAsync('preferences'),
+	figma.clientStorage.getAsync('AD_LAST_SHOWN_DATE'),
 	figma.clientStorage.getAsync('spacing') // legacy
 ]).then(values => {
 	let UUID = values[0]
 	let preferences = values[1]
-	let spacing = values[2]
+	let AD_LAST_SHOWN_DATE = values[2] || 572083200 // initial date, if no date was saved previously
+	let spacing = values[3]
 
 	let SPACING = { x: 100, y: 200 }
 	let START_NAME = '000'
@@ -180,7 +182,12 @@ Promise.all([
 		preferences = PREFERENCES
 	}
 
-	figma.ui.postMessage({ type: 'init', UUID: UUID, cmd: cmd, preferences: preferences })
+	figma.ui.postMessage({
+		type: 'init-hidden',
+		UUID: UUID,
+		cmd: cmd,
+		preferences: preferences
+	})
 
 	// Command triggered by user
 	if (cmd == 'rename') {
@@ -212,7 +219,13 @@ Promise.all([
 	if (cmd == 'options') {
 		// OPEN UI
 		figma.showUI(__html__, { width: 320, height: 540 })
-		figma.ui.postMessage({ type: 'init', UUID: UUID, cmd: cmd, preferences: preferences })
+		figma.ui.postMessage({
+			type: 'init',
+			UUID: UUID,
+			cmd: cmd,
+			preferences: preferences,
+			AD_LAST_SHOWN_DATE: AD_LAST_SHOWN_DATE
+		})
 		figma.ui.postMessage({ type: 'selection', selection: figma.currentPage.selection })
 
 		figma.on('selectionchange', () => {
@@ -235,6 +248,10 @@ Promise.all([
 				preferences = msg.preferences
 				figma.clientStorage.setAsync('preferences', preferences)
 				figma.notify('Preferences saved')
+			} else
+			if (msg.type === 'displayImpression') {
+				figma.ui.resize(320, 540+124)
+				figma.clientStorage.setAsync('AD_LAST_SHOWN_DATE', Date.now())
 			}
 		}
 	}

src/ui/components/display/DisplayComponent.css

@@ -0,0 +1,12 @@
+c-display[hidden] { display: block!important; height: 0; padding: 0 16px; opacity: 0.4; border: none; pointer-events: none; }
+
+c-display { display: block; padding: 8px 16px 16px; background: var(--color-decorator-soft); border-bottom: solid 1px var(--color-decorator-regular); transition: all 0.25s ease-out; }
+c-display picture { position: relative; width: 48px; height: 48px; border-radius: 8px; margin-right: 16px; float: left; overflow: hidden; }
+c-display picture img { width: 100%;  }
+c-display picture:after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border: solid 1px var(--color-decorator-regular); border-radius: 8px; }
+
+c-display section { overflow: hidden; }
+c-display em { display: block; font: var(--type-small-normal); color: var(--color-text-tertiary); margin: 0 0 8px; }
+c-display h1 { font: var(--type-large-bold); line-height: 16px; color: var(--color-text-primary); margin-bottom: 4px; }
+c-display p { font: var(--type-medium-normal); color: var(--color-text-secondary); margin-bottom: 8px; }
+c-display a { font: var(--type-medium-medium); color: var(--color-interactive-positive); }

src/ui/components/display/DisplayComponent.js

@@ -0,0 +1,55 @@
+import './DisplayComponent.css'
+import Element from 'src/ui/Element'
+import DisplayNetwork from 'src/utils/DisplayNetwork'
+import Tracking from 'src/utils/Tracking'
+
+const PLUGIN_NAME = 'super_tidy'
+
+class DisplayComponent extends Element {
+	
+	beforeMount() {
+		// avoid display without proper data
+		if (this.attrs.lastshowndate == 'undefined') return
+		
+		DisplayNetwork.getAvailableAd(this.attrs.lastshowndate)
+		.then(ad => {
+			// if we have an available ad, then render and display it
+			if (!!ad) {
+				ad.link = ad.link + '?utm_source=figma&utm_medium=partner&utm_campaign='+PLUGIN_NAME
+				this.data.ad = ad
+				this.showDisplay()
+			}
+		})
+	}
+	
+	showDisplay() {
+		this.removeAttribute('hidden')		
+		Tracking.track('displayImpression', { campaign: this.data.ad.tracking })
+		parent.postMessage({ pluginMessage: { type: 'displayImpression' } }, '*')
+	}
+	
+	bind() {
+		this.addEventListener('click', e => {
+			if (e.target.getAttribute('data-trigger') == 'cta') {
+				Tracking.track('displayClick', { campaign: this.data.ad.tracking })
+			}
+		})
+	}
+	
+	render() {
+		if (!this.data.ad) return
+		
+		let ad = this.data.ad
+		return ` 
+			<em>Sponsored</em>
+			<picture><img src="${ad.icon}" /></picture>
+			<section>
+				<h1>${ad.headline}</h1>
+				<p>${ad.description}</p>
+				<a data-trigger="cta" href="${ad.link}" target="_blank">${this.data.ad.cta}</a>
+			</section>
+		`
+	}
+}
+
+customElements.define('c-display', DisplayComponent)

src/utils/DisplayNetwork.js

@@ -0,0 +1,69 @@
+let singleton = null
+const DAILY_INTERVAL = 86400000
+const WEEKLY_INTERVAL = DAILY_INTERVAL*7
+const MONTHLY_INTERVAL = WEEKLY_INTERVAL*4
+
+class DisplayNetwork {
+	
+	constructor() {
+		this.root = 'https://figma-plugins-display-network.netlify.app/api.json'
+		this.timeStampNow = Date.now()
+		
+		if (!singleton) singleton = this
+		return singleton
+	}
+	
+	getAds() {
+		return fetch(this.root, { method: 'GET' })
+	}
+	
+	getAvailableAd(lastShownDate) {
+		return new Promise((resolve, reject) => {
+			this.getAds().then(response => {
+				response.json().then(ads => {
+					
+					let availableAds = ads.reduce((prev, current) => {
+						if (this.checkImpressionAvailability(parseInt(lastShownDate), current)) {
+							prev.push(current)
+						}
+						return prev
+					}, [])
+					
+					resolve(availableAds[this.getRandomInt(0, availableAds.length)])
+				})
+			}).catch(error => console.log('Error getAvailableAd', error))
+		})
+	}
+	
+	getRandomInt(min, max) {
+		min = Math.ceil(min);
+		max = Math.floor(max);
+		return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
+	}
+	
+	getAdInterval(ad) {
+		if (WP_ENV == 'development') return 1000
+		
+		let interval = 0
+		switch (ad.impression_interval) {
+				case 'daily': interval = DAILY_INTERVAL
+				break;
+				case 'weekly': interval = WEEKLY_INTERVAL
+				break;
+				case 'monthly': interval = MONTHLY_INTERVAL
+				break;
+		}
+		
+		return interval
+	}
+	
+	checkImpressionAvailability(lastShownDate, ad) {
+		let adInterval = this.getAdInterval(ad)
+		let availableTimeWindow = (!lastShownDate || lastShownDate + adInterval < this.timeStampNow)
+		
+		return availableTimeWindow
+	}
+		
+}
+
+export default new DisplayNetwork()