Simplify skyscraper ad loading
This commit is contained in:
@@ -4,7 +4,6 @@ import { color_by_name_no_prefix } from "../util/Util.svelte";
|
|||||||
import * as head from "./AdHead.svelte"
|
import * as head from "./AdHead.svelte"
|
||||||
|
|
||||||
let dispatch = createEventDispatcher()
|
let dispatch = createEventDispatcher()
|
||||||
let container
|
|
||||||
let ad_type = ""
|
let ad_type = ""
|
||||||
let visible = false
|
let visible = false
|
||||||
|
|
||||||
@@ -15,20 +14,9 @@ onMount(() => {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (document.body.clientWidth < 700 || document.body.clientHeight < 700) {
|
// If the screen is too small to display the full skyscraper ad, we don't
|
||||||
visible = false
|
// show it
|
||||||
dispatch("visibility", false)
|
if (document.body.clientWidth < 800 || document.body.clientHeight < 700) {
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// If the ad popup was dismissed less than 24 hours ago we don't show it
|
|
||||||
let dismissal = +localStorage.getItem("viewer_skyscraper_ad_dismissed")
|
|
||||||
let now = new Date().getTime()
|
|
||||||
|
|
||||||
if (dismissal > 0 && now - dismissal < 1000 * 60 * 60 * 24) {
|
|
||||||
console.log("Skyscraper dismissed")
|
|
||||||
visible = false
|
|
||||||
dispatch("visibility", false)
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -40,23 +28,12 @@ let set_ad_type = async t => {
|
|||||||
head.load_ad(t)
|
head.load_ad(t)
|
||||||
|
|
||||||
visible = true
|
visible = true
|
||||||
await tick()
|
await tick() // Wait for skyscraper div to render
|
||||||
dispatch("visibility", true)
|
dispatch("visibility", true)
|
||||||
container.style.right = "0"
|
|
||||||
|
|
||||||
console.log("skyscraper ad is " + t)
|
console.log("skyscraper ad is " + t)
|
||||||
}
|
}
|
||||||
|
|
||||||
const close = () => {
|
|
||||||
container.style.right = -container.offsetWidth + "px"
|
|
||||||
dispatch("visibility", false)
|
|
||||||
|
|
||||||
localStorage.setItem("viewer_skyscraper_ad_dismissed", new Date().getTime())
|
|
||||||
|
|
||||||
// Remove the ad from the DOM to save memory
|
|
||||||
setTimeout(() => { visible = false }, 1000)
|
|
||||||
}
|
|
||||||
|
|
||||||
head.adsplus_loaded.subscribe(v => {
|
head.adsplus_loaded.subscribe(v => {
|
||||||
if (v) {
|
if (v) {
|
||||||
window.googletag = window.googletag || {cmd: []};
|
window.googletag = window.googletag || {cmd: []};
|
||||||
@@ -77,10 +54,7 @@ head.valueimpression_loaded.subscribe(v => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if visible}
|
{#if visible}
|
||||||
<div class="skyscraper" bind:this={container}>
|
<div class="skyscraper">
|
||||||
<button on:click={close} class="round">
|
|
||||||
<i class="icon">close</i> Close ad
|
|
||||||
</button>
|
|
||||||
<div class="ad_space">
|
<div class="ad_space">
|
||||||
{#if ad_type === "aads"}
|
{#if ad_type === "aads"}
|
||||||
<iframe
|
<iframe
|
||||||
@@ -114,12 +88,11 @@ head.valueimpression_loaded.subscribe(v => {
|
|||||||
width: 160px;
|
width: 160px;
|
||||||
z-index: 49;
|
z-index: 49;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
right: -160px;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transition: right 0.5s;
|
|
||||||
}
|
}
|
||||||
.ad_space {
|
.ad_space {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@@ -692,7 +692,7 @@ const keyboard_event = evt => {
|
|||||||
display: block;
|
display: block;
|
||||||
min-height: 100px;
|
min-height: 100px;
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
transition: left 0.5s, right 0.5s;
|
transition: left 0.5s;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
box-shadow: inset 0 0 3px -1px var(--shadow_color);
|
box-shadow: inset 0 0 3px -1px var(--shadow_color);
|
||||||
|
Reference in New Issue
Block a user