archivalo-oss/replayweb.page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Format src files with Prettier (#215)

Browse Source 
Formats files in `src` with [prettier for consistent code style](https://prettier.io/docs/en/why-prettier) and adds npm script

Related to https://github.com/webrecorder/replayweb.page/issues/201
This commit is contained in:
sua yoo
2023-08-16 18:21:18 -07:00
committed by GitHub
parent 32b2dad06e
commit 1893550274
26 changed files with 3567 additions and 2277 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/misc.js
+102 -63
View File
@@ -11,14 +11,16 @@ import rwpLogo from "../assets/logo.svg";
const apiPrefix = "./w/api";
const replayPrefix = "./w";
// ===========================================================================
const allCss = unsafeCSS(allCssRaw);
function wrapCss(custom) {
return [allCss, custom];
}
const IS_APP = window.IS_APP || window.electron && window.electron.IS_APP || window.matchMedia("(display-mode: standalone)").matches;
const IS_APP =
window.IS_APP ||
(window.electron && window.electron.IS_APP) ||
window.matchMedia("(display-mode: standalone)").matches;
// eslint-disable-next-line no-undef
const VERSION = __VERSION__;
@@ -33,10 +35,8 @@ function clickOnSpacebarPress(event) {
}
}
// ===========================================================================
class FaIcon extends LitElement
{
class FaIcon extends LitElement {
constructor() {
super();
this.size = "1.1em";
@@ -49,23 +49,23 @@ class FaIcon extends LitElement
svg: { type: String },
size: { type: String },
width: { type: String },
height: { type: String }
height: { type: String },
};
}
static get styles() {
return css`
:host {
display: inline-block;
padding: 0;
margin: 0;
line-height: 1.0em;
}
:host svg {
fill: var(--fa-icon-fill-color, currentcolor);
width: var(--fa-icon-width, 19px);
height: var(--fa-icon-height, 19px);
}
:host {
display: inline-block;
padding: 0;
margin: 0;
line-height: 1em;
}
:host svg {
fill: var(--fa-icon-fill-color, currentcolor);
width: var(--fa-icon-width, 19px);
height: var(--fa-icon-height, 19px);
}
`;
}
@@ -88,14 +88,14 @@ class FaIcon extends LitElement
}
}
return html`<svg style="${styleMap(styles)}"><g>${unsafeSVG(this.svg)}</g></svg>`;
return html`<svg style="${styleMap(styles)}">
<g>${unsafeSVG(this.svg)}</g>
</svg>`;
}
}
// ===========================================================================
class AnimLogo extends FaIcon
{
class AnimLogo extends FaIcon {
constructor() {
super();
this.svg = rwpLogo;
@@ -103,37 +103,55 @@ class AnimLogo extends FaIcon
static get styles() {
return css`
#wrlogo #stop5687 {
animation: animLeft 7s linear infinite;
}
#wrlogo #stop5687 {
animation: animLeft 7s linear infinite;
}
#wrlogo #stop5689 {
animation: animRight 7s linear infinite;
}
#wrlogo #stop5689 {
animation: animRight 7s linear infinite;
}
@keyframes animLeft {
0% {stop-color: #4876ff}
25% {stop-color: #1b0921}
50% {stop-color: #4876ff}
75% {stop-color: #04cdff}
100% {stop-color: #4876ff}
}
@keyframes animLeft {
0% {
stop-color: #4876ff;
}
25% {
stop-color: #1b0921;
}
50% {
stop-color: #4876ff;
}
75% {
stop-color: #04cdff;
}
100% {
stop-color: #4876ff;
}
}
@keyframes animRight {
0% {stop-color: #04cdff}
25% {stop-color: #4876ff}
50% {stop-color: #1b0921}
75% {stop-color: #4876ff}
100% {stop-color: #04cdff}
}
@keyframes animRight {
0% {
stop-color: #04cdff;
}
25% {
stop-color: #4876ff;
}
50% {
stop-color: #1b0921;
}
75% {
stop-color: #4876ff;
}
100% {
stop-color: #04cdff;
}
}
`;
}
}
// ===========================================================================
class WrModal extends LitElement
{
class WrModal extends LitElement {
constructor() {
super();
this.title = "";
@@ -145,35 +163,41 @@ class WrModal extends LitElement
return {
title: { type: String },
bgClass: { type: String },
noBgClose: { type: Boolean }
noBgClose: { type: Boolean },
};
}
static get styles() {
return wrapCss(css`
.modal-background {
background-color: rgba(10, 10, 10, 0.50);
}
.modal-background {
background-color: rgba(10, 10, 10, 0.5);
}
.modal-card-head {
background-color: var(--background, #97a1ff);
}
.modal-card-head {
background-color: var(--background, #97a1ff);
}
.modal-card {
width: 100%;
max-width: var(--modal-width, 640px)
}
.modal-card {
width: 100%;
max-width: var(--modal-width, 640px);
}
`);
}
render() {
return html`
<div class="modal is-active">
<div class="modal-background" @click="${() => !this.noBgClose && this.onClose()}"></div>
return html` <div class="modal is-active">
<div
class="modal-background"
@click="${() => !this.noBgClose && this.onClose()}"
></div>
<div class="modal-card">
<header class="modal-card-head ${this.bgClass}">
<p class="modal-card-title is-3">${this.title}</p>
<button class="delete" aria-label="close" @click="${this.onClose}"></button>
<button
class="delete"
aria-label="close"
@click="${this.onClose}"
></button>
</header>
<section class="modal-card-body">
<slot></slot>
@@ -187,10 +211,25 @@ class WrModal extends LitElement
}
}
customElements.define("fa-icon", FaIcon);
customElements.define("fa-icon", FaIcon);
customElements.define("wr-anim-logo", AnimLogo);
customElements.define("wr-modal", WrModal);
customElements.define("wr-modal", WrModal);
export { wrapCss, IS_APP, VERSION, clickOnSpacebarPress, rwpLogo, FaIcon, AnimLogo, WrModal,
LitElement, html, css, unsafeCSS, unsafeSVG, apiPrefix, replayPrefix };
export {
wrapCss,
IS_APP,
VERSION,
clickOnSpacebarPress,
rwpLogo,
FaIcon,
AnimLogo,
WrModal,
LitElement,
html,
css,
unsafeCSS,
unsafeSVG,
apiPrefix,
replayPrefix,
};