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,15 +8,15 @@
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 {
display:none; display:none;
@ -32,103 +32,101 @@
} }
") ")
@(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/);
}; };
var collapsed = function(className) { var collapsed = function(className) {
return className.match(/\bspoiler-wrapper-collapsed\b/); return className.match(/\bspoiler-wrapper-collapsed\b/);
}; };
var found = function(className) { var found = function(className) {
return expanded(className) || collapsed(className); return expanded(className) || collapsed(className);
}; };
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;
}
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 + " spoiler-wrapper-collapsed";
}
if (e.preventDefault) { e.preventDefault(); }
return false;
} }
console.log(e); EOJS
if (expanded(e.className)) { ))
e.className = e.className.replace(/\bspoiler-wrapper-expanded\b/,
'spoiler-wrapper-collapsed');
} else {
e.className = e.className.replace(/\bspoiler-wrapper-collapsed\b/,
'spoiler-wrapper-expanded');
}
}
}|))
@(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 '())
(spoiler-button-default-to-alt button-default→alt)) (spoiler-button-default-to-alt button-default→alt))
(nested-flow spoiler-default (nested-flow spoiler-default
(decode-flow default)) (decode-flow default))
(paragraph (style #f '()) (paragraph (style #f '())
(spoiler-button-alt-to-default button-alt→default)) (spoiler-button-alt-to-default button-alt→default))
(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)]
)]))