Handle notifications

This commit is contained in:
Eduardo Gomez 2020-03-11 18:42:00 +01:00
parent f0563a59fa
commit ef9e841c81
10 changed files with 185 additions and 16 deletions

View file

@ -67,6 +67,9 @@
{{!-- The footer --}} {{!-- The footer --}}
{{> footer}} {{> footer}}
{{!-- Notifications alerts --}}
{{> "notifications"}}
{{!-- Common scripts shared between pages --}} {{!-- Common scripts shared between pages --}}
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver%2CPromise%2CArray.prototype.includes%2CString.prototype.endsWith%2CString.prototype.startsWith%2CObject.assign%2CNodeList.prototype.forEach"></script> <script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver%2CPromise%2CArray.prototype.includes%2CString.prototype.endsWith%2CString.prototype.startsWith%2CObject.assign%2CNodeList.prototype.forEach"></script>
<script defer src="https://unpkg.com/@tryghost/content-api@1.2.7/umd/content-api.min.js"></script> <script defer src="https://unpkg.com/@tryghost/content-api@1.2.7/umd/content-api.min.js"></script>

View file

@ -20,6 +20,9 @@ into the {body} of the default.hbs template --}}
{{#if @labs.subscribers}} {{#if @labs.subscribers}}
<a href="{{@site.url}}/subscribe" class="m-button filled">{{t "Subscribe"}}</a> <a href="{{@site.url}}/subscribe" class="m-button filled">{{t "Subscribe"}}</a>
{{/if}} {{/if}}
{{#if @labs.members}}
<a href="{{@site.url}}/newsletter" class="m-button filled">{{t "Subscribe"}}</a>
{{/if}}
</div> </div>
</section> </section>

View file

@ -39,5 +39,9 @@
"Type to search": "Type to search", "Type to search": "Type to search",
"No results for your search, try something different.": "No results for your search, please try with something else.", "No results for your search, try something different.": "No results for your search, please try with something else.",
"JavaScript license information": "JavaScript license information", "JavaScript license information": "JavaScript license information",
"Toggle dark mode": "Toggle dark mode" "Toggle dark mode": "Toggle dark mode",
"Great! You've successfully subscribed.": "Great! You've successfully subscribed.",
"Great! Next, complete checkout for full access.": "Great! Next, complete checkout for full access.",
"Welcome back! You've successfully signed in.": "Welcome back! You've successfully signed in.",
"Success! Your account is fully activated, you now have access to all content.": "Success! Your account is fully activated, you now have access to all content."
} }

View file

@ -39,5 +39,9 @@
"Type to search": "Escribe para buscar", "Type to search": "Escribe para buscar",
"No results for your search, try something different.": "No hay resultados para tu búsqueda, prueba algo diferente.", "No results for your search, try something different.": "No hay resultados para tu búsqueda, prueba algo diferente.",
"JavaScript license information": "Información de licencia JavaScript", "JavaScript license information": "Información de licencia JavaScript",
"Toggle dark mode": "Alternar modo oscuro" "Toggle dark mode": "Alternar modo oscuro",
"Great! You've successfully subscribed.": "¡Genial! Te has suscrito con éxito.",
"Great! Next, complete checkout for full access.": "¡Genial! Ahora, completa el checkout para tener acceso completo.",
"Welcome back! You've successfully signed in.": "¡Bienvenido de nuevo! Has iniciado sesión con éxito.",
"Success! Your account is fully activated, you now have access to all content.": "Éxito! Su cuenta está totalmente activada, ahora tienes acceso a todo el contenido."
} }

View file

@ -15,7 +15,6 @@ into the {body} of the default.hbs template --}}
<main class="l-fullscreen"> <main class="l-fullscreen">
<section class="l-fullscreen__content in-subscribe-page" data-aos="fade-up" data-aos-delay="300"> <section class="l-fullscreen__content in-subscribe-page" data-aos="fade-up" data-aos-delay="300">
{{^if success}}
<div> <div>
<header class="m-heading in-subscribe-page"> <header class="m-heading in-subscribe-page">
<h1 class="m-heading__title">{{t "Subscribe to"}} {{@site.title}}</h1> <h1 class="m-heading__title">{{t "Subscribe to"}} {{@site.title}}</h1>
@ -25,17 +24,5 @@ into the {body} of the default.hbs template --}}
</header> </header>
{{> "newsletter-form"}} {{> "newsletter-form"}}
</div> </div>
{{else}}
<div>
<header class="m-heading in-subscribe-page">
<h1 class="m-heading__title">{{t "Subscribed!"}}</h1>
<p class="m-heading__description in-subscribe-page">
{{t "You've successfully subscribed to"}} <strong>{{@site.title}}</strong> {{t "with the email address"}}
<strong>{{email}}</strong>
</p>
</header>
<a href="{{@site.url}}" class="m-button outlined">{{t "Back to home"}}</a>
</div>
{{/if}}
</section> </section>
</main> </main>

View file

@ -0,0 +1,27 @@
<div class="m-alert success subscribe js-alert" data-notification="subscribe">
{{t "Great! You've successfully subscribed."}}
<button class="m-alert__close js-notification-close" aria-label="Close">
<span class="icon-close"></span>
</button>
</div>
<div class="m-alert success signup js-alert" data-notification="signup">
{{t "Great! Next, complete checkout for full access."}}
<button class="m-alert__close js-notification-close" aria-label="Close">
<span class="icon-close"></span>
</button>
</div>
<div class="m-alert success signin js-alert" data-notification="signin">
{{t "Welcome back! You've successfully signed in."}}
<button class="m-alert__close js-notification-close" aria-label="Close">
<span class="icon-close"></span>
</button>
</div>
<div class="m-alert success checkout js-alert" data-notification="checkout">
{{t "Success! Your account is fully activated, you now have access to all content."}}
<button class="m-alert__close js-notification-close" aria-label="Close">
<span class="icon-close"></span>
</button>
</div>

View file

@ -10,7 +10,8 @@ import Fuse from 'fuse.js'
import { import {
isRTL, isRTL,
formatDate, formatDate,
isDarkMode isDarkMode,
getParameterByName
} from './helpers' } from './helpers'
cssVars({}) cssVars({})
@ -36,6 +37,7 @@ $(document).ready(() => {
const $searchResults = $('.js-search-results') const $searchResults = $('.js-search-results')
const $searchNoResults = $('.js-no-results') const $searchNoResults = $('.js-no-results')
const $toggleDarkMode = $('.js-toggle-darkmode') const $toggleDarkMode = $('.js-toggle-darkmode')
const $closeNotification = $('.js-notification-close')
const currentSavedTheme = localStorage.getItem('theme') const currentSavedTheme = localStorage.getItem('theme')
let fuse = null let fuse = null
@ -102,6 +104,49 @@ $(document).ready(() => {
}) })
} }
const showNotification = (typeNotification) => {
const $notification = $(`.js-alert[data-notification="${typeNotification}"]`)
$notification.addClass('opened')
setTimeout(() => {
closeNotification($notification)
}, 5000)
}
const closeNotification = ($notification) => {
$notification.removeClass('opened')
const url = window.location.toString()
if (url.indexOf('?') > 0) {
const cleanUrl = url.substring(0, url.indexOf('?'))
window.history.replaceState({}, document.title, cleanUrl)
}
}
const checkForActionParameter = () => {
const action = getParameterByName('action')
const stripe = getParameterByName('stripe')
if (action === 'subscribe') {
showNotification('subscribe')
}
if (action === 'signup') {
window.location = `${ghostHost}/signup/?action=checkout`
}
if (action === 'checkout') {
showNotification('signup')
}
if (action === 'signin') {
showNotification('signin')
}
if (stripe === 'success') {
showNotification('checkout')
}
}
$openMenu.click(() => { $openMenu.click(() => {
$header.addClass('mobile-menu-opened') $header.addClass('mobile-menu-opened')
$menu.addClass('opened') $menu.addClass('opened')
@ -179,6 +224,10 @@ $(document).ready(() => {
} }
}) })
$closeNotification.click(function () {
closeNotification($(this).parent())
})
$(window).click((e) => { $(window).click((e) => {
if (submenuIsOpen) { if (submenuIsOpen) {
if ($submenuOption && !$submenuOption.contains(e.target)) { if ($submenuOption && !$submenuOption.contains(e.target)) {
@ -249,5 +298,6 @@ $(document).ready(() => {
shave('.js-article-card-title', 100) shave('.js-article-card-title', 100)
shave('.js-article-card-title-no-image', 250) shave('.js-article-card-title-no-image', 250)
checkForActionParameter()
trySearchFeature() trySearchFeature()
}) })

View file

@ -27,3 +27,18 @@ export const formatDate = (date) => {
return '' return ''
} }
export const getParameterByName = (name, url) => {
if (!url) url = window.location.href
name = name.replace(/[\[\]]/g, '\\$&')
const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`)
const results = regex.exec(url)
if (!results) return null
if (!results[2]) return ''
return decodeURIComponent(results[2].replace(/\+/g, ' '))
}

View file

@ -22,6 +22,7 @@
@import "components/ui/back"; @import "components/ui/back";
@import "components/ui/small-text"; @import "components/ui/small-text";
@import "components/ui/not-found"; @import "components/ui/not-found";
@import "components/ui/alert";
@import "components/header/header"; @import "components/header/header";
@import "components/header/mobile-topbar"; @import "components/header/mobile-topbar";
@import "components/header/logo"; @import "components/header/logo";

View file

@ -0,0 +1,75 @@
.m-alert {
color: $white;
text-align: center;
letter-spacing: 1px;
line-height: 1.4;
font-size: 0.875rem;
visibility: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 16px 45px 14px;
z-index: 11;
@include transform(translateY(-100%));
@include transition(transform 0.2s ease);
@include respond-to('medium') {
font-size: 1rem;
padding: 24px 75px 22px;
}
&.success {
background-color: var(--primary-subtle-color);
}
&.opened {
visibility: visible;
@include transform(translateY(0));
}
}
.m-alert__close {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
right: $mobile-space;
width: 20px;
height: 20px;
cursor: pointer;
outline: 0;
border: 0;
padding: 0;
background-color: transparent;
@extend .no-appearance;
@include transform(translateY(-50%));
@include respond-to('medium') {
right: 40px;
width: 25px;
height: 25px;
}
span {
color: $white;
font-size: 0.75rem;
@include respond-to('medium') {
font-size: 0.875rem;
}
}
}
.rtl {
.m-alert__close {
right: auto;
left: $mobile-space;
@include respond-to('medium') {
right: auto;
left: 40px;
}
}
}