From 9b93b30ce467858b0b6401188f4acc6ba9979db8 Mon Sep 17 00:00:00 2001 From: Robbie Antenesse Date: Tue, 4 Jun 2019 11:11:58 -0600 Subject: [PATCH] Add simple text ads shuffled into words --- ads.json | 29 +++++++++++++++++++++++++++++ src/constants.js | 2 ++ src/index.js | 5 +++-- src/js/ads.js | 37 +++++++++++++++++++++++++++++++++++++ src/js/render.js | 13 ++++++------- src/js/view/index.js | 3 ++- src/js/view/render.js | 10 ++++++---- 7 files changed, 85 insertions(+), 14 deletions(-) create mode 100644 ads.json create mode 100644 src/js/ads.js diff --git a/ads.json b/ads.json new file mode 100644 index 0000000..8313a79 --- /dev/null +++ b/ads.json @@ -0,0 +1,29 @@ +[ + { + "header": "Do You Like Lexiconga?", + "body": "If you enjoy Lexiconga, you can help contribute to keeping it online and adding new features. Your donations are much appreciated!", + "cta": "Buy Me a Coffee!", + "link": "https://buymeacoffee.com/robbieantenesse", + "start": "June 1, 2019", + "end": "August 1, 2099", + "isPriority": false + }, + { + "header": "Support Lexiconga", + "body": "If you enjoy Lexiconga, you can help contribute to keeping it online and adding new features. Your donations are much appreciated!", + "cta": "Buy Me a Coffee!", + "link": "https://buymeacoffee.com/robbieantenesse", + "start": "June 1, 2019", + "end": "August 1, 2099", + "isPriority": false + }, + { + "header": "A New Way to Role-Play", + "body": "The GUTS+ System is a tabletop role-playing game system that aims to be approachable enough for newcomers and flexible enough for any setting.", + "cta": "Learn to Play for Free!", + "link": "https://guts.plus", + "start": "June 1, 2019", + "end": "January 1, 2020", + "isPriority": false + } +] \ No newline at end of file diff --git a/src/constants.js b/src/constants.js index 617e2a6..4ab6656 100644 --- a/src/constants.js +++ b/src/constants.js @@ -60,6 +60,8 @@ export const DEFAULT_SETTINGS = { defaultTheme: 'default', }; +export const DISPLAY_AD_EVERY = 10; + export const DEFAULT_PAGE_SIZE = 50; export const LOCAL_STORAGE_KEY = 'dictionary'; diff --git a/src/index.js b/src/index.js index b83d7b9..d7800aa 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,7 @@ import { renderAll } from './js/render'; import { hasToken } from './js/utilities'; import { loadDictionary } from './js/dictionaryManagement'; import { loadSettings } from './js/settings'; +import { setupAds } from './js/ads'; function initialize() { loadDictionary(); @@ -14,8 +15,8 @@ function initialize() { account.loginWithToken(); }); } - - renderAll(); + + setupAds().then(() => renderAll()); } window.onload = (function (oldLoad) { diff --git a/src/js/ads.js b/src/js/ads.js new file mode 100644 index 0000000..66de56a --- /dev/null +++ b/src/js/ads.js @@ -0,0 +1,37 @@ +import { DISPLAY_AD_EVERY } from '../constants.js'; + +export function setupAds() { + return import('../../ads.json').then(ads => { + const shuffle = (a, b) => Math.random() > 0.5 ? 1 : -1; + const priority = ads.filter(ad => isActive(ad) && ad.isPriority).sort(shuffle); + const regular = ads.filter(ad => isActive(ad) && !ad.isPriority).sort(shuffle); + window.ads = [...priority, ...regular]; + }); +} + +function isActive(ad) { + const date = new Date(); + return date >= new Date(ad.start) && date < new Date(ad.end); +} + +export function renderAd(wordPosition) { + if (window.hasOwnProperty('ads') && window.ads) { + if (wordPosition % DISPLAY_AD_EVERY === 3) { + const adIndex = Math.floor(wordPosition / DISPLAY_AD_EVERY) % window.ads.length; + const ad = window.ads[adIndex]; + return `
+
+

${ad.header}

+
+
+
${ad.body}
+
+ ${ad.cta} +
+
+
`; + } + } + + return ''; +} \ No newline at end of file diff --git a/src/js/render.js b/src/js/render.js index d6ab919..5395ca2 100644 --- a/src/js/render.js +++ b/src/js/render.js @@ -16,6 +16,7 @@ import { } from './setupListeners'; import { getPaginationData } from './pagination'; import { getOpenEditForms, parseReferences } from './wordManagement'; +import { renderAd } from './ads'; export function renderAll() { renderTheme(); @@ -181,23 +182,21 @@ export function renderWords() { // const { pageStart, pageEnd } = getPaginationData(words); // words.slice(pageStart, pageEnd).forEach(originalWord => { - words.forEach(originalWord => { - let detailsMarkdown = removeTags(originalWord.details); - const references = detailsMarkdown.match(/\{\{.+?\}\}/g); - if (references && Array.isArray(references)) { - detailsMarkdown = parseReferences(detailsMarkdown, references); - } + words.forEach((originalWord, displayIndex) => { const word = highlightSearchTerm({ name: removeTags(originalWord.name), pronunciation: removeTags(originalWord.pronunciation), partOfSpeech: removeTags(originalWord.partOfSpeech), definition: removeTags(originalWord.definition), - details: detailsMarkdown, + details: parseReferences(removeTags(originalWord.details)), wordId: originalWord.wordId, }); const homonymnNumber = getHomonymnNumber(originalWord); const shareLink = window.currentDictionary.hasOwnProperty('externalID') ? window.location.pathname + window.currentDictionary.externalID + '/' + word.wordId : ''; + + wordsHTML += renderAd(displayIndex); + wordsHTML += `

${word.name}${homonymnNumber > 0 ? ' ' + homonymnNumber.toString() + '' : ''}

diff --git a/src/js/view/index.js b/src/js/view/index.js index 2fec08a..4cacb87 100644 --- a/src/js/view/index.js +++ b/src/js/view/index.js @@ -1,5 +1,6 @@ import { renderAll } from './render'; import setupListeners from './setupListeners'; +import { setupAds } from '../ads'; // import setupListeners, { setupSearchFilters } from './js/setupListeners'; // import { renderAll } from './js/render'; @@ -8,7 +9,7 @@ import setupListeners from './setupListeners'; // import { loadSettings } from './js/settings'; function initialize() { - renderAll(); + setupAds().then(() => renderAll()); setupListeners(); } diff --git a/src/js/view/render.js b/src/js/view/render.js index e17c3c6..3dcbabc 100644 --- a/src/js/view/render.js +++ b/src/js/view/render.js @@ -6,6 +6,7 @@ import { showSection } from '../displayToggles'; import { setupSearchFilters, setupInfoModal } from './setupListeners'; import { parseReferences } from '../wordManagement'; import { renderTheme } from '../render'; +import { renderAd } from '../ads'; export function renderAll() { renderTheme(); @@ -139,18 +140,19 @@ export function renderWords() {
`; } - words.forEach(originalWord => { - let detailsMarkdown = originalWord.details; - detailsMarkdown = parseReferences(detailsMarkdown); + words.forEach((originalWord, displayIndex) => { const word = highlightSearchTerm({ name: removeTags(originalWord.name), pronunciation: removeTags(originalWord.pronunciation), partOfSpeech: removeTags(originalWord.partOfSpeech), definition: removeTags(originalWord.definition), - details: detailsMarkdown, + details: parseReferences(removeTags(originalWord.details)), wordId: originalWord.wordId, }); const shareLink = window.location.pathname + (window.location.pathname.match(new RegExp(word.wordId + '$')) ? '' : '/' + word.wordId); + + wordsHTML += renderAd(displayIndex); + wordsHTML += `

${word.name}