Merge pull request #15662 from KartikWatts/feat/toggle-for-wiki-openi…

…ng-info-display

feat: toggle for wiki opening info display

modules/analyse/src/main/ui/AnalyseUi.scala

@@ -47,7 +47,12 @@ final class AnalyseUi(helpers: Helpers)(externalEngineEndpoint: String):
  )(v.name)
  }
  ),
- pov.game.variant.standard.option(div(cls := "analyse__wiki"))
+ pov.game.variant.standard.option(
+ fieldset(cls := "analyse__wiki empty toggle-box toggle-box--toggle", id := "wikibook-field")(
+ legend(tabindex := 0)("WikiBook"),
+ div(cls := "analyse__wiki-text")
+ )
+ )
  )
  ),
  div(cls := "analyse__board main-board")(chessgroundBoard),

modules/ui/src/main/helper/Form3.scala

@@ -201,9 +201,9 @@ final class Form3(formHelper: FormHelper & I18nHelper, flairApi: FlairApi):
  def fieldset(legend: Frag, toggle: Option[Boolean] = none): Tag =
  st.fieldset(
  cls := List(
- "form-fieldset" -> true,
- "form-fieldset--toggle" -> toggle.isDefined,
- "form-fieldset--toggle-off" -> toggle.has(false)
+ "toggle-box" -> true,
+ "toggle-box--toggle" -> toggle.isDefined,
+ "toggle-box--toggle-off" -> toggle.has(false)
  )
  )(st.legend(toggle.map(_ => tabindex := 0))(legend))
 

ui/analyse/css/_side.scss

@@ -16,11 +16,14 @@
  }
  }
  .analyse__wiki {
- margin-top: 2vh;
+ margin: 2vh 0;
  flex: 1 1 auto;
  @include mq-at-least-col3 {
  flex: 1 1 0;
- padding: 0.5em 1em 0 0;
+ }
+
+ &.empty {
+ visibility: hidden;
  }
  }
  }
@@ -30,6 +33,9 @@
  }
  &__wiki {
  overflow-y: auto;
+ padding: 1rem 1rem 0 1rem;
+ scrollbar-gutter: stable both-edges;
+
  p {
  text-align: justify;
  line-height: 1.5;

ui/analyse/css/build/analyse.free.scss

@@ -1,4 +1,5 @@
 @import '../analyse.abstract';
 @import '../../../common/css/component/mselect';
+@import '../../../common/css/component/toggle-box';
 
 @import '../analyse.free';

ui/analyse/src/view/main.ts

@@ -20,6 +20,7 @@ import {
  renderTools,
  renderUnderboard,
 } from './components';
+import { wikiToggleBox } from '../wiki';
 
 export default function (deps?: typeof studyDeps) {
  return function (ctrl: AnalyseCtrl): VNode {
@@ -51,7 +52,10 @@ function analyseView(ctrl: AnalyseCtrl, deps?: typeof studyDeps): VNode {
  'aside.analyse__side',
  {
  hook: onInsert(elm => {
- ctrl.opts.$side && ctrl.opts.$side.length && $(elm).replaceWith(ctrl.opts.$side);
+ if (ctrl.opts.$side && ctrl.opts.$side.length) {
+ $(elm).replaceWith(ctrl.opts.$side);
+ wikiToggleBox();
+ }
  }),
  },
  ctrl.studyPractice

ui/analyse/src/wiki.ts

@@ -1,11 +1,32 @@
 import debounce from 'common/debounce';
+import { storedBooleanPropWithEffect } from 'common/storage';
 
 export type WikiTheory = (nodes: Tree.Node[]) => void;
 
+export function wikiToggleBox() {
+ $('#wikibook-field').each(function (this: HTMLElement) {
+ const box = this;
+
+ const state = storedBooleanPropWithEffect('analyse.wikibooks.display', true, value =>
+ box.classList.toggle('toggle-box--toggle-off', value),
+ );
+
+ const toggle = () => state(!state());
+
+ if (!state()) box.classList.add('toggle-box--toggle-off');
+
+ $(box)
+ .children('legend')
+ .on('click', toggle)
+ .on('keypress', e => e.key == 'Enter' && toggle());
+ });
+}
+
 export default function wikiTheory(): WikiTheory {
  const cache = new Map<string, string>();
  const show = (html: string) => {
- $('.analyse__wiki').html(html).toggleClass('empty', !html);
+ $('.analyse__wiki').toggleClass('empty', !html);
+ $('.analyse__wiki-text').html(html);
  site.pubsub.emit('chat.resize');
  };
 
@@ -73,5 +94,5 @@ export default function wikiTheory(): WikiTheory {
 }
 
 export function wikiClear() {
- $('.analyse__wiki').html('').toggleClass('empty', true);
+ $('.analyse__wiki').toggleClass('empty', true);
 }

ui/bits/css/ublog/_form.scss

@@ -8,7 +8,7 @@
  padding-left: var(---box-padding);
  padding-right: var(---box-padding);
  }
- .form-fieldset {
+ .toggle-box {
  @extend %box-margin-horiz;
  }
  &__delete {

ui/common/css/component/_toggle-box.scss

@@ -0,0 +1,45 @@
+.toggle-box {
+ @extend %box-radius;
+ border: $border;
+ background: $c-bg-zebra;
+ margin: 1rem 0 3rem 0;
+ padding: 2rem 2rem 0 2rem;
+
+ legend {
+ @extend %box-radius;
+ background: $c-bg-zebra;
+ padding: 0.5em 1.5em;
+ text-align: right;
+ font-size: 1.2em;
+ user-select: none;
+ }
+}
+.toggle-box--toggle {
+ legend {
+ border-top: $border;
+ cursor: pointer;
+ &::after {
+ content: '▲';
+ margin-left: 1ch;
+ }
+ }
+}
+.toggle-box--toggle-off {
+ background: none;
+ border-width: 1px 0 0 0;
+ padding-top: 0;
+ legend {
+ border: $border;
+ background: none;
+ &:hover {
+ @extend %box-neat;
+ background: $c-bg-zebra;
+ }
+ &::after {
+ content: '▼';
+ }
+ }
+ > *:not(legend) {
+ display: none;
+ }
+}

ui/common/css/form/_form3.scss

@@ -1,5 +1,6 @@
 @import 'cmn-toggle';
 @import '../component/flash';
+@import '../component/toggle-box';
 
 .form-group {
  margin-bottom: 3rem;
@@ -113,49 +114,3 @@ textarea.form-control {
  border: 0;
  border-top: $border;
 }
-
-.form-fieldset {
- @extend %box-radius;
- border: $border;
- background: $c-bg-zebra;
- margin: 1rem 0 3rem 0;
- padding: 2rem 2rem 0 2rem;
-
- legend {
- @extend %box-radius;
- background: $c-bg-zebra;
- padding: 0.5em 1.5em;
- text-align: right;
- font-size: 1.2em;
- user-select: none;
- }
-}
-.form-fieldset--toggle {
- legend {
- border-top: $border;
- cursor: pointer;
- &::after {
- content: '▲';
- margin-left: 1ch;
- }
- }
-}
-.form-fieldset--toggle-off {
- background: none;
- border-width: 1px 0 0 0;
- padding-top: 0;
- legend {
- border: $border;
- background: none;
- &:hover {
- @extend %box-neat;
- background: $c-bg-zebra;
- }
- &::after {
- content: '▼';
- }
- }
- > *:not(legend) {
- display: none;
- }
-}

ui/site/src/boot.ts

@@ -114,8 +114,8 @@ export function boot() {
  el.setAttribute('content', el.getAttribute('content') + ',maximum-scale=1.0');
  }
 
- $('.form-fieldset--toggle').each(function (this: HTMLFieldSetElement) {
- const toggle = () => this.classList.toggle('form-fieldset--toggle-off');
+ $('.toggle-box--toggle').each(function (this: HTMLFieldSetElement) {
+ const toggle = () => this.classList.toggle('toggle-box--toggle-off');
  $(this)
  .children('legend')
  .on('click', toggle)