mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-06 03:34:40 +00:00
Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 SethBurkart123
|
d53dc9ff06 |
@@ -4,7 +4,6 @@ package-lock.json
|
|||||||
bun.lockb
|
bun.lockb
|
||||||
pnpm-lock.yaml
|
pnpm-lock.yaml
|
||||||
yarn.lock
|
yarn.lock
|
||||||
bun.lock
|
|
||||||
|
|
||||||
.parcel-cache
|
.parcel-cache
|
||||||
.env
|
.env
|
||||||
|
|||||||
@@ -1,585 +0,0 @@
|
|||||||
# Theme Creation Guide
|
|
||||||
|
|
||||||
This guide covers everything you need to know about creating custom themes for BetterSEQTA+.
|
|
||||||
|
|
||||||
## Table of Contents
|
|
||||||
|
|
||||||
1. [Overview](#overview)
|
|
||||||
2. [Theme Structure](#theme-structure)
|
|
||||||
3. [CSS Variables](#css-variables)
|
|
||||||
4. [CSS Selectors & Classes](#css-selectors--classes)
|
|
||||||
5. [Custom Images](#custom-images)
|
|
||||||
6. [Theme Settings](#theme-settings)
|
|
||||||
7. [Best Practices](#best-practices)
|
|
||||||
8. [Examples](#examples)
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
Themes in BetterSEQTA+ allow you to completely customize the appearance of SEQTA Learn. A theme consists of:
|
|
||||||
|
|
||||||
- **Custom CSS**: CSS rules that override default styles
|
|
||||||
- **Custom Images**: Images that can be referenced via CSS variables
|
|
||||||
- **Theme Metadata**: Name, description, default color, etc.
|
|
||||||
- **Theme Settings**: Options like forcing dark/light mode
|
|
||||||
|
|
||||||
Themes are applied by injecting CSS into the SEQTA page and setting CSS custom properties (variables) on the document root.
|
|
||||||
|
|
||||||
## CSS Variables
|
|
||||||
|
|
||||||
BetterSEQTA+ provides a comprehensive set of CSS variables that you can use in your themes. These variables automatically adapt to light/dark mode and user preferences.
|
|
||||||
|
|
||||||
### Core Background Variables
|
|
||||||
|
|
||||||
| Variable | Light Mode | Dark Mode | Description |
|
|
||||||
|----------|------------|-----------|-------------|
|
|
||||||
| `--background-primary` | `#ffffff` | `#232323` | Main background color |
|
|
||||||
| `--background-secondary` | `#e5e7eb` | `#1a1a1a` | Secondary background color |
|
|
||||||
| `--theme-primary` | `#ffffff` | `#232323` | Primary theme color (same as background-primary) |
|
|
||||||
| `--theme-secondary` | `#e5e7eb` | `#1a1a1a` | Secondary theme color (same as background-secondary) |
|
|
||||||
| `--text-primary` | `black` | `white` | Primary text color |
|
|
||||||
| `--text-color` | `black` | `white` | Text color (alias for text-primary) |
|
|
||||||
|
|
||||||
### BetterSEQTA+ Specific Variables
|
|
||||||
|
|
||||||
| Variable | Description | Notes |
|
|
||||||
|----------|-------------|-------|
|
|
||||||
| `--better-main` | User's selected accent color | Dynamically set based on color picker |
|
|
||||||
| `--better-sub` | Dark navy color | Always `#161616` |
|
|
||||||
| `--better-pale` | Lightened version of accent color | Only available in light mode |
|
|
||||||
| `--better-light` | Lighter version of accent color | Calculated based on brightness |
|
|
||||||
| `--better-alert-highlight` | Alert/highlight color | `#c61851` |
|
|
||||||
| `--betterseqta-logo` | Logo URL | Changes based on dark/light mode |
|
|
||||||
| `--auto-background` | Auto background color | Falls back to `--better-pale` or `--background-secondary` |
|
|
||||||
| `--navy` | Navy color | `#1a1a1a` |
|
|
||||||
| `--theme-fg-parts` | Theme foreground parts | `white` |
|
|
||||||
|
|
||||||
### Subject/Item Color Variables
|
|
||||||
|
|
||||||
| Variable | Description |
|
|
||||||
|----------|-------------|
|
|
||||||
| `--item-colour` | Subject/item color | Set dynamically per subject/item |
|
|
||||||
| `--colour` | Generic color variable | Used in various contexts |
|
|
||||||
| `--person-colour` | Person/avatar color | `var(--better-light)` for staff |
|
|
||||||
|
|
||||||
### Transparency Effects
|
|
||||||
|
|
||||||
When transparency effects are enabled, background variables become semi-transparent:
|
|
||||||
|
|
||||||
| Variable | Light Mode (Transparent) | Dark Mode (Transparent) |
|
|
||||||
|----------|--------------------------|-------------------------|
|
|
||||||
| `--background-primary` | `rgba(255, 255, 255, 0.6)` | `rgba(35, 35, 35, 0.6)` |
|
|
||||||
| `--background-secondary` | `rgba(229, 231, 235, 0.6)` | `rgba(26, 26, 26, 0.6)` |
|
|
||||||
|
|
||||||
### Using CSS Variables
|
|
||||||
|
|
||||||
You can use these variables in your custom CSS:
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* Example: Style a custom element */
|
|
||||||
.my-custom-element {
|
|
||||||
background: var(--background-primary);
|
|
||||||
color: var(--text-primary);
|
|
||||||
border: 1px solid var(--better-main);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Example: Create a gradient */
|
|
||||||
.gradient-box {
|
|
||||||
background: linear-gradient(
|
|
||||||
to bottom,
|
|
||||||
var(--better-main),
|
|
||||||
var(--background-secondary)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## CSS Selectors & Classes
|
|
||||||
|
|
||||||
BetterSEQTA+ uses specific CSS selectors and classes that you can target in your themes. Here are the most important ones:
|
|
||||||
|
|
||||||
### Main Layout Elements
|
|
||||||
|
|
||||||
| Selector | Description |
|
|
||||||
|----------|-------------|
|
|
||||||
| `#container` | Main container element |
|
|
||||||
| `#content` | Content area |
|
|
||||||
| `#main` | Main content wrapper |
|
|
||||||
| `#title` | Top title bar |
|
|
||||||
| `#menu` | Sidebar menu |
|
|
||||||
|
|
||||||
### Dark Mode
|
|
||||||
|
|
||||||
The `dark` class is added to `html` when dark mode is active:
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* Target dark mode specifically */
|
|
||||||
html.dark #main {
|
|
||||||
background: var(--background-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Target light mode */
|
|
||||||
html:not(.dark) #main {
|
|
||||||
background: var(--background-primary);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Transparency Effects
|
|
||||||
|
|
||||||
When transparency effects are enabled, the `transparencyEffects` class is added to `html`:
|
|
||||||
|
|
||||||
```css
|
|
||||||
html.transparencyEffects .notice {
|
|
||||||
backdrop-filter: blur(80px);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Common SEQTA Classes
|
|
||||||
|
|
||||||
| Class/Selector | Description |
|
|
||||||
|----------------|-------------|
|
|
||||||
| `.notice` | Notice cards |
|
|
||||||
| `.day` | Day containers in timetable |
|
|
||||||
| `.dashboard` | Dashboard sections |
|
|
||||||
| `.dashlet` | Dashboard widgets |
|
|
||||||
| `.document` | Document elements |
|
|
||||||
| `.quickbar` | Quick action bar |
|
|
||||||
| `.calendar` | Calendar elements |
|
|
||||||
| `.message` | Message elements |
|
|
||||||
| `.thread` | Forum threads |
|
|
||||||
| `.shortcut` | Shortcut buttons |
|
|
||||||
| `.upcoming-assessment` | Upcoming assessments |
|
|
||||||
| `.entry.class` | Timetable entries |
|
|
||||||
|
|
||||||
### BetterSEQTA+ Specific Classes
|
|
||||||
|
|
||||||
| Class | Description |
|
|
||||||
|-------|-------------|
|
|
||||||
| `.addedButton` | BetterSEQTA+ added buttons |
|
|
||||||
| `.tooltip` | Tooltip elements |
|
|
||||||
| `.notice-unified-content` | Unified notice content |
|
|
||||||
| `.home-container` | Home page container |
|
|
||||||
| `.timetable-container` | Timetable container |
|
|
||||||
| `.notices-container` | Notices container |
|
|
||||||
|
|
||||||
### Attribute Selectors
|
|
||||||
|
|
||||||
SEQTA uses data attributes that you can target:
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* Target specific data types */
|
|
||||||
[data-type="student"] .header {
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Target specific labels */
|
|
||||||
[data-label="inbox"] {
|
|
||||||
/* Styles */
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### CSS Modules
|
|
||||||
|
|
||||||
SEQTA uses CSS modules with hashed class names. You can target them using attribute selectors:
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* Target CSS module classes */
|
|
||||||
[class*="MessageList__MessageList___"] {
|
|
||||||
background: var(--background-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
[class*="BasicPanel__BasicPanel___"] {
|
|
||||||
border-radius: 16px;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Custom Images
|
|
||||||
|
|
||||||
Themes can include custom images that are made available as CSS variables.
|
|
||||||
|
|
||||||
### Adding Images
|
|
||||||
|
|
||||||
1. Upload an image in the theme creator
|
|
||||||
2. Set a CSS variable name (e.g., `custom-background`)
|
|
||||||
3. The image will be available as `var(--custom-background)`
|
|
||||||
|
|
||||||
### Using Image Variables
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* Use as background */
|
|
||||||
.my-element {
|
|
||||||
background-image: var(--custom-background);
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Use in content */
|
|
||||||
.my-icon::before {
|
|
||||||
content: '';
|
|
||||||
background-image: var(--custom-icon);
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Image Variable Format
|
|
||||||
|
|
||||||
Images are stored as `url()` values:
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* The variable contains: url(blob:...) */
|
|
||||||
--custom-background: url(blob:chrome-extension://...);
|
|
||||||
```
|
|
||||||
|
|
||||||
## Theme Settings
|
|
||||||
|
|
||||||
### Force Dark/Light Mode
|
|
||||||
|
|
||||||
You can force a theme to always use dark or light mode:
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
forceDark: true // Force dark mode
|
|
||||||
forceDark: false // Force light mode
|
|
||||||
forceDark: undefined // Use user's preference (default)
|
|
||||||
```
|
|
||||||
|
|
||||||
When `forceDark` is set, users cannot toggle dark/light mode while the theme is active.
|
|
||||||
|
|
||||||
### Default Color
|
|
||||||
|
|
||||||
Set a default accent color for your theme:
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
defaultColour: "rgba(0, 123, 255, 1)" // Blue
|
|
||||||
defaultColour: "#ff6b6b" // Red (hex format)
|
|
||||||
```
|
|
||||||
|
|
||||||
### Allow Color Changes
|
|
||||||
|
|
||||||
Control whether users can change the accent color:
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
CanChangeColour: true // Users can change color
|
|
||||||
CanChangeColour: false // Color is locked
|
|
||||||
```
|
|
||||||
|
|
||||||
## Best Practices
|
|
||||||
|
|
||||||
### 1. Use CSS Variables
|
|
||||||
|
|
||||||
Always use CSS variables instead of hardcoded colors:
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* Good */
|
|
||||||
.my-element {
|
|
||||||
background: var(--background-primary);
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Bad */
|
|
||||||
.my-element {
|
|
||||||
background: #ffffff;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2. Support Both Light and Dark Modes
|
|
||||||
|
|
||||||
Unless your theme forces a specific mode, ensure it works in both:
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* Use variables that adapt automatically */
|
|
||||||
.my-element {
|
|
||||||
background: var(--background-primary);
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Or explicitly handle both modes */
|
|
||||||
html.dark .my-element {
|
|
||||||
background: #1a1a1a;
|
|
||||||
}
|
|
||||||
|
|
||||||
html:not(.dark) .my-element {
|
|
||||||
background: #ffffff;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. Use !important Sparingly
|
|
||||||
|
|
||||||
Only use `!important` when necessary to override SEQTA's default styles:
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* Good - necessary override */
|
|
||||||
#title {
|
|
||||||
background: var(--background-primary) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Bad - unnecessary */
|
|
||||||
.my-element {
|
|
||||||
color: var(--text-primary) !important;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 4. Test Responsive Design
|
|
||||||
|
|
||||||
SEQTA is responsive. Test your theme at different screen sizes:
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* Example: Mobile-specific styles */
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
#menu {
|
|
||||||
transform: translate(-270px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 5. Use Semantic Selectors
|
|
||||||
|
|
||||||
Prefer semantic selectors over fragile ones:
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* Good - stable selector */
|
|
||||||
#main > .dashboard > section {
|
|
||||||
border-radius: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Caution - CSS module classes may change */
|
|
||||||
[class*="Dashboard__Dashboard___"] {
|
|
||||||
border-radius: 16px;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 6. Optimize Images
|
|
||||||
|
|
||||||
Keep image file sizes reasonable:
|
|
||||||
|
|
||||||
- Use appropriate formats (PNG for transparency, JPG for photos)
|
|
||||||
- Compress images before uploading
|
|
||||||
- Consider using CSS for simple graphics instead of images
|
|
||||||
|
|
||||||
### 7. Document Your Theme
|
|
||||||
|
|
||||||
Include comments in your CSS explaining complex styles:
|
|
||||||
|
|
||||||
```css
|
|
||||||
/*
|
|
||||||
* Custom gradient background for dashboard
|
|
||||||
* Uses the user's accent color for a cohesive look
|
|
||||||
*/
|
|
||||||
#main > .dashboard {
|
|
||||||
background: linear-gradient(
|
|
||||||
135deg,
|
|
||||||
var(--better-main),
|
|
||||||
var(--background-secondary)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Examples
|
|
||||||
|
|
||||||
### Example 1: Simple Color Theme
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* Change accent color throughout */
|
|
||||||
:root {
|
|
||||||
--better-main: #ff6b6b;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Style the menu */
|
|
||||||
#menu {
|
|
||||||
background: var(--background-primary);
|
|
||||||
border-right: 3px solid var(--better-main);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Style buttons */
|
|
||||||
.uiButton {
|
|
||||||
background: var(--better-main);
|
|
||||||
color: var(--text-color);
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Example 2: Custom Background Image
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* Use a custom background image */
|
|
||||||
body {
|
|
||||||
background-image: var(--custom-background);
|
|
||||||
background-size: cover;
|
|
||||||
background-attachment: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Add overlay for readability */
|
|
||||||
#main::before {
|
|
||||||
content: '';
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.3);
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Example 3: Rounded Corners Theme
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* Make everything more rounded */
|
|
||||||
#main > .dashboard > section,
|
|
||||||
.dashlet,
|
|
||||||
.notice,
|
|
||||||
.document {
|
|
||||||
border-radius: 20px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Round buttons */
|
|
||||||
.uiButton {
|
|
||||||
border-radius: 25px !important;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Example 4: Minimal Theme
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* Remove shadows and borders */
|
|
||||||
#main > .dashboard > section,
|
|
||||||
.dashlet,
|
|
||||||
.notice {
|
|
||||||
box-shadow: none !important;
|
|
||||||
border: 1px solid var(--background-secondary) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Simplify colors */
|
|
||||||
#menu {
|
|
||||||
background: var(--background-primary) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Remove gradients */
|
|
||||||
.day {
|
|
||||||
background: var(--background-primary) !important;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Example 5: High Contrast Theme
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* Increase contrast */
|
|
||||||
:root {
|
|
||||||
--background-primary: #000000;
|
|
||||||
--background-secondary: #1a1a1a;
|
|
||||||
--text-primary: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
html:not(.dark) {
|
|
||||||
--background-primary: #ffffff;
|
|
||||||
--background-secondary: #f0f0f0;
|
|
||||||
--text-primary: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Add borders for clarity */
|
|
||||||
.dashlet,
|
|
||||||
.notice,
|
|
||||||
.document {
|
|
||||||
border: 2px solid var(--better-main) !important;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Advanced Techniques
|
|
||||||
|
|
||||||
### CSS Custom Properties Override
|
|
||||||
|
|
||||||
You can override CSS variables in your theme:
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* Override a variable */
|
|
||||||
:root {
|
|
||||||
--better-main: #your-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Override conditionally */
|
|
||||||
html.dark {
|
|
||||||
--background-primary: #your-dark-color;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Animations
|
|
||||||
|
|
||||||
Add smooth transitions:
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* Smooth color transitions */
|
|
||||||
#menu li {
|
|
||||||
transition: background-color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hover effects */
|
|
||||||
.dashlet:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Pseudo-elements
|
|
||||||
|
|
||||||
Use pseudo-elements for decorative elements:
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* Add decorative border */
|
|
||||||
.notice::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 4px;
|
|
||||||
background: var(--better-main);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Troubleshooting
|
|
||||||
|
|
||||||
### Theme Not Applying
|
|
||||||
|
|
||||||
1. Check browser console for CSS errors
|
|
||||||
2. Verify CSS syntax is correct
|
|
||||||
3. Ensure selectors are specific enough
|
|
||||||
4. Check if `!important` is needed
|
|
||||||
|
|
||||||
### Colors Not Changing
|
|
||||||
|
|
||||||
1. Verify you're using CSS variables
|
|
||||||
2. Check if `forceDark` is overriding your styles
|
|
||||||
3. Ensure variables are set on `:root` or `html`
|
|
||||||
|
|
||||||
### Images Not Showing
|
|
||||||
|
|
||||||
1. Verify image variable name matches CSS
|
|
||||||
2. Check image format is supported
|
|
||||||
3. Ensure image size is reasonable
|
|
||||||
4. Verify `url()` wrapper in CSS
|
|
||||||
|
|
||||||
### Dark Mode Issues
|
|
||||||
|
|
||||||
1. Test with `forceDark: true` and `forceDark: false`
|
|
||||||
2. Check if transparency effects are interfering
|
|
||||||
3. Verify `html.dark` selector is correct
|
|
||||||
|
|
||||||
## Resources
|
|
||||||
|
|
||||||
- **Theme Creator**: Access via BetterSEQTA+ settings
|
|
||||||
- **CSS Variables Reference**: See [CSS Variables](#css-variables) section above
|
|
||||||
- **SEQTA DOM Structure**: Inspect SEQTA pages in browser DevTools
|
|
||||||
- **BetterSEQTA+ Source**: Check `src/css/injected.scss` for default styles
|
|
||||||
|
|
||||||
## Contributing Themes
|
|
||||||
|
|
||||||
If you create a great theme, consider sharing it:
|
|
||||||
|
|
||||||
1. Export your theme (Share button in theme creator)
|
|
||||||
2. Submit to the BetterSEQTA+ theme store
|
|
||||||
3. Or share on GitHub/Discord
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Note**: This documentation is based on BetterSEQTA+ v3.4.13. Some details may change in future versions.
|
|
||||||
|
|
||||||
+2
-7
@@ -1,14 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "betterseqtaplus",
|
"name": "betterseqtaplus",
|
||||||
"version": "3.5.0",
|
"version": "3.4.13",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development add add heaps more features!",
|
"description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development add add heaps more features!",
|
||||||
"browserslist": "> 0.5%, last 2 versions, not dead",
|
"browserslist": "> 0.5%, last 2 versions, not dead",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"autoaudit": "npm audit && npm audit fix && npm run build",
|
|
||||||
"dev": "cross-env MODE=chrome vite dev",
|
"dev": "cross-env MODE=chrome vite dev",
|
||||||
"dev:firefox": "cross-env MODE=firefox vite build --watch",
|
"dev:firefox": "cross-env MODE=firefox vite build --watch",
|
||||||
"compile": "npm i && npm run build",
|
|
||||||
"build": "cross-env MODE=chrome vite build && cross-env MODE=firefox vite build",
|
"build": "cross-env MODE=chrome vite build && cross-env MODE=firefox vite build",
|
||||||
"build:chrome": "cross-env MODE=chrome vite build",
|
"build:chrome": "cross-env MODE=chrome vite build",
|
||||||
"build:firefox": "cross-env MODE=firefox vite build",
|
"build:firefox": "cross-env MODE=firefox vite build",
|
||||||
@@ -49,7 +47,7 @@
|
|||||||
"mime-types": "^3.0.1",
|
"mime-types": "^3.0.1",
|
||||||
"prettier": "^3.5.3",
|
"prettier": "^3.5.3",
|
||||||
"process": "^0.11.10",
|
"process": "^0.11.10",
|
||||||
"publish-browser-extension": "^4.0.3",
|
"publish-browser-extension": "^3.0.1",
|
||||||
"sass": "^1.85.1",
|
"sass": "^1.85.1",
|
||||||
"sass-loader": "^16.0.5",
|
"sass-loader": "^16.0.5",
|
||||||
"semver": "^7.7.1",
|
"semver": "^7.7.1",
|
||||||
@@ -72,7 +70,6 @@
|
|||||||
"@types/color": "^4.2.0",
|
"@types/color": "^4.2.0",
|
||||||
"@types/lodash": "^4.17.16",
|
"@types/lodash": "^4.17.16",
|
||||||
"@types/node": "^24.3.0",
|
"@types/node": "^24.3.0",
|
||||||
"@types/qrcode": "^1.5.6",
|
|
||||||
"@types/sortablejs": "^1.15.8",
|
"@types/sortablejs": "^1.15.8",
|
||||||
"@types/uuid": "^10.0.0",
|
"@types/uuid": "^10.0.0",
|
||||||
"@types/webextension-polyfill": "^0.12.3",
|
"@types/webextension-polyfill": "^0.12.3",
|
||||||
@@ -96,9 +93,7 @@
|
|||||||
"mathjs": "^14.4.0",
|
"mathjs": "^14.4.0",
|
||||||
"million": "^3.1.11",
|
"million": "^3.1.11",
|
||||||
"motion": "^12.4.12",
|
"motion": "^12.4.12",
|
||||||
"pdfjs-dist": "^5.4.530",
|
|
||||||
"postcss": "^8.5.3",
|
"postcss": "^8.5.3",
|
||||||
"qrcode": "^1.5.4",
|
|
||||||
"react": "17",
|
"react": "17",
|
||||||
"react-best-gradient-color-picker": "3.0.11",
|
"react-best-gradient-color-picker": "3.0.11",
|
||||||
"react-dom": "17",
|
"react-dom": "17",
|
||||||
|
|||||||
+22
-36
@@ -25,8 +25,24 @@ if (document.childNodes[1]) {
|
|||||||
init();
|
init();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initializes BetterSEQTA+ on a SEQTA page.
|
||||||
|
*
|
||||||
|
* This function performs the following steps:
|
||||||
|
* 1. Verifies that the current page is a SEQTA page.
|
||||||
|
* 2. Injects CSS styles for document loading.
|
||||||
|
* 3. Changes the page's favicon.
|
||||||
|
* 4. Initializes the extension's settings state.
|
||||||
|
* 5. Sets default storage if settings are not already defined.
|
||||||
|
* 6. Calls the main function to apply core BetterSEQTA+ modifications.
|
||||||
|
* 7. Initializes legacy and new plugins if the extension is enabled.
|
||||||
|
* 8. Logs success or error messages during initialization.
|
||||||
|
*/
|
||||||
async function init() {
|
async function init() {
|
||||||
if (hasSEQTAText && document.title.includes("SEQTA Learn") && !IsSEQTAPage) {
|
const hasSEQTATitle = document.title.includes("SEQTA Learn");
|
||||||
|
|
||||||
|
if (hasSEQTAText && hasSEQTATitle && !IsSEQTAPage) {
|
||||||
|
// Verify we are on a SEQTA page
|
||||||
IsSEQTAPage = true;
|
IsSEQTAPage = true;
|
||||||
console.info("[BetterSEQTA+] Verified SEQTA Page");
|
console.info("[BetterSEQTA+] Verified SEQTA Page");
|
||||||
|
|
||||||
@@ -34,30 +50,10 @@ async function init() {
|
|||||||
documentLoadStyle.textContent = documentLoadCSS;
|
documentLoadStyle.textContent = documentLoadCSS;
|
||||||
document.head.appendChild(documentLoadStyle);
|
document.head.appendChild(documentLoadStyle);
|
||||||
|
|
||||||
replaceIcons();
|
const icon = document.querySelector(
|
||||||
|
'link[rel*="icon"]',
|
||||||
const observer = new MutationObserver((mutations) => {
|
)! as HTMLLinkElement;
|
||||||
for (const mutation of mutations) {
|
icon.href = icon48; // Change the icon
|
||||||
|
|
||||||
if (
|
|
||||||
mutation.type === "attributes" &&
|
|
||||||
mutation.target instanceof HTMLLinkElement &&
|
|
||||||
mutation.target.rel.includes("icon") &&
|
|
||||||
mutation.attributeName === "href"
|
|
||||||
) {
|
|
||||||
replaceIcons();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
observer.observe(document.head, {
|
|
||||||
subtree: true,
|
|
||||||
attributes: true,
|
|
||||||
attributeFilter: ["href"],
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await initializeSettingsState();
|
await initializeSettingsState();
|
||||||
@@ -82,18 +78,8 @@ async function init() {
|
|||||||
console.info(
|
console.info(
|
||||||
"[BetterSEQTA+] Successfully initialised BetterSEQTA+, starting to load assets.",
|
"[BetterSEQTA+] Successfully initialised BetterSEQTA+, starting to load assets.",
|
||||||
);
|
);
|
||||||
} catch (error) {
|
} catch (error: any) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function replaceIcons() {
|
|
||||||
document
|
|
||||||
.querySelectorAll<HTMLLinkElement>('link[rel*="icon"]')
|
|
||||||
.forEach((link) => {
|
|
||||||
if (link.href !== icon48) {
|
|
||||||
link.href = icon48;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
+43
-224
@@ -14,230 +14,52 @@ function reloadSeqtaPages() {
|
|||||||
result.then(open, console.error);
|
result.then(open, console.error);
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Callback for sending a response back to the message sender */
|
// @ts-ignore
|
||||||
type MessageSender = { (response?: unknown): void };
|
|
||||||
|
|
||||||
function handleFetchThemes(request: any, sendResponse: MessageSender): boolean {
|
|
||||||
const { token } = request;
|
|
||||||
const apiUrl = `https://betterseqta.org/api/themes?type=betterseqta&limit=100&nocache=${Date.now()}`;
|
|
||||||
const githubUrl = `https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/themes.json?nocache=${Date.now()}`;
|
|
||||||
const headers: Record<string, string> = {};
|
|
||||||
if (token) headers["Authorization"] = `Bearer ${token}`;
|
|
||||||
fetch(apiUrl, { cache: "no-store", headers })
|
|
||||||
.then((r) => r.json())
|
|
||||||
.then(sendResponse)
|
|
||||||
.catch((err) => {
|
|
||||||
console.warn("[Background] fetchThemes API failed, trying GitHub fallback:", err?.message);
|
|
||||||
fetch(githubUrl, { cache: "no-store" })
|
|
||||||
.then((r) => r.json())
|
|
||||||
.then((data) => sendResponse({ success: true, data: { themes: data.themes ?? [] } }))
|
|
||||||
.catch((fallbackErr) => {
|
|
||||||
console.error("[Background] fetchThemes GitHub fallback error:", fallbackErr);
|
|
||||||
sendResponse({ success: false, error: fallbackErr?.message });
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleFetchThemeDetails(request: any, sendResponse: MessageSender): boolean {
|
|
||||||
const { themeId, token } = request;
|
|
||||||
if (!themeId || typeof themeId !== "string") {
|
|
||||||
sendResponse({ success: false, error: "Missing themeId" });
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
const headers: Record<string, string> = {};
|
|
||||||
if (token) headers["Authorization"] = `Bearer ${token}`;
|
|
||||||
fetch(`https://betterseqta.org/api/themes/${themeId}`, { cache: "no-store", headers })
|
|
||||||
.then((r) => r.json())
|
|
||||||
.then(sendResponse)
|
|
||||||
.catch((err) => {
|
|
||||||
console.error("[Background] fetchThemeDetails error:", err);
|
|
||||||
sendResponse({ success: false, error: err?.message });
|
|
||||||
});
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleFetchFromUrl(request: any, sendResponse: MessageSender): boolean {
|
|
||||||
const { url } = request;
|
|
||||||
if (!url || typeof url !== "string") {
|
|
||||||
sendResponse({ error: "Missing url" });
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
fetch(url, { cache: "no-store" })
|
|
||||||
.then((r) => r.json())
|
|
||||||
.then((data) => sendResponse({ data }))
|
|
||||||
.catch((err) => {
|
|
||||||
console.error("[Background] fetchFromUrl error:", err);
|
|
||||||
sendResponse({ error: err?.message });
|
|
||||||
});
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function parseJsonResponse(r: Response): Promise<any> {
|
|
||||||
const text = await r.text();
|
|
||||||
try {
|
|
||||||
return text ? JSON.parse(text) : {};
|
|
||||||
} catch {
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleCloudReserveClient(request: any, sendResponse: MessageSender): boolean {
|
|
||||||
const redirect_uri = request.redirect_uri ?? "https://accounts.betterseqta.org/auth/bsplus/callback";
|
|
||||||
fetch("https://accounts.betterseqta.org/api/bsplus/client/reserve", {
|
|
||||||
method: "POST",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify({ redirect_uri }),
|
|
||||||
})
|
|
||||||
.then(async (r) => {
|
|
||||||
const data = await parseJsonResponse(r);
|
|
||||||
if (!r.ok) sendResponse({ error: data?.error ?? `Reserve failed (${r.status})` });
|
|
||||||
else sendResponse(data);
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
console.error("[Background] cloudReserveClient error:", err);
|
|
||||||
sendResponse({ error: err?.message ?? "Network error" });
|
|
||||||
});
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleCloudLogin(request: any, sendResponse: MessageSender): boolean {
|
|
||||||
const { client_id, redirect_uri, login, password } = request;
|
|
||||||
if (!client_id || !redirect_uri || !login || !password) {
|
|
||||||
sendResponse({ error: "Missing client_id, redirect_uri, login, or password" });
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
fetch("https://accounts.betterseqta.org/api/bsplus/login", {
|
|
||||||
method: "POST",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify({ client_id, redirect_uri, login, password }),
|
|
||||||
})
|
|
||||||
.then(async (r) => {
|
|
||||||
const data = await parseJsonResponse(r);
|
|
||||||
if (!r.ok) sendResponse({ error: data?.error ?? "Login failed" });
|
|
||||||
else sendResponse(data);
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
console.error("[Background] cloudLogin error:", err);
|
|
||||||
sendResponse({ error: err?.message ?? "Network error" });
|
|
||||||
});
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleCloudRefresh(request: any, sendResponse: MessageSender): boolean {
|
|
||||||
const { refresh_token, client_id } = request;
|
|
||||||
if (!refresh_token || !client_id) {
|
|
||||||
sendResponse({ error: "Missing refresh_token or client_id" });
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
fetch("https://accounts.betterseqta.org/api/bsplus/refresh", {
|
|
||||||
method: "POST",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify({ refresh_token, client_id }),
|
|
||||||
})
|
|
||||||
.then(async (r) => {
|
|
||||||
const data = await parseJsonResponse(r);
|
|
||||||
if (!r.ok) sendResponse({ error: data?.error ?? "Refresh failed" });
|
|
||||||
else sendResponse(data);
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
console.error("[Background] cloudRefresh error:", err);
|
|
||||||
sendResponse({ error: err?.message ?? "Network error" });
|
|
||||||
});
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleCloudFavorite(request: any, sendResponse: MessageSender): boolean {
|
|
||||||
const { themeId, token, action } = request;
|
|
||||||
if (!themeId || !token) {
|
|
||||||
sendResponse({ success: false, error: "Theme ID and token required" });
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
const isFavorite = action === "favorite";
|
|
||||||
fetch(`https://betterseqta.org/api/themes/${themeId}/favorite`, {
|
|
||||||
method: isFavorite ? "POST" : "DELETE",
|
|
||||||
headers: { Authorization: `Bearer ${token}` },
|
|
||||||
})
|
|
||||||
.then((r) => r.json())
|
|
||||||
.then(sendResponse)
|
|
||||||
.catch((err) => {
|
|
||||||
console.error("[Background] cloudFavorite error:", err);
|
|
||||||
sendResponse({ success: false, error: err?.message });
|
|
||||||
});
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Handler for a message type; receives request and sendResponse callback */
|
|
||||||
type MessageHandler = { (request: any, sendResponse: MessageSender): boolean | void };
|
|
||||||
|
|
||||||
const MESSAGE_HANDLERS: Record<string, MessageHandler> = {
|
|
||||||
reloadTabs: () => reloadSeqtaPages(),
|
|
||||||
extensionPages: (req) => {
|
|
||||||
browser.tabs.query({}).then((tabs) => {
|
|
||||||
for (const tab of tabs) {
|
|
||||||
if (tab.url?.includes("chrome-extension://")) browser.tabs.sendMessage(tab.id!, req);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
currentTab: (req, sendResponse) => {
|
|
||||||
browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
|
|
||||||
browser.tabs.sendMessage(tabs[0].id!, req).then(sendResponse);
|
|
||||||
});
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
githubTab: () => {
|
|
||||||
void browser.tabs.create({ url: "github.com/BetterSEQTA/BetterSEQTA-Plus" });
|
|
||||||
},
|
|
||||||
setDefaultStorage: () => SetStorageValue(getDefaultValues()),
|
|
||||||
sendNews: (req, sendResponse) => {
|
|
||||||
fetchNews(req.source ?? "australia", sendResponse);
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
fetchThemes: handleFetchThemes,
|
|
||||||
fetchThemeDetails: handleFetchThemeDetails,
|
|
||||||
fetchFromUrl: handleFetchFromUrl,
|
|
||||||
cloudReserveClient: handleCloudReserveClient,
|
|
||||||
cloudLogin: handleCloudLogin,
|
|
||||||
cloudRefresh: handleCloudRefresh,
|
|
||||||
cloudFavorite: handleCloudFavorite,
|
|
||||||
getSeqtaSession: (req: { baseUrl?: string }, sendResponse: MessageSender) => {
|
|
||||||
(async () => {
|
|
||||||
try {
|
|
||||||
let baseUrl = req.baseUrl;
|
|
||||||
if (!baseUrl) {
|
|
||||||
const tabs = await browser.tabs.query({ active: true, currentWindow: true });
|
|
||||||
const tab = tabs[0];
|
|
||||||
if (!tab?.url) {
|
|
||||||
sendResponse({ session: null });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
baseUrl = new URL(tab.url).origin;
|
|
||||||
}
|
|
||||||
const cookies = await browser.cookies.getAll({ url: baseUrl });
|
|
||||||
const jsession = cookies.find((c) => c.name === "JSESSIONID");
|
|
||||||
if (jsession?.value) {
|
|
||||||
sendResponse({ session: { baseUrl, jsessionId: jsession.value } });
|
|
||||||
} else {
|
|
||||||
sendResponse({ session: null });
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error("[Background] getSeqtaSession error:", err);
|
|
||||||
sendResponse({ session: null });
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
browser.runtime.onMessage.addListener(
|
browser.runtime.onMessage.addListener(
|
||||||
// @ts-ignore - OnMessageListener expects literal true for async, we return boolean
|
(request: any, _: any, sendResponse: (response?: any) => void) => {
|
||||||
(request: any, _: any, sendResponse: MessageSender) => {
|
switch (request.type) {
|
||||||
const handler = MESSAGE_HANDLERS[request.type];
|
case "reloadTabs":
|
||||||
if (handler) {
|
reloadSeqtaPages();
|
||||||
const result = handler(request, sendResponse);
|
break;
|
||||||
return result === true;
|
|
||||||
|
case "extensionPages":
|
||||||
|
browser.tabs.query({}).then(function (tabs) {
|
||||||
|
for (let tab of tabs) {
|
||||||
|
if (tab.url?.includes("chrome-extension://")) {
|
||||||
|
browser.tabs.sendMessage(tab.id!, request);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "currentTab":
|
||||||
|
browser.tabs
|
||||||
|
.query({ active: true, currentWindow: true })
|
||||||
|
.then(function (tabs) {
|
||||||
|
browser.tabs
|
||||||
|
.sendMessage(tabs[0].id!, request)
|
||||||
|
.then(function (response) {
|
||||||
|
sendResponse(response);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return true;
|
||||||
|
|
||||||
|
case "githubTab":
|
||||||
|
browser.tabs.create({ url: "github.com/BetterSEQTA/BetterSEQTA-Plus" });
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "setDefaultStorage":
|
||||||
|
SetStorageValue(getDefaultValues());
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "sendNews":
|
||||||
|
fetchNews(request.source ?? "australia", sendResponse);
|
||||||
|
return true;
|
||||||
|
|
||||||
|
default:
|
||||||
console.log("Unknown request type");
|
console.log("Unknown request type");
|
||||||
|
}
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
@@ -305,9 +127,6 @@ function getDefaultValues(): SettingsState {
|
|||||||
customshortcuts: [],
|
customshortcuts: [],
|
||||||
lettergrade: false,
|
lettergrade: false,
|
||||||
newsSource: "australia",
|
newsSource: "australia",
|
||||||
iconOnlySidebar: false,
|
|
||||||
adaptiveThemeColour: false,
|
|
||||||
adaptiveThemeGradient: false,
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
+12
-13
@@ -92,12 +92,8 @@ const rssFeedsByCountry: Record<string, string[]> = {
|
|||||||
* used to send the fetched news data back to the caller.
|
* used to send the fetched news data back to the caller.
|
||||||
* It's called with an object like `{ news: { articles: [...] } }`.
|
* It's called with an object like `{ news: { articles: [...] } }`.
|
||||||
*/
|
*/
|
||||||
export async function fetchNews(source: string | undefined, sendResponse: any) {
|
export async function fetchNews(source: string, sendResponse: any) {
|
||||||
const normalizedSource = typeof source === "string" && source.trim()
|
if (source === "australia") {
|
||||||
? source.trim()
|
|
||||||
: "australia";
|
|
||||||
|
|
||||||
if (normalizedSource === "australia") {
|
|
||||||
const date = new Date();
|
const date = new Date();
|
||||||
|
|
||||||
const from =
|
const from =
|
||||||
@@ -115,15 +111,18 @@ export async function fetchNews(source: string | undefined, sendResponse: any) {
|
|||||||
|
|
||||||
const parser = new Parser();
|
const parser = new Parser();
|
||||||
let feeds: string[];
|
let feeds: string[];
|
||||||
console.log("fetchNews", normalizedSource);
|
console.log("fetchNews", source);
|
||||||
|
|
||||||
if (rssFeedsByCountry[normalizedSource.toLowerCase()]) {
|
if (rssFeedsByCountry[source.toLowerCase()]) {
|
||||||
feeds = rssFeedsByCountry[normalizedSource.toLowerCase()];
|
// If the source is a country, fetch from predefined feeds
|
||||||
} else if (normalizedSource.startsWith("http")) {
|
feeds = rssFeedsByCountry[source.toLowerCase()];
|
||||||
feeds = [normalizedSource];
|
} else if (source.startsWith("http")) {
|
||||||
|
// If the source is a URL, use it directly
|
||||||
|
feeds = [source];
|
||||||
} else {
|
} else {
|
||||||
console.warn("[BetterSEQTA+] Invalid news source, falling back to Australia", normalizedSource);
|
throw new Error(
|
||||||
return fetchNews("australia", sendResponse);
|
"Invalid source. Provide a country code or a valid RSS feed URL.",
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const articlesPromises = feeds.map(async (feedUrl) => {
|
const articlesPromises = feeds.map(async (feedUrl) => {
|
||||||
|
|||||||
@@ -17,42 +17,10 @@
|
|||||||
|
|
||||||
@use "injected/popup.scss";
|
@use "injected/popup.scss";
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "Roboto";
|
|
||||||
src: url("https://fonts.gstatic.com/s/roboto/v50/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2")
|
|
||||||
format("woff2");
|
|
||||||
font-weight: 700;
|
|
||||||
font-style: normal;
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "IconFamily";
|
|
||||||
src: url("@/resources/fonts/IconFamily.woff") format("woff");
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
font-display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
@layer base, override;
|
|
||||||
|
|
||||||
@layer override {
|
|
||||||
* {
|
|
||||||
font-family: Rubik, sans-serif !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconFamily,
|
|
||||||
.iconFamily *,
|
|
||||||
[class~="iconFamily"],
|
|
||||||
[class~="iconFamily"] * {
|
|
||||||
font-family: "IconFamily" !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
html {
|
||||||
background: #161616 !important;
|
background: #161616 !important;
|
||||||
background-color: #161616;
|
background-color: #161616;
|
||||||
font-family: Roboto, system-ui, -apple-system, sans-serif !important;
|
font-family: Rubik, Roboto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip svg {
|
.tooltip svg {
|
||||||
|
|||||||
@@ -116,6 +116,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cke_panel_listItem > a {
|
.cke_panel_listItem > a {
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #3d3d3e !important;
|
background: #3d3d3e !important;
|
||||||
}
|
}
|
||||||
|
|||||||
+278
-294
File diff suppressed because it is too large
Load Diff
@@ -35,19 +35,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#menu .sub {
|
#menu .sub {
|
||||||
transition: transform 0.3s ease, left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
transition: transform 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
#menu > ul:has(li.hasChildren.active) > li.active {
|
#menu > ul:has(li.hasChildren.active) > li.active {
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Icon-only collapsed: submenu slides over narrow icons */
|
|
||||||
body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul:has(li.hasChildren.active) > li::before,
|
|
||||||
body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul ul:has(li.hasChildren.active) > li::before,
|
|
||||||
body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul:has(li.hasChildren.active) > li > label,
|
|
||||||
body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul:has(li.hasChildren.active) > li > svg,
|
|
||||||
body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul ul:has(li.hasChildren.active) > li > label,
|
|
||||||
body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul ul:has(li.hasChildren.active) > li > svg {
|
|
||||||
transform: translateX(-70px);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,177 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { fade } from "svelte/transition";
|
|
||||||
import browser from "webextension-polyfill";
|
|
||||||
import QRCode from "qrcode";
|
|
||||||
import { portal } from "../utils/portal";
|
|
||||||
|
|
||||||
const DEEPLINK_PREFIX = "desqta://connect/";
|
|
||||||
|
|
||||||
let showQrModal = $state(false);
|
|
||||||
let qrDataUrl = $state<string | null>(null);
|
|
||||||
let deeplink = $state<string | null>(null);
|
|
||||||
let errorMessage = $state<string | null>(null);
|
|
||||||
let isLoading = $state(false);
|
|
||||||
let isStandalone = $state(false);
|
|
||||||
|
|
||||||
function isSeqtaUrl(url: string): boolean {
|
|
||||||
try {
|
|
||||||
const u = new URL(url);
|
|
||||||
return u.hostname.includes("seqta") || u.hostname.endsWith(".edu.au");
|
|
||||||
} catch {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function normalizeBaseUrl(url: string): string {
|
|
||||||
try {
|
|
||||||
const u = new URL(url);
|
|
||||||
return u.origin;
|
|
||||||
} catch {
|
|
||||||
return url;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildDesqtaConnectPayload(baseUrl: string, jsessionId: string): string {
|
|
||||||
const payload = JSON.stringify({ u: baseUrl, s: jsessionId });
|
|
||||||
const base64 = btoa(unescape(encodeURIComponent(payload)));
|
|
||||||
const encoded = encodeURIComponent(base64);
|
|
||||||
return `${DEEPLINK_PREFIX}${encoded}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getSession(): Promise<{ baseUrl: string; jsessionId: string } | null> {
|
|
||||||
let baseUrl: string | undefined;
|
|
||||||
|
|
||||||
if (window.location.protocol === "chrome-extension:") {
|
|
||||||
// Extension popup: background will get URL from active tab
|
|
||||||
baseUrl = undefined;
|
|
||||||
} else {
|
|
||||||
// In-page (settings inside SEQTA): pass current page URL (cookies API not available in content scripts)
|
|
||||||
baseUrl = normalizeBaseUrl(window.location.href);
|
|
||||||
if (!isSeqtaUrl(baseUrl)) return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { session } = (await browser.runtime.sendMessage({
|
|
||||||
type: "getSeqtaSession",
|
|
||||||
baseUrl,
|
|
||||||
})) as { session: { baseUrl: string; jsessionId: string } | null };
|
|
||||||
return session ?? null;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function generateQrCode() {
|
|
||||||
errorMessage = null;
|
|
||||||
qrDataUrl = null;
|
|
||||||
isLoading = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
isStandalone = window.location.protocol === "chrome-extension:";
|
|
||||||
const session = await getSession();
|
|
||||||
|
|
||||||
if (!session) {
|
|
||||||
if (isStandalone) {
|
|
||||||
errorMessage =
|
|
||||||
"Open SEQTA Learn in a tab and log in, then open settings from that tab to generate a QR code.";
|
|
||||||
} else {
|
|
||||||
errorMessage = "Please log in to SEQTA Learn first.";
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const link = buildDesqtaConnectPayload(session.baseUrl, session.jsessionId);
|
|
||||||
const dataUrl = await QRCode.toDataURL(link, { width: 256, margin: 2 });
|
|
||||||
deeplink = link;
|
|
||||||
qrDataUrl = dataUrl;
|
|
||||||
showQrModal = true;
|
|
||||||
} catch (err) {
|
|
||||||
console.error("[ConnectMobileApp] Failed to generate QR:", err);
|
|
||||||
errorMessage = "Failed to generate QR code. Please try again.";
|
|
||||||
} finally {
|
|
||||||
isLoading = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeModal() {
|
|
||||||
showQrModal = false;
|
|
||||||
qrDataUrl = null;
|
|
||||||
deeplink = null;
|
|
||||||
errorMessage = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function openInDesqta() {
|
|
||||||
if (deeplink) window.location.href = deeplink;
|
|
||||||
}
|
|
||||||
|
|
||||||
function downloadQrImage() {
|
|
||||||
if (!qrDataUrl) return;
|
|
||||||
const link = document.createElement("a");
|
|
||||||
link.href = qrDataUrl;
|
|
||||||
link.download = "desqta-login-qr.png";
|
|
||||||
link.click();
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="flex flex-col gap-1 items-end">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onclick={generateQrCode}
|
|
||||||
disabled={isLoading}
|
|
||||||
class="px-5 py-1.5 text-[0.75rem] text-nowrap shadow-2xl border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 dark:text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-opacity">
|
|
||||||
{isLoading ? "Generating..." : "Generate QR"}
|
|
||||||
</button>
|
|
||||||
{#if errorMessage}
|
|
||||||
<p class="text-xs text-right text-amber-600 dark:text-amber-400">{errorMessage}</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if showQrModal && qrDataUrl}
|
|
||||||
<div
|
|
||||||
use:portal
|
|
||||||
class="fixed cursor-auto inset-0 z-[10000] flex justify-center items-center bg-black/50 backdrop-blur-sm"
|
|
||||||
role="button"
|
|
||||||
tabindex="-1"
|
|
||||||
onclick={(e) => {
|
|
||||||
if (e.target === e.currentTarget) closeModal();
|
|
||||||
}}
|
|
||||||
onkeydown={(e) => {
|
|
||||||
if (e.key === "Escape") closeModal();
|
|
||||||
}}
|
|
||||||
transition:fade={{ duration: 150 }}>
|
|
||||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
||||||
<div
|
|
||||||
class="p-6 mx-4 w-full max-w-sm bg-white rounded-2xl shadow-2xl dark:bg-zinc-800"
|
|
||||||
onclick={(e) => e.stopPropagation()}
|
|
||||||
onkeydown={(e) => e.stopPropagation()}>
|
|
||||||
<div class="flex justify-between items-center mb-4">
|
|
||||||
<h2 class="text-lg font-bold text-zinc-900 dark:text-white">Scan with DesQTA</h2>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onclick={closeModal}
|
|
||||||
class="p-2 rounded-lg transition-colors text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100 dark:hover:text-zinc-400 dark:hover:bg-zinc-700"
|
|
||||||
aria-label="Close">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-center p-4 bg-white rounded-xl dark:bg-zinc-900">
|
|
||||||
<img src={qrDataUrl} alt="DesQTA QR Code" class="w-64 h-64" />
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col gap-2 mt-4">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onclick={openInDesqta}
|
|
||||||
class="px-4 py-2.5 w-full text-sm font-medium text-white bg-indigo-600 rounded-lg transition-colors dark:bg-indigo-500 hover:bg-indigo-700 dark:hover:bg-indigo-600">
|
|
||||||
Sign into DesQTA Desktop
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onclick={downloadQrImage}
|
|
||||||
class="px-4 py-2 w-full text-xs font-medium rounded-lg border transition-colors text-zinc-500 dark:text-zinc-400 border-zinc-200 dark:border-zinc-600 hover:bg-zinc-50 dark:hover:bg-zinc-800/50">
|
|
||||||
Download QR as image
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<p class="mt-2 text-sm text-center text-zinc-600 dark:text-zinc-400">
|
|
||||||
Or scan this QR code with DesQTA on your phone.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
@@ -8,12 +8,12 @@
|
|||||||
let select: HTMLSelectElement;
|
let select: HTMLSelectElement;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="select-wrapper relative w-full overflow-hidden rounded-2xl border shadow-2xl">
|
<div class="border dark:bg-[#38373D]/50 bg-[#DDDDDD]/50 border-[#DDDDDD]/30 dark:border-[#38373D]/30 shadow-2xl rounded-xl w-full overflow-clip">
|
||||||
<select
|
<select
|
||||||
bind:this={select}
|
bind:this={select}
|
||||||
value={state}
|
value={state}
|
||||||
onchange={() => onChange(select.value)}
|
onchange={() => onChange(select.value)}
|
||||||
class="select-input w-full appearance-none border-none bg-transparent px-4 py-2.5 pr-10 text-[0.875rem] font-medium transition-colors"
|
class="px-4 py-2 pr-9 text-[0.875rem] font-medium text-black dark:text-white w-full border-none bg-white/80 dark:bg-zinc-800/70 hover:bg-white/90 dark:hover:bg-zinc-800/80 focus:bg-white/90 dark:focus:bg-zinc-800/80 focus:ring-0 rounded-md appearance-none transition-colors"
|
||||||
>
|
>
|
||||||
{#each options as option}
|
{#each options as option}
|
||||||
<option value={option.value}>
|
<option value={option.value}>
|
||||||
@@ -21,62 +21,20 @@
|
|||||||
</option>
|
</option>
|
||||||
{/each}
|
{/each}
|
||||||
</select>
|
</select>
|
||||||
<span class="select-icon pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3" aria-hidden="true">
|
|
||||||
<svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4">
|
|
||||||
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.select-wrapper {
|
/* Make native dropdown list readable on Windows */
|
||||||
background: color-mix(in srgb, var(--background-primary) 88%, transparent);
|
select option {
|
||||||
border-color: color-mix(in srgb, var(--theme-offset-bg, var(--background-secondary)) 72%, transparent);
|
background-color: #ffffff;
|
||||||
border-radius: 18px;
|
color: #111827; /* zinc-900 */
|
||||||
color: var(--text-primary);
|
}
|
||||||
transition:
|
:global(.dark) select option {
|
||||||
background-color 180ms ease,
|
background-color: #1f2937; /* zinc-800 */
|
||||||
border-color 180ms ease,
|
color: #ffffff;
|
||||||
box-shadow 180ms ease,
|
|
||||||
transform 180ms ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-wrapper:hover {
|
:global(.dark) div::after {
|
||||||
background: color-mix(in srgb, var(--background-primary) 94%, var(--background-secondary) 6%);
|
color: rgba(255, 255, 255, 0.6);
|
||||||
border-color: color-mix(in srgb, var(--theme-offset-bg, var(--background-secondary)) 88%, transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-wrapper:focus-within {
|
|
||||||
background: color-mix(in srgb, var(--background-primary) 96%, var(--background-secondary) 4%);
|
|
||||||
border-color: color-mix(in srgb, var(--text-primary) 22%, var(--theme-offset-bg, var(--background-secondary)) 78%);
|
|
||||||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary) 12%, transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-input {
|
|
||||||
color: var(--text-primary);
|
|
||||||
outline: none;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-input:hover,
|
|
||||||
.select-input:focus {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-input option {
|
|
||||||
background: var(--background-primary);
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-icon {
|
|
||||||
color: color-mix(in srgb, var(--text-primary) 60%, transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-input {
|
|
||||||
color-scheme: light;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.dark) .select-input {
|
|
||||||
color-scheme: dark;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,77 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { fade } from "svelte/transition";
|
|
||||||
import { animate } from "motion";
|
|
||||||
import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup";
|
|
||||||
|
|
||||||
let { onClose } = $props<{ onClose: () => void }>();
|
|
||||||
let modalElement: HTMLElement;
|
|
||||||
|
|
||||||
$effect(() => {
|
|
||||||
if (modalElement) {
|
|
||||||
animate(modalElement, { scale: [0.9, 1], opacity: [0, 1] }, { type: "spring", stiffness: 300, damping: 25 });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function handleSignIn() {
|
|
||||||
onClose();
|
|
||||||
if (document.getElementById("ExtensionPopup")) {
|
|
||||||
closeExtensionPopup();
|
|
||||||
} else {
|
|
||||||
window.close();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="flex fixed inset-0 z-[10000] justify-center items-center bg-black/50"
|
|
||||||
onclick={(e) => {
|
|
||||||
if (e.target === e.currentTarget) onClose();
|
|
||||||
}}
|
|
||||||
onkeydown={(e) => {
|
|
||||||
if (e.key === "Escape") onClose();
|
|
||||||
}}
|
|
||||||
role="button"
|
|
||||||
tabindex="-1"
|
|
||||||
transition:fade={{ duration: 150 }}
|
|
||||||
>
|
|
||||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
||||||
<div
|
|
||||||
bind:this={modalElement}
|
|
||||||
class="p-4 mx-4 w-full max-w-md bg-white rounded-2xl shadow-2xl dark:bg-zinc-800 dark:text-white"
|
|
||||||
onclick={(e) => e.stopPropagation()}
|
|
||||||
onkeydown={(e) => e.stopPropagation()}
|
|
||||||
>
|
|
||||||
<h2 class="mb-3 text-xl font-bold text-zinc-900 dark:text-white">
|
|
||||||
Sign in to favorite themes
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<p class="mb-6 text-zinc-600 dark:text-zinc-400">
|
|
||||||
Sign in in the Theme Store to save favorites across devices, or create an account to get started.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-wrap gap-2 justify-end">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onclick={onClose}
|
|
||||||
class="px-4 py-2 text-sm font-medium rounded-lg bg-zinc-200 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200"
|
|
||||||
>
|
|
||||||
OK
|
|
||||||
</button>
|
|
||||||
<a
|
|
||||||
href="https://accounts.betterseqta.org/register"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg border border-zinc-200 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all duration-200"
|
|
||||||
>
|
|
||||||
Create account
|
|
||||||
</a>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onclick={handleSignIn}
|
|
||||||
class="px-4 py-2 text-sm font-medium rounded-lg bg-zinc-800 dark:bg-zinc-200 text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300 transition-colors duration-200"
|
|
||||||
>
|
|
||||||
Sign in
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@@ -9,7 +9,7 @@
|
|||||||
let percentage = $derived(((state - min) / (max - min)) * 100);
|
let percentage = $derived(((state - min) / (max - min)) * 100);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="relative w-full min-w-0">
|
<div class="relative mx-auto w-full max-w-lg">
|
||||||
<input
|
<input
|
||||||
type="range"
|
type="range"
|
||||||
min={min}
|
min={min}
|
||||||
|
|||||||
@@ -3,7 +3,8 @@
|
|||||||
import './TabbedContainer.css';
|
import './TabbedContainer.css';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
let { tabs, activeTab = $bindable(0) } = $props<{ tabs: { title: string, Content: any, props?: any }[]; activeTab?: number }>();
|
let { tabs } = $props<{ tabs: { title: string, Content: any, props?: any }[] }>();
|
||||||
|
let activeTab = $state(0);
|
||||||
let containerRef: HTMLElement | null = null;
|
let containerRef: HTMLElement | null = null;
|
||||||
let tabWidth = $state(0);
|
let tabWidth = $state(0);
|
||||||
|
|
||||||
|
|||||||
@@ -1,201 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { onMount } from "svelte";
|
|
||||||
import { cloudAuth } from "@/seqta/utils/CloudAuth";
|
|
||||||
|
|
||||||
let username = $state("");
|
|
||||||
let password = $state("");
|
|
||||||
let loading = $state(false);
|
|
||||||
let error = $state<string | null>(null);
|
|
||||||
let cloudState = $state(cloudAuth.state);
|
|
||||||
let open = $state(false);
|
|
||||||
let dropdownEl: HTMLElement;
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
const unsubscribe = cloudAuth.subscribe((state) => {
|
|
||||||
cloudState = state;
|
|
||||||
});
|
|
||||||
return unsubscribe;
|
|
||||||
});
|
|
||||||
|
|
||||||
function handleClickOutside(e: MouseEvent) {
|
|
||||||
if (dropdownEl && !dropdownEl.contains(e.target as Node)) {
|
|
||||||
open = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$effect(() => {
|
|
||||||
if (open) {
|
|
||||||
const timer = setTimeout(() => {
|
|
||||||
document.addEventListener("click", handleClickOutside);
|
|
||||||
}, 0);
|
|
||||||
return () => {
|
|
||||||
clearTimeout(timer);
|
|
||||||
document.removeEventListener("click", handleClickOutside);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
async function handleLogin() {
|
|
||||||
if (loading) return;
|
|
||||||
error = null;
|
|
||||||
if (!username.trim() || !password) {
|
|
||||||
error = "Please enter username and password";
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
loading = true;
|
|
||||||
try {
|
|
||||||
const result = await cloudAuth.login(username.trim(), password);
|
|
||||||
if (result.success) {
|
|
||||||
password = "";
|
|
||||||
open = false;
|
|
||||||
} else {
|
|
||||||
error = result.error ?? "Login failed";
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
loading = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleLogout() {
|
|
||||||
await cloudAuth.logout();
|
|
||||||
open = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getInitials(): string {
|
|
||||||
const u = cloudState.user;
|
|
||||||
if (!u) return "?";
|
|
||||||
if (u.displayName) return u.displayName.slice(0, 2).toUpperCase();
|
|
||||||
if (u.username) return u.username.slice(0, 2).toUpperCase();
|
|
||||||
if (u.email) return u.email.slice(0, 2).toUpperCase();
|
|
||||||
return "?";
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="relative flex items-center" bind:this={dropdownEl}>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onclick={() => (open = !open)}
|
|
||||||
class="flex items-center gap-2 px-3 py-2 rounded-lg bg-zinc-100/80 dark:bg-zinc-700/80 hover:bg-zinc-200/80 dark:hover:bg-zinc-600/80 transition-colors duration-200 text-base font-medium text-zinc-900 dark:text-white"
|
|
||||||
>
|
|
||||||
{#if cloudState.isLoggedIn}
|
|
||||||
{#if cloudState.user?.pfpUrl}
|
|
||||||
<img
|
|
||||||
src={cloudState.user.pfpUrl}
|
|
||||||
alt=""
|
|
||||||
class="w-8 h-8 rounded-full object-cover ring-2 ring-zinc-200 dark:ring-zinc-600"
|
|
||||||
/>
|
|
||||||
{:else}
|
|
||||||
<div class="flex items-center justify-center w-8 h-8 rounded-full bg-zinc-300 dark:bg-zinc-600 text-zinc-700 dark:text-zinc-200 font-semibold text-sm">
|
|
||||||
{getInitials()}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<span class="hidden max-w-24 truncate sm:inline text-base">
|
|
||||||
{cloudState.user?.displayName || cloudState.user?.username || cloudState.user?.email || "User"}
|
|
||||||
</span>
|
|
||||||
{:else}
|
|
||||||
<span class="text-xl font-IconFamily" aria-hidden="true">{'\ued53'}</span>
|
|
||||||
<span class="text-base font-medium">Sign in</span>
|
|
||||||
{/if}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{#if open}
|
|
||||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
||||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
||||||
<div
|
|
||||||
class="absolute right-0 top-full mt-2 w-80 rounded-xl border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-800 shadow-xl z-[100] overflow-hidden"
|
|
||||||
onclick={(e) => e.stopPropagation()}
|
|
||||||
>
|
|
||||||
<div class="p-4 border-b border-zinc-200 dark:border-zinc-600">
|
|
||||||
<h3 class="text-xl font-bold text-zinc-900 dark:text-white">BetterSEQTA Cloud</h3>
|
|
||||||
<p class="text-base text-zinc-500 dark:text-zinc-400">Sync favorites across devices</p>
|
|
||||||
</div>
|
|
||||||
<div class="p-4">
|
|
||||||
{#if cloudState.isLoggedIn}
|
|
||||||
<div class="flex flex-col gap-3">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
{#if cloudState.user?.pfpUrl}
|
|
||||||
<img
|
|
||||||
src={cloudState.user.pfpUrl}
|
|
||||||
alt=""
|
|
||||||
class="w-12 h-12 rounded-full object-cover ring-2 ring-zinc-200 dark:ring-zinc-600"
|
|
||||||
/>
|
|
||||||
{:else}
|
|
||||||
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-zinc-300 dark:bg-zinc-600 text-zinc-700 dark:text-zinc-200 font-semibold text-base">
|
|
||||||
{getInitials()}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<div class="min-w-0 flex-1">
|
|
||||||
<p class="text-base font-medium text-zinc-900 dark:text-white truncate">
|
|
||||||
{cloudState.user?.displayName || cloudState.user?.username || cloudState.user?.email || "User"}
|
|
||||||
</p>
|
|
||||||
{#if cloudState.user?.email && cloudState.user?.email !== (cloudState.user?.displayName || cloudState.user?.username)}
|
|
||||||
<p class="text-base text-zinc-500 dark:text-zinc-400 truncate">{cloudState.user.email}</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onclick={handleLogout}
|
|
||||||
class="w-full px-4 py-3 text-base font-medium rounded-lg bg-zinc-200 dark:bg-zinc-700 text-zinc-900 dark:text-white hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200"
|
|
||||||
>
|
|
||||||
Sign out
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<p class="mb-4 text-base text-zinc-600 dark:text-zinc-400">
|
|
||||||
Sign in to favorite themes. Your favorites sync across devices when logged in.
|
|
||||||
</p>
|
|
||||||
<form
|
|
||||||
class="flex flex-col gap-3"
|
|
||||||
autocomplete="off"
|
|
||||||
onsubmit={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
handleLogin();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="betterseqta-cloud-username"
|
|
||||||
autocomplete="off"
|
|
||||||
placeholder="Email or username"
|
|
||||||
bind:value={username}
|
|
||||||
disabled={loading}
|
|
||||||
readonly
|
|
||||||
onfocus={(e) => e.currentTarget.removeAttribute('readonly')}
|
|
||||||
class="w-full px-4 py-3 text-base rounded-lg bg-zinc-100 dark:bg-zinc-800 dark:text-white border border-zinc-200 dark:border-zinc-600 focus:outline-none focus:ring-2 focus:ring-accent-ring focus:border-transparent transition-colors duration-200"
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
name="betterseqta-cloud-password"
|
|
||||||
autocomplete="new-password"
|
|
||||||
placeholder="Password"
|
|
||||||
bind:value={password}
|
|
||||||
disabled={loading}
|
|
||||||
readonly
|
|
||||||
onfocus={(e) => e.currentTarget.removeAttribute('readonly')}
|
|
||||||
class="w-full px-4 py-3 text-base rounded-lg bg-zinc-100 dark:bg-zinc-800 dark:text-white border border-zinc-200 dark:border-zinc-600 focus:outline-none focus:ring-2 focus:ring-accent-ring focus:border-transparent transition-colors duration-200"
|
|
||||||
/>
|
|
||||||
{#if error}
|
|
||||||
<p class="text-base text-red-600 dark:text-red-400">{error}</p>
|
|
||||||
{/if}
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={loading}
|
|
||||||
class="w-full px-4 py-3 text-base font-medium rounded-lg bg-zinc-800 dark:bg-zinc-200 text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300 disabled:opacity-50 transition-colors duration-200"
|
|
||||||
>
|
|
||||||
{loading ? "Signing in..." : "Sign in"}
|
|
||||||
</button>
|
|
||||||
<a
|
|
||||||
href="https://accounts.betterseqta.org/register"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
class="inline-flex items-center justify-center gap-2 px-4 py-3 text-base font-medium rounded-lg border border-zinc-200 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all duration-200"
|
|
||||||
>
|
|
||||||
Create account
|
|
||||||
</a>
|
|
||||||
</form>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
@@ -29,7 +29,7 @@
|
|||||||
{#if coverThemes.length > 0}
|
{#if coverThemes.length > 0}
|
||||||
<div class="relative w-full overflow-clip rounded-xl transition-opacity" transition:fade>
|
<div class="relative w-full overflow-clip rounded-xl transition-opacity" transition:fade>
|
||||||
<div
|
<div
|
||||||
class="w-full aspect-[5/1] max-h-[500px]"
|
class="w-full aspect-8/3"
|
||||||
use:emblaCarouselSvelte={{ options, plugins }}
|
use:emblaCarouselSvelte={{ options, plugins }}
|
||||||
onemblaInit={onInit}
|
onemblaInit={onInit}
|
||||||
>
|
>
|
||||||
@@ -42,7 +42,7 @@
|
|||||||
onkeydown={(e) => { if (e.key === 'Enter') setDisplayTheme(theme) }}
|
onkeydown={(e) => { if (e.key === 'Enter') setDisplayTheme(theme) }}
|
||||||
onclick={() => setDisplayTheme(theme)}
|
onclick={() => setDisplayTheme(theme)}
|
||||||
>
|
>
|
||||||
<img src={theme.marqueeImage || theme.coverImage} alt="Theme Preview" class="object-cover w-full h-full" />
|
<img src={theme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-full" />
|
||||||
<div class='absolute bottom-0 left-0 p-8 z-[1]'>
|
<div class='absolute bottom-0 left-0 p-8 z-[1]'>
|
||||||
<h2 class='text-4xl font-bold text-white'>{theme.name}</h2>
|
<h2 class='text-4xl font-bold text-white'>{theme.name}</h2>
|
||||||
<p class='text-lg text-white'>{theme.description}</p>
|
<p class='text-lg text-white'>{theme.description}</p>
|
||||||
|
|||||||
@@ -3,7 +3,6 @@
|
|||||||
import logoDark from '@/resources/icons/betterseqta-light-full.png';
|
import logoDark from '@/resources/icons/betterseqta-light-full.png';
|
||||||
import { closeStore } from '@/seqta/ui/renderStore'
|
import { closeStore } from '@/seqta/ui/renderStore'
|
||||||
import browser from 'webextension-polyfill';
|
import browser from 'webextension-polyfill';
|
||||||
import CloudHeader from './CloudHeader.svelte';
|
|
||||||
|
|
||||||
// Props
|
// Props
|
||||||
let { searchTerm, setSearchTerm, darkMode, activeTab, setActiveTab } = $props<{
|
let { searchTerm, setSearchTerm, darkMode, activeTab, setActiveTab } = $props<{
|
||||||
@@ -40,8 +39,6 @@
|
|||||||
>
|
>
|
||||||
Backgrounds
|
Backgrounds
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<CloudHeader />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex relative gap-2">
|
<div class="flex relative gap-2">
|
||||||
|
|||||||
@@ -1,110 +1,19 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { Theme } from '@/interface/types/Theme'
|
import type { Theme } from '@/interface/types/Theme'
|
||||||
|
|
||||||
|
let { theme, onClick } = $props<{ theme: Theme; onClick: () => void }>();
|
||||||
|
|
||||||
import { fade } from 'svelte/transition';
|
import { fade } from 'svelte/transition';
|
||||||
import { onMount } from 'svelte';
|
|
||||||
import SignInToFavoriteModal from '@/interface/components/SignInToFavoriteModal.svelte';
|
|
||||||
|
|
||||||
let { theme, onClick, toggleFavorite, isLoggedIn } = $props<{
|
|
||||||
theme: Theme;
|
|
||||||
onClick: () => void;
|
|
||||||
toggleFavorite: (theme: Theme) => void;
|
|
||||||
isLoggedIn: boolean;
|
|
||||||
}>();
|
|
||||||
let menuOpen = $state(false);
|
|
||||||
let showSignInModal = $state(false);
|
|
||||||
let menuRef: HTMLDivElement;
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
const closeMenu = (e: MouseEvent) => {
|
|
||||||
if (menuOpen && menuRef && !menuRef.contains(e.target as Node)) {
|
|
||||||
menuOpen = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
document.addEventListener('click', closeMenu);
|
|
||||||
return () => document.removeEventListener('click', closeMenu);
|
|
||||||
});
|
|
||||||
|
|
||||||
function handleCardClick(e: MouseEvent) {
|
|
||||||
if ((e.target as HTMLElement).closest('[data-theme-menu]')) return;
|
|
||||||
onClick();
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleFavoriteClick(e: MouseEvent) {
|
|
||||||
e.stopPropagation();
|
|
||||||
if (isLoggedIn) {
|
|
||||||
toggleFavorite(theme);
|
|
||||||
} else {
|
|
||||||
showSignInModal = true;
|
|
||||||
}
|
|
||||||
menuOpen = false;
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="w-full cursor-pointer" role="button" tabindex="-1" onkeydown={onClick} onclick={handleCardClick}>
|
<div class="w-full cursor-pointer" role="button" tabindex="-1" onkeydown={onClick} onclick={onClick}>
|
||||||
<div class="bg-gray-50 w-full transition-all hover:scale-105 duration-500 relative group flex flex-col hover:shadow-2xl dark:hover:shadow-white/[0.1] dark:hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] h-auto rounded-xl overflow-clip border" transition:fade>
|
<div class="bg-gray-50 w-full transition-all hover:scale-105 duration-500 relative group flex flex-col hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] h-auto rounded-xl overflow-clip border" transition:fade>
|
||||||
<!-- Menu dropdown -->
|
<div class="absolute bottom-1 left-3 z-10 mb-1 text-xl font-bold text-white">
|
||||||
<div class="absolute top-2 right-2 z-20" data-theme-menu bind:this={menuRef}>
|
{theme.name}
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="flex justify-center items-center w-8 h-8 rounded-lg bg-black/40 hover:bg-black/60 text-white transition-all"
|
|
||||||
onclick={(e) => { e.stopPropagation(); menuOpen = !menuOpen; }}
|
|
||||||
aria-label="Theme options"
|
|
||||||
>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5">
|
|
||||||
<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
{#if menuOpen}
|
|
||||||
<div
|
|
||||||
class="absolute right-0 top-full mt-1 py-1 min-w-[140px] rounded-lg bg-white dark:bg-zinc-800 shadow-lg border border-zinc-200 dark:border-zinc-700"
|
|
||||||
role="menu"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="flex gap-2 items-center w-full px-3 py-2 text-left text-sm hover:bg-zinc-100 dark:hover:bg-zinc-700"
|
|
||||||
role="menuitem"
|
|
||||||
onclick={handleFavoriteClick}
|
|
||||||
title={isLoggedIn ? (theme.is_favorited ? 'Remove from favorites' : 'Add to favorites') : 'Sign in to favorite themes'}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill={theme.is_favorited ? 'currentColor' : 'none'}
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
class="w-5 h-5 {theme.is_favorited ? 'text-red-500' : ''}"
|
|
||||||
>
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
|
||||||
</svg>
|
|
||||||
{theme.is_favorited ? 'Favorited' : 'Favorite'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<div class="absolute bottom-1 left-3 right-3 z-10 mb-1 flex flex-col gap-0.5">
|
|
||||||
<span class="text-xl font-bold text-white drop-shadow-md">{theme.name}</span>
|
|
||||||
<div class="flex gap-3 text-xs font-medium text-white/90 drop-shadow-sm">
|
|
||||||
<span class="flex items-center gap-1">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3.5 h-3.5">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
|
|
||||||
</svg>
|
|
||||||
{(theme.download_count ?? 0).toLocaleString()}
|
|
||||||
</span>
|
|
||||||
<span class="flex items-center gap-1">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill={theme.is_favorited ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="1.5" class="w-3.5 h-3.5">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
|
||||||
</svg>
|
|
||||||
{(theme.favorite_count ?? 0).toLocaleString()}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class='absolute bottom-0 z-0 w-full h-3/4 bg-linear-to-t to-transparent from-black/80'></div>
|
<div class='absolute bottom-0 z-0 w-full h-3/4 bg-linear-to-t to-transparent from-black/80'></div>
|
||||||
<div class='w-full'>
|
<div class='w-full'>
|
||||||
<img src={theme.marqueeImage || theme.coverImage} alt="Theme Preview" class="object-cover w-full h-48 rounded-md" />
|
<img src={theme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-48 rounded-md" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if showSignInModal}
|
|
||||||
<SignInToFavoriteModal onClose={() => (showSignInModal = false)} />
|
|
||||||
{/if}
|
|
||||||
|
|||||||
@@ -2,13 +2,7 @@
|
|||||||
import type { Theme } from '@/interface/types/Theme'
|
import type { Theme } from '@/interface/types/Theme'
|
||||||
import ThemeCard from './ThemeCard.svelte';
|
import ThemeCard from './ThemeCard.svelte';
|
||||||
|
|
||||||
let { themes, searchTerm, setDisplayTheme, toggleFavorite, isLoggedIn } = $props<{
|
let { themes, searchTerm, setDisplayTheme } = $props<{ themes: Theme[]; searchTerm: string, setDisplayTheme: (theme: Theme) => void }>();
|
||||||
themes: Theme[];
|
|
||||||
searchTerm: string;
|
|
||||||
setDisplayTheme: (theme: Theme) => void;
|
|
||||||
toggleFavorite: (theme: Theme) => void;
|
|
||||||
isLoggedIn: boolean;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
let filteredThemes = $derived(themes.filter((theme: Theme) =>
|
let filteredThemes = $derived(themes.filter((theme: Theme) =>
|
||||||
theme.name.toLowerCase().includes(searchTerm.toLowerCase()) || theme.description.toLowerCase().includes(searchTerm.toLowerCase())
|
theme.name.toLowerCase().includes(searchTerm.toLowerCase()) || theme.description.toLowerCase().includes(searchTerm.toLowerCase())
|
||||||
@@ -18,12 +12,7 @@
|
|||||||
<div class="relative" >
|
<div class="relative" >
|
||||||
<div class="grid grid-cols-1 gap-4 py-12 mx-auto sm:grid-cols-2 lg:grid-cols-3">
|
<div class="grid grid-cols-1 gap-4 py-12 mx-auto sm:grid-cols-2 lg:grid-cols-3">
|
||||||
{#each filteredThemes as theme (theme.id)}
|
{#each filteredThemes as theme (theme.id)}
|
||||||
<ThemeCard
|
<ThemeCard theme={theme} onClick={() => setDisplayTheme(theme)} />
|
||||||
{theme}
|
|
||||||
onClick={() => setDisplayTheme(theme)}
|
|
||||||
{toggleFavorite}
|
|
||||||
{isLoggedIn}
|
|
||||||
/>
|
|
||||||
{/each}
|
{/each}
|
||||||
|
|
||||||
{#if filteredThemes.length !== 0}
|
{#if filteredThemes.length !== 0}
|
||||||
|
|||||||
@@ -2,9 +2,8 @@
|
|||||||
import type { Theme } from '@/interface/types/Theme'
|
import type { Theme } from '@/interface/types/Theme'
|
||||||
import { fade } from 'svelte/transition';
|
import { fade } from 'svelte/transition';
|
||||||
import { animate } from 'motion';
|
import { animate } from 'motion';
|
||||||
import SignInToFavoriteModal from '@/interface/components/SignInToFavoriteModal.svelte';
|
|
||||||
|
|
||||||
let { theme, currentThemes, setDisplayTheme, onInstall, onRemove, allThemes, displayTheme, toggleFavorite, isLoggedIn } = $props<{
|
let { theme, currentThemes, setDisplayTheme, onInstall, onRemove, allThemes, displayTheme } = $props<{
|
||||||
theme: Theme | null;
|
theme: Theme | null;
|
||||||
currentThemes: string[];
|
currentThemes: string[];
|
||||||
setDisplayTheme: (theme: Theme | null) => void;
|
setDisplayTheme: (theme: Theme | null) => void;
|
||||||
@@ -12,30 +11,15 @@
|
|||||||
onRemove: (themeId: string) => void;
|
onRemove: (themeId: string) => void;
|
||||||
allThemes: Theme[];
|
allThemes: Theme[];
|
||||||
displayTheme: Theme | null;
|
displayTheme: Theme | null;
|
||||||
toggleFavorite?: (theme: Theme) => void;
|
|
||||||
isLoggedIn?: boolean;
|
|
||||||
}>();
|
}>();
|
||||||
let installing = $state(false);
|
let installing = $state(false);
|
||||||
let showSignInModal = $state(false);
|
|
||||||
let modalElement: HTMLElement;
|
let modalElement: HTMLElement;
|
||||||
|
|
||||||
function handleFavoriteClick() {
|
|
||||||
if (isLoggedIn && toggleFavorite && theme) {
|
|
||||||
toggleFavorite(theme);
|
|
||||||
} else {
|
|
||||||
showSignInModal = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Function to get related themes
|
// Function to get related themes
|
||||||
function getRelatedThemes() {
|
function getRelatedThemes() {
|
||||||
if (!theme) return [];
|
|
||||||
return allThemes
|
return allThemes
|
||||||
.filter((t: Theme) => !!t && t.id !== theme.id)
|
.filter((t: Theme) => t.id !== theme.id)
|
||||||
.sort(
|
.sort((a: Theme, b: Theme) => a.name.localeCompare(theme.name) - b.name.localeCompare(theme.name))
|
||||||
(a: Theme, b: Theme) =>
|
|
||||||
a.name.localeCompare(theme.name) - b.name.localeCompare(theme.name),
|
|
||||||
)
|
|
||||||
.slice(0, 4);
|
.slice(0, 4);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -88,51 +72,19 @@
|
|||||||
onclick={(e) => e.stopPropagation()}
|
onclick={(e) => e.stopPropagation()}
|
||||||
onkeydown={(e) => e.stopPropagation()}
|
onkeydown={(e) => e.stopPropagation()}
|
||||||
>
|
>
|
||||||
{#if theme}
|
|
||||||
<div class="relative h-auto">
|
<div class="relative h-auto">
|
||||||
<div class="absolute top-0 right-0 flex gap-1 items-center">
|
<button class="absolute top-0 right-0 p-2 text-xl font-bold text-gray-600 font-IconFamily dark:text-gray-200" onclick={() => hideModal()}>
|
||||||
<button class="p-2 text-xl font-bold text-gray-600 font-IconFamily dark:text-gray-200" onclick={() => hideModal()}>
|
|
||||||
{'\ued8a'}
|
{'\ued8a'}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
<h2 class="mb-4 text-2xl font-bold">
|
||||||
<h2 class="mb-2 text-2xl font-bold">
|
|
||||||
{theme.name}
|
{theme.name}
|
||||||
</h2>
|
</h2>
|
||||||
<div class="flex gap-4 mb-4 text-sm text-zinc-600 dark:text-zinc-400">
|
<img src={theme.marqueeImage} alt="Theme Cover" class="object-cover mb-4 w-full rounded-md" />
|
||||||
<span class="flex items-center gap-1.5">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
|
|
||||||
</svg>
|
|
||||||
{(theme.download_count ?? 0).toLocaleString()} downloads
|
|
||||||
</span>
|
|
||||||
<span class="flex items-center gap-1.5">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill={theme.is_favorited ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="1.5" class="w-4 h-4">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
|
||||||
</svg>
|
|
||||||
{(theme.favorite_count ?? 0).toLocaleString()} favorites
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<img src={theme.marqueeImage || theme.coverImage} alt="Theme Cover" class="object-cover mb-4 w-full rounded-md" />
|
|
||||||
<p class="mb-4 text-gray-700 dark:text-gray-300">
|
<p class="mb-4 text-gray-700 dark:text-gray-300">
|
||||||
{theme.description}
|
{theme.description}
|
||||||
</p>
|
</p>
|
||||||
<div class="flex flex-wrap gap-2 mt-4 justify-end items-center">
|
|
||||||
{#if toggleFavorite && theme}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="flex items-center gap-2 px-4 py-2 rounded-full transition-all duration-200 hover:scale-105 active:scale-95 {theme.is_favorited ? 'text-red-500 bg-red-500/10 dark:bg-red-500/20' : 'bg-zinc-200 dark:bg-zinc-700 dark:text-white hover:bg-zinc-300 dark:hover:bg-zinc-600'}"
|
|
||||||
onclick={handleFavoriteClick}
|
|
||||||
title={isLoggedIn ? (theme.is_favorited ? 'Remove from favorites' : 'Add to favorites') : 'Sign in to favorite themes'}
|
|
||||||
aria-label={theme.is_favorited ? 'Unfavorite' : 'Favorite'}
|
|
||||||
>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill={theme.is_favorited ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2" class="w-5 h-5">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
|
||||||
</svg>
|
|
||||||
{theme.is_favorited ? 'Favorited' : 'Favorite'}
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
{#if currentThemes.includes(theme.id)}
|
{#if currentThemes.includes(theme.id)}
|
||||||
<button onclick={async () => {installing = true; await onRemove(theme.id); installing = false}} class="flex relative justify-center items-center px-4 py-2 w-32 text-black rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200 transition-all duration-200 hover:scale-105 active:scale-95">
|
<button onclick={async () => {installing = true; await onRemove(theme.id); installing = false}} class="flex relative justify-center items-center px-4 py-2 mt-4 ml-auto w-32 text-black rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200">
|
||||||
{#if installing}
|
{#if installing}
|
||||||
<svg class="absolute w-4 h-4 { installing ? 'opacity-100' : 'opacity-0' }" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
<svg class="absolute w-4 h-4 { installing ? 'opacity-100' : 'opacity-0' }" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path stroke="currentColor" fill="currentColor" class="origin-center animate-spin-fast" d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"/>
|
<path stroke="currentColor" fill="currentColor" class="origin-center animate-spin-fast" d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"/>
|
||||||
@@ -141,7 +93,7 @@
|
|||||||
<span class="{ installing ? 'opacity-0' : 'opacity-100' }">Remove</span>
|
<span class="{ installing ? 'opacity-0' : 'opacity-100' }">Remove</span>
|
||||||
</button>
|
</button>
|
||||||
{:else}
|
{:else}
|
||||||
<button onclick={async () => {installing = true; await onInstall(theme.id); installing = false}} class="flex relative justify-center items-center px-4 py-2 w-32 text-black rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200 transition-all duration-200 hover:scale-105 active:scale-95">
|
<button onclick={async () => {installing = true; await onInstall(theme.id); installing = false}} class="flex relative justify-center items-center px-4 py-2 mt-4 ml-auto w-32 text-black rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200">
|
||||||
{#if installing}
|
{#if installing}
|
||||||
<svg class="absolute w-4 h-4 { installing ? 'opacity-100' : 'opacity-0' }" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
<svg class="absolute w-4 h-4 { installing ? 'opacity-100' : 'opacity-0' }" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path stroke="currentColor" fill="currentColor" class="origin-center animate-spin-fast" d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"/>
|
<path stroke="currentColor" fill="currentColor" class="origin-center animate-spin-fast" d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"/>
|
||||||
@@ -150,7 +102,6 @@
|
|||||||
<span class="{ installing ? 'opacity-0' : 'opacity-100' }">Install</span>
|
<span class="{ installing ? 'opacity-0' : 'opacity-100' }">Install</span>
|
||||||
</button>
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="my-8 border-b border-zinc-200 dark:border-zinc-700"></div>
|
<div class="my-8 border-b border-zinc-200 dark:border-zinc-700"></div>
|
||||||
|
|
||||||
@@ -165,22 +116,11 @@
|
|||||||
{relatedTheme.name}
|
{relatedTheme.name}
|
||||||
</div>
|
</div>
|
||||||
<div class="absolute bottom-0 z-0 w-full h-3/4 to-transparent from-black/80 bg-linear-to-t"></div>
|
<div class="absolute bottom-0 z-0 w-full h-3/4 to-transparent from-black/80 bg-linear-to-t"></div>
|
||||||
<img src={relatedTheme.marqueeImage || relatedTheme.coverImage} alt="Theme Preview" class="object-cover w-full h-48" />
|
<img src={relatedTheme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-48" />
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
|
||||||
<div class="flex justify-center items-center h-full text-zinc-600 dark:text-zinc-300">
|
|
||||||
<button class="px-4 py-2 rounded-lg bg-zinc-200 dark:bg-zinc-700 transition-all duration-200 hover:scale-105 active:scale-95" onclick={() => hideModal()}>
|
|
||||||
Close
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if showSignInModal}
|
|
||||||
<SignInToFavoriteModal onClose={() => (showSignInModal = false)} />
|
|
||||||
{/if}
|
|
||||||
|
|||||||
@@ -1,14 +1,11 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { CustomTheme, ThemeList } from '@/types/CustomThemes'
|
import type { CustomTheme, ThemeList } from '@/types/CustomThemes'
|
||||||
import { onDestroy, onMount } from 'svelte'
|
import { onDestroy, onMount } from 'svelte'
|
||||||
import browser from 'webextension-polyfill'
|
|
||||||
import { OpenThemeCreator } from '@/plugins/built-in/themes/ThemeCreator'
|
import { OpenThemeCreator } from '@/plugins/built-in/themes/ThemeCreator'
|
||||||
import { OpenStorePage } from '@/seqta/ui/renderStore'
|
import { OpenStorePage } from '@/seqta/ui/renderStore'
|
||||||
import { themeUpdates } from '@/interface/hooks/ThemeUpdates'
|
import { themeUpdates } from '@/interface/hooks/ThemeUpdates'
|
||||||
import { closeExtensionPopup } from '@/seqta/utils/Closers/closeExtensionPopup'
|
import { closeExtensionPopup } from '@/seqta/utils/Closers/closeExtensionPopup'
|
||||||
import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
|
import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
|
||||||
import { cloudAuth } from '@/seqta/utils/CloudAuth'
|
|
||||||
import SignInToFavoriteModal from '@/interface/components/SignInToFavoriteModal.svelte'
|
|
||||||
|
|
||||||
const themeManager = ThemeManager.getInstance();
|
const themeManager = ThemeManager.getInstance();
|
||||||
|
|
||||||
@@ -16,17 +13,6 @@
|
|||||||
let { isEditMode } = $props<{ isEditMode: boolean }>();
|
let { isEditMode } = $props<{ isEditMode: boolean }>();
|
||||||
let isDragging = $state(false);
|
let isDragging = $state(false);
|
||||||
let tempTheme = $state(null);
|
let tempTheme = $state(null);
|
||||||
let favoriteStatus = $state<Record<string, boolean>>({});
|
|
||||||
let cloudLoggedIn = $state(cloudAuth.state.isLoggedIn);
|
|
||||||
let prevLoggedIn = $state(false);
|
|
||||||
let showSignInModal = $state(false);
|
|
||||||
|
|
||||||
cloudAuth.subscribe((s) => {
|
|
||||||
const now = s.isLoggedIn;
|
|
||||||
if (now && !prevLoggedIn && themes) void fetchThemes();
|
|
||||||
prevLoggedIn = now;
|
|
||||||
cloudLoggedIn = now;
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleThemeClick = async (theme: CustomTheme, e: MouseEvent) => {
|
const handleThemeClick = async (theme: CustomTheme, e: MouseEvent) => {
|
||||||
if (isEditMode) return;
|
if (isEditMode) return;
|
||||||
@@ -101,55 +87,11 @@
|
|||||||
themes: await themeManager.getAvailableThemes(),
|
themes: await themeManager.getAvailableThemes(),
|
||||||
selectedTheme: themeManager.getSelectedThemeId() || '',
|
selectedTheme: themeManager.getSelectedThemeId() || '',
|
||||||
}
|
}
|
||||||
if (themes && cloudLoggedIn) {
|
|
||||||
const token = await cloudAuth.getStoredToken();
|
|
||||||
if (token) {
|
|
||||||
const status: Record<string, boolean> = {};
|
|
||||||
await Promise.all(
|
|
||||||
themes.themes.map(async (t) => {
|
|
||||||
try {
|
|
||||||
const res = (await browser.runtime.sendMessage({
|
|
||||||
type: 'fetchThemeDetails',
|
|
||||||
themeId: t.id,
|
|
||||||
token,
|
|
||||||
})) as { success?: boolean; data?: { theme?: { is_favorited?: boolean } } };
|
|
||||||
if (res?.success && res?.data?.theme) {
|
|
||||||
status[t.id] = !!res.data.theme.is_favorited;
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// Theme may not exist on store (e.g. locally created)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
);
|
|
||||||
favoriteStatus = status;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
favoriteStatus = {};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleToggleFavorite = async (theme: CustomTheme, e: MouseEvent) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
if (!cloudLoggedIn) {
|
|
||||||
showSignInModal = true;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const token = await cloudAuth.getStoredToken();
|
|
||||||
if (!token) return;
|
|
||||||
const isFavorite = !favoriteStatus[theme.id];
|
|
||||||
const result = (await browser.runtime.sendMessage({
|
|
||||||
type: 'cloudFavorite',
|
|
||||||
themeId: theme.id,
|
|
||||||
token,
|
|
||||||
action: isFavorite ? 'favorite' : 'unfavorite',
|
|
||||||
})) as { success?: boolean };
|
|
||||||
if (result?.success) {
|
|
||||||
favoriteStatus = { ...favoriteStatus, [theme.id]: isFavorite };
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
await fetchThemes();
|
await fetchThemes();
|
||||||
|
|
||||||
themeUpdates.addListener(fetchThemes);
|
themeUpdates.addListener(fetchThemes);
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -202,18 +144,6 @@
|
|||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if !isEditMode}
|
{#if !isEditMode}
|
||||||
<div
|
|
||||||
class="flex absolute right-24 top-1/4 z-20 place-items-center p-2 w-8 h-8 text-center rounded-full opacity-0 transition-all -translate-y-1/2 group-hover:opacity-100 group-hover:top-1/2 {(favoriteStatus[theme.id] ?? false) ? 'text-red-400' : 'text-white/80'} bg-black/50"
|
|
||||||
onclick={(event) => handleToggleFavorite(theme, event)}
|
|
||||||
onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') handleToggleFavorite(theme, event as any) }}
|
|
||||||
role="button"
|
|
||||||
tabindex="-1"
|
|
||||||
title={cloudLoggedIn ? ((favoriteStatus[theme.id] ?? false) ? 'Remove from favorites' : 'Add to favorites') : 'Sign in to favorite themes'}
|
|
||||||
>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill={(favoriteStatus[theme.id] ?? false) ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2" class="w-5 h-5">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
class="absolute z-20 flex w-8 h-8 p-2 text-white transition-all rounded-full delay-[20ms] opacity-0 top-1/4 right-2 bg-black/50 place-items-center group-hover:opacity-100 group-hover:top-1/2 -translate-y-1/2"
|
class="absolute z-20 flex w-8 h-8 p-2 text-white transition-all rounded-full delay-[20ms] opacity-0 top-1/4 right-2 bg-black/50 place-items-center group-hover:opacity-100 group-hover:top-1/2 -translate-y-1/2"
|
||||||
onclick={(event) => { event.stopPropagation(); OpenThemeCreator(theme.id); closeExtensionPopup() }}
|
onclick={(event) => { event.stopPropagation(); OpenThemeCreator(theme.id); closeExtensionPopup() }}
|
||||||
@@ -281,7 +211,3 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if showSignInModal}
|
|
||||||
<SignInToFavoriteModal onClose={() => (showSignInModal = false)} />
|
|
||||||
{/if}
|
|
||||||
|
|||||||
@@ -19,7 +19,6 @@
|
|||||||
import { settingsPopup } from "../hooks/SettingsPopup";
|
import { settingsPopup } from "../hooks/SettingsPopup";
|
||||||
|
|
||||||
let devModeSequence = "";
|
let devModeSequence = "";
|
||||||
let settingsActiveTab = $state(0);
|
|
||||||
let showDisclaimerModal = $state(false);
|
let showDisclaimerModal = $state(false);
|
||||||
let disclaimerCallbacks = $state<{ onConfirm: () => void, onCancel: () => void } | null>(null);
|
let disclaimerCallbacks = $state<{ onConfirm: () => void, onCancel: () => void } | null>(null);
|
||||||
|
|
||||||
@@ -72,14 +71,13 @@
|
|||||||
showDisclaimerModal = true;
|
showDisclaimerModal = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
onMount(() => {
|
onMount(async () => {
|
||||||
settingsPopup.addListener(() => {
|
settingsPopup.addListener(() => {
|
||||||
showColourPicker = false;
|
showColourPicker = false;
|
||||||
});
|
});
|
||||||
|
|
||||||
if (standalone) {
|
if (!standalone) return;
|
||||||
StandaloneStore.setStandalone(true);
|
StandaloneStore.setStandalone(true);
|
||||||
}
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -277,7 +275,6 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<TabbedContainer
|
<TabbedContainer
|
||||||
bind:activeTab={settingsActiveTab}
|
|
||||||
tabs={[
|
tabs={[
|
||||||
{
|
{
|
||||||
title: "Settings",
|
title: "Settings",
|
||||||
|
|||||||
@@ -10,7 +10,6 @@
|
|||||||
import type { SettingsList } from "@/interface/types/SettingsProps"
|
import type { SettingsList } from "@/interface/types/SettingsProps"
|
||||||
import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
|
import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
|
||||||
import PickerSwatch from "@/interface/components/PickerSwatch.svelte"
|
import PickerSwatch from "@/interface/components/PickerSwatch.svelte"
|
||||||
import ConnectMobileApp from "@/interface/components/ConnectMobileApp.svelte"
|
|
||||||
import { showPrivacyNotification } from "@/seqta/utils/Openers/OpenPrivacyNotification"
|
import { showPrivacyNotification } from "@/seqta/utils/Openers/OpenPrivacyNotification"
|
||||||
import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup"
|
import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup"
|
||||||
|
|
||||||
@@ -113,13 +112,6 @@
|
|||||||
|
|
||||||
<div class="flex flex-col divide-y divide-zinc-100 dark:divide-zinc-700">
|
<div class="flex flex-col divide-y divide-zinc-100 dark:divide-zinc-700">
|
||||||
{#each [
|
{#each [
|
||||||
{
|
|
||||||
title: "Connect Mobile App",
|
|
||||||
description: "Link your SEQTA session to DesQTA — the modern desktop and mobile app for SEQTA Learn.",
|
|
||||||
id: 0,
|
|
||||||
Component: ConnectMobileApp,
|
|
||||||
props: {}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: "Transparency Effects",
|
title: "Transparency Effects",
|
||||||
description: "Enables transparency effects on certain elements such as blur. (May impact battery life)",
|
description: "Enables transparency effects on certain elements such as blur. (May impact battery life)",
|
||||||
@@ -149,16 +141,6 @@
|
|||||||
text: "Edit"
|
text: "Edit"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: "Icon Only Sidebar",
|
|
||||||
description: "Show only icons in the sidebar for a compact layout.",
|
|
||||||
id: 14,
|
|
||||||
Component: Switch,
|
|
||||||
props: {
|
|
||||||
state: $settingsState.iconOnlySidebar ?? false,
|
|
||||||
onChange: (isOn: boolean) => settingsState.iconOnlySidebar = isOn
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: "Animations",
|
title: "Animations",
|
||||||
description: "Enables animations on certain pages.",
|
description: "Enables animations on certain pages.",
|
||||||
@@ -225,37 +207,6 @@
|
|||||||
{@render Setting(option)}
|
{@render Setting(option)}
|
||||||
{/each}
|
{/each}
|
||||||
|
|
||||||
<div class="border-none">
|
|
||||||
<div class="p-1 my-1 from-white to-zinc-100 bg-gradient-to-br rounded-xl border shadow-sm border-zinc-200/50 dark:border-zinc-700/40 dark:to-zinc-900/50 dark:from-zinc-900/40">
|
|
||||||
<div class="flex justify-between items-center px-4 py-3">
|
|
||||||
<div class="pr-4">
|
|
||||||
<h2 class="text-sm font-bold">Adaptive Theme Colour</h2>
|
|
||||||
<p class="text-xs">Change the theme colour based on the current class (e.g. when viewing a course or assessments page).</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Switch
|
|
||||||
state={$settingsState.adaptiveThemeColour ?? false}
|
|
||||||
onChange={(isOn: boolean) => settingsState.adaptiveThemeColour = isOn}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{#if $settingsState.adaptiveThemeColour}
|
|
||||||
<div class="flex justify-between items-center px-4 py-3 pl-6 border-t border-zinc-100 dark:border-zinc-700/50">
|
|
||||||
<div class="pr-4">
|
|
||||||
<h2 class="text-sm font-bold">Soft Gradient</h2>
|
|
||||||
<p class="text-xs">Use a soft gradient instead of a solid colour when viewing a class.</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Switch
|
|
||||||
state={$settingsState.adaptiveThemeGradient ?? false}
|
|
||||||
onChange={(isOn: boolean) => settingsState.adaptiveThemeGradient = isOn}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#each pluginSettings as plugin}
|
{#each pluginSettings as plugin}
|
||||||
<div class="border-none">
|
<div class="border-none">
|
||||||
<div class="p-1 my-1 from-white to-zinc-100 bg-gradient-to-br rounded-xl border shadow-sm border-zinc-200/50 dark:border-zinc-700/40 dark:to-zinc-900/50 dark:from-zinc-900/40 {!(plugin as any).disableToggle && Object.keys(plugin.settings).length === 0 ? 'hidden' : ''}">
|
<div class="p-1 my-1 from-white to-zinc-100 bg-gradient-to-br rounded-xl border shadow-sm border-zinc-200/50 dark:border-zinc-700/40 dark:to-zinc-900/50 dark:from-zinc-900/40 {!(plugin as any).disableToggle && Object.keys(plugin.settings).length === 0 ? 'hidden' : ''}">
|
||||||
@@ -311,7 +262,6 @@
|
|||||||
onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
|
onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
|
||||||
/>
|
/>
|
||||||
{:else if setting.type === 'number'}
|
{:else if setting.type === 'number'}
|
||||||
<div class="w-28 shrink-0">
|
|
||||||
<Slider
|
<Slider
|
||||||
state={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
|
state={pluginSettingsValues[plugin.pluginId]?.[key] ?? setting.default}
|
||||||
onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
|
onChange={(value) => updatePluginSetting(plugin.pluginId, key, value)}
|
||||||
@@ -319,7 +269,6 @@
|
|||||||
max={setting.max}
|
max={setting.max}
|
||||||
step={setting.step}
|
step={setting.step}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
{:else if setting.type === 'string'}
|
{:else if setting.type === 'string'}
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
|
|||||||
@@ -15,12 +15,8 @@
|
|||||||
|
|
||||||
import { loadBackground } from '@/seqta/ui/ImageBackgrounds'
|
import { loadBackground } from '@/seqta/ui/ImageBackgrounds'
|
||||||
import Backgrounds from '../components/store/Backgrounds.svelte'
|
import Backgrounds from '../components/store/Backgrounds.svelte'
|
||||||
import { cloudAuth } from '@/seqta/utils/CloudAuth'
|
|
||||||
|
|
||||||
const themeManager = ThemeManager.getInstance();
|
const themeManager = ThemeManager.getInstance();
|
||||||
let cloudLoggedIn = $state(cloudAuth.state.isLoggedIn);
|
|
||||||
|
|
||||||
cloudAuth.subscribe((s) => { cloudLoggedIn = s.isLoggedIn; });
|
|
||||||
|
|
||||||
// State variables
|
// State variables
|
||||||
let searchTerm = $state('');
|
let searchTerm = $state('');
|
||||||
@@ -52,57 +48,20 @@
|
|||||||
activeTab = tab;
|
activeTab = tab;
|
||||||
};
|
};
|
||||||
|
|
||||||
const toggleFavorite = async (theme: Theme) => {
|
// Fetch themes and initialize app
|
||||||
const token = await cloudAuth.getStoredToken();
|
|
||||||
if (!token) return;
|
|
||||||
const isFavorite = !theme.is_favorited;
|
|
||||||
const result = (await browser.runtime.sendMessage({
|
|
||||||
type: 'cloudFavorite',
|
|
||||||
themeId: theme.id,
|
|
||||||
token,
|
|
||||||
action: isFavorite ? 'favorite' : 'unfavorite',
|
|
||||||
})) as { success?: boolean };
|
|
||||||
if (result?.success) {
|
|
||||||
const delta = isFavorite ? 1 : -1;
|
|
||||||
themes = themes.map((t) =>
|
|
||||||
t.id === theme.id
|
|
||||||
? { ...t, is_favorited: isFavorite, favorite_count: Math.max(0, (t.favorite_count ?? 0) + delta) }
|
|
||||||
: t
|
|
||||||
);
|
|
||||||
if (displayTheme?.id === theme.id) {
|
|
||||||
displayTheme = {
|
|
||||||
...displayTheme,
|
|
||||||
is_favorited: isFavorite,
|
|
||||||
favorite_count: Math.max(0, (displayTheme.favorite_count ?? 0) + delta),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Fetch themes via background script (avoids CORS when store runs inside SEQTA page)
|
|
||||||
const fetchThemes = async () => {
|
const fetchThemes = async () => {
|
||||||
try {
|
try {
|
||||||
const token = await cloudAuth.getStoredToken();
|
const response = await fetch(`https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/themes.json?nocache=${(new Date()).getTime()}`, { cache: 'no-store' });
|
||||||
const data = (await browser.runtime.sendMessage({
|
const data = await response.json();
|
||||||
type: 'fetchThemes',
|
themes = data.themes;
|
||||||
token: token ?? undefined,
|
|
||||||
})) as {
|
|
||||||
success?: boolean;
|
|
||||||
data?: { themes: Theme[] };
|
|
||||||
error?: string;
|
|
||||||
};
|
|
||||||
if (!data?.success || !data?.data?.themes) {
|
|
||||||
throw new Error(data?.error || 'Failed to fetch themes');
|
|
||||||
}
|
|
||||||
themes = data.data.themes;
|
|
||||||
|
|
||||||
// Shuffle for cover themes
|
// Shuffle for cover themes
|
||||||
const shuffled = [...themes].sort(() => 0.5 - Math.random());
|
const shuffled = [...themes].sort(() => 0.5 - Math.random());
|
||||||
coverThemes = shuffled.slice(0, 3);
|
coverThemes = shuffled.slice(0, 3);
|
||||||
|
|
||||||
loading = false;
|
loading = false;
|
||||||
} catch (err) {
|
} catch (error) {
|
||||||
console.error('Failed to fetch themes', err);
|
console.error('Failed to fetch themes', error);
|
||||||
setTimeout(fetchThemes, 5000); // Retry after 5 seconds if failure occurs
|
setTimeout(fetchThemes, 5000); // Retry after 5 seconds if failure occurs
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -132,17 +91,6 @@
|
|||||||
console.error(error);
|
console.error(error);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Refetch themes when user logs in (from another tab) to get is_favorited
|
|
||||||
let lastLoggedIn = $state(false);
|
|
||||||
$effect(() => {
|
|
||||||
if (cloudLoggedIn && !lastLoggedIn) {
|
|
||||||
lastLoggedIn = true;
|
|
||||||
fetchThemes();
|
|
||||||
} else if (!cloudLoggedIn) {
|
|
||||||
lastLoggedIn = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="w-screen h-screen bg-white {darkMode ? 'dark' : ''}">
|
<div class="w-screen h-screen bg-white {darkMode ? 'dark' : ''}">
|
||||||
@@ -163,13 +111,7 @@
|
|||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<!-- ThemeGrid to display filtered themes -->
|
<!-- ThemeGrid to display filtered themes -->
|
||||||
<ThemeGrid
|
<ThemeGrid themes={filteredThemes} {searchTerm} {setDisplayTheme} />
|
||||||
themes={filteredThemes}
|
|
||||||
{searchTerm}
|
|
||||||
{setDisplayTheme}
|
|
||||||
{toggleFavorite}
|
|
||||||
isLoggedIn={cloudLoggedIn}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{#if displayTheme}
|
{#if displayTheme}
|
||||||
<ThemeModal
|
<ThemeModal
|
||||||
@@ -178,8 +120,6 @@
|
|||||||
theme={displayTheme}
|
theme={displayTheme}
|
||||||
{displayTheme}
|
{displayTheme}
|
||||||
{setDisplayTheme}
|
{setDisplayTheme}
|
||||||
{toggleFavorite}
|
|
||||||
isLoggedIn={cloudLoggedIn}
|
|
||||||
onInstall={async () => {
|
onInstall={async () => {
|
||||||
if (displayTheme) {
|
if (displayTheme) {
|
||||||
await themeManager.downloadTheme(displayTheme);
|
await themeManager.downloadTheme(displayTheme);
|
||||||
|
|||||||
@@ -1,11 +1,7 @@
|
|||||||
export type Theme = {
|
export type Theme = {
|
||||||
id: string;
|
|
||||||
name: string;
|
name: string;
|
||||||
description: string;
|
description: string;
|
||||||
coverImage: string;
|
coverImage: string;
|
||||||
marqueeImage?: string;
|
marqueeImage: string;
|
||||||
theme_json_url?: string;
|
id: string;
|
||||||
is_favorited?: boolean;
|
|
||||||
favorite_count?: number;
|
|
||||||
download_count?: number;
|
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,22 +0,0 @@
|
|||||||
import type { Action } from "svelte/action";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Svelte action that moves the element to a different DOM target.
|
|
||||||
* Defaults to the nearest ShadowRoot so styles remain intact when the app
|
|
||||||
* is rendered inside a shadow DOM. Falls back to document.body otherwise.
|
|
||||||
* Keeps all Svelte reactivity/events intact while escaping ancestor stacking contexts.
|
|
||||||
*/
|
|
||||||
export const portal: Action<HTMLElement, HTMLElement | ShadowRoot | undefined> = (node, target) => {
|
|
||||||
const root = node.getRootNode();
|
|
||||||
const dest = target ?? (root instanceof ShadowRoot ? root : document.body);
|
|
||||||
dest.appendChild(node);
|
|
||||||
|
|
||||||
return {
|
|
||||||
update(newTarget) {
|
|
||||||
(newTarget ?? dest).appendChild(node);
|
|
||||||
},
|
|
||||||
destroy() {
|
|
||||||
node.remove();
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@@ -15,13 +15,13 @@
|
|||||||
"64": "resources/icons/icon-64.png"
|
"64": "resources/icons/icon-64.png"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"permissions": ["tabs", "notifications", "storage", "cookies"],
|
"permissions": ["tabs", "notifications", "storage"],
|
||||||
"host_permissions": ["https://newsapi.org/", "https://betterseqta.org/", "https://accounts.betterseqta.org/", "*://*/*"],
|
"host_permissions": ["https://newsapi.org/", "*://*/*"],
|
||||||
"background": {
|
"background": {
|
||||||
"service_worker": "background.ts"
|
"service_worker": "background.ts"
|
||||||
},
|
},
|
||||||
"content_security_policy": {
|
"content_security_policy": {
|
||||||
"extension_pages": "script-src 'self'; object-src 'self'; connect-src 'self' http: https: https://betterseqta.org https://accounts.betterseqta.org https://raw.githubusercontent.com https://newsapi.org"
|
"extension_pages": "script-src 'self'; object-src 'self'"
|
||||||
},
|
},
|
||||||
"content_scripts": [
|
"content_scripts": [
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -7,20 +7,6 @@ import {
|
|||||||
import { type Plugin } from "@/plugins/core/types";
|
import { type Plugin } from "@/plugins/core/types";
|
||||||
import stringToHTML from "@/seqta/utils/stringToHTML";
|
import stringToHTML from "@/seqta/utils/stringToHTML";
|
||||||
import { waitForElm } from "@/seqta/utils/waitForElm";
|
import { waitForElm } from "@/seqta/utils/waitForElm";
|
||||||
import ReactFiber from "@/seqta/utils/ReactFiber.ts";
|
|
||||||
import {
|
|
||||||
clearStuck,
|
|
||||||
getClassByPattern,
|
|
||||||
initStorage,
|
|
||||||
letterToNumber,
|
|
||||||
parseAssessments,
|
|
||||||
processAssessments,
|
|
||||||
} from "./utils.ts";
|
|
||||||
|
|
||||||
interface weightingsStorage {
|
|
||||||
weightings: Record<string, string>;
|
|
||||||
assessments: Record<string, string>;
|
|
||||||
}
|
|
||||||
|
|
||||||
const settings = defineSettings({
|
const settings = defineSettings({
|
||||||
lettergrade: booleanSetting({
|
lettergrade: booleanSetting({
|
||||||
@@ -37,7 +23,7 @@ class AssessmentsAveragePluginClass extends BasePlugin<typeof settings> {
|
|||||||
|
|
||||||
const instance = new AssessmentsAveragePluginClass();
|
const instance = new AssessmentsAveragePluginClass();
|
||||||
|
|
||||||
const assessmentsAveragePlugin: Plugin<typeof settings, weightingsStorage> = {
|
const assessmentsAveragePlugin: Plugin<typeof settings> = {
|
||||||
id: "assessments-average",
|
id: "assessments-average",
|
||||||
name: "Assessment Averages",
|
name: "Assessment Averages",
|
||||||
description: "Adds an average grade to the Assessments page",
|
description: "Adds an average grade to the Assessments page",
|
||||||
@@ -46,10 +32,8 @@ const assessmentsAveragePlugin: Plugin<typeof settings, weightingsStorage> = {
|
|||||||
settings: instance.settings,
|
settings: instance.settings,
|
||||||
|
|
||||||
run: async (api) => {
|
run: async (api) => {
|
||||||
await initStorage(api);
|
|
||||||
clearStuck(api);
|
|
||||||
|
|
||||||
api.seqta.onMount(".assessmentsWrapper", async () => {
|
api.seqta.onMount(".assessmentsWrapper", async () => {
|
||||||
|
// Wait for any assessment item to load first
|
||||||
await waitForElm(
|
await waitForElm(
|
||||||
"#main > .assessmentsWrapper .assessments [class*='AssessmentItem__AssessmentItem___']",
|
"#main > .assessmentsWrapper .assessments [class*='AssessmentItem__AssessmentItem___']",
|
||||||
true,
|
true,
|
||||||
@@ -57,13 +41,26 @@ const assessmentsAveragePlugin: Plugin<typeof settings, weightingsStorage> = {
|
|||||||
1000,
|
1000,
|
||||||
);
|
);
|
||||||
|
|
||||||
await parseAssessments(api);
|
// Helper function to find actual class names by their base pattern
|
||||||
|
const getClassByPattern = (
|
||||||
|
element: Element | Document,
|
||||||
|
basePattern: string,
|
||||||
|
): string => {
|
||||||
|
// Find all classes on the element
|
||||||
|
const classes = Array.from(element.querySelectorAll("*"))
|
||||||
|
.flatMap((el) => Array.from(el.classList))
|
||||||
|
.filter((className) => className.startsWith(basePattern));
|
||||||
|
|
||||||
|
return classes.length ? classes[0] : "";
|
||||||
|
};
|
||||||
|
|
||||||
|
// Find actual class names from the DOM
|
||||||
const sampleAssessmentItem = document.querySelector(
|
const sampleAssessmentItem = document.querySelector(
|
||||||
"[class*='AssessmentItem__AssessmentItem___']",
|
"[class*='AssessmentItem__AssessmentItem___']",
|
||||||
);
|
);
|
||||||
if (!sampleAssessmentItem) return;
|
if (!sampleAssessmentItem) return;
|
||||||
|
|
||||||
|
// Extract all necessary class patterns from a sample assessment item
|
||||||
const assessmentItemClass =
|
const assessmentItemClass =
|
||||||
Array.from(sampleAssessmentItem.classList).find((c) =>
|
Array.from(sampleAssessmentItem.classList).find((c) =>
|
||||||
c.startsWith("AssessmentItem__AssessmentItem___"),
|
c.startsWith("AssessmentItem__AssessmentItem___"),
|
||||||
@@ -86,6 +83,7 @@ const assessmentsAveragePlugin: Plugin<typeof settings, weightingsStorage> = {
|
|||||||
"AssessmentItem__title___",
|
"AssessmentItem__title___",
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Get Thermoscore classes
|
||||||
const thermoscoreElement = document.querySelector(
|
const thermoscoreElement = document.querySelector(
|
||||||
"[class*='Thermoscore__Thermoscore___']",
|
"[class*='Thermoscore__Thermoscore___']",
|
||||||
);
|
);
|
||||||
@@ -104,34 +102,62 @@ const assessmentsAveragePlugin: Plugin<typeof settings, weightingsStorage> = {
|
|||||||
"Thermoscore__text___",
|
"Thermoscore__text___",
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Find assessment list
|
||||||
const assessmentsList = document.querySelector(
|
const assessmentsList = document.querySelector(
|
||||||
"#main > .assessmentsWrapper .assessments [class*='AssessmentList__items___']",
|
"#main > .assessmentsWrapper .assessments [class*='AssessmentList__items___']",
|
||||||
);
|
);
|
||||||
if (!assessmentsList) return;
|
if (!assessmentsList) return;
|
||||||
|
|
||||||
const state = await ReactFiber.find(
|
const gradeElements = document.querySelectorAll(
|
||||||
"[class*='AssessmentList__items___']",
|
"[class*='Thermoscore__text___']",
|
||||||
).getState();
|
|
||||||
const marks = state["marks"];
|
|
||||||
if (!marks || !marks.length) return;
|
|
||||||
|
|
||||||
const assessmentItems = Array.from(
|
|
||||||
assessmentsList.querySelectorAll(
|
|
||||||
`[class*='AssessmentItem__AssessmentItem___']`,
|
|
||||||
),
|
|
||||||
).filter(
|
|
||||||
(item) =>
|
|
||||||
!item
|
|
||||||
.querySelector(`[class*='AssessmentItem__title___']`)
|
|
||||||
?.textContent?.includes("Subject Average"),
|
|
||||||
);
|
);
|
||||||
|
if (!gradeElements.length) return;
|
||||||
|
|
||||||
const { weightedTotal, totalWeight, hasInaccurateWeighting, count } =
|
// Parse and average grades
|
||||||
await processAssessments(api, assessmentItems);
|
const letterToNumber: Record<string, number> = {
|
||||||
|
"A+": 100,
|
||||||
|
A: 95,
|
||||||
|
"A-": 90,
|
||||||
|
"B+": 85,
|
||||||
|
B: 80,
|
||||||
|
"B-": 75,
|
||||||
|
"C+": 70,
|
||||||
|
C: 65,
|
||||||
|
"C-": 60,
|
||||||
|
"D+": 55,
|
||||||
|
D: 50,
|
||||||
|
"D-": 45,
|
||||||
|
"E+": 40,
|
||||||
|
E: 35,
|
||||||
|
"E-": 30,
|
||||||
|
F: 0,
|
||||||
|
};
|
||||||
|
|
||||||
if (!count || totalWeight === 0) return;
|
function parseGrade(text: string): number {
|
||||||
|
const str = text.trim().toUpperCase();
|
||||||
|
if (str.includes("/")) {
|
||||||
|
const [raw, max] = str.split("/").map((n) => parseFloat(n));
|
||||||
|
return (raw / max) * 100;
|
||||||
|
}
|
||||||
|
if (str.includes("%")) {
|
||||||
|
return parseFloat(str.replace("%", "")) || 0;
|
||||||
|
}
|
||||||
|
return letterToNumber[str] ?? 0;
|
||||||
|
}
|
||||||
|
|
||||||
const avg = weightedTotal / totalWeight;
|
let total = 0;
|
||||||
|
let count = 0;
|
||||||
|
gradeElements.forEach((el) => {
|
||||||
|
const grade = parseGrade(el.textContent || "");
|
||||||
|
if (grade > 0) {
|
||||||
|
total += grade;
|
||||||
|
count++;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!count) return;
|
||||||
|
|
||||||
|
const avg = total / count;
|
||||||
const rounded = Math.ceil(avg / 5) * 5;
|
const rounded = Math.ceil(avg / 5) * 5;
|
||||||
const numberToLetter = Object.entries(letterToNumber).reduce(
|
const numberToLetter = Object.entries(letterToNumber).reduce(
|
||||||
(acc, [k, v]) => {
|
(acc, [k, v]) => {
|
||||||
@@ -146,86 +172,33 @@ const assessmentsAveragePlugin: Plugin<typeof settings, weightingsStorage> = {
|
|||||||
? letterAvg
|
? letterAvg
|
||||||
: `${avg.toFixed(2)}%`;
|
: `${avg.toFixed(2)}%`;
|
||||||
|
|
||||||
|
// Prevent duplicate
|
||||||
const existing = assessmentsList.querySelector(
|
const existing = assessmentsList.querySelector(
|
||||||
`[class*='AssessmentItem__title___']`,
|
`[class*='AssessmentItem__title___']`,
|
||||||
);
|
);
|
||||||
if (existing?.textContent === "Subject Average") return;
|
if (existing?.textContent === "Subject Average") return;
|
||||||
|
|
||||||
let warningHTML = "";
|
// Use the dynamic class names in the HTML template
|
||||||
if (hasInaccurateWeighting) {
|
const averageElement = stringToHTML(/* html */ `
|
||||||
warningHTML = /* html */ `
|
|
||||||
<div style="margin-top: 4px; font-size: 11px; color: rgba(255, 255, 255, 0.6); opacity: 0.8; line-height: 1.3;">
|
|
||||||
⚠ Some weightings unavailable
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
assessmentsList.insertBefore(
|
|
||||||
stringToHTML(/* html */ `
|
|
||||||
<div class="${assessmentItemClass}">
|
<div class="${assessmentItemClass}">
|
||||||
<div class="${metaContainerClass}">
|
<div class="${metaContainerClass}">
|
||||||
<div class="${metaClass}">
|
<div class="${metaClass}">
|
||||||
<div class="${simpleResultClass}">
|
<div class="${simpleResultClass}">
|
||||||
<div class="${titleClass}">Subject Average</div>
|
<div class="${titleClass}">Subject Average</div>
|
||||||
${warningHTML}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="${thermoscoreClass}">
|
<div class="${thermoscoreClass}">
|
||||||
<div class="${fillClass}" style="width: ${avg.toFixed(2)}%">
|
<div class="${fillClass}" style="width: ${avg.toFixed(2)}%">
|
||||||
<div class="${textClass}" title="${hasInaccurateWeighting ? display + " (some weightings unavailable)" : display}">${display}</div>
|
<div class="${textClass}" title="${display}">${display}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`).firstChild!,
|
`).firstChild;
|
||||||
assessmentsList.firstChild,
|
|
||||||
);
|
|
||||||
|
|
||||||
applySubjectColourToOverallResult();
|
assessmentsList.insertBefore(averageElement!, assessmentsList.firstChild);
|
||||||
|
|
||||||
const observer = new MutationObserver(() => {
|
|
||||||
applySubjectColourToOverallResult();
|
|
||||||
});
|
|
||||||
const wrapper = document.querySelector(".assessmentsWrapper");
|
|
||||||
if (wrapper) {
|
|
||||||
observer.observe(wrapper, { childList: true, subtree: true });
|
|
||||||
setTimeout(() => observer.disconnect(), 10000);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
function applySubjectColourToOverallResult() {
|
|
||||||
const selectedAssessmentItem = document.querySelector(
|
|
||||||
"[class*='AssessmentItem__AssessmentItem___'][class*='selected___']",
|
|
||||||
) || document.querySelector(
|
|
||||||
"[class*='Collapsible__content___'] [class*='AssessmentItem__AssessmentItem___']",
|
|
||||||
);
|
|
||||||
const assessmentThermoscore = selectedAssessmentItem?.querySelector(
|
|
||||||
"[class*='Thermoscore__Thermoscore___']",
|
|
||||||
) as HTMLElement | null;
|
|
||||||
const overallResult = document.querySelector(
|
|
||||||
"[class*='OverallResult__OverallResult___']",
|
|
||||||
) as HTMLElement | null;
|
|
||||||
const assessableCriterionHeaders = document.querySelectorAll(
|
|
||||||
"[class*='AssessableCriterion__header___']",
|
|
||||||
);
|
|
||||||
|
|
||||||
if (assessmentThermoscore && (overallResult || assessableCriterionHeaders.length > 0)) {
|
|
||||||
const accentColour =
|
|
||||||
getComputedStyle(assessmentThermoscore).getPropertyValue("--assessment-accent-colour").trim() ||
|
|
||||||
getComputedStyle(assessmentThermoscore).getPropertyValue("--fill-colour").trim() ||
|
|
||||||
getComputedStyle(assessmentThermoscore.closest("[class*='Collapsible__Collapsible___']") || assessmentThermoscore).getPropertyValue("--assessment-accent-colour").trim() ||
|
|
||||||
getComputedStyle(assessmentThermoscore.closest("[class*='Collapsible__Collapsible___']") || assessmentThermoscore).getPropertyValue("--item-colour").trim();
|
|
||||||
if (accentColour) {
|
|
||||||
overallResult?.style.setProperty("--assessment-accent-colour", accentColour);
|
|
||||||
overallResult?.style.setProperty("--fill-colour", accentColour);
|
|
||||||
assessableCriterionHeaders.forEach((el) => {
|
|
||||||
(el as HTMLElement).style.setProperty("--assessment-accent-colour", accentColour);
|
|
||||||
(el as HTMLElement).style.setProperty("--fill-colour", accentColour);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default assessmentsAveragePlugin;
|
export default assessmentsAveragePlugin;
|
||||||
|
|||||||
@@ -1,572 +0,0 @@
|
|||||||
import { getUserInfo } from "@/seqta/ui/AddBetterSEQTAElements.ts";
|
|
||||||
import ReactFiber from "@/seqta/utils/ReactFiber.ts";
|
|
||||||
import * as pdfjs from "pdfjs-dist";
|
|
||||||
pdfjs.GlobalWorkerOptions.workerSrc =
|
|
||||||
`https://cdn.jsdelivr.net/npm/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
|
|
||||||
|
|
||||||
export async function initStorage(api: any) {
|
|
||||||
await api.storage.loaded;
|
|
||||||
|
|
||||||
if (!api.storage.weightings) {
|
|
||||||
api.storage.weightings = {};
|
|
||||||
}
|
|
||||||
if (!api.storage.assessments) {
|
|
||||||
api.storage.assessments = {};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function clearStuck(api: any) {
|
|
||||||
let hasStuckProcessing = false;
|
|
||||||
for (const key in api.storage.weightings) {
|
|
||||||
if (api.storage.weightings[key] === "processing") {
|
|
||||||
delete api.storage.weightings[key];
|
|
||||||
hasStuckProcessing = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (hasStuckProcessing) {
|
|
||||||
api.storage.weightings = { ...api.storage.weightings };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Helper function to find actual class names by their base pattern
|
|
||||||
export const getClassByPattern = (
|
|
||||||
element: Element | Document,
|
|
||||||
basePattern: string,
|
|
||||||
): string => {
|
|
||||||
const classes = Array.from(element.querySelectorAll("*"))
|
|
||||||
.flatMap((el) => Array.from(el.classList))
|
|
||||||
.filter((className) => className.startsWith(basePattern));
|
|
||||||
|
|
||||||
return classes.length ? classes[0] : "";
|
|
||||||
};
|
|
||||||
|
|
||||||
export const letterToNumber: Record<string, number> = {
|
|
||||||
"A+": 100,
|
|
||||||
A: 95,
|
|
||||||
"A-": 90,
|
|
||||||
"B+": 85,
|
|
||||||
B: 80,
|
|
||||||
"B-": 75,
|
|
||||||
"C+": 70,
|
|
||||||
C: 65,
|
|
||||||
"C-": 60,
|
|
||||||
"D+": 55,
|
|
||||||
D: 50,
|
|
||||||
"D-": 45,
|
|
||||||
"E+": 40,
|
|
||||||
E: 35,
|
|
||||||
"E-": 30,
|
|
||||||
F: 0,
|
|
||||||
};
|
|
||||||
|
|
||||||
function parseGrade(text: string): number {
|
|
||||||
const str = text.trim().toUpperCase();
|
|
||||||
if (str.includes("/")) {
|
|
||||||
const [raw, max] = str.split("/").map((n) => parseFloat(n));
|
|
||||||
return (raw / max) * 100;
|
|
||||||
}
|
|
||||||
if (str.includes("%")) {
|
|
||||||
return parseFloat(str.replace("%", "")) || 0;
|
|
||||||
}
|
|
||||||
return letterToNumber[str] ?? 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
function createWeightLabel(
|
|
||||||
assessmentItem: Element,
|
|
||||||
weighting: string | undefined,
|
|
||||||
) {
|
|
||||||
const statsContainer = assessmentItem.querySelector(
|
|
||||||
`[class*='AssessmentItem__stats___']`,
|
|
||||||
) as HTMLElement;
|
|
||||||
|
|
||||||
if (
|
|
||||||
!statsContainer ||
|
|
||||||
statsContainer.querySelector(".betterseqta-weight-label")
|
|
||||||
)
|
|
||||||
return;
|
|
||||||
|
|
||||||
const label = statsContainer.querySelector(
|
|
||||||
`[class*='Label__Label___']`,
|
|
||||||
) as HTMLElement;
|
|
||||||
|
|
||||||
if (!label) return;
|
|
||||||
|
|
||||||
const weightLabel = label.cloneNode(true) as HTMLElement;
|
|
||||||
weightLabel.classList.add("betterseqta-weight-label");
|
|
||||||
|
|
||||||
const innerTextDiv = weightLabel.querySelector(
|
|
||||||
`[class*='Label__innerText___']`,
|
|
||||||
);
|
|
||||||
if (innerTextDiv) innerTextDiv.textContent = "Weight";
|
|
||||||
|
|
||||||
const textNodes = Array.from(weightLabel.childNodes).filter(
|
|
||||||
(node) => node.nodeType === Node.TEXT_NODE,
|
|
||||||
);
|
|
||||||
|
|
||||||
if (textNodes.length) {
|
|
||||||
textNodes[0].textContent =
|
|
||||||
weighting && weighting !== "processing"
|
|
||||||
? `${Number(weighting) % 1 === 0 ? Number(weighting) : weighting}%`
|
|
||||||
: "N/A";
|
|
||||||
}
|
|
||||||
|
|
||||||
statsContainer.style.position = "relative";
|
|
||||||
weightLabel.style.position = "absolute";
|
|
||||||
weightLabel.style.right = "0";
|
|
||||||
weightLabel.style.top = "50%";
|
|
||||||
weightLabel.style.transform = "translateY(-50%)";
|
|
||||||
|
|
||||||
statsContainer.appendChild(weightLabel);
|
|
||||||
}
|
|
||||||
|
|
||||||
export const isFirefox =
|
|
||||||
navigator.userAgent.toLowerCase().indexOf("firefox") > -1 &&
|
|
||||||
!navigator.userAgent.toLowerCase().includes("seamonkey") &&
|
|
||||||
!navigator.userAgent.toLowerCase().includes("waterfox");
|
|
||||||
|
|
||||||
async function fetchPDFAsArrayBuffer(url: string): Promise<ArrayBuffer> {
|
|
||||||
const isBlobUrl = url.startsWith("blob:");
|
|
||||||
|
|
||||||
if (isBlobUrl || isFirefox) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const script = document.createElement("script");
|
|
||||||
const requestId = `pdf-fetch-${Date.now()}-${Math.random()}`;
|
|
||||||
const escapedUrl = url.replace(/'/g, "\\'");
|
|
||||||
|
|
||||||
script.textContent = `
|
|
||||||
(function() {
|
|
||||||
fetch('${escapedUrl}')
|
|
||||||
.then(response => {
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error('HTTP ' + response.status + ': ' + response.statusText);
|
|
||||||
}
|
|
||||||
return response.arrayBuffer();
|
|
||||||
})
|
|
||||||
.then(arrayBuffer => {
|
|
||||||
window.postMessage({
|
|
||||||
type: '${requestId}',
|
|
||||||
success: true,
|
|
||||||
data: Array.from(new Uint8Array(arrayBuffer))
|
|
||||||
}, '*');
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
window.postMessage({
|
|
||||||
type: '${requestId}',
|
|
||||||
success: false,
|
|
||||||
error: error.message || String(error)
|
|
||||||
}, '*');
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
`;
|
|
||||||
|
|
||||||
const messageHandler = (event: MessageEvent) => {
|
|
||||||
if (event.data?.type === requestId) {
|
|
||||||
window.removeEventListener("message", messageHandler);
|
|
||||||
if (script.parentNode) {
|
|
||||||
script.parentNode.removeChild(script);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event.data.success) {
|
|
||||||
resolve(new Uint8Array(event.data.data).buffer);
|
|
||||||
} else {
|
|
||||||
reject(new Error(event.data.error || "Failed to fetch PDF"));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener("message", messageHandler);
|
|
||||||
(document.head || document.documentElement).appendChild(script);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
window.removeEventListener("message", messageHandler);
|
|
||||||
if (script.parentNode) {
|
|
||||||
script.parentNode.removeChild(script);
|
|
||||||
}
|
|
||||||
reject(new Error("Timeout fetching PDF"));
|
|
||||||
}, 30000);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(url, {
|
|
||||||
credentials: "include",
|
|
||||||
redirect: "follow",
|
|
||||||
});
|
|
||||||
|
|
||||||
if (response.url && response.url.startsWith("blob:")) {
|
|
||||||
return await fetchPDFAsArrayBuffer(response.url);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(
|
|
||||||
`Failed to fetch PDF: ${response.status} ${response.statusText}`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return await response.arrayBuffer();
|
|
||||||
} catch (error: any) {
|
|
||||||
if (
|
|
||||||
error?.message?.includes("blob") ||
|
|
||||||
error?.message?.includes("Security") ||
|
|
||||||
error?.message?.includes("CSP")
|
|
||||||
) {
|
|
||||||
return await fetchPDFAsArrayBuffer(url);
|
|
||||||
}
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function extractPDFText(url: string): Promise<string> {
|
|
||||||
try {
|
|
||||||
if (isFirefox) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const script = document.createElement("script");
|
|
||||||
const requestId = `pdf-extract-${Date.now()}-${Math.random()}`;
|
|
||||||
|
|
||||||
const escapedUrl = url
|
|
||||||
.replace(/\\/g, "\\\\")
|
|
||||||
.replace(/'/g, "\\'")
|
|
||||||
.replace(/"/g, '\\"');
|
|
||||||
|
|
||||||
script.textContent = `
|
|
||||||
(function() {
|
|
||||||
const requestId = '${requestId}';
|
|
||||||
const url = '${escapedUrl}';
|
|
||||||
|
|
||||||
if (window.pdfjsLib) {
|
|
||||||
extractPDF();
|
|
||||||
} else {
|
|
||||||
const pdfjsScript = document.createElement('script');
|
|
||||||
pdfjsScript.src = 'https://cdn.jsdelivr.net/npm/pdfjs-dist/build/pdf.min.js';
|
|
||||||
pdfjsScript.type = 'text/javascript';
|
|
||||||
|
|
||||||
pdfjsScript.onload = function() {
|
|
||||||
extractPDF();
|
|
||||||
};
|
|
||||||
pdfjsScript.onerror = function() {
|
|
||||||
window.postMessage({
|
|
||||||
type: requestId,
|
|
||||||
success: false,
|
|
||||||
error: 'Failed to load pdfjs library'
|
|
||||||
}, '*');
|
|
||||||
};
|
|
||||||
|
|
||||||
document.head.appendChild(pdfjsScript);
|
|
||||||
}
|
|
||||||
|
|
||||||
function extractPDF() {
|
|
||||||
try {
|
|
||||||
window.pdfjsLib.GlobalWorkerOptions.workerSrc = '';
|
|
||||||
|
|
||||||
const xhr = new XMLHttpRequest();
|
|
||||||
xhr.open('GET', url, true);
|
|
||||||
xhr.responseType = 'arraybuffer';
|
|
||||||
xhr.withCredentials = true;
|
|
||||||
|
|
||||||
xhr.onload = function() {
|
|
||||||
if (xhr.status !== 200) {
|
|
||||||
window.postMessage({
|
|
||||||
type: requestId,
|
|
||||||
success: false,
|
|
||||||
error: 'HTTP ' + xhr.status + ': ' + xhr.statusText
|
|
||||||
}, '*');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const arrayBuffer = xhr.response;
|
|
||||||
if (!arrayBuffer || arrayBuffer.byteLength === 0) {
|
|
||||||
throw new Error('PDF response is empty');
|
|
||||||
}
|
|
||||||
|
|
||||||
window.pdfjsLib.getDocument({
|
|
||||||
data: arrayBuffer,
|
|
||||||
useSystemFonts: true,
|
|
||||||
verbosity: 0,
|
|
||||||
useWorkerFetch: false,
|
|
||||||
isEvalSupported: false
|
|
||||||
}).promise
|
|
||||||
.then(pdf => {
|
|
||||||
const pagePromises = [];
|
|
||||||
for (let i = 1; i <= pdf.numPages; i++) {
|
|
||||||
pagePromises.push(
|
|
||||||
pdf.getPage(i).then(page => {
|
|
||||||
return page.getTextContent().then(content => {
|
|
||||||
return content.items.map(item => item.str).join(' ');
|
|
||||||
});
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return Promise.all(pagePromises);
|
|
||||||
})
|
|
||||||
.then(pages => {
|
|
||||||
const text = pages.join('\\n');
|
|
||||||
window.postMessage({
|
|
||||||
type: requestId,
|
|
||||||
success: true,
|
|
||||||
text: text
|
|
||||||
}, '*');
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
window.postMessage({
|
|
||||||
type: requestId,
|
|
||||||
success: false,
|
|
||||||
error: 'PDF parsing error: ' + (error.message || String(error))
|
|
||||||
}, '*');
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
window.postMessage({
|
|
||||||
type: requestId,
|
|
||||||
success: false,
|
|
||||||
error: 'ArrayBuffer error: ' + (error.message || String(error))
|
|
||||||
}, '*');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
xhr.onerror = function() {
|
|
||||||
window.postMessage({
|
|
||||||
type: requestId,
|
|
||||||
success: false,
|
|
||||||
error: 'Network error fetching PDF'
|
|
||||||
}, '*');
|
|
||||||
};
|
|
||||||
|
|
||||||
xhr.ontimeout = function() {
|
|
||||||
window.postMessage({
|
|
||||||
type: requestId,
|
|
||||||
success: false,
|
|
||||||
error: 'Timeout fetching PDF'
|
|
||||||
}, '*');
|
|
||||||
};
|
|
||||||
|
|
||||||
xhr.timeout = 30000;
|
|
||||||
xhr.send();
|
|
||||||
} catch (error) {
|
|
||||||
window.postMessage({
|
|
||||||
type: requestId,
|
|
||||||
success: false,
|
|
||||||
error: 'Setup error: ' + (error.message || String(error))
|
|
||||||
}, '*');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
`;
|
|
||||||
|
|
||||||
const messageHandler = (event: MessageEvent) => {
|
|
||||||
if (event.data?.type === requestId) {
|
|
||||||
window.removeEventListener("message", messageHandler);
|
|
||||||
if (script.parentNode) {
|
|
||||||
script.parentNode.removeChild(script);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event.data.success) {
|
|
||||||
resolve(event.data.text);
|
|
||||||
} else {
|
|
||||||
reject(
|
|
||||||
new Error(event.data.error || "Failed to extract PDF text"),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener("message", messageHandler);
|
|
||||||
(document.head || document.documentElement).appendChild(script);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
window.removeEventListener("message", messageHandler);
|
|
||||||
if (script.parentNode) {
|
|
||||||
script.parentNode.removeChild(script);
|
|
||||||
}
|
|
||||||
reject(new Error("Timeout extracting PDF text"));
|
|
||||||
}, 60000);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const arrayBuffer = await fetchPDFAsArrayBuffer(url);
|
|
||||||
|
|
||||||
if (arrayBuffer.byteLength === 0) {
|
|
||||||
throw new Error("PDF response is empty");
|
|
||||||
}
|
|
||||||
|
|
||||||
const pdf = await pdfjs.getDocument({
|
|
||||||
data: arrayBuffer,
|
|
||||||
useSystemFonts: true,
|
|
||||||
}).promise;
|
|
||||||
|
|
||||||
let text = "";
|
|
||||||
|
|
||||||
for (let i = 1; i <= pdf.numPages; i++) {
|
|
||||||
const page = await pdf.getPage(i);
|
|
||||||
const content = await page.getTextContent();
|
|
||||||
text += content.items.map((item: any) => item.str).join(" ") + "\n";
|
|
||||||
}
|
|
||||||
|
|
||||||
return text;
|
|
||||||
} catch (error) {
|
|
||||||
console.error("[BetterSEQTA+] Failed to extract PDF text:", error);
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleWeightings(mark: any, api: any) {
|
|
||||||
const assessmentID = mark.id;
|
|
||||||
const metaclassID = mark.metaclassID;
|
|
||||||
const userInfo = await getUserInfo();
|
|
||||||
const userID = userInfo.id;
|
|
||||||
const title = mark.title;
|
|
||||||
|
|
||||||
if (
|
|
||||||
api.storage.weightings[assessmentID] != undefined &&
|
|
||||||
api.storage.weightings[assessmentID] !== "processing"
|
|
||||||
) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
api.storage.weightings = {
|
|
||||||
...api.storage.weightings,
|
|
||||||
[assessmentID]: "processing",
|
|
||||||
};
|
|
||||||
|
|
||||||
api.storage.assessments = {
|
|
||||||
...api.storage.assessments,
|
|
||||||
[title.trim()]: assessmentID,
|
|
||||||
};
|
|
||||||
|
|
||||||
try {
|
|
||||||
const filename =
|
|
||||||
"BetterSEQTA-" +
|
|
||||||
String(Math.floor(Math.random() * 1e15)).padStart(15, "0");
|
|
||||||
|
|
||||||
const printResponse = await fetch(
|
|
||||||
`${location.origin}/seqta/student/print/assessment`,
|
|
||||||
{
|
|
||||||
method: "POST",
|
|
||||||
headers: { "Content-Type": "application/json; charset=utf-8" },
|
|
||||||
credentials: "include",
|
|
||||||
body: JSON.stringify({
|
|
||||||
fileName: filename,
|
|
||||||
id: assessmentID,
|
|
||||||
metaclass: metaclassID,
|
|
||||||
student: userID,
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!printResponse.ok) {
|
|
||||||
throw new Error(
|
|
||||||
`Failed to generate PDF: ${printResponse.status} ${printResponse.statusText}`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
|
||||||
|
|
||||||
const pdfUrl = `${location.origin}/seqta/student/report/get?file=${filename}`;
|
|
||||||
|
|
||||||
if (pdfUrl.startsWith("blob:")) {
|
|
||||||
throw new Error(`Cannot fetch blob URL from extension: ${pdfUrl}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
let text: string;
|
|
||||||
try {
|
|
||||||
text = await extractPDFText(pdfUrl);
|
|
||||||
} catch (error: any) {
|
|
||||||
if (
|
|
||||||
isFirefox &&
|
|
||||||
(error?.message?.includes("blob") ||
|
|
||||||
error?.message?.includes("Security") ||
|
|
||||||
error?.message?.includes("CSP"))
|
|
||||||
) {
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 2000));
|
|
||||||
text = await extractPDFText(pdfUrl);
|
|
||||||
} else {
|
|
||||||
throw new Error(`PDF extraction failed: ${error.message}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const match = text.match(/weight:\s*(\d+\.?\d*)/i);
|
|
||||||
|
|
||||||
api.storage.weightings = {
|
|
||||||
...api.storage.weightings,
|
|
||||||
[assessmentID]: match ? match[1] : "N/A",
|
|
||||||
};
|
|
||||||
} catch (error: any) {
|
|
||||||
api.storage.weightings = {
|
|
||||||
...api.storage.weightings,
|
|
||||||
[assessmentID]: "N/A",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function parseAssessments(api: any) {
|
|
||||||
const state = await ReactFiber.find(
|
|
||||||
"[class*='AssessmentList__items___']",
|
|
||||||
).getState();
|
|
||||||
|
|
||||||
const marks = state["marks"];
|
|
||||||
if (!marks) return;
|
|
||||||
|
|
||||||
await Promise.all(marks.map((mark: any) => handleWeightings(mark, api)));
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function processAssessments(api: any, assessmentItems: Element[]) {
|
|
||||||
let weightedTotal = 0;
|
|
||||||
let totalWeight = 0;
|
|
||||||
let hasInaccurateWeighting = false;
|
|
||||||
let count = 0;
|
|
||||||
|
|
||||||
for (const assessmentItem of assessmentItems) {
|
|
||||||
const gradeElement = assessmentItem.querySelector(
|
|
||||||
`[class*='Thermoscore__text___']`,
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!gradeElement) continue;
|
|
||||||
|
|
||||||
const grade = parseGrade(gradeElement.textContent || "");
|
|
||||||
if (grade <= 0) continue;
|
|
||||||
|
|
||||||
const titleEl = assessmentItem.querySelector(
|
|
||||||
`[class*='AssessmentItem__title___']`,
|
|
||||||
);
|
|
||||||
if (!titleEl) continue;
|
|
||||||
|
|
||||||
const title = titleEl.textContent?.trim();
|
|
||||||
if (!title) continue;
|
|
||||||
|
|
||||||
const assessmentID = api.storage.assessments?.[title];
|
|
||||||
const weighting = assessmentID
|
|
||||||
? api.storage.weightings?.[assessmentID]
|
|
||||||
: undefined;
|
|
||||||
|
|
||||||
createWeightLabel(assessmentItem, weighting);
|
|
||||||
|
|
||||||
if (
|
|
||||||
weighting === null ||
|
|
||||||
weighting === undefined ||
|
|
||||||
weighting === "N/A" ||
|
|
||||||
weighting === "processing"
|
|
||||||
) {
|
|
||||||
hasInaccurateWeighting = true;
|
|
||||||
weightedTotal += grade;
|
|
||||||
totalWeight += 1;
|
|
||||||
} else {
|
|
||||||
const weight = parseFloat(weighting);
|
|
||||||
|
|
||||||
if (!isNaN(weight) && weight >= 0) {
|
|
||||||
weightedTotal += grade * weight;
|
|
||||||
totalWeight += weight;
|
|
||||||
} else {
|
|
||||||
weightedTotal += grade;
|
|
||||||
totalWeight += 1;
|
|
||||||
hasInaccurateWeighting = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
count++;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
weightedTotal,
|
|
||||||
totalWeight,
|
|
||||||
hasInaccurateWeighting,
|
|
||||||
count,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -7,11 +7,9 @@
|
|||||||
|
|
||||||
interface FilterOptions {
|
interface FilterOptions {
|
||||||
subject: string;
|
subject: string;
|
||||||
sortBy: "due" | "grade" | "subject" | "title" | "year";
|
sortBy: "due" | "grade" | "subject" | "title";
|
||||||
}
|
}
|
||||||
|
|
||||||
const HIDDEN_ASSESSMENTS_KEY = "betterseqta-hidden-assessments";
|
|
||||||
|
|
||||||
function percentageToLetter(percentage: number): string {
|
function percentageToLetter(percentage: number): string {
|
||||||
const letterMap: Record<number, string> = {
|
const letterMap: Record<number, string> = {
|
||||||
100: "A+",
|
100: "A+",
|
||||||
@@ -43,108 +41,48 @@
|
|||||||
|
|
||||||
let filteredAssessments: any[] = [];
|
let filteredAssessments: any[] = [];
|
||||||
let statusGroups: Record<string, any[]> = {};
|
let statusGroups: Record<string, any[]> = {};
|
||||||
let columns: { key: string; title: string; className: string; icon: string }[] = [];
|
|
||||||
|
|
||||||
function getAssessmentYear(a: any): number {
|
|
||||||
const dateStr = a.due || a.date || a.dueDate || a.created;
|
|
||||||
return dateStr ? new Date(dateStr).getFullYear() : 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getAssessmentType(a: any): string {
|
|
||||||
return (a.type || a.assessmentType || a.taskType || "Other").toString();
|
|
||||||
}
|
|
||||||
|
|
||||||
function getAssessmentGrade(a: any): string {
|
|
||||||
const val = getGradeValue(a);
|
|
||||||
if (val === null) return "No grade";
|
|
||||||
return percentageToLetter(val);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getGroupKey(assessment: any): string {
|
|
||||||
switch (currentFilters.sortBy) {
|
|
||||||
case "due":
|
|
||||||
return determineStatus(assessment);
|
|
||||||
case "year":
|
|
||||||
return String(getAssessmentYear(assessment) || "Unknown");
|
|
||||||
case "subject":
|
|
||||||
return assessment.code || "Unknown";
|
|
||||||
case "grade":
|
|
||||||
return getAssessmentGrade(assessment);
|
|
||||||
case "title":
|
|
||||||
const first = (assessment.title || "?")[0].toUpperCase();
|
|
||||||
return /[A-Z0-9]/.test(first) ? first : "#";
|
|
||||||
default:
|
|
||||||
return determineStatus(assessment);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function sortCompare(a: any, b: any): number {
|
|
||||||
return new Date(a.due || a.date || 0).getTime() - new Date(b.due || b.date || 0).getTime();
|
|
||||||
}
|
|
||||||
|
|
||||||
const STATUS_COLUMNS = [
|
|
||||||
{ key: "UPCOMING", title: "Upcoming", className: "column-upcoming", icon: "📅" },
|
|
||||||
{ key: "DUE_SOON", title: "Due Soon", className: "column-due-soon", icon: "⏰" },
|
|
||||||
{ key: "OVERDUE", title: "Overdue", className: "column-overdue", icon: "🚨" },
|
|
||||||
{ key: "SUBMITTED", title: "Submitted", className: "column-submitted", icon: "📝" },
|
|
||||||
{ key: "MARKS_RELEASED", title: "Marked", className: "column-marked", icon: "✅" },
|
|
||||||
];
|
|
||||||
|
|
||||||
function buildGroupsAndColumns() {
|
|
||||||
if (!data?.assessments) return { filteredAssessments: [], statusGroups: {}, columns: [] };
|
|
||||||
const subjectFilters = settingsState.subjectfilters || {};
|
|
||||||
const hiddenAssessmentIds = new Set(
|
|
||||||
(JSON.parse(localStorage.getItem(HIDDEN_ASSESSMENTS_KEY) || "[]")).map(String)
|
|
||||||
);
|
|
||||||
|
|
||||||
const filtered = data.assessments.filter((a: any) => {
|
|
||||||
if (hiddenAssessmentIds.has(String(a.id))) return false;
|
|
||||||
if (subjectFilters[a.code] === false) return false;
|
|
||||||
return currentFilters.subject === "all" || a.code === currentFilters.subject;
|
|
||||||
});
|
|
||||||
|
|
||||||
const groups: Record<string, any[]> = {};
|
|
||||||
filtered.forEach((assessment) => {
|
|
||||||
const key = getGroupKey(assessment);
|
|
||||||
if (!groups[key]) groups[key] = [];
|
|
||||||
groups[key].push(assessment);
|
|
||||||
});
|
|
||||||
|
|
||||||
Object.keys(groups).forEach((key) => {
|
|
||||||
groups[key].sort(sortCompare);
|
|
||||||
});
|
|
||||||
|
|
||||||
let cols: { key: string; title: string; className: string; icon: string }[];
|
|
||||||
if (currentFilters.sortBy === "due") {
|
|
||||||
cols = STATUS_COLUMNS;
|
|
||||||
} else {
|
|
||||||
const keys = Object.keys(groups).filter((k) => groups[k]?.length > 0);
|
|
||||||
if (currentFilters.sortBy === "year") {
|
|
||||||
cols = keys.sort((a, b) => Number(b) - Number(a)).map((k) => ({ key: k, title: k, className: "column-custom", icon: "📆" }));
|
|
||||||
} else if (currentFilters.sortBy === "subject") {
|
|
||||||
const subjectTitles = new Map(data?.subjects?.map((s: any) => [s.code, `${s.code} - ${s.title}`]) || []);
|
|
||||||
cols = keys.sort().map((k) => ({ key: k, title: subjectTitles.get(k) || k, className: "column-custom", icon: "📚" }));
|
|
||||||
} else {
|
|
||||||
cols = keys.sort().map((k) => ({ key: k, title: k, className: "column-custom", icon: "📋" }));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return { filteredAssessments: filtered, statusGroups: groups, columns: cols };
|
|
||||||
}
|
|
||||||
|
|
||||||
$: if (data) {
|
|
||||||
const _ = currentFilters.sortBy && currentFilters.subject;
|
|
||||||
const result = buildGroupsAndColumns();
|
|
||||||
filteredAssessments = result.filteredAssessments;
|
|
||||||
statusGroups = result.statusGroups;
|
|
||||||
columns = result.columns;
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateAssessments() {
|
function updateAssessments() {
|
||||||
const result = buildGroupsAndColumns();
|
filteredAssessments = data.assessments.filter((a: any) => {
|
||||||
filteredAssessments = result.filteredAssessments;
|
const subjectMatch =
|
||||||
statusGroups = result.statusGroups;
|
currentFilters.subject === "all" || a.code === currentFilters.subject;
|
||||||
columns = result.columns;
|
return subjectMatch;
|
||||||
|
});
|
||||||
|
|
||||||
|
filteredAssessments.sort((a: any, b: any) => {
|
||||||
|
switch (currentFilters.sortBy) {
|
||||||
|
case "due":
|
||||||
|
return new Date(a.due).getTime() - new Date(b.due).getTime();
|
||||||
|
case "grade":
|
||||||
|
const gradeA = getGradeValue(a);
|
||||||
|
const gradeB = getGradeValue(b);
|
||||||
|
if (gradeA === null && gradeB === null) return 0;
|
||||||
|
if (gradeA === null) return 1;
|
||||||
|
if (gradeB === null) return -1;
|
||||||
|
return gradeB - gradeA;
|
||||||
|
case "subject":
|
||||||
|
return a.code.localeCompare(b.code);
|
||||||
|
case "title":
|
||||||
|
return a.title.localeCompare(b.title);
|
||||||
|
default:
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
statusGroups = {
|
||||||
|
UPCOMING: [],
|
||||||
|
DUE_SOON: [],
|
||||||
|
OVERDUE: [],
|
||||||
|
SUBMITTED: [],
|
||||||
|
MARKS_RELEASED: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
filteredAssessments.forEach((assessment) => {
|
||||||
|
const status = determineStatus(assessment);
|
||||||
|
if (statusGroups[status]) {
|
||||||
|
statusGroups[status].push(assessment);
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function getDueDateClass(assessment: any): string {
|
function getDueDateClass(assessment: any): string {
|
||||||
@@ -185,56 +123,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function hideAssessment(assessment: any) {
|
|
||||||
const hidden = JSON.parse(localStorage.getItem(HIDDEN_ASSESSMENTS_KEY) || "[]");
|
|
||||||
const id = String(assessment.id);
|
|
||||||
if (!hidden.includes(id)) {
|
|
||||||
hidden.push(id);
|
|
||||||
localStorage.setItem(HIDDEN_ASSESSMENTS_KEY, JSON.stringify(hidden));
|
|
||||||
visibilityRefresh++;
|
|
||||||
closeAllMenus();
|
|
||||||
updateAssessments();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function hideSubject(subjectCode: string) {
|
|
||||||
const filters = { ...(settingsState.subjectfilters || {}) };
|
|
||||||
filters[subjectCode] = false;
|
|
||||||
settingsState.subjectfilters = filters;
|
|
||||||
closeAllMenus();
|
|
||||||
updateAssessments();
|
|
||||||
}
|
|
||||||
|
|
||||||
function unhideSubject(subjectCode: string) {
|
|
||||||
const filters = { ...(settingsState.subjectfilters || {}) };
|
|
||||||
filters[subjectCode] = true;
|
|
||||||
settingsState.subjectfilters = filters;
|
|
||||||
updateAssessments();
|
|
||||||
}
|
|
||||||
|
|
||||||
function unhideAssessment(assessmentId: string) {
|
|
||||||
const hidden = JSON.parse(localStorage.getItem(HIDDEN_ASSESSMENTS_KEY) || "[]");
|
|
||||||
const idStr = String(assessmentId);
|
|
||||||
const filtered = hidden.filter((id: string) => id !== idStr);
|
|
||||||
localStorage.setItem(HIDDEN_ASSESSMENTS_KEY, JSON.stringify(filtered));
|
|
||||||
visibilityRefresh++;
|
|
||||||
updateAssessments();
|
|
||||||
}
|
|
||||||
|
|
||||||
function initSubjectFilters() {
|
|
||||||
const filters = settingsState.subjectfilters || {};
|
|
||||||
let updated = false;
|
|
||||||
data.subjects.forEach((s: any) => {
|
|
||||||
if (!Object.prototype.hasOwnProperty.call(filters, s.code)) {
|
|
||||||
filters[s.code] = true;
|
|
||||||
updated = true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (updated) {
|
|
||||||
settingsState.subjectfilters = filters;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkForCelebration() {
|
function checkForCelebration() {
|
||||||
const overdueCount = statusGroups.OVERDUE?.length || 0;
|
const overdueCount = statusGroups.OVERDUE?.length || 0;
|
||||||
const dueSoonCount = statusGroups.DUE_SOON?.length || 0;
|
const dueSoonCount = statusGroups.DUE_SOON?.length || 0;
|
||||||
@@ -313,20 +201,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
let openMenuId: string | null = null;
|
let openMenuId: string | null = null;
|
||||||
let showVisibilityPanel = false;
|
|
||||||
let visibilityRefresh = 0;
|
|
||||||
|
|
||||||
$: hiddenSubjects = data?.subjects?.filter(
|
|
||||||
(s: any) => (settingsState.subjectfilters || {})[s.code] === false
|
|
||||||
) || [];
|
|
||||||
$: hiddenAssessmentIds = (() => {
|
|
||||||
visibilityRefresh; // Dependency for reactivity
|
|
||||||
return new Set((JSON.parse(localStorage.getItem(HIDDEN_ASSESSMENTS_KEY) || "[]")).map(String));
|
|
||||||
})();
|
|
||||||
$: hiddenAssessmentsWithInfo = data?.assessments?.filter(
|
|
||||||
(a: any) => hiddenAssessmentIds.has(String(a.id))
|
|
||||||
) || [];
|
|
||||||
$: hasHiddenItems = hiddenSubjects.length > 0 || hiddenAssessmentsWithInfo.length > 0;
|
|
||||||
|
|
||||||
function toggleMenu(assessmentId: string, event: Event) {
|
function toggleMenu(assessmentId: string, event: Event) {
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
@@ -337,13 +211,44 @@
|
|||||||
openMenuId = null;
|
openMenuId = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
$: if (data) {
|
$: {
|
||||||
initSubjectFilters();
|
if (data) {
|
||||||
updateAssessments();
|
updateAssessments();
|
||||||
void currentFilters.sortBy;
|
}
|
||||||
void currentFilters.subject;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
key: "UPCOMING",
|
||||||
|
title: "Upcoming",
|
||||||
|
className: "column-upcoming",
|
||||||
|
icon: "📅",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "DUE_SOON",
|
||||||
|
title: "Due Soon",
|
||||||
|
className: "column-due-soon",
|
||||||
|
icon: "⏰",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "OVERDUE",
|
||||||
|
title: "Overdue",
|
||||||
|
className: "column-overdue",
|
||||||
|
icon: "🚨",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "SUBMITTED",
|
||||||
|
title: "Submitted",
|
||||||
|
className: "column-submitted",
|
||||||
|
icon: "📝",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "MARKS_RELEASED",
|
||||||
|
title: "Marked",
|
||||||
|
className: "column-marked",
|
||||||
|
icon: "✅",
|
||||||
|
},
|
||||||
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:window on:click={closeAllMenus} />
|
<svelte:window on:click={closeAllMenus} />
|
||||||
@@ -358,58 +263,15 @@
|
|||||||
<option value={subject.code}>{subject.code} - {subject.title}</option>
|
<option value={subject.code}>{subject.code} - {subject.title}</option>
|
||||||
{/each}
|
{/each}
|
||||||
</select>
|
</select>
|
||||||
<select class="filter-select" bind:value={currentFilters.sortBy} title="Group by - columns change based on this">
|
<select class="filter-select" bind:value={currentFilters.sortBy}>
|
||||||
<option value="due">Group: Status</option>
|
<option value="due">Sort by Due Date</option>
|
||||||
<option value="year">Group: Year</option>
|
<option value="grade">Sort by Grade</option>
|
||||||
<option value="subject">Group: Subject</option>
|
<option value="subject">Sort by Subject</option>
|
||||||
<option value="grade">Group: Grade</option>
|
<option value="title">Sort by Title</option>
|
||||||
<option value="title">Group: Title (A-Z)</option>
|
|
||||||
</select>
|
</select>
|
||||||
{#if hasHiddenItems}
|
|
||||||
<button
|
|
||||||
class="visibility-toggle"
|
|
||||||
class:active={showVisibilityPanel}
|
|
||||||
on:click={() => (showVisibilityPanel = !showVisibilityPanel)}
|
|
||||||
title="Manage hidden subjects and assessments"
|
|
||||||
>
|
|
||||||
👁 Visibility ({hiddenSubjects.length + hiddenAssessmentsWithInfo.length})
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if showVisibilityPanel && hasHiddenItems}
|
|
||||||
<div class="visibility-panel">
|
|
||||||
<h4 class="visibility-panel-title">Hidden items</h4>
|
|
||||||
{#if hiddenSubjects.length > 0}
|
|
||||||
<div class="visibility-section">
|
|
||||||
<span class="visibility-label">Subjects:</span>
|
|
||||||
<div class="visibility-chips">
|
|
||||||
{#each hiddenSubjects as subject}
|
|
||||||
<span class="visibility-chip">
|
|
||||||
{subject.code}
|
|
||||||
<button class="visibility-unhide" on:click={() => unhideSubject(subject.code)}>Show</button>
|
|
||||||
</span>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{#if hiddenAssessmentsWithInfo.length > 0}
|
|
||||||
<div class="visibility-section">
|
|
||||||
<span class="visibility-label">Assessments:</span>
|
|
||||||
<div class="visibility-chips">
|
|
||||||
{#each hiddenAssessmentsWithInfo as assessment}
|
|
||||||
<span class="visibility-chip">
|
|
||||||
{assessment.title}
|
|
||||||
<button class="visibility-unhide" on:click={() => unhideAssessment(assessment.id)}>Show</button>
|
|
||||||
</span>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div id="main-grid-content">
|
<div id="main-grid-content">
|
||||||
{#if filteredAssessments.length === 0}
|
{#if filteredAssessments.length === 0}
|
||||||
<div class="empty-state">
|
<div class="empty-state">
|
||||||
@@ -478,12 +340,6 @@
|
|||||||
Mark as Not Complete
|
Mark as Not Complete
|
||||||
</button>
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
<button class="menu-item menu-item-hide" on:click={() => hideAssessment(assessment)}>
|
|
||||||
Hide assessment
|
|
||||||
</button>
|
|
||||||
<button class="menu-item menu-item-hide" on:click={() => hideSubject(assessment.code)}>
|
|
||||||
Hide subject ({assessment.code})
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
@@ -493,7 +349,7 @@
|
|||||||
{#if !assessment.results && !isCompleted}
|
{#if !assessment.results && !isCompleted}
|
||||||
<div class="assessment-meta">
|
<div class="assessment-meta">
|
||||||
<div class="due-date {dueDateClass}">
|
<div class="due-date {dueDateClass}">
|
||||||
📅 {formatDate(assessment.due || assessment.date || assessment.dueDate || "", assessment.submitted)}
|
📅 {formatDate(assessment.due, assessment.submitted)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@@ -56,18 +56,6 @@ async function loadUpcoming(student: number) {
|
|||||||
return res.payload;
|
return res.payload;
|
||||||
}
|
}
|
||||||
|
|
||||||
function normalizeAssessmentDates(t: any, subject: Subject): any {
|
|
||||||
const normalized = { ...t };
|
|
||||||
// Past API may use different date fields - ensure we have 'due' for year filter & display
|
|
||||||
if (!normalized.due && (t.date || t.dueDate || t.created || t.submittedDate)) {
|
|
||||||
normalized.due = t.date || t.dueDate || t.created || t.submittedDate;
|
|
||||||
}
|
|
||||||
if (!normalized.programmeID) normalized.programmeID = subject.programme;
|
|
||||||
if (!normalized.metaclassID) normalized.metaclassID = subject.metaclass;
|
|
||||||
if (!normalized.code && t.subject) normalized.code = t.subject;
|
|
||||||
return normalized;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadPast(student: number, subjects: Subject[]) {
|
async function loadPast(student: number, subjects: Subject[]) {
|
||||||
const map: Record<number, any> = {};
|
const map: Record<number, any> = {};
|
||||||
await Promise.all(
|
await Promise.all(
|
||||||
@@ -77,22 +65,10 @@ async function loadPast(student: number, subjects: Subject[]) {
|
|||||||
metaclass: s.metaclass,
|
metaclass: s.metaclass,
|
||||||
student,
|
student,
|
||||||
});
|
});
|
||||||
const processAssessment = (t: any) => {
|
if (res.payload.tasks) {
|
||||||
if (t && t.id) {
|
res.payload.tasks.forEach((t: any) => {
|
||||||
const merged = {
|
map[t.id] = t;
|
||||||
...t,
|
});
|
||||||
programmeID: t.programmeID || t.programme || s.programme,
|
|
||||||
metaclassID: t.metaclassID || t.metaclass || s.metaclass,
|
|
||||||
code: t.code || t.subject || s.code,
|
|
||||||
};
|
|
||||||
map[t.id] = normalizeAssessmentDates(merged, s);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
if (res.payload?.pending && Array.isArray(res.payload.pending)) {
|
|
||||||
res.payload.pending.forEach(processAssessment);
|
|
||||||
}
|
|
||||||
if (res.payload?.tasks && Array.isArray(res.payload.tasks)) {
|
|
||||||
res.payload.tasks.forEach(processAssessment);
|
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import type { Plugin } from "../../core/types";
|
import type { Plugin } from "../../core/types";
|
||||||
import { waitForElm } from "@/seqta/utils/waitForElm";
|
import { waitForElm } from "@/seqta/utils/waitForElm";
|
||||||
import { getAssessmentsData } from "./api";
|
import { getAssessmentsData } from "./api";
|
||||||
import { renderErrorState, renderSkeletonLoader } from "./ui";
|
import { renderSkeletonLoader, renderErrorState } from "./ui";
|
||||||
import styles from "./styles.css?inline";
|
import styles from "./styles.css?inline";
|
||||||
import { delay } from "@/seqta/utils/delay";
|
import { delay } from "@/seqta/utils/delay";
|
||||||
|
|
||||||
|
|||||||
@@ -34,38 +34,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.filter-select {
|
.filter-select {
|
||||||
appearance: none;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
background: #ffffff !important;
|
background: #ffffff !important;
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
|
|
||||||
background-position: right 0.9rem center !important;
|
|
||||||
background-repeat: no-repeat !important;
|
|
||||||
background-size: 1rem !important;
|
|
||||||
border: 2px solid #e2e8f0;
|
border: 2px solid #e2e8f0;
|
||||||
border-radius: 10px;
|
border-radius: 8px;
|
||||||
color: #1a1a1a;
|
color: #1a1a1a;
|
||||||
color-scheme: light;
|
padding: 0.75rem 1rem;
|
||||||
padding: 0.75rem 2.5rem 0.75rem 1rem;
|
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-family: Rubik, sans-serif;
|
|
||||||
line-height: 1.2;
|
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
min-width: 180px;
|
min-width: 180px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-select::-ms-expand {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-select option {
|
|
||||||
background: #ffffff;
|
|
||||||
color: #1a1a1a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-select:focus {
|
.filter-select:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: #d41e3a;
|
border-color: #d41e3a;
|
||||||
@@ -80,10 +61,8 @@
|
|||||||
/* Dark mode dropdowns */
|
/* Dark mode dropdowns */
|
||||||
.dark .filter-select {
|
.dark .filter-select {
|
||||||
background: var(--background-primary) !important;
|
background: var(--background-primary) !important;
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='rgba(255,255,255,0.72)'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
|
|
||||||
border-color: var(--background-secondary);
|
border-color: var(--background-secondary);
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
color-scheme: dark;
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -94,8 +73,7 @@
|
|||||||
|
|
||||||
.dark .filter-select:hover {
|
.dark .filter-select:hover {
|
||||||
border-color: var(--background-secondary);
|
border-color: var(--background-secondary);
|
||||||
background: var(--background-secondary) !important;
|
background: var(--background-secondary);
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='rgba(255,255,255,0.72)'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .filter-select option {
|
.dark .filter-select option {
|
||||||
@@ -128,6 +106,7 @@
|
|||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
background: #f8fafc;
|
background: #f8fafc;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 0 0 2px #e2e8f0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
@@ -357,146 +336,11 @@
|
|||||||
color: #ef4444;
|
color: #ef4444;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-item.menu-item-hide {
|
|
||||||
color: #64748b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .menu-item.menu-item-hide {
|
|
||||||
color: var(--text-primary);
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.visibility-toggle {
|
|
||||||
padding: 0.5rem 0.75rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 500;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 2px solid #e2e8f0;
|
|
||||||
background: #ffffff;
|
|
||||||
color: #64748b;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.visibility-toggle:hover {
|
|
||||||
border-color: #cbd5e1;
|
|
||||||
color: #1a1a1a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.visibility-toggle.active {
|
|
||||||
border-color: #d41e3a;
|
|
||||||
background: rgba(212, 30, 58, 0.08);
|
|
||||||
color: #d41e3a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .visibility-toggle {
|
|
||||||
background: var(--background-primary);
|
|
||||||
border-color: var(--background-secondary);
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .visibility-toggle:hover {
|
|
||||||
border-color: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .visibility-toggle.active {
|
|
||||||
border-color: #d41e3a;
|
|
||||||
background: rgba(212, 30, 58, 0.15);
|
|
||||||
color: #d41e3a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.visibility-panel {
|
|
||||||
padding: 1rem 1.25rem;
|
|
||||||
margin: 0 1rem 1rem;
|
|
||||||
background: #f8fafc;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid #e2e8f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .visibility-panel {
|
|
||||||
background: var(--background-secondary);
|
|
||||||
border-color: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.visibility-panel-title {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #1a1a1a;
|
|
||||||
margin: 0 0 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .visibility-panel-title {
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.visibility-section {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.visibility-section:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.visibility-label {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #64748b;
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .visibility-label {
|
|
||||||
color: var(--text-primary);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.visibility-chips {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.visibility-chip {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
padding: 0.25rem 0.5rem;
|
|
||||||
background: #e2e8f0;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 0.8125rem;
|
|
||||||
color: #1a1a1a;
|
|
||||||
max-width: 200px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .visibility-chip {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.visibility-unhide {
|
|
||||||
padding: 0.125rem 0.5rem;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 500;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: none;
|
|
||||||
background: #d41e3a;
|
|
||||||
color: white;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.visibility-unhide:hover {
|
|
||||||
background: #b91c33;
|
|
||||||
}
|
|
||||||
|
|
||||||
.assessment-title {
|
.assessment-title {
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1a1a1a;
|
color: #1a1a1a;
|
||||||
margin: 0 0 0.75rem;
|
margin: 0 0 0.75rem 0;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
padding-right: 2rem; /* Make room for menu button */
|
padding-right: 2rem; /* Make room for menu button */
|
||||||
}
|
}
|
||||||
@@ -612,10 +456,6 @@
|
|||||||
background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
|
background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.column-custom .column-header {
|
|
||||||
background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dark mode column headers */
|
/* Dark mode column headers */
|
||||||
.dark .column-upcoming .column-header {
|
.dark .column-upcoming .column-header {
|
||||||
background: linear-gradient(135deg, var(--background-secondary) 0%, #1e3a8a 100%);
|
background: linear-gradient(135deg, var(--background-secondary) 0%, #1e3a8a 100%);
|
||||||
@@ -637,10 +477,6 @@
|
|||||||
background: linear-gradient(135deg, var(--background-secondary) 0%, #065f46 100%);
|
background: linear-gradient(135deg, var(--background-secondary) 0%, #065f46 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .column-custom .column-header {
|
|
||||||
background: linear-gradient(135deg, var(--background-secondary) 0%, #1e3a5f 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Subject filter view */
|
/* Subject filter view */
|
||||||
.subject-section {
|
.subject-section {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import type { Plugin } from "@/plugins/core/types";
|
import type { Plugin } from "@/plugins/core/types";
|
||||||
import { booleanSetting, componentSetting, defineSettings, numberSetting } from "@/plugins/core/settingsHelpers";
|
import { componentSetting, defineSettings, numberSetting, booleanSetting } from "@/plugins/core/settingsHelpers";
|
||||||
import styles from "./styles.css?inline";
|
import styles from "./styles.css?inline";
|
||||||
import BackgroundMusicSetting from "./BackgroundMusicSetting.svelte";
|
import BackgroundMusicSetting from "./BackgroundMusicSetting.svelte";
|
||||||
import localforage from "localforage";
|
import localforage from "localforage";
|
||||||
|
|||||||
@@ -42,12 +42,8 @@ const settings = defineSettings({
|
|||||||
|
|
||||||
if (confirmed) {
|
if (confirmed) {
|
||||||
try {
|
try {
|
||||||
// Dynamically import modules to avoid loading heavy dependencies
|
// Dynamically import the worker manager to avoid loading heavy dependencies
|
||||||
const { VectorWorkerManager } = await import("./src/indexing/worker/vectorWorkerManager");
|
const { VectorWorkerManager } = await import("./src/indexing/worker/vectorWorkerManager");
|
||||||
const { resetDatabase } = await import("./src/indexing/db");
|
|
||||||
|
|
||||||
// Reset vector worker first
|
|
||||||
try {
|
|
||||||
const workerManager = VectorWorkerManager.getInstance();
|
const workerManager = VectorWorkerManager.getInstance();
|
||||||
await workerManager.resetWorker();
|
await workerManager.resetWorker();
|
||||||
console.log("Vector worker reset successfully");
|
console.log("Vector worker reset successfully");
|
||||||
@@ -55,56 +51,23 @@ const settings = defineSettings({
|
|||||||
console.warn("Failed to reset vector worker:", e);
|
console.warn("Failed to reset vector worker:", e);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Close all database connections properly before deletion
|
// Delete both 'embeddiaDB' and 'betterseqta-index' using native IndexedDB APIs
|
||||||
try {
|
|
||||||
await resetDatabase();
|
|
||||||
console.log("betterseqta-index database closed and reset");
|
|
||||||
} catch (e) {
|
|
||||||
console.warn("Failed to reset betterseqta-index database:", e);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Wait a bit for connections to fully close
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 100));
|
|
||||||
|
|
||||||
// Delete embeddiaDB (vector search database)
|
|
||||||
const deleteDb = (dbName: string) => {
|
const deleteDb = (dbName: string) => {
|
||||||
return new Promise<void>((resolve, reject) => {
|
return new Promise<void>((resolve, reject) => {
|
||||||
const req = indexedDB.deleteDatabase(dbName);
|
const req = indexedDB.deleteDatabase(dbName);
|
||||||
req.onsuccess = () => {
|
req.onsuccess = () => resolve();
|
||||||
console.log(`Successfully deleted database: ${dbName}`);
|
req.onerror = () => reject(req.error);
|
||||||
resolve();
|
|
||||||
};
|
|
||||||
req.onerror = () => {
|
|
||||||
console.error(`Error deleting database ${dbName}:`, req.error);
|
|
||||||
reject(req.error);
|
|
||||||
};
|
|
||||||
req.onblocked = () => {
|
req.onblocked = () => {
|
||||||
console.warn(`Database ${dbName} deletion blocked - connections still open`);
|
reject(new Error(`One database is open, failed to remove: ${dbName}`));
|
||||||
// Wait and retry once
|
|
||||||
setTimeout(() => {
|
|
||||||
const retryReq = indexedDB.deleteDatabase(dbName);
|
|
||||||
retryReq.onsuccess = () => {
|
|
||||||
console.log(`Successfully deleted database on retry: ${dbName}`);
|
|
||||||
resolve();
|
|
||||||
};
|
|
||||||
retryReq.onerror = () => reject(retryReq.error);
|
|
||||||
retryReq.onblocked = () => {
|
|
||||||
reject(new Error(`One database is open, failed to remove: ${dbName}. Please close other tabs and try again.`));
|
|
||||||
};
|
|
||||||
}, 500);
|
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await deleteDb("embeddiaDB");
|
await deleteDb("embeddiaDB");
|
||||||
await deleteDb("betterseqta-index");
|
await deleteDb("betterseqta-index");
|
||||||
alert("Search index and storage have been reset successfully.");
|
alert("Search index and storage have been reset.");
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
alert("Failed to reset one or more databases: " + String(e) + "\n\nTry closing other browser tabs and try again.");
|
alert("Failed to reset one or more databases: " + String(e));
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
alert("Failed to reset index: " + String(e));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -35,8 +35,6 @@
|
|||||||
let isIndexing = $state(false);
|
let isIndexing = $state(false);
|
||||||
let completedJobs = $state(0);
|
let completedJobs = $state(0);
|
||||||
let totalJobs = $state(0);
|
let totalJobs = $state(0);
|
||||||
let indexingStatus = $state<string | null>(null);
|
|
||||||
let indexingDetail = $state<string | null>(null);
|
|
||||||
|
|
||||||
let commandPalleteOpen = $state(false);
|
let commandPalleteOpen = $state(false);
|
||||||
let searchTerm = $state('');
|
let searchTerm = $state('');
|
||||||
@@ -112,12 +110,10 @@
|
|||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
const progressHandler = (event: CustomEvent) => {
|
const progressHandler = (event: CustomEvent) => {
|
||||||
const { completed, total, indexing, status, detail } = event.detail;
|
const { completed, total, indexing } = event.detail;
|
||||||
completedJobs = completed;
|
completedJobs = completed;
|
||||||
totalJobs = total;
|
totalJobs = total;
|
||||||
isIndexing = indexing;
|
isIndexing = indexing;
|
||||||
indexingStatus = status || null;
|
|
||||||
indexingDetail = detail || null;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
window.addEventListener('indexing-progress', progressHandler as EventListener);
|
window.addEventListener('indexing-progress', progressHandler as EventListener);
|
||||||
@@ -172,9 +168,6 @@
|
|||||||
term,
|
term,
|
||||||
commandsFuse,
|
commandsFuse,
|
||||||
commandIdToItemMap,
|
commandIdToItemMap,
|
||||||
dynamicContentFuse,
|
|
||||||
dynamicIdToItemMap,
|
|
||||||
true, // sortByRecent
|
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
combinedResults = [];
|
combinedResults = [];
|
||||||
@@ -183,19 +176,13 @@
|
|||||||
isLoading = false;
|
isLoading = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
// Optimized debounce: shorter delay for better responsiveness
|
const debouncedPerformSearch = debounce(performSearch, 20);
|
||||||
const debouncedPerformSearch = debounce(performSearch, 50);
|
|
||||||
|
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (commandPalleteOpen) {
|
if (commandPalleteOpen) {
|
||||||
if (searchTerm === '') {
|
if (searchTerm === '') {
|
||||||
// Immediate search for empty query (shows recent items)
|
|
||||||
performSearch();
|
|
||||||
} else if (searchTerm.length <= 2) {
|
|
||||||
// Immediate search for very short queries
|
|
||||||
performSearch();
|
performSearch();
|
||||||
} else {
|
} else {
|
||||||
// Debounced search for longer queries
|
|
||||||
debouncedPerformSearch();
|
debouncedPerformSearch();
|
||||||
}
|
}
|
||||||
tick().then(() => searchbar?.focus());
|
tick().then(() => searchbar?.focus());
|
||||||
@@ -402,6 +389,19 @@
|
|||||||
{@render Shortcut({ text: 'Select', keybind: ['↵']})}
|
{@render Shortcut({ text: 'Select', keybind: ['↵']})}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
{#if isIndexing}
|
||||||
|
<div class="inset-x-0 top-0">
|
||||||
|
<div class="absolute right-2 -bottom-4 text-[10px] text-zinc-500 dark:text-zinc-400">
|
||||||
|
Indexing
|
||||||
|
</div>
|
||||||
|
<div class="overflow-hidden h-0.5 bg-zinc-200 dark:bg-zinc-700">
|
||||||
|
<div
|
||||||
|
class="h-full bg-blue-500 transition-all duration-300 ease-out"
|
||||||
|
style="width: {(completedJobs / totalJobs) * 100}%"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -4,8 +4,8 @@ import {
|
|||||||
booleanSetting,
|
booleanSetting,
|
||||||
buttonSetting,
|
buttonSetting,
|
||||||
defineSettings,
|
defineSettings,
|
||||||
hotkeySetting,
|
|
||||||
Setting,
|
Setting,
|
||||||
|
hotkeySetting,
|
||||||
} from "@/plugins/core/settingsHelpers";
|
} from "@/plugins/core/settingsHelpers";
|
||||||
import styles from "./styles.css?inline";
|
import styles from "./styles.css?inline";
|
||||||
import { waitForElm } from "@/seqta/utils/waitForElm";
|
import { waitForElm } from "@/seqta/utils/waitForElm";
|
||||||
@@ -14,7 +14,6 @@ import { initVectorSearch } from "../search/vector/vectorSearch";
|
|||||||
import { cleanupSearchBar, mountSearchBar } from "./mountSearchBar";
|
import { cleanupSearchBar, mountSearchBar } from "./mountSearchBar";
|
||||||
import { IndexedDbManager } from "embeddia";
|
import { IndexedDbManager } from "embeddia";
|
||||||
import { VectorWorkerManager } from "../indexing/worker/vectorWorkerManager";
|
import { VectorWorkerManager } from "../indexing/worker/vectorWorkerManager";
|
||||||
import { checkAndHandleUpdate } from "../utils/versionCheck";
|
|
||||||
|
|
||||||
// Platform-aware default hotkey
|
// Platform-aware default hotkey
|
||||||
const getDefaultHotkey = () => {
|
const getDefaultHotkey = () => {
|
||||||
@@ -51,11 +50,7 @@ const settings = defineSettings({
|
|||||||
|
|
||||||
if (confirmed) {
|
if (confirmed) {
|
||||||
try {
|
try {
|
||||||
// Import resetDatabase function to properly close connections
|
|
||||||
const { resetDatabase } = await import("../indexing/db");
|
|
||||||
|
|
||||||
// Reset the vector worker first
|
// Reset the vector worker first
|
||||||
try {
|
|
||||||
const workerManager = VectorWorkerManager.getInstance();
|
const workerManager = VectorWorkerManager.getInstance();
|
||||||
await workerManager.resetWorker();
|
await workerManager.resetWorker();
|
||||||
console.log("Vector worker reset successfully");
|
console.log("Vector worker reset successfully");
|
||||||
@@ -63,55 +58,23 @@ const settings = defineSettings({
|
|||||||
console.warn("Failed to reset vector worker:", e);
|
console.warn("Failed to reset vector worker:", e);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Close all database connections properly before deletion
|
// Delete both 'embeddiaDB' and 'betterseqta-index' using native IndexedDB APIs
|
||||||
try {
|
|
||||||
await resetDatabase();
|
|
||||||
} catch (e) {
|
|
||||||
console.warn("Failed to reset betterseqta-index database:", e);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Wait a bit for connections to fully close
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 100));
|
|
||||||
|
|
||||||
// Delete embeddiaDB (vector search database)
|
|
||||||
const deleteDb = (dbName: string) => {
|
const deleteDb = (dbName: string) => {
|
||||||
return new Promise<void>((resolve, reject) => {
|
return new Promise<void>((resolve, reject) => {
|
||||||
const req = indexedDB.deleteDatabase(dbName);
|
const req = indexedDB.deleteDatabase(dbName);
|
||||||
req.onsuccess = () => {
|
req.onsuccess = () => resolve();
|
||||||
console.log(`Successfully deleted database: ${dbName}`);
|
req.onerror = () => reject(req.error);
|
||||||
resolve();
|
|
||||||
};
|
|
||||||
req.onerror = () => {
|
|
||||||
console.error(`Error deleting database ${dbName}:`, req.error);
|
|
||||||
reject(req.error);
|
|
||||||
};
|
|
||||||
req.onblocked = () => {
|
req.onblocked = () => {
|
||||||
console.warn(`Database ${dbName} deletion blocked - connections still open`);
|
reject(new Error(`One database is open, failed to remove: ${dbName}`));
|
||||||
// Wait and retry once
|
|
||||||
setTimeout(() => {
|
|
||||||
const retryReq = indexedDB.deleteDatabase(dbName);
|
|
||||||
retryReq.onsuccess = () => {
|
|
||||||
console.log(`Successfully deleted database on retry: ${dbName}`);
|
|
||||||
resolve();
|
|
||||||
};
|
|
||||||
retryReq.onerror = () => reject(retryReq.error);
|
|
||||||
retryReq.onblocked = () => {
|
|
||||||
reject(new Error(`One database is open, failed to remove: ${dbName}. Please close other tabs and try again.`));
|
|
||||||
};
|
|
||||||
}, 500);
|
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await deleteDb("embeddiaDB");
|
await deleteDb("embeddiaDB");
|
||||||
await deleteDb("betterseqta-index");
|
await deleteDb("betterseqta-index");
|
||||||
alert("Search index and storage have been reset successfully.");
|
alert("Search index and storage have been reset.");
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
alert("Failed to reset one or more databases: " + String(e) + "\n\nTry closing other browser tabs and try again.");
|
alert("Failed to reset one or more databases: " + String(e));
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
alert("Failed to reset index: " + String(e));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -151,27 +114,6 @@ const globalSearchPlugin: Plugin<typeof settings> = {
|
|||||||
run: async (api) => {
|
run: async (api) => {
|
||||||
const appRef = { current: null };
|
const appRef = { current: null };
|
||||||
|
|
||||||
// Check for extension updates and clear caches if needed
|
|
||||||
// Use a timeout to avoid blocking initialization
|
|
||||||
setTimeout(async () => {
|
|
||||||
try {
|
|
||||||
const wasUpdated = await checkAndHandleUpdate();
|
|
||||||
if (wasUpdated) {
|
|
||||||
console.log("[Global Search] Extension updated - caches cleared");
|
|
||||||
}
|
|
||||||
} catch (error: any) {
|
|
||||||
// Handle CSS preload errors and other failures gracefully
|
|
||||||
// These can happen in Firefox or when assets aren't available
|
|
||||||
if (error?.message?.includes("preload CSS") ||
|
|
||||||
error?.message?.includes("MIME type") ||
|
|
||||||
error?.message?.includes("NS_ERROR_CORRUPTED_CONTENT")) {
|
|
||||||
console.debug("[Global Search] Version check skipped due to asset loading restrictions:", error.message);
|
|
||||||
} else {
|
|
||||||
console.warn("[Global Search] Failed to check for updates:", error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, 100);
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await IndexedDbManager.create("embeddiaDB", "embeddiaObjectStore", {
|
await IndexedDbManager.create("embeddiaDB", "embeddiaObjectStore", {
|
||||||
primaryKey: "id",
|
primaryKey: "id",
|
||||||
@@ -184,16 +126,10 @@ const globalSearchPlugin: Plugin<typeof settings> = {
|
|||||||
|
|
||||||
initVectorSearch();
|
initVectorSearch();
|
||||||
|
|
||||||
// Warm up vector worker in background to improve initial response time (skip in Firefox)
|
// Warm up vector worker in background to improve initial response time
|
||||||
setTimeout(async () => {
|
setTimeout(async () => {
|
||||||
try {
|
try {
|
||||||
// Only initialize worker if vector search is supported
|
|
||||||
const { isVectorSearchSupported } = await import("../utils/browserDetection");
|
|
||||||
if (isVectorSearchSupported()) {
|
|
||||||
VectorWorkerManager.getInstance();
|
VectorWorkerManager.getInstance();
|
||||||
} else {
|
|
||||||
console.debug("[Global Search] Skipping vector worker warm-up (Firefox detected - using text search only)");
|
|
||||||
}
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.warn("[Global Search] Vector worker warm-up failed:", error);
|
console.warn("[Global Search] Vector worker warm-up failed:", error);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ import browser from "webextension-polyfill";
|
|||||||
export function mountSearchBar(
|
export function mountSearchBar(
|
||||||
titleElement: Element,
|
titleElement: Element,
|
||||||
api: any,
|
api: any,
|
||||||
appRef: { current: any; storageChangeHandler?: any; progressHandler?: any },
|
appRef: { current: any; storageChangeHandler?: any },
|
||||||
) {
|
) {
|
||||||
if (titleElement.querySelector(".search-trigger")) {
|
if (titleElement.querySelector(".search-trigger")) {
|
||||||
return;
|
return;
|
||||||
@@ -21,72 +21,6 @@ export function mountSearchBar(
|
|||||||
const searchButton = document.createElement("div");
|
const searchButton = document.createElement("div");
|
||||||
searchButton.className = "search-trigger";
|
searchButton.className = "search-trigger";
|
||||||
|
|
||||||
// Create progress indicator container
|
|
||||||
const progressContainer = document.createElement("div");
|
|
||||||
progressContainer.className = "search-progress-container";
|
|
||||||
progressContainer.style.cssText = "display: flex; align-items: center; gap: 8px; margin-left: 8px; min-width: 120px;";
|
|
||||||
|
|
||||||
// Create progress bar
|
|
||||||
const progressBarWrapper = document.createElement("div");
|
|
||||||
progressBarWrapper.className = "search-progress-bar-wrapper";
|
|
||||||
progressBarWrapper.style.cssText = "flex: 1; height: 4px; background: rgba(0, 0, 0, 0.1); border-radius: 2px; overflow: hidden; display: none;";
|
|
||||||
|
|
||||||
const progressBar = document.createElement("div");
|
|
||||||
progressBar.className = "search-progress-bar";
|
|
||||||
progressBar.style.cssText = "height: 100%; background: linear-gradient(90deg, #3b82f6, #2563eb, #3b82f6); transition: width 0.3s ease-out; width: 0%; position: relative;";
|
|
||||||
|
|
||||||
// Add shimmer effect
|
|
||||||
const shimmer = document.createElement("div");
|
|
||||||
shimmer.style.cssText = "position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: shimmer 2s infinite;";
|
|
||||||
progressBar.appendChild(shimmer);
|
|
||||||
progressBarWrapper.appendChild(progressBar);
|
|
||||||
|
|
||||||
// Create progress text
|
|
||||||
const progressText = document.createElement("span");
|
|
||||||
progressText.className = "search-progress-text";
|
|
||||||
progressText.style.cssText = "font-size: 11px; color: #666; white-space: nowrap; display: none;";
|
|
||||||
|
|
||||||
progressContainer.appendChild(progressBarWrapper);
|
|
||||||
progressContainer.appendChild(progressText);
|
|
||||||
|
|
||||||
// Indexing state
|
|
||||||
let isIndexing = false;
|
|
||||||
let completedJobs = 0;
|
|
||||||
let totalJobs = 0;
|
|
||||||
let indexingStatus: string | null = null;
|
|
||||||
|
|
||||||
const updateProgressDisplay = () => {
|
|
||||||
if (isIndexing && totalJobs > 0) {
|
|
||||||
const percentage = Math.round((completedJobs / totalJobs) * 100);
|
|
||||||
progressBar.style.width = `${Math.max(2, percentage)}%`;
|
|
||||||
progressBarWrapper.style.display = "block";
|
|
||||||
|
|
||||||
if (indexingStatus) {
|
|
||||||
progressText.textContent = indexingStatus.length > 20 ? indexingStatus.substring(0, 20) + "..." : indexingStatus;
|
|
||||||
progressText.style.display = "block";
|
|
||||||
} else {
|
|
||||||
progressText.textContent = `${completedJobs}/${totalJobs} (${percentage}%)`;
|
|
||||||
progressText.style.display = "block";
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
progressBarWrapper.style.display = "none";
|
|
||||||
progressText.style.display = "none";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Listen for indexing progress events
|
|
||||||
const progressHandler = (event: CustomEvent) => {
|
|
||||||
const { completed, total, indexing, status } = event.detail;
|
|
||||||
completedJobs = completed || 0;
|
|
||||||
totalJobs = total || 0;
|
|
||||||
isIndexing = indexing || false;
|
|
||||||
indexingStatus = status || null;
|
|
||||||
updateProgressDisplay();
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener('indexing-progress', progressHandler as EventListener);
|
|
||||||
appRef.progressHandler = progressHandler;
|
|
||||||
|
|
||||||
const updateSearchButtonDisplay = () => {
|
const updateSearchButtonDisplay = () => {
|
||||||
searchButton.innerHTML = /* html */ `
|
searchButton.innerHTML = /* html */ `
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
@@ -100,7 +34,6 @@ export function mountSearchBar(
|
|||||||
|
|
||||||
updateSearchButtonDisplay();
|
updateSearchButtonDisplay();
|
||||||
titleElement.appendChild(searchButton);
|
titleElement.appendChild(searchButton);
|
||||||
titleElement.appendChild(progressContainer);
|
|
||||||
|
|
||||||
// Listen for hotkey setting changes
|
// Listen for hotkey setting changes
|
||||||
const handleStorageChange = (changes: any, area: string) => {
|
const handleStorageChange = (changes: any, area: string) => {
|
||||||
@@ -139,7 +72,7 @@ export function mountSearchBar(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function cleanupSearchBar(appRef: { current: any; storageChangeHandler?: any; progressHandler?: any }) {
|
export function cleanupSearchBar(appRef: { current: any; storageChangeHandler?: any }) {
|
||||||
if (appRef.current) {
|
if (appRef.current) {
|
||||||
try {
|
try {
|
||||||
unmount(appRef.current);
|
unmount(appRef.current);
|
||||||
@@ -149,24 +82,12 @@ export function cleanupSearchBar(appRef: { current: any; storageChangeHandler?:
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove progress event listener
|
|
||||||
if (appRef.progressHandler) {
|
|
||||||
window.removeEventListener('indexing-progress', appRef.progressHandler as EventListener);
|
|
||||||
appRef.progressHandler = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove search trigger button
|
// Remove search trigger button
|
||||||
const searchTrigger = document.querySelector(".search-trigger");
|
const searchTrigger = document.querySelector(".search-trigger");
|
||||||
if (searchTrigger) {
|
if (searchTrigger) {
|
||||||
searchTrigger.remove();
|
searchTrigger.remove();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove progress container
|
|
||||||
const progressContainer = document.querySelector(".search-progress-container");
|
|
||||||
if (progressContainer) {
|
|
||||||
progressContainer.remove();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove search root
|
// Remove search root
|
||||||
const searchRoot = document.querySelector("div[data-search-root]");
|
const searchRoot = document.querySelector("div[data-search-root]");
|
||||||
if (searchRoot) {
|
if (searchRoot) {
|
||||||
|
|||||||
@@ -69,71 +69,3 @@
|
|||||||
.dark .highlight {
|
.dark .highlight {
|
||||||
background-color: rgba(255, 230, 100, 0.4);
|
background-color: rgba(255, 230, 100, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes shimmer {
|
|
||||||
0% {
|
|
||||||
transform: translateX(-100%);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.animate-shimmer {
|
|
||||||
animation: shimmer 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Progress indicator next to search trigger */
|
|
||||||
.search-progress-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
margin-left: 8px;
|
|
||||||
min-width: 120px;
|
|
||||||
max-width: 200px;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-progress-bar-wrapper {
|
|
||||||
flex: 1;
|
|
||||||
height: 4px;
|
|
||||||
background: rgba(0, 0, 0, 0.1);
|
|
||||||
border-radius: 2px;
|
|
||||||
overflow: hidden;
|
|
||||||
display: none;
|
|
||||||
min-width: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .search-progress-bar-wrapper {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-progress-bar {
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(90deg, #3b82f6, #2563eb, #3b82f6);
|
|
||||||
transition: width 0.3s ease-out;
|
|
||||||
width: 0%;
|
|
||||||
position: relative;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-progress-bar::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
|
||||||
animation: shimmer 2s infinite;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-progress-text {
|
|
||||||
font-size: 11px;
|
|
||||||
color: #666;
|
|
||||||
white-space: nowrap;
|
|
||||||
display: none;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .search-progress-text {
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
@@ -59,132 +59,17 @@ export const actionMap: Record<string, ActionHandler<any>> = {
|
|||||||
}) as ActionHandler<any>,
|
}) as ActionHandler<any>,
|
||||||
|
|
||||||
assessment: (async (item: IndexItem & { metadata: AssessmentMetadata }) => {
|
assessment: (async (item: IndexItem & { metadata: AssessmentMetadata }) => {
|
||||||
// Deep clone the entire item to avoid Firefox XrayWrapper issues
|
if (item.metadata.isMessageBased) {
|
||||||
// Firefox XrayWrapper prevents direct access to nested properties
|
|
||||||
let itemClone: IndexItem & { metadata: AssessmentMetadata };
|
|
||||||
let metadata: AssessmentMetadata;
|
|
||||||
|
|
||||||
try {
|
|
||||||
// First try to clone the entire item
|
|
||||||
itemClone = JSON.parse(JSON.stringify(item));
|
|
||||||
metadata = itemClone.metadata || {};
|
|
||||||
} catch (e) {
|
|
||||||
console.warn("[Assessment Action] Failed to clone item, trying to clone metadata separately:", e);
|
|
||||||
try {
|
|
||||||
// If full clone fails, try cloning just metadata
|
|
||||||
metadata = JSON.parse(JSON.stringify(item.metadata || {}));
|
|
||||||
itemClone = { ...item, metadata };
|
|
||||||
} catch (e2) {
|
|
||||||
console.warn("[Assessment Action] Failed to clone metadata, using direct access:", e2);
|
|
||||||
itemClone = item;
|
|
||||||
metadata = item.metadata || {} as AssessmentMetadata;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Try to extract metadata values using multiple methods to handle XrayWrapper
|
|
||||||
const getMetadataValue = (key: string, altKey?: string): any => {
|
|
||||||
try {
|
|
||||||
// Try direct access first
|
|
||||||
const value = metadata[key];
|
|
||||||
if (value !== undefined && value !== null) {
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
if (altKey) {
|
|
||||||
const altValue = metadata[altKey];
|
|
||||||
if (altValue !== undefined && altValue !== null) {
|
|
||||||
return altValue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Try accessing via Object.keys iteration (works around XrayWrapper)
|
|
||||||
try {
|
|
||||||
const keys = Object.keys(metadata);
|
|
||||||
for (const k of keys) {
|
|
||||||
if (k === key || k === altKey) {
|
|
||||||
const val = metadata[k];
|
|
||||||
if (val !== undefined && val !== null) {
|
|
||||||
return val;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
// Object.keys might fail on XrayWrapper, that's okay
|
|
||||||
}
|
|
||||||
return undefined;
|
|
||||||
} catch (e) {
|
|
||||||
console.warn(`[Assessment Action] Failed to access metadata.${key}:`, e);
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (getMetadataValue('isMessageBased')) {
|
|
||||||
window.location.hash = `#?page=/messages`;
|
window.location.hash = `#?page=/messages`;
|
||||||
|
|
||||||
await waitForElm('[class*="Viewer__Viewer___"] > div', true, 20);
|
await waitForElm('[class*="Viewer__Viewer___"] > div', true, 20);
|
||||||
|
|
||||||
// Select the specific direct message
|
// Select the specific direct message
|
||||||
ReactFiber.find('[class*="Viewer__Viewer___"] > div').setState({
|
ReactFiber.find('[class*="Viewer__Viewer___"] > div').setState({
|
||||||
selected: new Set([getMetadataValue('messageId')]),
|
selected: new Set([item.metadata.messageId]),
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
// Extract values - check both camelCase and PascalCase, and try multiple access methods
|
window.location.hash = `#?page=/assessments&id=${item.metadata.assessmentId}`;
|
||||||
let programmeId = getMetadataValue('programmeId', 'programmeID');
|
|
||||||
let metaclassId = getMetadataValue('metaclassId', 'metaclassID');
|
|
||||||
let assessmentId = getMetadataValue('assessmentId', 'assessmentID');
|
|
||||||
|
|
||||||
// Fallback: try to extract assessmentId from item ID if metadata is missing
|
|
||||||
if ((assessmentId === undefined || assessmentId === null) && itemClone.id && itemClone.id.startsWith('assignment-')) {
|
|
||||||
const extractedId = itemClone.id.replace('assignment-', '');
|
|
||||||
assessmentId = Number(extractedId) || extractedId;
|
|
||||||
console.log("[Assessment Action] Extracted assessmentId from item ID:", assessmentId);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Convert to numbers, but preserve 0 as valid
|
|
||||||
if (programmeId !== undefined && programmeId !== null && programmeId !== '') {
|
|
||||||
const num = Number(programmeId);
|
|
||||||
programmeId = isNaN(num) ? programmeId : num;
|
|
||||||
}
|
|
||||||
if (metaclassId !== undefined && metaclassId !== null && metaclassId !== '') {
|
|
||||||
const num = Number(metaclassId);
|
|
||||||
metaclassId = isNaN(num) ? metaclassId : num;
|
|
||||||
}
|
|
||||||
if (assessmentId !== undefined && assessmentId !== null && assessmentId !== '') {
|
|
||||||
const num = Number(assessmentId);
|
|
||||||
assessmentId = isNaN(num) ? assessmentId : num;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if values exist (including 0, which is a valid ID)
|
|
||||||
// Use typeof check to properly handle 0
|
|
||||||
const hasProgrammeId = programmeId !== undefined && programmeId !== null && programmeId !== '' && typeof programmeId === 'number';
|
|
||||||
const hasMetaclassId = metaclassId !== undefined && metaclassId !== null && metaclassId !== '' && typeof metaclassId === 'number';
|
|
||||||
const hasAssessmentId = assessmentId !== undefined && assessmentId !== null && assessmentId !== '' && typeof assessmentId === 'number';
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if (hasProgrammeId && hasMetaclassId && hasAssessmentId) {
|
|
||||||
const url = `#?page=/assessments/${programmeId}:${metaclassId}&item=${assessmentId}`;
|
|
||||||
console.log("[Assessment Action] ✅ Navigating to:", url);
|
|
||||||
window.location.hash = url;
|
|
||||||
} else {
|
|
||||||
// Fallback: try to navigate to assessments page if metadata is incomplete
|
|
||||||
console.error("[Assessment Action] ❌ Missing required metadata:", {
|
|
||||||
programmeId,
|
|
||||||
metaclassId,
|
|
||||||
assessmentId,
|
|
||||||
hasProgrammeId,
|
|
||||||
hasMetaclassId,
|
|
||||||
hasAssessmentId,
|
|
||||||
metadataKeys: Object.keys(metadata),
|
|
||||||
metadataString: JSON.stringify(metadata),
|
|
||||||
itemId: itemClone.id,
|
|
||||||
});
|
|
||||||
// If we at least have an assessmentId, try to navigate to the general assessments page
|
|
||||||
if (hasAssessmentId) {
|
|
||||||
window.location.hash = `#?page=/assessments/upcoming&item=${assessmentId}`;
|
|
||||||
} else {
|
|
||||||
console.warn("[Assessment Action] No valid assessment ID, redirecting to upcoming");
|
|
||||||
window.location.hash = `#?page=/assessments/upcoming`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}) as ActionHandler<any>,
|
}) as ActionHandler<any>,
|
||||||
|
|
||||||
|
|||||||
@@ -213,54 +213,25 @@ export async function clear(store: string): Promise<void> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export async function resetDatabase(): Promise<void> {
|
export async function resetDatabase(): Promise<void> {
|
||||||
// Close cached database connection
|
|
||||||
if (cachedDb) {
|
if (cachedDb) {
|
||||||
try {
|
|
||||||
cachedDb.close();
|
cachedDb.close();
|
||||||
} catch (e) {
|
|
||||||
console.warn("[DB] Error closing cached database:", e);
|
|
||||||
}
|
|
||||||
cachedDb = null;
|
cachedDb = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Close pending database promise
|
|
||||||
if (dbPromise) {
|
if (dbPromise) {
|
||||||
try {
|
try {
|
||||||
const db = await dbPromise;
|
const db = await dbPromise;
|
||||||
db.close();
|
db.close();
|
||||||
} catch (e) {
|
} catch (e) {}
|
||||||
// Database might not be open yet, that's okay
|
|
||||||
}
|
|
||||||
dbPromise = null;
|
dbPromise = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Wait a bit for connections to fully close
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 100));
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const req = indexedDB.deleteDatabase(DB_NAME);
|
const req = indexedDB.deleteDatabase(DB_NAME);
|
||||||
req.onsuccess = () => {
|
req.onsuccess = () => {
|
||||||
localStorage.removeItem(VERSION_KEY);
|
localStorage.removeItem(VERSION_KEY);
|
||||||
resolve();
|
resolve();
|
||||||
};
|
};
|
||||||
req.onerror = () => {
|
req.onerror = () => reject(req.error);
|
||||||
console.error("[DB] Error deleting database:", req.error);
|
|
||||||
reject(req.error);
|
|
||||||
};
|
|
||||||
req.onblocked = () => {
|
|
||||||
console.warn("[DB] Database deletion blocked - waiting for connections to close");
|
|
||||||
// Wait a bit longer and try again
|
|
||||||
setTimeout(() => {
|
|
||||||
const retryReq = indexedDB.deleteDatabase(DB_NAME);
|
|
||||||
retryReq.onsuccess = () => {
|
|
||||||
localStorage.removeItem(VERSION_KEY);
|
|
||||||
resolve();
|
|
||||||
};
|
|
||||||
retryReq.onerror = () => reject(retryReq.error);
|
|
||||||
retryReq.onblocked = () => {
|
|
||||||
reject(new Error(`Database is still open. Please close other tabs/windows and try again.`));
|
|
||||||
};
|
|
||||||
}, 500);
|
|
||||||
};
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { clear, get, getAll, put, remove } from "./db";
|
import { clear, getAll, get, put, remove } from "./db";
|
||||||
import { jobs } from "./jobs";
|
import { jobs } from "./jobs";
|
||||||
import { renderComponentMap } from "./renderComponents";
|
import { renderComponentMap } from "./renderComponents";
|
||||||
import type { IndexItem, Job, JobContext } from "./types";
|
import type { IndexItem, Job, JobContext } from "./types";
|
||||||
@@ -396,34 +396,18 @@ export async function runIndexing(): Promise<void> {
|
|||||||
stopHeartbeat();
|
stopHeartbeat();
|
||||||
|
|
||||||
allItemsInPrimaryStores = await loadAllStoredItems();
|
allItemsInPrimaryStores = await loadAllStoredItems();
|
||||||
// Create new objects to avoid XrayWrapper issues in Firefox
|
allItemsInPrimaryStores.forEach(item => {
|
||||||
const itemsWithComponents = allItemsInPrimaryStores.map(item => {
|
|
||||||
try {
|
|
||||||
const jobDef = jobs[item.category] || Object.values(jobs).find(j => j.id === item.category) || jobs[item.renderComponentId];
|
const jobDef = jobs[item.category] || Object.values(jobs).find(j => j.id === item.category) || jobs[item.renderComponentId];
|
||||||
let renderComponent = item.renderComponent;
|
|
||||||
if (jobDef) {
|
if (jobDef) {
|
||||||
renderComponent = renderComponentMap[jobDef.renderComponentId] || renderComponent;
|
const renderComponent = renderComponentMap[jobDef.renderComponentId];
|
||||||
|
if (renderComponent) {
|
||||||
|
item.renderComponent = renderComponent;
|
||||||
|
}
|
||||||
} else if (renderComponentMap[item.renderComponentId]) {
|
} else if (renderComponentMap[item.renderComponentId]) {
|
||||||
renderComponent = renderComponentMap[item.renderComponentId];
|
item.renderComponent = renderComponentMap[item.renderComponentId];
|
||||||
}
|
|
||||||
// Deep clone to avoid Firefox XrayWrapper issues with nested objects like metadata
|
|
||||||
// Use JSON serialization to ensure all nested properties are accessible
|
|
||||||
try {
|
|
||||||
const cloned = JSON.parse(JSON.stringify(item));
|
|
||||||
cloned.renderComponent = renderComponent;
|
|
||||||
return cloned;
|
|
||||||
} catch (e) {
|
|
||||||
// Fallback to shallow copy if deep clone fails
|
|
||||||
console.warn("[Indexer] Failed to deep clone item, using shallow copy:", e);
|
|
||||||
return { ...item, renderComponent };
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
// Fallback: return item as-is if modification fails (Firefox XrayWrapper)
|
|
||||||
console.warn("[Indexer] Failed to add render component to item (Firefox XrayWrapper):", error);
|
|
||||||
return item;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
loadDynamicItems(itemsWithComponents);
|
loadDynamicItems(allItemsInPrimaryStores);
|
||||||
window.dispatchEvent(new Event("dynamic-items-updated"));
|
window.dispatchEvent(new Event("dynamic-items-updated"));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -3,12 +3,10 @@ import { messagesJob } from "./jobs/messages";
|
|||||||
import { notificationsJob } from "./jobs/notifications";
|
import { notificationsJob } from "./jobs/notifications";
|
||||||
import { forumsJob } from "./jobs/forums";
|
import { forumsJob } from "./jobs/forums";
|
||||||
import { subjectsJob } from "./jobs/subjects";
|
import { subjectsJob } from "./jobs/subjects";
|
||||||
import { assignmentsJob } from "./jobs/assignments";
|
|
||||||
|
|
||||||
export const jobs: Record<string, Job> = {
|
export const jobs: Record<string, Job> = {
|
||||||
messages: messagesJob,
|
messages: messagesJob,
|
||||||
notifications: notificationsJob,
|
notifications: notificationsJob,
|
||||||
forums: forumsJob,
|
forums: forumsJob,
|
||||||
subjects: subjectsJob,
|
subjects: subjectsJob,
|
||||||
assignments: assignmentsJob,
|
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,369 +0,0 @@
|
|||||||
import type { IndexItem, Job } from "../types";
|
|
||||||
|
|
||||||
const fetchJSON = async (url: string, body: any) => {
|
|
||||||
const res = await fetch(`${location.origin}${url}`, {
|
|
||||||
method: "POST",
|
|
||||||
credentials: "include",
|
|
||||||
headers: { "Content-Type": "application/json; charset=utf-8" },
|
|
||||||
body: JSON.stringify(body),
|
|
||||||
});
|
|
||||||
return res.json();
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchUpcomingAssessments = async (student: number = 69) => {
|
|
||||||
try {
|
|
||||||
const res = await fetchJSON("/seqta/student/assessment/list/upcoming?", {
|
|
||||||
student,
|
|
||||||
});
|
|
||||||
// Match analytics.rs: payload is an array, return empty array if not found
|
|
||||||
return Array.isArray(res.payload) ? res.payload : [];
|
|
||||||
} catch (e) {
|
|
||||||
console.error("[Assignments job] Failed to fetch upcoming assessments:", e);
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchSubjects = async () => {
|
|
||||||
try {
|
|
||||||
const res = await fetchJSON("/seqta/student/load/subjects?", {});
|
|
||||||
return res.payload
|
|
||||||
?.filter((s: any) => s.active === 1)
|
|
||||||
?.flatMap((s: any) => s.subjects) || [];
|
|
||||||
} catch (e) {
|
|
||||||
console.error("[Assignments job] Failed to fetch subjects:", e);
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchPastAssessments = async (student: number = 69, subjects: any[]) => {
|
|
||||||
const map: Record<number, any> = {};
|
|
||||||
|
|
||||||
// Fetch past assessments for all subjects in parallel (like assessmentsOverview does)
|
|
||||||
// This is much faster than sequential fetching
|
|
||||||
await Promise.all(
|
|
||||||
subjects.map(async (subject) => {
|
|
||||||
try {
|
|
||||||
// Match analytics.rs exactly: parameter order is programme, metaclass, student
|
|
||||||
const res = await fetchJSON("/seqta/student/assessment/list/past?", {
|
|
||||||
programme: subject.programme,
|
|
||||||
metaclass: subject.metaclass,
|
|
||||||
student,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Past assessments API can return data in payload.tasks OR payload.pending (or both)
|
|
||||||
// Based on analytics.rs fetch_past_assessments, we need to check both arrays
|
|
||||||
const processAssessment = (assessment: any) => {
|
|
||||||
if (assessment && assessment.id) {
|
|
||||||
// Ensure programme and metaclass are included from the subject
|
|
||||||
// Use the assessment's IDs if available, otherwise fall back to subject's
|
|
||||||
map[assessment.id] = {
|
|
||||||
...assessment,
|
|
||||||
programme: assessment.programme || assessment.programmeID || subject.programme,
|
|
||||||
programmeID: assessment.programmeID || assessment.programme || subject.programme,
|
|
||||||
metaclass: assessment.metaclass || assessment.metaclassID || subject.metaclass,
|
|
||||||
metaclassID: assessment.metaclassID || assessment.metaclass || subject.metaclass,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Match analytics.rs: Check both pending and tasks arrays
|
|
||||||
// Check for pending array first (matching Rust code order)
|
|
||||||
if (res.payload?.pending && Array.isArray(res.payload.pending)) {
|
|
||||||
res.payload.pending.forEach(processAssessment);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check for tasks array
|
|
||||||
if (res.payload?.tasks && Array.isArray(res.payload.tasks)) {
|
|
||||||
res.payload.tasks.forEach(processAssessment);
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.warn(`[Assignments job] Failed to fetch past assessments for subject ${subject.code || subject.subject || 'unknown'}:`, e);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
return Object.values(map);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const assignmentsJob: Job = {
|
|
||||||
id: "assignments",
|
|
||||||
label: "Assignments",
|
|
||||||
renderComponentId: "assessment",
|
|
||||||
frequency: { type: "expiry", afterMs: 1000 * 60 * 60 * 24 }, // Daily
|
|
||||||
|
|
||||||
boostCriteria: (item, searchTerm) => {
|
|
||||||
if (searchTerm === "") {
|
|
||||||
return -100;
|
|
||||||
}
|
|
||||||
|
|
||||||
let score = 0;
|
|
||||||
|
|
||||||
// Boost upcoming assignments
|
|
||||||
if (item.metadata.dueDate) {
|
|
||||||
const dueDate = new Date(item.metadata.dueDate).getTime();
|
|
||||||
const now = Date.now();
|
|
||||||
const daysUntilDue = (dueDate - now) / (1000 * 60 * 60 * 24);
|
|
||||||
|
|
||||||
if (daysUntilDue >= 0 && daysUntilDue <= 7) {
|
|
||||||
score += 0.05; // Boost assignments due within a week
|
|
||||||
}
|
|
||||||
if (daysUntilDue < 0) {
|
|
||||||
score -= 0.1; // Penalty for overdue assignments
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Boost if submitted
|
|
||||||
if (item.metadata.submitted) {
|
|
||||||
score += 0.02;
|
|
||||||
}
|
|
||||||
|
|
||||||
return score;
|
|
||||||
},
|
|
||||||
|
|
||||||
run: async (ctx) => {
|
|
||||||
// Don't filter by existing IDs - we want to process ALL assessments (both new and old)
|
|
||||||
// to ensure metadata is up-to-date and all past assignments are indexed
|
|
||||||
const existingItems = await ctx.getStoredItems("assignments");
|
|
||||||
const existingIds = new Set(existingItems.map((i) => i.id));
|
|
||||||
|
|
||||||
const student = 69; // TODO: Get from context if available
|
|
||||||
|
|
||||||
console.debug("[Assignments job] Starting indexing - fetching all assessments (upcoming and past)...");
|
|
||||||
|
|
||||||
// Fetch data in parallel
|
|
||||||
const [upcoming, subjects] = await Promise.all([
|
|
||||||
fetchUpcomingAssessments(student),
|
|
||||||
fetchSubjects(),
|
|
||||||
]);
|
|
||||||
|
|
||||||
console.debug(`[Assignments job] Fetched ${upcoming.length} upcoming assessments and ${subjects.length} subjects`);
|
|
||||||
|
|
||||||
// Fetch past assessments for ALL subjects to ensure we get all historical assignments
|
|
||||||
const past = await fetchPastAssessments(student, subjects);
|
|
||||||
|
|
||||||
console.debug(`[Assignments job] Fetched ${past.length} past assessments`);
|
|
||||||
|
|
||||||
// Create a lookup map from subject code to programme/metaclass
|
|
||||||
const subjectLookup = new Map<string, { programme: number; metaclass: number }>();
|
|
||||||
subjects.forEach((s: any) => {
|
|
||||||
if (s.code && s.programme && s.metaclass) {
|
|
||||||
subjectLookup.set(s.code, { programme: s.programme, metaclass: s.metaclass });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Combine and deduplicate
|
|
||||||
const allAssessments = new Map<number, any>();
|
|
||||||
|
|
||||||
upcoming.forEach((a: any) => {
|
|
||||||
if (a && a.id) {
|
|
||||||
// Prioritize capital ID fields (programmeID, metaclassID) as that's what the API returns
|
|
||||||
let programme = a.programmeID || a.programme;
|
|
||||||
let metaclass = a.metaclassID || a.metaclass;
|
|
||||||
|
|
||||||
// If missing, try to get from subject lookup
|
|
||||||
if ((!programme || !metaclass) && a.code) {
|
|
||||||
const subjectInfo = subjectLookup.get(a.code);
|
|
||||||
if (subjectInfo) {
|
|
||||||
programme = programme || subjectInfo.programme;
|
|
||||||
metaclass = metaclass || subjectInfo.metaclass;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
allAssessments.set(a.id, {
|
|
||||||
...a,
|
|
||||||
programme,
|
|
||||||
metaclass,
|
|
||||||
programmeID: programme, // Ensure both formats are available
|
|
||||||
metaclassID: metaclass,
|
|
||||||
isUpcoming: true,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
past.forEach((a: any) => {
|
|
||||||
if (a && a.id) {
|
|
||||||
// Prioritize capital ID fields (programmeID, metaclassID) as that's what the API returns
|
|
||||||
let programme = a.programmeID || a.programme;
|
|
||||||
let metaclass = a.metaclassID || a.metaclass;
|
|
||||||
|
|
||||||
const existing = allAssessments.get(a.id);
|
|
||||||
if (existing) {
|
|
||||||
// Merge past assessment data, ensuring programme/metaclass are preserved
|
|
||||||
// Use existing values if new ones are missing
|
|
||||||
programme = programme || existing.programme || existing.programmeID;
|
|
||||||
metaclass = metaclass || existing.metaclass || existing.metaclassID;
|
|
||||||
|
|
||||||
Object.assign(existing, {
|
|
||||||
...a,
|
|
||||||
programme,
|
|
||||||
metaclass,
|
|
||||||
programmeID: programme,
|
|
||||||
metaclassID: metaclass,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
allAssessments.set(a.id, {
|
|
||||||
...a,
|
|
||||||
programme,
|
|
||||||
metaclass,
|
|
||||||
programmeID: programme,
|
|
||||||
metaclassID: metaclass,
|
|
||||||
isUpcoming: false
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const items: IndexItem[] = [];
|
|
||||||
const processedIds = new Set<string>();
|
|
||||||
|
|
||||||
// Process assessments in batches to avoid overwhelming the API
|
|
||||||
const assessmentArray = Array.from(allAssessments.values());
|
|
||||||
const pastCount = assessmentArray.filter(a => !a.isUpcoming).length;
|
|
||||||
const upcomingCount = assessmentArray.filter(a => a.isUpcoming).length;
|
|
||||||
console.debug(`[Assignments job] Processing ${assessmentArray.length} total assessments (${upcomingCount} upcoming, ${pastCount} past)`);
|
|
||||||
const batchSize = 15; // Increased batch size for better performance
|
|
||||||
|
|
||||||
// Skip fetching assessment details - the API endpoint doesn't exist or returns 404
|
|
||||||
// Details are optional and not critical for search functionality
|
|
||||||
|
|
||||||
// Process ALL assessments (both upcoming and past) to ensure everything is indexed
|
|
||||||
for (let i = 0; i < assessmentArray.length; i += batchSize) {
|
|
||||||
const batch = assessmentArray.slice(i, i + batchSize);
|
|
||||||
|
|
||||||
const batchItems = await Promise.all(
|
|
||||||
batch.map(async (assessment) => {
|
|
||||||
const id = `assignment-${assessment.id}`;
|
|
||||||
|
|
||||||
// Skip if already processed in this batch
|
|
||||||
if (processedIds.has(id)) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
processedIds.add(id);
|
|
||||||
|
|
||||||
// Process ALL assessments (both new and existing, upcoming and past)
|
|
||||||
// This ensures all historical assignments are indexed and metadata is up-to-date
|
|
||||||
|
|
||||||
// Skip fetching details - API endpoint doesn't exist
|
|
||||||
const description = "";
|
|
||||||
|
|
||||||
const subjectName = assessment.subject || assessment.code || "Unknown Subject";
|
|
||||||
const dueDate = assessment.due ? new Date(assessment.due).getTime() : null;
|
|
||||||
|
|
||||||
// Prioritize capital ID fields (programmeID, metaclassID) as that's what the API returns
|
|
||||||
const programmeId = assessment.programmeID || assessment.programme;
|
|
||||||
const metaclassId = assessment.metaclassID || assessment.metaclass;
|
|
||||||
|
|
||||||
// Validate that we have the required IDs for navigation
|
|
||||||
if (!programmeId || !metaclassId || !assessment.id) {
|
|
||||||
console.warn(`[Assignments job] Skipping assignment ${assessment.id} - missing required IDs:`, {
|
|
||||||
programmeId,
|
|
||||||
metaclassId,
|
|
||||||
assessmentId: assessment.id,
|
|
||||||
programmeID: assessment.programmeID,
|
|
||||||
metaclassID: assessment.metaclassID,
|
|
||||||
programme: assessment.programme,
|
|
||||||
metaclass: assessment.metaclass,
|
|
||||||
assessment,
|
|
||||||
});
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Convert to numbers, preserving 0 as valid
|
|
||||||
let finalProgrammeId: number | undefined;
|
|
||||||
let finalMetaclassId: number | undefined;
|
|
||||||
|
|
||||||
if (programmeId !== undefined && programmeId !== null && programmeId !== '') {
|
|
||||||
const num = Number(programmeId);
|
|
||||||
finalProgrammeId = isNaN(num) ? undefined : num;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (metaclassId !== undefined && metaclassId !== null && metaclassId !== '') {
|
|
||||||
const num = Number(metaclassId);
|
|
||||||
finalMetaclassId = isNaN(num) ? undefined : num;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Final validation - check for actual numbers (including 0)
|
|
||||||
if (finalProgrammeId === undefined || finalMetaclassId === undefined || !assessment.id) {
|
|
||||||
console.error(`[Assignments job] ❌ Skipping assignment ${assessment.id} - invalid IDs after conversion:`, {
|
|
||||||
programmeId: finalProgrammeId,
|
|
||||||
metaclassId: finalMetaclassId,
|
|
||||||
assessmentId: assessment.id,
|
|
||||||
rawProgrammeId: programmeId,
|
|
||||||
rawMetaclassId: metaclassId,
|
|
||||||
assessment,
|
|
||||||
});
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const item: IndexItem = {
|
|
||||||
id,
|
|
||||||
text: assessment.title || assessment.name || "Untitled Assignment",
|
|
||||||
category: "assignments",
|
|
||||||
content: `${description}\nSubject: ${subjectName}\nDue: ${assessment.due || "No due date"}`.trim(),
|
|
||||||
dateAdded: dueDate || Date.now(),
|
|
||||||
metadata: {
|
|
||||||
assessmentId: assessment.id,
|
|
||||||
assessmentID: assessment.id, // Store both variants for compatibility
|
|
||||||
subject: subjectName,
|
|
||||||
subjectCode: assessment.code,
|
|
||||||
dueDate: assessment.due,
|
|
||||||
programmeId: finalProgrammeId,
|
|
||||||
programmeID: finalProgrammeId, // Store both variants for compatibility
|
|
||||||
metaclassId: finalMetaclassId,
|
|
||||||
metaclassID: finalMetaclassId, // Store both variants for compatibility
|
|
||||||
submitted: assessment.submitted || false,
|
|
||||||
isUpcoming: assessment.isUpcoming || false,
|
|
||||||
term: assessment.term,
|
|
||||||
timestamp: assessment.due || new Date().toISOString(), // Required by AssessmentMetadata interface
|
|
||||||
},
|
|
||||||
actionId: "assessment",
|
|
||||||
renderComponentId: "assessment",
|
|
||||||
};
|
|
||||||
|
|
||||||
console.debug(`[Assignments job] ✅ Created item for assignment ${assessment.id}:`, {
|
|
||||||
id: item.id,
|
|
||||||
programmeId: item.metadata.programmeId,
|
|
||||||
programmeID: item.metadata.programmeID,
|
|
||||||
metaclassId: item.metadata.metaclassId,
|
|
||||||
metaclassID: item.metadata.metaclassID,
|
|
||||||
assessmentId: item.metadata.assessmentId,
|
|
||||||
assessmentID: item.metadata.assessmentID,
|
|
||||||
});
|
|
||||||
|
|
||||||
return item;
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
// Filter out nulls and add to items
|
|
||||||
batchItems.forEach(item => {
|
|
||||||
if (item) {
|
|
||||||
items.push(item);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Small delay between batches to avoid rate limiting
|
|
||||||
if (i + batchSize < assessmentArray.length) {
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 50)); // Reduced delay
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const newItemsCount = items.filter(item => !existingIds.has(item.id)).length;
|
|
||||||
const updatedItemsCount = items.length - newItemsCount;
|
|
||||||
console.debug(`[Assignments job] Indexed ${items.length} assignment items (${newItemsCount} new, ${updatedItemsCount} updated)`);
|
|
||||||
return items;
|
|
||||||
},
|
|
||||||
|
|
||||||
purge: (items) => {
|
|
||||||
// Keep ALL assignments - don't purge old ones as users may want to search for them
|
|
||||||
// Only remove items that are truly invalid (missing required metadata)
|
|
||||||
return items.filter((i) => {
|
|
||||||
// Keep all items that have valid metadata
|
|
||||||
return i.metadata &&
|
|
||||||
i.metadata.assessmentId &&
|
|
||||||
i.metadata.programmeId !== undefined &&
|
|
||||||
i.metadata.metaclassId !== undefined;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
import type { IndexItem, Job } from "../types";
|
import type { Job, IndexItem } from "../types";
|
||||||
|
|
||||||
const fetchForums = async () => {
|
const fetchForums = async () => {
|
||||||
const res = await fetch(`${location.origin}/seqta/student/load/forums`, {
|
const res = await fetch(`${location.origin}/seqta/student/load/forums`, {
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import type { IndexItem, Job } from "../types";
|
import type { Job, IndexItem } from "../types";
|
||||||
import { htmlToPlainText } from "../utils";
|
import { htmlToPlainText } from "../utils";
|
||||||
import { delay } from "@/seqta/utils/delay";
|
import { delay } from "@/seqta/utils/delay";
|
||||||
import { VectorWorkerManager } from "../worker/vectorWorkerManager";
|
import { VectorWorkerManager } from "../worker/vectorWorkerManager";
|
||||||
@@ -604,34 +604,22 @@ export const messagesJob: Job = {
|
|||||||
if (processedItems.length > 0) {
|
if (processedItems.length > 0) {
|
||||||
try {
|
try {
|
||||||
const currentItems = await loadAllStoredItems();
|
const currentItems = await loadAllStoredItems();
|
||||||
// Create new objects to avoid XrayWrapper issues in Firefox
|
currentItems.forEach((item) => {
|
||||||
const itemsWithComponents = currentItems.map((item) => {
|
|
||||||
try {
|
|
||||||
const jobDef =
|
const jobDef =
|
||||||
jobs[item.category] ||
|
jobs[item.category] ||
|
||||||
Object.values(jobs).find((j) => j.id === item.category) ||
|
Object.values(jobs).find((j) => j.id === item.category) ||
|
||||||
jobs[item.renderComponentId];
|
jobs[item.renderComponentId];
|
||||||
let renderComponent = item.renderComponent;
|
|
||||||
if (jobDef) {
|
if (jobDef) {
|
||||||
renderComponent = renderComponentMap[jobDef.renderComponentId] || renderComponent;
|
const renderComponent =
|
||||||
|
renderComponentMap[jobDef.renderComponentId];
|
||||||
|
if (renderComponent) {
|
||||||
|
item.renderComponent = renderComponent;
|
||||||
|
}
|
||||||
} else if (renderComponentMap[item.renderComponentId]) {
|
} else if (renderComponentMap[item.renderComponentId]) {
|
||||||
renderComponent = renderComponentMap[item.renderComponentId];
|
item.renderComponent = renderComponentMap[item.renderComponentId];
|
||||||
}
|
|
||||||
// Deep clone to avoid Firefox XrayWrapper issues with nested objects like metadata
|
|
||||||
try {
|
|
||||||
const cloned = JSON.parse(JSON.stringify(item));
|
|
||||||
cloned.renderComponent = renderComponent;
|
|
||||||
return cloned;
|
|
||||||
} catch (e) {
|
|
||||||
// Fallback to shallow copy if deep clone fails
|
|
||||||
return { ...item, renderComponent };
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
// Fallback: return item as-is if modification fails (Firefox XrayWrapper)
|
|
||||||
return item;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
loadDynamicItems(itemsWithComponents);
|
loadDynamicItems(currentItems);
|
||||||
window.dispatchEvent(
|
window.dispatchEvent(
|
||||||
new CustomEvent("dynamic-items-updated", {
|
new CustomEvent("dynamic-items-updated", {
|
||||||
detail: {
|
detail: {
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import type { IndexItem, Job } from "../types";
|
import type { Job, IndexItem } from "../types";
|
||||||
import { htmlToPlainText } from "../utils";
|
import { htmlToPlainText } from "../utils";
|
||||||
import { fetchMessageContent } from "./messages";
|
import { fetchMessageContent } from "./messages";
|
||||||
import { delay } from "@/seqta/utils/delay";
|
import { delay } from "@/seqta/utils/delay";
|
||||||
@@ -372,34 +372,23 @@ export const notificationsJob: Job = {
|
|||||||
if (items.length > 0) {
|
if (items.length > 0) {
|
||||||
try {
|
try {
|
||||||
const currentItems = await loadAllStoredItems();
|
const currentItems = await loadAllStoredItems();
|
||||||
// Create new objects to avoid XrayWrapper issues in Firefox
|
currentItems.forEach((item) => {
|
||||||
const itemsWithComponents = currentItems.map((item) => {
|
|
||||||
try {
|
|
||||||
const jobDef =
|
const jobDef =
|
||||||
jobs[item.category] ||
|
jobs[item.category] ||
|
||||||
Object.values(jobs).find((j) => j.id === item.category) ||
|
Object.values(jobs).find((j) => j.id === item.category) ||
|
||||||
jobs[item.renderComponentId];
|
jobs[item.renderComponentId];
|
||||||
let renderComponent = item.renderComponent;
|
|
||||||
if (jobDef) {
|
if (jobDef) {
|
||||||
renderComponent = renderComponentMap[jobDef.renderComponentId] || renderComponent;
|
const renderComponent =
|
||||||
|
renderComponentMap[jobDef.renderComponentId];
|
||||||
|
if (renderComponent) {
|
||||||
|
item.renderComponent = renderComponent;
|
||||||
|
}
|
||||||
} else if (renderComponentMap[item.renderComponentId]) {
|
} else if (renderComponentMap[item.renderComponentId]) {
|
||||||
renderComponent = renderComponentMap[item.renderComponentId];
|
item.renderComponent =
|
||||||
}
|
renderComponentMap[item.renderComponentId];
|
||||||
// Deep clone to avoid Firefox XrayWrapper issues with nested objects like metadata
|
|
||||||
try {
|
|
||||||
const cloned = JSON.parse(JSON.stringify(item));
|
|
||||||
cloned.renderComponent = renderComponent;
|
|
||||||
return cloned;
|
|
||||||
} catch (e) {
|
|
||||||
// Fallback to shallow copy if deep clone fails
|
|
||||||
return { ...item, renderComponent };
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
// Fallback: return item as-is if modification fails (Firefox XrayWrapper)
|
|
||||||
return item;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
loadDynamicItems(itemsWithComponents);
|
loadDynamicItems(currentItems);
|
||||||
window.dispatchEvent(
|
window.dispatchEvent(
|
||||||
new CustomEvent("dynamic-items-updated", {
|
new CustomEvent("dynamic-items-updated", {
|
||||||
detail: {
|
detail: {
|
||||||
|
|||||||
@@ -3,24 +3,9 @@ import type { IndexItem } from "../types";
|
|||||||
|
|
||||||
let vectorIndex: EmbeddingIndex | null = null;
|
let vectorIndex: EmbeddingIndex | null = null;
|
||||||
let isInitialized = false;
|
let isInitialized = false;
|
||||||
let initializationFailed = false;
|
|
||||||
let currentAbortController: AbortController | null = null;
|
let currentAbortController: AbortController | null = null;
|
||||||
let loadedItemIds = new Set<string>();
|
let loadedItemIds = new Set<string>();
|
||||||
|
|
||||||
// Detect Firefox in worker context
|
|
||||||
function isFirefoxWorker(): boolean {
|
|
||||||
try {
|
|
||||||
// Check for Firefox-specific APIs or user agent
|
|
||||||
if (typeof navigator !== "undefined") {
|
|
||||||
return navigator.userAgent.toLowerCase().includes("firefox");
|
|
||||||
}
|
|
||||||
// In worker context, check for Firefox-specific behavior
|
|
||||||
return false;
|
|
||||||
} catch {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let streamingSession: {
|
let streamingSession: {
|
||||||
isActive: boolean;
|
isActive: boolean;
|
||||||
totalExpected: number;
|
totalExpected: number;
|
||||||
@@ -36,16 +21,6 @@ async function initWorker() {
|
|||||||
console.debug("Vector worker already initialized.");
|
console.debug("Vector worker already initialized.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Skip initialization in Firefox
|
|
||||||
if (isFirefoxWorker()) {
|
|
||||||
console.debug("[Vector Worker] Vector search not supported in Firefox - skipping initialization");
|
|
||||||
isInitialized = true;
|
|
||||||
initializationFailed = true;
|
|
||||||
vectorIndex = null;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.debug("Initializing vector worker...");
|
console.debug("Initializing vector worker...");
|
||||||
try {
|
try {
|
||||||
await initializeModel();
|
await initializeModel();
|
||||||
@@ -73,9 +48,8 @@ async function initWorker() {
|
|||||||
isInitialized = true;
|
isInitialized = true;
|
||||||
console.debug("Vector worker initialized successfully.");
|
console.debug("Vector worker initialized successfully.");
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.warn("[Vector Worker] Failed to initialize vector worker (will use text search only):", e);
|
console.error("Failed to initialize vector worker:", e);
|
||||||
isInitialized = true;
|
isInitialized = true;
|
||||||
initializationFailed = true;
|
|
||||||
vectorIndex = null;
|
vectorIndex = null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -106,29 +80,18 @@ async function startStreamingSession(
|
|||||||
totalExpected: number,
|
totalExpected: number,
|
||||||
batchSize: number = 5,
|
batchSize: number = 5,
|
||||||
) {
|
) {
|
||||||
if (initializationFailed || isFirefoxWorker()) {
|
|
||||||
self.postMessage({
|
|
||||||
type: "progress",
|
|
||||||
data: {
|
|
||||||
status: "complete",
|
|
||||||
message: "Vector search not available in Firefox - using text search only",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!vectorIndex) {
|
if (!vectorIndex) {
|
||||||
console.warn(
|
console.warn(
|
||||||
"Streaming requested but vector index not ready. Attempting init.",
|
"Streaming requested but vector index not ready. Attempting init.",
|
||||||
);
|
);
|
||||||
await initWorker();
|
await initWorker();
|
||||||
if (!vectorIndex || initializationFailed) {
|
if (!vectorIndex) {
|
||||||
self.postMessage({
|
self.postMessage({
|
||||||
type: "progress",
|
type: "progress",
|
||||||
data: {
|
data: {
|
||||||
status: "complete",
|
status: "error",
|
||||||
message:
|
message:
|
||||||
"Vector index not available - using text search only",
|
"Vector index not available for streaming after init attempt.",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
@@ -343,29 +306,18 @@ async function endStreamingSession() {
|
|||||||
async function processItems(items: IndexItem[], signal: AbortSignal) {
|
async function processItems(items: IndexItem[], signal: AbortSignal) {
|
||||||
console.debug("Worker received process request.");
|
console.debug("Worker received process request.");
|
||||||
|
|
||||||
if (initializationFailed || isFirefoxWorker()) {
|
|
||||||
self.postMessage({
|
|
||||||
type: "progress",
|
|
||||||
data: {
|
|
||||||
status: "complete",
|
|
||||||
message: "Vector search not available - using text search only",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!vectorIndex) {
|
if (!vectorIndex) {
|
||||||
console.warn(
|
console.warn(
|
||||||
"Processing requested but vector index not ready. Attempting init.",
|
"Processing requested but vector index not ready. Attempting init.",
|
||||||
);
|
);
|
||||||
await initWorker();
|
await initWorker();
|
||||||
if (!vectorIndex || initializationFailed) {
|
if (!vectorIndex) {
|
||||||
self.postMessage({
|
self.postMessage({
|
||||||
type: "progress",
|
type: "progress",
|
||||||
data: {
|
data: {
|
||||||
status: "complete",
|
status: "error",
|
||||||
message:
|
message:
|
||||||
"Vector index not available - using text search only",
|
"Vector index not available for processing after init attempt.",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import { refreshVectorCache } from "../../search/vector/vectorSearch";
|
import { refreshVectorCache } from "../../search/vector/vectorSearch";
|
||||||
import type { IndexItem } from "../types";
|
import type { IndexItem } from "../types";
|
||||||
import { isVectorSearchSupported } from "../../utils/browserDetection";
|
|
||||||
import vectorWorker from "./vectorWorker.ts?inlineWorker";
|
import vectorWorker from "./vectorWorker.ts?inlineWorker";
|
||||||
|
|
||||||
export type ProgressCallback = (data: {
|
export type ProgressCallback = (data: {
|
||||||
@@ -43,13 +42,6 @@ export class VectorWorkerManager {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private async initWorker(): Promise<void> {
|
private async initWorker(): Promise<void> {
|
||||||
// Skip initialization if vector search is not supported (e.g., Firefox)
|
|
||||||
if (!isVectorSearchSupported()) {
|
|
||||||
console.debug("[VectorWorkerManager] Vector search not supported - skipping worker initialization");
|
|
||||||
this.isInitialized = false;
|
|
||||||
return Promise.resolve();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.isInitialized) return Promise.resolve();
|
if (this.isInitialized) return Promise.resolve();
|
||||||
if (this.readyPromise) return this.readyPromise;
|
if (this.readyPromise) return this.readyPromise;
|
||||||
|
|
||||||
@@ -242,17 +234,6 @@ export class VectorWorkerManager {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async processItems(items: IndexItem[], onProgress?: ProgressCallback) {
|
async processItems(items: IndexItem[], onProgress?: ProgressCallback) {
|
||||||
// Skip if vector search is not supported
|
|
||||||
if (!isVectorSearchSupported()) {
|
|
||||||
if (onProgress) {
|
|
||||||
onProgress({
|
|
||||||
status: "complete",
|
|
||||||
message: "Vector search not available - using text search only"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Only initialize worker if we actually have items to process
|
// Only initialize worker if we actually have items to process
|
||||||
if (items.length === 0) {
|
if (items.length === 0) {
|
||||||
if (onProgress) {
|
if (onProgress) {
|
||||||
@@ -317,18 +298,6 @@ export class VectorWorkerManager {
|
|||||||
batchSize: number = 10,
|
batchSize: number = 10,
|
||||||
jobId?: string,
|
jobId?: string,
|
||||||
): Promise<void> {
|
): Promise<void> {
|
||||||
// Skip if vector search is not supported
|
|
||||||
if (!isVectorSearchSupported()) {
|
|
||||||
console.debug("[VectorWorker] Vector search not supported - skipping streaming session");
|
|
||||||
if (onProgress) {
|
|
||||||
onProgress({
|
|
||||||
status: "complete",
|
|
||||||
message: "Vector search not available - using text search only",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Only initialize if we expect items to process
|
// Only initialize if we expect items to process
|
||||||
if (totalExpectedItems === 0) {
|
if (totalExpectedItems === 0) {
|
||||||
console.debug("[VectorWorker] No items expected, not starting streaming session");
|
console.debug("[VectorWorker] No items expected, not starting streaming session");
|
||||||
|
|||||||
@@ -1,280 +0,0 @@
|
|||||||
import type { IndexItem } from "../indexing/types";
|
|
||||||
import type { CombinedResult } from "../core/types";
|
|
||||||
import { searchVectors, type VectorSearchResult } from "./vector/vectorSearch";
|
|
||||||
import { jobs } from "../indexing/jobs";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Hybrid Search Implementation
|
|
||||||
*
|
|
||||||
* Flow:
|
|
||||||
* 1. BM25 (Fuse.js) gets top N results fast
|
|
||||||
* 2. Vector search reranks by semantic similarity
|
|
||||||
* 3. Apply optional boosting (recency, popularity, tags)
|
|
||||||
*/
|
|
||||||
|
|
||||||
export interface HybridSearchOptions {
|
|
||||||
/** Maximum number of BM25 results to retrieve before reranking */
|
|
||||||
bm25TopK?: number;
|
|
||||||
/** Maximum number of final results to return */
|
|
||||||
finalLimit?: number;
|
|
||||||
/** Whether to apply recency boost */
|
|
||||||
recencyBoost?: boolean;
|
|
||||||
/** Weight for BM25 scores (0-1) */
|
|
||||||
bm25Weight?: number;
|
|
||||||
/** Weight for vector similarity scores (0-1) */
|
|
||||||
vectorWeight?: number;
|
|
||||||
/** Weight for recency boost */
|
|
||||||
recencyWeight?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
const DEFAULT_OPTIONS: Required<HybridSearchOptions> = {
|
|
||||||
bm25TopK: 50, // Get top 50 from BM25, then rerank
|
|
||||||
finalLimit: 10,
|
|
||||||
recencyBoost: true,
|
|
||||||
bm25Weight: 0.4, // 40% BM25, 60% vector
|
|
||||||
vectorWeight: 0.6,
|
|
||||||
recencyWeight: 0.1,
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Normalizes a score to 0-1 range
|
|
||||||
*/
|
|
||||||
function normalizeScore(score: number, min: number, max: number): number {
|
|
||||||
if (max === min) return 0.5;
|
|
||||||
return Math.max(0, Math.min(1, (score - min) / (max - min)));
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Calculates recency boost based on item age
|
|
||||||
*/
|
|
||||||
function calculateRecencyBoost(item: IndexItem, now: number): number {
|
|
||||||
const ageInDays = (now - item.dateAdded) / (1000 * 60 * 60 * 24);
|
|
||||||
// Exponential decay: newer items get higher boost
|
|
||||||
// Items from today get boost of 1, items from 30 days ago get ~0.03
|
|
||||||
return 1 / (1 + ageInDays / 7); // Half-life of 7 days
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Calculates popularity boost (can be extended with click tracking, etc.)
|
|
||||||
*/
|
|
||||||
function calculatePopularityBoost(item: IndexItem): number {
|
|
||||||
// For now, boost based on category and metadata
|
|
||||||
let boost = 0;
|
|
||||||
|
|
||||||
// Boost assignments/assessments
|
|
||||||
if (item.category === "assignments") {
|
|
||||||
boost += 0.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Boost upcoming items
|
|
||||||
if (item.metadata?.isUpcoming) {
|
|
||||||
boost += 0.15;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Boost items with subject codes (more structured)
|
|
||||||
if (item.metadata?.subjectCode) {
|
|
||||||
boost += 0.05;
|
|
||||||
}
|
|
||||||
|
|
||||||
return Math.min(boost, 0.3); // Cap at 0.3
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Reranks BM25 results using vector search
|
|
||||||
*/
|
|
||||||
export async function hybridSearch(
|
|
||||||
bm25Results: CombinedResult[],
|
|
||||||
query: string,
|
|
||||||
options: HybridSearchOptions = {},
|
|
||||||
): Promise<CombinedResult[]> {
|
|
||||||
const opts = { ...DEFAULT_OPTIONS, ...options };
|
|
||||||
const trimmedQuery = query.trim().toLowerCase();
|
|
||||||
|
|
||||||
// If no BM25 results, return empty
|
|
||||||
if (bm25Results.length === 0) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Limit BM25 results to top K
|
|
||||||
const topBm25Results = bm25Results.slice(0, opts.bm25TopK);
|
|
||||||
|
|
||||||
// Get vector search results for reranking
|
|
||||||
// We'll search the full index and then filter to our BM25 results
|
|
||||||
let vectorResults: VectorSearchResult[] = [];
|
|
||||||
|
|
||||||
if (trimmedQuery.length > 2) {
|
|
||||||
try {
|
|
||||||
// Get more vector results than BM25 results to ensure coverage
|
|
||||||
// This allows us to find semantic matches that BM25 might have missed
|
|
||||||
const vectorSearchResults = await searchVectors(trimmedQuery, opts.bm25TopK * 2);
|
|
||||||
|
|
||||||
// Create a map of item ID to vector similarity
|
|
||||||
const vectorMap = new Map<string, number>();
|
|
||||||
vectorSearchResults.forEach(v => {
|
|
||||||
// Use the highest similarity if item appears multiple times
|
|
||||||
const existing = vectorMap.get(v.object.id);
|
|
||||||
if (!existing || v.similarity > existing) {
|
|
||||||
vectorMap.set(v.object.id, v.similarity);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Now rerank BM25 results with vector scores
|
|
||||||
const now = Date.now();
|
|
||||||
|
|
||||||
const rerankedResults = topBm25Results.map(result => {
|
|
||||||
const item = result.item;
|
|
||||||
|
|
||||||
// Normalize BM25 score to 0-1
|
|
||||||
// Fuse.js scores: lower is better (0 = perfect match)
|
|
||||||
// We need to invert: higher score = better match
|
|
||||||
// Result.score is typically 0-100, where higher = better
|
|
||||||
// So we normalize it to 0-1
|
|
||||||
const normalizedBm25Score = Math.max(0, Math.min(1, result.score / 100));
|
|
||||||
|
|
||||||
// Get vector similarity (0-1, already normalized)
|
|
||||||
// If item wasn't in vector results, use a default low score
|
|
||||||
const vectorSimilarity = vectorMap.get(item.id) || 0.3; // Default to 0.3 if not found
|
|
||||||
|
|
||||||
// Calculate recency boost (0-1 range)
|
|
||||||
const recencyBoost = opts.recencyBoost
|
|
||||||
? calculateRecencyBoost(item, now) * opts.recencyWeight
|
|
||||||
: 0;
|
|
||||||
|
|
||||||
// Calculate popularity boost (0-1 range)
|
|
||||||
const popularityBoost = calculatePopularityBoost(item);
|
|
||||||
|
|
||||||
// Apply job-specific boost if available
|
|
||||||
const job = jobs[item.category];
|
|
||||||
let jobBoost = 0;
|
|
||||||
if (job && typeof job.boostCriteria === 'function') {
|
|
||||||
const boost = job.boostCriteria(item, trimmedQuery);
|
|
||||||
if (boost) {
|
|
||||||
jobBoost = boost / 100; // Normalize boost to 0-1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Combine scores using weighted average
|
|
||||||
// BM25 and vector are weighted, boosts are additive
|
|
||||||
const hybridScore =
|
|
||||||
(normalizedBm25Score * opts.bm25Weight) +
|
|
||||||
(vectorSimilarity * opts.vectorWeight) +
|
|
||||||
recencyBoost +
|
|
||||||
popularityBoost +
|
|
||||||
jobBoost;
|
|
||||||
|
|
||||||
return {
|
|
||||||
...result,
|
|
||||||
score: hybridScore * 100, // Scale back to 0-100 for consistency
|
|
||||||
// Store component scores for debugging (optional, can be removed in production)
|
|
||||||
_hybridScores: {
|
|
||||||
bm25: normalizedBm25Score,
|
|
||||||
vector: vectorSimilarity,
|
|
||||||
recency: recencyBoost,
|
|
||||||
popularity: popularityBoost,
|
|
||||||
jobBoost: jobBoost,
|
|
||||||
final: hybridScore,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
// Sort by hybrid score descending
|
|
||||||
rerankedResults.sort((a, b) => b.score - a.score);
|
|
||||||
|
|
||||||
// Return top results
|
|
||||||
return rerankedResults.slice(0, opts.finalLimit);
|
|
||||||
|
|
||||||
} catch (e) {
|
|
||||||
console.warn("[Hybrid Search] Vector reranking failed, using BM25 only:", e);
|
|
||||||
// Fallback to BM25 only
|
|
||||||
return topBm25Results.slice(0, opts.finalLimit);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// If query is too short for vector search, just return BM25 results
|
|
||||||
return topBm25Results.slice(0, opts.finalLimit);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Enhanced hybrid search that also includes vector-only results not found by BM25
|
|
||||||
*/
|
|
||||||
export async function hybridSearchWithExpansion(
|
|
||||||
bm25Results: CombinedResult[],
|
|
||||||
query: string,
|
|
||||||
allItems: IndexItem[],
|
|
||||||
options: HybridSearchOptions = {},
|
|
||||||
): Promise<CombinedResult[]> {
|
|
||||||
const opts = { ...DEFAULT_OPTIONS, ...options };
|
|
||||||
const trimmedQuery = query.trim().toLowerCase();
|
|
||||||
|
|
||||||
// First, rerank BM25 results
|
|
||||||
const rerankedBm25 = await hybridSearch(bm25Results, query, options);
|
|
||||||
|
|
||||||
// If query is too short, skip vector expansion
|
|
||||||
if (trimmedQuery.length <= 2) {
|
|
||||||
return rerankedBm25;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get vector search results
|
|
||||||
let vectorResults: VectorSearchResult[] = [];
|
|
||||||
try {
|
|
||||||
vectorResults = await searchVectors(trimmedQuery, opts.bm25TopK);
|
|
||||||
} catch (e) {
|
|
||||||
console.warn("[Hybrid Search] Vector search failed:", e);
|
|
||||||
return rerankedBm25;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Find vector results that weren't in BM25 results
|
|
||||||
const bm25Ids = new Set(bm25Results.map(r => r.item.id));
|
|
||||||
const vectorOnlyResults: CombinedResult[] = [];
|
|
||||||
|
|
||||||
const now = Date.now();
|
|
||||||
|
|
||||||
vectorResults.forEach(v => {
|
|
||||||
if (!bm25Ids.has(v.object.id)) {
|
|
||||||
// This is a semantic match that BM25 missed
|
|
||||||
const item = v.object;
|
|
||||||
|
|
||||||
// Calculate boosts
|
|
||||||
const recencyBoost = opts.recencyBoost
|
|
||||||
? calculateRecencyBoost(item, now) * opts.recencyWeight
|
|
||||||
: 0;
|
|
||||||
const popularityBoost = calculatePopularityBoost(item);
|
|
||||||
|
|
||||||
// Vector-only results get lower base score but high vector similarity
|
|
||||||
const vectorScore = v.similarity * opts.vectorWeight + recencyBoost + popularityBoost;
|
|
||||||
|
|
||||||
// Apply job-specific boost if available
|
|
||||||
const job = jobs[item.category];
|
|
||||||
let jobBoost = 0;
|
|
||||||
if (job && typeof job.boostCriteria === 'function') {
|
|
||||||
const boost = job.boostCriteria(item, trimmedQuery);
|
|
||||||
if (boost) {
|
|
||||||
jobBoost = boost / 100; // Normalize boost
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
vectorOnlyResults.push({
|
|
||||||
id: item.id,
|
|
||||||
type: "dynamic" as const,
|
|
||||||
score: (vectorScore + jobBoost) * 100,
|
|
||||||
item,
|
|
||||||
_hybridScores: {
|
|
||||||
bm25: 0,
|
|
||||||
vector: v.similarity,
|
|
||||||
recency: recencyBoost,
|
|
||||||
popularity: popularityBoost,
|
|
||||||
final: vectorScore + jobBoost,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Combine reranked BM25 results with vector-only results
|
|
||||||
const allResults = [...rerankedBm25, ...vectorOnlyResults];
|
|
||||||
|
|
||||||
// Sort by score and return top results
|
|
||||||
allResults.sort((a, b) => b.score - a.score);
|
|
||||||
|
|
||||||
return allResults.slice(0, opts.finalLimit);
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -6,79 +6,32 @@ import type { IndexItem } from "../indexing/types";
|
|||||||
import { searchVectors } from "./vector/vectorSearch";
|
import { searchVectors } from "./vector/vectorSearch";
|
||||||
import type { VectorSearchResult } from "./vector/vectorTypes";
|
import type { VectorSearchResult } from "./vector/vectorTypes";
|
||||||
import { jobs } from "../indexing/jobs";
|
import { jobs } from "../indexing/jobs";
|
||||||
import { hybridSearchWithExpansion } from "./hybridSearch";
|
|
||||||
|
|
||||||
// Search result cache for better performance
|
|
||||||
const searchCache = new Map<string, { results: CombinedResult[]; timestamp: number }>();
|
|
||||||
const CACHE_TTL = 1000 * 60 * 5; // 5 minutes
|
|
||||||
const MAX_CACHE_SIZE = 100;
|
|
||||||
|
|
||||||
function getCachedResults(query: string): CombinedResult[] | null {
|
|
||||||
const cached = searchCache.get(query);
|
|
||||||
if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
|
|
||||||
return cached.results;
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function setCachedResults(query: string, results: CombinedResult[]) {
|
|
||||||
// Limit cache size
|
|
||||||
if (searchCache.size >= MAX_CACHE_SIZE) {
|
|
||||||
const firstKey = searchCache.keys().next().value;
|
|
||||||
searchCache.delete(firstKey);
|
|
||||||
}
|
|
||||||
searchCache.set(query, { results, timestamp: Date.now() });
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Clears the search result cache
|
|
||||||
*/
|
|
||||||
export function clearSearchCache(): void {
|
|
||||||
searchCache.clear();
|
|
||||||
console.debug("[Search] Search result cache cleared");
|
|
||||||
}
|
|
||||||
|
|
||||||
// Listen for cache clear events (e.g., on extension update)
|
|
||||||
if (typeof window !== 'undefined') {
|
|
||||||
window.addEventListener('betterseqta-clear-search-cache', () => {
|
|
||||||
clearSearchCache();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function createSearchIndexes() {
|
export function createSearchIndexes() {
|
||||||
const commands = getStaticCommands();
|
const commands = getStaticCommands();
|
||||||
const dynamicItems = getDynamicItems();
|
const dynamicItems = getDynamicItems();
|
||||||
|
|
||||||
// Optimized command search options
|
|
||||||
const commandOptions = {
|
const commandOptions = {
|
||||||
keys: ["text", "category", "keywords"],
|
keys: ["text", "category", "keywords"],
|
||||||
includeScore: true,
|
includeScore: true,
|
||||||
includeMatches: true,
|
includeMatches: true,
|
||||||
threshold: 0.35, // Slightly more permissive for better recall
|
threshold: 0.4,
|
||||||
minMatchCharLength: 2,
|
minMatchCharLength: 2,
|
||||||
useExtendedSearch: false,
|
useExtendedSearch: false,
|
||||||
ignoreLocation: false,
|
|
||||||
findAllMatches: false, // Performance optimization
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// Optimized dynamic content search options
|
|
||||||
const dynamicOptions = {
|
const dynamicOptions = {
|
||||||
keys: [
|
keys: [
|
||||||
{ name: "text", weight: 3 }, // Increased weight for title matches
|
{ name: "text", weight: 2 },
|
||||||
{ name: "content", weight: 1 },
|
{ name: "content", weight: 1 },
|
||||||
{ name: "category", weight: 0.5 }, // Lower weight for category
|
{ name: "category", weight: 1 },
|
||||||
{ name: "metadata.subjectName", weight: 1.5 }, // Boost subject name matches
|
|
||||||
{ name: "metadata.subjectCode", weight: 1.5 }, // Boost subject code matches
|
|
||||||
],
|
],
|
||||||
includeScore: true,
|
includeScore: true,
|
||||||
includeMatches: true,
|
includeMatches: true,
|
||||||
threshold: 0.5, // More permissive for better partial word matching (increased from 0.4)
|
threshold: 0.4,
|
||||||
minMatchCharLength: 2, // Minimum 2 characters for Fuse.js matches (substring fallback handles shorter queries)
|
minMatchCharLength: 2,
|
||||||
distance: 100, // Increased to allow matches across longer strings
|
distance: 100,
|
||||||
useExtendedSearch: true,
|
useExtendedSearch: true,
|
||||||
ignoreLocation: true, // Allow matches anywhere in the string for better partial word matching
|
|
||||||
findAllMatches: true, // Enable to find all matches for better partial word support
|
|
||||||
shouldSort: true,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@@ -152,64 +105,18 @@ export function searchDynamicItems(
|
|||||||
}
|
}
|
||||||
|
|
||||||
const now = Date.now();
|
const now = Date.now();
|
||||||
const queryLower = query.toLowerCase();
|
const searchResults = dynamicContentFuse.search(query, { limit });
|
||||||
const queryTrimmed = query.trim();
|
|
||||||
|
|
||||||
// For short queries (3 chars or less), use a more permissive approach
|
return searchResults.map((result: FuseResult<IndexItem>) => {
|
||||||
const isShortQuery = queryTrimmed.length <= 3;
|
|
||||||
const searchLimit = Math.min(limit * 3, 50);
|
|
||||||
|
|
||||||
// First, try Fuse.js search
|
|
||||||
const searchResults = dynamicContentFuse.search(query, { limit: searchLimit });
|
|
||||||
|
|
||||||
// For short queries, always do a simple substring match to supplement Fuse.js results
|
|
||||||
// This ensures we catch partial word matches like "SAT" in "SAT 1: Differential Calculus"
|
|
||||||
let additionalMatches: IndexItem[] = [];
|
|
||||||
if (isShortQuery) {
|
|
||||||
// Always do substring search for short queries to catch partial word matches
|
|
||||||
for (const item of dynamicIdToItemMap.values()) {
|
|
||||||
const textLower = item.text.toLowerCase();
|
|
||||||
const contentLower = (item.content || '').toLowerCase();
|
|
||||||
const subjectNameLower = (item.metadata?.subjectName || '').toLowerCase();
|
|
||||||
const subjectCodeLower = (item.metadata?.subjectCode || '').toLowerCase();
|
|
||||||
|
|
||||||
// Check if query appears anywhere in the text, content, or metadata
|
|
||||||
if (textLower.includes(queryLower) ||
|
|
||||||
contentLower.includes(queryLower) ||
|
|
||||||
subjectNameLower.includes(queryLower) ||
|
|
||||||
subjectCodeLower.includes(queryLower)) {
|
|
||||||
// Only add if not already in Fuse.js results
|
|
||||||
if (!searchResults.find(r => r.item.id === item.id)) {
|
|
||||||
additionalMatches.push(item);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const results = searchResults.map((result: FuseResult<IndexItem>) => {
|
|
||||||
const item = result.item;
|
const item = result.item;
|
||||||
const fuseScore = 10 * (1 - (result.score || 0.5));
|
const fuseScore = 10 * (1 - (result.score || 0.5));
|
||||||
|
|
||||||
let score = fuseScore;
|
let score = fuseScore;
|
||||||
|
|
||||||
// Recency boost
|
|
||||||
const ageInDays = (now - item.dateAdded) / (1000 * 60 * 60 * 24);
|
const ageInDays = (now - item.dateAdded) / (1000 * 60 * 60 * 24);
|
||||||
const recencyBoost = sortByRecent ? 1 / (ageInDays + 1) : 0;
|
const recencyBoost = sortByRecent ? 1 / (ageInDays + 1) : 0;
|
||||||
score += recencyBoost;
|
score += recencyBoost;
|
||||||
|
|
||||||
// Boost for exact text matches (especially at the start)
|
|
||||||
const textLower = item.text.toLowerCase();
|
|
||||||
if (textLower.startsWith(queryLower)) {
|
|
||||||
score += 5; // Strong boost for prefix matches
|
|
||||||
} else if (textLower.includes(queryLower)) {
|
|
||||||
score += 2; // Boost for substring matches
|
|
||||||
}
|
|
||||||
|
|
||||||
// Boost for category matches
|
|
||||||
if (item.category.toLowerCase().includes(queryLower)) {
|
|
||||||
score += 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
id: item.id,
|
id: item.id,
|
||||||
type: "dynamic" as const,
|
type: "dynamic" as const,
|
||||||
@@ -218,124 +125,60 @@ export function searchDynamicItems(
|
|||||||
matches: result.matches,
|
matches: result.matches,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
// Add additional matches from simple substring search
|
|
||||||
additionalMatches.forEach((item) => {
|
|
||||||
// Check if already in results
|
|
||||||
if (!results.find(r => r.id === item.id)) {
|
|
||||||
const textLower = item.text.toLowerCase();
|
|
||||||
let score = 5; // Base score for substring matches
|
|
||||||
|
|
||||||
// Boost for prefix matches
|
|
||||||
if (textLower.startsWith(queryLower)) {
|
|
||||||
score += 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Recency boost
|
|
||||||
const ageInDays = (now - item.dateAdded) / (1000 * 60 * 60 * 24);
|
|
||||||
const recencyBoost = sortByRecent ? 1 / (ageInDays + 1) : 0;
|
|
||||||
score += recencyBoost;
|
|
||||||
|
|
||||||
results.push({
|
|
||||||
id: item.id,
|
|
||||||
type: "dynamic" as const,
|
|
||||||
score,
|
|
||||||
item,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Sort by score and return top results
|
|
||||||
return results.sort((a, b) => b.score - a.score).slice(0, limit);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function performSearch(
|
export async function performSearch(
|
||||||
query: string,
|
query: string,
|
||||||
commandsFuse: Fuse<StaticCommandItem>,
|
commandsFuse: Fuse<StaticCommandItem>,
|
||||||
commandIdToItemMap: Map<string, StaticCommandItem>,
|
commandIdToItemMap: Map<string, StaticCommandItem>,
|
||||||
dynamicContentFuse?: Fuse<IndexItem>,
|
|
||||||
dynamicIdToItemMap?: Map<string, IndexItem>,
|
|
||||||
sortByRecent: boolean = true,
|
|
||||||
): Promise<CombinedResult[]> {
|
): Promise<CombinedResult[]> {
|
||||||
const trimmedQuery = query.trim().toLowerCase();
|
// Get all results first
|
||||||
|
|
||||||
// Check cache first
|
|
||||||
if (trimmedQuery.length > 2) {
|
|
||||||
const cached = getCachedResults(trimmedQuery);
|
|
||||||
if (cached) {
|
|
||||||
return cached;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Step 1: Get command results (these don't need hybrid search)
|
|
||||||
const commandResults = searchCommands(
|
const commandResults = searchCommands(
|
||||||
commandsFuse,
|
commandsFuse,
|
||||||
trimmedQuery,
|
query,
|
||||||
commandIdToItemMap,
|
commandIdToItemMap,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Step 2: Get BM25 results for dynamic items
|
// Get vector results in parallel
|
||||||
let dynamicResults: CombinedResult[] = [];
|
let vectorResults: VectorSearchResult[] = [];
|
||||||
if (dynamicContentFuse && dynamicIdToItemMap) {
|
|
||||||
// Get BM25 results first (fast text-based search)
|
|
||||||
const bm25Results = searchDynamicItems(
|
|
||||||
dynamicContentFuse,
|
|
||||||
trimmedQuery,
|
|
||||||
dynamicIdToItemMap,
|
|
||||||
50, // Get top 50 for reranking
|
|
||||||
sortByRecent,
|
|
||||||
);
|
|
||||||
|
|
||||||
// Step 3: Apply hybrid search (BM25 + Vector reranking + boosting)
|
|
||||||
if (trimmedQuery.length > 2 && bm25Results.length > 0) {
|
|
||||||
try {
|
try {
|
||||||
// Get all items for expansion
|
vectorResults = await searchVectors(query);
|
||||||
const allItems = Array.from(dynamicIdToItemMap.values());
|
} catch (e) {}
|
||||||
|
|
||||||
// Apply hybrid search with expansion
|
// Create a map to store our final results, using ID as key to avoid duplicates
|
||||||
dynamicResults = await hybridSearchWithExpansion(
|
const resultMap = new Map<string, CombinedResult>();
|
||||||
bm25Results,
|
|
||||||
trimmedQuery,
|
|
||||||
allItems,
|
|
||||||
{
|
|
||||||
bm25TopK: 50,
|
|
||||||
finalLimit: 20, // Return top 20 after reranking
|
|
||||||
recencyBoost: sortByRecent,
|
|
||||||
bm25Weight: 0.4, // 40% BM25, 60% vector
|
|
||||||
vectorWeight: 0.6,
|
|
||||||
recencyWeight: 0.1,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
} catch (e) {
|
|
||||||
console.warn("[Search] Hybrid search failed, using BM25 only:", e);
|
|
||||||
// Fallback to BM25 only
|
|
||||||
dynamicResults = bm25Results.slice(0, 20);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// For very short queries or no BM25 results, use BM25 only
|
|
||||||
dynamicResults = bm25Results.slice(0, 20);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Step 4: Combine command and dynamic results
|
// Add command results first (they keep their original scores)
|
||||||
const allResults = [...commandResults, ...dynamicResults];
|
commandResults.forEach((r) => resultMap.set(r.id, r));
|
||||||
|
|
||||||
// Sort by score (commands typically have higher priority)
|
// Process dynamic results and vector results together
|
||||||
allResults.sort((a, b) => {
|
const seenIds = new Set<string>();
|
||||||
// Commands always come first if scores are similar
|
|
||||||
if (a.type === "command" && b.type === "dynamic") {
|
vectorResults.forEach((v) => {
|
||||||
return b.score - a.score - 10; // Commands get +10 boost
|
const id = v.object.id;
|
||||||
|
|
||||||
|
if (!seenIds.has(id)) {
|
||||||
|
// This is a semantic match that Fuse missed - add it with the vector similarity as score
|
||||||
|
let score = v.similarity * 0.5; // High base score for semantic matches
|
||||||
|
const job = jobs[v.object.category];
|
||||||
|
if (job && typeof job.boostCriteria === 'function') {
|
||||||
|
const boost = job.boostCriteria(v.object, query);
|
||||||
|
if (boost) {
|
||||||
|
score += boost;
|
||||||
}
|
}
|
||||||
if (a.type === "dynamic" && b.type === "command") {
|
|
||||||
return b.score - a.score + 10; // Commands get +10 boost
|
|
||||||
}
|
}
|
||||||
return b.score - a.score;
|
resultMap.set(id, {
|
||||||
|
id,
|
||||||
|
type: "dynamic" as const,
|
||||||
|
score,
|
||||||
|
item: v.object,
|
||||||
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Cache results for queries longer than 2 chars
|
// Convert to array and sort by score
|
||||||
if (trimmedQuery.length > 2) {
|
const results = Array.from(resultMap.values());
|
||||||
setCachedResults(trimmedQuery, allResults);
|
results.sort((a, b) => b.score - a.score);
|
||||||
}
|
|
||||||
|
|
||||||
return allResults;
|
return results;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,36 +1,16 @@
|
|||||||
import { EmbeddingIndex, getEmbedding, initializeModel } from "embeddia";
|
import { EmbeddingIndex, getEmbedding, initializeModel } from "embeddia";
|
||||||
import type { IndexItem } from "../../indexing/types";
|
import type { IndexItem } from "../../indexing/types";
|
||||||
import type { SearchResult } from "embeddia";
|
import type { SearchResult } from "embeddia";
|
||||||
import { isVectorSearchSupported } from "../../utils/browserDetection";
|
|
||||||
|
|
||||||
let vectorIndex: EmbeddingIndex | null = null;
|
let vectorIndex: EmbeddingIndex | null = null;
|
||||||
let initializationAttempted = false;
|
|
||||||
let initializationFailed = false;
|
|
||||||
|
|
||||||
export async function initVectorSearch() {
|
export async function initVectorSearch() {
|
||||||
// Skip initialization if already attempted and failed, or if not supported
|
|
||||||
if (initializationFailed || !isVectorSearchSupported()) {
|
|
||||||
if (!isVectorSearchSupported()) {
|
|
||||||
console.debug("[Vector Search] Vector search not supported in Firefox - using text search only");
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (initializationAttempted) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
initializationAttempted = true;
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await initializeModel();
|
await initializeModel();
|
||||||
vectorIndex = new EmbeddingIndex([]);
|
vectorIndex = new EmbeddingIndex([]);
|
||||||
vectorIndex.preloadIndexedDB();
|
vectorIndex.preloadIndexedDB();
|
||||||
console.debug("[Vector Search] Initialized successfully");
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.warn("[Vector Search] Failed to initialize vector search (will use text search only):", e);
|
console.error("Error initializing vector search", e);
|
||||||
initializationFailed = true;
|
|
||||||
vectorIndex = null;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -38,111 +18,28 @@ export interface VectorSearchResult extends SearchResult {
|
|||||||
object: IndexItem & { embedding: number[] };
|
object: IndexItem & { embedding: number[] };
|
||||||
}
|
}
|
||||||
|
|
||||||
// Cache for query embeddings to avoid recomputing
|
|
||||||
const embeddingCache = new Map<string, number[]>();
|
|
||||||
const EMBEDDING_CACHE_TTL = 1000 * 60 * 30; // 30 minutes
|
|
||||||
const MAX_EMBEDDING_CACHE_SIZE = 50;
|
|
||||||
|
|
||||||
function getCachedEmbedding(query: string): number[] | null {
|
|
||||||
const cached = embeddingCache.get(query);
|
|
||||||
if (cached) {
|
|
||||||
return cached;
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function setCachedEmbedding(query: string, embedding: number[]) {
|
|
||||||
// Limit cache size
|
|
||||||
if (embeddingCache.size >= MAX_EMBEDDING_CACHE_SIZE) {
|
|
||||||
const firstKey = embeddingCache.keys().next().value;
|
|
||||||
embeddingCache.delete(firstKey);
|
|
||||||
}
|
|
||||||
embeddingCache.set(query, embedding);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Clears the embedding cache
|
|
||||||
*/
|
|
||||||
export function clearEmbeddingCache(): void {
|
|
||||||
embeddingCache.clear();
|
|
||||||
console.debug("[Vector Search] Embedding cache cleared");
|
|
||||||
}
|
|
||||||
|
|
||||||
// Listen for cache clear events (e.g., on extension update)
|
|
||||||
if (typeof window !== 'undefined') {
|
|
||||||
window.addEventListener('betterseqta-clear-embedding-cache', () => {
|
|
||||||
clearEmbeddingCache();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function searchVectors(
|
export async function searchVectors(
|
||||||
query: string,
|
query: string,
|
||||||
topK: number = 20,
|
topK: number = 20,
|
||||||
): Promise<VectorSearchResult[]> {
|
): Promise<VectorSearchResult[]> {
|
||||||
// Return empty array if vector search is not supported or failed to initialize
|
if (!vectorIndex) await initVectorSearch();
|
||||||
if (!isVectorSearchSupported() || initializationFailed) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!vectorIndex) {
|
const queryEmbedding = await getEmbedding(query.slice(0, 100));
|
||||||
await initVectorSearch();
|
|
||||||
if (!vectorIndex) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Normalize query for caching
|
|
||||||
const normalizedQuery = query.trim().toLowerCase().slice(0, 100);
|
|
||||||
|
|
||||||
// Check cache first
|
|
||||||
let queryEmbedding = getCachedEmbedding(normalizedQuery);
|
|
||||||
|
|
||||||
if (!queryEmbedding) {
|
|
||||||
try {
|
|
||||||
queryEmbedding = await getEmbedding(normalizedQuery);
|
|
||||||
setCachedEmbedding(normalizedQuery, queryEmbedding);
|
|
||||||
} catch (e) {
|
|
||||||
console.warn("[Vector Search] Failed to get embedding:", e);
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const results = await vectorIndex!.search(queryEmbedding, {
|
const results = await vectorIndex!.search(queryEmbedding, {
|
||||||
topK: Math.min(topK * 2, 30), // Get more results, filter later
|
topK,
|
||||||
useStorage: "indexedDB",
|
useStorage: "indexedDB",
|
||||||
dedupeEntries: true,
|
dedupeEntries: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
// Filter results with a similarity below 0.80 (slightly more permissive)
|
// filter results with a similarity below 0.81
|
||||||
// and sort by similarity descending
|
const filteredResults = results.filter((r) => r.similarity > 0.81);
|
||||||
const filteredResults = results
|
|
||||||
.filter((r) => r.similarity > 0.80)
|
|
||||||
.sort((a, b) => b.similarity - a.similarity)
|
|
||||||
.slice(0, topK);
|
|
||||||
|
|
||||||
return filteredResults as VectorSearchResult[];
|
return filteredResults as VectorSearchResult[];
|
||||||
} catch (e) {
|
|
||||||
console.warn("[Vector Search] Search failed:", e);
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function refreshVectorCache() {
|
export async function refreshVectorCache() {
|
||||||
if (!isVectorSearchSupported() || initializationFailed) {
|
if (!vectorIndex) await initVectorSearch();
|
||||||
return;
|
vectorIndex!.clearIndexedDBCache();
|
||||||
}
|
vectorIndex!.preloadIndexedDB();
|
||||||
|
|
||||||
if (!vectorIndex) {
|
|
||||||
await initVectorSearch();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (vectorIndex) {
|
|
||||||
try {
|
|
||||||
vectorIndex.clearIndexedDBCache();
|
|
||||||
vectorIndex.preloadIndexedDB();
|
|
||||||
} catch (e) {
|
|
||||||
console.warn("[Vector Search] Failed to refresh cache:", e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,30 +0,0 @@
|
|||||||
import browser from "webextension-polyfill";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Detects if the current browser is Firefox
|
|
||||||
*/
|
|
||||||
export function isFirefox(): boolean {
|
|
||||||
try {
|
|
||||||
// Firefox-specific API
|
|
||||||
if (typeof (browser.runtime as any).getBrowserInfo === "function") {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
// Fallback: check user agent
|
|
||||||
if (typeof navigator !== "undefined") {
|
|
||||||
return navigator.userAgent.toLowerCase().includes("firefox");
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
} catch {
|
|
||||||
// If we can't detect, assume not Firefox (safer for Chrome/Edge)
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Checks if vector search is supported in the current browser
|
|
||||||
* Currently disabled for Firefox due to security restrictions
|
|
||||||
*/
|
|
||||||
export function isVectorSearchSupported(): boolean {
|
|
||||||
return !isFirefox();
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,115 +0,0 @@
|
|||||||
import browser from "webextension-polyfill";
|
|
||||||
|
|
||||||
const VERSION_STORAGE_KEY = "betterseqta-global-search-version";
|
|
||||||
const VERSION_CACHE_KEY = "betterseqta-global-search-cache-version";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gets the current extension version from the manifest
|
|
||||||
*/
|
|
||||||
export function getCurrentVersion(): string {
|
|
||||||
try {
|
|
||||||
return browser.runtime.getManifest().version;
|
|
||||||
} catch (e) {
|
|
||||||
console.warn("[Version Check] Failed to get manifest version:", e);
|
|
||||||
return "0.0.0";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gets the last stored version from localStorage
|
|
||||||
*/
|
|
||||||
export function getStoredVersion(): string | null {
|
|
||||||
try {
|
|
||||||
return localStorage.getItem(VERSION_STORAGE_KEY);
|
|
||||||
} catch (e) {
|
|
||||||
console.warn("[Version Check] Failed to get stored version:", e);
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Stores the current version in localStorage
|
|
||||||
*/
|
|
||||||
export function storeVersion(version: string): void {
|
|
||||||
try {
|
|
||||||
localStorage.setItem(VERSION_STORAGE_KEY, version);
|
|
||||||
localStorage.setItem(VERSION_CACHE_KEY, version);
|
|
||||||
} catch (e) {
|
|
||||||
console.warn("[Version Check] Failed to store version:", e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Checks if the extension has been updated and clears caches if needed
|
|
||||||
* Returns true if an update was detected
|
|
||||||
*/
|
|
||||||
export async function checkAndHandleUpdate(): Promise<boolean> {
|
|
||||||
const currentVersion = getCurrentVersion();
|
|
||||||
const storedVersion = getStoredVersion();
|
|
||||||
|
|
||||||
// If no stored version, this is first run - store current version
|
|
||||||
if (!storedVersion) {
|
|
||||||
console.debug(`[Version Check] First run detected, storing version ${currentVersion}`);
|
|
||||||
storeVersion(currentVersion);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// If versions match, no update
|
|
||||||
if (storedVersion === currentVersion) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Version mismatch detected - extension was updated
|
|
||||||
console.log(`[Version Check] Extension updated from ${storedVersion} to ${currentVersion}, clearing caches...`);
|
|
||||||
|
|
||||||
// Clear all caches
|
|
||||||
await clearAllCaches();
|
|
||||||
|
|
||||||
// Store new version
|
|
||||||
storeVersion(currentVersion);
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Clears all search-related caches
|
|
||||||
*/
|
|
||||||
export async function clearAllCaches(): Promise<void> {
|
|
||||||
try {
|
|
||||||
// Clear search result cache (in-memory Map)
|
|
||||||
if (typeof window !== 'undefined') {
|
|
||||||
// Dispatch event to clear caches in other modules
|
|
||||||
window.dispatchEvent(new CustomEvent('betterseqta-clear-search-cache'));
|
|
||||||
window.dispatchEvent(new CustomEvent('betterseqta-clear-embedding-cache'));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Also try to directly clear caches if modules are already loaded
|
|
||||||
// Use setTimeout to avoid blocking and handle CSS preload errors
|
|
||||||
setTimeout(async () => {
|
|
||||||
try {
|
|
||||||
const { clearSearchCache } = await import("../search/searchUtils");
|
|
||||||
clearSearchCache();
|
|
||||||
} catch (e: any) {
|
|
||||||
// Module might not be loaded yet, or CSS preload error - that's okay
|
|
||||||
if (!e?.message?.includes("preload CSS") && !e?.message?.includes("MIME type")) {
|
|
||||||
console.debug("[Version Check] Could not clear search cache:", e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const { clearEmbeddingCache } = await import("../search/vector/vectorSearch");
|
|
||||||
clearEmbeddingCache();
|
|
||||||
} catch (e: any) {
|
|
||||||
// Module might not be loaded yet, or CSS preload error - that's okay
|
|
||||||
if (!e?.message?.includes("preload CSS") && !e?.message?.includes("MIME type")) {
|
|
||||||
console.debug("[Version Check] Could not clear embedding cache:", e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, 50);
|
|
||||||
|
|
||||||
console.debug("[Version Check] All caches cleared");
|
|
||||||
} catch (e) {
|
|
||||||
console.error("[Version Check] Error clearing caches:", e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import type { Plugin } from "@/plugins/core/types";
|
import type { Plugin } from "@/plugins/core/types";
|
||||||
import { componentSetting, defineSettings } from "@/plugins/core/settingsHelpers";
|
import { defineSettings, componentSetting } from "@/plugins/core/settingsHelpers";
|
||||||
import ProfilePictureSetting from "./ProfilePictureSetting.svelte";
|
import ProfilePictureSetting from "./ProfilePictureSetting.svelte";
|
||||||
import { waitForElm } from "@/seqta/utils/waitForElm";
|
import { waitForElm } from "@/seqta/utils/waitForElm";
|
||||||
import styles from "./styles.css?inline";
|
import styles from "./styles.css?inline";
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import localforage from "localforage";
|
import localforage from "localforage";
|
||||||
import browser from "webextension-polyfill";
|
|
||||||
import type { CustomTheme, LoadedCustomTheme } from "@/types/CustomThemes";
|
import type { CustomTheme, LoadedCustomTheme } from "@/types/CustomThemes";
|
||||||
import { settingsState } from "@/seqta/utils/listeners/SettingsState";
|
import { settingsState } from "@/seqta/utils/listeners/SettingsState";
|
||||||
import debounce from "@/seqta/utils/debounce";
|
import debounce from "@/seqta/utils/debounce";
|
||||||
@@ -148,21 +147,14 @@ export class ThemeManager {
|
|||||||
public async initialize(): Promise<void> {
|
public async initialize(): Promise<void> {
|
||||||
console.debug("[ThemeManager] Starting initialization");
|
console.debug("[ThemeManager] Starting initialization");
|
||||||
try {
|
try {
|
||||||
const neumorphicThemeId = "9a9786d1-b5fc-4a91-8c7a-f8bf7f7679ad";
|
// Check if theme creator was open during reload
|
||||||
const migrationCSS = "#title {\nbackground: transparent !important;\n}";
|
|
||||||
|
|
||||||
const theme = (await localforage.getItem(neumorphicThemeId)) as CustomTheme | null;
|
|
||||||
if (theme && theme.CustomCSS && !theme.CustomCSS.includes("#title {\nbackground: transparent !important;\n}")) {
|
|
||||||
theme.CustomCSS = theme.CustomCSS + "\n" + migrationCSS;
|
|
||||||
await localforage.setItem(neumorphicThemeId, theme);
|
|
||||||
}
|
|
||||||
|
|
||||||
const themeCreatorOpen = localStorage.getItem("themeCreatorOpen");
|
const themeCreatorOpen = localStorage.getItem("themeCreatorOpen");
|
||||||
if (themeCreatorOpen === "true") {
|
if (themeCreatorOpen === "true") {
|
||||||
console.debug(
|
console.debug(
|
||||||
"[ThemeManager] Theme creator was open, clearing preview state",
|
"[ThemeManager] Theme creator was open, clearing preview state",
|
||||||
);
|
);
|
||||||
this.clearPreview();
|
this.clearPreview();
|
||||||
|
// Clean up the flag
|
||||||
localStorage.removeItem("themeCreatorOpen");
|
localStorage.removeItem("themeCreatorOpen");
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -471,53 +463,23 @@ export class ThemeManager {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private readonly THEME_API_BASE = 'https://betterseqta.org/api';
|
|
||||||
private readonly GITHUB_THEMES_BASE = 'https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/themes';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Fetch JSON from a URL via background script (avoids CORS when running inside SEQTA page)
|
* Download and install a theme from the store
|
||||||
*/
|
|
||||||
private async fetchFromUrl(url: string): Promise<any> {
|
|
||||||
const result = (await browser.runtime.sendMessage({
|
|
||||||
type: 'fetchFromUrl',
|
|
||||||
url,
|
|
||||||
})) as { data?: unknown; error?: string };
|
|
||||||
if (result?.error) throw new Error(result.error);
|
|
||||||
return result?.data;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Download and install a theme from the store.
|
|
||||||
* Uses API first (increments download_count), falls back to GitHub if unreachable.
|
|
||||||
*/
|
*/
|
||||||
public async downloadTheme(themeContent: {
|
public async downloadTheme(themeContent: {
|
||||||
id: string;
|
id: string;
|
||||||
name: string;
|
name: string;
|
||||||
description?: string;
|
description: string;
|
||||||
coverImage?: string;
|
coverImage: string;
|
||||||
theme_json_url?: string;
|
|
||||||
}): Promise<void> {
|
}): Promise<void> {
|
||||||
console.debug("[ThemeManager] Downloading theme:", themeContent.name);
|
console.debug("[ThemeManager] Downloading theme:", themeContent.name);
|
||||||
try {
|
try {
|
||||||
if (!themeContent.id) return;
|
if (!themeContent.id) return;
|
||||||
|
|
||||||
let themeData: ThemeContent;
|
const response = await fetch(
|
||||||
|
`https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/themes/${themeContent.id}/theme.json`,
|
||||||
try {
|
);
|
||||||
// Try API first (increments download_count)
|
const themeData = (await response.json()) as ThemeContent;
|
||||||
const downloadData = (await this.fetchFromUrl(
|
|
||||||
`${this.THEME_API_BASE}/themes/${themeContent.id}/download`
|
|
||||||
)) as { success?: boolean; data?: { theme_json_url: string } };
|
|
||||||
if (!downloadData?.success || !downloadData?.data?.theme_json_url) {
|
|
||||||
throw new Error("Failed to get theme download URL");
|
|
||||||
}
|
|
||||||
themeData = (await this.fetchFromUrl(downloadData.data.theme_json_url)) as ThemeContent;
|
|
||||||
} catch (apiError) {
|
|
||||||
// Fallback to GitHub if API is unreachable
|
|
||||||
console.warn("[ThemeManager] API failed, trying GitHub fallback:", apiError);
|
|
||||||
const githubUrl = `${this.GITHUB_THEMES_BASE}/${themeContent.id}/theme.json`;
|
|
||||||
themeData = (await this.fetchFromUrl(githubUrl)) as ThemeContent;
|
|
||||||
}
|
|
||||||
|
|
||||||
await this.installTheme(themeData);
|
await this.installTheme(themeData);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
|||||||
@@ -130,7 +130,7 @@ function handleTimetableAssessmentHide(): void {
|
|||||||
|
|
||||||
const hideOn = document.createElement("button");
|
const hideOn = document.createElement("button");
|
||||||
hideOn.className = "uiButton timetable-hide iconFamily";
|
hideOn.className = "uiButton timetable-hide iconFamily";
|
||||||
hideOn.innerHTML = "";
|
hideOn.innerHTML = "👁";
|
||||||
|
|
||||||
hideControls.appendChild(hideOn);
|
hideControls.appendChild(hideOn);
|
||||||
|
|
||||||
|
|||||||
@@ -1,338 +0,0 @@
|
|||||||
import type { Plugin } from "../../core/types";
|
|
||||||
import { waitForElm } from "@/seqta/utils/waitForElm";
|
|
||||||
import styles from "./styles.css?inline";
|
|
||||||
|
|
||||||
interface TimetableEntryData {
|
|
||||||
ci: number;
|
|
||||||
description: string;
|
|
||||||
room: string;
|
|
||||||
staff: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface TimetableOverrides {
|
|
||||||
[ci: string]: { room?: string; staff?: string };
|
|
||||||
}
|
|
||||||
|
|
||||||
interface TimetableOverridesBySubject {
|
|
||||||
[description: string]: { room?: string; staff?: string };
|
|
||||||
}
|
|
||||||
|
|
||||||
interface TimetableStorage {
|
|
||||||
timetableOverrides?: TimetableOverrides;
|
|
||||||
timetableOverridesBySubject?: TimetableOverridesBySubject;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** SEQTA timetable entries use .teacher and .room as direct children, and data-instance for ci */
|
|
||||||
function getRoomAndTeacherElements(entry: HTMLElement): {
|
|
||||||
roomEl: HTMLElement | null;
|
|
||||||
teacherEl: HTMLElement | null;
|
|
||||||
} {
|
|
||||||
const roomEl = entry.querySelector(".room") as HTMLElement | null;
|
|
||||||
const teacherEl = entry.querySelector(".teacher") as HTMLElement | null;
|
|
||||||
return { roomEl, teacherEl };
|
|
||||||
}
|
|
||||||
|
|
||||||
const EDIT_ICON_SVG =
|
|
||||||
'<svg width="24" height="24" viewBox="0 0 24 24"><g style="fill: currentcolor;"><path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"/></g></svg>';
|
|
||||||
|
|
||||||
function showEditModal(
|
|
||||||
item: TimetableEntryData,
|
|
||||||
overrides: TimetableOverrides | undefined,
|
|
||||||
overridesBySubject: TimetableOverridesBySubject | undefined,
|
|
||||||
onSave: (
|
|
||||||
ci: number,
|
|
||||||
room: string,
|
|
||||||
staff: string,
|
|
||||||
applyToFuture: boolean,
|
|
||||||
) => void,
|
|
||||||
onClear: (ci: number) => void,
|
|
||||||
): void {
|
|
||||||
const overlay = document.createElement("div");
|
|
||||||
overlay.className = "timetable-edit-modal-overlay";
|
|
||||||
|
|
||||||
const modal = document.createElement("div");
|
|
||||||
modal.className = "timetable-edit-modal";
|
|
||||||
|
|
||||||
const override = overrides?.[String(item.ci)] ?? overridesBySubject?.[item.description];
|
|
||||||
|
|
||||||
const roomValue = override?.room ?? item.room ?? "";
|
|
||||||
const staffValue = override?.staff ?? item.staff ?? "";
|
|
||||||
|
|
||||||
const escapeHtml = (s: string) =>
|
|
||||||
s.replace(/&/g, "&").replace(/</g, "<").replace(/"/g, """);
|
|
||||||
const title = escapeHtml(item.description);
|
|
||||||
|
|
||||||
modal.innerHTML = `
|
|
||||||
<h3>Edit ${title}</h3>
|
|
||||||
<label for="timetable-edit-room">Room</label>
|
|
||||||
<input type="text" id="timetable-edit-room" value="${roomValue.replace(/"/g, """)}" placeholder="Room" />
|
|
||||||
<label for="timetable-edit-staff">Teacher</label>
|
|
||||||
<input type="text" id="timetable-edit-staff" value="${staffValue.replace(/"/g, """)}" placeholder="Teacher" />
|
|
||||||
<div class="timetable-edit-modal-checkbox">
|
|
||||||
<input type="checkbox" id="timetable-edit-apply-future" />
|
|
||||||
<label for="timetable-edit-apply-future">Apply to future weeks</label>
|
|
||||||
</div>
|
|
||||||
<div class="timetable-edit-modal-actions">
|
|
||||||
${override ? '<button type="button" class="timetable-edit-btn-clear">Clear</button>' : ""}
|
|
||||||
<button type="button" class="timetable-edit-btn-cancel">Cancel</button>
|
|
||||||
<button type="button" class="timetable-edit-btn-save">Save</button>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
overlay.appendChild(modal);
|
|
||||||
|
|
||||||
const removeModal = () => {
|
|
||||||
overlay.remove();
|
|
||||||
document.removeEventListener("keydown", handleKeydown);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleKeydown = (e: KeyboardEvent) => {
|
|
||||||
if (e.key === "Escape") removeModal();
|
|
||||||
};
|
|
||||||
|
|
||||||
overlay.addEventListener("click", (e) => {
|
|
||||||
if (e.target === overlay) removeModal();
|
|
||||||
});
|
|
||||||
|
|
||||||
modal.addEventListener("click", (e) => e.stopPropagation());
|
|
||||||
modal.addEventListener("mousedown", (e) => e.stopPropagation());
|
|
||||||
modal.addEventListener("mouseup", (e) => e.stopPropagation());
|
|
||||||
|
|
||||||
const roomInput = modal.querySelector("#timetable-edit-room") as HTMLInputElement;
|
|
||||||
const staffInput = modal.querySelector("#timetable-edit-staff") as HTMLInputElement;
|
|
||||||
const applyFutureCheckbox = modal.querySelector("#timetable-edit-apply-future") as HTMLInputElement;
|
|
||||||
|
|
||||||
modal.querySelector(".timetable-edit-btn-save")?.addEventListener("click", () => {
|
|
||||||
onSave(
|
|
||||||
item.ci,
|
|
||||||
roomInput.value.trim(),
|
|
||||||
staffInput.value.trim(),
|
|
||||||
applyFutureCheckbox?.checked ?? false,
|
|
||||||
);
|
|
||||||
removeModal();
|
|
||||||
});
|
|
||||||
|
|
||||||
modal.querySelector(".timetable-edit-btn-cancel")?.addEventListener("click", removeModal);
|
|
||||||
|
|
||||||
const clearBtn = modal.querySelector(".timetable-edit-btn-clear");
|
|
||||||
if (clearBtn) {
|
|
||||||
clearBtn.addEventListener("click", () => {
|
|
||||||
onClear(item.ci);
|
|
||||||
removeModal();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
document.body.appendChild(overlay);
|
|
||||||
document.addEventListener("keydown", handleKeydown);
|
|
||||||
roomInput?.focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
const timetableEditPlugin: Plugin<{}, TimetableStorage> = {
|
|
||||||
id: "timetableEdit",
|
|
||||||
name: "Edit Rooms & Teachers",
|
|
||||||
description: "Edit room and teacher names in timetable classes",
|
|
||||||
version: "1.0.0",
|
|
||||||
settings: {},
|
|
||||||
disableToggle: true,
|
|
||||||
defaultEnabled: true,
|
|
||||||
|
|
||||||
run: async (api) => {
|
|
||||||
const styleEl = document.createElement("style");
|
|
||||||
styleEl.textContent = styles;
|
|
||||||
document.head.appendChild(styleEl);
|
|
||||||
|
|
||||||
await api.storage.loaded;
|
|
||||||
|
|
||||||
let observer: MutationObserver | null = null;
|
|
||||||
let quickbarObserver: MutationObserver | null = null;
|
|
||||||
let lastClickedCi: number | null = null;
|
|
||||||
let lastClickedEntry: { roomEl: HTMLElement; teacherEl: HTMLElement; item: TimetableEntryData } | null = null;
|
|
||||||
|
|
||||||
const getOverrides = (): TimetableOverrides =>
|
|
||||||
api.storage.timetableOverrides ?? {};
|
|
||||||
const getOverridesBySubject = (): TimetableOverridesBySubject =>
|
|
||||||
api.storage.timetableOverridesBySubject ?? {};
|
|
||||||
|
|
||||||
const getEffectiveOverride = (
|
|
||||||
ci: number,
|
|
||||||
description: string,
|
|
||||||
): { room?: string; staff?: string } | undefined =>
|
|
||||||
getOverrides()[String(ci)] ?? getOverridesBySubject()[description];
|
|
||||||
|
|
||||||
const processEntry = (entry: HTMLElement): void => {
|
|
||||||
if (entry.classList.contains("assessment") || entry.hasAttribute("data-timetable-edit-processed")) return;
|
|
||||||
|
|
||||||
const ciStr = entry.getAttribute("data-instance");
|
|
||||||
if (!ciStr) return;
|
|
||||||
|
|
||||||
const ci = parseInt(ciStr, 10);
|
|
||||||
if (isNaN(ci)) return;
|
|
||||||
|
|
||||||
const { roomEl, teacherEl } = getRoomAndTeacherElements(entry);
|
|
||||||
if (!roomEl && !teacherEl) return;
|
|
||||||
|
|
||||||
const titleEl = entry.querySelector(".title");
|
|
||||||
const description = titleEl?.textContent?.trim() ?? "";
|
|
||||||
const room = roomEl?.textContent?.trim() ?? "";
|
|
||||||
const staff = teacherEl?.textContent?.trim() ?? "";
|
|
||||||
|
|
||||||
const item: TimetableEntryData = { ci, description, room, staff };
|
|
||||||
|
|
||||||
entry.setAttribute("data-timetable-edit-processed", "true");
|
|
||||||
|
|
||||||
const override = getEffectiveOverride(ci, description);
|
|
||||||
if (override) {
|
|
||||||
if (override.room !== undefined && roomEl) roomEl.textContent = override.room;
|
|
||||||
if (override.staff !== undefined && teacherEl) teacherEl.textContent = override.staff;
|
|
||||||
}
|
|
||||||
|
|
||||||
const captureClick = (e: MouseEvent) => {
|
|
||||||
lastClickedCi = ci;
|
|
||||||
lastClickedEntry = { roomEl, teacherEl, item };
|
|
||||||
};
|
|
||||||
entry.addEventListener("click", captureClick, true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const processAllEntries = () => {
|
|
||||||
document.querySelectorAll(".timetablepage .entry.class").forEach((entry) => {
|
|
||||||
processEntry(entry as HTMLElement);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const addEditButtonToQuickbar = (quickbar: HTMLElement) => {
|
|
||||||
if (quickbar.querySelector(".timetable-edit-quickbar-btn")) return;
|
|
||||||
|
|
||||||
const actions = quickbar.querySelector(".actions");
|
|
||||||
if (!actions) return;
|
|
||||||
|
|
||||||
const btn = document.createElement("button");
|
|
||||||
btn.type = "button";
|
|
||||||
btn.className = "uiButton timetable-edit-quickbar-btn";
|
|
||||||
btn.title = "Edit room and teacher";
|
|
||||||
btn.innerHTML = EDIT_ICON_SVG;
|
|
||||||
|
|
||||||
btn.addEventListener("click", (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
const ci = lastClickedCi;
|
|
||||||
const entryData = lastClickedEntry;
|
|
||||||
if (!ci || !entryData) return;
|
|
||||||
|
|
||||||
const qb = (e.currentTarget as HTMLElement).closest(".quickbar");
|
|
||||||
if (!qb) return;
|
|
||||||
const quickbarRoom = qb.querySelector(".meta .room")?.textContent?.trim() ?? "";
|
|
||||||
const quickbarTeacher = qb.querySelector(".meta .teacher")?.textContent?.trim() ?? "";
|
|
||||||
const quickbarTitle = qb.querySelector(".title")?.textContent?.trim() ?? "";
|
|
||||||
const item: TimetableEntryData = {
|
|
||||||
ci,
|
|
||||||
description: quickbarTitle || entryData.item.description,
|
|
||||||
room: quickbarRoom || entryData.item.room,
|
|
||||||
staff: quickbarTeacher || entryData.item.staff,
|
|
||||||
};
|
|
||||||
|
|
||||||
showEditModal(
|
|
||||||
item,
|
|
||||||
getOverrides(),
|
|
||||||
getOverridesBySubject(),
|
|
||||||
(ci, room, staff, applyToFuture) => {
|
|
||||||
if (applyToFuture) {
|
|
||||||
const bySubject = { ...getOverridesBySubject() };
|
|
||||||
bySubject[item.description] = {
|
|
||||||
room: room || undefined,
|
|
||||||
staff: staff || undefined,
|
|
||||||
};
|
|
||||||
api.storage.timetableOverridesBySubject = bySubject;
|
|
||||||
} else {
|
|
||||||
const current = getOverrides();
|
|
||||||
api.storage.timetableOverrides = {
|
|
||||||
...current,
|
|
||||||
[String(ci)]: { room: room || undefined, staff: staff || undefined },
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (entryData.roomEl) entryData.roomEl.textContent = room;
|
|
||||||
if (entryData.teacherEl) entryData.teacherEl.textContent = staff;
|
|
||||||
processAllEntries();
|
|
||||||
},
|
|
||||||
(ci) => {
|
|
||||||
const current = getOverrides();
|
|
||||||
delete current[String(ci)];
|
|
||||||
api.storage.timetableOverrides = current;
|
|
||||||
const bySubject = getOverridesBySubject();
|
|
||||||
delete bySubject[item.description];
|
|
||||||
api.storage.timetableOverridesBySubject = bySubject;
|
|
||||||
if (entryData.roomEl) entryData.roomEl.textContent = item.room;
|
|
||||||
if (entryData.teacherEl) entryData.teacherEl.textContent = item.staff;
|
|
||||||
processAllEntries();
|
|
||||||
},
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
actions.insertBefore(btn, actions.firstChild);
|
|
||||||
};
|
|
||||||
|
|
||||||
const syncQuickbarFromDOM = () => {
|
|
||||||
const quickbar = document.querySelector(".timetablepage .quickbar.visible");
|
|
||||||
if (quickbar && quickbar.getAttribute("data-type") === "class") {
|
|
||||||
const titleEl = quickbar.querySelector(".title");
|
|
||||||
const roomEl = quickbar.querySelector(".meta .room");
|
|
||||||
const teacherEl = quickbar.querySelector(".meta .teacher");
|
|
||||||
if (titleEl && roomEl && teacherEl && lastClickedCi !== null && lastClickedEntry) {
|
|
||||||
addEditButtonToQuickbar(quickbar as HTMLElement);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const setupQuickbarObserver = () => {
|
|
||||||
const timetablePage = document.querySelector(".timetablepage");
|
|
||||||
if (!timetablePage || quickbarObserver) return;
|
|
||||||
|
|
||||||
quickbarObserver = new MutationObserver(() => {
|
|
||||||
const quickbar = document.querySelector(".timetablepage .quickbar.visible");
|
|
||||||
if (quickbar?.getAttribute("data-type") === "class") {
|
|
||||||
addEditButtonToQuickbar(quickbar as HTMLElement);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
quickbarObserver.observe(timetablePage, {
|
|
||||||
childList: true,
|
|
||||||
subtree: true,
|
|
||||||
attributes: true,
|
|
||||||
attributeFilter: ["class"],
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleTimetable = async () => {
|
|
||||||
await waitForElm(".timetablepage .entry", true, 10, 100);
|
|
||||||
processAllEntries();
|
|
||||||
setupQuickbarObserver();
|
|
||||||
syncQuickbarFromDOM();
|
|
||||||
|
|
||||||
const timetablePage = document.querySelector(".timetablepage");
|
|
||||||
if (timetablePage && !observer) {
|
|
||||||
observer = new MutationObserver(() => {
|
|
||||||
document.querySelectorAll(".timetablepage .entry.class").forEach((entry) => {
|
|
||||||
if (!entry.hasAttribute("data-timetable-edit-processed")) {
|
|
||||||
processEntry(entry as HTMLElement);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
observer.observe(timetablePage, { childList: true, subtree: true });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const { unregister } = api.seqta.onMount(".timetablepage", handleTimetable);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
unregister();
|
|
||||||
observer?.disconnect();
|
|
||||||
quickbarObserver?.disconnect();
|
|
||||||
styleEl.remove();
|
|
||||||
document.querySelectorAll("[data-timetable-edit-processed]").forEach((el) => {
|
|
||||||
el.removeAttribute("data-timetable-edit-processed");
|
|
||||||
});
|
|
||||||
document.querySelectorAll(".timetable-edit-quickbar-btn").forEach((el) => el.remove());
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default timetableEditPlugin;
|
|
||||||
@@ -1,188 +0,0 @@
|
|||||||
/* Timetable Edit Plugin - BetterSEQTA Plus style */
|
|
||||||
|
|
||||||
/* Edit button in quickbar */
|
|
||||||
.timetable-edit-quickbar-btn {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
background: transparent !important;
|
|
||||||
border: none !important;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease-in-out;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timetable-edit-quickbar-btn:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timetable-edit-quickbar-btn:active {
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timetable-edit-quickbar-btn svg {
|
|
||||||
fill: currentColor;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Edit modal animations */
|
|
||||||
@keyframes timetable-edit-overlay-in {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes timetable-edit-modal-in {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(0.95) translateY(-8px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1) translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Edit modal overlay - fix click-through with proper stacking */
|
|
||||||
.timetable-edit-modal-overlay {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
z-index: 2147483647;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
pointer-events: auto;
|
|
||||||
animation: timetable-edit-overlay-in 0.2s ease-out forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timetable-edit-modal {
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
margin: 0 1rem;
|
|
||||||
min-width: 18rem;
|
|
||||||
max-width: 24rem;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background: var(--background-primary);
|
|
||||||
border-radius: 0.75rem;
|
|
||||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
||||||
pointer-events: auto;
|
|
||||||
border: 1px solid var(--background-secondary);
|
|
||||||
animation: timetable-edit-modal-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timetable-edit-modal h3 {
|
|
||||||
margin: 0 0 1rem 0;
|
|
||||||
font-size: 1.125rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timetable-edit-modal label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--text-primary);
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timetable-edit-modal input[type="text"] {
|
|
||||||
width: 100%;
|
|
||||||
min-width: 0;
|
|
||||||
padding: 0.5rem 1rem 0.5rem 0.75rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
border: 1px solid var(--background-secondary);
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
background: var(--background-secondary);
|
|
||||||
color: var(--text-primary);
|
|
||||||
box-sizing: border-box;
|
|
||||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
|
|
||||||
user-select: text;
|
|
||||||
-webkit-user-select: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timetable-edit-modal input[type="text"]:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--better-main, #007bff);
|
|
||||||
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timetable-edit-modal-checkbox {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timetable-edit-modal-checkbox input {
|
|
||||||
width: auto;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timetable-edit-modal-checkbox label {
|
|
||||||
margin: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timetable-edit-modal-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.75rem;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 1rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timetable-edit-modal-actions button {
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 500;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timetable-edit-modal-actions .timetable-edit-btn-clear {
|
|
||||||
background: transparent;
|
|
||||||
border: 1px solid var(--background-secondary);
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timetable-edit-modal-actions .timetable-edit-btn-clear:hover {
|
|
||||||
background: var(--background-secondary);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timetable-edit-modal-actions .timetable-edit-btn-cancel {
|
|
||||||
background: transparent;
|
|
||||||
border: 1px solid var(--background-secondary);
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timetable-edit-modal-actions .timetable-edit-btn-cancel:hover {
|
|
||||||
background: var(--background-secondary);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timetable-edit-modal-actions .timetable-edit-btn-save {
|
|
||||||
background: var(--better-main, #007bff);
|
|
||||||
border: none;
|
|
||||||
color: var(--text-color, white);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timetable-edit-modal-actions .timetable-edit-btn-save:hover {
|
|
||||||
transform: scale(1.03) translateY(-1px);
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timetable-edit-modal-actions .timetable-edit-btn-save:active {
|
|
||||||
transform: scale(0.98) translateY(0);
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
@@ -47,17 +47,7 @@ export function createLazyPlugin<T extends PluginSettings = PluginSettings, S =
|
|||||||
|
|
||||||
// Execute the actual plugin's run function
|
// Execute the actual plugin's run function
|
||||||
return await actualPlugin.run(api);
|
return await actualPlugin.run(api);
|
||||||
} catch (error: any) {
|
} catch (error) {
|
||||||
// Handle Firefox MIME type errors gracefully
|
|
||||||
if (error?.message?.includes("MIME type") || error?.message?.includes("NS_ERROR_CORRUPTED_CONTENT")) {
|
|
||||||
console.error(
|
|
||||||
`[BetterSEQTA+] Failed to load plugin "${lazyPlugin.id}" due to Firefox module loading restrictions. ` +
|
|
||||||
`This may be a build configuration issue. Error:`,
|
|
||||||
error
|
|
||||||
);
|
|
||||||
// Don't throw - allow the extension to continue functioning without this plugin
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
console.error(`[BetterSEQTA+] Failed to dynamically load plugin "${lazyPlugin.id}":`, error);
|
console.error(`[BetterSEQTA+] Failed to dynamically load plugin "${lazyPlugin.id}":`, error);
|
||||||
throw error;
|
throw error;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
import type {
|
import type {
|
||||||
BooleanSetting,
|
BooleanSetting,
|
||||||
ButtonSetting,
|
|
||||||
ComponentSetting,
|
|
||||||
HotkeySetting,
|
|
||||||
NumberSetting,
|
NumberSetting,
|
||||||
Plugin,
|
Plugin,
|
||||||
PluginSettings,
|
PluginSettings,
|
||||||
SelectSetting,
|
SelectSetting,
|
||||||
StringSetting,
|
StringSetting,
|
||||||
|
ButtonSetting,
|
||||||
|
HotkeySetting,
|
||||||
|
ComponentSetting,
|
||||||
} from "./types";
|
} from "./types";
|
||||||
import { createPluginAPI } from "./createAPI";
|
import { createPluginAPI } from "./createAPI";
|
||||||
import browser from "webextension-polyfill";
|
import browser from "webextension-polyfill";
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
import type {
|
import type {
|
||||||
BooleanSetting,
|
BooleanSetting,
|
||||||
ButtonSetting,
|
ButtonSetting,
|
||||||
ComponentSetting,
|
|
||||||
HotkeySetting,
|
|
||||||
NumberSetting,
|
NumberSetting,
|
||||||
PluginSettings,
|
|
||||||
SelectSetting,
|
SelectSetting,
|
||||||
StringSetting,
|
StringSetting,
|
||||||
|
HotkeySetting,
|
||||||
|
PluginSettings,
|
||||||
|
ComponentSetting,
|
||||||
} from "./types";
|
} from "./types";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ import { PluginManager } from "./core/manager";
|
|||||||
|
|
||||||
// Lightweight plugins (load immediately)
|
// Lightweight plugins (load immediately)
|
||||||
import timetablePlugin from "./built-in/timetable";
|
import timetablePlugin from "./built-in/timetable";
|
||||||
import timetableEditPlugin from "./built-in/timetableEdit";
|
|
||||||
import notificationCollectorPlugin from "./built-in/notificationCollector";
|
import notificationCollectorPlugin from "./built-in/notificationCollector";
|
||||||
import themesPlugin from "./built-in/themes";
|
import themesPlugin from "./built-in/themes";
|
||||||
import animatedBackgroundPlugin from "./built-in/animatedBackground";
|
import animatedBackgroundPlugin from "./built-in/animatedBackground";
|
||||||
@@ -24,7 +23,6 @@ pluginManager.registerPlugin(animatedBackgroundPlugin);
|
|||||||
pluginManager.registerPlugin(assessmentsAveragePlugin);
|
pluginManager.registerPlugin(assessmentsAveragePlugin);
|
||||||
pluginManager.registerPlugin(notificationCollectorPlugin);
|
pluginManager.registerPlugin(notificationCollectorPlugin);
|
||||||
pluginManager.registerPlugin(timetablePlugin);
|
pluginManager.registerPlugin(timetablePlugin);
|
||||||
pluginManager.registerPlugin(timetableEditPlugin);
|
|
||||||
pluginManager.registerPlugin(profilePicturePlugin);
|
pluginManager.registerPlugin(profilePicturePlugin);
|
||||||
pluginManager.registerPlugin(assessmentsOverviewPlugin);
|
pluginManager.registerPlugin(assessmentsOverviewPlugin);
|
||||||
pluginManager.registerPlugin(backgroundMusicPlugin);
|
pluginManager.registerPlugin(backgroundMusicPlugin);
|
||||||
|
|||||||
+1
-81
@@ -612,15 +612,6 @@ export function init() {
|
|||||||
if (settingsState.onoff) {
|
if (settingsState.onoff) {
|
||||||
console.info("[BetterSEQTA+] Enabled");
|
console.info("[BetterSEQTA+] Enabled");
|
||||||
if (settingsState.DarkMode) document.documentElement.classList.add("dark");
|
if (settingsState.DarkMode) document.documentElement.classList.add("dark");
|
||||||
if (settingsState.iconOnlySidebar) {
|
|
||||||
if (document.body) {
|
|
||||||
document.body.classList.add("icon-only-sidebar");
|
|
||||||
} else {
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
|
||||||
document.body?.classList.add("icon-only-sidebar");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.querySelector(".legacy-root")?.classList.add("hidden");
|
document.querySelector(".legacy-root")?.classList.add("hidden");
|
||||||
ObserveMenuItemPosition();
|
ObserveMenuItemPosition();
|
||||||
@@ -628,83 +619,12 @@ export function init() {
|
|||||||
new StorageChangeHandler();
|
new StorageChangeHandler();
|
||||||
new MessageHandler();
|
new MessageHandler();
|
||||||
|
|
||||||
void updateAllColors();
|
updateAllColors();
|
||||||
|
|
||||||
window.addEventListener("hashchange", () => {
|
|
||||||
if (settingsState.adaptiveThemeColour) void updateAllColors();
|
|
||||||
});
|
|
||||||
loading();
|
loading();
|
||||||
InjectCustomIcons();
|
InjectCustomIcons();
|
||||||
HideMenuItems();
|
HideMenuItems();
|
||||||
tryLoad();
|
tryLoad();
|
||||||
|
|
||||||
// Auto-focus WISP direct online submission editor when pane opens
|
|
||||||
eventManager.register(
|
|
||||||
"wispassessmentAdded",
|
|
||||||
{
|
|
||||||
customCheck: (el) =>
|
|
||||||
el.classList.contains("wispassessment") ||
|
|
||||||
el.querySelector(".wispassessment") !== null,
|
|
||||||
},
|
|
||||||
(element) => {
|
|
||||||
const wispassessment = element.classList.contains("wispassessment")
|
|
||||||
? (element as Element)
|
|
||||||
: element.querySelector(".wispassessment");
|
|
||||||
if (!wispassessment) return;
|
|
||||||
|
|
||||||
const focusEditableBody = (iframe: HTMLIFrameElement) => {
|
|
||||||
try {
|
|
||||||
const doc = iframe.contentDocument;
|
|
||||||
const win = iframe.contentWindow;
|
|
||||||
if (doc?.body && win) {
|
|
||||||
const editable =
|
|
||||||
doc.body.querySelector(".cke_editable") || doc.body;
|
|
||||||
const el = editable as HTMLElement;
|
|
||||||
el.focus();
|
|
||||||
const range = doc.createRange();
|
|
||||||
range.selectNodeContents(el);
|
|
||||||
range.collapse(true);
|
|
||||||
const sel = win.getSelection();
|
|
||||||
if (sel) {
|
|
||||||
sel.removeAllRanges();
|
|
||||||
sel.addRange(range);
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
} catch (_) {}
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
|
|
||||||
const focusEditor = () => {
|
|
||||||
const iframe = wispassessment.querySelector(".cke_wysiwyg_frame");
|
|
||||||
if (iframe instanceof HTMLIFrameElement) {
|
|
||||||
if (focusEditableBody(iframe)) return;
|
|
||||||
iframe.focus();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const ckeditor = (window as any).CKEDITOR;
|
|
||||||
if (ckeditor?.instances?.editor1) {
|
|
||||||
try {
|
|
||||||
ckeditor.instances.editor1.focus();
|
|
||||||
} catch (_) {}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const iframe = wispassessment.querySelector(".cke_wysiwyg_frame");
|
|
||||||
if (iframe instanceof HTMLIFrameElement) {
|
|
||||||
iframe.addEventListener(
|
|
||||||
"load",
|
|
||||||
() => focusEditableBody(iframe),
|
|
||||||
{ once: true },
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
[1000, 1200, 1500].forEach((delay) =>
|
|
||||||
setTimeout(focusEditor, delay),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const legacyElement = document.querySelector(
|
const legacyElement = document.querySelector(
|
||||||
".outside-container .bottom-container",
|
".outside-container .bottom-container",
|
||||||
|
|||||||
Binary file not shown.
@@ -13,11 +13,8 @@ import { delay } from "@/seqta/utils/delay";
|
|||||||
let cachedUserInfo: any = null;
|
let cachedUserInfo: any = null;
|
||||||
|
|
||||||
let LightDarkModeSnakeEggButton = 0;
|
let LightDarkModeSnakeEggButton = 0;
|
||||||
let sidebarAccessibilityObserver: MutationObserver | null = null;
|
|
||||||
let sidebarTabOrderAnimationFrame: number | null = null;
|
|
||||||
let sidebarAccessibilityListenersAttached = false;
|
|
||||||
|
|
||||||
export async function getUserInfo() {
|
async function getUserInfo() {
|
||||||
if (cachedUserInfo) return cachedUserInfo;
|
if (cachedUserInfo) return cachedUserInfo;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
@@ -33,10 +30,11 @@ export async function getUserInfo() {
|
|||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
|
|
||||||
cachedUserInfo = (await response.json()).payload;
|
const responseData = await response.json();
|
||||||
|
cachedUserInfo = responseData.payload;
|
||||||
return cachedUserInfo;
|
return cachedUserInfo;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("[BetterSEQTA+] Failed to get user info:", error);
|
console.error("Error fetching user info:", error);
|
||||||
throw error;
|
throw error;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -63,13 +61,12 @@ export async function AddBetterSEQTAElements() {
|
|||||||
handleStudentData(),
|
handleStudentData(),
|
||||||
]);
|
]);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("[BetterSEQTA+] Failed to initialize UI elements:", error);
|
console.error("Error initializing UI elements:", error);
|
||||||
}
|
}
|
||||||
|
|
||||||
setupEventListeners();
|
setupEventListeners();
|
||||||
await addDarkLightToggle();
|
await addDarkLightToggle();
|
||||||
customizeMenuToggle();
|
customizeMenuToggle();
|
||||||
setupSidebarAccessibility();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
addExtensionSettings();
|
addExtensionSettings();
|
||||||
@@ -83,18 +80,20 @@ function createHomeButton(fragment: DocumentFragment, _: HTMLElement) {
|
|||||||
div.classList.add("titlebar");
|
div.classList.add("titlebar");
|
||||||
container.append(div);
|
container.append(div);
|
||||||
|
|
||||||
fragment.appendChild(
|
const NewButton = stringToHTML(
|
||||||
stringToHTML(
|
/* html */`<li class="item" data-key="home" id="homebutton" data-path="/home" data-betterseqta="true"><label><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg><span>Home</span></label></li>`
|
||||||
/* html */ `<li class="item" data-key="home" id="homebutton" data-path="/home" data-betterseqta="true"><label><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg><span>Home</span></label></li>`,
|
|
||||||
).firstChild!,
|
|
||||||
);
|
);
|
||||||
|
if (NewButton.firstChild) {
|
||||||
|
fragment.appendChild(NewButton.firstChild);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleUserInfo() {
|
async function handleUserInfo() {
|
||||||
try {
|
try {
|
||||||
updateUserInfo(await getUserInfo());
|
const info = await getUserInfo();
|
||||||
|
updateUserInfo(info);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("[BetterSEQTA+] Failed to handle user info:", error);
|
console.error("Error fetching and processing student data:", error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -117,37 +116,31 @@ function updateUserInfo(info: {
|
|||||||
userName: string | null;
|
userName: string | null;
|
||||||
}) {
|
}) {
|
||||||
const titlebar = document.getElementsByClassName("titlebar")[0];
|
const titlebar = document.getElementsByClassName("titlebar")[0];
|
||||||
const metadata = [info.meta.code, info.meta.governmentID]
|
|
||||||
.filter((value): value is string => Boolean(value))
|
|
||||||
.join(" // ");
|
|
||||||
const displayName = info.userDesc || info.userName || "";
|
|
||||||
|
|
||||||
titlebar.append(
|
const userInfo = stringToHTML(/* html */ `
|
||||||
stringToHTML(/* html */ `
|
|
||||||
<div class="userInfosvgdiv tooltip">
|
<div class="userInfosvgdiv tooltip">
|
||||||
<svg class="userInfosvg" viewBox="0 0 24 24"><path fill="var(--text-primary)" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></path></svg>
|
<svg class="userInfosvg" viewBox="0 0 24 24"><path fill="var(--text-primary)" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></path></svg>
|
||||||
<div class="tooltiptext topmenutooltip" id="logouttooltip"></div>
|
<div class="tooltiptext topmenutooltip" id="logouttooltip"></div>
|
||||||
</div>
|
</div>
|
||||||
`).firstChild!,
|
`).firstChild;
|
||||||
);
|
titlebar.append(userInfo!);
|
||||||
|
|
||||||
titlebar.append(
|
const userinfo = stringToHTML(/* html */ `
|
||||||
stringToHTML(/* html */ `
|
|
||||||
<div class="userInfo">
|
<div class="userInfo">
|
||||||
<div class="userInfoText">
|
<div class="userInfoText">
|
||||||
<div style="display: flex; align-items: center;">
|
<div style="display: flex; align-items: center;">
|
||||||
<p class="userInfohouse userInfoCode" style="display: none;"></p>
|
<p class="userInfohouse userInfoCode"></p>
|
||||||
${displayName ? `<p class="userInfoName">${displayName}</p>` : ""}
|
<p class="userInfoName">${info.userDesc}</p>
|
||||||
</div>
|
</div>
|
||||||
${metadata ? `<p class="userInfoCode">${metadata}</p>` : ""}
|
<p class="userInfoCode">${info.meta.code} // ${info.meta.governmentID}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`).firstChild!,
|
`).firstChild;
|
||||||
);
|
titlebar.append(userinfo!);
|
||||||
|
|
||||||
document
|
var logoutbutton = document.getElementsByClassName("logout")[0];
|
||||||
.getElementById("logouttooltip")!
|
var userInfosvgdiv = document.getElementById("logouttooltip")!;
|
||||||
.appendChild(document.getElementsByClassName("logout")[0]);
|
userInfosvgdiv.appendChild(logoutbutton);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleStudentData() {
|
async function handleStudentData() {
|
||||||
@@ -163,58 +156,64 @@ async function handleStudentData() {
|
|||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
await updateStudentInfo((await response.json()).payload);
|
const responseData = await response.json();
|
||||||
|
let students = responseData.payload;
|
||||||
|
await updateStudentInfo(students);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("[BetterSEQTA+] Failed to handle student data:", error);
|
console.error("Error fetching and processing student data:", error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function updateStudentInfo(students: any) {
|
async function updateStudentInfo(students: any) {
|
||||||
const info = await getUserInfo();
|
const info = await getUserInfo();
|
||||||
const index = students.findIndex(
|
var index = students.findIndex(function (person: any) {
|
||||||
(person: any) =>
|
return (
|
||||||
person.firstname == info.userDesc.split(" ")[0] &&
|
person.firstname == info.userDesc.split(" ")[0] &&
|
||||||
person.surname == info.userDesc.split(" ")[1],
|
person.surname == info.userDesc.split(" ")[1]
|
||||||
);
|
);
|
||||||
|
});
|
||||||
|
|
||||||
const houseelement = document.getElementsByClassName(
|
const houseelement = document.getElementsByClassName("userInfohouse")[0] as HTMLElement;
|
||||||
"userInfohouse",
|
|
||||||
)[0] as HTMLElement | undefined;
|
|
||||||
|
|
||||||
if (!houseelement) return;
|
|
||||||
|
|
||||||
|
// Fallback to N/A
|
||||||
|
let text = 'N/A';
|
||||||
const student = students[index] ?? {};
|
const student = students[index] ?? {};
|
||||||
let text = "";
|
|
||||||
|
|
||||||
|
// If student has a house, prefer to show year + house. If no year, only show house.
|
||||||
if (student.house) {
|
if (student.house) {
|
||||||
text = `${student.year ?? ""}${student.house}`;
|
text = `${student.year ?? ""}${student.house}`;
|
||||||
|
|
||||||
|
// If house_colour exists, compute colour
|
||||||
if (student.house_colour) {
|
if (student.house_colour) {
|
||||||
houseelement.style.background = student.house_colour;
|
houseelement.style.background = student.house_colour;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const colorresult = GetThresholdOfColor(student.house_colour);
|
const colorresult = GetThresholdOfColor(student.house_colour);
|
||||||
houseelement.style.color =
|
houseelement.style.color =
|
||||||
colorresult && colorresult > 300 ? "black" : "white";
|
colorresult && colorresult > 300 ? "black" : "white";
|
||||||
} catch {
|
|
||||||
// Invalid color format, leave text color as default
|
} catch (err) {
|
||||||
|
// Colour calculation failed, no text colour set
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else if (student.year) {
|
} else if (student.year) {
|
||||||
|
// No house, only year will be shown
|
||||||
text = student.year;
|
text = student.year;
|
||||||
}
|
}
|
||||||
|
|
||||||
houseelement.innerText = text;
|
houseelement.innerText = text;
|
||||||
houseelement.style.display = text ? "block" : "none";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function createNewsButton(fragment: DocumentFragment, menu: HTMLElement) {
|
function createNewsButton(fragment: DocumentFragment, menu: HTMLElement) {
|
||||||
fragment.appendChild(
|
const NewsButtonStr =
|
||||||
stringToHTML(
|
'<li class="item" data-key="news" id="newsbutton" data-path="/news" data-betterseqta="true"><label><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M20 3H4C2.89 3 2 3.89 2 5V19C2 20.11 2.89 21 4 21H20C21.11 21 22 20.11 22 19V5C22 3.89 21.11 3 20 3M5 7H10V13H5V7M19 17H5V15H19V17M19 13H12V11H19V13M19 9H12V7H19V9Z" /></svg><span>News</span></label></li>';
|
||||||
'<li class="item" data-key="news" id="newsbutton" data-path="/news" data-betterseqta="true"><label><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M20 3H4C2.89 3 2 3.89 2 5V19C2 20.11 2.89 21 4 21H20C21.11 21 22 20.11 22 19V5C22 3.89 21.11 3 20 3M5 7H10V13H5V7M19 17H5V15H19V17M19 13H12V11H19V13M19 9H12V7H19V9Z" /></svg><span>News</span></label></li>',
|
const NewsButton = stringToHTML(NewsButtonStr);
|
||||||
).firstChild!,
|
|
||||||
);
|
|
||||||
|
|
||||||
const iconCover = document.createElement("div");
|
if (NewsButton.firstChild) {
|
||||||
|
fragment.appendChild(NewsButton.firstChild);
|
||||||
|
}
|
||||||
|
|
||||||
|
let iconCover = document.createElement("div");
|
||||||
iconCover.classList.add("icon-cover");
|
iconCover.classList.add("icon-cover");
|
||||||
iconCover.id = "icon-cover";
|
iconCover.id = "icon-cover";
|
||||||
menu.appendChild(iconCover);
|
menu.appendChild(iconCover);
|
||||||
@@ -225,27 +224,22 @@ function setupEventListeners() {
|
|||||||
const homebutton = document.getElementById("homebutton");
|
const homebutton = document.getElementById("homebutton");
|
||||||
const newsbutton = document.getElementById("newsbutton");
|
const newsbutton = document.getElementById("newsbutton");
|
||||||
|
|
||||||
const activateMenuAction = (button: HTMLElement, action: () => void) => {
|
|
||||||
if (
|
|
||||||
button.classList.contains("draggable") ||
|
|
||||||
button.classList.contains("active")
|
|
||||||
) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
action();
|
|
||||||
};
|
|
||||||
|
|
||||||
homebutton?.addEventListener("click", function () {
|
homebutton?.addEventListener("click", function () {
|
||||||
activateMenuAction(homebutton, () => {
|
if (
|
||||||
|
!homebutton.classList.contains("draggable") &&
|
||||||
|
!homebutton.classList.contains("active")
|
||||||
|
) {
|
||||||
loadHomePage();
|
loadHomePage();
|
||||||
});
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
newsbutton?.addEventListener("click", function () {
|
newsbutton?.addEventListener("click", function () {
|
||||||
activateMenuAction(newsbutton, () => {
|
if (
|
||||||
|
!newsbutton.classList.contains("draggable") &&
|
||||||
|
!newsbutton.classList.contains("active")
|
||||||
|
) {
|
||||||
SendNewsPage();
|
SendNewsPage();
|
||||||
});
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
menuCover?.addEventListener("click", function () {
|
menuCover?.addEventListener("click", function () {
|
||||||
@@ -258,42 +252,46 @@ function setupEventListeners() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function createSettingsButton() {
|
async function createSettingsButton() {
|
||||||
document.getElementById("content")!.append(
|
let SettingsButton = stringToHTML(/* html */ `
|
||||||
stringToHTML(/* html */ `
|
|
||||||
<button class="addedButton tooltip" id="AddedSettings">
|
<button class="addedButton tooltip" id="AddedSettings">
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24">
|
<svg width="24" height="24" viewBox="0 0 24 24">
|
||||||
<g><g><path d="M23.182,6.923c-.29,0-3.662,2.122-4.142,2.4l-2.8-1.555V4.511l4.257-2.456a.518.518,0,0,0,.233-.408.479.479,0,0,0-.233-.407,6.511,6.511,0,1,0-3.327,12.107,6.582,6.582,0,0,0,6.148-4.374,5.228,5.228,0,0,0,.333-1.542A.461.461,0,0,0,23.182,6.923Z"></path><path d="M9.73,10.418,7.376,12.883c-.01.01-.021.016-.03.025L1.158,19.1a2.682,2.682,0,1,0,3.793,3.793l4.583-4.582,0,0,4.1-4.005-.037-.037A9.094,9.094,0,0,1,9.73,10.418ZM3.053,21.888A.894.894,0,1,1,3.946,21,.893.893,0,0,1,3.053,21.888Z"></path></g></g>
|
<g><g><path d="M23.182,6.923c-.29,0-3.662,2.122-4.142,2.4l-2.8-1.555V4.511l4.257-2.456a.518.518,0,0,0,.233-.408.479.479,0,0,0-.233-.407,6.511,6.511,0,1,0-3.327,12.107,6.582,6.582,0,0,0,6.148-4.374,5.228,5.228,0,0,0,.333-1.542A.461.461,0,0,0,23.182,6.923Z"></path><path d="M9.73,10.418,7.376,12.883c-.01.01-.021.016-.03.025L1.158,19.1a2.682,2.682,0,1,0,3.793,3.793l4.583-4.582,0,0,4.1-4.005-.037-.037A9.094,9.094,0,0,1,9.73,10.418ZM3.053,21.888A.894.894,0,1,1,3.946,21,.893.893,0,0,1,3.053,21.888Z"></path></g></g>
|
||||||
</svg>
|
</svg>
|
||||||
${settingsState.onoff ? '<div class="tooltiptext topmenutooltip">BetterSEQTA+ Settings</div>' : ""}
|
${settingsState.onoff ? '<div class="tooltiptext topmenutooltip">BetterSEQTA+ Settings</div>' : ""}
|
||||||
</button>
|
</button>
|
||||||
`).firstChild!,
|
`);
|
||||||
);
|
let ContentDiv = document.getElementById("content");
|
||||||
|
ContentDiv!.append(SettingsButton.firstChild!);
|
||||||
}
|
}
|
||||||
|
|
||||||
function GetLightDarkModeString() {
|
function GetLightDarkModeString() {
|
||||||
return settingsState.DarkMode
|
if (settingsState.DarkMode) {
|
||||||
? "Switch to light theme"
|
return "Switch to light theme";
|
||||||
: "Switch to dark theme";
|
} else {
|
||||||
|
return "Switch to dark theme";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function addDarkLightToggle() {
|
async function addDarkLightToggle() {
|
||||||
|
const tooltipString = GetLightDarkModeString();
|
||||||
const SUN_ICON_SVG = /* html */ `<defs><clipPath id="__lottie_element_80"><rect width="24" height="24" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#__lottie_element_80)"><g style="display: block;" transform="matrix(1,0,0,1,12,12)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill-opacity="1" d=" M0,-4 C-2.2100000381469727,-4 -4,-2.2100000381469727 -4,0 C-4,2.2100000381469727 -2.2100000381469727,4 0,4 C2.2100000381469727,4 4,2.2100000381469727 4,0 C4,-2.2100000381469727 2.2100000381469727,-4 0,-4z"></path></g></g><g style="display: block;" transform="matrix(1,0,0,1,12,12)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill-opacity="1" d=" M0,6 C-3.309999942779541,6 -6,3.309999942779541 -6,0 C-6,-3.309999942779541 -3.309999942779541,-6 0,-6 C3.309999942779541,-6 6,-3.309999942779541 6,0 C6,3.309999942779541 3.309999942779541,6 0,6z M8,-3.309999942779541 C8,-3.309999942779541 8,-8 8,-8 C8,-8 3.309999942779541,-8 3.309999942779541,-8 C3.309999942779541,-8 0,-11.3100004196167 0,-11.3100004196167 C0,-11.3100004196167 -3.309999942779541,-8 -3.309999942779541,-8 C-3.309999942779541,-8 -8,-8 -8,-8 C-8,-8 -8,-3.309999942779541 -8,-3.309999942779541 C-8,-3.309999942779541 -11.3100004196167,0 -11.3100004196167,0 C-11.3100004196167,0 -8,3.309999942779541 -8,3.309999942779541 C-8,3.309999942779541 -8,8 -8,8 C-8,8 -3.309999942779541,8 -3.309999942779541,8 C-3.309999942779541,8 0,11.3100004196167 0,11.3100004196167 C0,11.3100004196167 3.309999942779541,8 3.309999942779541,8 C3.309999942779541,8 8,8 8,8 C8,8 8,3.309999942779541 8,3.309999942779541 C8,3.309999942779541 11.3100004196167,0 11.3100004196167,0 C11.3100004196167,0 8,-3.309999942779541 8,-3.309999942779541z"></path></g></g></g>`;
|
const SUN_ICON_SVG = /* html */ `<defs><clipPath id="__lottie_element_80"><rect width="24" height="24" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#__lottie_element_80)"><g style="display: block;" transform="matrix(1,0,0,1,12,12)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill-opacity="1" d=" M0,-4 C-2.2100000381469727,-4 -4,-2.2100000381469727 -4,0 C-4,2.2100000381469727 -2.2100000381469727,4 0,4 C2.2100000381469727,4 4,2.2100000381469727 4,0 C4,-2.2100000381469727 2.2100000381469727,-4 0,-4z"></path></g></g><g style="display: block;" transform="matrix(1,0,0,1,12,12)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill-opacity="1" d=" M0,6 C-3.309999942779541,6 -6,3.309999942779541 -6,0 C-6,-3.309999942779541 -3.309999942779541,-6 0,-6 C3.309999942779541,-6 6,-3.309999942779541 6,0 C6,3.309999942779541 3.309999942779541,6 0,6z M8,-3.309999942779541 C8,-3.309999942779541 8,-8 8,-8 C8,-8 3.309999942779541,-8 3.309999942779541,-8 C3.309999942779541,-8 0,-11.3100004196167 0,-11.3100004196167 C0,-11.3100004196167 -3.309999942779541,-8 -3.309999942779541,-8 C-3.309999942779541,-8 -8,-8 -8,-8 C-8,-8 -8,-3.309999942779541 -8,-3.309999942779541 C-8,-3.309999942779541 -11.3100004196167,0 -11.3100004196167,0 C-11.3100004196167,0 -8,3.309999942779541 -8,3.309999942779541 C-8,3.309999942779541 -8,8 -8,8 C-8,8 -3.309999942779541,8 -3.309999942779541,8 C-3.309999942779541,8 0,11.3100004196167 0,11.3100004196167 C0,11.3100004196167 3.309999942779541,8 3.309999942779541,8 C3.309999942779541,8 8,8 8,8 C8,8 8,3.309999942779541 8,3.309999942779541 C8,3.309999942779541 11.3100004196167,0 11.3100004196167,0 C11.3100004196167,0 8,-3.309999942779541 8,-3.309999942779541z"></path></g></g></g>`;
|
||||||
const MOON_ICON_SVG = /* html */ `<defs><clipPath id="__lottie_element_263"><rect width="24" height="24" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#__lottie_element_263)"><g style="display: block;" transform="matrix(1.5,0,0,1.5,7,12)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill-opacity="1" d=" M0,-4 C-2.2100000381469727,-4 -1.2920000553131104,-2.2100000381469727 -1.2920000553131104,0 C-1.2920000553131104,2.2100000381469727 -2.2100000381469727,4 0,4 C2.2100000381469727,4 4,2.2100000381469727 4,0 C4,-2.2100000381469727 2.2100000381469727,-4 0,-4z"></path></g></g><g style="display: block;" transform="matrix(-1,0,0,-1,12,12)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill-opacity="1" d=" M0,6 C-3.309999942779541,6 -6,3.309999942779541 -6,0 C-6,-3.309999942779541 -3.309999942779541,-6 0,-6 C3.309999942779541,-6 6,-3.309999942779541 6,0 C6,3.309999942779541 3.309999942779541,6 0,6z M8,-3.309999942779541 C8,-3.309999942779541 8,-8 8,-8 C8,-8 3.309999942779541,-8 3.309999942779541,-8 C3.309999942779541,-8 0,-11.3100004196167 0,-11.3100004196167 C0,-11.3100004196167 -3.309999942779541,-8 -3.309999942779541,-8 C-3.309999942779541,-8 -8,-8 -8,-8 C-8,-8 -8,-3.309999942779541 -8,-3.309999942779541 C-8,-3.309999942779541 -11.3100004196167,0 -11.3100004196167,0 C-11.3100004196167,0 -8,3.309999942779541 -8,3.309999942779541 C-8,3.309999942779541 -8,8 -8,8 C-8,8 -3.309999942779541,8 -3.309999942779541,8 C-3.309999942779541,8 0,11.3100004196167 0,11.3100004196167 C0,11.3100004196167 3.309999942779541,8 3.309999942779541,8 C3.309999942779541,8 8,8 8,8 C8,8 8,3.309999942779541 8,3.309999942779541 C8,3.309999942779541 11.3100004196167,0 11.3100004196167,0 C11.3100004196167,0 8,-3.309999942779541 8,-3.309999942779541z"></path></g></g></g>`;
|
const MOON_ICON_SVG = /* html */ `<defs><clipPath id="__lottie_element_263"><rect width="24" height="24" x="0" y="0"></rect></clipPath></defs><g clip-path="url(#__lottie_element_263)"><g style="display: block;" transform="matrix(1.5,0,0,1.5,7,12)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill-opacity="1" d=" M0,-4 C-2.2100000381469727,-4 -1.2920000553131104,-2.2100000381469727 -1.2920000553131104,0 C-1.2920000553131104,2.2100000381469727 -2.2100000381469727,4 0,4 C2.2100000381469727,4 4,2.2100000381469727 4,0 C4,-2.2100000381469727 2.2100000381469727,-4 0,-4z"></path></g></g><g style="display: block;" transform="matrix(-1,0,0,-1,12,12)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill-opacity="1" d=" M0,6 C-3.309999942779541,6 -6,3.309999942779541 -6,0 C-6,-3.309999942779541 -3.309999942779541,-6 0,-6 C3.309999942779541,-6 6,-3.309999942779541 6,0 C6,3.309999942779541 3.309999942779541,6 0,6z M8,-3.309999942779541 C8,-3.309999942779541 8,-8 8,-8 C8,-8 3.309999942779541,-8 3.309999942779541,-8 C3.309999942779541,-8 0,-11.3100004196167 0,-11.3100004196167 C0,-11.3100004196167 -3.309999942779541,-8 -3.309999942779541,-8 C-3.309999942779541,-8 -8,-8 -8,-8 C-8,-8 -8,-3.309999942779541 -8,-3.309999942779541 C-8,-3.309999942779541 -11.3100004196167,0 -11.3100004196167,0 C-11.3100004196167,0 -8,3.309999942779541 -8,3.309999942779541 C-8,3.309999942779541 -8,8 -8,8 C-8,8 -3.309999942779541,8 -3.309999942779541,8 C-3.309999942779541,8 0,11.3100004196167 0,11.3100004196167 C0,11.3100004196167 3.309999942779541,8 3.309999942779541,8 C3.309999942779541,8 8,8 8,8 C8,8 8,3.309999942779541 8,3.309999942779541 C8,3.309999942779541 11.3100004196167,0 11.3100004196167,0 C11.3100004196167,0 8,-3.309999942779541 8,-3.309999942779541z"></path></g></g></g>`;
|
||||||
|
|
||||||
document.getElementById("content")!.append(
|
const initialSvgContent = settingsState.DarkMode ? SUN_ICON_SVG : MOON_ICON_SVG;
|
||||||
stringToHTML(/* html */ `
|
|
||||||
|
const LightDarkModeButton = stringToHTML(/* html */ `
|
||||||
<button class="addedButton DarkLightButton tooltip" id="LightDarkModeButton">
|
<button class="addedButton DarkLightButton tooltip" id="LightDarkModeButton">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg">${settingsState.DarkMode ? SUN_ICON_SVG : MOON_ICON_SVG}</svg>
|
<svg xmlns="http://www.w3.org/2000/svg">${initialSvgContent}</svg>
|
||||||
<div class="tooltiptext topmenutooltip" id="darklighttooliptext">${GetLightDarkModeString()}</div>
|
<div class="tooltiptext topmenutooltip" id="darklighttooliptext">${tooltipString}</div>
|
||||||
</button>
|
</button>
|
||||||
`).firstChild!,
|
`);
|
||||||
);
|
|
||||||
|
let ContentDiv = document.getElementById("content");
|
||||||
|
ContentDiv!.append(LightDarkModeButton.firstChild!);
|
||||||
|
|
||||||
updateAllColors();
|
updateAllColors();
|
||||||
|
|
||||||
const lightDarkModeButtonElement = document.getElementById(
|
const lightDarkModeButtonElement = document.getElementById("LightDarkModeButton")!;
|
||||||
"LightDarkModeButton",
|
|
||||||
)!;
|
|
||||||
|
|
||||||
lightDarkModeButtonElement.addEventListener("click", async () => {
|
lightDarkModeButtonElement.addEventListener("click", async () => {
|
||||||
const darklightText = document.getElementById("darklighttooliptext");
|
const darklightText = document.getElementById("darklighttooliptext");
|
||||||
@@ -305,6 +303,7 @@ async function addDarkLightToggle() {
|
|||||||
LightDarkModeSnakeEggButton = 0;
|
LightDarkModeSnakeEggButton = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
if (
|
if (
|
||||||
settingsState.originalDarkMode !== undefined &&
|
settingsState.originalDarkMode !== undefined &&
|
||||||
settingsState.selectedTheme
|
settingsState.selectedTheme
|
||||||
@@ -315,237 +314,38 @@ async function addDarkLightToggle() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (!document.startViewTransition || !settingsState.animations || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
||||||
settingsState.DarkMode = !settingsState.DarkMode;
|
settingsState.DarkMode = !settingsState.DarkMode;
|
||||||
updateAllColors();
|
updateAllColors();
|
||||||
|
|
||||||
const svgElement = lightDarkModeButtonElement.querySelector("svg")!;
|
const newSvgContent = settingsState.DarkMode ? SUN_ICON_SVG : MOON_ICON_SVG;
|
||||||
svgElement.innerHTML = settingsState.DarkMode
|
const svgElement = lightDarkModeButtonElement.querySelector("svg");
|
||||||
? SUN_ICON_SVG
|
if (svgElement) svgElement.innerHTML = newSvgContent;
|
||||||
: MOON_ICON_SVG;
|
darklightText!.innerText = GetLightDarkModeString();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
settingsState.DarkMode = !settingsState.DarkMode;
|
||||||
|
|
||||||
|
updateAllColors();
|
||||||
|
|
||||||
|
const newSvgContent = settingsState.DarkMode ? SUN_ICON_SVG : MOON_ICON_SVG;
|
||||||
|
const svgElement = lightDarkModeButtonElement.querySelector("svg");
|
||||||
|
if (svgElement) svgElement.innerHTML = newSvgContent;
|
||||||
|
|
||||||
darklightText!.innerText = GetLightDarkModeString();
|
darklightText!.innerText = GetLightDarkModeString();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function customizeMenuToggle() {
|
function customizeMenuToggle() {
|
||||||
const menuToggle = document.getElementById("menuToggle")!;
|
const menuToggle = document.getElementById("menuToggle");
|
||||||
|
if (menuToggle) {
|
||||||
menuToggle.innerHTML = "";
|
menuToggle.innerHTML = "";
|
||||||
|
}
|
||||||
|
|
||||||
for (let i = 0; i < 3; i++) {
|
for (let i = 0; i < 3; i++) {
|
||||||
const line = document.createElement("div");
|
const line = document.createElement("div");
|
||||||
line.className = "hamburger-line";
|
line.className = "hamburger-line";
|
||||||
menuToggle.appendChild(line);
|
menuToggle!.appendChild(line);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupSidebarAccessibility() {
|
|
||||||
updateSidebarAccessibility();
|
|
||||||
|
|
||||||
const menu = document.getElementById("menu");
|
|
||||||
if (!menu) return;
|
|
||||||
|
|
||||||
sidebarAccessibilityObserver?.disconnect();
|
|
||||||
sidebarAccessibilityObserver = new MutationObserver(() => {
|
|
||||||
scheduleSidebarAccessibilityUpdate();
|
|
||||||
});
|
|
||||||
sidebarAccessibilityObserver.observe(menu, {
|
|
||||||
subtree: true,
|
|
||||||
childList: true,
|
|
||||||
attributes: true,
|
|
||||||
attributeFilter: ["class", "style"],
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!sidebarAccessibilityListenersAttached) {
|
|
||||||
document.addEventListener("keydown", handleSidebarKeyboardActivation);
|
|
||||||
sidebarAccessibilityListenersAttached = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function scheduleSidebarAccessibilityUpdate() {
|
|
||||||
if (sidebarTabOrderAnimationFrame !== null) {
|
|
||||||
cancelAnimationFrame(sidebarTabOrderAnimationFrame);
|
|
||||||
}
|
|
||||||
|
|
||||||
sidebarTabOrderAnimationFrame = requestAnimationFrame(() => {
|
|
||||||
sidebarTabOrderAnimationFrame = null;
|
|
||||||
updateSidebarAccessibility();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleSidebarKeyboardActivation(event: KeyboardEvent) {
|
|
||||||
const target = event.target;
|
|
||||||
if (!(target instanceof HTMLElement)) return;
|
|
||||||
|
|
||||||
const menuItem = target.closest("#menu li, #menu section") as
|
|
||||||
| HTMLElement
|
|
||||||
| null;
|
|
||||||
if (!menuItem || target !== menuItem) return;
|
|
||||||
|
|
||||||
if (event.key === "Tab") {
|
|
||||||
const menu = document.getElementById("menu");
|
|
||||||
if (!menu) return;
|
|
||||||
|
|
||||||
const visibleList = getVisibleSidebarList(menu);
|
|
||||||
if (!visibleList) return;
|
|
||||||
|
|
||||||
const visibleEntries = getDirectSidebarEntries(visibleList);
|
|
||||||
if (visibleEntries.length === 0) return;
|
|
||||||
|
|
||||||
const boundaryEntry = event.shiftKey
|
|
||||||
? visibleEntries[0]
|
|
||||||
: visibleEntries[visibleEntries.length - 1];
|
|
||||||
|
|
||||||
if (boundaryEntry !== menuItem) return;
|
|
||||||
|
|
||||||
const parentEntry = getSidebarListParentEntry(visibleList);
|
|
||||||
if (!parentEntry) return;
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
parentEntry.classList.remove("active");
|
|
||||||
scheduleSidebarAccessibilityUpdate();
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
parentEntry.focus();
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event.key !== "Enter" && event.key !== " ") return;
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
const childSubmenu = menuItem.querySelector(":scope > .sub > ul") as
|
|
||||||
| HTMLElement
|
|
||||||
| null;
|
|
||||||
|
|
||||||
menuItem.click();
|
|
||||||
scheduleSidebarAccessibilityUpdate();
|
|
||||||
|
|
||||||
if (childSubmenu) {
|
|
||||||
focusFirstSidebarSubmenuEntry(menuItem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateSidebarAccessibility() {
|
|
||||||
const menu = document.getElementById("menu");
|
|
||||||
if (!menu) return;
|
|
||||||
|
|
||||||
const visibleEntries = new Set(getVisibleSidebarEntries(menu));
|
|
||||||
const menuEntries = menu.querySelectorAll("li.item, section.item, li, section");
|
|
||||||
|
|
||||||
for (const entry of menuEntries) {
|
|
||||||
if (!(entry instanceof HTMLElement)) continue;
|
|
||||||
|
|
||||||
const label = entry.querySelector(":scope > label") as HTMLLabelElement | null;
|
|
||||||
if (!label) continue;
|
|
||||||
|
|
||||||
const childSubmenu = entry.querySelector(":scope > .sub") as HTMLElement | null;
|
|
||||||
const isHidden =
|
|
||||||
entry.offsetParent === null ||
|
|
||||||
window.getComputedStyle(entry).display === "none" ||
|
|
||||||
window.getComputedStyle(label).display === "none" ||
|
|
||||||
!visibleEntries.has(entry);
|
|
||||||
|
|
||||||
if (isHidden) {
|
|
||||||
entry.tabIndex = -1;
|
|
||||||
label.tabIndex = -1;
|
|
||||||
entry.setAttribute("aria-hidden", "true");
|
|
||||||
label.setAttribute("aria-hidden", "true");
|
|
||||||
if (childSubmenu) {
|
|
||||||
childSubmenu.setAttribute("aria-hidden", "true");
|
|
||||||
}
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
entry.tabIndex = 0;
|
|
||||||
label.tabIndex = -1;
|
|
||||||
entry.removeAttribute("aria-hidden");
|
|
||||||
label.removeAttribute("aria-hidden");
|
|
||||||
|
|
||||||
if (!entry.hasAttribute("role")) {
|
|
||||||
entry.setAttribute("role", "button");
|
|
||||||
}
|
|
||||||
|
|
||||||
const accessibleLabel = label.textContent?.trim();
|
|
||||||
if (accessibleLabel) {
|
|
||||||
entry.setAttribute("aria-label", accessibleLabel);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (childSubmenu) {
|
|
||||||
const isExpanded = entry.classList.contains("active");
|
|
||||||
entry.setAttribute("aria-expanded", String(isExpanded));
|
|
||||||
childSubmenu.setAttribute("aria-hidden", String(!isExpanded));
|
|
||||||
} else {
|
|
||||||
entry.removeAttribute("aria-expanded");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getVisibleSidebarEntries(menu = document.getElementById("menu")) {
|
|
||||||
if (!menu) return [] as HTMLElement[];
|
|
||||||
|
|
||||||
const visibleList = getVisibleSidebarList(menu);
|
|
||||||
if (!visibleList) return [] as HTMLElement[];
|
|
||||||
|
|
||||||
return getDirectSidebarEntries(visibleList);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getDirectSidebarEntries(list: HTMLElement) {
|
|
||||||
return Array.from(list.querySelectorAll(":scope > li, :scope > section")).filter(
|
|
||||||
(entry): entry is HTMLElement => entry instanceof HTMLElement,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getVisibleSidebarList(menu: HTMLElement) {
|
|
||||||
let currentList = menu.querySelector(":scope > ul") as HTMLElement | null;
|
|
||||||
|
|
||||||
while (currentList) {
|
|
||||||
const activeSubmenuParent = currentList.querySelector(
|
|
||||||
":scope > li.hasChildren.active, :scope > section.hasChildren.active",
|
|
||||||
) as HTMLElement | null;
|
|
||||||
|
|
||||||
if (!activeSubmenuParent) {
|
|
||||||
return currentList;
|
|
||||||
}
|
|
||||||
|
|
||||||
const nextList = activeSubmenuParent.querySelector(
|
|
||||||
":scope > .sub > ul",
|
|
||||||
) as HTMLElement | null;
|
|
||||||
|
|
||||||
if (!nextList) {
|
|
||||||
return currentList;
|
|
||||||
}
|
|
||||||
|
|
||||||
currentList = nextList;
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getSidebarListParentEntry(list: HTMLElement) {
|
|
||||||
return list.closest(".sub")?.parentElement instanceof HTMLElement
|
|
||||||
? (list.closest(".sub")!.parentElement as HTMLElement)
|
|
||||||
: null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function focusFirstSidebarSubmenuEntry(parentEntry: HTMLElement) {
|
|
||||||
const menu = document.getElementById("menu");
|
|
||||||
if (!menu) return;
|
|
||||||
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
if (!parentEntry.classList.contains("active")) return;
|
|
||||||
|
|
||||||
const visibleList = getVisibleSidebarList(menu);
|
|
||||||
if (!visibleList || getSidebarListParentEntry(visibleList) !== parentEntry) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const firstEntry = getDirectSidebarEntries(visibleList).find(
|
|
||||||
(entry) =>
|
|
||||||
entry.offsetParent !== null &&
|
|
||||||
window.getComputedStyle(entry).display !== "none",
|
|
||||||
);
|
|
||||||
|
|
||||||
firstEntry?.focus({ preventScroll: true });
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,10 +1,8 @@
|
|||||||
import browser from "webextension-polyfill";
|
import browser from "webextension-polyfill";
|
||||||
import Color from "color";
|
|
||||||
import { GetThresholdOfColor } from "@/seqta/ui/colors/getThresholdColour";
|
import { GetThresholdOfColor } from "@/seqta/ui/colors/getThresholdColour";
|
||||||
import { lightenAndPaleColor } from "./lightenAndPaleColor";
|
import { lightenAndPaleColor } from "./lightenAndPaleColor";
|
||||||
import ColorLuminance from "./ColorLuminance";
|
import ColorLuminance from "./ColorLuminance";
|
||||||
import { settingsState } from "@/seqta/utils/listeners/SettingsState";
|
import { settingsState } from "@/seqta/utils/listeners/SettingsState";
|
||||||
import { getAdaptiveColour } from "@/seqta/utils/adaptiveThemeColour";
|
|
||||||
|
|
||||||
import darkLogo from "@/resources/icons/betterseqta-light-full.png";
|
import darkLogo from "@/resources/icons/betterseqta-light-full.png";
|
||||||
import lightLogo from "@/resources/icons/betterseqta-dark-full.png";
|
import lightLogo from "@/resources/icons/betterseqta-dark-full.png";
|
||||||
@@ -15,7 +13,13 @@ const setCSSVar = (varName: any, value: any) =>
|
|||||||
const applyProperties = (props: any) =>
|
const applyProperties = (props: any) =>
|
||||||
Object.entries(props).forEach(([key, value]) => setCSSVar(key, value));
|
Object.entries(props).forEach(([key, value]) => setCSSVar(key, value));
|
||||||
|
|
||||||
function applyColorsWith(selectedColor: string) {
|
export function updateAllColors() {
|
||||||
|
// Determine the color to use
|
||||||
|
const selectedColor =
|
||||||
|
settingsState.selectedColor !== ""
|
||||||
|
? settingsState.selectedColor
|
||||||
|
: "#007bff";
|
||||||
|
|
||||||
if (settingsState.transparencyEffects) {
|
if (settingsState.transparencyEffects) {
|
||||||
document.documentElement.classList.add("transparencyEffects");
|
document.documentElement.classList.add("transparencyEffects");
|
||||||
}
|
}
|
||||||
@@ -24,7 +28,7 @@ function applyColorsWith(selectedColor: string) {
|
|||||||
const commonProps = {
|
const commonProps = {
|
||||||
"--better-sub": "#161616",
|
"--better-sub": "#161616",
|
||||||
"--better-alert-highlight": "#c61851",
|
"--better-alert-highlight": "#c61851",
|
||||||
"--better-main": selectedColor,
|
"--better-main": settingsState.selectedColor,
|
||||||
};
|
};
|
||||||
|
|
||||||
// Mode-based properties, applied if storedSetting is provided
|
// Mode-based properties, applied if storedSetting is provided
|
||||||
@@ -75,29 +79,3 @@ function applyColorsWith(selectedColor: string) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function toSoftGradient(hex: string): string {
|
|
||||||
const base = Color(hex);
|
|
||||||
const analogous = base.rotate(30).lighten(0.25).saturate(0.15);
|
|
||||||
const mid = base.mix(analogous, 0.5).hex();
|
|
||||||
return `linear-gradient(135deg, ${hex} 0%, ${mid} 50%, ${analogous.hex()} 100%)`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updateAllColors() {
|
|
||||||
let effectiveColor =
|
|
||||||
settingsState.selectedColor !== ""
|
|
||||||
? settingsState.selectedColor
|
|
||||||
: "#007bff";
|
|
||||||
|
|
||||||
if (settingsState.adaptiveThemeColour) {
|
|
||||||
const adaptiveColor = await getAdaptiveColour();
|
|
||||||
if (adaptiveColor) {
|
|
||||||
effectiveColor =
|
|
||||||
settingsState.adaptiveThemeGradient
|
|
||||||
? toSoftGradient(adaptiveColor)
|
|
||||||
: adaptiveColor;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
applyColorsWith(effectiveColor);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,8 +1,6 @@
|
|||||||
interface ElementConfig {
|
interface ElementConfig {
|
||||||
selector: string;
|
selector: string;
|
||||||
action: (element: Element) => void;
|
action: (element: Element) => void;
|
||||||
/** When true, element is not added to processedElements so the action runs every time (e.g. overwriting container content) */
|
|
||||||
alwaysRun?: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ContentConfig {
|
interface ContentConfig {
|
||||||
@@ -79,18 +77,6 @@ const contentConfig: ContentConfig = {
|
|||||||
element.textContent = getRandomElement(mockData.assessmentTitles);
|
element.textContent = getRandomElement(mockData.assessmentTitles);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
assessmentTitleInTooltip: {
|
|
||||||
selector: ".assessmenttooltip .tooltiptext p",
|
|
||||||
action: (element) => {
|
|
||||||
element.textContent = getRandomElement(mockData.assessmentTitles);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
assessmentTitleInDetail: {
|
|
||||||
selector: "[class*='AssessmentItem__title___'], .assessment-title",
|
|
||||||
action: (element) => {
|
|
||||||
element.textContent = getRandomElement(mockData.assessmentTitles);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
assessmentSubject: {
|
assessmentSubject: {
|
||||||
selector: ".upcoming-assessment .upcoming-details h5",
|
selector: ".upcoming-assessment .upcoming-details h5",
|
||||||
action: (element) => {
|
action: (element) => {
|
||||||
@@ -106,8 +92,7 @@ const contentConfig: ContentConfig = {
|
|||||||
noticeContent: {
|
noticeContent: {
|
||||||
selector: ".notice .contents",
|
selector: ".notice .contents",
|
||||||
action: (element) => {
|
action: (element) => {
|
||||||
element.textContent =
|
element.textContent = "Content has been redacted for privacy.";
|
||||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
upcomingCheckboxes: {
|
upcomingCheckboxes: {
|
||||||
@@ -150,7 +135,7 @@ const contentConfig: ContentConfig = {
|
|||||||
selector:
|
selector:
|
||||||
'[class*="MessageList__recipients___"] [class*="MessageList__value___"]',
|
'[class*="MessageList__recipients___"] [class*="MessageList__value___"]',
|
||||||
action: (element) => {
|
action: (element) => {
|
||||||
element.textContent = getRandomElement(mockData.messages.recipients);
|
element.textContent = "Recipient(s) Redacted";
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -190,15 +175,16 @@ const contentConfig: ContentConfig = {
|
|||||||
documentNames: {
|
documentNames: {
|
||||||
selector: ".document td.title",
|
selector: ".document td.title",
|
||||||
action: (element) => {
|
action: (element) => {
|
||||||
element.textContent = getRandomElement(mockData.documentTitles);
|
element.textContent = "Document Name Redacted";
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
forumTopics: {
|
forumTopics: {
|
||||||
selector: "#menu .sub ul li:not([data-colour]):not(.hasChildren) label",
|
selector: "#menu .sub ul li:not([data-colour]):not(.hasChildren) label",
|
||||||
action: (element) => {
|
action: (element) => {
|
||||||
|
// Only redact if not in assessments section
|
||||||
const assessmentsSection = element.closest('[data-key="assessments"]');
|
const assessmentsSection = element.closest('[data-key="assessments"]');
|
||||||
if (!assessmentsSection) {
|
if (!assessmentsSection) {
|
||||||
element.textContent = getRandomElement(mockData.forumTopics);
|
element.textContent = "Forum Topic Redacted";
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@@ -224,27 +210,25 @@ const contentConfig: ContentConfig = {
|
|||||||
courseNames: {
|
courseNames: {
|
||||||
selector: "#menu .sub ul li[data-colour] label",
|
selector: "#menu .sub ul li[data-colour] label",
|
||||||
action: (element) => {
|
action: (element) => {
|
||||||
element.textContent = getRandomElement(mockData.subjects);
|
element.textContent = "Course Name Redacted";
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
yearGroups: {
|
yearGroups: {
|
||||||
selector: "#menu .sub > ul > li > label",
|
selector: "#menu .sub > ul > li > label",
|
||||||
action: (element) => {
|
action: (element) => {
|
||||||
const yearGroup = Math.floor(Math.random() * 5) + 8;
|
element.textContent = "Year Group Redacted";
|
||||||
element.textContent = `Year ${yearGroup}`;
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
newsArticleTitle: {
|
newsArticleTitle: {
|
||||||
selector: ".ArticleText a",
|
selector: ".ArticleText a",
|
||||||
action: (element) => {
|
action: (element) => {
|
||||||
element.textContent = getRandomElement(mockData.notices);
|
element.textContent = "News Article Title Redacted";
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
newsArticleContent: {
|
newsArticleContent: {
|
||||||
selector: ".ArticleText p",
|
selector: ".ArticleText p",
|
||||||
action: (element) => {
|
action: (element) => {
|
||||||
element.textContent =
|
element.textContent = "News Article Content Redacted";
|
||||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
userHouse: {
|
userHouse: {
|
||||||
@@ -253,45 +237,6 @@ const contentConfig: ContentConfig = {
|
|||||||
element.textContent = "House";
|
element.textContent = "House";
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// Timetable page: replace class names, teachers, rooms with fake data
|
|
||||||
timetableEntryTitle: {
|
|
||||||
selector: ".timetablepage .entry .title",
|
|
||||||
action: (element) => {
|
|
||||||
element.textContent = getRandomElement(mockData.subjects);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
timetableEntryTeacher: {
|
|
||||||
selector: ".timetablepage .entry .teacher, .timetablepage .quickbar .meta .teacher",
|
|
||||||
action: (element) => {
|
|
||||||
element.textContent = getRandomElement(mockData.teachers);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
timetableEntryRoom: {
|
|
||||||
selector: ".timetablepage .entry .room, .timetablepage .quickbar .meta .room",
|
|
||||||
action: (element) => {
|
|
||||||
element.textContent = getRandomElement(mockData.classrooms);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
quickbarTitle: {
|
|
||||||
selector: ".timetablepage .quickbar .title",
|
|
||||||
action: (element) => {
|
|
||||||
element.textContent = getRandomElement(mockData.subjects);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
// Home page: replace entire day with mock schedule (care + 7 lessons 8:55–3:15)
|
|
||||||
homeDayContainer: {
|
|
||||||
selector: "#day-container",
|
|
||||||
alwaysRun: true,
|
|
||||||
action: (element) => {
|
|
||||||
const container = element as HTMLElement;
|
|
||||||
if (!container.closest(".timetable-container")) return; // only on home
|
|
||||||
const schedule = getMockDaySchedule();
|
|
||||||
container.innerHTML = schedule;
|
|
||||||
container.classList.remove("loading");
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const mockData = {
|
const mockData = {
|
||||||
@@ -422,26 +367,7 @@ const mockData = {
|
|||||||
"Field Trip",
|
"Field Trip",
|
||||||
"Cultural Festival",
|
"Cultural Festival",
|
||||||
],
|
],
|
||||||
documentTitles: [
|
|
||||||
"Course Outline",
|
|
||||||
"Assignment Brief",
|
|
||||||
"Study Guide",
|
|
||||||
"Reference Material",
|
|
||||||
"Worksheet",
|
|
||||||
"Reading List",
|
|
||||||
"Project Guidelines",
|
|
||||||
],
|
|
||||||
forumTopics: [
|
|
||||||
"General Discussion",
|
|
||||||
"Homework Help",
|
|
||||||
"Resource Share",
|
|
||||||
"Class Updates",
|
|
||||||
"Study Group",
|
|
||||||
"Q&A",
|
|
||||||
"Announcements",
|
|
||||||
],
|
|
||||||
messages: {
|
messages: {
|
||||||
recipients: ["Students", "Class", "Year Group", "Parents", "Guardians"],
|
|
||||||
subjects: [
|
subjects: [
|
||||||
"Mid-year Exams",
|
"Mid-year Exams",
|
||||||
"Science project due soon",
|
"Science project due soon",
|
||||||
@@ -647,35 +573,6 @@ Register through the PE department or see your house captains for more informati
|
|||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
||||||
/** Mock day schedule for home timetable: care 8:30–8:55, then 7 lessons 8:55–3:15 (45m each), 20m recess, lunch. */
|
|
||||||
function getMockDaySchedule(): string {
|
|
||||||
const blocks: { title: string; teacher: string; room: string; from: string; until: string }[] = [
|
|
||||||
{ title: "Care Group", teacher: getRandomElement(mockData.teachers), room: getRandomElement(mockData.classrooms), from: "8:30am", until: "8:55am" },
|
|
||||||
{ title: getRandomElement(mockData.subjects), teacher: getRandomElement(mockData.teachers), room: getRandomElement(mockData.classrooms), from: "8:55am", until: "9:40am" },
|
|
||||||
{ title: getRandomElement(mockData.subjects), teacher: getRandomElement(mockData.teachers), room: getRandomElement(mockData.classrooms), from: "9:40am", until: "10:25am" },
|
|
||||||
{ title: "Recess", teacher: "—", room: "—", from: "10:25am", until: "10:45am" },
|
|
||||||
{ title: getRandomElement(mockData.subjects), teacher: getRandomElement(mockData.teachers), room: getRandomElement(mockData.classrooms), from: "10:45am", until: "11:30am" },
|
|
||||||
{ title: getRandomElement(mockData.subjects), teacher: getRandomElement(mockData.teachers), room: getRandomElement(mockData.classrooms), from: "11:30am", until: "12:15pm" },
|
|
||||||
{ title: "Lunch", teacher: "—", room: "—", from: "12:15pm", until: "1:00pm" },
|
|
||||||
{ title: getRandomElement(mockData.subjects), teacher: getRandomElement(mockData.teachers), room: getRandomElement(mockData.classrooms), from: "1:00pm", until: "1:45pm" },
|
|
||||||
{ title: getRandomElement(mockData.subjects), teacher: getRandomElement(mockData.teachers), room: getRandomElement(mockData.classrooms), from: "1:45pm", until: "2:30pm" },
|
|
||||||
{ title: getRandomElement(mockData.subjects), teacher: getRandomElement(mockData.teachers), room: getRandomElement(mockData.classrooms), from: "2:30pm", until: "3:15pm" },
|
|
||||||
];
|
|
||||||
const colours = ["#8e8e8e", "#4FBBFE", "#59F675", "#fa915d", "#9c27b0", "#2196f3", "#4caf50", "#ff9800", "#e91e63", "#673ab7"];
|
|
||||||
return blocks
|
|
||||||
.map(
|
|
||||||
(b, i) =>
|
|
||||||
`<div class="day" style="--item-colour: ${colours[i % colours.length]};">
|
|
||||||
<h2>${b.title}</h2>
|
|
||||||
<h3>${b.teacher}</h3>
|
|
||||||
<h3>${b.room}</h3>
|
|
||||||
<h4>${b.from} – ${b.until}</h4>
|
|
||||||
<h5> </h5>
|
|
||||||
</div>`,
|
|
||||||
)
|
|
||||||
.join("");
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getMockNotices() {
|
export function getMockNotices() {
|
||||||
return {
|
return {
|
||||||
payload: mockData.noticesData
|
payload: mockData.noticesData
|
||||||
@@ -720,15 +617,12 @@ export function getMockAssessmentsData() {
|
|||||||
{ submitted: false, score: null, dayOffset: () => Math.floor(Math.random() * -3) - 1 }, // Recently overdue
|
{ submitted: false, score: null, dayOffset: () => Math.floor(Math.random() * -3) - 1 }, // Recently overdue
|
||||||
];
|
];
|
||||||
|
|
||||||
const currentYear = new Date().getFullYear();
|
const assessments = Array.from({ length: 12 }, (_, i) => {
|
||||||
const assessments = Array.from({ length: 14 }, (_, i) => {
|
|
||||||
const subj = subjects[i % subjects.length];
|
const subj = subjects[i % subjects.length];
|
||||||
const template = statusTemplates[i % statusTemplates.length];
|
const template = statusTemplates[i % statusTemplates.length];
|
||||||
const due = new Date();
|
const due = new Date();
|
||||||
due.setDate(due.getDate() + template.dayOffset());
|
due.setDate(due.getDate() + template.dayOffset());
|
||||||
if (i >= 10) due.setFullYear(currentYear - 1);
|
|
||||||
|
|
||||||
const types = ["Assignment", "Test", "Exam", "Project", "Presentation", "Report"];
|
|
||||||
const assessment: any = {
|
const assessment: any = {
|
||||||
id: i + 1,
|
id: i + 1,
|
||||||
title: mockData.assessmentTitles[i % mockData.assessmentTitles.length],
|
title: mockData.assessmentTitles[i % mockData.assessmentTitles.length],
|
||||||
@@ -737,7 +631,6 @@ export function getMockAssessmentsData() {
|
|||||||
metaclassID: subj.metaclass,
|
metaclassID: subj.metaclass,
|
||||||
due: due.toISOString(),
|
due: due.toISOString(),
|
||||||
submitted: template.submitted,
|
submitted: template.submitted,
|
||||||
type: types[i % types.length],
|
|
||||||
};
|
};
|
||||||
|
|
||||||
if (template.score && typeof template.score === 'function') {
|
if (template.score && typeof template.score === 'function') {
|
||||||
@@ -757,16 +650,14 @@ export function getMockAssessmentsData() {
|
|||||||
const debouncedProcessElements = debounce(processNewElements, 1);
|
const debouncedProcessElements = debounce(processNewElements, 1);
|
||||||
|
|
||||||
function processNewElements() {
|
function processNewElements() {
|
||||||
Object.entries(contentConfig).forEach(([_, config]) => {
|
Object.entries(contentConfig).forEach(([_, { selector, action }]) => {
|
||||||
const { selector, action, alwaysRun } = config;
|
|
||||||
const elements = document.querySelectorAll(selector);
|
const elements = document.querySelectorAll(selector);
|
||||||
elements.forEach((element: Element) => {
|
elements.forEach((element: Element) => {
|
||||||
if (alwaysRun || !processedElements.has(element)) {
|
// Only process elements that haven't been processed before
|
||||||
|
if (!processedElements.has(element)) {
|
||||||
action(element);
|
action(element);
|
||||||
if (!alwaysRun) {
|
|
||||||
processedElements.add(element);
|
processedElements.add(element);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,199 +0,0 @@
|
|||||||
import browser from "webextension-polyfill";
|
|
||||||
import { settingsState } from "@/seqta/utils/listeners/SettingsState";
|
|
||||||
|
|
||||||
const REDIRECT_URI = "https://accounts.betterseqta.org/auth/bsplus/callback";
|
|
||||||
|
|
||||||
const STORAGE_KEYS = {
|
|
||||||
clientId: "bsplus_client_id",
|
|
||||||
accessToken: "bsplus_token",
|
|
||||||
refreshToken: "bsplus_refresh_token",
|
|
||||||
user: "bsplus_user",
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export type CloudUser = {
|
|
||||||
id: string;
|
|
||||||
email?: string;
|
|
||||||
username?: string;
|
|
||||||
displayName?: string;
|
|
||||||
pfpUrl?: string;
|
|
||||||
admin_level?: number;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type CloudAuthState = {
|
|
||||||
isLoggedIn: boolean;
|
|
||||||
user: CloudUser | null;
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Callback invoked when auth state changes */
|
|
||||||
type Listener = { (state: CloudAuthState): void };
|
|
||||||
|
|
||||||
class CloudAuthService {
|
|
||||||
private static instance: CloudAuthService;
|
|
||||||
private listeners = new Set<Listener>();
|
|
||||||
private _state: CloudAuthState = { isLoggedIn: false, user: null };
|
|
||||||
|
|
||||||
private constructor() {
|
|
||||||
void this.loadFromStorage();
|
|
||||||
browser.storage.onChanged.addListener((changes, areaName) => {
|
|
||||||
if (
|
|
||||||
areaName === "local" &&
|
|
||||||
(changes[STORAGE_KEYS.accessToken] ||
|
|
||||||
changes[STORAGE_KEYS.user] ||
|
|
||||||
changes[STORAGE_KEYS.clientId])
|
|
||||||
) {
|
|
||||||
void this.loadFromStorage();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
public static getInstance(): CloudAuthService {
|
|
||||||
if (!CloudAuthService.instance) {
|
|
||||||
CloudAuthService.instance = new CloudAuthService();
|
|
||||||
}
|
|
||||||
return CloudAuthService.instance;
|
|
||||||
}
|
|
||||||
|
|
||||||
public get state(): CloudAuthState {
|
|
||||||
return this._state;
|
|
||||||
}
|
|
||||||
|
|
||||||
public subscribe(listener: Listener): () => void {
|
|
||||||
this.listeners.add(listener);
|
|
||||||
listener(this._state);
|
|
||||||
return () => this.listeners.delete(listener);
|
|
||||||
}
|
|
||||||
|
|
||||||
private async loadFromStorage(): Promise<void> {
|
|
||||||
const result = await browser.storage.local.get([
|
|
||||||
STORAGE_KEYS.accessToken,
|
|
||||||
STORAGE_KEYS.user,
|
|
||||||
]);
|
|
||||||
const token = result[STORAGE_KEYS.accessToken] as string | undefined;
|
|
||||||
const user = result[STORAGE_KEYS.user] as CloudUser | undefined;
|
|
||||||
this._state = {
|
|
||||||
isLoggedIn: !!token,
|
|
||||||
user: user ?? null,
|
|
||||||
};
|
|
||||||
this.notify();
|
|
||||||
}
|
|
||||||
|
|
||||||
private notify(): void {
|
|
||||||
for (const listener of this.listeners) {
|
|
||||||
listener(this._state);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
public async getStoredToken(): Promise<string | null> {
|
|
||||||
const result = await browser.storage.local.get(STORAGE_KEYS.accessToken);
|
|
||||||
return (result[STORAGE_KEYS.accessToken] as string) ?? null;
|
|
||||||
}
|
|
||||||
|
|
||||||
private async getClientId(): Promise<string> {
|
|
||||||
let clientId = (settingsState as any)[STORAGE_KEYS.clientId] as string | undefined;
|
|
||||||
if (!clientId) {
|
|
||||||
const stored = await browser.storage.local.get(STORAGE_KEYS.clientId);
|
|
||||||
clientId = stored[STORAGE_KEYS.clientId] as string | undefined;
|
|
||||||
}
|
|
||||||
if (!clientId) {
|
|
||||||
const reserveResult = (await browser.runtime.sendMessage({
|
|
||||||
type: "cloudReserveClient",
|
|
||||||
redirect_uri: REDIRECT_URI,
|
|
||||||
})) as { client_id?: string; error?: string };
|
|
||||||
if (!reserveResult?.client_id) {
|
|
||||||
throw new Error(reserveResult?.error ?? "Failed to reserve client");
|
|
||||||
}
|
|
||||||
clientId = reserveResult.client_id;
|
|
||||||
(settingsState as any).setKey(STORAGE_KEYS.clientId, clientId);
|
|
||||||
}
|
|
||||||
return clientId;
|
|
||||||
}
|
|
||||||
|
|
||||||
public async login(
|
|
||||||
login: string,
|
|
||||||
password: string
|
|
||||||
): Promise<{ success: boolean; error?: string }> {
|
|
||||||
try {
|
|
||||||
const clientId = await this.getClientId();
|
|
||||||
const result = (await browser.runtime.sendMessage({
|
|
||||||
type: "cloudLogin",
|
|
||||||
client_id: clientId,
|
|
||||||
redirect_uri: REDIRECT_URI,
|
|
||||||
login: login.trim(),
|
|
||||||
password,
|
|
||||||
})) as {
|
|
||||||
access_token?: string;
|
|
||||||
refresh_token?: string;
|
|
||||||
user?: CloudUser;
|
|
||||||
error?: string;
|
|
||||||
};
|
|
||||||
if (result?.access_token && result?.refresh_token) {
|
|
||||||
(settingsState as any).setKey(STORAGE_KEYS.accessToken, result.access_token);
|
|
||||||
(settingsState as any).setKey(STORAGE_KEYS.refreshToken, result.refresh_token);
|
|
||||||
(settingsState as any).setKey(STORAGE_KEYS.user, result.user ?? null);
|
|
||||||
this._state = {
|
|
||||||
isLoggedIn: true,
|
|
||||||
user: result.user ?? null,
|
|
||||||
};
|
|
||||||
this.notify();
|
|
||||||
return { success: true };
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
success: false,
|
|
||||||
error: result?.error ?? "Login failed",
|
|
||||||
};
|
|
||||||
} catch (err) {
|
|
||||||
return {
|
|
||||||
success: false,
|
|
||||||
error: err instanceof Error ? err.message : "Login failed",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
public async logout(): Promise<void> {
|
|
||||||
await browser.storage.local.remove([
|
|
||||||
STORAGE_KEYS.accessToken,
|
|
||||||
STORAGE_KEYS.refreshToken,
|
|
||||||
STORAGE_KEYS.user,
|
|
||||||
"cloudAccessToken",
|
|
||||||
"cloudUsername",
|
|
||||||
]);
|
|
||||||
this._state = { isLoggedIn: false, user: null };
|
|
||||||
this.notify();
|
|
||||||
}
|
|
||||||
|
|
||||||
public async refreshToken(): Promise<boolean> {
|
|
||||||
const result = await browser.storage.local.get([
|
|
||||||
STORAGE_KEYS.refreshToken,
|
|
||||||
STORAGE_KEYS.clientId,
|
|
||||||
]);
|
|
||||||
const refreshToken = result[STORAGE_KEYS.refreshToken] as string | undefined;
|
|
||||||
const clientId = result[STORAGE_KEYS.clientId] as string | undefined;
|
|
||||||
if (!refreshToken || !clientId) return false;
|
|
||||||
|
|
||||||
const refreshResult = (await browser.runtime.sendMessage({
|
|
||||||
type: "cloudRefresh",
|
|
||||||
refresh_token: refreshToken,
|
|
||||||
client_id: clientId,
|
|
||||||
})) as {
|
|
||||||
access_token?: string;
|
|
||||||
refresh_token?: string;
|
|
||||||
user?: CloudUser;
|
|
||||||
error?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
if (refreshResult?.access_token && refreshResult?.refresh_token) {
|
|
||||||
(settingsState as any).setKey(STORAGE_KEYS.accessToken, refreshResult.access_token);
|
|
||||||
(settingsState as any).setKey(STORAGE_KEYS.refreshToken, refreshResult.refresh_token);
|
|
||||||
(settingsState as any).setKey(STORAGE_KEYS.user, refreshResult.user ?? null);
|
|
||||||
this._state = {
|
|
||||||
isLoggedIn: true,
|
|
||||||
user: refreshResult.user ?? null,
|
|
||||||
};
|
|
||||||
this.notify();
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export const cloudAuth = CloudAuthService.getInstance();
|
|
||||||
@@ -30,12 +30,15 @@ export async function loadHomePage() {
|
|||||||
element?.classList.add("active");
|
element?.classList.add("active");
|
||||||
|
|
||||||
const main = document.getElementById("main");
|
const main = document.getElementById("main");
|
||||||
if (!main) return;
|
if (!main) {
|
||||||
|
console.error("[BetterSEQTA+] Main element not found.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const homeRoot = stringToHTML(`<div id="home-root" class="home-root"></div>`);
|
||||||
|
|
||||||
main.innerHTML = "";
|
main.innerHTML = "";
|
||||||
main.appendChild(
|
main.appendChild(homeRoot?.firstChild!);
|
||||||
stringToHTML(`<div id="home-root" class="home-root"></div>`).firstChild!,
|
|
||||||
);
|
|
||||||
|
|
||||||
const homeContainer = document.getElementById("home-root");
|
const homeContainer = document.getElementById("home-root");
|
||||||
if (!homeContainer) return;
|
if (!homeContainer) return;
|
||||||
@@ -98,19 +101,90 @@ export async function loadHomePage() {
|
|||||||
|
|
||||||
renderShortcuts();
|
renderShortcuts();
|
||||||
|
|
||||||
const TodayFormatted = formatDate(new Date());
|
const date = new Date();
|
||||||
|
const TodayFormatted = formatDate(date);
|
||||||
|
|
||||||
|
const [timetablePromise, assessmentsPromise, classesPromise, prefsPromise] = [
|
||||||
|
fetch(`${location.origin}/seqta/student/load/timetable?`, {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({
|
||||||
|
from: TodayFormatted,
|
||||||
|
until: TodayFormatted,
|
||||||
|
student: 69,
|
||||||
|
}),
|
||||||
|
}).then((res) => res.json()),
|
||||||
|
|
||||||
const [assessments, classes, prefs] = await Promise.all([
|
|
||||||
GetUpcomingAssessments(),
|
GetUpcomingAssessments(),
|
||||||
|
|
||||||
GetActiveClasses(),
|
GetActiveClasses(),
|
||||||
|
|
||||||
fetch(`${location.origin}/seqta/student/load/prefs?`, {
|
fetch(`${location.origin}/seqta/student/load/prefs?`, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: { "Content-Type": "application/json" },
|
headers: { "Content-Type": "application/json" },
|
||||||
body: JSON.stringify({ asArray: true, request: "userPrefs" }),
|
body: JSON.stringify({ asArray: true, request: "userPrefs" }),
|
||||||
}).then((res) => res.json()),
|
}).then((res) => res.json()),
|
||||||
|
];
|
||||||
|
|
||||||
|
const [timetableData, assessments, classes, prefs] = await Promise.all([
|
||||||
|
timetablePromise,
|
||||||
|
assessmentsPromise,
|
||||||
|
classesPromise,
|
||||||
|
prefsPromise,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
callHomeTimetable(TodayFormatted, true);
|
const dayContainer = document.getElementById("day-container");
|
||||||
|
if (dayContainer && timetableData.payload.items.length > 0) {
|
||||||
|
const lessonArray = timetableData.payload.items.sort((a: any, b: any) =>
|
||||||
|
a.from.localeCompare(b.from),
|
||||||
|
);
|
||||||
|
const colours = await GetLessonColours();
|
||||||
|
|
||||||
|
dayContainer.innerHTML = "";
|
||||||
|
for (let i = 0; i < lessonArray.length; i++) {
|
||||||
|
const lesson = lessonArray[i];
|
||||||
|
const subjectname = `timetable.subject.colour.${lesson.code}`;
|
||||||
|
const subject = colours.find(
|
||||||
|
(element: any) => element.name === subjectname,
|
||||||
|
);
|
||||||
|
|
||||||
|
lesson.colour = subject
|
||||||
|
? `--item-colour: ${subject.value};`
|
||||||
|
: "--item-colour: #8e8e8e;";
|
||||||
|
lesson.from = lesson.from.substring(0, 5);
|
||||||
|
lesson.until = lesson.until.substring(0, 5);
|
||||||
|
|
||||||
|
if (settingsState.timeFormat === "12") {
|
||||||
|
lesson.from = convertTo12HourFormat(lesson.from);
|
||||||
|
lesson.until = convertTo12HourFormat(lesson.until);
|
||||||
|
}
|
||||||
|
|
||||||
|
lesson.attendanceTitle = CheckUnmarkedAttendance(lesson.attendance);
|
||||||
|
|
||||||
|
const div = makeLessonDiv(lesson, i + 1);
|
||||||
|
if (GetThresholdOfColor(subject?.value) > 300) {
|
||||||
|
const firstChild = div.firstChild as HTMLElement;
|
||||||
|
if (firstChild) {
|
||||||
|
firstChild.classList.add("day-inverted");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dayContainer.appendChild(div.firstChild!);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentSelectedDate.getDate() === date.getDate()) {
|
||||||
|
for (let i = 0; i < lessonArray.length; i++) {
|
||||||
|
CheckCurrentLesson(lessonArray[i], i + 1);
|
||||||
|
}
|
||||||
|
CheckCurrentLessonAll(lessonArray);
|
||||||
|
}
|
||||||
|
} else if (dayContainer) {
|
||||||
|
dayContainer.innerHTML = `
|
||||||
|
<div class="day-empty">
|
||||||
|
<img src="${browser.runtime.getURL(LogoLight)}" />
|
||||||
|
<p>No lessons available.</p>
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
|
dayContainer?.classList.remove("loading");
|
||||||
|
|
||||||
const activeClass = classes.find((c: any) => c.hasOwnProperty("active"));
|
const activeClass = classes.find((c: any) => c.hasOwnProperty("active"));
|
||||||
const activeSubjects = activeClass?.subjects || [];
|
const activeSubjects = activeClass?.subjects || [];
|
||||||
@@ -129,9 +203,9 @@ export async function loadHomePage() {
|
|||||||
.filter((item: any) => item.name === "notices.filters")
|
.filter((item: any) => item.name === "notices.filters")
|
||||||
.map((item: any) => item.value);
|
.map((item: any) => item.value);
|
||||||
|
|
||||||
|
if (labelArray.length > 0) {
|
||||||
const noticeContainer = document.getElementById("notice-container");
|
const noticeContainer = document.getElementById("notice-container");
|
||||||
if (noticeContainer) {
|
if (noticeContainer) {
|
||||||
if (labelArray.length > 0) {
|
|
||||||
const dateControl = document.querySelector(
|
const dateControl = document.querySelector(
|
||||||
'input[type="date"]',
|
'input[type="date"]',
|
||||||
) as HTMLInputElement;
|
) as HTMLInputElement;
|
||||||
@@ -140,17 +214,6 @@ export async function loadHomePage() {
|
|||||||
setupNotices(labelArray[0].split(" "), TodayFormatted);
|
setupNotices(labelArray[0].split(" "), TodayFormatted);
|
||||||
}
|
}
|
||||||
noticeContainer.classList.remove("loading");
|
noticeContainer.classList.remove("loading");
|
||||||
} else {
|
|
||||||
noticeContainer.classList.remove("loading");
|
|
||||||
noticeContainer.innerHTML = "";
|
|
||||||
const emptyState = document.createElement("div");
|
|
||||||
emptyState.classList.add("day-empty");
|
|
||||||
const img = document.createElement("img");
|
|
||||||
img.src = browser.runtime.getURL(LogoLight);
|
|
||||||
const text = document.createElement("p");
|
|
||||||
text.innerText = "No notices available.";
|
|
||||||
emptyState.append(img, text);
|
|
||||||
noticeContainer.append(emptyState);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -158,20 +221,20 @@ export async function loadHomePage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function GetUpcomingAssessments() {
|
async function GetUpcomingAssessments() {
|
||||||
try {
|
let func = fetch(
|
||||||
return fetch(`${location.origin}/seqta/student/assessment/list/upcoming?`, {
|
`${location.origin}/seqta/student/assessment/list/upcoming?`,
|
||||||
|
{
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: {
|
headers: {
|
||||||
"Content-Type": "application/json; charset=utf-8",
|
"Content-Type": "application/json; charset=utf-8",
|
||||||
},
|
},
|
||||||
body: JSON.stringify({ student: 69 }),
|
body: JSON.stringify({ student: 69 }),
|
||||||
})
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
return func
|
||||||
.then((result) => result.json())
|
.then((result) => result.json())
|
||||||
.then((response) => response.payload);
|
.then((response) => response.payload);
|
||||||
} catch (error) {
|
|
||||||
console.error("[BetterSEQTA+] Failed to get upcoming assessments:", error);
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupTimetableListeners() {
|
function setupTimetableListeners() {
|
||||||
@@ -229,10 +292,15 @@ async function GetActiveClasses() {
|
|||||||
body: JSON.stringify({}),
|
body: JSON.stringify({}),
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
return (await response.json()).payload;
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
return data.payload;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("[BetterSEQTA+] Failed to get active classes:", error);
|
console.error("Oops! There was a problem fetching active classes:", error);
|
||||||
return [];
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -242,26 +310,28 @@ function setupNotices(labelArray: string[], date: string) {
|
|||||||
) as HTMLInputElement;
|
) as HTMLInputElement;
|
||||||
|
|
||||||
const fetchNotices = async (date: string) => {
|
const fetchNotices = async (date: string) => {
|
||||||
try {
|
let data;
|
||||||
const data = settingsState.mockNotices
|
|
||||||
? getMockNotices()
|
if (settingsState.mockNotices) {
|
||||||
: await (
|
data = getMockNotices();
|
||||||
await fetch(`${location.origin}/seqta/student/load/notices?`, {
|
} else {
|
||||||
|
const response = await fetch(
|
||||||
|
`${location.origin}/seqta/student/load/notices?`,
|
||||||
|
{
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: { "Content-Type": "application/json; charset=utf-8" },
|
headers: { "Content-Type": "application/json; charset=utf-8" },
|
||||||
body: JSON.stringify({ date }),
|
body: JSON.stringify({ date }),
|
||||||
})
|
},
|
||||||
).json();
|
);
|
||||||
|
data = await response.json();
|
||||||
|
}
|
||||||
|
|
||||||
processNotices(data, labelArray);
|
processNotices(data, labelArray);
|
||||||
} catch {
|
|
||||||
// Notices failed to load; processNotices will show empty state if container exists
|
|
||||||
processNotices({ payload: [] }, labelArray);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const debouncedInputChange = debounce((e: Event) => {
|
const debouncedInputChange = debounce((e: Event) => {
|
||||||
fetchNotices((e.target as HTMLInputElement).value);
|
const target = e.target as HTMLInputElement;
|
||||||
|
fetchNotices(target.value);
|
||||||
}, 250);
|
}, 250);
|
||||||
|
|
||||||
dateControl?.addEventListener("input", debouncedInputChange);
|
dateControl?.addEventListener("input", debouncedInputChange);
|
||||||
@@ -282,36 +352,28 @@ function debounce<T extends (...args: any[]) => any>(
|
|||||||
}
|
}
|
||||||
|
|
||||||
function comparedate(obj1: any, obj2: any) {
|
function comparedate(obj1: any, obj2: any) {
|
||||||
return obj1.date < obj2.date ? -1 : obj1.date > obj2.date ? 1 : 0;
|
if (obj1.date < obj2.date) {
|
||||||
|
return -1;
|
||||||
}
|
}
|
||||||
|
if (obj1.date > obj2.date) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
function processNotices(response: any, labelArray: string[]) {
|
function processNotices(response: any, labelArray: string[]) {
|
||||||
const NoticeContainer = document.getElementById("notice-container");
|
const NoticeContainer = document.getElementById("notice-container");
|
||||||
if (!NoticeContainer) return;
|
if (!NoticeContainer) return;
|
||||||
|
|
||||||
NoticeContainer.innerHTML = "";
|
NoticeContainer.innerHTML = "";
|
||||||
|
|
||||||
const notices = response?.payload;
|
const notices = response.payload;
|
||||||
if (!Array.isArray(notices)) {
|
|
||||||
const emptyState = document.createElement("div");
|
|
||||||
emptyState.classList.add("day-empty");
|
|
||||||
const img = document.createElement("img");
|
|
||||||
img.src = browser.runtime.getURL(LogoLight);
|
|
||||||
const text = document.createElement("p");
|
|
||||||
text.innerText = "No notices for today.";
|
|
||||||
emptyState.append(img, text);
|
|
||||||
NoticeContainer.append(emptyState);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!notices.length) {
|
if (!notices.length) {
|
||||||
const emptyState = document.createElement("div");
|
const dummyNotice = document.createElement("div");
|
||||||
emptyState.classList.add("day-empty");
|
dummyNotice.textContent = "No notices for today.";
|
||||||
const img = document.createElement("img");
|
dummyNotice.classList.add("dummynotice");
|
||||||
img.src = browser.runtime.getURL(LogoLight);
|
NoticeContainer.append(dummyNotice);
|
||||||
const text = document.createElement("p");
|
|
||||||
text.innerText = "No notices for today.";
|
|
||||||
emptyState.append(img, text);
|
|
||||||
NoticeContainer.append(emptyState);
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -343,13 +405,13 @@ function processNoticeColor(colour: string): string | undefined {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function createNoticeElement(notice: any, colour: string | undefined): Node {
|
function createNoticeElement(notice: any, colour: string | undefined): Node {
|
||||||
const textPreview =
|
const textPreview = notice.contents
|
||||||
notice.contents
|
|
||||||
.replace(/<[^>]*>/g, "")
|
.replace(/<[^>]*>/g, "")
|
||||||
.replace(/\[\[[\w]+[:][\w]+[\]\]]+/g, "")
|
.replace(/\[\[[\w]+[:][\w]+[\]\]]+/g, "")
|
||||||
.replace(/\s+/g, " ")
|
.replace(/\s+/g, " ")
|
||||||
.trim()
|
.trim()
|
||||||
.substring(0, 150) + (notice.contents.length > 150 ? "..." : "");
|
.substring(0, 150)
|
||||||
|
+ (notice.contents.length > 150 ? "..." : "");
|
||||||
|
|
||||||
const noticeId = `notice-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
const noticeId = `notice-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
||||||
|
|
||||||
@@ -369,10 +431,12 @@ function createNoticeElement(notice: any, colour: string | undefined): Node {
|
|||||||
</div>`;
|
</div>`;
|
||||||
|
|
||||||
const element = stringToHTML(htmlContent).firstChild as HTMLElement;
|
const element = stringToHTML(htmlContent).firstChild as HTMLElement;
|
||||||
|
if (element) {
|
||||||
element.addEventListener("click", () =>
|
element.addEventListener("click", () =>
|
||||||
openNoticeModal(notice, colour, element),
|
openNoticeModal(notice, colour, element),
|
||||||
);
|
);
|
||||||
return element;
|
}
|
||||||
|
return element!;
|
||||||
}
|
}
|
||||||
|
|
||||||
function openNoticeModal(
|
function openNoticeModal(
|
||||||
@@ -384,11 +448,15 @@ function openNoticeModal(
|
|||||||
.replace(/\[\[[\w]+[:][\w]+[\]\]]+/g, "")
|
.replace(/\[\[[\w]+[:][\w]+[\]\]]+/g, "")
|
||||||
.replace(/ +/, " ");
|
.replace(/ +/, " ");
|
||||||
|
|
||||||
document.getElementById("notice-modal")?.remove();
|
const existingModal = document.getElementById("notice-modal");
|
||||||
|
if (existingModal) {
|
||||||
|
existingModal.remove();
|
||||||
|
}
|
||||||
|
|
||||||
const sourceRect = sourceElement.getBoundingClientRect();
|
const sourceRect = sourceElement.getBoundingClientRect();
|
||||||
let scrollY = Math.round(window.scrollY);
|
let scrollY = Math.round(window.scrollY);
|
||||||
let scrollX = Math.round(window.scrollX);
|
let scrollX = Math.round(window.scrollX);
|
||||||
|
|
||||||
let sourceLeft = sourceRect.left;
|
let sourceLeft = sourceRect.left;
|
||||||
let sourceTop = sourceRect.top;
|
let sourceTop = sourceRect.top;
|
||||||
let sourceWidth = sourceRect.width;
|
let sourceWidth = sourceRect.width;
|
||||||
@@ -468,8 +536,9 @@ function openNoticeModal(
|
|||||||
document.body.removeChild(tempMeasureDiv);
|
document.body.removeChild(tempMeasureDiv);
|
||||||
|
|
||||||
let targetHeight = Math.round(
|
let targetHeight = Math.round(
|
||||||
Math.min(Math.max(measuredHeight + 32, 200), viewportHeight * 0.9),
|
Math.min(Math.max(measuredHeight, 200), viewportHeight * 0.85),
|
||||||
);
|
);
|
||||||
|
|
||||||
let targetLeft = Math.round((viewportWidth - targetWidth) / 2);
|
let targetLeft = Math.round((viewportWidth - targetWidth) / 2);
|
||||||
let targetTop = Math.round((viewportHeight - targetHeight) / 2) + scrollY;
|
let targetTop = Math.round((viewportHeight - targetHeight) / 2) + scrollY;
|
||||||
|
|
||||||
@@ -578,10 +647,13 @@ function openNoticeModal(
|
|||||||
const newTargetWidth = Math.round(
|
const newTargetWidth = Math.round(
|
||||||
Math.min(Math.max(newSourceWidth, 800), newViewportWidth - 40),
|
Math.min(Math.max(newSourceWidth, 800), newViewportWidth - 40),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Just measure the existing modal content
|
||||||
const currentHeight = unifiedContent.getBoundingClientRect().height;
|
const currentHeight = unifiedContent.getBoundingClientRect().height;
|
||||||
const newTargetHeight = Math.round(
|
const newTargetHeight = Math.round(
|
||||||
Math.min(Math.max(currentHeight + 32, 200), newViewportHeight * 0.9),
|
Math.min(Math.max(currentHeight, 200), newViewportHeight * 0.85),
|
||||||
);
|
);
|
||||||
|
|
||||||
const newTargetLeft = Math.round((newViewportWidth - newTargetWidth) / 2);
|
const newTargetLeft = Math.round((newViewportWidth - newTargetWidth) / 2);
|
||||||
const newTargetTop =
|
const newTargetTop =
|
||||||
Math.round((newViewportHeight - newTargetHeight) / 2) + newScrollY;
|
Math.round((newViewportHeight - newTargetHeight) / 2) + newScrollY;
|
||||||
@@ -646,8 +718,7 @@ function callHomeTimetable(date: string, change?: any) {
|
|||||||
xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
|
xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
|
||||||
|
|
||||||
xhr.onreadystatechange = function () {
|
xhr.onreadystatechange = function () {
|
||||||
if (xhr.readyState !== 4) return;
|
if (xhr.readyState === 4) {
|
||||||
|
|
||||||
if (loadingTimeout) {
|
if (loadingTimeout) {
|
||||||
clearTimeout(loadingTimeout);
|
clearTimeout(loadingTimeout);
|
||||||
loadingTimeout = null;
|
loadingTimeout = null;
|
||||||
@@ -655,6 +726,7 @@ function callHomeTimetable(date: string, change?: any) {
|
|||||||
|
|
||||||
const DayContainer = document.getElementById("day-container")!;
|
const DayContainer = document.getElementById("day-container")!;
|
||||||
|
|
||||||
|
try {
|
||||||
var serverResponse = JSON.parse(xhr.response);
|
var serverResponse = JSON.parse(xhr.response);
|
||||||
let lessonArray: Array<any> = [];
|
let lessonArray: Array<any> = [];
|
||||||
|
|
||||||
@@ -668,20 +740,20 @@ function callHomeTimetable(date: string, change?: any) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
GetLessonColours().then((colours) => {
|
GetLessonColours().then((colours) => {
|
||||||
|
let subjects = colours;
|
||||||
for (let i = 0; i < lessonArray.length; i++) {
|
for (let i = 0; i < lessonArray.length; i++) {
|
||||||
let subjectname =
|
let subjectname = `timetable.subject.colour.${lessonArray[i].code}`;
|
||||||
lessonArray[i].type == "tutorial"
|
|
||||||
? `timetable.tutor.${lessonArray[i].tutorID}`
|
let subject = subjects.find(
|
||||||
: `timetable.subject.colour.${lessonArray[i].code}`;
|
|
||||||
let subject = colours.find(
|
|
||||||
(element: any) => element.name === subjectname,
|
(element: any) => element.name === subjectname,
|
||||||
);
|
);
|
||||||
|
|
||||||
if (!subject) {
|
if (!subject) {
|
||||||
lessonArray[i].colour = "--item-colour: #8e8e8e;";
|
lessonArray[i].colour = "--item-colour: #8e8e8e;";
|
||||||
} else {
|
} else {
|
||||||
lessonArray[i].colour = `--item-colour: ${subject.value};`;
|
lessonArray[i].colour = `--item-colour: ${subject.value};`;
|
||||||
if (GetThresholdOfColor(subject.value) > 300) {
|
let result = GetThresholdOfColor(subject.value);
|
||||||
|
|
||||||
|
if (result > 300) {
|
||||||
lessonArray[i].invert = true;
|
lessonArray[i].invert = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -690,7 +762,9 @@ function callHomeTimetable(date: string, change?: any) {
|
|||||||
lessonArray[i].until = lessonArray[i].until.substring(0, 5);
|
lessonArray[i].until = lessonArray[i].until.substring(0, 5);
|
||||||
|
|
||||||
if (settingsState.timeFormat === "12") {
|
if (settingsState.timeFormat === "12") {
|
||||||
lessonArray[i].from = convertTo12HourFormat(lessonArray[i].from);
|
lessonArray[i].from = convertTo12HourFormat(
|
||||||
|
lessonArray[i].from,
|
||||||
|
);
|
||||||
lessonArray[i].until = convertTo12HourFormat(
|
lessonArray[i].until = convertTo12HourFormat(
|
||||||
lessonArray[i].until,
|
lessonArray[i].until,
|
||||||
);
|
);
|
||||||
@@ -703,10 +777,13 @@ function callHomeTimetable(date: string, change?: any) {
|
|||||||
|
|
||||||
DayContainer.innerText = "";
|
DayContainer.innerText = "";
|
||||||
for (let i = 0; i < lessonArray.length; i++) {
|
for (let i = 0; i < lessonArray.length; i++) {
|
||||||
const div = makeLessonDiv(lessonArray[i], i + 1);
|
var div = makeLessonDiv(lessonArray[i], i + 1);
|
||||||
|
|
||||||
if (lessonArray[i].invert) {
|
if (lessonArray[i].invert) {
|
||||||
(div.firstChild! as HTMLElement).classList.add("day-inverted");
|
const div1 = div.firstChild! as HTMLElement;
|
||||||
|
div1.classList.add("day-inverted");
|
||||||
}
|
}
|
||||||
|
|
||||||
DayContainer.append(div.firstChild as HTMLElement);
|
DayContainer.append(div.firstChild as HTMLElement);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -717,22 +794,40 @@ function callHomeTimetable(date: string, change?: any) {
|
|||||||
for (let i = 0; i < lessonArray.length; i++) {
|
for (let i = 0; i < lessonArray.length; i++) {
|
||||||
CheckCurrentLesson(lessonArray[i], i + 1);
|
CheckCurrentLesson(lessonArray[i], i + 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
CheckCurrentLessonAll(lessonArray);
|
CheckCurrentLessonAll(lessonArray);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
DayContainer.innerHTML = "";
|
DayContainer.innerHTML = "";
|
||||||
const dummyDay = document.createElement("div");
|
var dummyDay = document.createElement("div");
|
||||||
dummyDay.classList.add("day-empty");
|
dummyDay.classList.add("day-empty");
|
||||||
const img = document.createElement("img");
|
let img = document.createElement("img");
|
||||||
img.src = browser.runtime.getURL(LogoLight);
|
img.src = browser.runtime.getURL(LogoLight);
|
||||||
const text = document.createElement("p");
|
let text = document.createElement("p");
|
||||||
text.innerText = "No lessons available.";
|
text.innerText = "No lessons available.";
|
||||||
dummyDay.append(img, text);
|
dummyDay.append(img);
|
||||||
|
dummyDay.append(text);
|
||||||
DayContainer.append(dummyDay);
|
DayContainer.append(dummyDay);
|
||||||
|
|
||||||
DayContainer.classList.remove("loading");
|
DayContainer.classList.remove("loading");
|
||||||
}
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error loading timetable data:", error);
|
||||||
|
|
||||||
|
DayContainer.classList.remove("loading");
|
||||||
|
|
||||||
|
DayContainer.innerHTML = "";
|
||||||
|
const errorDiv = document.createElement("div");
|
||||||
|
errorDiv.classList.add("day-empty");
|
||||||
|
errorDiv.innerHTML = `
|
||||||
|
<img src="${browser.runtime.getURL(LogoLight)}" />
|
||||||
|
<p>Error loading lessons. Please try again.</p>
|
||||||
|
`;
|
||||||
|
DayContainer.append(errorDiv);
|
||||||
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
xhr.send(
|
xhr.send(
|
||||||
JSON.stringify({
|
JSON.stringify({
|
||||||
@@ -821,6 +916,8 @@ async function CheckCurrentLesson(lesson: any, num: number) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function makeLessonDiv(lesson: any, num: number) {
|
function makeLessonDiv(lesson: any, num: number) {
|
||||||
|
if (!lesson) throw new Error("No lesson provided.");
|
||||||
|
|
||||||
const {
|
const {
|
||||||
code,
|
code,
|
||||||
colour,
|
colour,
|
||||||
@@ -833,19 +930,17 @@ function makeLessonDiv(lesson: any, num: number) {
|
|||||||
programmeID,
|
programmeID,
|
||||||
metaID,
|
metaID,
|
||||||
assessments,
|
assessments,
|
||||||
type,
|
|
||||||
} = lesson;
|
} = lesson;
|
||||||
|
|
||||||
let lessonString = `
|
let lessonString = `
|
||||||
<div class="day" id="${code + num}" style="${colour}">
|
<div class="day" id="${code + num}" style="${colour}">
|
||||||
<h2>${type == "class" ? description : type == "tutorial" ? "Tutorial" : "Unknown"}</h2>
|
<h2>${description || "Unknown"}</h2>
|
||||||
<h3>${staff || "Unknown"}</h3>
|
<h3>${staff || "Unknown"}</h3>
|
||||||
<h3>${room || (type == "tutorial" ? "Unknown" : "N/A")}</h3>
|
<h3>${room || "Unknown"}</h3>
|
||||||
<h4>${from || "Unknown"} - ${until || "Unknown"}</h4>
|
<h4>${from || "Unknown"} - ${until || "Unknown"}</h4>
|
||||||
<h5>${attendanceTitle || "Unknown"}</h5>
|
<h5>${attendanceTitle || "Unknown"}</h5>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
if (type == "class") {
|
|
||||||
if (programmeID !== 0) {
|
if (programmeID !== 0) {
|
||||||
lessonString += `
|
lessonString += `
|
||||||
<div class="day-button clickable" style="right: 5px;" onclick="location.href='${buildAssessmentURL(programmeID, metaID)}'">${assessmentsicon}</div>
|
<div class="day-button clickable" style="right: 5px;" onclick="location.href='${buildAssessmentURL(programmeID, metaID)}'">${assessmentsicon}</div>
|
||||||
@@ -870,7 +965,6 @@ function makeLessonDiv(lesson: any, num: number) {
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
lessonString += "</div>";
|
lessonString += "</div>";
|
||||||
const element = stringToHTML(lessonString);
|
const element = stringToHTML(lessonString);
|
||||||
@@ -886,48 +980,64 @@ function buildAssessmentURL(programmeID: any, metaID: any, itemID = "") {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function CheckUnmarkedAttendance(lessonattendance: any) {
|
function CheckUnmarkedAttendance(lessonattendance: any) {
|
||||||
return lessonattendance ? lessonattendance.label : " ";
|
if (lessonattendance) {
|
||||||
|
var lesson = lessonattendance.label;
|
||||||
|
} else {
|
||||||
|
lesson = " ";
|
||||||
|
}
|
||||||
|
return lesson;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function CreateUpcomingSection(assessments: any, activeSubjects: any) {
|
async function CreateUpcomingSection(assessments: any, activeSubjects: any) {
|
||||||
const upcomingitemcontainer = document.querySelector("#upcoming-items");
|
let upcomingitemcontainer = document.querySelector("#upcoming-items");
|
||||||
const overdueDates = [];
|
let overdueDates = [];
|
||||||
const upcomingDates = {};
|
let upcomingDates = {};
|
||||||
const Today = new Date();
|
|
||||||
|
var Today = new Date();
|
||||||
|
|
||||||
for (let i = 0; i < assessments.length; i++) {
|
for (let i = 0; i < assessments.length; i++) {
|
||||||
const assessmentdue = new Date(assessments[i].due);
|
const assessment = assessments[i];
|
||||||
if (assessmentdue < Today && !CheckSpecialDay(Today, assessmentdue)) {
|
let assessmentdue = new Date(assessment.due);
|
||||||
overdueDates.push(assessments[i]);
|
|
||||||
|
CheckSpecialDay(Today, assessmentdue);
|
||||||
|
if (assessmentdue < Today) {
|
||||||
|
if (!CheckSpecialDay(Today, assessmentdue)) {
|
||||||
|
overdueDates.push(assessment);
|
||||||
assessments.splice(i, 1);
|
assessments.splice(i, 1);
|
||||||
i--;
|
i--;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var TomorrowDate = new Date();
|
||||||
|
TomorrowDate.setDate(TomorrowDate.getDate() + 1);
|
||||||
|
|
||||||
const colours = await GetLessonColours();
|
const colours = await GetLessonColours();
|
||||||
|
|
||||||
|
let subjects = colours;
|
||||||
for (let i = 0; i < assessments.length; i++) {
|
for (let i = 0; i < assessments.length; i++) {
|
||||||
const subject = colours.find(
|
let subjectname = `timetable.subject.colour.${assessments[i].code}`;
|
||||||
(element: any) =>
|
|
||||||
element.name === `timetable.subject.colour.${assessments[i].code}`,
|
let subject = subjects.find((element: any) => element.name === subjectname);
|
||||||
);
|
|
||||||
if (!subject) {
|
if (!subject) {
|
||||||
assessments[i].colour = "--item-colour: #8e8e8e;";
|
assessments[i].colour = "--item-colour: #8e8e8e;";
|
||||||
} else {
|
} else {
|
||||||
assessments[i].colour = `--item-colour: ${subject.value};`;
|
assessments[i].colour = `--item-colour: ${subject.value};`;
|
||||||
|
GetThresholdOfColor(subject.value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
for (let i = 0; i < activeSubjects.length; i++) {
|
for (let i = 0; i < activeSubjects.length; i++) {
|
||||||
const element = activeSubjects[i];
|
const element = activeSubjects[i];
|
||||||
const colour = colours.find(
|
let subjectname = `timetable.subject.colour.${element.code}`;
|
||||||
(c: any) => c.name === `timetable.subject.colour.${element.code}`,
|
let colour = colours.find((element: any) => element.name === subjectname);
|
||||||
);
|
|
||||||
if (!colour) {
|
if (!colour) {
|
||||||
element.colour = "--item-colour: #8e8e8e;";
|
element.colour = "--item-colour: #8e8e8e;";
|
||||||
} else {
|
} else {
|
||||||
element.colour = `--item-colour: ${colour.value};`;
|
element.colour = `--item-colour: ${colour.value};`;
|
||||||
if (GetThresholdOfColor(colour.value) > 300) {
|
let result = GetThresholdOfColor(colour.value);
|
||||||
|
if (result > 300) {
|
||||||
element.invert = true;
|
element.invert = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -935,34 +1045,52 @@ async function CreateUpcomingSection(assessments: any, activeSubjects: any) {
|
|||||||
|
|
||||||
CreateFilters(activeSubjects);
|
CreateFilters(activeSubjects);
|
||||||
|
|
||||||
|
let type;
|
||||||
|
let class_;
|
||||||
|
|
||||||
for (let i = 0; i < assessments.length; i++) {
|
for (let i = 0; i < assessments.length; i++) {
|
||||||
const element: any = assessments[i];
|
const element: any = assessments[i];
|
||||||
if (!upcomingDates[element.due as keyof typeof upcomingDates]) {
|
if (!upcomingDates[element.due as keyof typeof upcomingDates]) {
|
||||||
const dateObj: any = {
|
let dateObj: any = new Object();
|
||||||
div: CreateElement("div", "upcoming-date-container"),
|
dateObj.div = CreateElement(
|
||||||
assessments: [],
|
(type = "div"),
|
||||||
};
|
(class_ = "upcoming-date-container"),
|
||||||
|
);
|
||||||
|
dateObj.assessments = [];
|
||||||
(upcomingDates[element.due as keyof typeof upcomingDates] as any) =
|
(upcomingDates[element.due as keyof typeof upcomingDates] as any) =
|
||||||
dateObj;
|
dateObj;
|
||||||
}
|
}
|
||||||
const assessmentDateDiv =
|
let assessmentDateDiv =
|
||||||
upcomingDates[element.due as keyof typeof upcomingDates];
|
upcomingDates[element.due as keyof typeof upcomingDates];
|
||||||
|
|
||||||
if (assessmentDateDiv) {
|
if (assessmentDateDiv) {
|
||||||
(assessmentDateDiv as any).assessments.push(element);
|
(assessmentDateDiv as any).assessments.push(element);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
for (var date in upcomingDates) {
|
for (var date in upcomingDates) {
|
||||||
const assessmentdue = new Date(
|
let assessmentdue = new Date(
|
||||||
(upcomingDates[date as keyof typeof upcomingDates] as any).assessments[0]
|
(
|
||||||
.due,
|
upcomingDates[date as keyof typeof upcomingDates] as any
|
||||||
|
).assessments[0].due,
|
||||||
);
|
);
|
||||||
const specialcase = CheckSpecialDay(Today, assessmentdue);
|
let specialcase = CheckSpecialDay(Today, assessmentdue);
|
||||||
const assessmentDate = createAssessmentDateDiv(
|
let assessmentDate;
|
||||||
|
|
||||||
|
if (specialcase) {
|
||||||
|
let datecase: string = specialcase!;
|
||||||
|
assessmentDate = createAssessmentDateDiv(
|
||||||
date,
|
date,
|
||||||
upcomingDates[date as keyof typeof upcomingDates],
|
upcomingDates[date as keyof typeof upcomingDates],
|
||||||
specialcase,
|
|
||||||
|
datecase,
|
||||||
);
|
);
|
||||||
|
} else {
|
||||||
|
assessmentDate = createAssessmentDateDiv(
|
||||||
|
date,
|
||||||
|
upcomingDates[date as keyof typeof upcomingDates],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
if (specialcase === "Yesterday") {
|
if (specialcase === "Yesterday") {
|
||||||
upcomingitemcontainer!.insertBefore(
|
upcomingitemcontainer!.insertBefore(
|
||||||
@@ -985,68 +1113,77 @@ async function CreateUpcomingSection(assessments: any, activeSubjects: any) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function createAssessmentDateDiv(date: string, value: any, datecase?: any) {
|
function createAssessmentDateDiv(date: string, value: any, datecase?: any) {
|
||||||
const options = {
|
var options = {
|
||||||
weekday: "long" as "long",
|
weekday: "long" as "long",
|
||||||
month: "long" as "long",
|
month: "long" as "long",
|
||||||
day: "numeric" as "numeric",
|
day: "numeric" as "numeric",
|
||||||
};
|
};
|
||||||
const FormattedDate = new Date(date);
|
const FormattedDate = new Date(date);
|
||||||
|
|
||||||
const assessments = value.assessments;
|
const assessments = value.assessments;
|
||||||
const container = value.div;
|
const container = value.div;
|
||||||
|
|
||||||
const DateTitleDiv = document.createElement("div");
|
let DateTitleDiv = document.createElement("div");
|
||||||
DateTitleDiv.classList.add("upcoming-date-title");
|
DateTitleDiv.classList.add("upcoming-date-title");
|
||||||
|
|
||||||
if (datecase) {
|
if (datecase) {
|
||||||
const datetitle = document.createElement("h5");
|
let datetitle = document.createElement("h5");
|
||||||
datetitle.classList.add("upcoming-special-day");
|
datetitle.classList.add("upcoming-special-day");
|
||||||
datetitle.innerText = datecase;
|
datetitle.innerText = datecase;
|
||||||
DateTitleDiv.append(datetitle);
|
DateTitleDiv.append(datetitle);
|
||||||
container.setAttribute("data-day", datecase);
|
container.setAttribute("data-day", datecase);
|
||||||
}
|
}
|
||||||
|
|
||||||
const DateTitle = document.createElement("h5");
|
let DateTitle = document.createElement("h5");
|
||||||
DateTitle.innerText = FormattedDate.toLocaleDateString("en-AU", options);
|
DateTitle.innerText = FormattedDate.toLocaleDateString("en-AU", options);
|
||||||
DateTitleDiv.append(DateTitle);
|
DateTitleDiv.append(DateTitle);
|
||||||
|
|
||||||
container.append(DateTitleDiv);
|
container.append(DateTitleDiv);
|
||||||
|
|
||||||
const assessmentContainer = document.createElement("div");
|
let assessmentContainer = document.createElement("div");
|
||||||
assessmentContainer.classList.add("upcoming-date-assessments");
|
assessmentContainer.classList.add("upcoming-date-assessments");
|
||||||
|
|
||||||
for (let i = 0; i < assessments.length; i++) {
|
for (let i = 0; i < assessments.length; i++) {
|
||||||
const element = assessments[i];
|
const element = assessments[i];
|
||||||
const item = document.createElement("div");
|
let item = document.createElement("div");
|
||||||
item.classList.add("upcoming-assessment");
|
item.classList.add("upcoming-assessment");
|
||||||
item.setAttribute("data-subject", element.code);
|
item.setAttribute("data-subject", element.code);
|
||||||
item.id = `assessment${element.id}`;
|
item.id = `assessment${element.id}`;
|
||||||
|
|
||||||
item.style.cssText = element.colour;
|
item.style.cssText = element.colour;
|
||||||
|
|
||||||
const titlediv = document.createElement("div");
|
let titlediv = document.createElement("div");
|
||||||
titlediv.classList.add("upcoming-subject-title");
|
titlediv.classList.add("upcoming-subject-title");
|
||||||
titlediv.append(
|
|
||||||
|
let titlesvg =
|
||||||
stringToHTML(`<svg viewBox="0 0 24 24" style="width:35px;height:35px;fill:white;">
|
stringToHTML(`<svg viewBox="0 0 24 24" style="width:35px;height:35px;fill:white;">
|
||||||
<path d="M6 20H13V22H6C4.89 22 4 21.11 4 20V4C4 2.9 4.89 2 6 2H18C19.11 2 20 2.9 20 4V12.54L18.5 11.72L18 12V4H13V12L10.5 9.75L8 12V4H6V20M24 17L18.5 14L13 17L18.5 20L24 17M15 19.09V21.09L18.5 23L22 21.09V19.09L18.5 21L15 19.09Z"></path>
|
<path d="M6 20H13V22H6C4.89 22 4 21.11 4 20V4C4 2.9 4.89 2 6 2H18C19.11 2 20 2.9 20 4V12.54L18.5 11.72L18 12V4H13V12L10.5 9.75L8 12V4H6V20M24 17L18.5 14L13 17L18.5 20L24 17M15 19.09V21.09L18.5 23L22 21.09V19.09L18.5 21L15 19.09Z"></path>
|
||||||
</svg>`).firstChild!,
|
</svg>`).firstChild;
|
||||||
);
|
titlediv.append(titlesvg!);
|
||||||
|
|
||||||
const detailsdiv = document.createElement("div");
|
let detailsdiv = document.createElement("div");
|
||||||
detailsdiv.classList.add("upcoming-details");
|
detailsdiv.classList.add("upcoming-details");
|
||||||
const detailstitle = document.createElement("h5");
|
let detailstitle = document.createElement("h5");
|
||||||
detailstitle.innerText = `${element.subject} assessment`;
|
detailstitle.innerText = `${element.subject} assessment`;
|
||||||
const subject = document.createElement("p");
|
let subject = document.createElement("p");
|
||||||
subject.innerText = element.title;
|
subject.innerText = element.title;
|
||||||
subject.classList.add("upcoming-assessment-title");
|
subject.classList.add("upcoming-assessment-title");
|
||||||
subject.onclick = function () {
|
subject.onclick = function () {
|
||||||
document.querySelector("#menu ul")!.classList.add("noscroll");
|
document.querySelector("#menu ul")!.classList.add("noscroll");
|
||||||
location.href = `../#?page=/assessments/${element.programmeID}:${element.metaclassID}&item=${element.id}`;
|
location.href = `../#?page=/assessments/${element.programmeID}:${element.metaclassID}&item=${element.id}`;
|
||||||
};
|
};
|
||||||
detailsdiv.append(detailstitle, subject);
|
detailsdiv.append(detailstitle);
|
||||||
item.append(titlediv, detailsdiv);
|
detailsdiv.append(subject);
|
||||||
|
|
||||||
|
item.append(titlediv);
|
||||||
|
item.append(detailsdiv);
|
||||||
assessmentContainer.append(item);
|
assessmentContainer.append(item);
|
||||||
|
|
||||||
fetch(`${location.origin}/seqta/student/assessment/submissions/get`, {
|
fetch(`${location.origin}/seqta/student/assessment/submissions/get`, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: { "Content-Type": "application/json; charset=utf-8" },
|
headers: {
|
||||||
|
"Content-Type": "application/json; charset=utf-8",
|
||||||
|
},
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
assessment: element.id,
|
assessment: element.id,
|
||||||
metaclass: element.metaclassID,
|
metaclass: element.metaclassID,
|
||||||
@@ -1057,7 +1194,8 @@ function createAssessmentDateDiv(date: string, value: any, datecase?: any) {
|
|||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (response.payload.length > 0) {
|
if (response.payload.length > 0) {
|
||||||
const assessment = document.querySelector(`#assessment${element.id}`);
|
const assessment = document.querySelector(`#assessment${element.id}`);
|
||||||
const submittedtext = document.createElement("div");
|
|
||||||
|
let submittedtext = document.createElement("div");
|
||||||
submittedtext.classList.add("upcoming-submittedtext");
|
submittedtext.classList.add("upcoming-submittedtext");
|
||||||
submittedtext.innerText = "Submitted";
|
submittedtext.innerText = "Submitted";
|
||||||
assessment!.append(submittedtext);
|
assessment!.append(submittedtext);
|
||||||
@@ -1095,37 +1233,36 @@ function CheckSpecialDay(date1: Date, date2: Date) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function GetLessonColours() {
|
async function GetLessonColours() {
|
||||||
try {
|
let func = fetch(`${location.origin}/seqta/student/load/prefs?`, {
|
||||||
return fetch(`${location.origin}/seqta/student/load/prefs?`, {
|
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: { "Content-Type": "application/json; charset=utf-8" },
|
headers: {
|
||||||
|
"Content-Type": "application/json; charset=utf-8",
|
||||||
|
},
|
||||||
body: JSON.stringify({ request: "userPrefs", asArray: true, user: 69 }),
|
body: JSON.stringify({ request: "userPrefs", asArray: true, user: 69 }),
|
||||||
})
|
});
|
||||||
|
return func
|
||||||
.then((result) => result.json())
|
.then((result) => result.json())
|
||||||
.then((response) => response.payload);
|
.then((response) => response.payload);
|
||||||
} catch (error) {
|
|
||||||
console.error("[BetterSEQTA+] Failed to get lesson colours:", error);
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function CreateFilters(subjects: any) {
|
function CreateFilters(subjects: any) {
|
||||||
const filteroptions = settingsState.subjectfilters;
|
let filteroptions = settingsState.subjectfilters;
|
||||||
const filterdiv = document.querySelector("#upcoming-filters");
|
|
||||||
|
|
||||||
|
let filterdiv = document.querySelector("#upcoming-filters");
|
||||||
for (let i = 0; i < subjects.length; i++) {
|
for (let i = 0; i < subjects.length; i++) {
|
||||||
const element = subjects[i];
|
const element = subjects[i];
|
||||||
|
|
||||||
if (!Object.prototype.hasOwnProperty.call(filteroptions, element.code)) {
|
if (!Object.prototype.hasOwnProperty.call(filteroptions, element.code)) {
|
||||||
filteroptions[element.code] = true;
|
filteroptions[element.code] = true;
|
||||||
settingsState.subjectfilters = filteroptions;
|
settingsState.subjectfilters = filteroptions;
|
||||||
}
|
}
|
||||||
filterdiv!.append(
|
let elementdiv = CreateSubjectFilter(
|
||||||
CreateSubjectFilter(
|
|
||||||
element.code,
|
element.code,
|
||||||
element.colour,
|
element.colour,
|
||||||
filteroptions[element.code],
|
filteroptions[element.code],
|
||||||
),
|
|
||||||
);
|
);
|
||||||
|
|
||||||
|
filterdiv!.append(elementdiv);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1134,20 +1271,23 @@ function CreateSubjectFilter(
|
|||||||
itemcolour: string,
|
itemcolour: string,
|
||||||
checked: any,
|
checked: any,
|
||||||
) {
|
) {
|
||||||
const label = CreateElement("label", "upcoming-checkbox-container");
|
let label = CreateElement("label", "upcoming-checkbox-container");
|
||||||
label.innerText = subjectcode;
|
label.innerText = subjectcode;
|
||||||
const input = CreateElement("input") as HTMLInputElement;
|
let input1 = CreateElement("input");
|
||||||
|
const input = input1 as HTMLInputElement;
|
||||||
input.type = "checkbox";
|
input.type = "checkbox";
|
||||||
input.checked = checked;
|
input.checked = checked;
|
||||||
input.id = `filter-${subjectcode}`;
|
input.id = `filter-${subjectcode}`;
|
||||||
label.style.cssText = itemcolour;
|
label.style.cssText = itemcolour;
|
||||||
const span = CreateElement("span", "upcoming-checkmark");
|
let span = CreateElement("span", "upcoming-checkmark");
|
||||||
label.append(input, span);
|
label.append(input);
|
||||||
|
label.append(span);
|
||||||
|
|
||||||
input.addEventListener("change", function (change) {
|
input.addEventListener("change", function (change) {
|
||||||
const filters = settingsState.subjectfilters;
|
let filters = settingsState.subjectfilters;
|
||||||
const id = (change.target as HTMLInputElement).id.split("-")[1];
|
let id = (change.target as HTMLInputElement)!.id.split("-")[1];
|
||||||
filters[id] = (change.target as HTMLInputElement).checked;
|
filters[id] = (change.target as HTMLInputElement)!.checked;
|
||||||
|
|
||||||
settingsState.subjectfilters = filters;
|
settingsState.subjectfilters = filters;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -25,8 +25,8 @@ export function OpenAboutPage() {
|
|||||||
</h1>
|
</h1>
|
||||||
<div style="max-width: 600px; margin: auto;">
|
<div style="max-width: 600px; margin: auto;">
|
||||||
<img
|
<img
|
||||||
src="https://contrib.rocks/image?repo=BetterSEQTA/BetterSEQTA-Plus&columns=10"
|
src="https://contrib.rocks/image?repo=BetterSEQTA/BetterSEQTA-Plus&columns=14"
|
||||||
style="width: 100%; max-width: 500px; height: auto; object-fit: contain; display: block; margin: -80px auto 0;">
|
style="width: 100%; max-width: 500px; height: auto; object-fit: contain; display: block; margin: -110px auto 0;">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`).firstChild as HTMLElement;
|
`).firstChild as HTMLElement;
|
||||||
|
|||||||
@@ -32,40 +32,6 @@ export function OpenWhatsNewPopup() {
|
|||||||
const text = stringToHTML(/* html */ `
|
const text = stringToHTML(/* html */ `
|
||||||
<div class="whatsnewTextContainer" style="height: 50%;overflow-y: auto;">
|
<div class="whatsnewTextContainer" style="height: 50%;overflow-y: auto;">
|
||||||
|
|
||||||
<h1>3.5.0 - Adaptive Theme, Timetable Editor & More</h1>
|
|
||||||
<li>Added adaptive theme colour</li>
|
|
||||||
<li>Added optional soft gradient for adaptive theme when viewing a class</li>
|
|
||||||
<li>Added timetable editor</li>
|
|
||||||
<li>Added icon-only sidebar option for a compact layout</li>
|
|
||||||
<li>Added empty states for notices and homepage cards</li>
|
|
||||||
<li>Added BetterSEQTA Cloud sign-in and improved store browsing details</li>
|
|
||||||
<li>Improved popup rendering to better handle floating UI elements</li>
|
|
||||||
<li>Fixed assessment colouring issues</li>
|
|
||||||
<li>Fixed icon loading on SEQTA pages and improved Windows dropdown styling</li>
|
|
||||||
<li>Fixed sidebar issues with compact mode, keyboard focus, and tab navigation</li>
|
|
||||||
<li>Fixed unnecessary notice modal scrolling and other popup styling issues</li>
|
|
||||||
<li>Added new kanban categories to the assessments overview</li>
|
|
||||||
<li>Added DesQTA QR code generation in settings for linking to the DesQTA (BetterSEQTA) mobile app</li>
|
|
||||||
<li>New store with improved theme browsing and backgrounds</li>
|
|
||||||
<li>Other minor bug fixes and improvements</li>
|
|
||||||
|
|
||||||
<h1>3.4.16 - Subject Averages Fixes</h1>
|
|
||||||
<li>Fixed subject averages not showing correctly with letter grades and weighted marks</li>
|
|
||||||
|
|
||||||
<h1>3.4.15 - SEQTA New UI Patch</h1>
|
|
||||||
<li>Fixed compatibility issues caused by the new SEQTA UI update</li>
|
|
||||||
<li>Adjusted styling to match updated SEQTA layout changes</li>
|
|
||||||
<li>Other minor bug fixes and stability improvements</li>
|
|
||||||
|
|
||||||
<h1>3.4.14 - Search & Assessments Update</h1>
|
|
||||||
<li>Global Search improvements: indexing progress, more accurate results, and now includes past assessments/assignments</li>
|
|
||||||
<li>Assessment Averages now parse weightings when possible for more accurate subject averages</li>
|
|
||||||
<li>Added weight labels to assessment items (including proper handling of 0% and missing weights)</li>
|
|
||||||
<li>Fixed homepage tutor lesson colours and assessments/courses visibility issues</li>
|
|
||||||
<li>Fixed upcoming lessons tutorial room not displaying</li>
|
|
||||||
<li>Fixed favicon not showing / race condition issues</li>
|
|
||||||
<li>Other minor styling and stability improvements</li>
|
|
||||||
|
|
||||||
<h1>3.4.13 - Bug Fixes & Styling Improvements</h1>
|
<h1>3.4.13 - Bug Fixes & Styling Improvements</h1>
|
||||||
<li>Fixed house/year box hard failing when house_colour does not exist</li>
|
<li>Fixed house/year box hard failing when house_colour does not exist</li>
|
||||||
<li>Fixed message of the day being unreadable in light mode</li>
|
<li>Fixed message of the day being unreadable in light mode</li>
|
||||||
|
|||||||
@@ -53,22 +53,11 @@ export async function SendNewsPage() {
|
|||||||
const newscontainer = document.querySelector("#news-container");
|
const newscontainer = document.querySelector("#news-container");
|
||||||
document.getElementById("newsloading")?.remove();
|
document.getElementById("newsloading")?.remove();
|
||||||
|
|
||||||
const articles = response?.news?.articles;
|
// Create a document fragment to batch DOM operations
|
||||||
if (!Array.isArray(articles) || articles.length === 0) {
|
|
||||||
const emptyState = document.createElement("div");
|
|
||||||
emptyState.classList.add("day-empty");
|
|
||||||
const img = document.createElement("img");
|
|
||||||
img.src = browser.runtime.getURL(LogoLightOutline);
|
|
||||||
const text = document.createElement("p");
|
|
||||||
text.innerText = "No news articles available right now.";
|
|
||||||
emptyState.append(img, text);
|
|
||||||
newscontainer?.append(emptyState);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const fragment = document.createDocumentFragment();
|
const fragment = document.createDocumentFragment();
|
||||||
|
|
||||||
articles.forEach((article: any) => {
|
// Map over articles to create elements
|
||||||
|
response.news.articles.forEach((article: any) => {
|
||||||
const newsarticle = document.createElement("a");
|
const newsarticle = document.createElement("a");
|
||||||
newsarticle.classList.add("NewsArticle");
|
newsarticle.classList.add("NewsArticle");
|
||||||
newsarticle.href = article.url;
|
newsarticle.href = article.url;
|
||||||
@@ -96,14 +85,12 @@ export async function SendNewsPage() {
|
|||||||
title.target = "_blank";
|
title.target = "_blank";
|
||||||
|
|
||||||
const description = document.createElement("p");
|
const description = document.createElement("p");
|
||||||
const articleDescription = typeof article.description === "string"
|
|
||||||
? article.description
|
|
||||||
: "No description available.";
|
|
||||||
|
|
||||||
description.innerHTML =
|
article.description =
|
||||||
articleDescription.length > 400
|
article.description.length > 400
|
||||||
? articleDescription.substring(0, 400) + "..."
|
? article.description.substring(0, 400) + "..."
|
||||||
: articleDescription;
|
: article.description;
|
||||||
|
description.innerHTML = article.description;
|
||||||
|
|
||||||
articletext.append(title, description);
|
articletext.append(title, description);
|
||||||
newsarticle.append(articleimage, articletext);
|
newsarticle.append(articleimage, articletext);
|
||||||
@@ -115,10 +102,10 @@ export async function SendNewsPage() {
|
|||||||
|
|
||||||
if (!settingsState.animations) return;
|
if (!settingsState.animations) return;
|
||||||
|
|
||||||
const animatedArticles = Array.from(document.querySelectorAll(".NewsArticle"));
|
const articles = Array.from(document.querySelectorAll(".NewsArticle"));
|
||||||
|
|
||||||
animate(
|
animate(
|
||||||
animatedArticles.slice(0, 20),
|
articles.slice(0, 20),
|
||||||
{ opacity: [0, 1], y: [10, 0], scale: [0.99, 1] },
|
{ opacity: [0, 1], y: [10, 0], scale: [0.99, 1] },
|
||||||
{
|
{
|
||||||
delay: stagger(0.1),
|
delay: stagger(0.1),
|
||||||
|
|||||||
@@ -1,114 +0,0 @@
|
|||||||
import { getUserInfo } from "@/seqta/ui/AddBetterSEQTAElements";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Parses the current page from window.location.hash.
|
|
||||||
* Returns { programme, metaclass } for /courses/SEMESTER/X:Y or /assessments/SEMESTER/X:Y, or null.
|
|
||||||
* e.g. #?page=/courses/2023S/4804:11066 or #?page=/assessments/2023S/4621:10772
|
|
||||||
*/
|
|
||||||
function parsePageContext(): { programme: number; metaclass: number } | null {
|
|
||||||
const hash = window.location.hash || "";
|
|
||||||
const match = hash.match(/[?&]page=\/(courses|assessments)\/[^/]+\/(\d+):(\d+)/);
|
|
||||||
if (!match) return null;
|
|
||||||
const programme = parseInt(match[2], 10);
|
|
||||||
const metaclass = parseInt(match[3], 10);
|
|
||||||
if (isNaN(programme) || isNaN(metaclass)) return null;
|
|
||||||
return { programme, metaclass };
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fetches subjects and finds the subject matching programme:metaclass.
|
|
||||||
*/
|
|
||||||
async function getSubjectCode(
|
|
||||||
programme: number,
|
|
||||||
metaclass: number
|
|
||||||
): Promise<string | null> {
|
|
||||||
try {
|
|
||||||
const res = await fetch(`${location.origin}/seqta/student/load/subjects?`, {
|
|
||||||
method: "POST",
|
|
||||||
credentials: "include",
|
|
||||||
headers: { "Content-Type": "application/json; charset=utf-8" },
|
|
||||||
body: JSON.stringify({}),
|
|
||||||
});
|
|
||||||
const data = await res.json();
|
|
||||||
const payload = data?.payload;
|
|
||||||
if (!Array.isArray(payload)) return null;
|
|
||||||
|
|
||||||
for (const semester of payload) {
|
|
||||||
const subjects = semester?.subjects;
|
|
||||||
if (!Array.isArray(subjects)) continue;
|
|
||||||
const subject = subjects.find(
|
|
||||||
(s: any) =>
|
|
||||||
s &&
|
|
||||||
Number(s.programme) === programme &&
|
|
||||||
Number(s.metaclass) === metaclass
|
|
||||||
);
|
|
||||||
if (subject?.code) return subject.code;
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
} catch (error) {
|
|
||||||
console.warn("[BetterSEQTA+] Adaptive theme: failed to load subjects:", error);
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fetches user prefs and returns the colour for the given subject code.
|
|
||||||
*/
|
|
||||||
async function getSubjectColour(
|
|
||||||
subjectCode: string,
|
|
||||||
userId: number
|
|
||||||
): Promise<string | null> {
|
|
||||||
try {
|
|
||||||
const res = await fetch(`${location.origin}/seqta/student/load/prefs?`, {
|
|
||||||
method: "POST",
|
|
||||||
credentials: "include",
|
|
||||||
headers: { "Content-Type": "application/json; charset=utf-8" },
|
|
||||||
body: JSON.stringify({
|
|
||||||
request: "userPrefs",
|
|
||||||
asArray: true,
|
|
||||||
user: userId,
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
const data = await res.json();
|
|
||||||
const payload = data?.payload;
|
|
||||||
if (!Array.isArray(payload)) return null;
|
|
||||||
|
|
||||||
const pref = payload.find(
|
|
||||||
(p: { name: string; value: string }) =>
|
|
||||||
p.name === `timetable.subject.colour.${subjectCode}`
|
|
||||||
);
|
|
||||||
return pref?.value ?? null;
|
|
||||||
} catch (error) {
|
|
||||||
console.warn("[BetterSEQTA+] Adaptive theme: failed to load prefs:", error);
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the adaptive theme colour for the current page context, or null.
|
|
||||||
* When viewing a course or assessments page, returns the subject's assigned colour.
|
|
||||||
*/
|
|
||||||
export async function getAdaptiveColour(): Promise<string | null> {
|
|
||||||
const context = parsePageContext();
|
|
||||||
if (!context) return null;
|
|
||||||
|
|
||||||
const subjectCode = await getSubjectCode(context.programme, context.metaclass);
|
|
||||||
if (!subjectCode) return null;
|
|
||||||
|
|
||||||
let userId: number;
|
|
||||||
try {
|
|
||||||
const userInfo = await getUserInfo();
|
|
||||||
userId = userInfo?.id;
|
|
||||||
if (typeof userId !== "number") return null;
|
|
||||||
} catch {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const colour = await getSubjectColour(subjectCode, userId);
|
|
||||||
if (!colour || typeof colour !== "string") return null;
|
|
||||||
|
|
||||||
// Basic hex validation
|
|
||||||
if (/^#([0-9A-Fa-f]{3}){1,2}$/.test(colour)) return colour;
|
|
||||||
if (/^[0-9A-Fa-f]{6}$/.test(colour)) return `#${colour}`;
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
@@ -14,9 +14,7 @@ export class StorageChangeHandler {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private registerHandlers() {
|
private registerHandlers() {
|
||||||
settingsState.register("selectedColor", () => void updateAllColors());
|
settingsState.register("selectedColor", updateAllColors.bind(this));
|
||||||
settingsState.register("adaptiveThemeColour", () => void updateAllColors());
|
|
||||||
settingsState.register("adaptiveThemeGradient", () => void updateAllColors());
|
|
||||||
settingsState.register("DarkMode", this.handleDarkModeChange.bind(this));
|
settingsState.register("DarkMode", this.handleDarkModeChange.bind(this));
|
||||||
settingsState.register("onoff", this.handleOnOffChange.bind(this));
|
settingsState.register("onoff", this.handleOnOffChange.bind(this));
|
||||||
settingsState.register("shortcuts", this.handleShortcutsChange.bind(this));
|
settingsState.register("shortcuts", this.handleShortcutsChange.bind(this));
|
||||||
@@ -32,23 +30,10 @@ export class StorageChangeHandler {
|
|||||||
"subjectfilters",
|
"subjectfilters",
|
||||||
FilterUpcomingAssessments.bind(this),
|
FilterUpcomingAssessments.bind(this),
|
||||||
);
|
);
|
||||||
settingsState.register(
|
|
||||||
"iconOnlySidebar",
|
|
||||||
this.handleIconOnlySidebarChange.bind(this),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private handleIconOnlySidebarChange(newValue: boolean | undefined) {
|
|
||||||
if (!document.body) return;
|
|
||||||
if (newValue) {
|
|
||||||
document.body.classList.add("icon-only-sidebar");
|
|
||||||
} else {
|
|
||||||
document.body.classList.remove("icon-only-sidebar");
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private handleDarkModeChange() {
|
private handleDarkModeChange() {
|
||||||
void updateAllColors();
|
updateAllColors();
|
||||||
}
|
}
|
||||||
|
|
||||||
private handleOnOffChange(newValue: boolean) {
|
private handleOnOffChange(newValue: boolean) {
|
||||||
|
|||||||
@@ -40,9 +40,6 @@ export interface SettingsState {
|
|||||||
newsSource?: string;
|
newsSource?: string;
|
||||||
mockNotices?: boolean;
|
mockNotices?: boolean;
|
||||||
hideSensitiveContent?: boolean;
|
hideSensitiveContent?: boolean;
|
||||||
iconOnlySidebar?: boolean;
|
|
||||||
adaptiveThemeColour?: boolean;
|
|
||||||
adaptiveThemeGradient?: boolean;
|
|
||||||
|
|
||||||
// depreciated keys
|
// depreciated keys
|
||||||
animatedbk: boolean;
|
animatedbk: boolean;
|
||||||
@@ -50,12 +47,6 @@ export interface SettingsState {
|
|||||||
lettergrade: boolean;
|
lettergrade: boolean;
|
||||||
assessmentsAverage?: boolean;
|
assessmentsAverage?: boolean;
|
||||||
notificationCollector?: boolean;
|
notificationCollector?: boolean;
|
||||||
|
|
||||||
// BetterSEQTA Cloud (accounts.betterseqta.org)
|
|
||||||
bsplus_client_id?: string;
|
|
||||||
bsplus_token?: string;
|
|
||||||
bsplus_refresh_token?: string;
|
|
||||||
bsplus_user?: { id: string; email?: string; username?: string; displayName?: string; pfpUrl?: string; admin_level?: number };
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ToggleItem {
|
interface ToggleItem {
|
||||||
|
|||||||
Reference in New Issue
Block a user