Small improvements on spoilers
This commit is contained in:
parent
51c7b9aed8
commit
1fc9c43010
174
spoiler1.rkt
174
spoiler1.rkt
|
@ -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)]
|
|
||||||
|
|
||||||
)]))
|
|
Loading…
Reference in New Issue
Block a user