From 25ae47dab24167af54e146fb1a2c4d697a35cd0f Mon Sep 17 00:00:00 2001 From: Viktor Baranov Date: Mon, 2 Aug 2021 15:12:16 +0300 Subject: [PATCH] in-house ad refactoring --- apps/block_scout_web/assets/js/lib/ad.js | 51 ++++++++++++------- .../assets/js/lib/autocomplete.js | 12 ++--- .../assets/js/lib/custom_ad.json | 1 + apps/block_scout_web/assets/js/lib/text_ad.js | 4 +- .../block_scout_web/assets/js/pages/layout.js | 1 - apps/block_scout_web/assets/webpack.config.js | 3 +- .../advertisement/text_ad/index.html.eex | 4 +- .../templates/layout/app.html.eex | 2 +- 8 files changed, 45 insertions(+), 33 deletions(-) create mode 100644 apps/block_scout_web/assets/js/lib/custom_ad.json diff --git a/apps/block_scout_web/assets/js/lib/ad.js b/apps/block_scout_web/assets/js/lib/ad.js index 3c2b3d4d85..b84d77e23e 100644 --- a/apps/block_scout_web/assets/js/lib/ad.js +++ b/apps/block_scout_web/assets/js/lib/ad.js @@ -1,4 +1,5 @@ import $ from 'jquery' +import customAds from './custom_ad' function countImpressions (impressionUrl) { if (impressionUrl) { @@ -8,57 +9,73 @@ function countImpressions (impressionUrl) { function showAd () { const domainName = window.location.hostname - if (domainName === 'blockscout.com') { + if (domainName === 'test.blockscout.com') { $('.js-ad-dependant-mb-2').addClass('mb-2') $('.js-ad-dependant-mb-3').addClass('mb-3') - $('.js-ad-dependant-pt').addClass('pt-4') - $('.js-ad-dependant-pt').removeClass('pt-5') return true } else { $('.js-ad-dependant-mb-2').removeClass('mb-2') $('.js-ad-dependant-mb-3').removeClass('mb-3') + return false + } +} + +function adjustPaddingForTextAd (showAd, data) { + if (showAd && data) { + $('.js-ad-dependant-pt').addClass('pt-4') + $('.js-ad-dependant-pt').removeClass('pt-5') + } else { $('.js-ad-dependant-pt').addClass('pt-5') $('.js-ad-dependant-pt').removeClass('pt-4') - return false } } -function getTextAdData (customAds) { +function getTextAdData () { return new Promise((resolve) => { - if (showAd()) { + const displayAd = showAd() + if (displayAd) { $.get('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', function (data) { if (!data) { - if (customAds) { + if (customAds && customAds.length > 0) { try { - data = JSON.parse(customAds) - const ind = getRandomInt(0, data.length) - resolve(data[ind]) + const ind = getRandomInt(0, customAds.length) + const inHouse = true + adjustPaddingForTextAd(displayAd, true) + resolve({ data: customAds[ind], inHouse: inHouse }) } catch (_e) { - resolve(null) + adjustPaddingForTextAd(displayAd, false) + resolve({ data: null, inHouse: null }) } } else { - resolve(null) + adjustPaddingForTextAd(displayAd, false) + resolve({ data: null, inHouse: null }) } } else { - resolve(data) + const inHouse = false + adjustPaddingForTextAd(displayAd, true) + resolve({ data: data, inHouse: inHouse }) } }) } else { - resolve(null) + adjustPaddingForTextAd(displayAd, false) + resolve({ data: null, inHouse: null }) } }) } -function fetchTextAdData (customAds) { +function fetchTextAdData () { if (showAd()) { - getTextAdData(customAds) - .then(data => { + getTextAdData() + .then(({ data, inHouse }) => { if (data) { + const prefix = inHouse ? 'Featured' : 'Sponsored' const { ad: { name, description_short: descriptionShort, thumbnail, url, cta_button: ctaButton, impressionUrl } } = data $('.ad-name').text(name) $('.ad-short-description').text(descriptionShort) $('.ad-cta-button').text(ctaButton) $('.ad-url').attr('href', url) + $('.ad-prefix').text(prefix) + $('.ad').show() const urlObject = new URL(url) if (urlObject.hostname === 'nifty.ink') { $('.ad-img-url').replaceWith('🎨') diff --git a/apps/block_scout_web/assets/js/lib/autocomplete.js b/apps/block_scout_web/assets/js/lib/autocomplete.js index bd834a7c32..91abe306e2 100644 --- a/apps/block_scout_web/assets/js/lib/autocomplete.js +++ b/apps/block_scout_web/assets/js/lib/autocomplete.js @@ -2,8 +2,6 @@ import AutoComplete from '@tarekraafat/autocomplete.js/dist/autoComplete.js' import { getTextAdData, fetchTextAdData } from './ad.js' import { DateTime } from 'luxon' -const customAds = process.env.CUSTOM_ADS - const placeHolder = 'Search by address, token symbol, name, transaction hash, or block number' const dataSrc = async (query, id) => { try { @@ -30,8 +28,8 @@ const dataSrc = async (query, id) => { const resultsListElement = (list, data) => { const info = document.createElement('p') const adv = ` -
- Sponsored: - + ` info.innerHTML = adv if (data.results.length > 0) { @@ -42,7 +40,7 @@ const resultsListElement = (list, data) => { list.prepend(info) - fetchTextAdData(customAds) + fetchTextAdData() } const searchEngine = (query, record) => { if (record.name.toLowerCase().includes(query.toLowerCase()) || @@ -139,8 +137,8 @@ const openOnFocus = (event, type) => { autoCompleteJSMobile.start(query) } } else { - getTextAdData(customAds) - .then(adData => { + getTextAdData() + .then(({ data: adData, inHouse: _inHouse }) => { if (adData) { if (type === 'desktop') { autoCompleteJS.start('###') diff --git a/apps/block_scout_web/assets/js/lib/custom_ad.json b/apps/block_scout_web/assets/js/lib/custom_ad.json new file mode 100644 index 0000000000..0637a088a0 --- /dev/null +++ b/apps/block_scout_web/assets/js/lib/custom_ad.json @@ -0,0 +1 @@ +[] \ No newline at end of file diff --git a/apps/block_scout_web/assets/js/lib/text_ad.js b/apps/block_scout_web/assets/js/lib/text_ad.js index 10660cee24..94bd22a3ff 100644 --- a/apps/block_scout_web/assets/js/lib/text_ad.js +++ b/apps/block_scout_web/assets/js/lib/text_ad.js @@ -1,10 +1,8 @@ import $ from 'jquery' import { showAd, fetchTextAdData } from './ad.js' -const customAds = process.env.CUSTOM_ADS - $(function () { if (showAd()) { - fetchTextAdData(customAds) + fetchTextAdData() } }) diff --git a/apps/block_scout_web/assets/js/pages/layout.js b/apps/block_scout_web/assets/js/pages/layout.js index 9d20dc48d9..3d896fe730 100644 --- a/apps/block_scout_web/assets/js/pages/layout.js +++ b/apps/block_scout_web/assets/js/pages/layout.js @@ -22,7 +22,6 @@ $(document).on('keyup', function (event) { $('.main-search-autocomplete').on('keyup', function (event) { if (event.key === 'Enter') { - console.log($('li[id^="autoComplete_result_"]')) var selected = false $('li[id^="autoComplete_result_"]').each(function () { if ($(this).attr('aria-selected')) { diff --git a/apps/block_scout_web/assets/webpack.config.js b/apps/block_scout_web/assets/webpack.config.js index dc077d364e..f00955a277 100644 --- a/apps/block_scout_web/assets/webpack.config.js +++ b/apps/block_scout_web/assets/webpack.config.js @@ -171,8 +171,7 @@ const appJs = ), new ContextReplacementPlugin(/moment[\/\\]locale$/, /en/), new webpack.DefinePlugin({ - 'process.env.SOCKET_ROOT': JSON.stringify(process.env.SOCKET_ROOT), - 'process.env.CUSTOM_ADS': JSON.stringify(process.env.CUSTOM_ADS) + 'process.env.SOCKET_ROOT': JSON.stringify(process.env.SOCKET_ROOT) }), new webpack.ProvidePlugin({ process: 'process/browser', diff --git a/apps/block_scout_web/lib/block_scout_web/templates/advertisement/text_ad/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/advertisement/text_ad/index.html.eex index 1db3412a38..85c6f8add5 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/advertisement/text_ad/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/advertisement/text_ad/index.html.eex @@ -1,4 +1,4 @@ -
-Sponsored: - + \ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex index 1117ef0410..0137961018 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex @@ -188,7 +188,7 @@ <% end %> <%= render BlockScoutWeb.LayoutView, "_topnav.html", assigns %> -
+
<%= @inner_content %>