pull/4464/head
Viktor Baranov 3 years ago
parent 825adbbfa3
commit 1d4c7969b4
  1. 48
      apps/block_scout_web/assets/js/lib/ad.js
  2. 8
      apps/block_scout_web/assets/js/lib/autocomplete.js
  3. 10
      apps/block_scout_web/assets/js/lib/text_ad.js
  4. 42
      apps/block_scout_web/assets/webpack.config.js
  5. 6
      apps/block_scout_web/lib/block_scout_web/templates/advertisement/text_ad/index.html.eex
  6. 2
      apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex

@ -1,13 +1,9 @@
import $ from 'jquery'
$(function () {
if (showAd()) {
fetchTextAdData()
}
})
function countImpressions (impressionUrl) {
$.get(impressionUrl)
if (impressionUrl) {
$.get(impressionUrl)
}
}
function showAd () {
@ -27,11 +23,25 @@ function showAd () {
}
}
function getTextAdData () {
function getTextAdData (customAds) {
return new Promise((resolve) => {
if (showAd()) {
$.get('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', function (data) {
resolve(data)
if (!data) {
if (customAds) {
try {
data = JSON.parse(customAds)
const ind = getRandomInt(0, data.length)
resolve(data[ind])
} catch (_e) {
resolve(null)
}
} else {
resolve(null)
}
} else {
resolve(data)
}
})
} else {
resolve(null)
@ -39,24 +49,32 @@ function getTextAdData () {
})
}
function fetchTextAdData () {
function fetchTextAdData (customAds) {
if (showAd()) {
getTextAdData()
getTextAdData(customAds)
.then(data => {
if (data) {
const { ad: { name, description_short: descriptionShort, thumbnail, url, cta_button: ctaButton, impressionUrl } } = data
$('.ad').removeClass('d-none')
$('.ad-name').text(name)
$('.ad-short-description').text(descriptionShort)
$('.ad-cta-button').text(ctaButton)
$('.ad-url').attr('href', url)
$('.ad-img-url').attr('src', thumbnail)
const urlObject = new URL(url)
if (urlObject.hostname === 'nifty.ink') {
$('.ad-img-url').replaceWith('🎨')
} else {
$('.ad-img-url').attr('src', thumbnail)
}
countImpressions(impressionUrl)
} else {
$('.ad').addClass('d-none')
}
})
}
}
function getRandomInt (min, max) {
min = Math.ceil(min)
max = Math.floor(max)
return Math.floor(Math.random() * (max - min)) + min
}
export { showAd, getTextAdData, fetchTextAdData }

@ -2,6 +2,8 @@ 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 {
@ -28,7 +30,7 @@ const dataSrc = async (query, id) => {
const resultsListElement = (list, data) => {
const info = document.createElement('p')
const adv = `
<div class="ad mb-3 d-none">
<div class="ad mb-3">
Sponsored: <img class="ad-img-url" width=20 height=20 /> <b><span class="ad-name"></span></b> - <span class="ad-short-description"></span> <a class="ad-url"><b><span class="ad-cta-button"></span></a></b>
</div>`
info.innerHTML = adv
@ -40,7 +42,7 @@ const resultsListElement = (list, data) => {
list.prepend(info)
fetchTextAdData()
fetchTextAdData(customAds)
}
const searchEngine = (query, record) => {
if (record.name.toLowerCase().includes(query.toLowerCase()) ||
@ -137,7 +139,7 @@ const openOnFocus = (event, type) => {
autoCompleteJSMobile.start(query)
}
} else {
getTextAdData()
getTextAdData(customAds)
.then(adData => {
if (adData) {
if (type === 'desktop') {

@ -0,0 +1,10 @@
import $ from 'jquery'
import { showAd, fetchTextAdData } from './ad.js'
const customAds = process.env.CUSTOM_ADS
$(function () {
if (showAd()) {
fetchTextAdData(customAds)
}
})

@ -32,39 +32,6 @@ const jsOptimizationParams = {
parallel: true
}
const autocompleteJs = {
entry: {
autocomplete: './js/lib/autocomplete.js',
},
output: {
filename: '[name].min.js',
path: path.resolve(__dirname, '../priv/static/js')
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
}
]
}
]
},
optimization: {
minimizer: [
new TerserJSPlugin(jsOptimizationParams),
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '../css/autocomplete.css'
})
]
}
const dropzoneJs = {
entry: {
dropzone: './js/lib/dropzone.js',
@ -126,7 +93,9 @@ const appJs =
'main-page': './css/main-page.scss',
'tokens': './js/pages/token/search.js',
'ad': './js/lib/ad.js',
'banner': './js/lib/banner.js'
'text_ad': './js/lib/text_ad.js',
'banner': './js/lib/banner.js',
'autocomplete': './js/lib/autocomplete.js',
},
output: {
filename: '[name].js',
@ -202,7 +171,8 @@ const appJs =
),
new ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
new webpack.DefinePlugin({
'process.env.SOCKET_ROOT': JSON.stringify(process.env.SOCKET_ROOT)
'process.env.SOCKET_ROOT': JSON.stringify(process.env.SOCKET_ROOT),
'process.env.CUSTOM_ADS': JSON.stringify(process.env.CUSTOM_ADS)
}),
new webpack.ProvidePlugin({
process: 'process/browser',
@ -213,4 +183,4 @@ const appJs =
const viewScripts = glob.sync('./js/view_specific/**/*.js').map(transpileViewScript)
module.exports = viewScripts.concat(appJs, autocompleteJs, dropzoneJs)
module.exports = viewScripts.concat(appJs, dropzoneJs)

@ -1,4 +1,4 @@
<script defer data-cfasync="false" src="<%= static_path(@conn, "/js/ad.js") %>"></script>
<div class="ad mb-3 d-none">
<script defer data-cfasync="false" src="<%= static_path(@conn, "/js/text_ad.js") %>"></script>
<div class="ad mb-3">
Sponsored: <img class="ad-img-url" width=20 height=20 /> <b><span class="ad-name"></span></b> - <span class="ad-short-description"></span> <a class="ad-url"><b><span class="ad-cta-button"></span></a></b>
</div>
</div>

@ -278,6 +278,6 @@
}
}
</script>
<script defer src="<%= static_path(@conn, "/js/autocomplete.min.js") %>"></script>
<script defer src="<%= static_path(@conn, "/js/autocomplete.js") %>"></script>
</body>
</html>

Loading…
Cancel
Save