diff --git a/.circleci/config.yml b/.circleci/config.yml index f18f84943..fb239ceb3 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -10,7 +10,7 @@ orbs: jobs: build: docker: - - image: cimg/node:20.17.0 + - image: cimg/node:20.18.0 - image: mongo:4.4 working_directory: ~/homebrewery @@ -64,21 +64,30 @@ jobs: - run: name: Test - Mustache Spans command: npm run test:mustache-syntax - - run: - name: Test - Definition Lists - command: npm run test:definition-lists - run: name: Test - Hard Breaks command: npm run test:hard-breaks + - run: + name: Test - Non-Breaking Spaces + command: npm run test:non-breaking-spaces - run: name: Test - Variables command: npm run test:variables + - run: + name: Test - Emojis + command: npm run test:emojis - run: name: Test - Routes command: npm run test:route + - run: + name: Test - HTML sanitization + command: npm run test:safehtml - run: name: Test - Coverage command: npm run test:coverage + - run: + name: Test - Content Negotiation + command: npm run test:content-negotiation workflows: build_and_test: diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 208b0275b..2204679a6 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -5,6 +5,15 @@ updates: schedule: interval: daily open-pull-requests-limit: 99 + groups: + dev-dependencies: + dependency-type: "development" + patterns: ["*"] + update-types: ["patch", "minor"] + prod-dependencies: + dependency-type: "production" + patterns: ["*"] + update-types: ["patch", "minor"] ignore: - dependency-name: eslint versions: diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index b02835726..020653272 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,26 +1,29 @@ - +> [!TIP] +> Before submitting a Pull Request, please consider the following to speed up reviews: +> - 👷‍♀️ Create small PRs. Large PRs can usually be broken down into incremental PRs. +> - 🚩 Do you already have several open PRs? Consider finishing or asking for help with existing PRs first. +> - 🔧 Does your PR reference a discussed and approved issue, especially for personal or edge-case requests? +> - 💡 Is the solution agreed upon? Save rework time by discussing strategy before coding. ## Description +_Describe what your PR accomplishes. Consider walking through the main changes to aid reviewers in following your code, especially if it covers multiple files._ ## Related Issues or Discussions +> [!CAUTION] +> If no issue exists yet, create it, and get agreement on the approach (or paste in a previous agreement from chat, etc.) before moving forward. (Experimental PRs are OK without prior discussion, but do not expect to get merged.) + - Closes # ## QA Instructions, Screenshots, Recordings -_Please replace this line with instructions on how to test or view your changes, as well as any before/after -images for UI changes._ +_Replace this line with instructions on how to test or view your changes, as well as any before/after +screenshots or recordings for UI changes._ ### Reviewer Checklist -_Please replace the list below with specific features you want reviewers to look at._ +_Replace the list below with specific features you want reviewers to look at._ *Reviewers, refer to this list when testing features, or suggest new items * - [ ] Verify new features are functional @@ -32,5 +35,3 @@ _Please replace the list below with specific features you want reviewers to look - [ ] Feature A handles negative numbers - [ ] Identify opportunities for simplification and refactoring - [ ] Check for code legibility and appropriate comments - -
Copy this list diff --git a/.stylelintrc.json b/.stylelintrc.json index 2c7a9afdf..b5f2e7712 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,48 +1,48 @@ { - "extends": [ - "stylelint-config-recess-order", - "stylelint-config-recommended"], - "plugins": [ - "@stylistic/stylelint-plugin", - "./stylelint_plugins/declaration-colon-align.js", - "./stylelint_plugins/declaration-colon-min-space-before", - "./stylelint_plugins/declaration-block-multi-line-min-declarations" - ], - "customSyntax": "postcss-less", - "rules": { - "no-descending-specificity" : null, - "at-rule-no-unknown" : null, - "function-no-unknown" : null, - "font-family-no-missing-generic-family-keyword" : null, - "font-weight-notation" : "named-where-possible", - "font-family-name-quotes" : "always-unless-keyword", - "@stylistic/indentation" : "tab", - "no-duplicate-selectors" : true, - "@stylistic/color-hex-case" : "upper", - "color-hex-length" : "long", - "@stylistic/selector-combinator-space-after" : "always", - "@stylistic/selector-combinator-space-before" : "always", - "@stylistic/selector-attribute-operator-space-before" : "never", - "@stylistic/selector-attribute-operator-space-after" : "never", - "@stylistic/selector-attribute-brackets-space-inside" : "never", - "selector-attribute-quotes" : "always", - "selector-pseudo-element-colon-notation" : "double", - "@stylistic/selector-pseudo-class-parentheses-space-inside" : "never", - "@stylistic/block-opening-brace-space-before" : "always", - "naturalcrit/declaration-colon-min-space-before" : 1, - "@stylistic/declaration-block-trailing-semicolon" : "always", - "@stylistic/declaration-colon-space-after" : "always", - "@stylistic/number-leading-zero" : "always", - "function-url-quotes" : ["always", { "except": ["empty"] }], - "function-url-scheme-disallowed-list" : ["data","http"], - "comment-whitespace-inside" : "always", - "@stylistic/string-quotes" : "single", - "@stylistic/media-feature-range-operator-space-before" : "always", - "@stylistic/media-feature-range-operator-space-after" : "always", - "@stylistic/media-feature-parentheses-space-inside" : "never", - "@stylistic/media-feature-colon-space-before" : "always", - "@stylistic/media-feature-colon-space-after" : "always", - "naturalcrit/declaration-colon-align" : true, - "naturalcrit/declaration-block-multi-line-min-declarations": 1 - } + "extends": [ + "stylelint-config-recess-order", + "stylelint-config-recommended"], + "plugins": [ + "@stylistic/stylelint-plugin", + "./stylelint_plugins/declaration-colon-align.js", + "./stylelint_plugins/declaration-colon-min-space-before", + "./stylelint_plugins/declaration-block-multi-line-min-declarations" + ], + "customSyntax": "postcss-less", + "rules": { + "no-descending-specificity" : null, + "at-rule-no-unknown" : null, + "function-no-unknown" : null, + "font-family-no-missing-generic-family-keyword" : null, + "font-weight-notation" : "named-where-possible", + "font-family-name-quotes" : "always-unless-keyword", + "@stylistic/indentation" : "tab", + "no-duplicate-selectors" : true, + "@stylistic/color-hex-case" : "upper", + "color-hex-length" : "long", + "@stylistic/selector-combinator-space-after" : "always", + "@stylistic/selector-combinator-space-before" : "always", + "@stylistic/selector-attribute-operator-space-before" : "never", + "@stylistic/selector-attribute-operator-space-after" : "never", + "@stylistic/selector-attribute-brackets-space-inside" : "never", + "selector-attribute-quotes" : "always", + "selector-pseudo-element-colon-notation" : "double", + "@stylistic/selector-pseudo-class-parentheses-space-inside" : "never", + "@stylistic/block-opening-brace-space-before" : "always", + "naturalcrit/declaration-colon-min-space-before" : 1, + "@stylistic/declaration-block-trailing-semicolon" : "always", + "@stylistic/declaration-colon-space-after" : "always", + "@stylistic/number-leading-zero" : "always", + "function-url-quotes" : ["always", { "except": ["empty"] }], + "function-url-scheme-disallowed-list" : ["data","http"], + "comment-whitespace-inside" : "always", + "@stylistic/string-quotes" : "single", + "@stylistic/media-feature-range-operator-space-before" : "always", + "@stylistic/media-feature-range-operator-space-after" : "always", + "@stylistic/media-feature-parentheses-space-inside" : "never", + "@stylistic/media-feature-colon-space-before" : "always", + "@stylistic/media-feature-colon-space-after" : "always", + "naturalcrit/declaration-colon-align" : true, + "naturalcrit/declaration-block-multi-line-min-declarations" : 1 + } } diff --git a/Dockerfile b/Dockerfile index 84652fbf9..17d02b01f 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -FROM node:20-alpine +FROM node:22-alpine RUN apk --no-cache add git ENV NODE_ENV=docker @@ -9,7 +9,10 @@ WORKDIR /usr/src/app # Copy package.json into the image, then run yarn install # This improves caching so we don't have to download the dependencies every time the code changes COPY package.json ./ +COPY config/docker.json usr/src/app/config # --ignore-scripts tells yarn not to run postbuild. We run it explicitly later +RUN node --version +RUN npm --version RUN npm install --ignore-scripts # Bundle app source and build application diff --git a/README.DOCKER.md b/README.DOCKER.md index 356ac398a..4dfbef045 100644 --- a/README.DOCKER.md +++ b/README.DOCKER.md @@ -1,12 +1,119 @@ -# Running Homebrewery via Docker +# Offline Install Instructions: Docker -The repo includes a Dockerfile and a docker-compose.yml file. +These instructions are for setting up a persistent instance of the Homebrewery application locally using Docker. -To run the application via docker-compose.yml: -`docker-compose up -d` +If you intend to develop with Homebrewery, following the Homebrewery application section of this guide is not recommended. Using docker to deploy MongoDB locally for development is not a bad idea at all, however. -To stop the application: -`docker-compose down` +# Install Docker + +## Docker Desktop (MacOS/Windows) + +Windows and Mac installs use Docker Desktop. Current install instructions are below. + +* [Mac](https://docs.docker.com/desktop/mac/install/) +* [Windows](https://docs.docker.com/desktop/windows/install/) + +You can set up the docker engine to start on boot via the Docker desktop UI. + +## Docker Engine + +Linux installs use Docker Engine. Docker provides installers and instructions for several of the most common distrubutions. If you do not see yours listed, it is very likely supported indirectly by your distribution. + +* [Arch](https://docs.docker.com/desktop/setup/install/linux/archlinux/) +* [CentOS](https://docs.docker.com/engine/install/centos/) +* [Debian](https://docs.docker.com/engine/install/debian/) +* [Fedora](https://docs.docker.com/engine/install/fedora/) +* [RHEL](https://docs.docker.com/engine/install/rhel/) +* [Ubuntu](https://docs.docker.com/engine/install/ubuntu/) + +### Post installation steps +[Manage Docker as a non-root user (highly recommended)](https://docs.docker.com/engine/install/linux-postinstall/#manage-docker-as-a-non-root-user) +[Enable Docker to start on boot (highly recommended)](https://docs.docker.com/engine/install/linux-postinstall/#configure-docker-to-start-on-boot) + +# Build Homebrewery Image + +Next we build the homebrewery docker image. Start by cloning the repository. + +```shell +git clone https://github.com/naturalcrit/homebrewery.git +cd homebrewery +``` + +Make an changes you need to `config/docker.json` then build the image. If it does not exist,the below as a template. + +``` +{ +"host" : "localhost:8000", +"naturalcrit_url" : "local.naturalcrit.com:8010", +"secret" : "secret", +"web_port" : 8000, +"enable_v3" : true, +"mongodb_uri": "mongodb://172.17.0.2/homebrewery", +"enable_themes" : true, +} +``` + +```shell +docker-compose build homebrewery +``` + +# Add Mongo container + +Once docker is installed and running, it is time to set up the containers. First up, Mongo. + +```shell +docker run --name homebrewery-mongodb -d --restart unless-stopped -v mongodata:/data/db -p 27017:27017 mongo:latest +``` + +Older CPUs may run into an issue with AVX support. +``` +WARNING: MongoDB 5.0+ requires a CPU with AVX support, and your current system does not appear to have that! + see https://jira.mongodb.org/browse/SERVER-54407 + see also https://www.mongodb.com/community/forums/t/mongodb-5-0-cpu-intel-g4650-compatibility/116610/2 + see also https://github.com/docker-library/mongo/issues/485#issuecomment-891991814 +``` +If you see a message similar to this, try using the bitnami mongo instead. + +```shell +docker run --name homebrewery-mongodb -d --restart unless-stopped -v mongodata:/data/db -p 27017:27017 bitnami/mongo:latest +``` + +If your distribution is running on an arm device such as a Raspberry Pi, you will need to run the arm-built MongoDB v4.4. + +```shell +docker run --name homebrewery-mongodb -d --restart unless-stopped -v mongodata:/data/db -p 27017:27017 arm64v8/mongo:4.4 +``` + +## Run the Homebrewery Image +```shell +# Make sure you run this in the homebrewery directory +docker run --name homebrewery-app -d --restart unless-stopped -e NODE_ENV=docker -v $(pwd)/config/docker.json:/usr/src/app/config/docker.json -p 8000:8000 docker.io/library/homebrewery:latest +``` + +## Updating the Image + +When Homebrewery code updates, your docker container will not automatically follow the changes. To do so you will need to rebuild your homebrewery image. + +First, return to your homebrewery clone (from Build Homebrewery Image above) or recreate the clone if you deleted your copy of the code. + +First, delete the existing image. + +```shell +docker rm -f homebrewery-app +``` + +Next, update the clone's code to the latest version. + +```shell +cd homebrewery +git checkout master +git pull upstream master +``` + +Finally, rebuild and restart the homebrewery image. + +```shell +docker-compose build homebrewery +docker run --name homebrewery-app -d --restart unless-stopped -e NODE_ENV=docker -v $(pwd)/config/docker.json:/usr/src/app/config/docker.json -p 8000:8000 docker.io/library/homebrewery:latest +``` -To stop the application and remove all data: -`docker-compose down -v` diff --git a/README.md b/README.md index df7f41503..5206f4cbf 100644 --- a/README.md +++ b/README.md @@ -144,3 +144,4 @@ your contribution to the project, please join our [gitter chat][gitter-url]. [github-mark-duplicate-url]: https://docs.github.com/en/free-pro-team@latest/github/managing-your-work-on-github/about-duplicate-issues-and-pull-requests [github-pr-docs-url]: https://docs.github.com/en/free-pro-team@latest/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request [gitter-url]: https://gitter.im/naturalcrit/Lobby + diff --git a/babel.config.json b/babel.config.json new file mode 100644 index 000000000..5e768ec31 --- /dev/null +++ b/babel.config.json @@ -0,0 +1,10 @@ +{ + "presets": [ + "@babel/preset-env", + "@babel/preset-react" + ], + "plugins": [ + "@babel/plugin-transform-runtime", + "babel-plugin-transform-import-meta" + ] +} diff --git a/changelog.md b/changelog.md index 1f7815d8d..0a108b9f2 100644 --- a/changelog.md +++ b/changelog.md @@ -77,14 +77,280 @@ pre { } .varSyntaxTable th:first-of-type { - width:6cm; + width:6cm; +} + +.page .exampleTable td,th { + border:1px dashed #00000030; } ``` - ## changelog For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery). +### Wednesday 7/09/2025 - v3.19.3 + +{{taskList +##### calculuschild +* [x] Restoring original saving behavior; will continue investigating why save was failing for some users in background +}} + + +### Wednesday 7/09/2025 - v3.19.2 + +{{taskList +##### calculuschild +* [x] Hotfix for saving issues - Please refresh your browser and report if problems continue +}} + +### Wednesday 7/09/2025 - v3.19.1 + +{{taskList +##### calculuschild +* [x] Send diffs instead of full file on save - should help with timeout/disconnect errors +}} + +\column + +### Thursday 05/22/2025 - v3.19.0 + +{{taskList +##### abquintic +* [x] Fix crash due to colons after `\page` + +Fixes issue [#4105](https://github.com/naturalcrit/homebrewery/issues/4105) + +* [x] Fix images with spaces in alt text not rendering + +Fixes issue [#3659](https://github.com/naturalcrit/homebrewery/issues/3659) + +* [x] Custom snippets! Open the new {{openSans **:fas_table_list: SNIPPETS**}} tab (next to the {{openSans **:fas_paintbrush: STYLE**}} tab). Custom snippets will appear in a new snippet dropdown, and will be included when imported as a custom theme. + +* [x] Move several generic styles/snippets from PHB to the Blank theme; generic snippets like image masks no longer require the PHB theme. + +* [x] Extract several Markdown+ syntax extensions into their own NPM packages, for use by the wider community. + +* [x] Allow `\pagebreak` and `\columnbreak` as alternatives to `\page` and `\column` + +Partially fixes issue [#4035](https://github.com/naturalcrit/homebrewery/issues/4035) + +* [x] Fix misbehaving column breaks on old Chrome + +Fixes issue [#4192](https://github.com/naturalcrit/homebrewery/issues/4192) + +* [x] Self-host font-awesome icons; fix missing icons on local installs + +Fixes issue [#1965](https://github.com/naturalcrit/homebrewery/issues/1965) +Fixes issue [#1548](https://github.com/naturalcrit/homebrewery/issues/1548) + +##### G-Ambatte +* [x] Fix CORS issue on local installs + +* [x] Fix print size issues when using the Facing and Flow view options. + +Fixes issue [#4146](https://github.com/naturalcrit/homebrewery/issues/4146) + +* [x] New built-in `$[HB_pageNumber]` variable. Works with math operations or can be reassigned like any other variable for more customization over the old `{{pageNumber,auto}}` snippet.\ +New snippet found at {{openSans **:fas_pencil: TEXT EDITOR :fas_arrow_right: :fas_bookmark: PAGE NUMBERING :fas_arrow_right: :fas_arrow_down_1_9: VARIABLE AUTO PAGE NUMBER**}} + +##### 5e-Cleric +* [x] Fix search bar covering up snippet bar (3 times) + +Fixes issue [#4098](https://github.com/naturalcrit/homebrewery/issues/4098) + +* [x] Save view toolbar settings across sessions + +Fixes issue [#3835](https://github.com/naturalcrit/homebrewery/issues/3835) + +* [x] Fix styling issues on the view toolbar + +* [x] Update the Darkbrewery editor theme + +Fixes issue [#3312](https://github.com/naturalcrit/homebrewery/issues/3312) + +}} + +\page + +### Monday 03/10/2025 - v3.18.0 + +{{taskList +##### abquintic +* [x] Add ability to paste in any Share ID/URL into a brew's {{openSans :fas_circle_info: **Properties** :fas_arrow_right: **THEMES**}} selection, as long as that brew has been tagged as `meta:theme`. You can now share your custom brew themes without needing to make a personal copy. +* [x] Begin migration of custom Markdown extensions into their own NPM packages, for easier adoption by other users or projects +* [x] Fix external HTML appearing in open codeblocks + +Fixes issue [#3206](https://github.com/naturalcrit/homebrewery/issues/3206) + +* [x] Fix tables not rendering when directly after text + + +##### G-Ambatte +* [x] Cleanup of "cover pages" in the {{openSans :fas_rectangle_list: **NAVIGATION**}} list +* [x] Fix autosave triggering when no changes are present + +Fixes issue [#4051](https://github.com/naturalcrit/homebrewery/issues/4051) + +* [x] Remove empty table rows resulting from rowspan + +Fixes issue [#1729](https://github.com/naturalcrit/homebrewery/issues/1729) + +##### 5e-Cleric +* [x] Style fixes for covers art and logos on A4 size pages +* [x] Fix crash when trying to open brews that don't exist +* [x] Tweaks and style update styling on {{openSans **VAULT** :fas_dungeon:}} page. + +Fixes issue [#4079](https://github.com/naturalcrit/homebrewery/issues/4079) + +##### Calculuschild +* [x] `꞉꞉꞉꞉` now produces `
` instead of a `
` +* [x] Fix typos in tables freezing the editor + +Fixes issue [#4059](https://github.com/naturalcrit/homebrewery/issues/4059) + + +##### MollyMaclachlan (New Contributor!) +* [x] Fixed typos in the Monster Stat Block snippet + +Fixes issue [#4073](https://github.com/naturalcrit/homebrewery/issues/4073) + + +##### All +* [x] Update dependencies and scripts +* [x] Refactor components and backend tools +}} + +\column + +### Thursday 01/30/2025 - v3.17.0 + +{{taskList +##### 5e-Cleric + +* [x] Update FAQ + +* [x] Fix styling for Vault buttons and checkboxes + +* [x] Improve navigation bar styling + +* [x] Add feature to change username at https://www.naturalcrit.com/account + +* [x] Fix Reddit link crash when title has non-latin chars + +##### abquintic + +* [x] Fix page shadows toolbar option + +Fixes issue [#3919](https://github.com/naturalcrit/homebrewery/issues/3919) + +* [x] Add `:>>>` syntax for horizontal :>>>>> spaces + +* [x] Update Docker install instructions + +Fixes issue [#1930](https://github.com/naturalcrit/homebrewery/issues/1930) + +* [x] Allow styling pages via `\page{myStyles}` (with calculuschild) + +Fixes issue [#3901](https://github.com/naturalcrit/homebrewery/issues/3901) + +* [x] Update Ubuntu install instructions + +Fixes issue [#1952](https://github.com/naturalcrit/homebrewery/issues/1952) + +* [x] Add `:-:` `:-` `-:` syntax for paragraph alignment, similar to table column alignment; for example: + +-: -: Right-aligned + +:-: :-: Centered + +* [x] Add `:-- 50% --:` syntax to allow setting table column widths by percentage; for example: +``` +| Narrow | Wide | +|:- 10% -:|:-90%--:| +| Cell | Cell | +``` + + +| Narrow | Wide | +|:- 10% -:|:-90%--:| +|Cell | Cell | +{exampleTable} + +##### G-Ambatte + +* [x] Fix crash when opening brew Properties tab + +Fixes issue [#3927](https://github.com/naturalcrit/homebrewery/issues/3927) + +* [x] Update error pages with steps to refresh credentials + +Fixes issue [#3955](https://github.com/naturalcrit/homebrewery/issues/3955) + +* [x] Add {{openSans :fas_rectangle_list: **NAVIGATION**}} menu to the viewer toolbar + +##### calculuschild + +* [x] Reduce display lag on large brews + +##### Gazook89 + +* [x] Smarter detection of current page number + +Fixes issue [#3824](https://github.com/naturalcrit/homebrewery/issues/3824) + +##### All +* [x] Update dependencies and scripts +* [x] Refactor components and fix various errors +}} + +\page + +### Wednesday 11/27/2024 - v3.16.1 + +{{taskList +##### 5e-Cleric + +* [x] Allow linking to specific HTML IDs via `#ID` at the end of the URL, e.g.: `homebrewery.naturalcrit.com/share/share/a6RCXwaDS58i#p4` to link to Page 4 directly + +Fixes issues [#2820](https://github.com/naturalcrit/homebrewery/issues/2820), [#3505](https://github.com/naturalcrit/homebrewery/issues/3505) + +* [x] Fix generation of link to certain Google Drive brews + +Fixes issue [#3776](https://github.com/naturalcrit/homebrewery/issues/3776) + +##### abquintic + +* [x] Fix blank pages appearing when pasting text + +Fixes issue [#3718](https://github.com/naturalcrit/homebrewery/issues/3718) + +##### Gazook89 + +* [x] Add new brew viewing options to the view toolbar +- {{fac,single-spread}} {{openSans **SINGLE PAGE**}} +- {{fac,facing-spread}} {{openSans **TWO PAGE**}} +- {{fac,flow-spread}} {{openSans **GRID**}} + +Fixes issue [#1379](https://github.com/naturalcrit/homebrewery/issues/1379) + +* [x] Updates to tag input boxes + +##### G-Ambatte + +* [x] Admin tools to fix certain corrupted documents + +Fixes issue [#3801](https://github.com/naturalcrit/homebrewery/issues/3801) + +* [x] Fix print window being affected by document zoom + +Fixes issue [#3744](https://github.com/naturalcrit/homebrewery/issues/3744) + + +##### calculuschild, 5e-Cleric, G-Ambatte, Gazook89, abquintic + +* [x] Multiple code refactors, cleanups, and security fixes +}} + ### Saturday 10/12/2024 - v3.16.0 {{taskList @@ -2007,4 +2273,4 @@ Massive changelog incoming: * Added `phb.standalone.css` plus a build system for creating it * Added page numbers and footer text -* Page accent now flips each page +* Page accent now flips each page \ No newline at end of file diff --git a/client/admin/admin.jsx b/client/admin/admin.jsx index f2f2667a4..29973d221 100644 --- a/client/admin/admin.jsx +++ b/client/admin/admin.jsx @@ -1,47 +1,50 @@ -require('./admin.less'); -const React = require('react'); -const createClass = require('create-react-class'); - +import './admin.less'; +import React, { useEffect, useState } from 'react'; const BrewUtils = require('./brewUtils/brewUtils.jsx'); const NotificationUtils = require('./notificationUtils/notificationUtils.jsx'); +import AuthorUtils from './authorUtils/authorUtils.jsx'; +import LockTools from './lockTools/lockTools.jsx'; -const tabGroups = ['brew', 'notifications']; +const tabGroups = ['brew', 'notifications', 'authors', 'locks']; -const Admin = createClass({ - getDefaultProps : function() { - return {}; - }, +const Admin = ()=>{ + const [currentTab, setCurrentTab] = useState(''); - getInitialState : function(){ - return ({ - currentTab : 'brew' - }); - }, + useEffect(()=>{ + setCurrentTab(localStorage.getItem('hbAdminTab') || 'brew'); + }, []); - handleClick : function(newTab){ - if(this.state.currentTab === newTab) return; - this.setState({ - currentTab : newTab - }); - }, + useEffect(()=>{ + localStorage.setItem('hbAdminTab', currentTab); + }, [currentTab]); - render : function(){ - return
+ return ( +
- homebrewery admin + The Homebrewery Admin Page + back to homepage
- {this.state.currentTab==='brew' && } - {this.state.currentTab==='notifications' && } + {currentTab === 'brew' && } + {currentTab === 'notifications' && } + {currentTab === 'authors' && } + {currentTab === 'locks' && }
-
; - } -}); +
+ ); +}; module.exports = Admin; diff --git a/client/admin/admin.less b/client/admin/admin.less index c6c9b4662..0fc353194 100644 --- a/client/admin/admin.less +++ b/client/admin/admin.less @@ -3,6 +3,7 @@ @import 'naturalcrit/styles/animations.less'; @import 'naturalcrit/styles/colors.less'; @import 'naturalcrit/styles/tooltip.less'; +@import './themes/fonts/iconFonts/fontAwesome.less'; @import 'font-awesome/css/font-awesome.css'; @@ -22,7 +23,7 @@ body { } :where(.admin) { - + padding-bottom : 50px; header { padding : 20px 0px; margin-bottom : 30px; @@ -30,6 +31,7 @@ body { color : white; background-color : @red; i { margin-right : 30px; } + a { float : right; } } hr { margin : 30px 0px; } @@ -48,21 +50,23 @@ body { } dl { - @maxItemWidth : 132px; + display : grid; + grid-template-columns : 120px 1fr; + row-gap : 10px; + align-items : center; + justify-items : start; + padding-top : 0.5em; dt { - float : left; - width : @maxItemWidth; - clear : left; - text-align : right; + float : left; + clear : left; + height : fit-content; + font-weight : 900; + text-align : right; &::after { content : ' : '; } } - dd { - height : 1em; - padding : 0 0 0.5em 0; - margin-left : @maxItemWidth + 6px; - } + dd { height : fit-content; } } - + .tabs button { margin-right : 3px; margin-left : 3px; @@ -90,11 +94,45 @@ body { } } + table { + padding : 10px; + + tr { + border-bottom : 1px solid; + &:last-of-type { border : none; } + &:nth-child(even) { background : #DDDDDD; } + } + + thead { + background : rgb(193,236,230); + border-bottom : 2px solid; + } + + th, td { + padding : 5px 10px; + vertical-align : middle; + text-align : center; + border-right : 1px solid; + + &:last-child { border-right : none; } + } + + th { font-weight : 900; } + + td { + &:first-child { + font-weight : 900; + text-align : left; + } + } + } + .error { - background: rgb(178, 54, 54); - color:white; - font-weight: 900; - margin-block:10px; - padding:10px; + float : right; + padding : 10px; + margin-block : 10px; + font-weight : 900; + color : white; + background : rgb(178, 54, 54); } } diff --git a/client/admin/authorUtils/authorLookup/authorLookup.jsx b/client/admin/authorUtils/authorLookup/authorLookup.jsx new file mode 100644 index 000000000..abdece6f7 --- /dev/null +++ b/client/admin/authorUtils/authorLookup/authorLookup.jsx @@ -0,0 +1,87 @@ +import './authorLookup.less'; + +import React from 'react'; +import request from 'superagent'; + +const authorLookup = ()=>{ + const [author, setAuthor] = React.useState(''); + const [searching, setSearching] = React.useState(false); + const [results, setResults] = React.useState([]); + + const lookup = async ()=>{ + if(!author) return; + + setSearching(true); + setResults([]); + + const brews = await request.get(`/admin/user/list/${author}`); + setResults(brews.body); + setSearching(false); + }; + + const renderResults = ()=>{ + if(results.length == 0) return <> +

Results

+

None found.

+ ; + + return <> +

{`Results - ${results.length} brews` }

+ + + + + + + + + + + + {results + .sort((a, b)=>{ // Sort brews from most recently updated + if(a.updatedAt > b.updatedAt) return -1; + return 1; + }) + .map((brew, idx)=>{ + return + + + + + + ; + })} + +
TitleShareEditLast UpdateStorage
{brew.title}{brew.shareId}{brew.editId}{brew.updatedAt}{brew.googleId ? 'Google' : 'Homebrewery'}
+ ; + }; + + const handleKeyPress = (evt)=>{ + if(evt.key === 'Enter') return lookup(); + }; + + const handleChange = (evt)=>{ + setAuthor(evt.target.value); + }; + + return ( +
+
+

Author Lookup

+ +
+
+ {renderResults()} +
+
+ ); +}; + +module.exports = authorLookup; diff --git a/client/admin/authorUtils/authorLookup/authorLookup.less b/client/admin/authorUtils/authorLookup/authorLookup.less new file mode 100644 index 000000000..8c37e80d1 --- /dev/null +++ b/client/admin/authorUtils/authorLookup/authorLookup.less @@ -0,0 +1,29 @@ +.authorLookup { + position : relative; + display : flex; + flex-direction : column; + + .field { + display : flex; + gap : 5px; + align-items : center; + justify-items : stretch; + width : 100%; + margin-bottom : 20px; + + + input { + height : 33px; + padding : 0px 10px; + margin-bottom : unset; + font-family : monospace; + } + + button { + width : 50px; + + i { margin-right : 10px; } + } + } + +} \ No newline at end of file diff --git a/client/admin/authorUtils/authorUtils.jsx b/client/admin/authorUtils/authorUtils.jsx new file mode 100644 index 000000000..a96eea528 --- /dev/null +++ b/client/admin/authorUtils/authorUtils.jsx @@ -0,0 +1,13 @@ +import React from 'react'; + +import AuthorLookup from './authorLookup/authorLookup.jsx'; + +const authorUtils = ()=>{ + return ( +
+ +
+ ); +}; + +module.exports = authorUtils; \ No newline at end of file diff --git a/client/admin/brewUtils/brewCleanup/brewCleanup.jsx b/client/admin/brewUtils/brewCleanup/brewCleanup.jsx index a166ae112..d4b17c570 100644 --- a/client/admin/brewUtils/brewCleanup/brewCleanup.jsx +++ b/client/admin/brewUtils/brewCleanup/brewCleanup.jsx @@ -1,10 +1,8 @@ -require('./brewCleanup.less'); const React = require('react'); const createClass = require('create-react-class'); const request = require('superagent'); - const BrewCleanup = createClass({ displayName : 'BrewCleanup', getDefaultProps(){ @@ -39,9 +37,9 @@ const BrewCleanup = createClass({ if(!this.state.primed) return; if(!this.state.count){ - return
No Matching Brews found.
; + return
No Matching Brews found.
; } - return
+ return
; }, render(){ - return
+ return

Brew Cleanup

Removes very short brews to tidy up the database

@@ -65,7 +63,7 @@ const BrewCleanup = createClass({ {this.renderPrimed()} {this.state.error - &&
{this.state.error.toString()}
+ &&
{this.state.error.toString()}
}
; } diff --git a/client/admin/brewUtils/brewCleanup/brewCleanup.less b/client/admin/brewUtils/brewCleanup/brewCleanup.less deleted file mode 100644 index 16fc98957..000000000 --- a/client/admin/brewUtils/brewCleanup/brewCleanup.less +++ /dev/null @@ -1,9 +0,0 @@ -.BrewCleanup { - .removeBox { - margin-top : 20px; - button { - margin-right : 10px; - background-color : @red; - } - } -} \ No newline at end of file diff --git a/client/admin/brewUtils/brewCompress/brewCompress.jsx b/client/admin/brewUtils/brewCompress/brewCompress.jsx index 2c8e5b023..ccb59e027 100644 --- a/client/admin/brewUtils/brewCompress/brewCompress.jsx +++ b/client/admin/brewUtils/brewCompress/brewCompress.jsx @@ -1,10 +1,7 @@ -require('./brewCompress.less'); const React = require('react'); const createClass = require('create-react-class'); - const request = require('superagent'); - const BrewCompress = createClass({ displayName : 'BrewCompress', getDefaultProps(){ @@ -53,9 +50,9 @@ const BrewCompress = createClass({ if(!this.state.primed) return; if(!this.state.count){ - return
No Matching Brews found.
; + return
No Matching Brews found.
; } - return
+ return
; }, render(){ - return
+ return

Brew Compression

Compresses the text in brews to binary

diff --git a/client/admin/brewUtils/brewCompress/brewCompress.less b/client/admin/brewUtils/brewCompress/brewCompress.less deleted file mode 100644 index 8668e9280..000000000 --- a/client/admin/brewUtils/brewCompress/brewCompress.less +++ /dev/null @@ -1,9 +0,0 @@ -.BrewCompress { - .removeBox { - margin-top : 20px; - button { - margin-right : 10px; - background-color : @red; - } - } -} \ No newline at end of file diff --git a/client/admin/brewUtils/brewLookup/brewLookup.jsx b/client/admin/brewUtils/brewLookup/brewLookup.jsx index 50a2f2015..fb780f29e 100644 --- a/client/admin/brewUtils/brewLookup/brewLookup.jsx +++ b/client/admin/brewUtils/brewLookup/brewLookup.jsx @@ -12,27 +12,48 @@ const BrewLookup = createClass({ }, getInitialState() { return { - query : '', - foundBrew : null, - searching : false, - error : null + query : '', + foundBrew : null, + searching : false, + error : null, + scriptCount : 0 }; }, handleChange(e){ this.setState({ query: e.target.value }); }, lookup(){ - this.setState({ searching: true, error: null }); + this.setState({ searching: true, error: null, scriptCount: 0 }); request.get(`/admin/lookup/${this.state.query}`) - .then((res)=>this.setState({ foundBrew: res.body })) + .then((res)=>{ + const foundBrew = res.body; + const scriptCheck = foundBrew?.text.match(/(<\/?s)cript/g); + this.setState({ + foundBrew : foundBrew, + scriptCount : scriptCheck?.length || 0, + }); + }) .catch((err)=>this.setState({ error: err })) - .finally(()=>this.setState({ searching: false })); + .finally(()=>{ + this.setState({ + searching : false + }); + }); + }, + + async cleanScript(){ + if(!this.state.foundBrew?.shareId) return; + + await request.put(`/admin/clean/script/${this.state.foundBrew.shareId}`) + .catch((err)=>{ this.setState({ error: err }); return; }); + + this.lookup(); }, renderFoundBrew(){ const brew = this.state.foundBrew; - return
+ return
Title
{brew.title}
@@ -46,17 +67,28 @@ const BrewLookup = createClass({
Share Link
/share/{brew.shareId}
+
Created Time
+
{brew.createdAt ? Moment(brew.createdAt).toLocaleString() : 'No creation date'}
+
Last Updated
{Moment(brew.updatedAt).fromNow()}
Num of Views
{brew.views}
+ +
SCRIPT tags detected
+
{this.state.scriptCount}
+ {this.state.scriptCount > 0 && +
+ +
+ }
; }, render(){ - return
+ return

Brew Lookup

; } diff --git a/client/admin/brewUtils/brewUtils.jsx b/client/admin/brewUtils/brewUtils.jsx index de8c29895..bab2cb82f 100644 --- a/client/admin/brewUtils/brewUtils.jsx +++ b/client/admin/brewUtils/brewUtils.jsx @@ -1,6 +1,6 @@ const React = require('react'); const createClass = require('create-react-class'); - +require('./brewUtils.less'); const BrewCleanup = require('./brewCleanup/brewCleanup.jsx'); const BrewLookup = require('./brewLookup/brewLookup.jsx'); diff --git a/client/admin/brewUtils/brewUtils.less b/client/admin/brewUtils/brewUtils.less new file mode 100644 index 000000000..5bbbc3f69 --- /dev/null +++ b/client/admin/brewUtils/brewUtils.less @@ -0,0 +1,29 @@ +.brewUtil { + .result { + margin-top : 20px; + button { + margin-right : 10px; + background-color : @red; + } + } + .cleanButton { + display : inline-block; + width : 100%; + } +} + +.stats { + position : relative; + + .pending { + position : absolute; + top : 0.5em; + left : 100px; + width : 100%; + height : 100%; + } + + &:has(.pending) { opacity : 0.5; } + + dl { grid-template-columns : 200px 250px; } +} \ No newline at end of file diff --git a/client/admin/brewUtils/stats/stats.jsx b/client/admin/brewUtils/stats/stats.jsx index 85ce10610..7f96618f9 100644 --- a/client/admin/brewUtils/stats/stats.jsx +++ b/client/admin/brewUtils/stats/stats.jsx @@ -1,11 +1,8 @@ -require('./stats.less'); const React = require('react'); const createClass = require('create-react-class'); -const cx = require('classnames'); const request = require('superagent'); - const Stats = createClass({ displayName : 'Stats', getDefaultProps(){ @@ -14,7 +11,8 @@ const Stats = createClass({ getInitialState(){ return { stats : { - totalBrews : 0 + totalBrews : 0, + totalPublishedBrews : 0 }, fetching : false }; @@ -29,11 +27,13 @@ const Stats = createClass({ .finally(()=>this.setState({ fetching: false })); }, render(){ - return
+ return

Stats

Total Brew Count
{this.state.stats.totalBrews}
+
Total Brews Published
+
{this.state.stats.totalPublishedBrews}
{this.state.fetching diff --git a/client/admin/brewUtils/stats/stats.less b/client/admin/brewUtils/stats/stats.less deleted file mode 100644 index b5a4612e1..000000000 --- a/client/admin/brewUtils/stats/stats.less +++ /dev/null @@ -1,13 +0,0 @@ - -.Stats { - position : relative; - - .pending { - position : absolute; - top : 0px; - left : 0px; - width : 100%; - height : 100%; - background-color : rgba(238,238,238, 0.5); - } -} \ No newline at end of file diff --git a/client/admin/lockTools/lockTools.jsx b/client/admin/lockTools/lockTools.jsx new file mode 100644 index 000000000..9a28d330f --- /dev/null +++ b/client/admin/lockTools/lockTools.jsx @@ -0,0 +1,342 @@ +/*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/ +require('./lockTools.less'); +const React = require('react'); +const createClass = require('create-react-class'); + +import request from '../../homebrew/utils/request-middleware.js'; + +const LockTools = createClass({ + displayName : 'LockTools', + getInitialState : function() { + return { + fetching : false, + reviewCount : 0 + }; + }, + + componentDidMount : function() { + this.updateReviewCount(); + }, + + updateReviewCount : async function() { + const newCount = await request.get('/api/lock/count') + .then((res)=>{return res.body?.count || 'Unknown';}); + if(newCount != this.state.reviewCount){ + this.setState({ + reviewCount : newCount + }); + } + }, + + updateLockData : function(lock){ + this.setState({ + lock : lock + }); + }, + + render : function() { + return
+

Lock Count

+

Number of brews currently locked: {this.state.reviewCount}

+ +
+ +
+ +
+ +
+
+ + +
+
+
; + } +}); + +const LockBrew = createClass({ + displayName : 'LockBrew', + getInitialState : function() { + // Default values + return { + brewId : this.props.lock?.shareId || '', + code : this.props.lock?.code || 455, + editMessage : this.props.lock?.editMessage || '', + shareMessage : this.props.lock?.shareMessage || 'This Brew has been locked.', + result : {}, + overwrite : false, + }; + }, + + handleChange : function(e, varName) { + const output = {}; + output[varName] = e.target.value; + this.setState(output); + }, + + submit : function(e){ + e.preventDefault(); + if(!this.state.editMessage) return; + const newLock = { + overwrite : this.state.overwrite, + code : parseInt(this.state.code) || 100, + editMessage : this.state.editMessage, + shareMessage : this.state.shareMessage, + applied : new Date + }; + + request.post(`/api/lock/${this.state.brewId}`) + .send(newLock) + .set('Content-Type', 'application/json') + .then((response)=>{ + this.setState({ result: response.body }); + }) + .catch((err)=>{ + this.setState({ result: err.response.body }); + }); + }, + + renderInput : function (name) { + return this.handleChange(e, name)} autoComplete='off' required/>; + }, + + renderResult : function(){ + return <> +

Result:

+ + + {Object.keys(this.state.result).map((key, idx)=>{ + return + + + ; + })} + +
{key}{this.state.result[key].toString()} +
+ ; + }, + + render : function() { + return
+
+

Lock Brew

+
+ +
+ +
+ +
+ +
+ + +
+ {this.state.result && this.renderResult()} +
+
+

Suggestions

+
+

Codes

+
    +
  • 455 - Generic Lock
    • +
  • 456 - Copyright issues
    • +
  • 457 - Confidential Information Leakage
    • +
  • 458 - Sensitive Personal Information
    • +
  • 459 - Defamation or Libel
    • +
  • 460 - Hate Speech or Discrimination
    • +
  • 461 - Illegal Activities
    • +
  • 462 - Malware or Phishing
    • +
  • 463 - Plagiarism
    • +
  • 465 - Misrepresentation
    • +
  • 466 - Inappropriate Content
    • +
+
+
+

Messages

+
    +
  • Private Message: This is the private message that is ONLY displayed to the authors of the locked brew. This message MUST specify exactly what actions must be taken in order to have the brew unlocked.
    • +
  • Public Message: This is the public message that is displayed to the EVERYONE that attempts to view the locked brew.
    • +
+
+
+
; + } +}); + +const LockTable = createClass({ + displayName : 'LockTable', + getDefaultProps : function() { + return { + title : '', + text : '', + fetchURL : '/api/locks', + resultName : '', + propertyNames : ['shareId'], + loadBrew : ()=>{} + }; + }, + + getInitialState : function() { + return { + result : '', + error : '', + searching : false + }; + }, + + lockKey : React.createRef(0), + + clickFn : function (){ + this.setState({ searching: true, error: null }); + + request.get(this.props.fetchURL) + .then((res)=>this.setState({ result: res.body })) + .catch((err)=>this.setState({ result: err.response.body })) + .finally(()=>{ + this.setState({ searching: false }); + }); + }, + + updateBrewLockData : function (lockData){ + this.lockKey.current++; + const brewData = { + key : this.lockKey.current, + shareId : lockData.shareId, + code : lockData.lock.code, + editMessage : lockData.lock.editMessage, + shareMessage : lockData.lock.shareMessage + }; + this.props.loadBrew(brewData); + }, + + render : function () { + return <> +
+
+

{this.props.title}

+ +
+ {this.state.result[this.props.resultName] && + <> +

{this.props.text}: {this.state.result[this.props.resultName].length}

+ + + + {this.props.propertyNames.map((name, idx)=>{ + return ; + })} + + + + + + {this.state.result[this.props.resultName].map((result, resultIdx)=>{ + return + {this.props.propertyNames.map((name, nameIdx)=>{ + return ; + })} + + + ; + })} + +
{name}clipload
+ {result[name].toString()} + {navigator.clipboard.writeText(result.shareId.toString());}}>{this.updateBrewLockData(result);}}>
+ + } +
+ ; + } +}); + +const LockLookup = createClass({ + displayName : 'LockLookup', + getDefaultProps : function() { + return { + fetchURL : '/api/lookup' + }; + }, + + getInitialState : function() { + return { + query : '', + result : '', + error : '', + searching : false + }; + }, + + handleChange(e){ + this.setState({ query: e.target.value }); + }, + + clickFn(){ + this.setState({ searching: true, error: null }); + + request.put(`${this.props.fetchURL}/${this.state.query}`) + .then((res)=>this.setState({ result: res.body })) + .catch((err)=>this.setState({ result: err.response.body })) + .finally(()=>{ + this.setState({ searching: false }); + }); + }, + + renderResult : function(){ + return
+

Result:

+ + + {Object.keys(this.state.result).map((key, idx)=>{ + return + + + ; + })} + +
{key}{this.state.result[key].toString()} +
+
; + }, + + render : function() { + return
+

{this.props.title}

+ + + + {this.state.error + &&
{this.state.error.toString()}
+ } + + {this.state.result && this.renderResult()} +
; + } +}); + +module.exports = LockTools; \ No newline at end of file diff --git a/client/admin/lockTools/lockTools.less b/client/admin/lockTools/lockTools.less new file mode 100644 index 000000000..1ec9c524a --- /dev/null +++ b/client/admin/lockTools/lockTools.less @@ -0,0 +1,66 @@ +.lockTools { + .lockBrew { + columns : 2; + + .lockForm { + break-inside : avoid; + + label { + display : inline-block; + width : 100%; + line-height : 2.25em; + text-align : right; + input { + float : right; + width : 65%; + margin-left : 10px; + } + &.checkbox { + line-height: 1.5em; + input { + width : 1.5em; + height : 1.5em; + } + } + } + } + + .lockSuggestions { + line-height : 1.2em; + break-inside : avoid; + columns : 2; + h2 { column-span : all; } + h3 { margin-top : 0px; } + b { font-weight : 600; } + + .lockCodes { break-inside : avoid; } + } + } + + .lockTable { + cursor : default; + break-inside : avoid; + .row:hover { + color : #000000; + background-color : #CCCCCC; + } + .icon { + cursor : pointer; + &:hover { text-shadow : 0px 0px 6px black; } + } + } + + th, td { + padding : 4px 10px; + text-align : center; + } + table, td { border : 1px solid #333333; } + + .brewLookup { + min-height : 175px; + break-inside : avoid; + h2 { margin-top : 0px; } + } + + button i { padding-left : 5px; } +} \ No newline at end of file diff --git a/client/admin/notificationUtils/notificationAdd/notificationAdd.jsx b/client/admin/notificationUtils/notificationAdd/notificationAdd.jsx index 5a8ebf5d0..0cca1047e 100644 --- a/client/admin/notificationUtils/notificationAdd/notificationAdd.jsx +++ b/client/admin/notificationUtils/notificationAdd/notificationAdd.jsx @@ -66,7 +66,7 @@ const NotificationAdd = ()=>{ diff --git a/client/admin/notificationUtils/notificationAdd/notificationAdd.less b/client/admin/notificationUtils/notificationAdd/notificationAdd.less index 878da24c2..14bdabd03 100644 --- a/client/admin/notificationUtils/notificationAdd/notificationAdd.less +++ b/client/admin/notificationUtils/notificationAdd/notificationAdd.less @@ -6,31 +6,32 @@ .field { display : grid; - grid-template-columns : 120px 150px; + grid-template-columns : 120px 200px; align-items : center; justify-items : stretch; width : 100%; margin-bottom : 20px; - - + input { height : 33px; padding : 0px 10px; margin-bottom : unset; font-family : monospace; + + &[type='date'] { width : 14ch; } } textarea { width : 50ch; min-height : 7em; max-height : 20em; - resize : vertical; padding : 10px; + resize : vertical; } } button { - width: 200px; + width : 200px; i { margin-right : 10px; } } diff --git a/client/admin/notificationUtils/notificationLookup/notificationLookup.jsx b/client/admin/notificationUtils/notificationLookup/notificationLookup.jsx index 71f8da59c..05f81b776 100644 --- a/client/admin/notificationUtils/notificationLookup/notificationLookup.jsx +++ b/client/admin/notificationUtils/notificationLookup/notificationLookup.jsx @@ -14,9 +14,6 @@ const NotificationDetail = ({ notification, onDelete })=>(
Title
{notification.title || 'No Title'}
-
Text
-
{notification.text || 'No Text'}
-
Created
{Moment(notification.createdAt).format('LLLL')}
@@ -25,6 +22,9 @@ const NotificationDetail = ({ notification, onDelete })=>(
Stop
{Moment(notification.stopAt).format('LLLL') || 'No End Time'}
+ +
Text
+
{notification.text || 'No Text'}
diff --git a/client/admin/notificationUtils/notificationLookup/notificationLookup.less b/client/admin/notificationUtils/notificationLookup/notificationLookup.less index 3f9b78310..65903213c 100644 --- a/client/admin/notificationUtils/notificationLookup/notificationLookup.less +++ b/client/admin/notificationUtils/notificationLookup/notificationLookup.less @@ -1,8 +1,8 @@ - .notificationLookup { width : 450px; - height : fit-content; + height : fit-content; + .noNotification { margin-block : 20px; } .notificationList { display : flex; flex-direction : column; @@ -30,11 +30,6 @@ font-size : 20px; font-weight : 900; } - - dl dt{ - font-weight: 900; - } } } - .noNotification { margin-block : 20px; } } \ No newline at end of file diff --git a/client/components/Anchored.jsx b/client/components/Anchored.jsx new file mode 100644 index 000000000..87af5a6e1 --- /dev/null +++ b/client/components/Anchored.jsx @@ -0,0 +1,96 @@ +import React, { useState, useRef, forwardRef, useEffect, cloneElement, Children } from 'react'; +import './Anchored.less'; + +// Anchored is a wrapper component that must have as children an and a component. +// AnchoredTrigger must have a unique `id` prop, which is passed up to Anchored, saved in state on mount, and +// then passed down through props into AnchoredBox. The `id` is used for the CSS Anchor Positioning properties. +// **The Anchor Positioning API is not available in Firefox yet** +// So in Firefox the positioning isn't perfect but is likely sufficient, and FF team seems to be working on the API quickly. + +// When Anchor Positioning is added to Firefox, this can also be rewritten using the Popover API-- add the `popover` attribute +// to the container div, which will render the container in the *top level* and give it better interactions like +// click outside to dismiss. **Do not** add without Anchor, though, because positioning is very limited with the `popover` +// attribute. + + +const Anchored = ({ children })=>{ + const [visible, setVisible] = useState(false); + const [anchorId, setAnchorId] = useState(null); + const boxRef = useRef(null); + const triggerRef = useRef(null); + + // promote trigger id to Anchored id (to pass it back down to the box as "anchorId") + useEffect(()=>{ + if(triggerRef.current){ + setAnchorId(triggerRef.current.id); + } + }, []); + + // close box on outside click or Escape key + useEffect(()=>{ + const handleClickOutside = (evt)=>{ + if( + boxRef.current && + !boxRef.current.contains(evt.target) && + triggerRef.current && + !triggerRef.current.contains(evt.target) + ) { + setVisible(false); + } + }; + + const handleEscapeKey = (evt)=>{ + if(evt.key === 'Escape') setVisible(false); + }; + + window.addEventListener('click', handleClickOutside); + window.addEventListener('keydown', handleEscapeKey); + + return ()=>{ + window.removeEventListener('click', handleClickOutside); + window.removeEventListener('keydown', handleEscapeKey); + }; + }, []); + + const toggleVisibility = ()=>setVisible((prev)=>!prev); + + // Map children to inject necessary props + const mappedChildren = Children.map(children, (child)=>{ + if(child.type === AnchoredTrigger) { + return cloneElement(child, { ref: triggerRef, toggleVisibility, visible }); + } + if(child.type === AnchoredBox) { + return cloneElement(child, { ref: boxRef, visible, anchorId }); + } + return child; + }); + + return <>{mappedChildren}; +}; + +// forward ref for AnchoredTrigger +const AnchoredTrigger = forwardRef(({ toggleVisibility, visible, children, className, ...props }, ref)=>( + +)); + +// forward ref for AnchoredBox +const AnchoredBox = forwardRef(({ visible, children, className, anchorId, ...props }, ref)=>( +
+ {children} +
+)); + +export { Anchored, AnchoredTrigger, AnchoredBox }; diff --git a/client/components/Anchored.less b/client/components/Anchored.less new file mode 100644 index 000000000..aeb9f1d5f --- /dev/null +++ b/client/components/Anchored.less @@ -0,0 +1,11 @@ + + +.anchored-box { + position : absolute; + visibility : hidden; + justify-self : anchor-center; + @supports (inset-block-start: anchor(bottom)) { + inset-block-start : anchor(bottom); + } + &.active { visibility : visible; } +} \ No newline at end of file diff --git a/client/components/combobox.jsx b/client/components/combobox.jsx index 5fcc154bc..ae9f1d7f8 100644 --- a/client/components/combobox.jsx +++ b/client/components/combobox.jsx @@ -45,6 +45,7 @@ const Combobox = createClass({ }, handleDropdown : function(show){ this.setState({ + value : show ? '' : this.props.default, showDropdown : show, inputFocused : this.props.autoSuggest.clearAutoSuggestOnClick ? show : false }); @@ -58,10 +59,10 @@ const Combobox = createClass({ this.props.onEntry(e); }); }, - handleSelect : function(e){ + handleSelect : function(value, data=value){ this.setState({ - value : e.currentTarget.getAttribute('data-value') - }, ()=>{this.props.onSelect(this.state.value);}); + value : value + }, ()=>{this.props.onSelect(data);}); ; }, renderTextInput : function(){ @@ -78,10 +79,11 @@ const Combobox = createClass({ if(!e.target.checkValidity()){ this.setState({ value : this.props.default - }, ()=>this.props.onEntry(e)); + }); } }} /> +
); }, @@ -92,11 +94,10 @@ const Combobox = createClass({ const filterOn = _.isString(this.props.autoSuggest.filterOn) ? [this.props.autoSuggest.filterOn] : this.props.autoSuggest.filterOn; const filteredArrays = filterOn.map((attr)=>{ const children = dropdownChildren.filter((item)=>{ - if(suggestMethod === 'includes'){ + if(suggestMethod === 'includes') return item.props[attr]?.toLowerCase().includes(this.state.value.toLowerCase()); - } else if(suggestMethod === 'startsWith'){ + if(suggestMethod === 'startsWith') return item.props[attr]?.toLowerCase().startsWith(this.state.value.toLowerCase()); - } }); return children; }); @@ -111,7 +112,7 @@ const Combobox = createClass({ }, render : function () { const dropdownChildren = this.state.options.map((child, i)=>{ - const clone = React.cloneElement(child, { onClick: (e)=>this.handleSelect(e) }); + const clone = React.cloneElement(child, { onClick: ()=>this.handleSelect(child.props.value, child.props.data) }); return clone; }); return ( diff --git a/client/components/combobox.less b/client/components/combobox.less index 3810a874e..27f78356b 100644 --- a/client/components/combobox.less +++ b/client/components/combobox.less @@ -1,50 +1,46 @@ .dropdown-container { - position:relative; - input { - width: 100%; - } - .dropdown-options { - position:absolute; - background-color: white; - z-index: 100; - width: 100%; - border: 1px solid gray; - overflow-y: auto; - max-height: 200px; + position : relative; + input { width : 100%; } + .item i { + position : absolute; + right : 10px; + color : black; + } + .dropdown-options { + position : absolute; + z-index : 100; + width : 100%; + max-height : 200px; + overflow-y : auto; + background-color : white; + border : 1px solid gray; - &::-webkit-scrollbar { - width: 14px; - } - &::-webkit-scrollbar-track { - background: #ffffff; - } - &::-webkit-scrollbar-thumb { - background-color: #949494; - border-radius: 10px; - border: 3px solid #ffffff; - } - - .item { - position:relative; - font-size: 11px; - font-family: Open Sans; - padding: 5px; - cursor: default; - margin: 0 3px; - //border-bottom: 1px solid darkgray; - &:hover { - filter: brightness(120%); - background-color: rgb(163, 163, 163); - } - .detail { - width:100%; - text-align: left; - color: rgb(124, 124, 124); - font-style:italic; - font-size: 9px; - } - } - - } + &::-webkit-scrollbar { width : 14px; } + &::-webkit-scrollbar-track { background : #FFFFFF; } + &::-webkit-scrollbar-thumb { + background-color : #949494; + border : 3px solid #FFFFFF; + border-radius : 10px; + } + .item { + position : relative; + padding : 5px; + margin : 0 3px; + font-family : 'Open Sans'; + font-size : 11px; + cursor : default; + &:hover { + background-color : rgb(163, 163, 163); + filter : brightness(120%); + } + .detail { + width : 100%; + font-size : 9px; + font-style : italic; + color : rgb(124, 124, 124); + text-align : left; + } + } + } } diff --git a/client/components/dialog.jsx b/client/components/dialog.jsx index 2057ecb87..e88d06c99 100644 --- a/client/components/dialog.jsx +++ b/client/components/dialog.jsx @@ -1,22 +1,24 @@ // Dialog box, for popups and modal blocking messages -const React = require('react'); +import React from 'react'; const { useRef, useEffect } = React; -function Dialog({ dismissKey, closeText = 'Close', blocking = false, ...rest }) { +function Dialog({ dismisskeys = [], closeText = 'Close', blocking = false, ...rest }) { const dialogRef = useRef(null); useEffect(()=>{ - if(!dismissKey || !localStorage.getItem(dismissKey)) { - blocking ? dialogRef.current?.showModal() : dialogRef.current?.show(); - } + blocking ? dialogRef.current?.showModal() : dialogRef.current?.show(); }, []); const dismiss = ()=>{ - dismissKey && localStorage.setItem(dismissKey, true); + dismisskeys.forEach((key)=>{ + if(key) { + localStorage.setItem(key, 'true'); + } + }); dialogRef.current?.close(); }; - return ( + return ( {rest.children} + ); +}; module.exports = ErrorBar; diff --git a/client/homebrew/brewRenderer/errorBar/errorBar.less b/client/homebrew/brewRenderer/errorBar/errorBar.less index f3f2dbaae..163648533 100644 --- a/client/homebrew/brewRenderer/errorBar/errorBar.less +++ b/client/homebrew/brewRenderer/errorBar/errorBar.less @@ -1,60 +1,58 @@ -.errorBar{ +.errorBar { position : absolute; - z-index : 10000; - box-sizing : border-box; + top : 32px; + z-index : 1; width : 100%; - margin-right : 13px; - padding : 20px; - padding-bottom : 10px; - padding-left : 100px; - background-color : @red; color : white; - i{ - position : absolute; - left : 30px; - opacity : 0.8; - font-size : 3em; - } - h3{ - font-size : 1.1em; - font-weight : 800; - } - ul{ - margin-top : 15px; - font-size : 0.8em; - list-style-position : inside; - list-style-type : disc; - li{ - line-height : 1.6em; + background-color : @red; + border : unset; + + div { + > i { + float : left; + margin-right : 10px; + margin-bottom : 20px; + font-size : 3em; + opacity : 0.8; + } + h2 { font-weight : 800; } + ul { + margin-top : 15px; + font-size : 0.8em; + list-style-position : inside; + list-style-type : disc; + li { line-height : 1.6em; } } } - hr{ - box-sizing : border-box; + hr { height : 2px; - width : 150%; margin-top : 25px; margin-bottom : 15px; - margin-left : -100px; background-color : darken(@red, 8%); border : none; } - small{ - font-size: 0.6em; - opacity: 0.7; + small { + font-size : 0.6em; + opacity : 0.7; } - .protips{ - margin-left : -80px; - font-size : 0.6em; - &>div{ - margin-bottom : 10px; - line-height : 1.2em; - } - h4{ - opacity : 0.8; + .protips { + font-size : 0.6em; + line-height : 1.2em; + h4 { font-weight : 800; line-height : 1.5em; text-transform : uppercase; } } + button.dismiss { + position : absolute; + top : 20px; + right : 30px; + padding : unset; + font-size : 40px; + background-color : transparent; + opacity : 0.6; + &:hover { opacity : 1; } + } } \ No newline at end of file diff --git a/client/homebrew/brewRenderer/headerNav/headerNav.jsx b/client/homebrew/brewRenderer/headerNav/headerNav.jsx new file mode 100644 index 000000000..04ced2585 --- /dev/null +++ b/client/homebrew/brewRenderer/headerNav/headerNav.jsx @@ -0,0 +1,113 @@ +require('./headerNav.less'); + +import * as React from 'react'; +import * as _ from 'lodash'; + +const MAX_TEXT_LENGTH = 40; + +const HeaderNav = React.forwardRef(({}, pagesRef)=>{ + + const renderHeaderLinks = ()=>{ + if(!pagesRef.current) return; + + // Top Level Pages + // Pages that contain an element with a specified class (e.g. cover pages, table of contents) + // will NOT have its content scanned for navigation headers, instead displaying a custom label + // --- + // The property name is class that will be used for detecting the page is a top level page + // The property value is a function that returns the text to be used + + const topLevelPages = { + '.frontCover' : (el, pageType)=>{ const text = getHeaderContent(el); return text ? `Cover: ${text}` : 'Cover Page'; }, + '.insideCover' : (el, pageType)=>{ const text = getHeaderContent(el); return text ? `Interior: ${text}` : 'Interior Cover Page'; }, + '.partCover' : (el, pageType)=>{ const text = getHeaderContent(el); return text ? `Section: ${text}` : 'Section Cover Page'; }, + '.backCover' : (el, pageType)=>{ const text = getHeaderContent(el); return text ? `Back: ${text}` : 'Rear Cover Page'; }, + '.toc' : ()=>{ return 'Table of Contents'; }, + }; + + const getHeaderContent = (el)=>el.querySelector('h1')?.textContent; + + const topLevelPageSelector = Object.keys(topLevelPages).join(','); + + const selector = [ + '.pages > .page', // All page elements, which by definition have IDs + `.page:not(:has(${topLevelPageSelector})) > [id]`, // All direct children of non-excluded .pages with an ID (Legacy) + `.page:not(:has(${topLevelPageSelector})) > .columnWrapper > [id]`, // All direct children of non-excluded .page > .columnWrapper with an ID (V3) + `.page:not(:has(${topLevelPageSelector})) h2`, // All non-excluded H2 titles, like Monster frame titles + ]; + const elements = pagesRef.current.querySelectorAll(selector.join(',')); + if(!elements) return; + const navList = []; + + // navList is a list of objects which have the following structure: + // { + // depth : how deeply indented the item should be + // text : the text to display in the nav link + // link : the hyperlink to navigate to when clicked + // className : [optional] the class to apply to the nav link for styling + // } + + elements.forEach((el)=>{ + const navEntry = { // Default structure of a navList entry + depth : 7, // All unmatched elements with IDs are set to the maximum depth (7) + text : el.textContent, // Use `textContent` because `innerText` is affected by rendering, e.g. 'content-visibility: auto' + link : el.id + }; + if(el.classList.contains('page')) { + let text = `Page ${el.id.slice(1)}`; // Get the page # by trimming off the 'p' from the ID + const pageType = Object.keys(topLevelPages).find((pageType)=>el.querySelector(pageType)); + if(pageType) + text += ` - ${topLevelPages[pageType](el, pageType)}`; // If a Top Level Page, add extra label + + navEntry.depth = 0; // Pages are always at the least indented level + navEntry.text = text; + navEntry.className = 'pageLink'; + } else if(el.localName.match(/^h[1-6]/)){ // Header elements H1 through H6 + navEntry.depth = el.localName[1]; // Depth is set by the header level + } + navList.push(navEntry); + }); + + return _.map(navList, (navItem, index)=> + ); + }; + + return ; +}); + +const HeaderNavItem = ({ link, text, depth, className })=>{ + + const trimString = (text, prefixLength = 0)=>{ + // Sanity check nav link strings + let output = text; + + // If the string has a line break, only use the first line + if(text.indexOf('\n')){ + output = text.split('\n')[0]; + } + + // Trim unecessary spaces from string + output = output.trim(); + + // Reduce excessively long strings + const maxLength = MAX_TEXT_LENGTH - prefixLength; + if(output.length > maxLength){ + return `${output.slice(0, maxLength).trim()}...`; + } + return output; + }; + + if(!link || !text) return; + + return
  • + + {trimString(text, depth)} + +
    • ; +}; + +export default HeaderNav; \ No newline at end of file diff --git a/client/homebrew/brewRenderer/headerNav/headerNav.less b/client/homebrew/brewRenderer/headerNav/headerNav.less new file mode 100644 index 000000000..a5fd11f5e --- /dev/null +++ b/client/homebrew/brewRenderer/headerNav/headerNav.less @@ -0,0 +1,39 @@ +.headerNav { + position : fixed; + top : 32px; + left : 0px; + max-width : 40vw; + max-height : calc(100vh - 32px); + padding : 5px 10px; + overflow-y : auto; + background-color : #CCCCCC; + border-radius : 5px; + &.active { + padding-bottom : 10px; + .navIcon { padding-bottom : 10px; } + } + .navIcon { cursor : pointer; } + li { + list-style-type : none; + a { + display : inline-block; + width : 100%; + padding : 2px; + font-family : 'Open Sans'; + font-size : 12px; + color : inherit; + text-decoration : none; + cursor : pointer; + &:hover { text-decoration : underline; } + &.pageLink { font-weight : 900; } + + @depths: 0,1,2,3,4,5,6,7; + + each(@depths, { + &.depth-@{value} { + padding-left: ((@value) * 0.5em); + } + }); + } + } +} \ No newline at end of file diff --git a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx index f4e0b1c95..38a85e0c7 100644 --- a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx +++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx @@ -1,44 +1,63 @@ require('./notificationPopup.less'); -const React = require('react'); -const _ = require('lodash'); +import React, { useEffect, useState } from 'react'; +import request from '../../utils/request-middleware.js'; +import Markdown from 'naturalcrit/markdown.js'; import Dialog from '../../../components/dialog.jsx'; -const DISMISS_KEY = 'dismiss_notification01-10-24'; const DISMISS_BUTTON = ; const NotificationPopup = ()=>{ - return + const [notifications, setNotifications] = useState([]); + const [dissmissKeyList, setDismissKeyList] = useState([]); + const [error, setError] = useState(null); + + useEffect(()=>{ + getNotifications(); + }, []); + + const getNotifications = async ()=>{ + setError(null); + try { + const res = await request.get('/admin/notification/all'); + pickActiveNotifications(res.body || []); + } catch (err) { + console.log(err); + setError(`Error looking up notifications: ${err?.response?.body?.message || err.message}`); + } + }; + + const pickActiveNotifications = (notifs)=>{ + const now = new Date(); + const filteredNotifications = notifs.filter((notification)=>{ + const startDate = new Date(notification.startAt); + const stopDate = new Date(notification.stopAt); + const dismissed = localStorage.getItem(notification.dismissKey) ? true : false; + return now >= startDate && now <= stopDate && !dismissed; + }); + setNotifications(filteredNotifications); + setDismissKeyList(filteredNotifications.map((notif)=>notif.dismissKey)); + }; + + const renderNotificationsList = ()=>{ + if(error) return
    {error}
    ; + return notifications.map((notification)=>( +
  • + {notification.title}
    +

    +
    • + )); + }; + + if(!notifications.length) return; + return

    Notice

    This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:
      -
    • - Search brews with our new page!
      - We have been working very hard in making this possible, now you can share your work and look at it in the new Vault page! - All PUBLISHED brews will be available to anyone searching there, by title or author, and filtering by renderer. - - More features will be coming. -
      • - -
    • - Don't delete your Homebrewery folder on Google Drive!
      - We have had several reports of users losing their brews, not realizing - that they had deleted the files on their Google Drive. If you have a Homebrewery folder - on your Google Drive with *.txt files inside, do not delete it! - We cannot help you recover files that you have deleted from your own - Google Drive. -
      • - -
    • - Protect your work!
      - If you opt not to use your Google Drive, keep in mind that we do not save a history of your projects. Please make frequent backups of your brews!  - - See the FAQ - to learn how to avoid losing your work! -
      • + {renderNotificationsList()}
    ; }; diff --git a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less index 2982055c8..85d4c8365 100644 --- a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less +++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less @@ -48,14 +48,46 @@ } ul { margin-top : 15px; - font-size : 0.8em; + font-size : 0.9em; list-style-position : outside; list-style-type : disc; li { - margin-top : 1.4em; - font-size : 0.8em; - line-height : 1.4em; - em { font-weight : 800; } + padding-left : 1em; + margin-top : 1.5em; + font-size : 0.9em; + line-height : 1.5em; + em { + font-weight : 800; + text-transform : capitalize; + } + li { + margin-top : 0; + line-height : 1.2em; + list-style-type : square; + } + } + ul ul,ol ol,ul ol,ol ul { + margin-bottom : 0px; + margin-left : 1.5em; } } -} + + /* Markdown styling */ + code { + padding : 0.1em 0.5em; + font-family : 'Courier New', 'Courier', monospace; + overflow-wrap : break-word; + white-space : pre-wrap; + background : #08115A; + border-radius : 2px; + } + pre code { + display : inline-block; + width : 100%; + } + .blank { + height : 1em; + margin-top : 0; + & + * { margin-top : 0; } + } +} \ No newline at end of file diff --git a/client/homebrew/brewRenderer/safeHTML.js b/client/homebrew/brewRenderer/safeHTML.js new file mode 100644 index 000000000..2574f4cfe --- /dev/null +++ b/client/homebrew/brewRenderer/safeHTML.js @@ -0,0 +1,46 @@ +// Derived from the vue-html-secure package, customized for Homebrewery + +let doc = null; +let div = null; + +function safeHTML(htmlString) { + // If the Document interface doesn't exist, exit + if(typeof document == 'undefined') return null; + // If the test document and div don't exist, create them + if(!doc) doc = document.implementation.createHTMLDocument(''); + if(!div) div = doc.createElement('div'); + + // Set the test div contents to the evaluation string + div.innerHTML = htmlString; + // Grab all nodes from the test div + const elements = div.querySelectorAll('*'); + + // Blacklisted tags + const blacklistTags = ['script', 'noscript', 'noembed']; + // Tests to remove attributes + const blacklistAttrs = [ + (test)=>{return test.localName.indexOf('on') == 0;}, + (test)=>{return test.localName.indexOf('type') == 0 && test.value.match(/submit/i);}, + (test)=>{return test.value.replace(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205f\u3000]/g, '').toLowerCase().trim().indexOf('javascript:') == 0;} + ]; + + + elements.forEach((element)=>{ + // Check each element for blacklisted type + if(blacklistTags.includes(element?.localName?.toLowerCase())) { + element.remove(); + return; + } + // Check remaining elements for blacklisted attributes + for (const attribute of element.attributes){ + if(blacklistAttrs.some((test)=>{return test(attribute);})) { + element.removeAttribute(attribute.localName); + break; + }; + }; + }); + + return div.innerHTML; +}; + +module.exports.safeHTML = safeHTML; \ No newline at end of file diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index 73b48d778..6938eacb7 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -1,28 +1,37 @@ +/* eslint-disable max-lines */ require('./toolBar.less'); const React = require('react'); const { useState, useEffect } = React; const _ = require('lodash'); +import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anchored.jsx'; const MAX_ZOOM = 300; const MIN_ZOOM = 10; -const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{ +const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPages, headerState, setHeaderState })=>{ - const [zoomLevel, setZoomLevel] = useState(100); - const [pageNum, setPageNum] = useState(currentPage); + const [pageNum, setPageNum] = useState(1); const [toolsVisible, setToolsVisible] = useState(true); useEffect(()=>{ - onZoomChange(zoomLevel); - }, [zoomLevel]); + // format multiple visible pages as a range (e.g. "150-153") + const pageRange = visiblePages.length === 1 ? `${visiblePages[0]}` : `${visiblePages[0]} - ${visiblePages.at(-1)}`; + setPageNum(pageRange); + }, [visiblePages]); useEffect(()=>{ - setPageNum(currentPage); - }, [currentPage]); + const Visibility = localStorage.getItem('hb_toolbarVisibility'); + if (Visibility) setToolsVisible(Visibility === 'true'); + + }, []); const handleZoomButton = (zoom)=>{ - setZoomLevel(_.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM))); + handleOptionChange('zoomLevel', _.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM))); + }; + + const handleOptionChange = (optionKey, newValue)=>{ + onDisplayOptionsChange({ ...displayOptions, [optionKey]: newValue }); }; const handlePageInput = (pageInput)=>{ @@ -30,16 +39,16 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{ setPageNum(parseInt(pageInput)); // input type is 'text', so `page` comes in as a string, not number. }; + // scroll to a page, used in the Prev/Next Page buttons. const scrollToPage = (pageNumber)=>{ + if(typeof pageNumber !== 'number') return; pageNumber = _.clamp(pageNumber, 1, totalPages); const iframe = document.getElementById('BrewRenderer'); const brewRenderer = iframe?.contentWindow?.document.querySelector('.brewRenderer'); const page = brewRenderer?.querySelector(`#p${pageNumber}`); page?.scrollIntoView({ block: 'start' }); - setPageNum(pageNumber); }; - const calculateChange = (mode)=>{ const iframe = document.getElementById('BrewRenderer'); const iframeWidth = iframe.getBoundingClientRect().width; @@ -52,58 +61,87 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{ // find widest page, in case pages are different widths, so that the zoom is adapted to not cut the widest page off screen. const widestPage = _.maxBy([...pages], 'offsetWidth').offsetWidth; - desiredZoom = (iframeWidth / widestPage) * 100; + if(displayOptions.spread === 'facing') + desiredZoom = (iframeWidth / ((widestPage * 2) + parseInt(displayOptions.columnGap))) * 100; + else + desiredZoom = (iframeWidth / (widestPage + 20)) * 100; } else if(mode == 'fit'){ // find the page with the largest single dim (height or width) so that zoom can be adapted to fit it. - const minDimRatio = [...pages].reduce((minRatio, page)=>Math.min(minRatio, iframeWidth / page.offsetWidth, iframeHeight / page.offsetHeight), Infinity); + let minDimRatio; + if(displayOptions.spread === 'single') + minDimRatio = [...pages].reduce( + (minRatio, page)=>Math.min(minRatio, + iframeWidth / page.offsetWidth, + iframeHeight / page.offsetHeight + ), + Infinity + ); + else + minDimRatio = [...pages].reduce( + (minRatio, page)=>Math.min(minRatio, + iframeWidth / ((page.offsetWidth * 2) + parseInt(displayOptions.columnGap)), + iframeHeight / page.offsetHeight + ), + Infinity + ); desiredZoom = minDimRatio * 100; } const margin = 5; // extra space so page isn't edge to edge (not truly "to fill") - const deltaZoom = (desiredZoom - zoomLevel) - margin; + const deltaZoom = (desiredZoom - displayOptions.zoomLevel) - margin; return deltaZoom; }; return ( -
    - +