Skip to content

Commit

Permalink
preflight publishing disabling
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sartxi
Sartxi committed Sep 18, 2024
1 parent 5c5011f commit dc5c200
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 36 deletions.
53 changes: 39 additions & 14 deletions libs/blocks/preflight/panels/general.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { html, signal, useEffect } from '../../../deps/htm-preact.js';
import userCanPublishPage from '../../../tools/utils/publish.js';

const NOT_FOUND = { preview: { lastModified: 'Not found' }, live: { lastModified: 'Not found' } };

Expand All @@ -16,19 +17,19 @@ async function getStatus(url) {
const resp = await fetch(adminUrl);
if (!resp.ok) return {};
const json = await resp.json();
const publish = await userCanPublishPage(json, false);
const preview = json.preview.lastModified || 'Never';
const live = json.live.lastModified || 'Never';
const edit = json.edit.url;
return { url, edit, preview, live };
return { url, edit, preview, live, publish };
}

function getStatuses() {
Object.keys(content.value).forEach((key) => {
content.value[key].items.forEach((item, idx) => {
getStatus(item.url).then((status) => {
content.value[key].items[idx] = status;
content.value = { ...content.value };
});
async function getStatuses() {
Object.keys(content.value).forEach(async (key) => {
content.value[key].items.forEach(async (item, idx) => {
const status = await getStatus(item.url);
content.value[key].items[idx] = status;
content.value = { ...content.value };
});
});
}
Expand Down Expand Up @@ -73,7 +74,8 @@ async function setContent() {
async function handleAction(action) {
Object.keys(content.value).map(async (key) => {
content.value[key].items.forEach(async (item, idx) => {
if (!item.checked) return;
const checkPublish = action === 'live' ? (item.publish && !item.publish.canPublish) : false;
if (!item.checked || checkPublish) return;
content.value[key].items[idx].action = action;
content.value = { ...content.value };
const adminUrl = getAdminUrl(item.url, action);
Expand Down Expand Up @@ -128,7 +130,19 @@ function prettyPath(url) {
return url.hash ? `${url.pathname} (${url.hash})` : url.pathname;
}

function usePublishProps(item) {
let disablePublish;
if (item.publish && !item.publish.canPublish) {
disablePublish = html`${item.publish.message}`;
}
return {
publishText: html`${item.action === 'live' ? 'Publishing' : prettyDate(item.live)}`,
disablePublish,
};
}

function Item({ name, item, idx }) {
const { publishText, disablePublish } = usePublishProps(item);
const isChecked = item.checked ? ' is-checked' : '';
const isFetching = item.edit ? '' : ' is-fetching';
if (!item.url) return undefined;
Expand All @@ -139,7 +153,9 @@ function Item({ name, item, idx }) {
<p><a href=${item.url.pathname} target=_blank>${prettyPath(item.url)}</a></p>
<p>${item.edit && html`<a href=${item.edit} class=preflight-edit target=_blank>EDIT</a>`}</p>
<p class=preflight-date-wrapper>${item.action === 'preview' ? 'Previewing' : prettyDate(item.preview)}</p>
<p class=preflight-date-wrapper>${item.action === 'live' ? 'Publishing' : prettyDate(item.live)}</p>
<p class="preflight-date-wrapper">
${isChecked && disablePublish ? html`<span class=disabled-publish>${disablePublish}</span>` : publishText}
</p>
</div>`;
}

Expand Down Expand Up @@ -167,12 +183,18 @@ function ContentGroup({ name, group }) {
export default function General() {
useEffect(() => { setContent(); }, []);

const checked = Object.keys(content.value)
.find((key) => content.value[key].items.find((item) => item.checked));
const allChecked = Object.values(content.value)
.flatMap((item) => item.items).filter((item) => item.checked);

const checked = !!allChecked.length;
const publishable = allChecked
.filter((item) => item.checked && !!item.publish?.canPublish).length;

const hasPage = content.value.page;
const selectStyle = checked ? 'Select none' : 'Select all';

const tooltip = allChecked.length !== publishable && 'Puplishing disabled pages will be ignored';

return html`
<div class=preflight-general-content>
${Object.keys(content.value).map((key) => html`<${ContentGroup} name=${key} group=${content.value[key]} />`)}
Expand All @@ -188,8 +210,11 @@ export default function General() {
<div id=preview-action class=preflight-action-wrapper>
<button class=preflight-action onClick=${() => handleAction('preview')}>Preview</button>
</div>
<div id=publish-action class=preflight-action-wrapper>
<button class=preflight-action onClick=${() => handleAction('live')}>Publish</button>
<div id=publish-action class="preflight-action-wrapper${tooltip ? ' tooltip' : ''}" data-tooltip=${tooltip}>
${!!publishable && html`
<button class="preflight-action" onClick=${() => handleAction('live')}>
Publish
</button>`}
</div>
`}
</div>
Expand Down
104 changes: 82 additions & 22 deletions libs/blocks/preflight/preflight.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ p.preflight-content-heading {
}

p.preflight-content-heading-edit {
padding-left: 4px;
padding-left: 4px;
}

.preflight-group-row {
Expand Down Expand Up @@ -200,6 +200,10 @@ p.preflight-date-wrapper {
margin: 0;
}

p.preflight-date-wrapper .disabled-publish {
font-size: 0.8em;
}

.preflight-group-row p {
margin: 0;
line-height: 1;
Expand Down Expand Up @@ -238,6 +242,9 @@ span.preflight-time {
}

.preflight-action {
display: flex;
align-items: center;
cursor: pointer;
background: var(--action-color);
color: #FFF;
font-weight: 700;
Expand All @@ -251,6 +258,51 @@ span.preflight-time {
clip-path: polygon(0% 0%, var(--notch-size) 0%, calc(100% - var(--notch-size)) 0%, 100% var(--notch-size), 100% calc(100% - var(--notch-size)), 100% 100%, 0% 100%, 0% 100%);
}

.tooltip {
position: relative;
}

.tooltip::before {
content: attr(data-tooltip);
position: absolute;
right: 74%;
transform: translateX(50%);
bottom: 130%;
margin-top: 15px;
width: max-content;
max-width: 157px;
padding: 10px;
border-radius: 4px;
background: white;
color: var(--action-color);
text-align: center;
font-size: 14px;
font-weight: 400;
opacity: 0;
transition: opacity 0.3s, visibility 0.3s;
visibility: hidden;
line-height: 19px;
}

.tooltip::after {
content: '';
bottom: 103%;
right: 69%;
position: absolute;
margin: 12px 1px 0;
border: 5px solid white;
border-color: white transparent transparent;
opacity: 0;
transition: 200ms;
visibility: hidden;
}

.tooltip:hover::before,
.tooltip:hover::after {
opacity: 1;
visibility: visible;
z-index: 9;
}

/* SEO */
.seo-columns {
Expand Down Expand Up @@ -282,11 +334,11 @@ span.preflight-time {
animation: spin 2s linear infinite;
}

@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

.result-icon.green {
Expand Down Expand Up @@ -346,7 +398,7 @@ span.preflight-time {
.dialog-modal#preflight .problem-links table td a {
color: #fff;
display: inline-block;
overflow-x: scroll;
overflow-x: scroll;
position: absolute;
top: 50%;
left: 0;
Expand Down Expand Up @@ -387,19 +439,19 @@ span.preflight-time {
}

.problem-link {
border: 3px solid #000!important;
color: #fff!important;
font-size: larger!important;
font-weight: bold!important;
padding-top: 12px!important;
padding-bottom: 12px!important;
border: 3px solid #000 !important;
color: #fff !important;
font-size: larger !important;
font-weight: bold !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
animation: pulse 1.5s ease-out infinite;
}

.problem-link:hover {
background-color: transparent!important;
color: inherit!important;
border-color:rgb(255 0 0)!important;
background-color: transparent !important;
color: inherit !important;
border-color: rgb(255 0 0) !important;
}

.problem-link::after {
Expand All @@ -410,9 +462,17 @@ span.preflight-time {
}

@keyframes pulse {
0% {background-color: rgb(255 0 0);}
50% {background-color: rgb(150 0 0);}
100% {background-color: rgb(255 0 0);}
0% {
background-color: rgb(255 0 0);
}

50% {
background-color: rgb(150 0 0);
}

100% {
background-color: rgb(255 0 0);
}
}

/* Accessibility css */
Expand All @@ -425,7 +485,7 @@ span.preflight-time {
margin-bottom: 20px;
}

.access-columns .grid-heading + .access-columns .grid-heading {
.access-columns .grid-heading+.access-columns .grid-heading {
margin-top: 20px;
}

Expand Down Expand Up @@ -471,7 +531,7 @@ span.preflight-time {
margin-bottom: 0;
}

.access-columns .grid-heading.is-closed + .access-image-grid {
.access-columns .grid-heading.is-closed+.access-image-grid {
display: none;
}

Expand Down Expand Up @@ -566,4 +626,4 @@ img[data-alt-check]::after {

.dialog-modal#preflight table td h3 {
font-size: 16px;
}
}

0 comments on commit dc5c200

Please sign in to comment.