diff --git a/CHANGELOG.md b/CHANGELOG.md index 15b76e126..eeb8d8773 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 * Direct Messages: Test for the user being in the to field * Direct Messages: Improve HTML to e-mail text conversion +* Better support for FSE color schemes ### Fixed diff --git a/build/reactions/index.asset.php b/build/reactions/index.asset.php index f997c8b2c..639203f1f 100644 --- a/build/reactions/index.asset.php +++ b/build/reactions/index.asset.php @@ -1 +1 @@ - array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'da6dfc9f5f27770a7d45'); + array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'dbcb7afdfaa6ae6975c0'); diff --git a/build/reactions/index.js b/build/reactions/index.js index 02c3d9429..74a9f0d82 100644 --- a/build/reactions/index.js +++ b/build/reactions/index.js @@ -1 +1 @@ -(()=>{"use strict";var e,t={505:(e,t,a)=>{const n=window.wp.blocks,r=window.React,l=window.wp.blockEditor,o=window.wp.element,s=window.wp.i18n,i=window.wp.components,c=window.wp.apiFetch;var u=a.n(c);const{namespace:m,defaultAvatarUrl:h}=window._activityPubOptions,p=({reactions:e})=>{const[t,a]=(0,o.useState)(new Set),[n,l]=(0,o.useState)(new Map),s=(0,o.useRef)([]),i=()=>{s.current.forEach((e=>clearTimeout(e))),s.current=[]},c=(t,n)=>{i();const r=100,o=e.length;n&&l((e=>{const a=new Map(e);return a.set(t,"clockwise"),a}));const c=e=>{const i="right"===e,c=i?o-1:0,u=i?1:-1;for(let e=i?t:t-1;i?e<=c:e>=c;e+=u){const o=Math.abs(e-t),i=setTimeout((()=>{a((t=>{const a=new Set(t);return n?a.add(e):a.delete(e),a})),n&&e!==t&&l((t=>{const a=new Map(t),n=e-u,r=a.get(n);return a.set(e,"clockwise"===r?"counter":"clockwise"),a}))}),o*r);s.current.push(i)}};if(c("right"),c("left"),!n){const e=Math.max((o-t)*r,t*r),a=setTimeout((()=>{l(new Map)}),e+r);s.current.push(a)}};return(0,o.useEffect)((()=>()=>i()),[]),(0,r.createElement)("ul",{className:"reaction-avatars"},e.map(((e,a)=>{const l=n.get(a),o=["reaction-avatar",t.has(a)?"wave-active":"",l?`rotate-${l}`:""].filter(Boolean).join(" "),s=e.avatar||h;return(0,r.createElement)("li",{key:a},(0,r.createElement)("a",{href:e.url,target:"_blank",rel:"noopener noreferrer",onMouseEnter:()=>c(a,!0),onMouseLeave:()=>c(a,!1)},(0,r.createElement)("img",{src:s,alt:e.name,className:o,width:"32",height:"32"})))})))},f=({reactions:e,type:t})=>(0,r.createElement)("ul",{className:"reaction-list"},e.map(((e,t)=>(0,r.createElement)("li",{key:t},(0,r.createElement)("a",{href:e.url,className:"reaction-item",target:"_blank",rel:"noopener noreferrer"},(0,r.createElement)("img",{src:e.avatar,alt:e.name,width:"32",height:"32"}),(0,r.createElement)("span",null,e.name)))))),d=({items:e,label:t})=>{const[a,n]=(0,o.useState)(!1),[l,s]=(0,o.useState)(null),[c,u]=(0,o.useState)(e.length),m=(0,o.useRef)(null);(0,o.useEffect)((()=>{if(!m.current)return;const t=()=>{const t=m.current;if(!t)return;const a=t.offsetWidth-(l?.offsetWidth||0)-12,n=Math.max(1,Math.floor((a-32)/22));u(Math.min(n,e.length))};t();const a=new ResizeObserver(t);return a.observe(m.current),()=>{a.disconnect()}}),[l,e.length]);const h=e.slice(0,c);return(0,r.createElement)("div",{className:"reaction-group",ref:m},(0,r.createElement)(p,{reactions:h}),(0,r.createElement)(i.Button,{ref:s,className:"reaction-label is-link",onClick:()=>n(!a),"aria-expanded":a},t),a&&l&&(0,r.createElement)(i.Popover,{anchor:l,onClose:()=>n(!1)},(0,r.createElement)(f,{reactions:e})))};function g({title:e="",postId:t=null,reactions:a=null,titleComponent:n=null}){const[l,s]=(0,o.useState)(a),[i,c]=(0,o.useState)(!a);return(0,o.useEffect)((()=>{if(a)return s(a),void c(!1);t?(c(!0),u()({path:`/${m}/posts/${t}/reactions`}).then((e=>{s(e),c(!1)})).catch((()=>c(!1)))):c(!1)}),[t,a]),i?null:l&&Object.values(l).some((e=>e.items?.length>0))?(0,r.createElement)("div",{className:"activitypub-reactions"},n||e&&(0,r.createElement)("h6",null,e),Object.entries(l).map((([e,t])=>t.items?.length?(0,r.createElement)(d,{key:e,items:t.items,label:t.label}):null))):null}const v=e=>{const t=["#FF6B6B","#4ECDC4","#45B7D1","#96CEB4","#FFEEAD","#D4A5A5","#9B59B6","#3498DB","#E67E22"],a=(()=>{const e=["Bouncy","Cosmic","Dancing","Fluffy","Giggly","Hoppy","Jazzy","Magical","Nifty","Perky","Quirky","Sparkly","Twirly","Wiggly","Zippy"],t=["Badger","Capybara","Dolphin","Echidna","Flamingo","Giraffe","Hedgehog","Iguana","Jellyfish","Koala","Lemur","Manatee","Narwhal","Octopus","Penguin"];return`${e[Math.floor(Math.random()*e.length)]} ${t[Math.floor(Math.random()*t.length)]}`})(),n=t[Math.floor(Math.random()*t.length)],r=a.charAt(0),l=document.createElement("canvas");l.width=64,l.height=64;const o=l.getContext("2d");return o.fillStyle=n,o.beginPath(),o.arc(32,32,32,0,2*Math.PI),o.fill(),o.fillStyle="#FFFFFF",o.font="32px sans-serif",o.textAlign="center",o.textBaseline="middle",o.fillText(r,32,32),{name:a,url:"#",avatar:l.toDataURL()}},w=JSON.parse('{"UU":"activitypub/reactions"}');(0,n.registerBlockType)(w.UU,{edit:function({attributes:e,setAttributes:t,__unstableLayoutClassNames:a}){const n=(0,l.useBlockProps)({className:a}),[i]=(0,o.useState)({likes:{label:"9 likes",items:Array.from({length:9},((e,t)=>v()))},reposts:{label:"6 reposts",items:Array.from({length:6},((e,t)=>v()))}}),c=(0,r.createElement)(l.RichText,{tagName:"h6",value:e.title,onChange:e=>t({title:e}),placeholder:(0,s.__)("Fediverse reactions","activitypub"),disableLineBreaks:!0,allowedFormats:[]});return(0,r.createElement)("div",{...n},(0,r.createElement)(g,{titleComponent:c,reactions:i}))}})}},a={};function n(e){var r=a[e];if(void 0!==r)return r.exports;var l=a[e]={exports:{}};return t[e](l,l.exports,n),l.exports}n.m=t,e=[],n.O=(t,a,r,l)=>{if(!a){var o=1/0;for(u=0;u=l)&&Object.keys(n.O).every((e=>n.O[e](a[i])))?a.splice(i--,1):(s=!1,l0&&e[u-1][2]>l;u--)e[u]=e[u-1];e[u]=[a,r,l]},n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var a in t)n.o(t,a)&&!n.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={608:0,104:0};n.O.j=t=>0===e[t];var t=(t,a)=>{var r,l,o=a[0],s=a[1],i=a[2],c=0;if(o.some((t=>0!==e[t]))){for(r in s)n.o(s,r)&&(n.m[r]=s[r]);if(i)var u=i(n)}for(t&&t(a);cn(505)));r=n.O(r)})(); \ No newline at end of file +(()=>{"use strict";var e,t={505:(e,t,a)=>{const n=window.wp.blocks,r=window.React,l=window.wp.blockEditor,o=window.wp.element,s=window.wp.i18n,i=window.wp.components,c=window.wp.apiFetch;var u=a.n(c);const{namespace:m,defaultAvatarUrl:h}=window._activityPubOptions,p=({reactions:e})=>{const[t,a]=(0,o.useState)(new Set),[n,l]=(0,o.useState)(new Map),s=(0,o.useRef)([]),i=()=>{s.current.forEach((e=>clearTimeout(e))),s.current=[]},c=(t,n)=>{i();const r=100,o=e.length;n&&l((e=>{const a=new Map(e);return a.set(t,"clockwise"),a}));const c=e=>{const i="right"===e,c=i?o-1:0,u=i?1:-1;for(let e=i?t:t-1;i?e<=c:e>=c;e+=u){const o=Math.abs(e-t),i=setTimeout((()=>{a((t=>{const a=new Set(t);return n?a.add(e):a.delete(e),a})),n&&e!==t&&l((t=>{const a=new Map(t),n=e-u,r=a.get(n);return a.set(e,"clockwise"===r?"counter":"clockwise"),a}))}),o*r);s.current.push(i)}};if(c("right"),c("left"),!n){const e=Math.max((o-t)*r,t*r),a=setTimeout((()=>{l(new Map)}),e+r);s.current.push(a)}};return(0,o.useEffect)((()=>()=>i()),[]),(0,r.createElement)("ul",{className:"reaction-avatars"},e.map(((e,a)=>{const l=n.get(a),o=["reaction-avatar",t.has(a)?"wave-active":"",l?`rotate-${l}`:""].filter(Boolean).join(" "),s=e.avatar||h;return(0,r.createElement)("li",{key:a},(0,r.createElement)("a",{href:e.url,target:"_blank",rel:"noopener noreferrer",onMouseEnter:()=>c(a,!0),onMouseLeave:()=>c(a,!1)},(0,r.createElement)("img",{src:s,alt:e.name,className:o,width:"32",height:"32"})))})))},f=({reactions:e,type:t})=>(0,r.createElement)("ul",{className:"activitypub-reaction-list"},e.map(((e,t)=>(0,r.createElement)("li",{key:t},(0,r.createElement)("a",{href:e.url,className:"reaction-item",target:"_blank",rel:"noopener noreferrer"},(0,r.createElement)("img",{src:e.avatar,alt:e.name,width:"32",height:"32"}),(0,r.createElement)("span",null,e.name)))))),d=({items:e,label:t})=>{const[a,n]=(0,o.useState)(!1),[l,s]=(0,o.useState)(null),[c,u]=(0,o.useState)(e.length),m=(0,o.useRef)(null);(0,o.useEffect)((()=>{if(!m.current)return;const t=()=>{const t=m.current;if(!t)return;const a=t.offsetWidth-(l?.offsetWidth||0)-12,n=Math.max(1,Math.floor((a-32)/22));u(Math.min(n,e.length))};t();const a=new ResizeObserver(t);return a.observe(m.current),()=>{a.disconnect()}}),[l,e.length]);const h=e.slice(0,c);return(0,r.createElement)("div",{className:"reaction-group",ref:m},(0,r.createElement)(p,{reactions:h}),(0,r.createElement)(i.Button,{ref:s,className:"reaction-label is-link",onClick:()=>n(!a),"aria-expanded":a},t),a&&l&&(0,r.createElement)(i.Popover,{anchor:l,onClose:()=>n(!1)},(0,r.createElement)(f,{reactions:e})))};function g({title:e="",postId:t=null,reactions:a=null,titleComponent:n=null}){const[l,s]=(0,o.useState)(a),[i,c]=(0,o.useState)(!a);return(0,o.useEffect)((()=>{if(a)return s(a),void c(!1);t?(c(!0),u()({path:`/${m}/posts/${t}/reactions`}).then((e=>{s(e),c(!1)})).catch((()=>c(!1)))):c(!1)}),[t,a]),i?null:l&&Object.values(l).some((e=>e.items?.length>0))?(0,r.createElement)("div",{className:"activitypub-reactions"},n||e&&(0,r.createElement)("h6",null,e),Object.entries(l).map((([e,t])=>t.items?.length?(0,r.createElement)(d,{key:e,items:t.items,label:t.label}):null))):null}const v=e=>{const t=["#FF6B6B","#4ECDC4","#45B7D1","#96CEB4","#FFEEAD","#D4A5A5","#9B59B6","#3498DB","#E67E22"],a=(()=>{const e=["Bouncy","Cosmic","Dancing","Fluffy","Giggly","Hoppy","Jazzy","Magical","Nifty","Perky","Quirky","Sparkly","Twirly","Wiggly","Zippy"],t=["Badger","Capybara","Dolphin","Echidna","Flamingo","Giraffe","Hedgehog","Iguana","Jellyfish","Koala","Lemur","Manatee","Narwhal","Octopus","Penguin"];return`${e[Math.floor(Math.random()*e.length)]} ${t[Math.floor(Math.random()*t.length)]}`})(),n=t[Math.floor(Math.random()*t.length)],r=a.charAt(0),l=document.createElement("canvas");l.width=64,l.height=64;const o=l.getContext("2d");return o.fillStyle=n,o.beginPath(),o.arc(32,32,32,0,2*Math.PI),o.fill(),o.fillStyle="#FFFFFF",o.font="32px sans-serif",o.textAlign="center",o.textBaseline="middle",o.fillText(r,32,32),{name:a,url:"#",avatar:l.toDataURL()}},w=JSON.parse('{"UU":"activitypub/reactions"}');(0,n.registerBlockType)(w.UU,{edit:function({attributes:e,setAttributes:t,__unstableLayoutClassNames:a}){const n=(0,l.useBlockProps)({className:a}),[i]=(0,o.useState)({likes:{label:"9 likes",items:Array.from({length:9},((e,t)=>v()))},reposts:{label:"6 reposts",items:Array.from({length:6},((e,t)=>v()))}}),c=(0,r.createElement)(l.RichText,{tagName:"h6",value:e.title,onChange:e=>t({title:e}),placeholder:(0,s.__)("Fediverse reactions","activitypub"),disableLineBreaks:!0,allowedFormats:[]});return(0,r.createElement)("div",{...n},(0,r.createElement)(g,{titleComponent:c,reactions:i}))}})}},a={};function n(e){var r=a[e];if(void 0!==r)return r.exports;var l=a[e]={exports:{}};return t[e](l,l.exports,n),l.exports}n.m=t,e=[],n.O=(t,a,r,l)=>{if(!a){var o=1/0;for(u=0;u=l)&&Object.keys(n.O).every((e=>n.O[e](a[i])))?a.splice(i--,1):(s=!1,l0&&e[u-1][2]>l;u--)e[u]=e[u-1];e[u]=[a,r,l]},n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var a in t)n.o(t,a)&&!n.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={608:0,104:0};n.O.j=t=>0===e[t];var t=(t,a)=>{var r,l,o=a[0],s=a[1],i=a[2],c=0;if(o.some((t=>0!==e[t]))){for(r in s)n.o(s,r)&&(n.m[r]=s[r]);if(i)var u=i(n)}for(t&&t(a);cn(505)));r=n.O(r)})(); \ No newline at end of file diff --git a/build/reactions/style-index-rtl.css b/build/reactions/style-index-rtl.css index 910951c4e..593e31744 100644 --- a/build/reactions/style-index-rtl.css +++ b/build/reactions/style-index-rtl.css @@ -1 +1 @@ -.activitypub-reactions h6{border-top:1px solid;border-top-color:var(--wp--preset--color--contrast-2);display:inline-block;padding-top:.5em}.activitypub-reactions .reaction-group{align-items:center;display:flex;gap:.75em;justify-content:flex-start;margin:.5em 0;position:relative;width:100%}@media(max-width:782px){.activitypub-reactions .reaction-group:has(.reaction-avatars:not(:empty)){justify-content:space-between}}.activitypub-reactions .reaction-avatars{align-items:center;display:flex;flex-direction:row;list-style:none;margin:0;padding:0}.activitypub-reactions .reaction-avatars li{margin:0 0 0 -10px;padding:0}.activitypub-reactions .reaction-avatars li:last-child{margin-left:0}.activitypub-reactions .reaction-avatars li a{display:block;text-decoration:none}.activitypub-reactions .reaction-avatars .reaction-avatar{border:.5px solid hsla(0,0%,100%,.8);border-radius:50%;box-shadow:0 0 0 .5px hsla(0,0%,100%,.8),0 1px 3px rgba(0,0,0,.2);height:32px;transition:transform .6s cubic-bezier(.34,1.56,.64,1);width:32px;will-change:transform}.activitypub-reactions .reaction-avatars .reaction-avatar.wave-active{transform:translateY(-5px)}.activitypub-reactions .reaction-avatars .reaction-avatar.wave-active.rotate-clockwise{transform:translateY(-5px) rotate(-30deg)}.activitypub-reactions .reaction-avatars .reaction-avatar.wave-active.rotate-counter{transform:translateY(-5px) rotate(30deg)}.activitypub-reactions .reaction-avatars .reaction-avatar:hover{position:relative;z-index:1}.activitypub-reactions .reaction-label.components-button{color:#2271b1;flex:0 0 auto;height:auto;padding:0;text-decoration:none;white-space:nowrap}.activitypub-reactions .reaction-label.components-button:hover{color:#135e96;text-decoration:underline}.activitypub-reactions .reaction-label.components-button:focus:not(:disabled){box-shadow:none;outline:1px solid #135e96;outline-offset:2px}.reaction-list{list-style:none;margin:0;max-width:300px;min-width:200px;padding:.25em .5em;width:-moz-max-content;width:max-content}.reaction-list li{font-size:var(--wp--preset--font-size--small);margin:0;padding:0}.reaction-list a{align-items:center;color:inherit;display:flex;font-size:var(--wp--preset--font-size--small,.75rem);gap:.5em;justify-content:flex-start;padding:.5em;text-decoration:none}.reaction-list a:hover{text-decoration:underline}.reaction-list a img{border-radius:50%;flex:none;height:24px;width:24px} +.activitypub-reactions h6{border-top:1px solid;border-top-color:var(--wp--preset--color--contrast-2);display:inline-block;padding-top:.5em}.activitypub-reactions .reaction-group{align-items:center;display:flex;gap:.75em;justify-content:flex-start;margin:.5em 0;position:relative;width:100%}@media(max-width:782px){.activitypub-reactions .reaction-group:has(.reaction-avatars:not(:empty)){justify-content:space-between}}.activitypub-reactions .reaction-avatars{align-items:center;display:flex;flex-direction:row;list-style:none;margin:0;padding:0}.activitypub-reactions .reaction-avatars li{margin:0 0 0 -10px;padding:0}.activitypub-reactions .reaction-avatars li:last-child{margin-left:0}.activitypub-reactions .reaction-avatars li a{display:block;text-decoration:none}.activitypub-reactions .reaction-avatars .reaction-avatar{border:.5px solid var(--wp--preset--color--contrast,hsla(0,0%,100%,.8));border-radius:50%;box-shadow:0 0 0 .5px hsla(0,0%,100%,.8),0 1px 3px rgba(0,0,0,.2);height:32px;transition:transform .6s cubic-bezier(.34,1.56,.64,1);width:32px;will-change:transform}.activitypub-reactions .reaction-avatars .reaction-avatar.wave-active{transform:translateY(-5px)}.activitypub-reactions .reaction-avatars .reaction-avatar.wave-active.rotate-clockwise{transform:translateY(-5px) rotate(-30deg)}.activitypub-reactions .reaction-avatars .reaction-avatar.wave-active.rotate-counter{transform:translateY(-5px) rotate(30deg)}.activitypub-reactions .reaction-avatars .reaction-avatar:hover{position:relative;z-index:1}.activitypub-reactions .reaction-label.components-button{color:var(--wp--preset--color--contrast,--wp--preset--color--secondary,#2271b1);flex:0 0 auto;height:auto;padding:0;text-decoration:none;white-space:nowrap}.activitypub-reactions .reaction-label.components-button:hover{color:var(--wp--preset--color--contrast,--wp--preset--color--secondary,#135e96);text-decoration:underline}.activitypub-reactions .reaction-label.components-button:focus:not(:disabled){box-shadow:none;outline:1px solid var(--wp--preset--color--contrast,#135e96);outline-offset:2px}.activitypub-reaction-list{background-color:var(--wp--preset--color--background,var(--wp--preset--color--custom-background,var(--wp--preset--color--base)));list-style:none;margin:0;max-width:300px;padding:.25em .7em .25em 1.3em;width:-moz-max-content;width:max-content}.activitypub-reaction-list ul{margin:0;padding:0}.activitypub-reaction-list li{font-size:var(--wp--preset--font-size--small);margin:0;padding:0}.activitypub-reaction-list a{align-items:center;color:var(--wp--preset--color--contrast,var(--wp--preset--color--secondary));display:flex;font-size:var(--wp--preset--font-size--small,.75rem);gap:.5em;justify-content:flex-start;padding:.5em;text-decoration:none}.activitypub-reaction-list a:hover{text-decoration:underline}.activitypub-reaction-list a img{border-radius:50%;flex:none;height:24px;width:24px} diff --git a/build/reactions/style-index.css b/build/reactions/style-index.css index 3f711936f..769742af9 100644 --- a/build/reactions/style-index.css +++ b/build/reactions/style-index.css @@ -1 +1 @@ -.activitypub-reactions h6{border-top:1px solid;border-top-color:var(--wp--preset--color--contrast-2);display:inline-block;padding-top:.5em}.activitypub-reactions .reaction-group{align-items:center;display:flex;gap:.75em;justify-content:flex-start;margin:.5em 0;position:relative;width:100%}@media(max-width:782px){.activitypub-reactions .reaction-group:has(.reaction-avatars:not(:empty)){justify-content:space-between}}.activitypub-reactions .reaction-avatars{align-items:center;display:flex;flex-direction:row;list-style:none;margin:0;padding:0}.activitypub-reactions .reaction-avatars li{margin:0 -10px 0 0;padding:0}.activitypub-reactions .reaction-avatars li:last-child{margin-right:0}.activitypub-reactions .reaction-avatars li a{display:block;text-decoration:none}.activitypub-reactions .reaction-avatars .reaction-avatar{border:.5px solid hsla(0,0%,100%,.8);border-radius:50%;box-shadow:0 0 0 .5px hsla(0,0%,100%,.8),0 1px 3px rgba(0,0,0,.2);height:32px;transition:transform .6s cubic-bezier(.34,1.56,.64,1);width:32px;will-change:transform}.activitypub-reactions .reaction-avatars .reaction-avatar.wave-active{transform:translateY(-5px)}.activitypub-reactions .reaction-avatars .reaction-avatar.wave-active.rotate-clockwise{transform:translateY(-5px) rotate(30deg)}.activitypub-reactions .reaction-avatars .reaction-avatar.wave-active.rotate-counter{transform:translateY(-5px) rotate(-30deg)}.activitypub-reactions .reaction-avatars .reaction-avatar:hover{position:relative;z-index:1}.activitypub-reactions .reaction-label.components-button{color:#2271b1;flex:0 0 auto;height:auto;padding:0;text-decoration:none;white-space:nowrap}.activitypub-reactions .reaction-label.components-button:hover{color:#135e96;text-decoration:underline}.activitypub-reactions .reaction-label.components-button:focus:not(:disabled){box-shadow:none;outline:1px solid #135e96;outline-offset:2px}.reaction-list{list-style:none;margin:0;max-width:300px;min-width:200px;padding:.25em .5em;width:-moz-max-content;width:max-content}.reaction-list li{font-size:var(--wp--preset--font-size--small);margin:0;padding:0}.reaction-list a{align-items:center;color:inherit;display:flex;font-size:var(--wp--preset--font-size--small,.75rem);gap:.5em;justify-content:flex-start;padding:.5em;text-decoration:none}.reaction-list a:hover{text-decoration:underline}.reaction-list a img{border-radius:50%;flex:none;height:24px;width:24px} +.activitypub-reactions h6{border-top:1px solid;border-top-color:var(--wp--preset--color--contrast-2);display:inline-block;padding-top:.5em}.activitypub-reactions .reaction-group{align-items:center;display:flex;gap:.75em;justify-content:flex-start;margin:.5em 0;position:relative;width:100%}@media(max-width:782px){.activitypub-reactions .reaction-group:has(.reaction-avatars:not(:empty)){justify-content:space-between}}.activitypub-reactions .reaction-avatars{align-items:center;display:flex;flex-direction:row;list-style:none;margin:0;padding:0}.activitypub-reactions .reaction-avatars li{margin:0 -10px 0 0;padding:0}.activitypub-reactions .reaction-avatars li:last-child{margin-right:0}.activitypub-reactions .reaction-avatars li a{display:block;text-decoration:none}.activitypub-reactions .reaction-avatars .reaction-avatar{border:.5px solid var(--wp--preset--color--contrast,hsla(0,0%,100%,.8));border-radius:50%;box-shadow:0 0 0 .5px hsla(0,0%,100%,.8),0 1px 3px rgba(0,0,0,.2);height:32px;transition:transform .6s cubic-bezier(.34,1.56,.64,1);width:32px;will-change:transform}.activitypub-reactions .reaction-avatars .reaction-avatar.wave-active{transform:translateY(-5px)}.activitypub-reactions .reaction-avatars .reaction-avatar.wave-active.rotate-clockwise{transform:translateY(-5px) rotate(30deg)}.activitypub-reactions .reaction-avatars .reaction-avatar.wave-active.rotate-counter{transform:translateY(-5px) rotate(-30deg)}.activitypub-reactions .reaction-avatars .reaction-avatar:hover{position:relative;z-index:1}.activitypub-reactions .reaction-label.components-button{color:var(--wp--preset--color--contrast,--wp--preset--color--secondary,#2271b1);flex:0 0 auto;height:auto;padding:0;text-decoration:none;white-space:nowrap}.activitypub-reactions .reaction-label.components-button:hover{color:var(--wp--preset--color--contrast,--wp--preset--color--secondary,#135e96);text-decoration:underline}.activitypub-reactions .reaction-label.components-button:focus:not(:disabled){box-shadow:none;outline:1px solid var(--wp--preset--color--contrast,#135e96);outline-offset:2px}.activitypub-reaction-list{background-color:var(--wp--preset--color--background,var(--wp--preset--color--custom-background,var(--wp--preset--color--base)));list-style:none;margin:0;max-width:300px;padding:.25em 1.3em .25em .7em;width:-moz-max-content;width:max-content}.activitypub-reaction-list ul{margin:0;padding:0}.activitypub-reaction-list li{font-size:var(--wp--preset--font-size--small);margin:0;padding:0}.activitypub-reaction-list a{align-items:center;color:var(--wp--preset--color--contrast,var(--wp--preset--color--secondary));display:flex;font-size:var(--wp--preset--font-size--small,.75rem);gap:.5em;justify-content:flex-start;padding:.5em;text-decoration:none}.activitypub-reaction-list a:hover{text-decoration:underline}.activitypub-reaction-list a img{border-radius:50%;flex:none;height:24px;width:24px} diff --git a/build/reactions/view.asset.php b/build/reactions/view.asset.php index ebaa9df56..043ae865c 100644 --- a/build/reactions/view.asset.php +++ b/build/reactions/view.asset.php @@ -1 +1 @@ - array('react', 'wp-api-fetch', 'wp-components', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => 'd288cb356be2059aab95'); + array('react', 'wp-api-fetch', 'wp-components', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => '1d4b9bd742ccb2da7be6'); diff --git a/build/reactions/view.js b/build/reactions/view.js index 0051dbbf8..55ed4a059 100644 --- a/build/reactions/view.js +++ b/build/reactions/view.js @@ -1 +1 @@ -(()=>{"use strict";var e={n:t=>{var n=t&&t.__esModule?()=>t.default:()=>t;return e.d(n,{a:n}),n},d:(t,n)=>{for(var a in n)e.o(n,a)&&!e.o(t,a)&&Object.defineProperty(t,a,{enumerable:!0,get:n[a]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};const t=window.React,n=window.wp.element,a=window.wp.domReady;var r=e.n(a);const c=window.wp.components,o=window.wp.apiFetch;var l=e.n(o);window.wp.i18n;const{namespace:s,defaultAvatarUrl:i}=window._activityPubOptions,u=({reactions:e})=>{const[a,r]=(0,n.useState)(new Set),[c,o]=(0,n.useState)(new Map),l=(0,n.useRef)([]),s=()=>{l.current.forEach((e=>clearTimeout(e))),l.current=[]},u=(t,n)=>{s();const a=100,c=e.length;n&&o((e=>{const n=new Map(e);return n.set(t,"clockwise"),n}));const i=e=>{const s="right"===e,i=s?c-1:0,u=s?1:-1;for(let e=s?t:t-1;s?e<=i:e>=i;e+=u){const c=Math.abs(e-t),s=setTimeout((()=>{r((t=>{const a=new Set(t);return n?a.add(e):a.delete(e),a})),n&&e!==t&&o((t=>{const n=new Map(t),a=e-u,r=n.get(a);return n.set(e,"clockwise"===r?"counter":"clockwise"),n}))}),c*a);l.current.push(s)}};if(i("right"),i("left"),!n){const e=Math.max((c-t)*a,t*a),n=setTimeout((()=>{o(new Map)}),e+a);l.current.push(n)}};return(0,n.useEffect)((()=>()=>s()),[]),(0,t.createElement)("ul",{className:"reaction-avatars"},e.map(((e,n)=>{const r=c.get(n),o=["reaction-avatar",a.has(n)?"wave-active":"",r?`rotate-${r}`:""].filter(Boolean).join(" "),l=e.avatar||i;return(0,t.createElement)("li",{key:n},(0,t.createElement)("a",{href:e.url,target:"_blank",rel:"noopener noreferrer",onMouseEnter:()=>u(n,!0),onMouseLeave:()=>u(n,!1)},(0,t.createElement)("img",{src:l,alt:e.name,className:o,width:"32",height:"32"})))})))},m=({reactions:e,type:n})=>(0,t.createElement)("ul",{className:"reaction-list"},e.map(((e,n)=>(0,t.createElement)("li",{key:n},(0,t.createElement)("a",{href:e.url,className:"reaction-item",target:"_blank",rel:"noopener noreferrer"},(0,t.createElement)("img",{src:e.avatar,alt:e.name,width:"32",height:"32"}),(0,t.createElement)("span",null,e.name)))))),p=({items:e,label:a})=>{const[r,o]=(0,n.useState)(!1),[l,s]=(0,n.useState)(null),[i,p]=(0,n.useState)(e.length),h=(0,n.useRef)(null);(0,n.useEffect)((()=>{if(!h.current)return;const t=()=>{const t=h.current;if(!t)return;const n=t.offsetWidth-(l?.offsetWidth||0)-12,a=Math.max(1,Math.floor((n-32)/22));p(Math.min(a,e.length))};t();const n=new ResizeObserver(t);return n.observe(h.current),()=>{n.disconnect()}}),[l,e.length]);const f=e.slice(0,i);return(0,t.createElement)("div",{className:"reaction-group",ref:h},(0,t.createElement)(u,{reactions:f}),(0,t.createElement)(c.Button,{ref:s,className:"reaction-label is-link",onClick:()=>o(!r),"aria-expanded":r},a),r&&l&&(0,t.createElement)(c.Popover,{anchor:l,onClose:()=>o(!1)},(0,t.createElement)(m,{reactions:e})))};function h({title:e="",postId:a=null,reactions:r=null,titleComponent:c=null}){const[o,i]=(0,n.useState)(r),[u,m]=(0,n.useState)(!r);return(0,n.useEffect)((()=>{if(r)return i(r),void m(!1);a?(m(!0),l()({path:`/${s}/posts/${a}/reactions`}).then((e=>{i(e),m(!1)})).catch((()=>m(!1)))):m(!1)}),[a,r]),u?null:o&&Object.values(o).some((e=>e.items?.length>0))?(0,t.createElement)("div",{className:"activitypub-reactions"},c||e&&(0,t.createElement)("h6",null,e),Object.entries(o).map((([e,n])=>n.items?.length?(0,t.createElement)(p,{key:e,items:n.items,label:n.label}):null))):null}r()((()=>{[].forEach.call(document.querySelectorAll(".activitypub-reactions-block"),(e=>{const a=JSON.parse(e.dataset.attrs);(0,n.createRoot)(e).render((0,t.createElement)(h,{...a}))}))}))})(); \ No newline at end of file +(()=>{"use strict";var e={n:t=>{var n=t&&t.__esModule?()=>t.default:()=>t;return e.d(n,{a:n}),n},d:(t,n)=>{for(var a in n)e.o(n,a)&&!e.o(t,a)&&Object.defineProperty(t,a,{enumerable:!0,get:n[a]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};const t=window.React,n=window.wp.element,a=window.wp.domReady;var r=e.n(a);const c=window.wp.components,o=window.wp.apiFetch;var l=e.n(o);window.wp.i18n;const{namespace:s,defaultAvatarUrl:i}=window._activityPubOptions,u=({reactions:e})=>{const[a,r]=(0,n.useState)(new Set),[c,o]=(0,n.useState)(new Map),l=(0,n.useRef)([]),s=()=>{l.current.forEach((e=>clearTimeout(e))),l.current=[]},u=(t,n)=>{s();const a=100,c=e.length;n&&o((e=>{const n=new Map(e);return n.set(t,"clockwise"),n}));const i=e=>{const s="right"===e,i=s?c-1:0,u=s?1:-1;for(let e=s?t:t-1;s?e<=i:e>=i;e+=u){const c=Math.abs(e-t),s=setTimeout((()=>{r((t=>{const a=new Set(t);return n?a.add(e):a.delete(e),a})),n&&e!==t&&o((t=>{const n=new Map(t),a=e-u,r=n.get(a);return n.set(e,"clockwise"===r?"counter":"clockwise"),n}))}),c*a);l.current.push(s)}};if(i("right"),i("left"),!n){const e=Math.max((c-t)*a,t*a),n=setTimeout((()=>{o(new Map)}),e+a);l.current.push(n)}};return(0,n.useEffect)((()=>()=>s()),[]),(0,t.createElement)("ul",{className:"reaction-avatars"},e.map(((e,n)=>{const r=c.get(n),o=["reaction-avatar",a.has(n)?"wave-active":"",r?`rotate-${r}`:""].filter(Boolean).join(" "),l=e.avatar||i;return(0,t.createElement)("li",{key:n},(0,t.createElement)("a",{href:e.url,target:"_blank",rel:"noopener noreferrer",onMouseEnter:()=>u(n,!0),onMouseLeave:()=>u(n,!1)},(0,t.createElement)("img",{src:l,alt:e.name,className:o,width:"32",height:"32"})))})))},m=({reactions:e,type:n})=>(0,t.createElement)("ul",{className:"activitypub-reaction-list"},e.map(((e,n)=>(0,t.createElement)("li",{key:n},(0,t.createElement)("a",{href:e.url,className:"reaction-item",target:"_blank",rel:"noopener noreferrer"},(0,t.createElement)("img",{src:e.avatar,alt:e.name,width:"32",height:"32"}),(0,t.createElement)("span",null,e.name)))))),p=({items:e,label:a})=>{const[r,o]=(0,n.useState)(!1),[l,s]=(0,n.useState)(null),[i,p]=(0,n.useState)(e.length),h=(0,n.useRef)(null);(0,n.useEffect)((()=>{if(!h.current)return;const t=()=>{const t=h.current;if(!t)return;const n=t.offsetWidth-(l?.offsetWidth||0)-12,a=Math.max(1,Math.floor((n-32)/22));p(Math.min(a,e.length))};t();const n=new ResizeObserver(t);return n.observe(h.current),()=>{n.disconnect()}}),[l,e.length]);const f=e.slice(0,i);return(0,t.createElement)("div",{className:"reaction-group",ref:h},(0,t.createElement)(u,{reactions:f}),(0,t.createElement)(c.Button,{ref:s,className:"reaction-label is-link",onClick:()=>o(!r),"aria-expanded":r},a),r&&l&&(0,t.createElement)(c.Popover,{anchor:l,onClose:()=>o(!1)},(0,t.createElement)(m,{reactions:e})))};function h({title:e="",postId:a=null,reactions:r=null,titleComponent:c=null}){const[o,i]=(0,n.useState)(r),[u,m]=(0,n.useState)(!r);return(0,n.useEffect)((()=>{if(r)return i(r),void m(!1);a?(m(!0),l()({path:`/${s}/posts/${a}/reactions`}).then((e=>{i(e),m(!1)})).catch((()=>m(!1)))):m(!1)}),[a,r]),u?null:o&&Object.values(o).some((e=>e.items?.length>0))?(0,t.createElement)("div",{className:"activitypub-reactions"},c||e&&(0,t.createElement)("h6",null,e),Object.entries(o).map((([e,n])=>n.items?.length?(0,t.createElement)(p,{key:e,items:n.items,label:n.label}):null))):null}r()((()=>{[].forEach.call(document.querySelectorAll(".activitypub-reactions-block"),(e=>{const a=JSON.parse(e.dataset.attrs);(0,n.createRoot)(e).render((0,t.createElement)(h,{...a}))}))}))})(); \ No newline at end of file diff --git a/readme.txt b/readme.txt index 742d43b17..7c7925984 100644 --- a/readme.txt +++ b/readme.txt @@ -138,6 +138,7 @@ For reasons of data protection, it is not possible to see the followers of other * Added: `@mentions` in the JSON representation of the reply * Improved: HTML to e-mail text conversion * Improved: Direct Messages: Test for the user being in the to field +* Improved: Better support for FSE color schemes * Fixed: Reactions: Provide a fallback for empty avatar URLs = 4.5.1 = diff --git a/src/reactions/reactions.js b/src/reactions/reactions.js index f3c3467f7..722f3dbb2 100644 --- a/src/reactions/reactions.js +++ b/src/reactions/reactions.js @@ -152,7 +152,7 @@ const ReactionDropdown = ( { reactions, anchor, onClose } ) => ( noArrow={ false } offset={ 10 } > -