generated from trim21/webpack-userscript-template
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
WIP settings section for custom display rules
- Loading branch information
Showing
13 changed files
with
189 additions
and
71 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import {newSettingsSection} from "./settings"; | ||
| import {CustomDisplayRule, readable, Target} from "../dataTypes"; | ||
| import {getValue, StorageKey} from "./storage"; | ||
| import {OptionKey, stringOptions} from "./general"; | ||
| import Sortable from 'sortablejs'; | ||
| import {moveIndex} from "../utils"; | ||
|
|
||
| // TODO: settings with a site pattern/regex (powerful and easy to verify - isActive indicator) | ||
| // TODO: escape input examples in description | ||
| const customRulesMap: Map<Target, CustomDisplayRule[]> = new Map([ | ||
| [Target.Scene, [{pattern: "1", filter: "organized:true", display: {color: "purple"}}, {pattern: "2", filter: "organized:true", display: {color: "purple"}}, {pattern: "3", filter: "organized:true", display: {color: "purple"}}, {pattern: "4", filter: "organized:true", display: {color: "purple"}}, {pattern: "5", filter: "file_count:{value:1,modifier:GREATER_THAN}", display: {color: "brown"}}]], | ||
| [Target.Studio, [{pattern: "*", filter: "scene_count:{value:5,modifier:GREATER_THAN}", display: {color: "purple"}}]] | ||
| ]); | ||
|
|
||
| export const customDisplayRules: Map<Target, CustomDisplayRule[]> = await getValue<Map<Target, CustomDisplayRule[]>>(StorageKey.CustomDisplayRules, customRulesMap); | ||
|
|
||
| export function initDisplaySettings() { | ||
| let description = "Custom display rules can change the display of check marks. " + | ||
| "A rule applies when the URL pattern matches the current website and the GraphQL filter matches the element. " + | ||
| "Rules higher in the list have higher priority. " + | ||
| "The order can be changed by dragging. " + | ||
| "If no rule applies, the default display options are use. " + | ||
| "GraphQL filters may not contain AND/OR/NOT. " + | ||
| "Multiple filters can still be concatenated by ','." | ||
| let displaySection = newSettingsSection("display", "Display", description); | ||
| populateDisplaySection(displaySection); | ||
| } | ||
|
|
||
| // TODO: use tabs for targets? | ||
| // TODO: separate modal/tab for display settings | ||
| function populateDisplaySection(displaySection: HTMLElement) { | ||
| let table = document.createElement("table"); | ||
| let tableHead = document.createElement("thead"); | ||
| tableHead.append(tableHeadRow()); | ||
| table.append(tableHead); | ||
|
|
||
| let tableBody = document.createElement("tbody"); | ||
| table.append(tableBody); | ||
| let tableHeading = document.createElement("h2"); | ||
| tableHeading.innerHTML = readable(Target.Scene) | ||
| displaySection.append(tableHeading); | ||
| displaySection.append(table); | ||
| Sortable.create(tableBody, { | ||
| onEnd: event => { | ||
| if (event.oldIndex && event.newIndex) { | ||
| let old = customDisplayRules.get(Target.Scene) ?? []; | ||
| customDisplayRules.set(Target.Scene, moveIndex(old, event.oldIndex, event.newIndex)); | ||
| } | ||
| } | ||
| }); | ||
| populateCustomRulesTable(tableBody, Target.Scene); | ||
| } | ||
|
|
||
| function populateCustomRulesTable(tableBody: HTMLTableSectionElement, target: Target) { | ||
| let tableRows = Array.from(customDisplayRules.get(target) ?? []) | ||
| .map(tableRow); | ||
| tableBody.replaceChildren(...tableRows); | ||
| } | ||
|
|
||
| function tableHeadRow(): HTMLTableRowElement { | ||
| let row = document.createElement("tr"); | ||
| row.innerHTML = "<th>URL Pattern</th><th>GraphQL Filter</th><th>Color</th><th>Preview</th>"; | ||
| return row; | ||
| } | ||
|
|
||
| function tableRow(customRule: CustomDisplayRule): HTMLTableRowElement { | ||
| let row = document.createElement("tr"); | ||
| let preview = document.createElement("span"); | ||
| preview.innerHTML = stringOptions.get(OptionKey.checkMark)!; | ||
| preview.classList.add("stashCheckerSymbol"); | ||
| preview.style.color = customRule.display.color; | ||
| let previewElement = document.createElement("td"); | ||
| previewElement.classList.add("center"); | ||
| previewElement.append(preview) | ||
|
|
||
| row.append( | ||
| dataCell(customRule.pattern), | ||
| dataCell(customRule.filter), | ||
| dataCell(customRule.display.color), | ||
| previewElement, | ||
| ); | ||
| return row; | ||
| } | ||
|
|
||
| function dataCell(innerHtml: string): HTMLTableCellElement { | ||
| let cell = document.createElement("td"); | ||
| cell.innerHTML = innerHtml | ||
| return cell; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.