mirror of https://github.com/yjwen/org-reveal.git
Add iframe support for reveal_background
When iframe is being used as the background, the slide content will be put inside a new dedicated division. Other background options (reveal_background, reveal_background_size, reveal_background_opacity, ...) can be used to configure this new division.
This commit is contained in:
Tai Dinh
parent
ea8b502170
commit
63c043f7b7
63
Readme.org
63
Readme.org
|
|
@ -85,8 +85,9 @@
|
|||
- [[Javascript Src Block][Javascript Src Block]]([[https://github.com/yjwen/org-reveal#javascript-src-block][gh]])
|
||||
- [[Perl Src Block (not klipsified)][Perl Src Block (not klipsified)]]([[https://github.com/yjwen/org-reveal#perl-src-block-(not-klipsified)][gh]])
|
||||
- [[Properties for Sub-headings][Properties for Sub-headings]]([[https://github.com/yjwen/org-reveal#properties-for-sub-headings][gh]])
|
||||
- [[My org-reveal presentation among many within the same Org-mode file][My org-reveal presentation among many within the same Org-mode file]]([[https://github.com/yjwen/org-reveal#my-org-reveal-presentation-among-many-within-the-same-org-mode-file][gh]])
|
||||
- [[Customize iframe background slide][Customize iframe background slide]]([[https://github.com/yjwen/org-reveal#customize-iframe-background-slide][gh]])
|
||||
- [[Thanks][Thanks]]([[https://github.com/yjwen/org-reveal#thanks][gh]])
|
||||
|
||||
* Reveal.js and Org-Reveal
|
||||
|
||||
- *Reveal.js* is a tool for creating good-looking HTML presentations,
|
||||
|
|
@ -320,8 +321,8 @@ Available transitions are: default|cube|page|concave|zoom|linear|fade|none.
|
|||
|
||||
** Set Slide Background
|
||||
|
||||
Slide background can be set to a color, an image or a repeating image
|
||||
array by setting heading properties.
|
||||
Slide background can be set to a color, an image, a repeating image
|
||||
array or an iframe by setting heading properties.
|
||||
|
||||
*** Single Colored Background
|
||||
:PROPERTIES:
|
||||
|
|
@ -379,6 +380,25 @@ Available transitions are: default|cube|page|concave|zoom|linear|fade|none.
|
|||
:END:
|
||||
#+END_SRC
|
||||
|
||||
*** Iframe background
|
||||
:PROPERTIES:
|
||||
:reveal_background_iframe: https://hakim.se
|
||||
:reveal_background: rgb(0,0,0)
|
||||
:reveal_background_opacity: 0.8
|
||||
:END:
|
||||
|
||||
When =iframe= is being used as slide background, the content of the slide will
|
||||
be put inside a dedicated division. The other background options can be used to
|
||||
configure this new division. The =reveal_background= supports both color and
|
||||
image as a normal slide.
|
||||
#+BEGIN_SRC org
|
||||
:PROPERTIES:
|
||||
:reveal_background_iframe: https://hakim.se
|
||||
:reveal_background: rgb(0,0,0)
|
||||
:reveal_background_opacity: 0.8
|
||||
:END:
|
||||
#+END_SRC
|
||||
|
||||
*** Title Slide Background Image
|
||||
|
||||
To set the title slide's background image, please specify the
|
||||
|
|
@ -908,19 +928,34 @@ to properties of sub-headings like:
|
|||
This way, each org-reveal presentation can have its own settings. An example heading with corresponding settings would look like:
|
||||
|
||||
#+BEGIN_SRC org
|
||||
* My org-reveal presentation among many within the same Org-mode file
|
||||
:PROPERTIES:
|
||||
:reveal_overview: t
|
||||
:EXPORT_AUTHOR: Test Author
|
||||
:EXPORT_DATE: 2018-01-01
|
||||
:EXPORT_TITLE: My Title
|
||||
:EXPORT_EMAIL: Test@example.com
|
||||
:EXPORT_OPTIONS: num:nil toc:nil reveal_keyboard:t reveal_overview:t
|
||||
:EXPORT_REVEAL_HLEVEL: 3
|
||||
:EXPORT_REVEAL_MARGIN: 200
|
||||
:END:
|
||||
,* My org-reveal presentation among many within the same Org-mode file
|
||||
:PROPERTIES:
|
||||
:reveal_overview: t
|
||||
:EXPORT_AUTHOR: Test Author
|
||||
:EXPORT_DATE: 2018-01-01
|
||||
:EXPORT_TITLE: My Title
|
||||
:EXPORT_EMAIL: Test@example.com
|
||||
:EXPORT_OPTIONS: num:nil toc:nil reveal_keyboard:t reveal_overview:t
|
||||
:EXPORT_REVEAL_HLEVEL: 3
|
||||
:EXPORT_REVEAL_MARGIN: 200
|
||||
:END:
|
||||
#+END_SRC
|
||||
|
||||
** Customize iframe background slide
|
||||
:PROPERTIES:
|
||||
:reveal_background_iframe: https://hakim.se
|
||||
:reveal_background: rgb(0,0,0)
|
||||
:reveal_background_opacity: 0.8
|
||||
:reveal_background_position: absolute
|
||||
:reveal_extra_attr: height: 200px; bottom: -700px; border-radius: 10px; padding: 20px
|
||||
:END:
|
||||
#+REVEAL_HTML: <smaller>
|
||||
#+BEGIN_SRC org
|
||||
:reveal_background_position: absolute
|
||||
:reveal_extra_attr: height: 200px; bottom: -700px; border-radius: 10px; padding: 20px
|
||||
#+END_SRC
|
||||
#+REVEAL_HTML: </smaller>
|
||||
|
||||
* Thanks
|
||||
|
||||
Courtesy to:
|
||||
|
|
|
|||
96
ox-reveal.el
96
ox-reveal.el
|
|
@ -384,6 +384,13 @@ exporter."
|
|||
(format "<aside class=\"notes\">\n%s\n</aside>\n" contents))
|
||||
(org-html-special-block special-block contents info))))
|
||||
|
||||
(defun org-reveal-is-background-img (info)
|
||||
"Check if a background string is an image format or not."
|
||||
(and info
|
||||
(string-match-p
|
||||
"\\(\\(^\\(http\\|https\\|file\\)://\\)\\|\\(\\\.\\(svg\\|png\\|jpg\\|jpeg\\|gif\\|bmp\\)\\([?#\\\s]\\|$\\)\\)\\)"
|
||||
info)))
|
||||
|
||||
(defun org-reveal-slide-section-tag (headline info for-split)
|
||||
"Generate the <section> tag for a slide."
|
||||
(let* ((preferred-id (or (org-element-property :CUSTOM_ID headline)
|
||||
|
|
@ -393,30 +400,65 @@ exporter."
|
|||
(default-slide-background-position (plist-get info :reveal-default-slide-background-position))
|
||||
(default-slide-background-repeat (plist-get info :reveal-default-slide-background-repeat))
|
||||
(default-slide-background-transition (plist-get info :reveal-default-slide-background-transition))
|
||||
)
|
||||
(format "<section %s%s>\n"
|
||||
(org-html--make-attribute-string
|
||||
`(:id ,(concat org-reveal-slide-id-head
|
||||
preferred-id
|
||||
(if for-split "-split" ""))
|
||||
:class ,(org-element-property :HTML_CONTAINER_CLASS headline)
|
||||
:data-transition ,(org-element-property :REVEAL_DATA_TRANSITION headline)
|
||||
:data-state ,(org-element-property :REVEAL_DATA_STATE headline)
|
||||
:data-background ,(or (org-element-property :REVEAL_BACKGROUND headline)
|
||||
default-slide-background)
|
||||
:data-background-size ,(or (org-element-property :REVEAL_BACKGROUND_SIZE headline)
|
||||
default-slide-background-size)
|
||||
:data-background-position ,(or (org-element-property :REVEAL_BACKGROUND_POSITION headline)
|
||||
default-slide-background-position)
|
||||
:data-background-repeat ,(or (org-element-property :REVEAL_BACKGROUND_REPEAT headline)
|
||||
default-slide-background-repeat)
|
||||
:data-background-transition ,(or (org-element-property :REVEAL_BACKGROUND_TRANS headline)
|
||||
default-slide-background-transition)
|
||||
:data-background-opacity
|
||||
,(or (org-element-property :REVEAL_BACKGROUND_OPACITY headline)
|
||||
(plist-get info :reveal-default-slide-background-opacity))))
|
||||
(let ((extra-attrs (org-element-property :REVEAL_EXTRA_ATTR headline)))
|
||||
(if-format " %s" extra-attrs)))))
|
||||
(slide-background-iframe (org-element-property :REVEAL_BACKGROUND_IFRAME headline))
|
||||
)
|
||||
(if slide-background-iframe
|
||||
;; for iframe, we will wrap the slide in a new div
|
||||
;; all the background configuration of the original slide will be used for this new div
|
||||
(format "<section %s data-background-interactive>\n<div %s>\n"
|
||||
(org-html--make-attribute-string
|
||||
`(:id ,(concat org-reveal-slide-id-head
|
||||
preferred-id
|
||||
(if for-split "-split" ""))
|
||||
:class ,(org-element-property :HTML_CONTAINER_CLASS headline)
|
||||
:data-transition ,(org-element-property :REVEAL_DATA_TRANSITION headline)
|
||||
:data-state ,(org-element-property :REVEAL_DATA_STATE headline)
|
||||
:data-background-iframe ,slide-background-iframe))
|
||||
(concat
|
||||
"style=\""
|
||||
(let ((attr (or (org-element-property :REVEAL_BACKGROUND headline)
|
||||
default-slide-background)))
|
||||
(if (org-reveal-is-background-img attr)
|
||||
(format "background-image: url('%s'); " attr)
|
||||
(if-format "background: %s; " attr)))
|
||||
(let ((attr (or (org-element-property :REVEAL_BACKGROUND_REPEAT headline)
|
||||
default-slide-background-repeat)))
|
||||
(if-format "background-repeat: %s; " attr))
|
||||
(let ((attr (or (org-element-property :REVEAL_BACKGROUND_SIZE headline)
|
||||
default-slide-background)))
|
||||
(if-format "background-size: %s; " attr))
|
||||
(let ((attr (or (org-element-property :REVEAL_BACKGROUND_POSITION headline)
|
||||
default-slide-background)))
|
||||
(if-format "position: %s; " attr))
|
||||
(let ((attr (or (org-element-property :REVEAL_BACKGROUND_OPACITY headline)
|
||||
default-slide-background)))
|
||||
(if-format "opacity: %s; " attr))
|
||||
(let ((extra-attrs (org-element-property :REVEAL_EXTRA_ATTR headline)))
|
||||
(if-format "%s;" extra-attrs))
|
||||
"\""))
|
||||
(format "<section %s%s>\n"
|
||||
(org-html--make-attribute-string
|
||||
`(:id ,(concat org-reveal-slide-id-head
|
||||
preferred-id
|
||||
(if for-split "-split" ""))
|
||||
:class ,(org-element-property :HTML_CONTAINER_CLASS headline)
|
||||
:data-transition ,(org-element-property :REVEAL_DATA_TRANSITION headline)
|
||||
:data-state ,(org-element-property :REVEAL_DATA_STATE headline)
|
||||
:data-background ,(or (org-element-property :REVEAL_BACKGROUND headline)
|
||||
default-slide-background)
|
||||
:data-background-size ,(or (org-element-property :REVEAL_BACKGROUND_SIZE headline)
|
||||
default-slide-background-size)
|
||||
:data-background-position ,(or (org-element-property :REVEAL_BACKGROUND_POSITION headline)
|
||||
default-slide-background-position)
|
||||
:data-background-repeat ,(or (org-element-property :REVEAL_BACKGROUND_REPEAT headline)
|
||||
default-slide-background-repeat)
|
||||
:data-background-transition ,(or (org-element-property :REVEAL_BACKGROUND_TRANS headline)
|
||||
default-slide-background-transition)
|
||||
:data-background-opacity
|
||||
,(or (org-element-property :REVEAL_BACKGROUND_OPACITY headline)
|
||||
(plist-get info :reveal-default-slide-background-opacity))))
|
||||
(let ((extra-attrs (org-element-property :REVEAL_EXTRA_ATTR headline)))
|
||||
(if-format " %s" extra-attrs))))))
|
||||
|
||||
;; Copied from org-html-headline and modified to embed org-reveal
|
||||
;; specific attributes.
|
||||
|
|
@ -482,7 +524,11 @@ holding contextual information."
|
|||
(concat
|
||||
;; Slide footer if any
|
||||
footer-div
|
||||
"</section>\n</section>\n")))))))
|
||||
(if (org-element-property :REVEAL_BACKGROUND_IFRAME headline)
|
||||
"</div>")
|
||||
"</section>\n</section>\n")
|
||||
(if (org-element-property :REVEAL_BACKGROUND_IFRAME headline)
|
||||
"</div>")))))))
|
||||
|
||||
(defgroup org-export-reveal nil
|
||||
"Options for exporting Orgmode files to reveal.js HTML pressentations."
|
||||
|
|
|
|||
Loading…
Reference in New Issue