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