What would you like done?
In this topic I explained that I was trying to add some simple javascript to rotate between a few random images with api.createWidget
, and I received some help with correctly using api.onPageChange
. I also am planning on doing something similar based on api.decorateWidget
using the solution here. This is the final code that I ended up using for the above-main-container
location:
Custom HTML/CSS in theme component
Head
<script type="text/discourse-plugin" version="0.8">
const h = require("virtual-dom").h;
api.createWidget("top-banner-widget", {
tagName: "div.top-banner",
html() {
let banners = new Array();
let goTo = new Array();
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
let bannerCount = 2;
banners[0]="https://example.com/0.jpg";
banners[1]="https://example.com/1.jpg";
goTo[0]="https://google.com";
goTo[1]="https://brave.com";
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
bannerCount-=1;
let randPick = Math.round(bannerCount * Math.random());
let theLink = goTo[randPick];
let theImage = banners[randPick];
api.onPageChange(() => {
this.scheduleRerender();
});
return h("div#top-banner", [
h(
"a.custom-ad-link",
{ href: theLink },
h("img", { src: theImage})
)
]);
}
});
</script>
<script type="text/x-handlebars" data-template-name="/connectors/above-main-container/inject-widget">
{{mount-widget widget="top-banner-widget"}}
</script>
CSS
.top-banner {
padding-bottom: 1em;
display: flex;
clear: both;
max-width: 100%;
background-color: #FFFFFF;
border: none;
box-sizing: border-box;
img {
max-width: 100%;
&.desktop {
display: block;
}
&.mobile {
display: none;
}
}
}
The problem I’m having with these methods is that it requires users to do a hard page reload when the image source URL and/or href
URL are changed, since the entire script gets cached in the Discourse SPA code. So I would like to learn a flexible method to do cache busting for this sort of script, to make it get the latest version of the custom Javascript on the user’s next page load. I prefer to implement it as I’m currently doing via a theme component that I create and add CSS and Javascript with the Edit CSS/HTML button (and not via an app.yml
defined plugin or Ember component or external GIT repo). I wonder if the official Discourse Ad plugin would contain any reusable code to accomplish this, as changes to the admin-defined HTML of House Ads gets immediately reflected on the next page that the user navigates to.
When do you need it done?
Very flexible.
What is your budget, in $ USD that you can offer for this task?
$150 or less.