fwtoolkit 0.1.0-alpha.3 → 0.1.0-alpha.6

package/README.md

@@ -1,19 +1,67 @@
 # fwtoolkit
 
-Fidus Writer Toolkit — small, reusable utilities originally written for
-Fidus Writer but usable in any browser or Node-based project.
+Fidus Writer Toolkit — reusable TypeScript utilities, UI helpers and styles
+originally written for [Fidus Writer](https://fiduswriter.org) but usable in any
+browser project.
 
-## Usage
+## JavaScript usage
 
 ```javascript
 import {escapeText, addAlert} from "fwtoolkit"
 import {convertDataURIToBlob} from "fwtoolkit/blob.js"
 ```
 
+## TypeScript
+
+The source is written in TypeScript and ships with declaration files:
+
+```typescript
+import {Dialog} from "fwtoolkit/dialog.js"
+```
+
+## CSS
+
+The package ships the styles for its UI components under `fwtoolkit/css/`.
+Load at least `colors.css` and the component styles you need:
+
+```html
+<link rel="stylesheet" href="node_modules/fwtoolkit/css/colors.css">
+<link rel="stylesheet" href="node_modules/fwtoolkit/css/dialog.css">
+<link rel="stylesheet" href="node_modules/fwtoolkit/css/buttons.css">
+```
+
+In Fidus Writer the CSS is copied automatically to the static files directory
+by the `copy_fwtoolkit_css` postinstall step.
+
+## Demos
+
+Live demos are published on Codeberg Pages:
+
+**https://fiduswriter.codeberg.page/fwtoolkit/**
+
+To build and deploy the demos yourself, run:
+
+```bash
+npm run build
+./scripts/deploy-pages.sh
+```
+
+You will also need to configure a Forgejo webhook in the repository settings
+with the target URL `https://fiduswriter.codeberg.page/fwtoolkit` and branch
+filter `pages`.
+
+## Development
+
+```bash
+npm install
+npm run build
+npm test
+```
+
 ## Contents
 
-- `text.js` — text escaping helpers (`escapeText`, `unescapeText`, `noSpaceTmp`)
-- `blob.js` — `convertDataURIToBlob`
-- `file.js` — file title/path helpers
-- `network.js` — small fetch-based HTTP helpers (`get`, `post`, `postJson`)
-- `index.js` — aggregated exports plus generic UI stubs (`addAlert`, `deactivateWait`)
+- `src/` — TypeScript source
+- `dist/` — compiled JavaScript and declaration files (generated by `npm run build`)
+- `css/` — component styles and a minimal `colors.css`
+- `demo/` — Codeberg Pages demo site
+- `test/` — Jest tests

package/css/add_remove_dialog.css

@@ -0,0 +1,18 @@
+.fw-ar-container {
+    display: inline-block;
+    width: 338px;
+    height: 360px;
+    background-color: var(--cs-white-background);
+    border: solid 1px var(--cs-white-border);
+    vertical-align: middle;
+    padding: 20px 14px 0;
+    overflow-y: auto;
+    margin-bottom: 16px;
+}
+
+.fw-ar-button {
+    display: inline-block;
+    margin: 0 16px;
+    vertical-align: middle;
+    cursor: pointer;
+}

package/css/alerts.css

@@ -0,0 +1,69 @@
+#alerts-outer-wrapper {
+    position: fixed;
+    right: 22px;
+    bottom: 10px;
+    direction: rtl;
+    column-width: 328px;
+    z-index: calc(var(--highest-dialog-z-index, 100) + 2);
+}
+
+#alerts-wrapper {
+    z-index: 1600;
+    direction: ltr;
+}
+
+#alerts-wrapper li {
+    display: block; /* else several of them will stack horizontally. */
+    position: relative;
+    width: 247px;
+    height: auto;
+    padding: 20px 20px 20px 60px;
+    border: none;
+    border-radius: 3px;
+    box-shadow: 0 0 5px rgb(var(--alert-box-shadow-color));
+    margin-bottom: 5px;
+    font-size: 15px;
+    line-height: 20px;
+    opacity: 0;
+    transition: opacity 0.3s;
+    -webkit-column-break-inside: avoid;
+}
+
+#alerts-wrapper li.visible {
+    opacity: 1;
+}
+
+#alerts-wrapper li::before {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    font-size: 20px;
+}
+
+#alerts-wrapper .alerts-error {
+    color: var(--error-text-color);
+    background-color: var(--error-background-color);
+}
+
+#alerts-wrapper .alerts-warning {
+    color: var(--warning-text-color);
+    background-color: rgb(var(--warning-background-color));
+}
+
+#alerts-wrapper .alerts-info {
+    color: var(--info-text-color);
+    background-color: rgb(var(--info-background-color));
+}
+
+#alerts-wrapper .alerts-success {
+    color: var(--success-text-color);
+    background-color: rgb(var(--success-background-color));
+}
+
+/* A form wasn't filled out correctly and the warning was added to the form. */
+div.warning {
+    margin: 0 0 5px;
+    border: 1px solid rgb(var(--warning-border-color));
+    background-color: rgb(var(--warning-background-color));
+    padding: 6px;
+}

package/css/buttons.css

@@ -0,0 +1,373 @@
+.fw-button {
+    display: inline-block;
+    width: auto;
+    height: 34px;
+    line-height: 34px;
+    padding: 0 12px;
+    font-size: 14px;
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 3px;
+    cursor: pointer;
+    text-decoration: none;
+    background: none;
+    box-shadow: none;
+    box-sizing: content-box;
+    position: relative;
+}
+
+.fw-button label {
+    cursor: pointer;
+}
+
+.fw-button:focus,
+.fw-button:active {
+    outline: 5px solid var(--cs-6-background-focus);
+}
+
+.fw-button.fw-uppercase {
+    text-transform: uppercase;
+}
+
+.fw-button.fw-large {
+    height: 40px;
+    line-height: 40px;
+    padding: 0 10px;
+}
+
+.fw-button.fw-small {
+    height: 26px;
+    line-height: 26px;
+    padding: 0 6px;
+}
+
+.fw-button.fw-square {
+    width: 34px;
+    padding: 0;
+    text-align: center;
+}
+
+.fw-button.fw-large.fw-square {
+    width: 40px;
+}
+
+.fw-button .fw-button-icon::before {
+    line-height: 34px;
+    margin: 0;
+}
+
+.fw-button.fw-large .fw-button-icon::before {
+    line-height: 40px;
+}
+
+.fw-button.fw-small .fw-button-icon::before {
+    line-height: 26px;
+}
+
+.fw-button.fw-large.fw-dropdown {
+    padding-right: 22px;
+}
+
+.fw-button.fw-large.fw-dropdown .fa-caret-down {
+    display: block;
+    position: absolute;
+    right: 10px;
+    top: 12px;
+}
+
+.fw-button.fw-light {
+    border-color: var(--cs-light-border);
+    background-color: var(--cs-light-background);
+    color: var(--cs-light-text);
+}
+
+.fw-button.fw-white {
+    border: 0 none;
+    background-color: var(--cs-white-background);
+    color: var(--cs-white-text);
+}
+
+.fw-button.fw-white.ui-state-active {
+    background-color: var(--cs-white-background-selected);
+    color: var(--cs-white-selected);
+}
+
+.fw-button.fw-white:not(.disabled):hover {
+    background-color: var(--cs-white-background-hover);
+    color: var(--cs-white-hover);
+}
+
+.fw-button.fw-light:not(.disabled):hover,
+.fw-button.fw-light.ui-state-active {
+    background-color: var(--cs-light-background-hover);
+    color: var(--cs-light-hover);
+}
+
+.fw-button.fw-green {
+    color: var(--cs-6-text);
+    border-color: var(--cs-6-border);
+    background-color: var(--cs-6-background);
+}
+
+.fw-button.fw-green:not(.disabled):hover {
+    background-color: var(--cs-6-background-hover);
+}
+
+.fw-button.fw-orange {
+    color: var(--cs-3-text);
+    background: linear-gradient(
+        to bottom left,
+        var(--cs-3-background-from),
+        var(--cs-3-background-to)
+    );
+    border-color: var(--cs-3-border);
+}
+
+.fw-button.fw-orange:not(.disabled):hover {
+    background: var(--cs-3-background-hover);
+}
+
+.fw-button.fw-dark {
+    color: var(--cs-dark-text);
+    background: linear-gradient(
+        to bottom left,
+        var(--cs-dark-background-from),
+        var(--cs-dark-background-to)
+    );
+    box-shadow: 0 1px 1px 0 var(--cs-dark-box-shadow) inset;
+    border-color: var(--cs-dark-border);
+}
+
+.fw-button.fw-dark:not(.disabled):hover {
+    background: var(--cs-dark-background-hover);
+}
+
+.fw-button:disabled {
+    background: var(--cs-disabled-background);
+    color: var(--cs-disabled);
+    border-color: var(--cs-disabled-border);
+}
+
+.fw-button.fw-left {
+    float: left;
+}
+
+.fw-button.fw-strong {
+    font-weight: bold;
+}
+
+.fw-button.fw-em {
+    font-style: italic;
+}
+
+.fw-button.fw-smallcaps {
+    font-variant: small-caps;
+}
+
+.fw-button.fw-socialaccount {
+    display: inline-block;
+    width: auto;
+    height: 38px;
+    border-radius: 5px;
+    font-size: 15px;
+    vertical-align: top;
+    line-height: 35px;
+    padding: 0;
+    background: linear-gradient(
+        to bottom left,
+        var(--cs-2-background-from),
+        var(--cs-2-background-to)
+    );
+    box-shadow: 0 0 1px 1px var(--cs-2-box-shadow) inset;
+    border-color: var(--cs-2-border);
+    color: var(--cs-2-text);
+}
+
+.fw-button.fw-socialaccount:hover {
+    box-shadow: none;
+    background: var(--cs-2-background-hover);
+}
+
+.fw-button.fw-socialaccount > span {
+    display: inline-block;
+    width: 37px;
+    height: 100%;
+    text-align: center;
+    font-size: 15px;
+    margin-right: 12px;
+    line-height: 37px;
+    border-right: 1px solid var(--cs-2-border);
+    box-shadow: 1px 0 0 0 var(--cs-2-box-shadow);
+}
+
+.fw-plain-button {
+    display: block;
+    font-size: 11px;
+    line-height: 24px;
+    background-color: var(--cs-light-background);
+    font-weight: 700;
+    text-align: center;
+}
+
+.fw-plain-button:hover {
+    background-color: var(--cs-light-background-hover);
+}
+
+.fw-button.disabled {
+    color: var(--cs-disabled);
+    cursor: default;
+}
+
+/* The remainder of this file uses application specific colors */
+
+.fw-button.fw-facebook {
+    background: linear-gradient(to bottom left, #0d78be, #0d63ab);
+    box-shadow: 0 0 1px 1px #3c9fdf inset;
+    border-color: #0557a1;
+}
+
+.fw-button.fw-facebook:hover {
+    background: #0d63ab;
+}
+
+.fw-button.fw-facebook > span {
+    border-right-color: #0557a1;
+    box-shadow: 1px 0 0 0 #3c9fdf;
+    font-size: 18px;
+}
+
+.fw-button.fw-twitter {
+    background: linear-gradient(to bottom left, #3ccfff, #17addf);
+    box-shadow: 0 0 1px 1px #3dcfff inset;
+    border-color: #2498be;
+}
+
+.fw-button.fw-twitter:hover {
+    background: #17addf;
+}
+
+.fw-button.fw-twitter > span {
+    border-right-color: #2498be;
+    box-shadow: 1px 0 0 0 #8ddffc;
+}
+
+.fw-button.fw-google {
+    background: linear-gradient(to bottom left, #879ded, #6d84d8);
+    box-shadow: 0 0 1px 1px #93a6e6 inset;
+    border-color: #6578bb;
+}
+
+.fw-button.fw-google:hover {
+    background: #6d84d8;
+}
+
+.fw-button.fw-google > span {
+    border-right-color: #6578bb;
+    box-shadow: 1px 0 0 0 #b1c0f2;
+    font-size: 18px;
+}
+
+.fw-button.fw-soundcloud {
+    background: linear-gradient(to bottom left, #f76700, #fa3219);
+    box-shadow: 0 0 1px 1px #f79955 inset;
+    border-color: #c53421;
+}
+
+.fw-button.fw-soundcloud:hover {
+    background: #fa1b19;
+}
+
+.fw-button.fw-soundcloud > span {
+    border-right-color: #c53421;
+    box-shadow: 1px 0 0 0 #f79955;
+    font-size: 18px;
+}
+
+.fw-button.fw-openid {
+    background: linear-gradient(to bottom left, #fae719, #fac219);
+    box-shadow: 0 0 1px 1px #fad819 inset;
+    border-color: #faad19;
+}
+
+.fw-button.fw-openid:hover {
+    background: #e8c817;
+}
+
+.fw-button.fw-openid > span {
+    border-right-color: #faad19;
+    box-shadow: 1px 0 0 0 #fad819;
+    font-size: 18px;
+}
+
+.fw-button.fw-persona {
+    background: linear-gradient(to bottom left, #17e861, #1bbd54);
+    box-shadow: 0 0 1px 1px #29e76c inset;
+    border-color: #168e40;
+}
+
+.fw-button.fw-persona:hover {
+    background: #17a74a;
+}
+
+.fw-button.fw-persona > span {
+    border-right-color: #168e40;
+    box-shadow: 1px 0 0 0 #29e76c;
+    font-size: 18px;
+}
+
+.fw-button.fw-linkedin {
+    background: linear-gradient(to bottom left, #c529e7, #ad22cb);
+    box-shadow: 0 0 1px 1px #d648f4 inset;
+    border-color: #841c9a;
+}
+
+.fw-button.fw-linkedin:hover {
+    background: #9720b0;
+}
+
+.fw-button.fw-linkedin > span {
+    border-right-color: #841c9a;
+    box-shadow: 1px 0 0 0 #d648f4;
+    font-size: 18px;
+}
+
+.fw-button.fw-github {
+    background: linear-gradient(to bottom left, #f95858, #f92958);
+    box-shadow: 0 0 1px 1px #f87795 inset;
+    border-color: #d20e3c;
+}
+
+.fw-button.fw-github:hover {
+    background: #e32653;
+}
+
+.fw-button.fw-github > span {
+    border-right-color: #d20e3c;
+    box-shadow: 1px 0 0 0 #f87795;
+    font-size: 18px;
+}
+
+.fw-button.fw-stackexchange {
+    background: linear-gradient(to bottom left, #fcff23, #eaed0d);
+    box-shadow: 0 0 1px 1px #fdff91 inset;
+    border-color: #ced03f;
+    color: #585854;
+}
+
+.fw-button.fw-stackexchange:hover {
+    background: #fcff00;
+}
+
+.fw-button.fw-stackexchange > span {
+    border-right-color: #ced03f;
+    box-shadow: 1px 0 0 0 #fdff91;
+    font-size: 18px;
+}
+
+.fw-add-button::after {
+    margin-left: 10px;
+}
+
+#comment-filter-dropdown {
+    width: 100px;
+}

package/css/colors.css

@@ -0,0 +1,118 @@
+:root {
+
+    --main-text-color: #2c2723;
+    --main-background-color: #f2f2f2;
+    --overlay-color: 170, 170, 170, 0.3;
+    --input-focus-background-color: #fbf9d2;
+    --input-background-color: #f3f3f3;
+    --input-dialog-border-color: #e0e0e0;
+    --wait-active-background-color: 240, 240, 240, 0.7;
+    --wait-active-full-background-color: 240, 240, 240, 1;
+    --alert-box-shadow-color: 240, 240, 240, 1;
+    --dropup-box-shadow-color: 0, 0, 0, 0.11;
+    --tooltip-background-color: 38, 38, 38, 0.6;
+    --info-text-color: #ffffff;
+    --info-background-color: 36, 113, 176, 0.8;
+    --success-text-color: #ffffff;
+    --success-background-color: 109, 164, 147, 0.8;
+    --warning-text-color: #ffffff;
+    --warning-background-color: 221, 208, 63, 0.8;
+    --warning-border-color: 200, 63, 27, 0.8;
+    --error-border-color: #af3515;
+    --error-background-color: #cc3f1a;
+    --error-text-color: #ffffff;
+    --pulldown-header-text-color: #ffffff;
+    --pulldown-header-background-color: #2c2723;
+    --pulldown-separator-color: #f2f2f2;
+    --pulldown-box-shadow-color: 0, 0, 0, 0.2;
+    --menu-cursor-border-color: #63ab0d;
+
+    /* tabs */
+    --tabs-border-color: #e0e0e0;
+    --tabs-text-inactive: #888888;
+    --tabs-text-active: #333333;
+    --tabs-indicator-color: #42a061;
+
+    /* Color Schemes (CS) */
+
+    /* red text */
+    --cs-1-text: #b73717;
+    --cs-1-icon: #a7321f;
+    --cs-1-hover: #2c2723;
+
+    /* white on blue */
+    --cs-2-background-from: #0d78be;
+    --cs-2-background-to: #0d63ab;
+    --cs-2-background: #0d78be; /* flat */
+    --cs-2-border: #0557a1;
+    --cs-2-background-hover: #0d63ab;
+    --cs-2-box-shadow: #3c9fdf;
+    --cs-2-text: #ffffff;
+
+    /* white on orange */
+    --cs-3-text: #ffffff;
+    --cs-3-background-from: #d3421c;
+    --cs-3-background-to: #b13615;
+    --cs-3-background-hover: #b13615;
+    --cs-3-border: #7d331f;
+
+    /* light green text */
+
+    /* white on light green */
+    --cs-5-background: #4c6860;
+
+    /* white on dark green */
+    --cs-6-text: #ffffff;
+    --cs-6-background: #5a7e73;
+    --cs-6-border: #7d948e;
+    --cs-6-background-focus: #8ab5a6;
+    --cs-6-background-hover: #96c6b8;
+
+    /* white on dark */
+    --cs-dark-text: #ffffff;
+    --cs-dark-hover: #e0e0e0;
+    --cs-dark-border: #4f4d4f;
+    --cs-dark-background-hover: #585858;
+    --cs-dark-background: #585858; /* flat */
+    --cs-dark-background-from: #6a6a6a;
+    --cs-dark-background-to: #585858;
+    --cs-dark-box-shadow: #7f7f7f;
+
+    /* dark on white-ish background */
+    --cs-light-text: #2c2723;
+    --cs-light-hover: #000000;
+    --cs-light-text-secondary: #6e6e6e;
+    --cs-light-border: #e0e0e0;
+    --cs-light-background: #f9f9f9;
+    --cs-light-background-hover: #e0e0e0;
+    --cs-light-box-shadow: #9e9e9e;
+
+    /* black on white */
+    --cs-white-text: #000000;
+    --cs-white-hover: #000000;
+    --cs-white-focus: #000000;
+    --cs-white-selected: #000000;
+    --cs-white-border: #cccccc;
+    --cs-white-header-border: #888888;
+    --cs-white-text-secondary: #727272;
+    --cs-white-placeholder-text: #cecece;
+    --cs-white-background: #ffffff;
+    --cs-white-background-hover: #cccccc;
+    --cs-white-background-focus: #cccccc;
+    --cs-white-background-selected: #dddddd;
+
+    /* disabled */
+    --cs-disabled: #a9a9a9;
+    --cs-disabled-background: #d3d3d3;
+    --cs-disabled-border: #a9a9a9;
+    --overview-checkbox-color: #000000;
+    --overview-checkbox-background-color-from: 255, 255, 255, 1;
+    --overview-checkbox-background-color-to: 255, 255, 255, 0;
+    --overview-checkbox-border: #a9a9a9;
+
+    /* template manager */
+
+    /* editor */
+
+    /* feedback tab */
+}