Small improvements on spoilers

This commit is contained in:
Georges Dupéron 2017-05-30 23:13:41 +02:00
parent 51c7b9aed8
commit 1fc9c43010

View File

@ -1,4 +1,4 @@
#lang at-exp racket #lang racket
(provide spoiler-wrapper-collapsed (provide spoiler-wrapper-collapsed
spoiler-default spoiler-default
@ -8,14 +8,14 @@
spoiler1 spoiler1
spler) spler)
@(require scribble/manual (require scribble/manual
scribble/core scribble/core
scribble/decode scribble/decode
scribble/html-properties scribble/html-properties
hyper-literate hyper-literate
(for-syntax syntax/parse)) (for-syntax syntax/parse))
@(define spoiler-css (define spoiler-css
#" #"
.spoiler-wrapper-expanded .spoiler-default, .spoiler-wrapper-expanded .spoiler-default,
.spoiler-wrapper-expanded .spoiler-button-default-to-alt { .spoiler-wrapper-expanded .spoiler-button-default-to-alt {
@ -32,10 +32,10 @@
} }
") ")
@(define spoiler-js (define spoiler-js
(string->bytes/utf-8 (string->bytes/utf-8
@string-append|{ #<<EOJS
function toggleSpoiler(e) { function toggleSpoiler(e, doExpand) {
var expanded = function(className) { var expanded = function(className) {
return className.match(/\bspoiler-wrapper-expanded\b/); return className.match(/\bspoiler-wrapper-expanded\b/);
}; };
@ -48,50 +48,55 @@
var wrapper = e; var wrapper = e;
while (e != document && e != null && ! found(e.className)) { while (e != document && e != null && ! found(e.className)) {
e = e.parentNode; e = e.parentNode;
} }
console.log(e); e.className = e
if (expanded(e.className)) { .className
e.className = e.className.replace(/\bspoiler-wrapper-expanded\b/, .replace(/ */g, " ")
'spoiler-wrapper-collapsed'); .replace(/\bspoiler-wrapper-expanded\b/, '')
.replace(/\bspoiler-wrapper-collapsed\b/, '');
if (doExpand) {
e.className = e.className + " spoiler-wrapper-expanded";
} else { } else {
e.className = e.className.replace(/\bspoiler-wrapper-collapsed\b/, e.className = e.className + " spoiler-wrapper-collapsed";
'spoiler-wrapper-expanded'); }
if (e.preventDefault) { e.preventDefault(); }
return false;
} }
} EOJS
}|)) ))
@(define-syntax-rule (def-style name) (define-syntax-rule (def-style name)
(define name (define name
(style (symbol->string 'name) (style (symbol->string 'name)
(list (css-addition spoiler-css) (list (css-addition spoiler-css)
(js-addition spoiler-js) (js-addition spoiler-js)
(alt-tag "div"))))) (alt-tag "div")))))
@(def-style spoiler-wrapper-collapsed) (def-style spoiler-wrapper-collapsed)
@(def-style spoiler-default) (def-style spoiler-default)
@(def-style spoiler-alt) (def-style spoiler-alt)
@(define (spoiler-button-default-to-alt txt) (define (spoiler-button-default-to-alt txt)
(hyperlink (hyperlink
#:style (style "spoiler-button-default-to-alt" #:style (style "spoiler-button-default-to-alt"
(list (css-addition spoiler-css) (list (css-addition spoiler-css)
(js-addition spoiler-js) (js-addition spoiler-js)
(attributes (attributes
'([onclick . "toggleSpoiler(this);"])))) '([onclick . "return toggleSpoiler(this, true);"]))))
"#" "#"
txt)) txt))
@(define (spoiler-button-alt-to-default txt) (define (spoiler-button-alt-to-default txt)
(hyperlink (hyperlink
#:style (style "spoiler-button-alt-to-default" #:style (style "spoiler-button-alt-to-default"
(list (css-addition spoiler-css) (list (css-addition spoiler-css)
(js-addition spoiler-js) (js-addition spoiler-js)
(attributes (attributes
'([onclick . "toggleSpoiler(this);"])))) '([onclick . "return toggleSpoiler(this, false);"]))))
"#" "#"
txt)) txt))
@(define (spoiler1 default button-default→alt button-alt→default alternate) (define (spoiler1 default button-default→alt button-alt→default alternate)
(nested-flow spoiler-wrapper-collapsed (nested-flow spoiler-wrapper-collapsed
(list (list
(paragraph (style #f '()) (paragraph (style #f '())
@ -103,32 +108,25 @@
(nested-flow spoiler-alt (nested-flow spoiler-alt
(decode-flow alternate))))) (decode-flow alternate)))))
@(define-syntax spler (define-syntax spler
(syntax-parser (syntax-parser
[(_ name default ... #:expanded expanded ...) [(_ name default ... #:expanded expanded ...)
#'(begin #'(begin
@chunk[#:save-as ck1 (chunk #:save-as ck1
#:display-only #:display-only
#:button #:button
(list " " (smaller (spoiler-button-default-to-alt "expand"))) (list " " (smaller (spoiler-button-default-to-alt "expand")))
name name
default ...] default ...)
@chunk[#:save-as ck2 (chunk #:save-as ck2
#:button #:button
(list " " (smaller (spoiler-button-alt-to-default "collapse"))) (list " " (smaller (spoiler-button-alt-to-default "collapse")))
name name
expanded ...] expanded ...)
(nested-flow spoiler-wrapper-collapsed (nested-flow spoiler-wrapper-collapsed
(list (nested-flow spoiler-default (list (nested-flow spoiler-default
(decode-flow (ck1))) (decode-flow (ck1)))
(nested-flow spoiler-alt (nested-flow spoiler-alt
(decode-flow (ck2))))) (decode-flow (ck2))))))]))
;@spoiler1[@(ck1)
; "expand"
; "collapse"
; @(ck2)]
)]))