diff --git a/plugin/Makefile b/plugin/Makefile
index 02c17a8..a5951e3 100644
--- a/plugin/Makefile
+++ b/plugin/Makefile
@@ -5,7 +5,8 @@ MODS := \
media_bbc \
yt_nocookie \
topic_mute \
- dragdrop_attach
+ dragdrop_attach \
+ spoiler_bbc
PKGDIR := $(PWD)/../packages
diff --git a/plugin/f9_theme/src/css/colors.css b/plugin/f9_theme/src/css/colors.css
index 618d59d..fc891ca 100644
--- a/plugin/f9_theme/src/css/colors.css
+++ b/plugin/f9_theme/src/css/colors.css
@@ -168,4 +168,13 @@
/* ajax notification bar */
--notify-bar-background: var(--main-background);
--notify-bar-color: #f96f00;
+
+ /* spoilers (requires spoilers_bbc) */
+ --spoiler-border: #757;
+ --spoiler-head-background: #dcd;
+ --spoiler-main-background: #fff9ff;
+
+ --noguest-border: #557;
+ --noguest-head-background: #dde;
+ --noguest-main-background: #f9f9ff;
}
diff --git a/plugin/f9_theme/src/css/dark_colors.css b/plugin/f9_theme/src/css/dark_colors.css
index 8ff1a3f..8e309ca 100644
--- a/plugin/f9_theme/src/css/dark_colors.css
+++ b/plugin/f9_theme/src/css/dark_colors.css
@@ -66,4 +66,11 @@
--input-valid: #242;
--input-invalid: #422;
+
+ /* spoilers (requires spoilers_bbc) */
+ --spoiler-head-background: #3f2a3f;
+ --spoiler-main-background: #3a333a;
+
+ --noguest-head-background: #2a2a3f;
+ --noguest-main-background: #33333f;
}
diff --git a/plugin/f9_theme/src/css/jquery.sceditor.default.css b/plugin/f9_theme/src/css/jquery.sceditor.default.css
index b7d019d..e700c7d 100644
--- a/plugin/f9_theme/src/css/jquery.sceditor.default.css
+++ b/plugin/f9_theme/src/css/jquery.sceditor.default.css
@@ -1,4 +1,6 @@
/*! SCEditor | (C) 2011-2013, Sam Clarke | sceditor.com/license */
+@import url("../../default/css/spoiler_bbc.css");
+
html, p, code::before, div, table {
margin: 0;
padding: 0;
diff --git a/plugin/spoiler_bbc/Makefile b/plugin/spoiler_bbc/Makefile
new file mode 100644
index 0000000..95f9fba
--- /dev/null
+++ b/plugin/spoiler_bbc/Makefile
@@ -0,0 +1,3 @@
+PROJECT := spoiler_bbc
+
+include ../plugin.mk
diff --git a/plugin/spoiler_bbc/src/Subs-SpoilerCode.php b/plugin/spoiler_bbc/src/Subs-SpoilerCode.php
new file mode 100644
index 0000000..c5265da
--- /dev/null
+++ b/plugin/spoiler_bbc/src/Subs-SpoilerCode.php
@@ -0,0 +1,66 @@
+<?php
+
+function hook_spoiler_bbcode(&$codes, &$no_autolink_tags) {
+ global $modSettings, $context, $user_info;
+ $codes[] = array(
+ 'tag' => 'spoiler',
+ 'before' => '<details class="collapsible spoiler"><summary>Spoiler</summary> <div>',
+ 'after' => '</div></details>',
+ 'block_level' => true,
+ );
+ $codes[] = array(
+ 'tag' => 'spoiler',
+ 'type' => 'parsed_equals',
+ 'before' => '<details class="collapsible spoiler"><summary>$1</summary> <div>',
+ 'after' => '</div></details>',
+ 'block_level' => true,
+ );
+ $codes[] = array(
+ 'tag' => 'noguest',
+ // 'parsed_content' works by writing 'before' when it encounters the
+ // beginning tag, and eventually replacing the end tag with 'after'. We
+ // need to "parse" the content to perform the is_guest validation,
+ // though! So our compromise is to not allow BBCode within [noguest].
+ //
+ // *Theoretically*, we could recursively call parse_bbc, but that is a
+ // can of worms I do not wish to open today.
+ 'type' => 'unparsed_content',
+ 'content' => '<details class="collapsible noguest" open><summary>Logged-in users only</summary><div>$1</div></details>',
+ 'validate' => function(&$tag, &$data, $disabled, $params) use ($modSettings, $context, $user_info)
+ {
+ if ($user_info['is_guest']) {
+ $data = 'Sorry, this content is only available for logged-in users.';
+ }
+ },
+ 'block_level' => true,
+ );
+}
+
+function hook_spoiler_bbcode_buttons(&$bbc_tags) {
+ $bbc_tags[] = array(
+ array(
+ 'code' => 'spoiler',
+ 'description' => 'Insert Spoiler block',
+ ),
+ array(
+ 'code' => 'noguest',
+ 'description' => 'Insert block for logged-in users only',
+ ),
+ );
+}
+
+function spoiler_sce_options(&$sce_options) {
+ loadJavaScriptFile('sceditor.spoilerbbc.js', array('minimize' => true), 'smf_sceditor_spoiler');
+ loadCSSFile('sceditor.spoilerbbc.css', array('minimize' => true));
+}
+
+function spoiler_bbc_credits() {
+ global $context;
+ $context['credits_modifications'][] = 'Silk SVG icons by <a href="https://github.com/frhun">@frhun</a>, licensed under CC-BY-SA';
+}
+
+function hook_spoiler_load_theme() {
+ loadCSSFile('spoiler_bbc.css', array('minimize' => true));
+}
+
+?>
diff --git a/plugin/spoiler_bbc/src/asset/icon_expand.svg b/plugin/spoiler_bbc/src/asset/icon_expand.svg
new file mode 100644
index 0000000..22fa64d
--- /dev/null
+++ b/plugin/spoiler_bbc/src/asset/icon_expand.svg
@@ -0,0 +1,175 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="31.999998"
+ height="31.999998"
+ viewBox="0 0 8.466666 8.466666"
+ version="1.1"
+ id="svg1"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <defs
+ id="defs1">
+ <linearGradient
+ id="linearGradient19">
+ <stop
+ style="stop-color:#b5bfc9;stop-opacity:0.76999998;"
+ offset="0"
+ id="stop20" />
+ <stop
+ style="stop-color:#cfd3d8;stop-opacity:0;"
+ offset="0.2510533"
+ id="stop22" />
+ <stop
+ style="stop-color:#ccd1d6;stop-opacity:0;"
+ offset="0.75"
+ id="stop23" />
+ <stop
+ style="stop-color:#c8d3da;stop-opacity:0.63999999;"
+ offset="1"
+ id="stop21" />
+ </linearGradient>
+ <linearGradient
+ id="linearGradient15">
+ <stop
+ style="stop-color:#cbd2d7;stop-opacity:0.75088906;"
+ offset="0"
+ id="stop16" />
+ <stop
+ style="stop-color:#e5e9eb;stop-opacity:1;"
+ offset="0.18264508"
+ id="stop18" />
+ <stop
+ style="stop-color:#cfd3d8;stop-opacity:1;"
+ offset="0.75229496"
+ id="stop19" />
+ <stop
+ style="stop-color:#bbc0c9;stop-opacity:1;"
+ offset="1"
+ id="stop17" />
+ </linearGradient>
+ <linearGradient
+ id="linearGradient8">
+ <stop
+ style="stop-color:#bec2c5;stop-opacity:0.60000002;"
+ offset="0"
+ id="stop8" />
+ <stop
+ style="stop-color:#e3e5e8;stop-opacity:0;"
+ offset="0.50365794"
+ id="stop10" />
+ <stop
+ style="stop-color:#e3e5e8;stop-opacity:0;"
+ offset="0.64754182"
+ id="stop11" />
+ <stop
+ style="stop-color:#d1d6db;stop-opacity:0.60000002;"
+ offset="1"
+ id="stop9" />
+ </linearGradient>
+ <linearGradient
+ id="linearGradient2">
+ <stop
+ style="stop-color:#a9b7c6;stop-opacity:1;"
+ offset="0"
+ id="stop2" />
+ <stop
+ style="stop-color:#cfd4d8;stop-opacity:1;"
+ offset="0.25"
+ id="stop5" />
+ <stop
+ style="stop-color:#cfd4d8;stop-opacity:1;"
+ offset="0.75"
+ id="stop4" />
+ <stop
+ style="stop-color:#c1c6cc;stop-opacity:1;"
+ offset="1"
+ id="stop3" />
+ </linearGradient>
+ <linearGradient
+ xlink:href="#linearGradient2"
+ id="linearGradient3"
+ x1="-7.1332073"
+ y1="-7.1332073"
+ x2="-1.3334589"
+ y2="-1.3334588"
+ gradientUnits="userSpaceOnUse" />
+ <linearGradient
+ xlink:href="#linearGradient8"
+ id="linearGradient9"
+ x1="-6.8694334"
+ y1="-7.3749137"
+ x2="-1.5972348"
+ y2="-1.0917524"
+ gradientUnits="userSpaceOnUse" />
+ <linearGradient
+ xlink:href="#linearGradient15"
+ id="linearGradient17"
+ x1="3.8879335"
+ y1="0.28018543"
+ x2="4.5797324"
+ y2="8.1874809"
+ gradientUnits="userSpaceOnUse" />
+ <linearGradient
+ xlink:href="#linearGradient19"
+ id="linearGradient21"
+ x1="7.0401654"
+ y1="1.4275031"
+ x2="1.4275045"
+ y2="7.040164"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="translate(-8.4676666,-8.4676666)" />
+ </defs>
+ <rect
+ style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:url(#linearGradient17);stroke:none;stroke-width:0.263583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none"
+ id="rect8"
+ width="7.9375"
+ height="7.9375"
+ x="0.26508331"
+ y="0.26508331"
+ rx="1.5875"
+ ry="1.5875" />
+ <rect
+ style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:url(#linearGradient21);stroke:none;stroke-width:0.263583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none"
+ id="rect19"
+ width="7.9375"
+ height="7.9375"
+ x="-8.2025833"
+ y="-8.2025833"
+ rx="1.5875"
+ ry="1.5875"
+ transform="scale(-1)" />
+ <g
+ id="layer1"
+ style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:url(#linearGradient3);fill-opacity:1;stroke:#525252;stroke-width:0.263583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1">
+ <rect
+ style="font-variation-settings:normal;vector-effect:none;fill:url(#linearGradient9);fill-opacity:1;stroke:#525252;stroke-width:0.263583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+ id="rect5"
+ width="7.9385004"
+ height="7.9385004"
+ x="-8.2025833"
+ y="-8.2025833"
+ rx="1.5814996"
+ ry="1.5814996"
+ transform="scale(-1)" />
+ </g>
+ <g
+ id="layer2"
+ style="font-variation-settings:normal;opacity:1;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.687917;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000;stop-opacity:1">
+ <path
+ style="font-variation-settings:normal;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.687917;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000;stop-opacity:1"
+ d="M 2.1166666,4.2333333 H 6.3499999"
+ id="path2402" />
+ </g>
+ <g
+ id="layer2-6"
+ style="font-variation-settings:normal;vector-effect:none;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.79375;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000"
+ transform="rotate(90,4.2333333,4.233333)">
+ <path
+ style="font-variation-settings:normal;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.687917;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000;stop-opacity:1"
+ d="M 2.1166666,4.2333333 H 6.3499999"
+ id="path2402-2" />
+ </g>
+</svg>
diff --git a/plugin/spoiler_bbc/src/asset/icon_minimize.svg b/plugin/spoiler_bbc/src/asset/icon_minimize.svg
new file mode 100644
index 0000000..f66dd88
--- /dev/null
+++ b/plugin/spoiler_bbc/src/asset/icon_minimize.svg
@@ -0,0 +1,229 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="31.999998"
+ height="31.999998"
+ viewBox="0 0 8.466666 8.466666"
+ version="1.1"
+ id="svg1"
+ sodipodi:docname="icon_minimize.svg"
+ inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview1"
+ pagecolor="#505050"
+ bordercolor="#eeeeee"
+ borderopacity="1"
+ inkscape:showpageshadow="0"
+ inkscape:pageopacity="0"
+ inkscape:pagecheckerboard="0"
+ inkscape:deskcolor="#505050"
+ inkscape:zoom="0.49856139"
+ inkscape:cx="-337.97242"
+ inkscape:cy="-312.90028"
+ inkscape:window-width="1920"
+ inkscape:window-height="1218"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg1" />
+ <defs
+ id="defs1">
+ <linearGradient
+ id="linearGradient19"
+ inkscape:collect="always">
+ <stop
+ style="stop-color:#a6b1c4;stop-opacity:0.76999998;"
+ offset="0"
+ id="stop20" />
+ <stop
+ style="stop-color:#cfd3d8;stop-opacity:0;"
+ offset="0.2510533"
+ id="stop22" />
+ <stop
+ style="stop-color:#ccd1d6;stop-opacity:0;"
+ offset="0.75"
+ id="stop23" />
+ <stop
+ style="stop-color:#a6b5c4;stop-opacity:0.63999999;"
+ offset="1"
+ id="stop21" />
+ </linearGradient>
+ <linearGradient
+ id="linearGradient15"
+ inkscape:collect="always">
+ <stop
+ style="stop-color:#aebac6;stop-opacity:1;"
+ offset="0"
+ id="stop16" />
+ <stop
+ style="stop-color:#cdd3da;stop-opacity:1;"
+ offset="0.19970703"
+ id="stop18" />
+ <stop
+ style="stop-color:#cfd3d8;stop-opacity:1;"
+ offset="0.84908623"
+ id="stop19" />
+ <stop
+ style="stop-color:#8f99a3;stop-opacity:1;"
+ offset="1"
+ id="stop17" />
+ </linearGradient>
+ <linearGradient
+ id="linearGradient8"
+ inkscape:collect="always">
+ <stop
+ style="stop-color:#94a6b8;stop-opacity:0.60000002;"
+ offset="0"
+ id="stop8" />
+ <stop
+ style="stop-color:#cfd4d8;stop-opacity:0;"
+ offset="0.50365794"
+ id="stop10" />
+ <stop
+ style="stop-color:#cfd4d8;stop-opacity:0;"
+ offset="0.64754182"
+ id="stop11" />
+ <stop
+ style="stop-color:#aab9c5;stop-opacity:0.60000002;"
+ offset="1"
+ id="stop9" />
+ </linearGradient>
+ <linearGradient
+ id="linearGradient2"
+ inkscape:collect="always">
+ <stop
+ style="stop-color:#a9b7c6;stop-opacity:1;"
+ offset="0"
+ id="stop2" />
+ <stop
+ style="stop-color:#cfd4d8;stop-opacity:1;"
+ offset="0.25"
+ id="stop5" />
+ <stop
+ style="stop-color:#cfd4d8;stop-opacity:1;"
+ offset="0.75"
+ id="stop4" />
+ <stop
+ style="stop-color:#c1c6cc;stop-opacity:1;"
+ offset="1"
+ id="stop3" />
+ </linearGradient>
+ <meshgradient
+ id="meshgradient4"
+ gradientUnits="userSpaceOnUse"
+ x="0.47189674"
+ y="0.50373638"
+ gradientTransform="matrix(0.99622023,0,0,0.99622023,-8.4506615,-8.4506621)">
+ <meshrow
+ id="meshrow2393">
+ <meshpatch
+ id="meshpatch2393">
+ <stop
+ path="c 3.18832,-0.716391 5.08953,-0.254714 7.74574,-0.254714"
+ style="stop-color:#e5e5e5;stop-opacity:1"
+ id="stop2393" />
+ <stop
+ path="c 0,2.65621 0.573125,4.57331 -0.205389,7.7053"
+ style="stop-color:#ffffff;stop-opacity:1"
+ id="stop2394" />
+ <stop
+ path="c -2.95869,0.518062 -5.10702,0.263417 -7.76323,0.263417"
+ style="stop-color:#d9d9d9;stop-opacity:1"
+ id="stop2395" />
+ <stop
+ path="c 0,-2.65621 -0.573105,-4.44599 0.222882,-7.71401"
+ style="stop-color:#e7e7e7;stop-opacity:1"
+ id="stop2396" />
+ </meshpatch>
+ </meshrow>
+ </meshgradient>
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#linearGradient2"
+ id="linearGradient3"
+ x1="-7.1332073"
+ y1="-7.1332073"
+ x2="-1.3334589"
+ y2="-1.3334588"
+ gradientUnits="userSpaceOnUse" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#linearGradient8"
+ id="linearGradient9"
+ x1="-6.8694334"
+ y1="-7.3749137"
+ x2="-1.5972348"
+ y2="-1.0917524"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="translate(8.4666662,8.4666662)" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#linearGradient15"
+ id="linearGradient17"
+ x1="3.8879335"
+ y1="0.28018543"
+ x2="4.5797324"
+ y2="8.1874809"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="translate(-8.4676664,-8.4676655)" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#linearGradient19"
+ id="linearGradient21"
+ x1="7.0401654"
+ y1="1.4275031"
+ x2="1.4275045"
+ y2="7.040164"
+ gradientUnits="userSpaceOnUse" />
+ </defs>
+ <rect
+ style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:url(#linearGradient17);stroke:none;stroke-width:0.263583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none"
+ id="rect8"
+ width="7.9375"
+ height="7.9375"
+ x="-8.2025833"
+ y="-8.2025833"
+ rx="1.5875"
+ ry="1.5875"
+ transform="scale(-1)" />
+ <rect
+ style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:url(#linearGradient21);fill-opacity:1;stroke:none;stroke-width:0.263583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none"
+ id="rect19"
+ width="7.9375"
+ height="7.9375"
+ x="0.26508331"
+ y="0.26508331"
+ rx="1.5875"
+ ry="1.5875" />
+ <g
+ id="layer1"
+ style="fill:url(#linearGradient3);fill-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-width:0.263583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1;stroke:#525252">
+ <rect
+ style="font-variation-settings:normal;vector-effect:none;fill:url(#linearGradient9);fill-opacity:1;stroke:#525252;stroke-width:0.263583;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+ id="rect5"
+ width="7.9385004"
+ height="7.9385004"
+ x="0.26408291"
+ y="0.26408291"
+ rx="1.5814996"
+ ry="1.5814996" />
+ </g>
+ <g
+ id="layer2">
+ <path
+ style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.79375;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+ d="M 2.1166666,4.2333333 H 6.3499999"
+ id="path2402" />
+ </g>
+ <script
+ id="mesh_polyfill"
+ type="text/javascript">
+!function(){const t="http://www.w3.org/2000/svg",e="http://www.w3.org/1999/xlink",s="http://www.w3.org/1999/xhtml",r=2;if(document.createElementNS(t,"meshgradient").x)return;const n=(t,e,s,r)=>{let n=new x(.5*(e.x+s.x),.5*(e.y+s.y)),o=new x(.5*(t.x+e.x),.5*(t.y+e.y)),i=new x(.5*(s.x+r.x),.5*(s.y+r.y)),a=new x(.5*(n.x+o.x),.5*(n.y+o.y)),h=new x(.5*(n.x+i.x),.5*(n.y+i.y)),l=new x(.5*(a.x+h.x),.5*(a.y+h.y));return[[t,o,a,l],[l,h,i,r]]},o=t=>{let e=t[0].distSquared(t[1]),s=t[2].distSquared(t[3]),r=.25*t[0].distSquared(t[2]),n=.25*t[1].distSquared(t[3]),o=e>s?e:s,i=r>n?r:n;return 18*(o>i?o:i)},i=(t,e)=>Math.sqrt(t.distSquared(e)),a=(t,e)=>t.scale(2/3).add(e.scale(1/3)),h=t=>{let e,s,r,n,o,i,a,h=new g;return t.match(/(\w+\(\s*[^)]+\))+/g).forEach(t=>{let l=t.match(/[\w.-]+/g),d=l.shift();switch(d){case"translate":2===l.length?e=new g(1,0,0,1,l[0],l[1]):(console.error("mesh.js: translate does not have 2 arguments!"),e=new g(1,0,0,1,0,0)),h=h.append(e);break;case"scale":1===l.length?s=new g(l[0],0,0,l[0],0,0):2===l.length?s=new g(l[0],0,0,l[1],0,0):(console.error("mesh.js: scale does not have 1 or 2 arguments!"),s=new g(1,0,0,1,0,0)),h=h.append(s);break;case"rotate":if(3===l.length&&(e=new g(1,0,0,1,l[1],l[2]),h=h.append(e)),l[0]){r=l[0]*Math.PI/180;let t=Math.cos(r),e=Math.sin(r);Math.abs(t)<1e-16&&(t=0),Math.abs(e)<1e-16&&(e=0),a=new g(t,e,-e,t,0,0),h=h.append(a)}else console.error("math.js: No argument to rotate transform!");3===l.length&&(e=new g(1,0,0,1,-l[1],-l[2]),h=h.append(e));break;case"skewX":l[0]?(r=l[0]*Math.PI/180,n=Math.tan(r),o=new g(1,0,n,1,0,0),h=h.append(o)):console.error("math.js: No argument to skewX transform!");break;case"skewY":l[0]?(r=l[0]*Math.PI/180,n=Math.tan(r),i=new g(1,n,0,1,0,0),h=h.append(i)):console.error("math.js: No argument to skewY transform!");break;case"matrix":6===l.length?h=h.append(new g(...l)):console.error("math.js: Incorrect number of arguments for matrix!");break;default:console.error("mesh.js: Unhandled transform type: "+d)}}),h},l=t=>{let e=[],s=t.split(/[ ,]+/);for(let t=0,r=s.length-1;t<r;t+=2)e.push(new x(parseFloat(s[t]),parseFloat(s[t+1])));return e},d=(t,e)=>{for(let s in e)t.setAttribute(s,e[s])},c=(t,e,s,r,n)=>{let o,i,a=[0,0,0,0];for(let h=0;h<3;++h)e[h]<t[h]&&e[h]<s[h]||t[h]<e[h]&&s[h]<e[h]?a[h]=0:(a[h]=.5*((e[h]-t[h])/r+(s[h]-e[h])/n),o=Math.abs(3*(e[h]-t[h])/r),i=Math.abs(3*(s[h]-e[h])/n),a[h]>o?a[h]=o:a[h]>i&&(a[h]=i));return a},u=[[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0],[-3,3,0,0,-2,-1,0,0,0,0,0,0,0,0,0,0],[2,-2,0,0,1,1,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0],[0,0,0,0,0,0,0,0,-3,3,0,0,-2,-1,0,0],[0,0,0,0,0,0,0,0,2,-2,0,0,1,1,0,0],[-3,0,3,0,0,0,0,0,-2,0,-1,0,0,0,0,0],[0,0,0,0,-3,0,3,0,0,0,0,0,-2,0,-1,0],[9,-9,-9,9,6,3,-6,-3,6,-6,3,-3,4,2,2,1],[-6,6,6,-6,-3,-3,3,3,-4,4,-2,2,-2,-2,-1,-1],[2,0,-2,0,0,0,0,0,1,0,1,0,0,0,0,0],[0,0,0,0,2,0,-2,0,0,0,0,0,1,0,1,0],[-6,6,6,-6,-4,-2,4,2,-3,3,-3,3,-2,-1,-2,-1],[4,-4,-4,4,2,2,-2,-2,2,-2,2,-2,1,1,1,1]],f=t=>{let e=[];for(let s=0;s<16;++s){e[s]=0;for(let r=0;r<16;++r)e[s]+=u[s][r]*t[r]}return e},p=(t,e,s)=>{const r=e*e,n=s*s,o=e*e*e,i=s*s*s;return t[0]+t[1]*e+t[2]*r+t[3]*o+t[4]*s+t[5]*s*e+t[6]*s*r+t[7]*s*o+t[8]*n+t[9]*n*e+t[10]*n*r+t[11]*n*o+t[12]*i+t[13]*i*e+t[14]*i*r+t[15]*i*o},y=t=>{let e=[],s=[],r=[];for(let s=0;s<4;++s)e[s]=[],e[s][0]=n(t[0][s],t[1][s],t[2][s],t[3][s]),e[s][1]=[],e[s][1].push(...n(...e[s][0][0])),e[s][1].push(...n(...e[s][0][1])),e[s][2]=[],e[s][2].push(...n(...e[s][1][0])),e[s][2].push(...n(...e[s][1][1])),e[s][2].push(...n(...e[s][1][2])),e[s][2].push(...n(...e[s][1][3]));for(let t=0;t<8;++t){s[t]=[];for(let r=0;r<4;++r)s[t][r]=[],s[t][r][0]=n(e[0][2][t][r],e[1][2][t][r],e[2][2][t][r],e[3][2][t][r]),s[t][r][1]=[],s[t][r][1].push(...n(...s[t][r][0][0])),s[t][r][1].push(...n(...s[t][r][0][1])),s[t][r][2]=[],s[t][r][2].push(...n(...s[t][r][1][0])),s[t][r][2].push(...n(...s[t][r][1][1])),s[t][r][2].push(...n(...s[t][r][1][2])),s[t][r][2].push(...n(...s[t][r][1][3]))}for(let t=0;t<8;++t){r[t]=[];for(let e=0;e<8;++e)r[t][e]=[],r[t][e][0]=s[t][0][2][e],r[t][e][1]=s[t][1][2][e],r[t][e][2]=s[t][2][2][e],r[t][e][3]=s[t][3][2][e]}return r};class x{constructor(t,e){this.x=t||0,this.y=e||0}toString(){return`(x=${this.x}, y=${this.y})`}clone(){return new x(this.x,this.y)}add(t){return new x(this.x+t.x,this.y+t.y)}scale(t){return void 0===t.x?new x(this.x*t,this.y*t):new x(this.x*t.x,this.y*t.y)}distSquared(t){let e=this.x-t.x,s=this.y-t.y;return e*e+s*s}transform(t){let e=this.x*t.a+this.y*t.c+t.e,s=this.x*t.b+this.y*t.d+t.f;return new x(e,s)}}class g{constructor(t,e,s,r,n,o){void 0===t?(this.a=1,this.b=0,this.c=0,this.d=1,this.e=0,this.f=0):(this.a=t,this.b=e,this.c=s,this.d=r,this.e=n,this.f=o)}toString(){return`affine: ${this.a} ${this.c} ${this.e} \n ${this.b} ${this.d} ${this.f}`}append(t){t instanceof g||console.error("mesh.js: argument to Affine.append is not affine!");let e=this.a*t.a+this.c*t.b,s=this.b*t.a+this.d*t.b,r=this.a*t.c+this.c*t.d,n=this.b*t.c+this.d*t.d,o=this.a*t.e+this.c*t.f+this.e,i=this.b*t.e+this.d*t.f+this.f;return new g(e,s,r,n,o,i)}}class w{constructor(t,e){this.nodes=t,this.colors=e}paintCurve(t,e){if(o(this.nodes)>r){const s=n(...this.nodes);let r=[[],[]],o=[[],[]];for(let t=0;t<4;++t)r[0][t]=this.colors[0][t],r[1][t]=(this.colors[0][t]+this.colors[1][t])/2,o[0][t]=r[1][t],o[1][t]=this.colors[1][t];let i=new w(s[0],r),a=new w(s[1],o);i.paintCurve(t,e),a.paintCurve(t,e)}else{let s=Math.round(this.nodes[0].x);if(s>=0&&s<e){let r=4*(~~this.nodes[0].y*e+s);t[r]=Math.round(this.colors[0][0]),t[r+1]=Math.round(this.colors[0][1]),t[r+2]=Math.round(this.colors[0][2]),t[r+3]=Math.round(this.colors[0][3])}}}}class m{constructor(t,e){this.nodes=t,this.colors=e}split(){let t=[[],[],[],[]],e=[[],[],[],[]],s=[[[],[]],[[],[]]],r=[[[],[]],[[],[]]];for(let s=0;s<4;++s){const r=n(this.nodes[0][s],this.nodes[1][s],this.nodes[2][s],this.nodes[3][s]);t[0][s]=r[0][0],t[1][s]=r[0][1],t[2][s]=r[0][2],t[3][s]=r[0][3],e[0][s]=r[1][0],e[1][s]=r[1][1],e[2][s]=r[1][2],e[3][s]=r[1][3]}for(let t=0;t<4;++t)s[0][0][t]=this.colors[0][0][t],s[0][1][t]=this.colors[0][1][t],s[1][0][t]=(this.colors[0][0][t]+this.colors[1][0][t])/2,s[1][1][t]=(this.colors[0][1][t]+this.colors[1][1][t])/2,r[0][0][t]=s[1][0][t],r[0][1][t]=s[1][1][t],r[1][0][t]=this.colors[1][0][t],r[1][1][t]=this.colors[1][1][t];return[new m(t,s),new m(e,r)]}paint(t,e){let s,n=!1;for(let t=0;t<4;++t)if((s=o([this.nodes[0][t],this.nodes[1][t],this.nodes[2][t],this.nodes[3][t]]))>r){n=!0;break}if(n){let s=this.split();s[0].paint(t,e),s[1].paint(t,e)}else{new w([...this.nodes[0]],[...this.colors[0]]).paintCurve(t,e)}}}class b{constructor(t){this.readMesh(t),this.type=t.getAttribute("type")||"bilinear"}readMesh(t){let e=[[]],s=[[]],r=Number(t.getAttribute("x")),n=Number(t.getAttribute("y"));e[0][0]=new x(r,n);let o=t.children;for(let t=0,r=o.length;t<r;++t){e[3*t+1]=[],e[3*t+2]=[],e[3*t+3]=[],s[t+1]=[];let r=o[t].children;for(let n=0,o=r.length;n<o;++n){let o=r[n].children;for(let r=0,i=o.length;r<i;++r){let i=r;0!==t&&++i;let h,d=o[r].getAttribute("path"),c="l";null!=d&&(c=(h=d.match(/\s*([lLcC])\s*(.*)/))[1]);let u=l(h[2]);switch(c){case"l":0===i?(e[3*t][3*n+3]=u[0].add(e[3*t][3*n]),e[3*t][3*n+1]=a(e[3*t][3*n],e[3*t][3*n+3]),e[3*t][3*n+2]=a(e[3*t][3*n+3],e[3*t][3*n])):1===i?(e[3*t+3][3*n+3]=u[0].add(e[3*t][3*n+3]),e[3*t+1][3*n+3]=a(e[3*t][3*n+3],e[3*t+3][3*n+3]),e[3*t+2][3*n+3]=a(e[3*t+3][3*n+3],e[3*t][3*n+3])):2===i?(0===n&&(e[3*t+3][3*n+0]=u[0].add(e[3*t+3][3*n+3])),e[3*t+3][3*n+1]=a(e[3*t+3][3*n],e[3*t+3][3*n+3]),e[3*t+3][3*n+2]=a(e[3*t+3][3*n+3],e[3*t+3][3*n])):(e[3*t+1][3*n]=a(e[3*t][3*n],e[3*t+3][3*n]),e[3*t+2][3*n]=a(e[3*t+3][3*n],e[3*t][3*n]));break;case"L":0===i?(e[3*t][3*n+3]=u[0],e[3*t][3*n+1]=a(e[3*t][3*n],e[3*t][3*n+3]),e[3*t][3*n+2]=a(e[3*t][3*n+3],e[3*t][3*n])):1===i?(e[3*t+3][3*n+3]=u[0],e[3*t+1][3*n+3]=a(e[3*t][3*n+3],e[3*t+3][3*n+3]),e[3*t+2][3*n+3]=a(e[3*t+3][3*n+3],e[3*t][3*n+3])):2===i?(0===n&&(e[3*t+3][3*n+0]=u[0]),e[3*t+3][3*n+1]=a(e[3*t+3][3*n],e[3*t+3][3*n+3]),e[3*t+3][3*n+2]=a(e[3*t+3][3*n+3],e[3*t+3][3*n])):(e[3*t+1][3*n]=a(e[3*t][3*n],e[3*t+3][3*n]),e[3*t+2][3*n]=a(e[3*t+3][3*n],e[3*t][3*n]));break;case"c":0===i?(e[3*t][3*n+1]=u[0].add(e[3*t][3*n]),e[3*t][3*n+2]=u[1].add(e[3*t][3*n]),e[3*t][3*n+3]=u[2].add(e[3*t][3*n])):1===i?(e[3*t+1][3*n+3]=u[0].add(e[3*t][3*n+3]),e[3*t+2][3*n+3]=u[1].add(e[3*t][3*n+3]),e[3*t+3][3*n+3]=u[2].add(e[3*t][3*n+3])):2===i?(e[3*t+3][3*n+2]=u[0].add(e[3*t+3][3*n+3]),e[3*t+3][3*n+1]=u[1].add(e[3*t+3][3*n+3]),0===n&&(e[3*t+3][3*n+0]=u[2].add(e[3*t+3][3*n+3]))):(e[3*t+2][3*n]=u[0].add(e[3*t+3][3*n]),e[3*t+1][3*n]=u[1].add(e[3*t+3][3*n]));break;case"C":0===i?(e[3*t][3*n+1]=u[0],e[3*t][3*n+2]=u[1],e[3*t][3*n+3]=u[2]):1===i?(e[3*t+1][3*n+3]=u[0],e[3*t+2][3*n+3]=u[1],e[3*t+3][3*n+3]=u[2]):2===i?(e[3*t+3][3*n+2]=u[0],e[3*t+3][3*n+1]=u[1],0===n&&(e[3*t+3][3*n+0]=u[2])):(e[3*t+2][3*n]=u[0],e[3*t+1][3*n]=u[1]);break;default:console.error("mesh.js: "+c+" invalid path type.")}if(0===t&&0===n||r>0){let e=window.getComputedStyle(o[r]).stopColor.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i),a=window.getComputedStyle(o[r]).stopOpacity,h=255;a&&(h=Math.floor(255*a)),e&&(0===i?(s[t][n]=[],s[t][n][0]=Math.floor(e[1]),s[t][n][1]=Math.floor(e[2]),s[t][n][2]=Math.floor(e[3]),s[t][n][3]=h):1===i?(s[t][n+1]=[],s[t][n+1][0]=Math.floor(e[1]),s[t][n+1][1]=Math.floor(e[2]),s[t][n+1][2]=Math.floor(e[3]),s[t][n+1][3]=h):2===i?(s[t+1][n+1]=[],s[t+1][n+1][0]=Math.floor(e[1]),s[t+1][n+1][1]=Math.floor(e[2]),s[t+1][n+1][2]=Math.floor(e[3]),s[t+1][n+1][3]=h):3===i&&(s[t+1][n]=[],s[t+1][n][0]=Math.floor(e[1]),s[t+1][n][1]=Math.floor(e[2]),s[t+1][n][2]=Math.floor(e[3]),s[t+1][n][3]=h))}}e[3*t+1][3*n+1]=new x,e[3*t+1][3*n+2]=new x,e[3*t+2][3*n+1]=new x,e[3*t+2][3*n+2]=new x,e[3*t+1][3*n+1].x=(-4*e[3*t][3*n].x+6*(e[3*t][3*n+1].x+e[3*t+1][3*n].x)+-2*(e[3*t][3*n+3].x+e[3*t+3][3*n].x)+3*(e[3*t+3][3*n+1].x+e[3*t+1][3*n+3].x)+-1*e[3*t+3][3*n+3].x)/9,e[3*t+1][3*n+2].x=(-4*e[3*t][3*n+3].x+6*(e[3*t][3*n+2].x+e[3*t+1][3*n+3].x)+-2*(e[3*t][3*n].x+e[3*t+3][3*n+3].x)+3*(e[3*t+3][3*n+2].x+e[3*t+1][3*n].x)+-1*e[3*t+3][3*n].x)/9,e[3*t+2][3*n+1].x=(-4*e[3*t+3][3*n].x+6*(e[3*t+3][3*n+1].x+e[3*t+2][3*n].x)+-2*(e[3*t+3][3*n+3].x+e[3*t][3*n].x)+3*(e[3*t][3*n+1].x+e[3*t+2][3*n+3].x)+-1*e[3*t][3*n+3].x)/9,e[3*t+2][3*n+2].x=(-4*e[3*t+3][3*n+3].x+6*(e[3*t+3][3*n+2].x+e[3*t+2][3*n+3].x)+-2*(e[3*t+3][3*n].x+e[3*t][3*n+3].x)+3*(e[3*t][3*n+2].x+e[3*t+2][3*n].x)+-1*e[3*t][3*n].x)/9,e[3*t+1][3*n+1].y=(-4*e[3*t][3*n].y+6*(e[3*t][3*n+1].y+e[3*t+1][3*n].y)+-2*(e[3*t][3*n+3].y+e[3*t+3][3*n].y)+3*(e[3*t+3][3*n+1].y+e[3*t+1][3*n+3].y)+-1*e[3*t+3][3*n+3].y)/9,e[3*t+1][3*n+2].y=(-4*e[3*t][3*n+3].y+6*(e[3*t][3*n+2].y+e[3*t+1][3*n+3].y)+-2*(e[3*t][3*n].y+e[3*t+3][3*n+3].y)+3*(e[3*t+3][3*n+2].y+e[3*t+1][3*n].y)+-1*e[3*t+3][3*n].y)/9,e[3*t+2][3*n+1].y=(-4*e[3*t+3][3*n].y+6*(e[3*t+3][3*n+1].y+e[3*t+2][3*n].y)+-2*(e[3*t+3][3*n+3].y+e[3*t][3*n].y)+3*(e[3*t][3*n+1].y+e[3*t+2][3*n+3].y)+-1*e[3*t][3*n+3].y)/9,e[3*t+2][3*n+2].y=(-4*e[3*t+3][3*n+3].y+6*(e[3*t+3][3*n+2].y+e[3*t+2][3*n+3].y)+-2*(e[3*t+3][3*n].y+e[3*t][3*n+3].y)+3*(e[3*t][3*n+2].y+e[3*t+2][3*n].y)+-1*e[3*t][3*n].y)/9}}this.nodes=e,this.colors=s}paintMesh(t,e){let s=(this.nodes.length-1)/3,r=(this.nodes[0].length-1)/3;if("bilinear"===this.type||s<2||r<2){let n;for(let o=0;o<s;++o)for(let s=0;s<r;++s){let r=[];for(let t=3*o,e=3*o+4;t<e;++t)r.push(this.nodes[t].slice(3*s,3*s+4));let i=[];i.push(this.colors[o].slice(s,s+2)),i.push(this.colors[o+1].slice(s,s+2)),(n=new m(r,i)).paint(t,e)}}else{let n,o,a,h,l,d,u;const x=s,g=r;s++,r++;let w=new Array(s);for(let t=0;t<s;++t){w[t]=new Array(r);for(let e=0;e<r;++e)w[t][e]=[],w[t][e][0]=this.nodes[3*t][3*e],w[t][e][1]=this.colors[t][e]}for(let t=0;t<s;++t)for(let e=0;e<r;++e)0!==t&&t!==x&&(n=i(w[t-1][e][0],w[t][e][0]),o=i(w[t+1][e][0],w[t][e][0]),w[t][e][2]=c(w[t-1][e][1],w[t][e][1],w[t+1][e][1],n,o)),0!==e&&e!==g&&(n=i(w[t][e-1][0],w[t][e][0]),o=i(w[t][e+1][0],w[t][e][0]),w[t][e][3]=c(w[t][e-1][1],w[t][e][1],w[t][e+1][1],n,o));for(let t=0;t<r;++t){w[0][t][2]=[],w[x][t][2]=[];for(let e=0;e<4;++e)n=i(w[1][t][0],w[0][t][0]),o=i(w[x][t][0],w[x-1][t][0]),w[0][t][2][e]=n>0?2*(w[1][t][1][e]-w[0][t][1][e])/n-w[1][t][2][e]:0,w[x][t][2][e]=o>0?2*(w[x][t][1][e]-w[x-1][t][1][e])/o-w[x-1][t][2][e]:0}for(let t=0;t<s;++t){w[t][0][3]=[],w[t][g][3]=[];for(let e=0;e<4;++e)n=i(w[t][1][0],w[t][0][0]),o=i(w[t][g][0],w[t][g-1][0]),w[t][0][3][e]=n>0?2*(w[t][1][1][e]-w[t][0][1][e])/n-w[t][1][3][e]:0,w[t][g][3][e]=o>0?2*(w[t][g][1][e]-w[t][g-1][1][e])/o-w[t][g-1][3][e]:0}for(let s=0;s<x;++s)for(let r=0;r<g;++r){let n=i(w[s][r][0],w[s+1][r][0]),o=i(w[s][r+1][0],w[s+1][r+1][0]),c=i(w[s][r][0],w[s][r+1][0]),x=i(w[s+1][r][0],w[s+1][r+1][0]),g=[[],[],[],[]];for(let t=0;t<4;++t){(d=[])[0]=w[s][r][1][t],d[1]=w[s+1][r][1][t],d[2]=w[s][r+1][1][t],d[3]=w[s+1][r+1][1][t],d[4]=w[s][r][2][t]*n,d[5]=w[s+1][r][2][t]*n,d[6]=w[s][r+1][2][t]*o,d[7]=w[s+1][r+1][2][t]*o,d[8]=w[s][r][3][t]*c,d[9]=w[s+1][r][3][t]*x,d[10]=w[s][r+1][3][t]*c,d[11]=w[s+1][r+1][3][t]*x,d[12]=0,d[13]=0,d[14]=0,d[15]=0,u=f(d);for(let e=0;e<9;++e){g[t][e]=[];for(let s=0;s<9;++s)g[t][e][s]=p(u,e/8,s/8),g[t][e][s]>255?g[t][e][s]=255:g[t][e][s]<0&&(g[t][e][s]=0)}}h=[];for(let t=3*s,e=3*s+4;t<e;++t)h.push(this.nodes[t].slice(3*r,3*r+4));l=y(h);for(let s=0;s<8;++s)for(let r=0;r<8;++r)(a=new m(l[s][r],[[[g[0][s][r],g[1][s][r],g[2][s][r],g[3][s][r]],[g[0][s][r+1],g[1][s][r+1],g[2][s][r+1],g[3][s][r+1]]],[[g[0][s+1][r],g[1][s+1][r],g[2][s+1][r],g[3][s+1][r]],[g[0][s+1][r+1],g[1][s+1][r+1],g[2][s+1][r+1],g[3][s+1][r+1]]]])).paint(t,e)}}}transform(t){if(t instanceof x)for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].add(t);else if(t instanceof g)for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].transform(t)}scale(t){for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].scale(t)}}document.querySelectorAll("rect,circle,ellipse,path,text").forEach((r,n)=>{let o=r.getAttribute("id");o||(o="patchjs_shape"+n,r.setAttribute("id",o));const i=r.style.fill.match(/^url\(\s*"?\s*#([^\s"]+)"?\s*\)/),a=r.style.stroke.match(/^url\(\s*"?\s*#([^\s"]+)"?\s*\)/);if(i&&i[1]){const a=document.getElementById(i[1]);if(a&&"meshgradient"===a.nodeName){const i=r.getBBox();let l=document.createElementNS(s,"canvas");d(l,{width:i.width,height:i.height});const c=l.getContext("2d");let u=c.createImageData(i.width,i.height);const f=new b(a);"objectBoundingBox"===a.getAttribute("gradientUnits")&&f.scale(new x(i.width,i.height));const p=a.getAttribute("gradientTransform");null!=p&&f.transform(h(p)),"userSpaceOnUse"===a.getAttribute("gradientUnits")&&f.transform(new x(-i.x,-i.y)),f.paintMesh(u.data,l.width),c.putImageData(u,0,0);const y=document.createElementNS(t,"image");d(y,{width:i.width,height:i.height,x:i.x,y:i.y});let g=l.toDataURL();y.setAttributeNS(e,"xlink:href",g),r.parentNode.insertBefore(y,r),r.style.fill="none";const w=document.createElementNS(t,"use");w.setAttributeNS(e,"xlink:href","#"+o);const m="patchjs_clip"+n,M=document.createElementNS(t,"clipPath");M.setAttribute("id",m),M.appendChild(w),r.parentElement.insertBefore(M,r),y.setAttribute("clip-path","url(#"+m+")"),u=null,l=null,g=null}}if(a&&a[1]){const o=document.getElementById(a[1]);if(o&&"meshgradient"===o.nodeName){const i=parseFloat(r.style.strokeWidth.slice(0,-2))*(parseFloat(r.style.strokeMiterlimit)||parseFloat(r.getAttribute("stroke-miterlimit"))||1),a=r.getBBox(),l=Math.trunc(a.width+i),c=Math.trunc(a.height+i),u=Math.trunc(a.x-i/2),f=Math.trunc(a.y-i/2);let p=document.createElementNS(s,"canvas");d(p,{width:l,height:c});const y=p.getContext("2d");let g=y.createImageData(l,c);const w=new b(o);"objectBoundingBox"===o.getAttribute("gradientUnits")&&w.scale(new x(l,c));const m=o.getAttribute("gradientTransform");null!=m&&w.transform(h(m)),"userSpaceOnUse"===o.getAttribute("gradientUnits")&&w.transform(new x(-u,-f)),w.paintMesh(g.data,p.width),y.putImageData(g,0,0);const M=document.createElementNS(t,"image");d(M,{width:l,height:c,x:0,y:0});let S=p.toDataURL();M.setAttributeNS(e,"xlink:href",S);const k="pattern_clip"+n,A=document.createElementNS(t,"pattern");d(A,{id:k,patternUnits:"userSpaceOnUse",width:l,height:c,x:u,y:f}),A.appendChild(M),o.parentNode.appendChild(A),r.style.stroke="url(#"+k+")",g=null,p=null,S=null}}})}();
+</script>
+</svg>
diff --git a/plugin/spoiler_bbc/src/asset/icon_page_shield.svg b/plugin/spoiler_bbc/src/asset/icon_page_shield.svg
new file mode 100644
index 0000000..cc57199
--- /dev/null
+++ b/plugin/spoiler_bbc/src/asset/icon_page_shield.svg
@@ -0,0 +1,191 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ width="64"
+ height="64"
+ viewBox="0 0 64 64"
+ version="1.1"
+ id="svg8"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <defs
+ id="defs2">
+ <linearGradient
+ id="linearGradient914">
+ <stop
+ style="stop-color:#e9e9e9;stop-opacity:1"
+ offset="0"
+ id="stop910" />
+ <stop
+ style="stop-color:#fcfcfc;stop-opacity:1"
+ offset="1"
+ id="stop912" />
+ </linearGradient>
+ <linearGradient
+ id="linearGradient874">
+ <stop
+ style="stop-color:#000000;stop-opacity:0.21176471"
+ offset="0"
+ id="stop870" />
+ <stop
+ style="stop-color:#949494;stop-opacity:0.56862748"
+ offset="1"
+ id="stop872" />
+ </linearGradient>
+ <linearGradient
+ xlink:href="#linearGradient874"
+ id="linearGradient905"
+ gradientUnits="userSpaceOnUse"
+ x1="8"
+ y1="60"
+ x2="48"
+ y2="8" />
+ <linearGradient
+ xlink:href="#linearGradient914"
+ id="linearGradient916"
+ x1="44"
+ y1="16"
+ x2="20"
+ y2="48"
+ gradientUnits="userSpaceOnUse" />
+ <linearGradient
+ xlink:href="#linearGradient884"
+ id="linearGradient886"
+ x1="12"
+ y1="24"
+ x2="54"
+ y2="24"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.75862238,0,0,0.75862238,18.482665,16.965424)" />
+ <linearGradient
+ id="linearGradient884">
+ <stop
+ style="stop-color:#fdf7df;stop-opacity:1"
+ offset="0"
+ id="stop880" />
+ <stop
+ style="stop-color:#fefcf3;stop-opacity:1"
+ offset="0.47619048"
+ id="stop888" />
+ <stop
+ style="stop-color:#fdf7df;stop-opacity:1"
+ offset="1"
+ id="stop882" />
+ </linearGradient>
+ <linearGradient
+ xlink:href="#linearGradient876"
+ id="linearGradient878"
+ x1="48"
+ y1="52"
+ x2="16"
+ y2="8"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(0.75862238,0,0,0.75862238,18.482665,16.965424)" />
+ <linearGradient
+ id="linearGradient876">
+ <stop
+ style="stop-color:#dc9f30;stop-opacity:1"
+ offset="0"
+ id="stop872-3" />
+ <stop
+ style="stop-color:#edc13f;stop-opacity:1"
+ offset="1"
+ id="stop874" />
+ </linearGradient>
+ <linearGradient
+ xlink:href="#linearGradient939"
+ id="linearGradient927"
+ gradientUnits="userSpaceOnUse"
+ x1="16"
+ y1="32"
+ x2="48"
+ y2="32" />
+ <linearGradient
+ id="linearGradient939">
+ <stop
+ style="stop-color:#f6dc7d;stop-opacity:1"
+ offset="0"
+ id="stop933" />
+ <stop
+ style="stop-color:#fcf29e;stop-opacity:1"
+ offset="0.5"
+ id="stop935" />
+ <stop
+ style="stop-color:#eeac28;stop-opacity:1"
+ offset="1"
+ id="stop937" />
+ </linearGradient>
+ <linearGradient
+ xlink:href="#linearGradient996"
+ id="linearGradient927-6"
+ gradientUnits="userSpaceOnUse"
+ x1="45.192486"
+ y1="62.272038"
+ x2="35.138805"
+ y2="35.273148" />
+ <linearGradient
+ id="linearGradient996">
+ <stop
+ style="stop-color:#ffff00;stop-opacity:0.58911943"
+ offset="0"
+ id="stop990" />
+ <stop
+ style="stop-color:#ffff00;stop-opacity:0"
+ offset="1"
+ id="stop994" />
+ </linearGradient>
+ </defs>
+ <metadata
+ id="metadata5">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ id="layer1">
+ <path
+ style="fill:none;stroke:url(#linearGradient905);stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
+ d="M 10,6 V 58 H 54 V 18 L 48,12 42,6 Z"
+ id="path868-7" />
+ <path
+ style="fill:#e9e9e9;fill-opacity:1;stroke:none;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
+ d="m 43,4 13,13 v 1 H 42 V 4 Z"
+ id="path908" />
+ <path
+ style="fill:url(#linearGradient916);fill-opacity:1;stroke:#fcfcfc;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:markers fill stroke"
+ d="M 10,6 V 58 H 54 V 18 H 42 V 6 Z"
+ id="path868" />
+ <image
+ width="64"
+ height="64"
+ preserveAspectRatio="none"
+ style="image-rendering:optimizeSpeed"
+ xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAAK/INwWK6QAAABl0RVh0 U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAC4SURBVCjPdZFbDsIgEEWnrsMm7oGGfZro hxvU+Iq1TyjU60Bf1pac4Yc5YS4ZAtGWBMk/drQBOVwJlZrWYkLhsB8UV9K0BUrPGy9cWbng2CtE EUmLGppPjRwpbixUKHBiZRS0p+ZGhvs4irNEvWD8heHpbsyDXznPhYFOyTjJc13olIqzZCHBouE0 FRMUjA+s1gTjaRgVFpqRwC8mfoXPPEVPS7LbRaJL2y7bOifRCTEli3U7BMWgLzKlW/CuebZPAAAA AElFTkSuQmCC "
+ id="image858"
+ x="-60"
+ y="0" />
+ <path
+ style="fill:url(#linearGradient886);fill-opacity:1;stroke:url(#linearGradient878);stroke-width:3.03449;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
+ d="m 42.758575,62.482763 c 6.8276,-2.27586 16.68969,-12.896579 16.68969,-18.206935 V 30.620625 c 1.51725,0 3.03449,-1.517245 3.03449,-3.03449 0,-1.517244 -1.51724,-3.034489 -3.03449,-3.034489 -1.51724,0 -3.03449,1.517245 -3.03449,3.034489 -5.31035,-1.517244 -10.62071,-2.275866 -13.6552,-6.068978 -3.03449,3.793112 -9.41991,4.877489 -13.6552,6.068978 0,-1.517244 -1.51725,-3.034489 -3.03449,-3.034489 -1.51725,0 -3.03449,1.517245 -3.03449,3.034489 0,1.517245 1.51724,3.03449 3.03449,3.03449 v 13.655203 c 0,5.310356 9.86209,15.931075 16.68969,18.206935 z"
+ id="path868-6" />
+ <path
+ id="path868-5"
+ style="fill:url(#linearGradient927);fill-opacity:1;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
+ d="m 10,12 a 6.0006,6.0006 0 0 1 1.535156,0.636719 c -0.01815,-0.01859 -0.02635,-0.112286 -0.04297,-0.128906 C 11.299378,12.315003 11,12 10,12 Z m 44,0 c -1,0 -1.299378,0.315003 -1.492188,0.507813 -0.01662,0.01662 -0.02482,0.110314 -0.04297,0.128906 A 6.0006,6.0006 0 0 1 54,12 Z M 8,14 c 0,1 0.3150035,1.299378 0.5078125,1.492188 0.036341,0.03634 0.2333341,0.05363 0.28125,0.0957 A 6.0006,6.0006 0 0 1 8,14 Z m 48,0 a 6.0006,6.0006 0 0 1 -0.791016,1.587891 c 0.04831,-0.04235 0.246637,-0.05914 0.283203,-0.0957 C 55.684997,15.299378 56,15 56,14 Z m -24.015625,0.01367 C 26.391489,17.792401 19.900296,18.646969 16,19.6875 V 36 c 0,-0.214286 2.153449,5.216881 6.039062,9.435547 3.212042,3.487359 7.101019,6.2687 9.960938,7.767578 2.859919,-1.498878 6.748896,-4.280219 9.960937,-7.767578 C 45.846551,41.216881 48,35.785714 48,36 V 19.673828 C 43.124933,18.319706 37.137158,17.465673 31.984375,14.013672 Z"
+ transform="matrix(0.75862237,0,0,0.75862237,18.482665,16.965423)" />
+ <path
+ id="path868-5-2"
+ style="fill:url(#linearGradient927-6);fill-opacity:1;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;paint-order:markers fill stroke"
+ d="m 10,12 a 6.0006,6.0006 0 0 1 1.535156,0.636719 c -0.01815,-0.01859 -0.02635,-0.112286 -0.04297,-0.128906 C 11.299378,12.315003 11,12 10,12 Z m 44,0 c -1,0 -1.299378,0.315003 -1.492188,0.507813 -0.01662,0.01662 -0.02482,0.110314 -0.04297,0.128906 A 6.0006,6.0006 0 0 1 54,12 Z M 8,14 c 0,1 0.3150035,1.299378 0.5078125,1.492188 0.036341,0.03634 0.2333341,0.05363 0.28125,0.0957 A 6.0006,6.0006 0 0 1 8,14 Z m 48,0 a 6.0006,6.0006 0 0 1 -0.791016,1.587891 c 0.04831,-0.04235 0.246637,-0.05914 0.283203,-0.0957 C 55.684997,15.299378 56,15 56,14 Z m -24.015625,0.01367 C 26.391489,17.792401 19.900296,18.646969 16,19.6875 V 36 c 0,-0.214286 2.153449,5.216881 6.039062,9.435547 3.212042,3.487359 7.101019,6.2687 9.960938,7.767578 2.859919,-1.498878 6.748896,-4.280219 9.960937,-7.767578 C 45.846551,41.216881 48,35.785714 48,36 V 19.673828 C 43.124933,18.319706 37.137158,17.465673 31.984375,14.013672 Z"
+ transform="matrix(0.75862237,0,0,0.75862237,18.482665,16.965423)" />
+ </g>
+</svg>
diff --git a/plugin/spoiler_bbc/src/asset/icon_page_warn.svg b/plugin/spoiler_bbc/src/asset/icon_page_warn.svg
new file mode 100644
index 0000000..dd1da12
--- /dev/null
+++ b/plugin/spoiler_bbc/src/asset/icon_page_warn.svg
@@ -0,0 +1 @@
+<?xml version='1.0' encoding='ASCII' standalone='yes'?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" width="64" height="64" viewBox="0 0 64 64" version="1.1" id="svg8"><defs id="defs2"><linearGradient id="linearGradient914"><stop style="stop-color:#e9e9e9;stop-opacity:1" offset="0" id="stop910"/><stop style="stop-color:#fcfcfc;stop-opacity:1" offset="1" id="stop912"/></linearGradient><linearGradient id="linearGradient874"><stop style="stop-color:#000000;stop-opacity:0.21176471" offset="0" id="stop870"/><stop style="stop-color:#949494;stop-opacity:0.56862748" offset="1" id="stop872"/></linearGradient><linearGradient xlink:href="#linearGradient874" id="linearGradient905" gradientUnits="userSpaceOnUse" x1="8" y1="60" x2="48" y2="8"/><linearGradient xlink:href="#linearGradient914" id="linearGradient916" x1="44" y1="16" x2="20" y2="48" gradientUnits="userSpaceOnUse"/></defs><metadata id="metadata5"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata><g id="layer1"><path style="fill:none;stroke:url(#linearGradient905);stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke" d="M 10,6 V 58 H 54 V 18 L 48,12 42,6 Z" id="path868-7"/><path style="fill:#e9e9e9;fill-opacity:1;stroke:none;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke" d="m 43,4 13,13 v 1 H 42 V 4 Z" id="path908"/><path style="fill:url(#linearGradient916);fill-opacity:1;stroke:#fcfcfc;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:markers fill stroke" d="M 10,6 V 58 H 54 V 18 H 42 V 6 Z" id="path868"/></g><svg width="64" height="64" viewBox="0 0 64 64" version="1.1" id="svg8"><defs id="defs2"><linearGradient id="linearGradientKeyLayer1177"><stop style="stop-color:#e9bb3a;stop-opacity:0.9896782" offset="0" id="stop1173"/><stop style="stop-color:#c16803;stop-opacity:1" offset="1" id="stop1175"/></linearGradient><linearGradient xlink:href="#linearGradientKeyLayer1177" id="linearGradientKeyLayer1179" x1="20" y1="20" x2="36" y2="60" gradientUnits="userSpaceOnUse" gradientTransform="translate(20,4)"/></defs><metadata id="metadata5"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata><g id="layer1"><path style="fill:#ffffff;fill-opacity:1;stroke:url(#linearGradientKeyLayer1179);stroke-width:8;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" d="M 24,60 H 60 L 42,28 Z" id="path1169"/><path style="fill:#f5d852;fill-opacity:1;stroke:none;stroke-width:8;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke" d="M 28,58 H 56 L 42,33 Z" id="path1171"/><path style="fill:#c58711;fill-opacity:1;stroke:none;stroke-width:1;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" d="m 40,52 v 4 h 4 v -4 z" id="path1219"/><path style="fill:#c58711;fill-opacity:1;stroke:none;stroke-width:1;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" d="m 40,48 h 4 v -8 h -4 z" id="path1221"/></g></svg></svg>
\ No newline at end of file
diff --git a/plugin/spoiler_bbc/src/package-info.xml b/plugin/spoiler_bbc/src/package-info.xml
new file mode 100644
index 0000000..2f8efc1
--- /dev/null
+++ b/plugin/spoiler_bbc/src/package-info.xml
@@ -0,0 +1,41 @@
+<?xml version="1.0"?>
+<!DOCTYPE package-info SYSTEM "http://www.simplemachines.org/xml/package-info">
+<package-info xmlns="http://www.simplemachines.org/xml/package-info" xmlns:smf="http://www.simplemachines.org/">
+ <id>@flurry:spoiler_bbc</id>
+ <name>Spoiler BBCode Tags</name>
+ <version>1.0</version>
+ <type>modification</type>
+
+ <install for="2.1.* - 2.1.99">
+ <readme parsebbc="true">readme.txt</readme>
+ <require-file name="Subs-SpoilerCode.php" destination="$sourcedir" />
+ <require-file name="sceditor.spoilerbbc.css" destination="Themes/default/css" />
+ <require-file name="spoiler_bbc.css" destination="Themes/default/css" />
+ <require-file name="sceditor.spoilerbbc.js" destination="Themes/default/scripts" />
+ <require-file name="asset/icon_page_shield.svg" destination="Themes/default/images" />
+ <require-file name="asset/icon_page_warn.svg" destination="Themes/default/images" />
+ <require-file name="asset/icon_minimize.svg" destination="Themes/default/images" />
+ <require-file name="asset/icon_expand.svg" destination="Themes/default/images" />
+ <hook hook="integrate_bbc_codes" function="hook_spoiler_bbcode" file="$sourcedir/Subs-SpoilerCode.php" />
+ <hook hook="integrate_bbc_buttons" function="hook_spoiler_bbcode_buttons" file="$sourcedir/Subs-SpoilerCode.php" />
+ <hook hook="integrate_sceditor_options" function="spoiler_sce_options" file="$sourcedir/Subs-SpoilerCode.php" />
+ <hook hook="integrate_credits" function="spoiler_bbc_credits" file="$sourcedir/Subs-SpoilerCode.php" />
+ <hook hook="integrate_load_theme" function="hook_spoiler_load_theme" file="$sourcedir/Subs-SpoilerCode.php" />
+ </install>
+
+ <uninstall for="2.1.* - 2.1.99">
+ <remove-file name="$sourcedir/Subs-SpoilerCode.php" />
+ <remove-file name="Themes/default/scripts/sceditor.spoilerbbc.js" />
+ <remove-file name="Themes/default/css/sceditor.spoilerbbc.css" />
+ <remove-file name="Themes/default/css/spoiler_bbc.css" />
+ <remove-file name="Themes/default/images/icon_page_shield.svg" />
+ <remove-file name="Themes/default/images/icon_page_warn.svg" />
+ <remove-file name="Themes/default/images/icon_minimize.svg" />
+ <remove-file name="Themes/default/images/icon_expand.svg" />
+ <hook hook="integrate_load_theme" function="hook_spoiler_load_theme" file="$sourcedir/Subs-SpoilerCode.php" reverse="true" />
+ <hook hook="integrate_bbc_codes" function="hook_spoiler_bbcode" file="$sourcedir/Subs-SpoilerCode.php" reverse="true" />
+ <hook hook="integrate_bbc_buttons" function="hook_spoiler_bbcode_buttons" file="$sourcedir/Subs-SpoilerCode.php" reverse="true" />
+ <hook hook="integrate_sceditor_options" function="spoiler_sce_options" file="$sourcedir/Subs-SpoilerCode.php" reverse="true" />
+ <hook hook="integrate_credits" function="spoiler_bbc_credits" file="$sourcedir/Subs-SpoilerCode.php" reverse="true" />
+ </uninstall>
+</package-info>
diff --git a/plugin/spoiler_bbc/src/readme.txt b/plugin/spoiler_bbc/src/readme.txt
new file mode 100644
index 0000000..acb561e
--- /dev/null
+++ b/plugin/spoiler_bbc/src/readme.txt
@@ -0,0 +1,25 @@
+[size=x-large][b]Spoiler and Hidden Tags[/b][/size]
+
+This adds the following BBCode tags to SMF:
+
+[size=large][b]Spoilers[/b][/size]
+
+Hides a block of text from users behind a warning of potential spoilers.
+Follows the somewhat-standard spoiler tag definition.
+
+By default, the following uses the subject "[b]Spoiler Text[/b]":
+
+[nobbc][spoiler]Example Spoiler[/spoiler][/nobbc]
+
+To set the subject text for the spoiler, use the following:
+
+[nobbc][spoiler=Super Fantasy RPG XXV Spoilers]Example Spoiler[/spoiler][/nobbc]
+
+[size=large][b]Login-Restricted Text[/b][/size]
+
+This is useful for content users want to keep restricted to logged-in users.
+For example, a game server's password, or a link to an unlisted YouTube video.
+
+[nobbc][noguest]The password is "haggis"[/noguest][/nobbc]
+
+No subject can be set here, it will always appear as "Logged-in users only".
diff --git a/plugin/spoiler_bbc/src/sceditor.spoilerbbc.css b/plugin/spoiler_bbc/src/sceditor.spoilerbbc.css
new file mode 100644
index 0000000..b1aa235
--- /dev/null
+++ b/plugin/spoiler_bbc/src/sceditor.spoilerbbc.css
@@ -0,0 +1,11 @@
+.sceditor-button-spoiler div {
+ background-image: url('../../default/images/icon_page_warn.svg');
+ background-size: contain;
+ background-repeat: no-repeat;
+}
+
+.sceditor-button-noguest div {
+ background-image: url('../../default/images/icon_page_shield.svg');
+ background-size: contain;
+ background-repeat: no-repeat;
+}
diff --git a/plugin/spoiler_bbc/src/sceditor.spoilerbbc.js b/plugin/spoiler_bbc/src/sceditor.spoilerbbc.js
new file mode 100644
index 0000000..8233ae7
--- /dev/null
+++ b/plugin/spoiler_bbc/src/sceditor.spoilerbbc.js
@@ -0,0 +1,263 @@
+(function (sceditor) {
+ const DEFAULT_SPOILER_TEXT = 'Spoiler';
+ const DEFAULT_NOGUEST_TEXT = 'Logged-in users only';
+
+ function isArray(x) {
+ return (x != null && 'constructor' in x && x.constructor === Array);
+ }
+
+ /**
+ * Creates an HTML element.
+ *
+ * This can set not only element properties, but also children and events,
+ * using their respectively-named properties. For example, using a button:
+ *
+ * ```js
+ * createElement('button', {
+ * innerText: 'Button!',
+ * events: {
+ * 'click': function() { alert('Button clicked!'); },
+ * },
+ * });
+ * ```
+ *
+ * And an example div with children:
+ *
+ * ```js
+ * createElement('div', {
+ * children: [
+ * createElement('h1', {
+ * innerText: 'Header',
+ * }),
+ * createElement('p', {
+ * innerText: 'Paragraph 1',
+ * }),
+ * createElement('p', {
+ * innerText: 'Paragraph 2',
+ * }),
+ * ],
+ * });
+ * ```
+ *
+ * @param tag The HTML tag name. For example, 'input' for an `<input/>` element.
+ * @param params The element's parameters (e.g. `id`, `innerText`, etc).
+ * @return The HTML element.
+ */
+ function createElement(tag, params) {
+ const elem = document.createElement(tag);
+ if (params != null && typeof params === 'object') {
+ for (const key of Object.keys(params)) {
+ if (key === 'children' && isArray(params['children'])) {
+ for (const child of params['children']) {
+ elem.appendChild(child);
+ }
+ } else if (key === 'events' && params != null && typeof params['events'] === 'object') {
+ for (const evkey of Object.keys(params['events'])) {
+ elem.addEventListener(evkey, params['events'][evkey]);
+ }
+ } else {
+ elem[key] = params[key];
+ }
+ }
+ }
+
+ return elem;
+ }
+
+ /**
+ * BBCode-to-HTML for Spoiler-adjacent tags.
+ */
+ function makeSpoilerHtml(tagname, title, content) {
+ let isOpen = false;
+ if (tagname === 'noguest') {
+ title = DEFAULT_NOGUEST_TEXT;
+ isOpen = true;
+ } else if (tagname === 'spoiler') {
+ if (title == null || title.trim() === '') {
+ title = DEFAULT_SPOILER_TEXT;
+ }
+ }
+
+ return '<details class="collapsible ' + tagname + '"' + (isOpen ? ' open' : '') + '>' +
+ '<summary>' + title + '</summary>' + ' ' + // <-- Load-bearing space??
+ '<div>' + content + '</div>' +
+ '</details>';
+ }
+
+ // This creates the dropdown for the user to provide a spoiler subject
+ function spoilerDropDown(editor, caller, callback) {
+ const clickAction = function (ev) {
+ const spoilSubject = document.getElementById('spoilsubject');
+
+ // The spoiler title must a) exist, and b) be a non-empty string
+ let title = null;
+ if (spoilSubject && spoilSubject.value) {
+ const val = spoilSubject.value.trim();
+ if (val !== '') {
+ title = val;
+ }
+ }
+
+ callback(title);
+ editor.closeDropDown(true);
+ ev.preventDefault();
+ };
+ const dropDown = createElement('div', {
+ children: [
+ // Text input
+ createElement('form', {
+ children: [
+ createElement('label', {
+ htmlFor: 'spoilsubject',
+ innerText: 'Spoiler Subject:',
+ }),
+ createElement('input', {
+ id: 'spoilsubject',
+ name: 'spoilsubject',
+ type: 'text',
+ dir: 'ltr',
+ placeholder: DEFAULT_SPOILER_TEXT,
+ }),
+ ],
+ events: {
+ 'submit': clickAction,
+ },
+ }),
+ // Submit button
+ createElement('div', {
+ children: [
+ createElement('input', {
+ className: 'button',
+ type: 'button',
+ value: 'Insert',
+ events: {
+ 'click': clickAction,
+ },
+ }),
+ ],
+ }),
+ ],
+ });
+
+ editor.createDropDown(caller, 'insertspoiler', dropDown);
+ }
+
+ /**
+ * HTML-to-BBCode for Spoiler-adjacent tags.
+ */
+ function makeSpoilerBBCode(editor, tagname, element) {
+ let title = null;
+ let contentNodes = [];
+ let content = null;
+ let summaryNode = null;
+
+ for (const child of Array.from(element.children)) {
+ if (child.tagName === 'SUMMARY') {
+ summaryNode = child;
+ } else {
+ contentNodes.push(child);
+ }
+ }
+
+ if (summaryNode) {
+ element.removeChild(summaryNode);
+ }
+
+ if (tagname === 'spoiler' && summaryNode != null) {
+ // Get the custom spoiler text, if any
+ const summary = summaryNode.textContent.trim();
+ if (summary !== '' && summary !== 'Spoiler') {
+ title = '=' + summary;
+ }
+ }
+
+ if (contentNodes.length > 1) {
+ // Wrap the content in a <div/> to be safe
+ content = createElement('div', {
+ children: contentNodes,
+ });
+ } else if (contentNodes.length === 1) {
+ content = contentNodes[0];
+ }
+
+ return '[' + tagname + (title ?? '') + ']'
+ + editor.elementToBbcode(content)
+ + '[/' + tagname + ']';
+ }
+
+ sceditor.formats.bbcode.set(
+ 'spoiler', {
+ tags: {
+ details: {
+ class: 'collapsible spoiler'
+ }
+ },
+ isInline: false,
+ breakBefore: true,
+ breakStart: true,
+ breakEnd: true,
+ breakAfter: true,
+ skipLastLineBreak: true,
+ format: function (element, content) {
+ return makeSpoilerBBCode(this, 'spoiler', element);
+ },
+ html: function (token, attrs, content) {
+ return makeSpoilerHtml('spoiler', attrs.defaultattr, content);
+ }
+ });
+
+ sceditor.formats.bbcode.set(
+ 'noguest', {
+ tags: {
+ details: {
+ class: 'collapsible noguest'
+ }
+ },
+ isInline: false,
+ breakBefore: true,
+ breakStart: true,
+ breakEnd: true,
+ breakAfter: true,
+ skipLastLineBreak: true,
+ format: function (element, content) {
+ return makeSpoilerBBCode(this, 'noguest', element);
+ },
+ html: function (token, attrs, content) {
+ return makeSpoilerHtml('noguest', null, content);
+ }
+ });
+
+ sceditor.command.set(
+ 'spoiler', {
+ exec: function (caller) {
+ const editor = this;
+ spoilerDropDown(this, caller, function (title) {
+ // TODO: can we include the selection like txtExec here?
+ editor.wysiwygEditorInsertHtml(makeSpoilerHtml('spoiler', title, ''));
+ });
+ },
+ txtExec: function (caller, selected) {
+ const editor = this;
+ spoilerDropDown(this, caller, function (title) {
+ editor.insertText(
+ '[spoiler' + (title ? '=' + title : '') + ']'
+ + selected
+ + '[/spoiler]'
+ );
+ });
+ }
+ }
+ );
+
+ sceditor.command.set(
+ 'noguest', {
+ exec: function (caller) {
+ // TODO: can we include the selection like txtExec here?
+ this.wysiwygEditorInsertHtml(makeSpoilerHtml('noguest', null, ''));
+ },
+ txtExec: function (caller, selected) {
+ this.insertText('[noguest]' + selected + '[/noguest]');
+ }
+ }
+ );
+})(sceditor);
diff --git a/plugin/spoiler_bbc/src/spoiler_bbc.css b/plugin/spoiler_bbc/src/spoiler_bbc.css
new file mode 100644
index 0000000..15abf60
--- /dev/null
+++ b/plugin/spoiler_bbc/src/spoiler_bbc.css
@@ -0,0 +1,66 @@
+.collapsible {
+ border-width: 1px 1px 1px 3px;
+ border-style: solid;
+ margin: 0 auto 8px;
+}
+
+.collapsible > summary,
+.collapsible > div {
+ padding: 4px;
+ margin: 0;
+}
+
+.collapsible > summary {
+ list-style-type: none;
+ font-weight: bold;
+}
+
+.collapsible > summary::before {
+ display: inline-block;
+ width: 0.8em;
+ height: 0.8em;
+ margin-right: 0.25em;
+ margin-top: auto;
+ margin-bottom: auto;
+ background: url('../images/icon_expand.svg') no-repeat 0 0 / contain;
+ content: '';
+}
+
+.collapsible > summary::-webkit-details-marker {
+ display: none;
+}
+
+.collapsible[open] > summary {
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.collapsible[open] > summary::before {
+ background-image: url('../images/icon_minimize.svg');
+}
+
+.spoiler > summary {
+ background-color: var(--spoiler-head-background, #dcd);
+ border-color: var(--spoiler-border, #969);
+}
+
+.spoiler > div {
+ background-color: var(--spoiler-main-background, #fff9ff);
+}
+
+.spoiler {
+ border-color: var(--spoiler-border, #969);
+}
+
+.noguest > summary {
+ background-color: var(--noguest-head-background, #cce);
+ border-color: var(--noguest-border, #66a);
+}
+
+.noguest {
+ border-color: var(--noguest-border, #66a);
+}
+
+.noguest > div {
+ background-color: var(--noguest-main-background, #f9f9ff);
+}