@webwriter/quiz 1.1.3 → 2.0.0

package/src/widgets/webwriter-choice-item.ts

@@ -1,254 +0,0 @@
-import {css, html, PropertyValues} from "lit"
-import {styleMap} from "lit/directives/style-map.js"
-import {classMap} from "lit/directives/class-map.js"
-import {unsafeStatic} from "lit/static-html.js"
-import {LitElementWw} from "@webwriter/lit"
-import {customElement, property, query} from "lit/decorators.js"
-
-import SlRadio from "@shoelace-style/shoelace/dist/components/radio/radio.component.js"
-import SlCheckbox from "@shoelace-style/shoelace/dist/components/checkbox/checkbox.component.js"
-import SlIcon from "@shoelace-style/shoelace/dist/components/icon/icon.component.js"
-import "@shoelace-style/shoelace/dist/themes/light.css"
-import { keyed } from "lit/directives/keyed.js"
-import IconX from "bootstrap-icons/icons/x.svg"
-import IconCheck from "bootstrap-icons/icons/check.svg"
-
-import LOCALIZE from "../../localization/generated"
-import {msg} from "@lit/localize"
-
-declare global {interface HTMLElementTagNameMap {
-  "webwriter-choice-item": WebwriterChoiceItem;
-}}
-
-@customElement("webwriter-choice-item")
-export class WebwriterChoiceItem extends LitElementWw {
-
-  localize = LOCALIZE
-
-  @property({type: Boolean, attribute: false})
-  accessor showSolution = true
-
-  @property({type: Boolean, attribute: false})
-  accessor active = false
-
-  @property({type: Boolean, attribute: false})
-  accessor valid: true | false | undefined
-
-  // inactive + invalid/no validity -> nothing
-  // active + no validity -> blue circle
-  // inactive/active + valid -> green upper checkmark
-  // active + invalid -> red upper cross
-
-
-  @property({type: String, attribute: true, reflect: true})
-  accessor layout: "list" | "tiles" = "list"
-
-  static scopedElements = {
-    "sl-radio": SlRadio,
-    "sl-checkbox": SlCheckbox,
-    "sl-icon": SlIcon
-  }
-
-  static styles = css`
-
-    :host {
-      width: 100%;
-      position: relative;
-    }
-
-    :host(:not([contenteditable=true]):not([contenteditable=""])) .author-only {
-      display: none;
-    }
-
-    :host(:is([contenteditable=true], [contenteditable=""])) .user-only {
-      display: none;
-    }
-
-    :host(:is([contenteditable=true], [contenteditable=""])) sl-checkbox.valid {
-      --webwriter-control-color-600: var(--sl-color-success-600);
-      --webwriter-control-color-400: var(--sl-color-success-400);
-    }
-
-    sl-checkbox {
-      display: block;
-      width: 100%;
-      &::part(base) {
-        width: 100%;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        cursor: unset;
-      }
-
-      &::part(control) {
-        cursor: pointer;
-        border-radius: var(--webwriter-choice-radius, 2px);
-        border-width: 2px;
-      }
-
-      &::part(control):not(:hover){
-        border-color: var(--sl-color-gray-500);
-      }
-
-      &::part(control):hover {
-        border-color: var(--sl-color-gray-700);
-      }
-
-      &::part(control--checked):not(:hover) {
-        background-color: var(--webwriter-control-color-600, var(--sl-color-primary-600));
-        border-color: var(--sl-color-gray-500);
-      }
-      &::part(control--checked):hover {
-        background-color: var(--webwriter-control-color-400, var(--sl-color-primary-400));
-        border-color: var(--webwriter-control-color-600, var(--sl-color-primary-600));
-      }
-
-      &::part(label) {
-        width: 100%;
-      }
-    }
-
-    .solution {
-      position: absolute;
-      top: -6px;
-      left: -6px;
-      border: 2px solid var(--sl-color-gray-500);
-      border-radius: var(--webwriter-choice-radius, 2px);
-      width: 12px;
-      height: 12px;
-      z-index: 1;
-      color: white;
-
-      &[data-valid] {
-        background: var(--sl-color-success-600);
-      }
-
-      &:not([data-valid]) {
-        background: var(--sl-color-danger-600);
-      }
-    }
-
-    :host([layout=tiles]) {
-      position: relative;
-      overflow: visible !important;
-
-      & ::slotted(:is(picture, audio, video, img, iframe)) {
-        height: 100%;
-        width: 100%;
-      }
-
-      & ::slotted(:not(:is(picture, audio, video, img, iframe))) {
-        margin: 5px !important;
-      }
-
-      sl-checkbox {
-      display: block;
-      &::part(base) {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        cursor: unset;
-        position: static;
-      }
-
-      &::part(control) {
-        position: absolute;
-        bottom: -10px;
-        left: -10px;
-        cursor: pointer;
-        border-radius: var(--webwriter-choice-radius, 2px);
-        z-index: 100;
-        border-color: var(--sl-color-gray-500);
-      }
-
-      &::part(control--checked):not(:hover) {
-        background-color: var(--webwriter-control-color-600, var(--sl-color-primary-600));
-        border-color: var(--sl-color-gray-500);
-      }
-      &::part(control--checked):hover {
-        background-color: var(--webwriter-control-color-400, var(--sl-color-primary-400));
-        border-color: var(--webwriter-control-color-600, var(--sl-color-primary-600));
-      }
-
-      &::part(label) {
-        aspect-ratio: 1;
-        min-width: 125px;
-        max-width: 350px;
-        min-height: 125px;
-        max-height: 350px;
-        overflow: hidden;
-        resize: both;
-        margin-inline-start: 0;
-        overflow-y: auto;
-        scrollbar-width: thin;
-      }
-    }    
-    }
-  `
-
-  handleClick = (e: PointerEvent) => {
-    const checkboxClicked = e.composedPath().some(v => (v as HTMLElement)?.classList?.contains("checkbox__control"))
-    const editable = this.isContentEditable
-    if(editable && !checkboxClicked) {
-      e.preventDefault()
-    }
-    else {
-      e.stopImmediatePropagation()
-    }
-  }
-
-  handleChange = (e: CustomEvent) => {
-    if(this.isContentEditable) {
-      this.valid = !this.valid
-    }
-    else {
-      this.active = !this.active
-    }
-  }
-
-  @query("sl-checkbox")
-  accessor checkbox: SlCheckbox
-
-  observer: MutationObserver
-
-  protected async updated(_changedProperties: PropertyValues) {
-    await this.checkbox.updateComplete
-    const labelEl = this.checkbox.shadowRoot.querySelector(".checkbox__label") as HTMLElement
-
-    if(_changedProperties.has("layout") && this.layout === "list") {
-      this.syncSize(true)
-      this.observer?.disconnect()
-    }
-    else if(_changedProperties.has("layout") && this.layout === "tiles") {
-      this.syncSize()
-      this.observer = new MutationObserver(() => this.syncSize())
-      this.observer.observe(labelEl, {attributeFilter: ["style"], attributes: true})
-    }
-  }
-
-  syncSize(clear=false) {
-    const labelEl = this.checkbox?.shadowRoot.querySelector(".checkbox__label") as HTMLElement
-    if(labelEl && !clear) {
-      this.style.width = labelEl.style.width
-      this.style.height = labelEl.style.height
-    }
-    else if(labelEl && clear) {
-      this.style.width = labelEl.style.width = null
-      this.style.height = labelEl.style.height = null
-    }
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback()
-    this.observer?.disconnect()
-  }
-
-  render() {
-    return keyed(this.layout, html`
-      ${this.showSolution && this.valid !== undefined && (this.active || !this.active && this.valid)? html`<sl-icon class="solution user-only" ?data-valid=${this.valid} src=${this.valid? IconCheck: IconX}></sl-icon>`: null}
-      <sl-checkbox class=${classMap({valid: this.valid, active: this.active})} exportparts="base, control, label" @click=${this.handleClick} @sl-change=${this.handleChange} ?checked=${this.isContentEditable? this.valid: this.active}>
-        <slot part="slot" style=${styleMap({"--ww-placeholder": `"${msg("Option")}"`})}></slot>
-      </sl-checkbox>
-    `)
-  }
-}

package/src/widgets/webwriter-choice.ts

@@ -1,353 +0,0 @@
-import {html, css, PropertyValueMap, TemplateResult, PropertyValues} from "lit"
-import {styleMap} from "lit/directives/style-map.js"
-import {LitElementWw, option, action} from "@webwriter/lit"
-import {customElement, property, queryAssignedElements, query} from "lit/decorators.js"
-
-import SlButton from "@shoelace-style/shoelace/dist/components/button/button.component.js"
-import SlIcon from "@shoelace-style/shoelace/dist/components/icon/icon.component.js"
-import SlRadio from "@shoelace-style/shoelace/dist/components/radio/radio.component.js"
-import SlCheckbox from "@shoelace-style/shoelace/dist/components/checkbox/checkbox.component.js"
-import SlRadioButton from "@shoelace-style/shoelace/dist/components/radio-button/radio-button.component.js"
-import SlRadioGroup from "@shoelace-style/shoelace/dist/components/radio-group/radio-group.component.js"
-
-import IconPlusSquare from "bootstrap-icons/icons/plus-square.svg"
-import IconPlusCircle from "bootstrap-icons/icons/plus-circle.svg"
-import type { WebwriterChoiceItem } from "./webwriter-choice-item.js"
-import "@shoelace-style/shoelace/dist/themes/light.css"
-import MiniMasonry from "minimasonry"
-
-import LOCALIZE from "../../localization/generated"
-import {msg} from "@lit/localize"
-
-
-export function shuffle<T>(a: T[]) {
-  for (let i = a.length - 1; i > 0; i--) {
-      const j = Math.floor(Math.random() * (i + 1));
-      [a[i], a[j]] = [a[j], a[i]];
-  }
-  return a;
-}
-
-declare global {interface HTMLElementTagNameMap {
-  "webwriter-choice": WebwriterChoice;
-}}
-
-@customElement("webwriter-choice")
-export class WebwriterChoice extends LitElementWw {
-
-  localize = LOCALIZE
-
-  @property({type: String, attribute: true, reflect: true})
-  @option({
-    type: "select",
-    options: [
-      {value: "truefalse", label: {"en": "True/False"}},
-      {value: "single", label: {"en": "Single Choice"}},
-      {value: "multiple", label: {"en": "Multiple Choice"}},
-    ]
-  })
-  accessor mode: "truefalse" | "single" | "multiple" = "single"
-
-  get layout(): "list" | "tiles" {
-    return this.children?.item(0)?.getAttribute("layout") as any ?? "list"
-  }
-
-  @property({type: String, attribute: true, reflect: true}) //@ts-ignore
-  @option({
-    type: "select",
-    options: [
-      {value: "list", label: {"en": "List"}},
-      {value: "tiles", label: {"en": "Tiles"}}
-    ],
-  })
-  set layout(value) {
-    this.querySelectorAll("webwriter-choice-item").forEach(el => el.setAttribute("layout", value))
-    this.requestUpdate("layout")
-  }
-
-  @property({type: Boolean, attribute: true, reflect: true})
-  @option({
-    type: Boolean,
-    label: {"en": "Random Choice Order", "de": "Zufällige Reihenfolge"}
-  })
-  accessor randomOrder = false
-
-  @property({type: String, attribute: true, reflect: true})
-  @option({
-    type: "select",
-    label: {"de": "Lösung anzeigen", "en": "Show solution"},
-    options: [
-      {value: "right", label: {"en": "Right answers", "de": "Korrekte Antworten"}},
-      {value: "both", label: {"en": "all (indicator)", "de": "Alle (Indikator)"}},
-      {value: "full", label: {"en": "all (conclusive)", "de": "Alle (vollständig)"}}
-    ],
-  })
-  accessor showSolution = "right"
-
-  get solution() {
-    const validIDs = this.items.filter(item => item.valid).map(item => item.id)
-    return validIDs.length? validIDs: undefined
-  }
-
-  set solution(value: string[]) {
-    this.items.forEach(item => value.includes(item.id)? item.valid=true: null)
-  }
-
-  
-  reportSolution() {
-    console.log(this.solution, this.items)
-    let itemActive: boolean = false
-    this.items.forEach(item => {itemActive = itemActive || item.active})
-    if(!itemActive){
-      this.items.forEach(item => {item.valid = undefined; item.active = false; item.style.pointerEvents = "auto"})
-      return
-    }
-    if(!this.solution) {
-      this.items.forEach(item => item.valid = true)
-      return
-    }
-    let wrongSolution: boolean = false
-    this.items.forEach(item => {
-      console.log(!(item.active === item.valid), item.active, item.valid)
-        item.valid = (this.solution ?? []).includes(item.id)
-        if(item.active != item.valid){
-          wrongSolution = true
-          if(this.showSolution != "full"){
-            this.items.forEach(item => {
-              item.showSolution = false
-            })
-          }
-        }
-        item.style.pointerEvents = "none"
-      }
-    )
-    if(wrongSolution){
-      if(this.showSolution != "right"){
-        this.style.backgroundColor = "#F9B5C4"
-      }
-    }else{
-      this.style.backgroundColor = "#BCE194"
-    }
-  }
-
-  reset() {
-    this.items.forEach(item => {item.valid = undefined; item.active = false; item.showSolution = true; item.style.pointerEvents = "auto", this.style.backgroundColor = ""})
-    this.shuffleItems()
-  }
-
-  static scopedElements = {
-    "sl-button": SlButton,
-    "sl-icon": SlIcon,
-    "sl-radio": SlRadio,
-    "sl-checkbox": SlCheckbox,
-    "sl-radio-button": SlRadioButton,
-    "sl-radio-group": SlRadioGroup
-  }
-
-  @query("slot")
-  accessor slotEl: HTMLSlotElement
-  
-  @action()
-  addItem() {
-    /*
-    if(this.ownerDocument.getSelection().containsNode(this, true)) {
-      this.ownerDocument.getSelection().modify("move", "backward", "character")
-    }
-    setTimeout(() => {*/
-      const choiceItem = this.ownerDocument.createElement("webwriter-choice-item")
-      const p = this.ownerDocument.createElement("p")
-      choiceItem.appendChild(p)
-      choiceItem.setAttribute("layout", this.layout)
-      this.appendChild(choiceItem)
-      this.ownerDocument.getSelection().setBaseAndExtent(p, 0, p, 0)
-    //})
-  }
-
-  shuffleItems() {
-    const items = this.slotEl.assignedElements() as WebwriterChoiceItem[]
-    const n = items.length
-    const nums = shuffle([...(new Array(n)).keys()])
-    items.forEach((el, i) => el.style.order = String(nums[i]))
-  }
-
-  connectedCallback(): void {
-    super.connectedCallback()
-    const observer = new MutationObserver(() => {
-      if(!this.contentEditable && this.randomOrder) {
-        this.shuffleItems()
-      }
-    })
-    observer.observe(this, {childList: true})
-  }
-
-  protected firstUpdated(_changedProperties: PropertyValues): void {
-    if(!this.contentEditable && this.randomOrder) {
-      this.shuffleItems()
-    }
-  }
-
-  static styles = css`
-    :host {
-      display: flex !important;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 0.5rem;
-    }
-
-    :host([layout=tiles]) {
-
-      flex-direction: row;
-      flex-wrap: wrap;
-      gap: 15px;
-
-      & ::slotted(*) {
-        aspect-ratio: 1;
-        min-width: 125px;
-        width: 125px;
-        max-width: 350px;
-        min-height: 125px;
-        height: 125px;
-        max-height: 350px;
-        overflow: hidden;
-        resize: both;
-        border: 2px solid var(--sl-color-gray-500);
-        border-radius: 5px;
-      }
-    }
-
-    sl-button::part(label) {
-      padding: 0;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-
-    sl-button::part(base) {
-      border: none;
-      background: transparent;
-    }
-
-    sl-icon {
-      width: 19px;
-      height: 19px;
-    }
-
-    sl-icon::part(svg) {
-      overflow: visible;
-    }
-
-    :host(:not([contenteditable=true]):not([contenteditable=""])) .author-only {
-      display: none !important;
-    }
-
-    #add-option span {
-      margin-inline-start: 0.5em;
-    }
-
-    :host(:is([contenteditable=true], [contenteditable=""])) ::slotted(*) {
-      order: unset !important;
-    }
-
-    :host(:not([mode=multiple])) {
-      --webwriter-choice-radius: 100%;
-    }
-
-    #add-option:not(:hover)::part(base) {
-      color: darkgray;
-    }
-
-    :host([layout=tiles]) #add-option {
-      width: 125px;
-      height: 125px;
-      overflow: hidden;
-      border: 2px solid var(--sl-color-gray-300);
-      border-radius: 5px;
-      padding: 5px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    :host([mode=truefalse]) #add-option {
-      display: none;
-    }    
-  `
-
-  @queryAssignedElements()
-  accessor items: WebwriterChoiceItem[]
-
-  #value: number[] = []
-
-  get value() {
-    return this.#value
-  }
-
-  @property({type: Array, attribute: false})
-  set value(value: number[]) {
-    this.#value = value
-    this.items.forEach((item, i) => {
-      this.isContentEditable
-        ? item.valid = this.#value.includes(i)
-        : item.active = this.#value.includes(i)
-    })
-  }
-
-  private applyValue() {
-    this.#value = this.items
-    .map((item, i) => [item.valid, i] as [boolean, number])
-    .filter(([valid]) => valid)
-    .map(([_, i]) => i)
-  }
-
-  handleControlChange = (e: CustomEvent) => {
-    if(this.mode === "single") {
-      const item = e.target as WebwriterChoiceItem
-      const otherItems = this.items.filter(el => el !== item)
-      otherItems.forEach(el => this.isContentEditable? el.valid = false: el.active = false)
-    }
-    this.applyValue()
-    this.dispatchEvent(new CustomEvent("ww-answer-change", {
-      detail: {value: this.value},
-      bubbles: true,
-      composed: true
-    }))
-  }
-
-  handleSlotChange(e: Event) {
-    this.requestUpdate()
-  }
-
-  protected willUpdate(changed: PropertyValueMap<any>) {
-    if(changed.has("mode") && this.mode === "single") {
-      this.items
-        .filter(el => this.isContentEditable? el.valid: el.active)
-        .slice(1)
-        .forEach(el => this.isContentEditable? el.valid = false: el.active = false)
-    }
-    if(changed.has("mode") && this.mode === "truefalse") {
-      this.items.forEach(el => el.remove())
-    }
-  }
-
-  @query("#items-slot")
-  accessor itemsSlotEl: HTMLSlotElement
-
-  render() {
-    return html`
-      ${this.mode === "truefalse"
-        ? html`
-          <sl-radio-group>
-            <sl-radio-button value="true">${msg("True")}</sl-radio-button>
-            <sl-radio-button value="false">${msg("False")}</sl-radio-button>
-          </sl-radio-group>
-        `
-        : html`
-          <slot id="items-slot" @sl-change=${this.handleControlChange} @slotchange=${this.handleSlotChange}></slot>
-        `
-      }
-      <sl-button size="small" id="add-option" class="author-only" @click=${() => this.addItem()}>
-        <sl-icon src=${this.mode === "multiple"? IconPlusSquare: IconPlusCircle}></sl-icon><span>${msg("Add Option")}</span>
-      </sl-button>
-    `
-  }
-}