From 0903a7b1dc254b5f7ca9c91faab6a761936be9e9 Mon Sep 17 00:00:00 2001 From: sergiotarxz Date: Mon, 21 Aug 2023 00:58:11 +0200 Subject: [PATCH] Adding test ads. --- js-src/index.js | 73 ++++++++++++++++++++++++++ js-src/index.ts | 29 ----------- lib/BurguillosInfo.pm | 1 + lib/BurguillosInfo/Ad.pm | 23 ++++++++- lib/BurguillosInfo/Ads.pm | 4 +- lib/BurguillosInfo/Ads/Afasode.pm | 35 +++++++++++++ lib/BurguillosInfo/Ads/YoTeLoGuiso.pm | 34 ++++++++++++ lib/BurguillosInfo/Controller/Ads.pm | 18 +++++++ package.json | 2 +- public/css/styles.css | 36 ++++++++++--- public/css/styles.scss | 40 +++++++++++++-- public/img/afasode.svg | 74 +++++++++++++++++++++++++++ public/js/bundle.js | 8 +-- public/js/index.js | 12 +++++ templates/layouts/default.html.ep | 25 +++++---- tsconfig.json | 2 +- webpack.config.js | 2 +- 17 files changed, 357 insertions(+), 61 deletions(-) create mode 100644 js-src/index.js delete mode 100644 js-src/index.ts create mode 100644 lib/BurguillosInfo/Ads/Afasode.pm create mode 100644 lib/BurguillosInfo/Ads/YoTeLoGuiso.pm create mode 100644 lib/BurguillosInfo/Controller/Ads.pm create mode 100644 public/img/afasode.svg diff --git a/js-src/index.js b/js-src/index.js new file mode 100644 index 0000000..00c6ddd --- /dev/null +++ b/js-src/index.js @@ -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) + }) +} diff --git a/js-src/index.ts b/js-src/index.ts deleted file mode 100644 index a2228dd..0000000 --- a/js-src/index.ts +++ /dev/null @@ -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) - } -}; diff --git a/lib/BurguillosInfo.pm b/lib/BurguillosInfo.pm index 7b53e31..3d18ce3 100644 --- a/lib/BurguillosInfo.pm +++ b/lib/BurguillosInfo.pm @@ -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'); diff --git a/lib/BurguillosInfo/Ad.pm b/lib/BurguillosInfo/Ad.pm index d52a6c1..4d37131 100644 --- a/lib/BurguillosInfo/Ad.pm +++ b/lib/BurguillosInfo/Ad.pm @@ -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; diff --git a/lib/BurguillosInfo/Ads.pm b/lib/BurguillosInfo/Ads.pm index e03011b..5270f35 100644 --- a/lib/BurguillosInfo/Ads.pm +++ b/lib/BurguillosInfo/Ads.pm @@ -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), }; diff --git a/lib/BurguillosInfo/Ads/Afasode.pm b/lib/BurguillosInfo/Ads/Afasode.pm new file mode 100644 index 0000000..a4d16e8 --- /dev/null +++ b/lib/BurguillosInfo/Ads/Afasode.pm @@ -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; diff --git a/lib/BurguillosInfo/Ads/YoTeLoGuiso.pm b/lib/BurguillosInfo/Ads/YoTeLoGuiso.pm new file mode 100644 index 0000000..3824e8e --- /dev/null +++ b/lib/BurguillosInfo/Ads/YoTeLoGuiso.pm @@ -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; diff --git a/lib/BurguillosInfo/Controller/Ads.pm b/lib/BurguillosInfo/Controller/Ads.pm new file mode 100644 index 0000000..7551f8a --- /dev/null +++ b/lib/BurguillosInfo/Controller/Ads.pm @@ -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; diff --git a/package.json b/package.json index 03b81f2..f7acd1b 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/public/css/styles.css b/public/css/styles.css index 5cb0c37..c962447 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -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%; } } - diff --git a/public/css/styles.scss b/public/css/styles.scss index 21864ff..ed40e44 100644 --- a/public/css/styles.scss +++ b/public/css/styles.scss @@ -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%; diff --git a/public/img/afasode.svg b/public/img/afasode.svg new file mode 100644 index 0000000..f43d1e2 --- /dev/null +++ b/public/img/afasode.svg @@ -0,0 +1,74 @@ + + + + diff --git a/public/js/bundle.js b/public/js/bundle.js index d953138..bcd29db 100644 --- a/public/js/bundle.js +++ b/public/js/bundle.js @@ -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"); /******/ /******/ })() ; \ No newline at end of file diff --git a/public/js/index.js b/public/js/index.js index 930282d..2ca0138 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -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) + }) +} diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep index aa543f3..a17663b 100644 --- a/templates/layouts/default.html.ep +++ b/templates/layouts/default.html.ep @@ -32,17 +32,20 @@
-
+
+
%= include 'page/_desktop_menu', categories => $categories, current_category_slug => $current_category_slug %= include 'page/_mobile_menu', categories => $categories - <%= content %> -
-
-

©2022-2023 Sergio Iglesias

-

Enterate de todas las novedades de Burguillos.info:

- - Icono de suscripción rss - -
-
+ <%= content %> +
+
+

©2022-2023 Sergio Iglesias

+

Enterate de todas las novedades de Burguillos.info:

+ + Icono de suscripción rss + +
+
+%= include 'ads/_carousel' +
diff --git a/tsconfig.json b/tsconfig.json index 70bfdfd..ede1d4c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -23,6 +23,6 @@ ] }, "include": [ - "js-src/*.ts", "js-src/*/*.ts" + "js-src/*.ts", "js-src/*/*.ts" ] } diff --git a/webpack.config.js b/webpack.config.js index a4a3f8a..bee5534 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -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',