stashapp/CommunityScripts
1
0
Fork 0
mirror of https://github.com/stashapp/CommunityScripts.git synced 2026-04-19 01:54:19 -05:00
Code Issues Packages Projects Releases Wiki Activity

[Hot Cards] Fix Holo style to work with any type of card (#376)

Browse Source
This commit is contained in:
HandyRandyx
2024-07-30 00:32:09 -03:00
committed by GitHub
parent 62cb8ecb3f
commit a5df45ba48
5 changed files with 129 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
plugins/hotCards/README.md
View File

@@ -25,14 +25,14 @@ After installation, you can configure the plugin to suit your needs. Set a desir
_[criterion]\_[value]\_[style]\_[gradient-opts]\_[hover-opts]\_[card-opts]_
| Parameter | Description | Details |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `<criterion>` | Defines the basis for applying styles. Use `t` for tag-based criteria, `r` for rating-based criteria, or `d` to disable. | If left empty, it will default to the global _Tag ID_ or _Rating Threshold_ as configured. If both options are enabled and unspecified, ~~the Tag ID will be used by default~~ both criteria will be used. |
| `<value>` | Specifies the exact value for the Tag ID or Rating Threshold to be used.<br><br>_Multiple values can be specified using a comma-separated list and slashes to delimit each set of criteria:_ `<tag_id>,.../<tag_id>,.../...` or `<rating>/<rating>/...` | Defaults to the global _Tag ID_ or _Rating Threshold_ value.<br><br>**Important**: When dealing with tenths precision (e.g. 4.8, 3.25), map these to the 6-100 range and set the _Rating Threshold_ in that range. Thus, 4.8 would be 96, 3.25 would be 65, and so on.<br><br>See [this additional information](#regarding-multiple-values) on multiple values. |
| `<style>` | Defines the styling options as a comma-separated list of colors or a style preset.</br></br>Options include: a fixed color (e.g., #5ff2a2), a style preset (e.g., hot), or a gradient (e.g., #ef1313,#3bd612,... hex color codes or color names).<br><br>_A style can be specified for each set of values using a slash-separated list:_ `<style>/<style>/...` | Defaults to **default** (basic style preset)<br><br>Style Presets available: [**default**](#default), [**hot**](#hot), [**gold**](#gold), and [**holo**](#holo). |
| `<gradient_opts>` | Specifies gradient options as a comma-separated list: `<type>,<angle>,<animation>`.</br></br> Example: **linear,35deg,4s alternate infinite** for a linear gradient with a 35-degree angle and a 4-second alternating infinite animation.</br></br>_Gradient options can be specified for each set of values using a slash-separated list:_ `<gradient_opts>/<gradient_opts>/...` | `<type>` Defaults to **linear**</br></br>Refer to [Using CSS gradients](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients) to see all types you can use.</br></br>`<angle>` Defaults to **0deg**</br></br>`<animation>` Defaults to **none**</br></br>Note that you can only configure the animation properties of the element. See [Using CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) for additional information. |
| `<hover_opts>` | Specifies hover options as a comma-separated list: `<color>,<animation>`.</br></br>Example: **#ff0000,2s ease infinite** for a hover effect with a color of #ff0000 and a 2-second ease infinite animation.</br></br>_Hover options can be specified for each set of values using a slash-separated list:_ `<hover_opts>/<hover_opts>/...` | `<color>` Defaults to **transparent**</br></br>`<animation>` Defaults to **none**</br></br>Similar to the gradient animation, you can only configure the animation properties of the element. |
| `<card_opts>` | Specifies the general options for the card as a comma-separated list: `<fill>,<opacity>,<animation>`.</br></br>_Card options can be specified for each set of values using a slash-separated list:_ `<card_opts>/<card_opts>/...` | `fill` Defaults to **true**<br>_Indicates whether the card should be filled._</br></br>Tip: You can set this to **false** to color only the border of the card.</br></br>`opacity` Defaults to **80**<br>_Represents the opacity for the card background. Range from 0 to 100._</br></br>`animation` Defaults to **false**<br>_Only used for [**holo**](#holo) style preset._ |
| Parameter | Description | Details |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `<criterion>` | Defines the basis for applying styles. Use `t` for tag-based criteria, `r` for rating-based criteria, or `d` to disable. | If left empty, it will default to the global _Tag ID_ or _Rating Threshold_ as configured. If both options are enabled and unspecified, ~~the Tag ID will be used by default~~ both criteria will be used. |
| `<value>` | Specifies the exact value for the Tag ID or Rating Threshold to be used.<br><br>_Multiple values can be specified using a comma-separated list and slashes to delimit each set of criteria:_ `<tag_id>,.../<tag_id>,.../...` or `<rating>/<rating>/...` | Defaults to the global _Tag ID_ or _Rating Threshold_ value.<br><br>The _value_ parameter supports all _Rating System Types_ in Stash:<br><br>- **Decimals (0.0 to 10.0):** Multiply the rating by 10 to map it to the 0-100 range and set the _Rating Threshold_ in the 6-100 range.<br><br>- **Stars (0.0 to 5.0)**: Use directly within the 1-5 range for all precisions (Full, Half, Quarter, Tenth) and set the _Rating Threshold_ in the 1-5 range. Alternatively, use the 6-100 range if preferred.<br><br>**Example Conversions:**<br><br>- **Decimals:** A rating of 6.9 becomes 69.<br> - **Stars (Tenth Precision):** A rating of 4.6 stars can be inputted as 4.6 or 92 (using the 6-100 range).<br><br>See [this additional information](#regarding-multiple-values) on _multiple values_. |
| `<style>` | Defines the styling options as a comma-separated list of colors or a style preset.</br></br>Options include: a fixed color (e.g., #5ff2a2), a style preset (e.g., hot), or a gradient (e.g., #ef1313,#3bd612,... hex color codes or color names).<br><br>_A style can be specified for each set of values using a slash-separated list:_ `<style>/<style>/...` | Defaults to **default** (basic style preset)<br><br>Style Presets available: [**default**](#default), [**hot**](#hot), [**gold**](#gold), and [**holo**](#holo). |
| `<gradient_opts>` | Specifies gradient options as a comma-separated list: `<type>,<angle>,<animation>`.</br></br> Example: **linear,35deg,4s alternate infinite** for a linear gradient with a 35-degree angle and a 4-second alternating infinite animation.</br></br>_Gradient options can be specified for each set of values using a slash-separated list:_ `<gradient_opts>/<gradient_opts>/...` | `<type>` Defaults to **linear**</br></br>Refer to [Using CSS gradients](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients) to see all types you can use.</br></br>`<angle>` Defaults to **0deg**</br></br>`<animation>` Defaults to **none**</br></br>Note that you can only configure the animation properties of the element. See [Using CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) for additional information. |
| `<hover_opts>` | Specifies hover options as a comma-separated list: `<color>,<animation>`.</br></br>Example: **#ff0000,2s ease infinite** for a hover effect with a color of #ff0000 and a 2-second ease infinite animation.</br></br>_Hover options can be specified for each set of values using a slash-separated list:_ `<hover_opts>/<hover_opts>/...` | `<color>` Defaults to **transparent**</br></br>`<animation>` Defaults to **none**</br></br>Similar to the gradient animation, you can only configure the animation properties of the element. |
| `<card_opts>` | Specifies the general options for the card as a comma-separated list: `<fill>,<opacity>,<animate>`.</br></br>_Card options can be specified for each set of values using a slash-separated list:_ `<card_opts>/<card_opts>/...` | `fill` Defaults to **true**<br>_Indicates whether the card should be filled._</br></br>Tip: You can set this to **false** to color only the border of the card.</br></br>`opacity` Defaults to **80**<br>_Represents the opacity for the card background. Range from 0 to 100._</br></br>`animate` Defaults to **false**<br>_Only used for [**holo**](#holo) style preset._ |
**Note**: _It is recommended to refresh the page once you are done configuring for the changes to take effect and the previous style to be overwritten._
@@ -82,14 +82,14 @@ In scenarios where multiple values are specified, the rules for how these values
`t_123_gold`
| Segment | Value | Meaning |
| ------------- | ----- | ---------------------- |
| criterion | t | Tag-based |
| value | 123 | Use 123 as Tag ID |
| style | gold | Use Gold preset |
| gradient-opts | | Use Gold gradient opts |
| hover-opts | | Use Gold hover opts |
| card-opts | | Use default values |
| Segment | Value | Meaning |
| ------------- | ----- | ------------------------- |
| criterion | t | Tag-based |
| value | 123 | Use 123 as Tag ID |
| style | gold | Use Gold style |
| gradient-opts | | Use Gold gradient options |
| hover-opts | | Use Gold hover options |
| card-opts | | Use default values |
---
@@ -101,7 +101,7 @@ In scenarios where multiple values are specified, the rules for how these values
| ------------- | --------- | ------------------------------------------ |
| criterion | | Use tag or rating as configured |
| value | | Use global tag or rating value |
| style | hot | Use Hot preset |
| style | hot | Use Hot style |
| gradient-opts | ,,none | No gradient animation |
| hover-opts | pink,none | Set hover effect color, no hover animation |
| card-opts | ,40 | Set opacity to 40 |
@@ -133,7 +133,7 @@ In scenarios where multiple values are specified, the rules for how these values
| value | 4 | Use 4 as Rating Threshold |
| style | white | Set fixed color |
| gradient-opts | | No gradient |
| hover-opts | #5ff1a1 | Set hover color |
| hover-opts | #5ff1a1 | Set hover effect color |
| card-opts | false | No fill |
---
@@ -142,14 +142,14 @@ In scenarios where multiple values are specified, the rules for how these values
`_67_pink,red,yellow,green,red,blue_,30deg,5s ease infinite_red,1s ease-in-out infinite_,100`
| Segment | Value | Meaning |
| ------------- | ------------------------------ | ----------------------------------------- |
| criterion | | Use tag or rating as configured |
| value | 67 | Use 67 as Tag ID or Rating Threshold |
| style | pink,red,yellow,green,red,blue | Apply gradient |
| gradient-opts | ,30deg,5s ease infinite | Specify angle, and animate gradient |
| hover-opts | red,1s ease-in-out infinite | Set hover effect color, and animate hover |
| card-opts | ,100 | Use max opacity |
| Segment | Value | Meaning |
| ------------- | ------------------------------ | ---------------------------------------- |
| criterion | | Use tag or rating as configured |
| value | 67 | Use 67 as Tag ID or Rating Threshold |
| style | pink,red,yellow,green,red,blue | Apply gradient |
| gradient-opts | ,30deg,5s ease infinite | Specify angle and animate gradient |
| hover-opts | red,1s ease-in-out infinite | Set hover effect color and animate hover |
| card-opts | ,100 | Use max opacity |
**Note**: _You can also skip inner values, notice the first comma in **gradient-opts**. The type is not provided, so linear gradient will be used by default._
@@ -174,33 +174,33 @@ In scenarios where multiple values are specified, the rules for how these values
`t_111,116,78,87/105_pink,red,white/orange,white_/,70deg,4s alternate infinite__,30/`
| Segment | Value | Meaning |
| ------------- | ----------------------------- | -------------------------------------------------------------------------------- |
| criterion | t | Tag-based |
| value | 111,116,78,87/105 | Use tags 111, 116, 78, 87 or 105 |
| style | pink,red,white/orange,white | Apply pink, red, white gradient for first set of tags; orange, white for tag 105 |
| gradient-opts | /,70deg,4s alternate infinite | No animation for first set of tags; 70deg, 4s alternate infinite for tag 105 |
| hover-opts | | No hover effect |
| card-opts | ,30/ | Set opacity to 30 for first set of tags; default opacity for tag 105 |
| Segment | Value | Meaning |
| ------------- | ----------------------------- | -------------------------------------------------------------------------------------------------- |
| criterion | t | Tag-based |
| value | 111,116,78,87/105 | Use tags 111, 116, 78, 87 or 105 |
| style | pink,red,white/orange,white | Apply pink, red, white gradient for first set of tags; orange, white gradient for tag 105 |
| gradient-opts | /,70deg,4s alternate infinite | Use default gradient options for first set of tags; specify angle and animate gradient for tag 105 |
| hover-opts | | No hover effect |
| card-opts | ,30/ | Set opacity to 30 for first set of tags; default opacity for tag 105 |
---
**Rating with multi-style**
`r_5/4/3_gold/hot/default___//,50`
`r_5/4.2/3.7_gold/hot/default___//,50`
| Segment | Value | Meaning |
| ------------- | ---------------- | ------------------------------------------------------------------------------------- |
| criterion | r | Rating-based |
| value | 5/4/3 | Use ratings 5, 4, and 3 |
| style | gold/hot/default | Apply gold style to ratings 5, hot style to ratings 4, and default style to ratings 3 |
| gradient-opts | | Use corresponding gradient options |
| hover-opts | | Use corresponding hover options |
| card-opts | //,50 | Set opacity to 50 for ratings 3; default opacity to other ratings |
| Segment | Value | Meaning |
| ------------- | ---------------- | ----------------------------------------------------------------------------------------------- |
| criterion | r | Rating-based |
| value | 5/4.2/3.7 | Use ratings 5, 4.2, and 3.7 |
| style | gold/hot/default | Apply Gold style to ratings 5, Hot style to ratings >= 4.2, and Default style to ratings >= 3.7 |
| gradient-opts | | Use corresponding gradient options |
| hover-opts | | Use corresponding hover options |
| card-opts | //,50 | Set opacity to 50 for ratings >= 3.7; default opacity to other ratings |
---
**Multi-rating (tenth) with multi-style**
**Multi-rating with multi-style**
`r_96,90,88/70,60_#0fff00/#000cff`
@@ -239,8 +239,6 @@ You can specify `__gold` for the card type you want the **gold** preset to be ap
![Holo](/plugins/hotCards/assets/holo.png)
**Important**: Currently, the Holo style preset only works well with **performer** cards. It should not be used with any other card type until a workaround is found.
You can specify `__holo` for the card type you want the **holo** preset to be applied and it will use the configured Tag ID or Rating Threshold.
**Note**: _By default, the animation of the holographic effect is disabled, you can activate it by running: `__holo___,,true`._
**Note**: _By default, the animation of the holographic effect is disabled, you can enable it by running: `__holo___,,true`._

BIN
plugins/hotCards/assets/holo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 190 KiB

After

Width:  |  Height:  |  Size: 339 KiB

6
plugins/hotCards/hotCards.css
View File

@@ -29,8 +29,8 @@
--mx: 50%;
--my: 50%;
--radius: 4.55% / 3.5%;
--space: 1%; /* 5% */
--angle: 133deg;
--space: 1%;
--angle: 0deg;
--imgsize: 50%;
--color1: rgb(255, 119, 115) calc(var(--space) * 1);
@@ -50,7 +50,6 @@
.shine {
height: 100%;
aspect-ratio: 0.714;
mix-blend-mode: color-dodge;
background-image: var(--img),
repeating-linear-gradient(
@@ -101,7 +100,6 @@
content: "";
visibility: visible;
height: 100%;
aspect-ratio: 0.714;
mix-blend-mode: exclusion;
background-image: var(--img),
repeating-linear-gradient(

112
plugins/hotCards/hotCards.js
View File

@@ -21,7 +21,7 @@
card_opts: {
fill: true,
opacity: 80,
animation: false,
animate: false,
},
};
const CRITERIA = { tag: "t", rating: "r", disabled: "d" };
@@ -102,7 +102,7 @@
card_opts: parseArraySegment(segments[5], DEFAULTS.card_opts, [
"fill",
"opacity",
"animation",
"animate",
]),
};
}
@@ -329,11 +329,16 @@
);
if (segmentParams) {
const classId = segmentParams.value.join("-");
createHotElementAndAttachToDOM(card, cardClass, classId, isHome);
checkHoloCardsAndAttachToDOM(
const classId = segmentParams.value.join("-").replace(/\./g, "-");
const hotCardEl = createHotElementAndAttachToDOM(
card,
cardClass,
classId,
isHome
);
checkHoloCardAndAttachToDOM(
hotCardEl,
cardClass,
segmentParams.style,
segmentParams.cardOptions
);
@@ -406,6 +411,8 @@
cardElement.before(hotElement);
hotElement.append(cardElement);
hotCards.push(hotElement);
return hotElement;
}
function createElementFromHTML(htmlString) {
@@ -428,7 +435,7 @@
if (hotCardClasses.length === 0 || !hotCardContainsAllClasses) {
const pseudoElementStyles = value.map((segment, index) => {
const segmentOrValue = Array.isArray(segment) ? segment : value;
const classId = segmentOrValue.join("-");
const classId = segmentOrValue.join("-").replace(/\./g, "-");
const hotCardClass = `.hot-${card.class}-${classId}`;
// Skip if the hot card class is already present
@@ -618,44 +625,87 @@
}`;
}
/**
* Currently, it only works for performer cards
*/
function checkHoloCardsAndAttachToDOM(
function checkHoloCardAndAttachToDOM(
hotCardEl,
cardClass,
classId,
style,
cardOptions
) {
const cardAnimation = /true/i.test(cardOptions.animation);
const hotCardClass = `.hot-${cardClass}-${classId}`;
const cards = document.querySelectorAll(`${hotCardClass}`);
if (STYLES[style] !== STYLES.holo) return;
cards.forEach((card) => {
const imgElement = card.querySelector(".thumbnail-section > a > img");
const holoEl = createElementFromHTML(`<div class="holo">`);
const shineEl = createElementFromHTML(`<div class="shine"></div>`);
const posX = getRandomInt(100);
const posY = getRandomInt(100);
const animateCard = /true/i.test(cardOptions.animate);
const cardClasses = ["image-card", "scene-card", "studio-card"];
const classInArray = cardClasses.includes(cardClass);
const isStudioCard = cardClass === "studio-card";
const isImageOrSceneCard = classInArray && !isStudioCard;
const classSuffix = isImageOrSceneCard ? "preview-image" : "image";
const imgClass = `.${cardClass}-${classSuffix}`;
imgElement?.classList.add("holo-img");
imgElement?.before(holoEl);
holoEl.append(imgElement);
holoEl.append(shineEl);
const targetEl = hotCardEl.querySelector(imgClass);
const holoEl = createElementFromHTML(`<div class="holo"></div>`);
const shineEl = createElementFromHTML(`<div class="shine"></div>`);
const seedX = getRandomInt(100);
const seedY = getRandomInt(100);
holoEl.style.setProperty("--posx", `${posX}%`);
holoEl.style.setProperty("--posy", `${posY}%`);
const calculateAspectRatio = (width, height) => width / height;
const calculateDegrees = (aspectRatio, degreesOffset) =>
degreesOffset + Math.atan(aspectRatio) * (180 / Math.PI);
const setFixedAspectRatio = (el, aspectRatio) => {
el.style.setProperty("aspect-ratio", aspectRatio.toFixed(3));
};
const applyInitialStyles = () => {
if (isStudioCard) {
holoEl.style.display = "block";
shineEl.style.position = "absolute";
shineEl.style.top = "0px";
shineEl.style.left = "0px";
}
holoEl.style.setProperty("--posx", `${seedX}%`);
holoEl.style.setProperty("--posy", `${seedY}%`);
};
if (cardAnimation) animateHoloCards(holoEl, posX, posY);
targetEl.classList.add("holo-img");
targetEl.before(holoEl);
holoEl.append(targetEl);
holoEl.append(shineEl);
applyInitialStyles();
waitForImageLoad(imgClass, () => {
const hotBorderEl = hotCardEl.querySelector(".hot-border");
const studioCardMarginSize = 5;
const isSceneCard = cardClass === "scene-card";
const degreesOffset = isStudioCard ? 98 : isSceneCard ? 83 : 97;
let aspectRatio = 0;
let degrees = 0;
// Delay to ensure the resizing of the width for the cardClass element / hotBorderEl has been completed
setTimeout(() => {
if (isStudioCard) {
aspectRatio = calculateAspectRatio(
hotBorderEl.offsetWidth - studioCardMarginSize,
hotBorderEl.offsetHeight - studioCardMarginSize
);
degrees = Math.floor(calculateDegrees(aspectRatio, degreesOffset));
} else {
aspectRatio = calculateAspectRatio(
hotBorderEl.offsetWidth,
targetEl.offsetHeight
);
degrees = Math.round(calculateDegrees(aspectRatio, degreesOffset));
}
holoEl.style.setProperty("--angle", `${degrees}deg`);
setFixedAspectRatio(shineEl, aspectRatio);
}, 100);
});
if (animateCard) animateHoloCards(holoEl, seedX, seedY);
}
function animateHoloCards(holoEl, px, py) {
function animateHoloCards(holoEl, seedX, seedY) {
const increment = 0.05;
let posX = px;
let posY = py;
let posX = seedX;
let posY = seedY;
let add = increment;
function animate() {

2
plugins/hotCards/hotCards.yml
View File

@@ -1,6 +1,6 @@
name: Hot Cards
description: Adds custom styling to card elements that match a Tag ID or a Rating Threshold.
version: 1.1.7
version: 1.1.8
url: https://github.com/stashapp/CommunityScripts/tree/main/plugins/hotCards
# requires: CommunityScriptsUILibrary
ui: