Skip to content
Permalink
Browse files

Replace Vue PopUp Component with Vanilla JS

Fix: Replace use of a tag in pop up with span
  • Loading branch information
arranf committed Nov 2, 2019
1 parent 681b9bc commit cf0442043f6de7dd0b6ada9399b5bb869a6cc657
Showing with 117 additions and 135 deletions.
  1. +1 −1 layouts/partials/footer.html
  2. +5 −13 src/index.js
  3. +42 −0 src/js/PopUp.js
  4. +0 −121 src/js/PopUp.vue
  5. +68 −0 src/styles/pop-up.styl
  6. +1 −0 src/styles/theme.styl
@@ -14,7 +14,7 @@
</div>
{{ end }}

<!-- Vue anchor -->
<!-- Pop Up Render Anchor -->
<div id="popup"></div>

<!-- No async or defer on these to prevent bug where CSS transitions flash causing the sidebar to display for an instant -->
@@ -7,9 +7,6 @@ import SWUpdateEvent from './js/SWUpdateEvent'
import('./js/sidebar')
import('./js/SearchBox');

import Vue from 'vue'
import PopUp from './js/PopUp.vue';

// Use native lazy image loading if possible, else use lazysizes.
if ('loading' in HTMLImageElement.prototype) {
console.debug('Native lazy loading enabled')
@@ -53,16 +50,11 @@ function registerSW() {
},
updated(registration) {
const updateEvent = new SWUpdateEvent(registration);
new Vue({
el: '#popup',
render: h => h(
PopUp,
{
props: {
updateEvent
}
})
});
import('./js/PopUp')
.then(module => {
const renderPopUp = module.default;
renderPopUp(updateEvent);
})
console.debug('New content is available; please refresh.')
},
offline() {
@@ -0,0 +1,42 @@
let state = {};
export default function renderPopUp(updateEvent) {
state.updateEvent = updateEvent;
const div = document.createElement("div");
div.classList.add("sw-update-popup");
div.onclick = reload;

const p = document.createElement("p");
p.onclick = reload;
const pText = "New content is available."
const pTextNode = document.createTextNode(pText);

const span = document.createElement("span");
span.onclick = reload;
const spanText = "Reload"
const spanTextNode = document.createTextNode(spanText);

span.appendChild(spanTextNode);
p.appendChild(pTextNode);

div.appendChild(p);
div.appendChild(span);

const popUpAnchor = document.getElementById('popup');
popUpAnchor.appendChild(div);
}

function reload() {
if (!state.updateEvent) {
return;
}

state.updateEvent
.skipWaiting()
.then(() => {
console.debug("Skip waiting succeeded");
location.reload(true);
})
.catch(e => console.error(e));

delete state.updateEvent;
}

This file was deleted.

@@ -0,0 +1,68 @@
@import './config.styl'

.sw-update-popup
display flex
position fixed
left 0
bottom 0
padding 0.65em
border none
border-radius 0px
background $codeBgColor
box-shadow 0 4px 16px rgba(0, 0, 0, 0.5)
cursor pointer
min-width 100%

p, span
flex 1
font-size 90%
align-self center

p
color: #ffffff
margin: 0 0
padding-left: 0.2em
white-space nowrap
text-align left

span
text-align right
padding-right 1.5em
font-weight: 500
color: #3eaf7c
text-decoration: none

// Tablet+
@media (min-width: 768px)
.sw-update-popup
border-radius 3px
left initial
min-width initial
right 1em
bottom 1em
padding 1em

text-align left
border 1px solid $accentColor

p, span
font-size: 1em
text-align left

p
margin 0,0

span
margin-left 0.5em
padding-right initial

@media print
.sw-update-popup
display none

.sw-update-popup-enter-active, .sw-update-popup-leave-active
transition opacity 0.3s, transform 0.3s

.sw-update-popup-enter, .sw-update-popup-leave-to
opacity 0
transform translate(0, 50%) scale(0.5)
@@ -11,6 +11,7 @@
@require './loading'
@require './sidebar'
@require './search-box'
@require './pop-up'
// @require './toc'
// @require './nprogress'

0 comments on commit cf04420

Please sign in to comment.
You can’t perform that action at this time.