From 7921df18ac9c6c76dd4f1d895f164932b5497adc Mon Sep 17 00:00:00 2001 From: Daniel Weschke Date: Sat, 23 Jan 2021 17:02:33 +0100 Subject: [PATCH] add flipcard feature into ox-reveal --- README.md | 30 +++++------ README.org | 2 +- scripts/flipcard/flipcard.css | 93 +++++++++++++++++++++++++++++++++++ scripts/flipcard/flipcard.js | 31 ++++++++++++ settings/org-settings.el | 48 +++++++++++++++++- 5 files changed, 187 insertions(+), 17 deletions(-) create mode 100755 scripts/flipcard/flipcard.css create mode 100644 scripts/flipcard/flipcard.js diff --git a/README.md b/README.md index ee44011d..449b21f6 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,19 @@ # Table of Contents -1. [Requirements](#org6c8d5be) -2. [Installation](#org59860be) -3. [Key bindings and functions](#org86a7e80) -4. [Packages](#org5cf1ccd) -5. [Information](#org2a1da37) -6. [Errors](#orgf579e32) - 1. [failed execution of bibtex2html](#orgf9bbcb1) +1. [Requirements](#org5ff850e) +2. [Installation](#org0e5b75a) +3. [Key bindings and functions](#org9907e5a) +4. [Packages](#orgccb3d6a) +5. [Information](#orgdd0b988) +6. [Errors](#org2fbb7be) + 1. [failed execution of bibtex2html](#orgd3ccf34) This is an ongoing evolution of Emacs configuration files, inspired by a bunch of online resources. - + # Requirements @@ -33,7 +33,7 @@ a bunch of online resources. `~/.emacs.d/init.el`) - + # Installation @@ -42,7 +42,7 @@ Install into `~/.config/emacs` (must be empty) git clone http://gogs.weseng.de/daniel/emacs.git ~/.config/emacs - + # Key bindings and functions @@ -170,7 +170,7 @@ Install into `~/.config/emacs` (must be empty) C-c C-x \ org-toggle-pretty-entries -e. g. displays ± as ± +e. g. displays \pm as ± @@ -321,7 +321,7 @@ Install into `~/.config/emacs` (must be empty) - + # Packages @@ -330,7 +330,7 @@ Install into `~/.config/emacs` (must be empty) colors with the color they represent as background. - + # Information @@ -340,12 +340,12 @@ but interlocks to prevent the simultaneous editing of the same file. See [Interlocking](https://www.emacswiki.org/info-ref?find=Interlocking) in the [EmacsManual](https://www.emacswiki.org/emacs/EmacsManual) for details. - + # Errors - + ## failed execution of bibtex2html diff --git a/README.org b/README.org index eca9f2d3..ed8fb428 100644 --- a/README.org +++ b/README.org @@ -43,7 +43,7 @@ git clone http://gogs.weseng.de/daniel/emacs.git ~/.config/emacs | C-u C-u C-c \vert | org-table-create-or-convert-from-region | convert using TAB | | C-u N C-c \vert | org-table-create-or-convert-from-region | convert using N spaces | | C-u REGEX C-c \vert | org-table-create-or-convert-from-region | convert using regex to match seperator | -| C-c C-x \ | org-toggle-pretty-entries | e. g. displays \pm as ± | +| C-c C-x \ | org-toggle-pretty-entries | e. g. displays =\pm= as ± | | | | | | Org table | | | | S-right | org-shiftright | move a single cell right | diff --git a/scripts/flipcard/flipcard.css b/scripts/flipcard/flipcard.css new file mode 100755 index 00000000..9a82493c --- /dev/null +++ b/scripts/flipcard/flipcard.css @@ -0,0 +1,93 @@ +.reveal .slides section > section { + height: 95%; +} + +.reveal li { margin: 0; padding: 0.1em} + +.reveal h2 { display: none; } + +/* THE MAINCONTAINER HOLDS EVERYTHING */ + +.fc-maincontainer { + position: absolute; + width: 350px; + height: 460px; + background: none; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +/* THE CARD HOLDS THE FRONT AND BACK FACES */ +.fc-thecard{ + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 20px; + transform-style: preserve-3d; + transition: all 0.8s ease; +} + +.fc-header p { + font-size: 2.0em !important; + margin: 0 0 20px 0; + color: #fff; + font-family: "Source Sans Pro", Helvetica, sans-serif; + font-weight: 600; + line-height: 1.2; + letter-spacing: normal; + text-transform: uppercase; + text-shadow: none; + word-wrap: break-word; +} + +.fc-flip { + background-color: #4d7d43; + color: #7bdb96; + font-style: italic; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + padding: 0.25em 0; +} + +/* THE PSUEDO CLASS CONTROLS THE FLIP ON MOUSEOVER AND MOUSEOUT */ +/* .fc-thecard:hover{ */ +/* /\* transform: rotateY(180deg); *\/ */ +/* } */ + +/* THE FRONT FACE OF THE CARD, WHICH SHOWS BY DEFAULT */ + .fc-thefront{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 20px; + backface-visibility: hidden; + overflow: hidden; + /* background: #ffc728; */ + background: #7bdb96; + color: #000; + padding: 30px; +} + +/* THE BACK FACE OF THE CARD, WHICH SHOWS ON MOUSEOVER */ +.fc-theback{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 20px; + backface-visibility: hidden; + overflow: hidden; + background: #dba57b; + color: #333; + text-align: center; + transform: rotateY(180deg); + padding: 30px; +} diff --git a/scripts/flipcard/flipcard.js b/scripts/flipcard/flipcard.js new file mode 100644 index 00000000..5ca6c397 --- /dev/null +++ b/scripts/flipcard/flipcard.js @@ -0,0 +1,31 @@ +function flipcard_main() { + var cardFront = document.getElementsByClassName("fc-thefront"); + var i; + var flip; + for (i = 0; i < cardFront.length; i++) { + flip = document.createElement("div"); + flip.appendChild(document.createTextNode("flip")); + flip.className = "fc-flip"; + flip.addEventListener("mouseover", event => { + var flip = event.target; + var front = flip.parentElement; + var card = front.parentElement; + card.style.transform = "rotateY(180deg)"; + }); + cardFront[i].appendChild(flip); + }; + + var cardBack = document.getElementsByClassName("fc-theback"); + var i; + for (i = 0; i < cardBack.length; i++) { + cardBack[i].addEventListener("mouseleave", flipcard_mouseLeave, true); + } +}; +function flipcard_mouseLeave(event) { + if (event.target.className == "fc-theback") { + var back = event.target; + var card = back.parentElement; + card.style.transform = "rotateY(0deg)"; + } +}; +flipcard_main(); diff --git a/settings/org-settings.el b/settings/org-settings.el index aa697f2e..145234b8 100644 --- a/settings/org-settings.el +++ b/settings/org-settings.el @@ -969,8 +969,54 @@ used as a communication channel." (use-package ox-reveal :defer t ;; will be loaded via `org-export-backends' see above inside `org' :config + ;; #+REVEAL_EXTRA_CSS: + (setq org-reveal-extra-css (concat "file://" (expand-file-name user-emacs-directory) "scripts/flipcard/flipcard.css")) ;; multiple files seperated with \n + ;; #+REVEAL_POSTAMBLE: + (setq org-reveal-postamble (replace-regexp-in-string "\n" "" (concat ""))) ;; only one line! (setq org-reveal-root (concat "file://" (expand-file-name user-emacs-directory) "scripts/reveal.js")) - (setq org-reveal-single-file t)) + (setq org-reveal-single-file t) + ;; overwrite to implement `org-reveal-single-file' (:reveal-single-file) + ;; used in `org-reveal-scripts' as reveal-4-plugin + (defun org-reveal-plugin-scripts-4 (info) + "Return scripts for initializing reveal.js 4.x builtin scripts" + (let ((plugins (org-reveal--get-plugins info))) + (if (not (null plugins)) + ;; Generate plugin scripts + (let* ((available-plugins + '(highlight ("RevealHighlight" . "highlight/highlight.js") + markdown ("RevealMarkdown" . "markdown/markdown.js") + search ("RevealSearch" . "search/search.js") + notes ("RevealNotes" . "notes/notes.js") + math ("RevealMath" . "math/math.js") + zoom ("RevealZoom" . "zoom/zoom.js"))) + (plugin-info (seq-filter 'identity + (seq-map (lambda (p) + (plist-get available-plugins p)) + plugins)))) + (if (not (null plugin-info)) + (cons + ;; Plugin initialization script + (let* ((root-path (file-name-as-directory (plist-get info :reveal-root))) ;; changed + (local-root-path (org-reveal--file-url-to-path root-path)) ;; changed + (in-single-file (plist-get info :reveal-single-file))) ;; changed + (mapconcat + (lambda (p) + (if in-single-file + (concat "") + (format "\n" root-path (cdr p)))) + plugin-info + "")) + ;; Reveal initialization for plugins + (format "plugins: [%s]" + (mapconcat #'car plugin-info ","))) + ;; No available plugin info found. Perhaps wrong plugin + ;; names are given + (cons nil nil))) + ;; No plugins, return empty string + (cons nil nil))))) (use-package org-drill ;; requires persist https://elpa.gnu.org/packages/persist.html :commands org-drill)