Adding test ads.

This commit is contained in:
sergiotarxz 2023-08-21 00:58:11 +02:00
parent c2e1b80e1a
commit 0903a7b1dc
17 changed files with 357 additions and 61 deletions

73
js-src/index.js Normal file
View File

@ -0,0 +1,73 @@
"use strict";
import Tablesort from 'tablesort';
window.Tablesort = require('tablesort');
require('tablesort/src/sorts/tablesort.number');
window.onload = () => {
const menu_expand = document.querySelector('a.menu-expand');
const mobile_foldable = document.querySelector('nav.mobile-foldable');
const tables = document.querySelectorAll('table')
loadAd()
if (menu_expand !== null && mobile_foldable !== null) {
menu_expand.addEventListener('click', () => {
mobile_foldable.classList.toggle('show');
});
}
for (const table of tables) {
const header = table.querySelector('tr');
if (header !== null) {
header.setAttribute('data-sort-method', 'none')
for (const th of header.querySelectorAll('th')) {
if (th.getAttribute('data-sort-method') == null) {
th.setAttribute('data-sort-method', 'thead')
}
}
}
new Tablesort(table)
}
};
let current_ad_number = null
function loadAd() {
const params = new URLSearchParams();
if (current_ad_number !== null) {
params.append('n', ""+current_ad_number);
}
fetch('/next-ad.json?' + params).then((res) => {
return res.json()
}).then((res) => {
current_ad_number = res.current_ad_number
const ad = res.ad
const must_continue = res.continue
const carousel = document.querySelector('.carousel');
if (must_continue === 0) {
return;
}
carousel.innerHTML = ""
const a = document.createElement('a')
const image = document.createElement('img')
const text_container = document.createElement('div')
const text = document.createElement('h3')
const promoted = document.createElement('p')
promoted.classList.add('promoted-tag')
promoted.innerText = "Promocionado"
image.src = ad.img
text.innerText = ad.text
a.href = ad.href
a.append(image)
text_container.append(promoted)
text_container.append(text)
a.append(text_container)
carousel.append(a);
window.setTimeout(() => {
loadAd()
}, ad.seconds * 1000)
})
}

View File

@ -1,29 +0,0 @@
"use strict";
import Tablesort from 'tablesort';
window.Tablesort = require('tablesort');
require('tablesort/src/sorts/tablesort.number');
window.onload = () => {
const menu_expand = document.querySelector('a.menu-expand');
const mobile_foldable = document.querySelector('nav.mobile-foldable');
const tables = document.querySelectorAll('table')
if (menu_expand !== null && mobile_foldable !== null) {
menu_expand.addEventListener('click', () => {
mobile_foldable.classList.toggle('show');
});
}
for (const table of tables) {
const header = table.querySelector('tr');
if (header !== null) {
header.setAttribute('data-sort-method', 'none')
for (const th of header.querySelectorAll('th')) {
if (th.getAttribute('data-sort-method') == null) {
th.setAttribute('data-sort-method', 'thead')
}
}
}
new Tablesort(table)
}
};

View File

@ -53,6 +53,7 @@ sub startup ($self) {
$r->get('/:category')->to('Page#category');
$r->get('/posts/<:slug>-preview.png')->to('Page#get_post_preview');
$r->get('/posts/:slug')->to('Page#post');
$r->get('/next-ad.json')->to('Ads#next_ad');
$r->get('/filtros')->to('Filter#list');
$r->get('/filtros/:slug')->to('Filter#get');
$r->get('/stats/login')->to('Metrics#login');

View File

@ -17,5 +17,26 @@ sub seconds {
return 15;
}
requires 'id is_active img text';
sub serialize ($self) {
return {
id => $self->id,
img => $self->img,
text => $self->text,
href => $self->href,
seconds => $self->seconds,
};
}
{
my %instances;
sub instance ($class) {
if ( !defined $instances{$class} ) {
$instances{$class} = $class->new;
}
return $instances{$class};
}
}
requires 'id is_active img text href';
1;

View File

@ -10,6 +10,7 @@ use feature 'signatures';
use List::AllUtils qw/none/;
use Moo;
use Module::Pluggable
search_path => ['BurguillosInfo::Ads'],
instantiate => 'instance',
@ -47,6 +48,7 @@ sub _order_two_ads ( $self, $a, $b ) {
sub get_next ( $self, $current_ad_number = undef ) {
my $array = $self->_array;
use Data::Dumper;
if ( !scalar @$array
|| none { $_->is_active } @$array )
{
@ -60,7 +62,7 @@ sub get_next ( $self, $current_ad_number = undef ) {
return $self->get_next( $self->_get_next_number($current_ad_number) );
}
return {
ad => $ad,
ad => $ad->serialize,
continue => 1,
current_ad_number => $self->_get_next_number($current_ad_number),
};

View File

@ -0,0 +1,35 @@
package BurguillosInfo::Ads::Afasode;
use v5.36.0;
use strict;
use warnings;
use utf8;
use feature 'signatures';
use Moo;
use parent 'BurguillosInfo::Ad';
sub id ($self) {
return 'afasode-loteria';
}
sub is_active ($self) {
return 1;
}
sub img {
return '/img/afasode.svg';
}
sub href {
return 'https://example.com';
}
sub text {
return
'54359 es el número de la lotería de Navidad de AFASODE, colabora con una buena causa y no pierdas la ilusión.';
}
1;

View File

@ -0,0 +1,34 @@
package BurguillosInfo::Ads::YoTeLoGuiso;
use v5.36.0;
use strict;
use warnings;
use utf8;
use feature 'signatures';
use Moo;
use parent 'BurguillosInfo::Ad';
sub id ($self) {
return 'yo-te-lo-guiso';
}
sub is_active ($self) {
return 1;
}
sub img {
return '/img/afasode.svg';
}
sub text {
return 'Prueba.';
}
sub href {
return 'https://example.com';
}
1;

View File

@ -0,0 +1,18 @@
package BurguillosInfo::Controller::Ads;
use v5.34.1;
use strict;
use warnings;
use BurguillosInfo::Ads;
use Mojo::Base 'Mojolicious::Controller', '-signatures';
sub next_ad {
my $self = shift;
my $ads_factory = BurguillosInfo::Ads->new;
my $current_ad_number = $self->param('n');
$self->render( json => $ads_factory->get_next($current_ad_number) );
}
1;

View File

@ -15,7 +15,7 @@
"eslint": "^8.40.0",
"eslint-plugin-no-relative-import-paths": "^1.5.2",
"typescript": "^5.0.4",
"webpack-cli": "^5.0.2"
"webpack-cli": "^5.1.4"
},
"dependencies": {
"tablesort": "^5.3.0"

View File

@ -21,10 +21,27 @@ body {
filter: blur(10px);
background-size: cover;
overflow: hidden; }
body div.page-contents {
position: absolute;
body div.carousel {
position: fixed;
top: 80%;
height: 20%;
width: 100%;
background: white; }
body div.carousel a {
display: flex;
text-align: center;
justify-content: start;
align-items: center;
height: 100%;
text-decoration: none; }
body div.carousel p, body div.carousel h3 {
margin: 0; }
body div.carousel img {
height: 100%; }
body div.none {
display: none; }
body div.complete-container {
position: fixed;
overflow-y: scroll;
z-index: 2;
background: #FEFEFA;
color: #666362;
@ -32,6 +49,11 @@ body {
left: 0%;
height: 100%;
width: 100%; }
body div.page-contents {
position: fixed;
top: 60px;
height: calc(80% - 60px);
overflow-y: scroll; }
body div.page-contents div.child-categories-mobile a {
padding-left: 2.5rem; }
body div.page-contents img {
@ -175,12 +197,13 @@ body {
display: flex;
width: 100%;
background: blueviolet;
height: 60px; }
height: 60px;
top: 0%; }
body div.page-contents nav.mobile-shortcuts a {
height: 100%;
width: 16.66667%; }
width: 16.6666666667%; }
body div.page-contents nav.mobile-shortcuts div {
width: 66.66667%; }
width: 66.6666666667%; }
body div.page-contents nav.mobile-foldable {
display: none;
background: blueviolet;
@ -239,4 +262,3 @@ body {
margin-left: 3%; }
body div.page-contents div.description div.articles a:nth-child(3n+1) {
margin-left: 0%; } }

View File

@ -39,23 +39,52 @@ body {
overflow: hidden;
}
div.page-contents {
position: absolute;
div.carousel {
position: fixed;
top: 80%;
height: 20%;
width: 100%;
background: white;
a {
display: flex;
text-align: center;
justify-content: start;
align-items: center;
height: 100%;
text-decoration: none;
}
p,h3 {
margin: 0;
}
img {
height: 100%;
}
}
div.none {
display: none;
}
div.complete-container {
position: fixed;
overflow-y: scroll;
z-index: 2;
background: $background-page;
color: $color-page;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
}
div.page-contents {
position: fixed;
top: 60px;
height: calc(80% - 60px);
overflow-y: scroll;
div.child-categories-mobile a {
padding-left: 2.5rem;
}
width: 100%;
img {
max-width: 100%;
margin-left: auto;
@ -271,6 +300,7 @@ body {
width: 100%;
background: $background_div;
height: 60px;
top: 0%;
a {
height: 100%;

74
public/img/afasode.svg Normal file
View File

@ -0,0 +1,74 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="500"
height="500"
viewBox="0 0 132.29166 132.29167"
version="1.1"
id="svg5"
xml:space="preserve"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="afasode.svg"
inkscape:export-filename="afasode.png"
inkscape:export-xdpi="384"
inkscape:export-ydpi="384"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="1.3932941"
inkscape:cx="76.437559"
inkscape:cy="252.63869"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" /><defs
id="defs2" /><g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"><path
style="opacity:1;fill:#2c5ea6;fill-opacity:1;stroke:#000000;stroke-width:0.291457;stroke-dasharray:none;stroke-opacity:1"
d="m 25.801737,81.653412 -3.40597,2.038286 c 0,0 -1.41975,1.14888 -4.779969,3.0752 -2.967544,1.701206 -3.887859,-0.561881 -3.887859,-0.561881 L 5.788848,75.763871 c 0,0 1.1885315,2.028295 -3.4675015,-4.802465 -2.44245787,-5.132787 0.018485,-6.401866 0.018485,-6.401866 l 7.3959051,-4.927311 z"
id="path5268-6"
sodipodi:nodetypes="ccscccccc" /><path
style="opacity:1;fill:#7eb513;fill-opacity:1;stroke:#000000;stroke-width:0.291457;stroke-dasharray:none;stroke-opacity:1"
d="m 80.660333,106.81836 2.229023,3.19709 c 0,0 1.241895,1.32401 3.352575,4.48061 1.864026,2.78774 -0.474451,3.73324 -0.474451,3.73324 l -10.681806,7.89295 c 0,0 2.085309,-1.19513 -4.918495,3.45435 -5.29346,2.48396 -6.691163,0.16803 -6.691163,0.16803 l -5.364114,-6.92782 z"
id="path5268-6-5"
sodipodi:nodetypes="ccscccccc" /><path
style="opacity:1;fill:#db7a00;fill-opacity:1;stroke:#000000;stroke-width:0.291457;stroke-dasharray:none;stroke-opacity:1"
d="m 105.99606,52.8527 3.3982,-2.050075 c 0,0 1.41539,-1.153801 4.76829,-3.091754 2.96107,-1.711487 3.88996,0.548397 3.88996,0.548397 l 7.97863,10.41355 c 0,0 -1.19622,-2.024167 3.48566,4.790409 2.4619,5.124286 0.005,6.40189 0.005,6.40189 l -7.37718,4.952922 z"
id="path5268-6-5-3"
sodipodi:nodetypes="ccscccccc" /><path
style="opacity:1;fill:#98007f;fill-opacity:1;stroke:#000000;stroke-width:0.291457;stroke-dasharray:none;stroke-opacity:1"
d="m 50.983799,26.508946 -2.182781,-3.226152 c 0,0 -1.222715,-1.340232 -3.287749,-4.524339 -1.823722,-2.812005 0.528142,-3.726629 0.528142,-3.726629 L 56.835834,7.280305 c 0,0 -2.102322,1.1675471 4.967759,-3.389252 5.328717,-2.4140224 6.692955,-0.079704 6.692955,-0.079704 l 5.263868,6.997796 z"
id="path5268-6-5-3-5"
sodipodi:nodetypes="ccscccccc" /><path
style="opacity:1;fill:#96007f;fill-opacity:1;stroke:#000000;stroke-width:0.288384;stroke-dasharray:none;stroke-opacity:1"
d="m 69.999154,52.978375 c 6.710804,7.85166 -1.965562,7.255455 0.160799,11.011842 6.844545,12.091446 7.63439,-0.121049 7.978313,0.4511 2.056833,3.421735 20.569343,28.647873 20.569343,28.647873 3.817511,-0.159946 3.770261,-2.664058 3.423071,-5.724358 2.51427,1.13107 6.82759,3.078524 6.48441,-3.535665 1.12032,0.19778 7.54627,3.366658 5.50597,-4.411775 2.92054,1.602848 6.37455,2.115196 6.24964,-2.703443 L 92.321569,36.846278 Z"
id="path10793"
sodipodi:nodetypes="cssccccccc" /><path
style="opacity:1;fill:#db7c02;fill-opacity:1;stroke:#000000;stroke-width:0.294759;stroke-dasharray:none;stroke-opacity:1"
d="m 79.699652,70.942356 c -8.154863,6.706357 -7.416416,-2.11551 -11.302035,-0.01067 -12.507425,6.775381 0.01277,7.772641 -0.579356,8.113649 -3.541203,2.0394 -29.696989,20.483211 -29.696989,20.483211 0.108407,3.888214 2.678664,3.879744 5.824027,3.574794 -1.197339,2.54127 -3.258666,6.90081 3.533424,6.65617 -0.219302,1.1372 -3.564816,7.62776 4.446728,5.67414 -1.687385,2.9473 -2.26354,6.45493 2.682875,6.40404 L 95.927578,93.918755 Z"
id="path10793-6"
sodipodi:nodetypes="cssccccccc" /><path
style="opacity:1;fill:#7eb513;fill-opacity:1;stroke:#000000;stroke-width:0.293;stroke-dasharray:none;stroke-opacity:1"
d="m 62.995221,80.57747 c -6.82618,-7.90342 2.199879,-7.148263 0.0636,-10.908833 -6.876524,-12.104907 -7.955633,-0.02504 -8.301908,-0.5982 C 52.686031,65.64262 33.930078,40.30804 33.930078,40.30804 c -3.980224,0.08594 -3.983547,2.56684 -3.686084,5.604251 -2.595518,-1.167903 -7.048042,-3.178477 -6.829316,3.378518 -1.162932,-0.217137 -7.790658,-3.477472 -5.828437,4.264771 -3.008787,-1.642852 -6.596284,-2.215822 -6.56726,2.558772 l 28.383402,40.016109 z"
id="path10793-6-2"
sodipodi:nodetypes="cssccccccc" /><path
style="opacity:1;fill:#2c5ea6;fill-opacity:1;stroke:#000000;stroke-width:0.278447;stroke-dasharray:none;stroke-opacity:1"
d="m 52.972713,62.032145 c 7.562909,-6.513804 7.114104,1.777056 10.749006,-0.304233 11.70039,-6.699521 -0.235472,-7.286338 0.317856,-7.622492 C 67.3488,52.095075 91.69406,34.077169 91.69406,34.077169 c -0.21482,-3.642101 -2.659003,-3.562708 -5.641606,-3.189375 1.065696,-2.415696 2.900833,-6.559978 -3.551691,-6.141797 0.175889,-1.07219 3.171111,-7.249978 -4.392058,-5.195779 1.520083,-2.80994 1.967241,-6.114289 -2.735542,-5.92906 L 36.879086,40.943401 Z"
id="path10793-6-2-9"
sodipodi:nodetypes="cssccccccc" /></g></svg>

After

Width:  |  Height:  |  Size: 5.8 KiB

View File

@ -9,14 +9,14 @@
/******/ (() => { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ "./js-src/index.ts":
/***/ "./js-src/index.js":
/*!*************************!*\
!*** ./js-src/index.ts ***!
!*** ./js-src/index.js ***!
\*************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var tablesort__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tablesort */ \"./node_modules/tablesort/src/tablesort.js\");\n/* harmony import */ var tablesort__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(tablesort__WEBPACK_IMPORTED_MODULE_0__);\n\n\nwindow.Tablesort = __webpack_require__(/*! tablesort */ \"./node_modules/tablesort/src/tablesort.js\");\n__webpack_require__(/*! tablesort/src/sorts/tablesort.number */ \"./node_modules/tablesort/src/sorts/tablesort.number.js\");\n\nwindow.onload = () => {\n const menu_expand = document.querySelector('a.menu-expand');\n const mobile_foldable = document.querySelector('nav.mobile-foldable');\n const tables = document.querySelectorAll('table')\n\n if (menu_expand !== null && mobile_foldable !== null) {\n menu_expand.addEventListener('click', () => {\n mobile_foldable.classList.toggle('show');\n });\n }\n\n for (const table of tables) {\n const header = table.querySelector('tr');\n if (header !== null) {\n header.setAttribute('data-sort-method', 'none')\n for (const th of header.querySelectorAll('th')) {\n if (th.getAttribute('data-sort-method') == null) {\n th.setAttribute('data-sort-method', 'thead')\n }\n }\n }\n new (tablesort__WEBPACK_IMPORTED_MODULE_0___default())(table)\n }\n};\n\n\n//# sourceURL=webpack://BurguillosInfo/./js-src/index.ts?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var tablesort__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tablesort */ \"./node_modules/tablesort/src/tablesort.js\");\n/* harmony import */ var tablesort__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(tablesort__WEBPACK_IMPORTED_MODULE_0__);\n\n\nwindow.Tablesort = __webpack_require__(/*! tablesort */ \"./node_modules/tablesort/src/tablesort.js\");\n__webpack_require__(/*! tablesort/src/sorts/tablesort.number */ \"./node_modules/tablesort/src/sorts/tablesort.number.js\");\n\nwindow.onload = () => {\n const menu_expand = document.querySelector('a.menu-expand');\n const mobile_foldable = document.querySelector('nav.mobile-foldable');\n const tables = document.querySelectorAll('table')\n\n loadAd()\n\n if (menu_expand !== null && mobile_foldable !== null) {\n menu_expand.addEventListener('click', () => {\n mobile_foldable.classList.toggle('show');\n });\n }\n\n for (const table of tables) {\n const header = table.querySelector('tr');\n if (header !== null) {\n header.setAttribute('data-sort-method', 'none')\n for (const th of header.querySelectorAll('th')) {\n if (th.getAttribute('data-sort-method') == null) {\n th.setAttribute('data-sort-method', 'thead')\n }\n }\n }\n new (tablesort__WEBPACK_IMPORTED_MODULE_0___default())(table)\n }\n};\n\nlet current_ad_number = null\n\nfunction loadAd() {\n const params = new URLSearchParams();\n if (current_ad_number !== null) {\n params.append('n', \"\"+current_ad_number);\n }\n fetch('/next-ad.json?' + params).then((res) => {\n return res.json()\n }).then((res) => {\n current_ad_number = res.current_ad_number\n const ad = res.ad\n const must_continue = res.continue\n const carousel = document.querySelector('.carousel');\n if (must_continue === 0) {\n return;\n }\n carousel.innerHTML = \"\"\n const a = document.createElement('a')\n const image = document.createElement('img')\n const text_container = document.createElement('div')\n const text = document.createElement('h3')\n const promoted = document.createElement('div')\n\n promoted.classList.add('promoted-tag')\n promoted.innerText = \"Promocionado\"\n image.src = ad.img\n text.innerText = ad.text\n a.href = ad.href\n\n a.append(image)\n text_container.append(promoted)\n text_container.append(text)\n a.append(text_container)\n carousel.append(a);\n\n window.setTimeout(() => {\n loadAd()\n }, ad.seconds * 1000)\n })\n}\n\n\n//# sourceURL=webpack://BurguillosInfo/./js-src/index.js?");
/***/ }),
@ -112,7 +112,7 @@ eval(";(function() {\n function Tablesort(el, options) {\n if (!(this instan
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module can't be inlined because the eval devtool is used.
/******/ var __webpack_exports__ = __webpack_require__("./js-src/index.ts");
/******/ var __webpack_exports__ = __webpack_require__("./js-src/index.js");
/******/
/******/ })()
;

View File

@ -7,4 +7,16 @@ window.onload = () => {
menu_expand.addEventListener('click', () => {
mobile_foldable.classList.toggle('show');
});
loadAd()
};
let current_ad_number = null;
function loadAd() {
fetch('/next_ad.json?' + new URLSearchParams({
n: current_ad_number
}).then((res) => {
return res.json()
}).then((res) => {
console.log(res)
})
}

View File

@ -32,17 +32,20 @@
<body>
<div class="site-wrapper">
</div>
<div class="page-contents">
<div class="complete-container">
<div class="page-contents">
%= include 'page/_desktop_menu', categories => $categories, current_category_slug => $current_category_slug
%= include 'page/_mobile_menu', categories => $categories
<%= content %></body>
<hr/>
<div class="footer description">
<p>©2022-2023 Sergio Iglesias</p>
<p>Enterate de todas las novedades de Burguillos.info:</p>
<a class="suscribe-category-rss" href="/all.rss">
<img src="/img/rss.svg" alt="Icono de suscripción rss"/>
</a>
</div>
</div>
<%= content %></body>
<hr/>
<div class="footer description">
<p>©2022-2023 Sergio Iglesias</p>
<p>Enterate de todas las novedades de Burguillos.info:</p>
<a class="suscribe-category-rss" href="/all.rss">
<img src="/img/rss.svg" alt="Icono de suscripción rss"/>
</a>
</div>
</div>
%= include 'ads/_carousel'
</div>
</html>

View File

@ -23,6 +23,6 @@
]
},
"include": [
"js-src/*.ts", "js-src/*/*.ts"
"js-src/*.ts", "js-src/*/*.ts"
]
}

View File

@ -1,7 +1,7 @@
const path = require('path')
module.exports = {
entry: './js-src/index.ts',
entry: './js-src/index.js',
mode: 'development',
output: {
filename: 'bundle.js',