add flipcard feature into ox-reveal

2021-01-23 17:02:33 +01:00
parent 79a9cca457
commit 7921df18ac
5 changed files with 187 additions and 17 deletions
--- 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.


-<a id="org6c8d5be"></a>
+<a id="org5ff850e"></a>

 # Requirements

@@ -33,7 +33,7 @@ a bunch of online resources.
        `~/.emacs.d/init.el`)


-<a id="org59860be"></a>
+<a id="org0e5b75a"></a>

 # Installation

@@ -42,7 +42,7 @@ Install into `~/.config/emacs` (must be empty)
    git clone http://gogs.weseng.de/daniel/emacs.git ~/.config/emacs


-<a id="org86a7e80"></a>
+<a id="org9907e5a"></a>

 # Key bindings and functions

@@ -170,7 +170,7 @@ Install into `~/.config/emacs` (must be empty)
 <tr>
 <td class="org-left">C-c C-x \</td>
 <td class="org-left">org-toggle-pretty-entries</td>
-<td class="org-left">e. g. displays &plusmn; as ±</td>
+<td class="org-left">e. g. displays <code>\pm</code> as ±</td>
 </tr>


@@ -321,7 +321,7 @@ Install into `~/.config/emacs` (must be empty)
 </table>


-<a id="org5cf1ccd"></a>
+<a id="orgccb3d6a"></a>

 # Packages

@@ -330,7 +330,7 @@ Install into `~/.config/emacs` (must be empty)
    colors with the color they represent as background.


-<a id="org2a1da37"></a>
+<a id="orgdd0b988"></a>

 # 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.


-<a id="orgf579e32"></a>
+<a id="org2fbb7be"></a>

 # Errors


-<a id="orgf9bbcb1"></a>
+<a id="orgd3ccf34"></a>

 ## failed execution of bibtex2html

--- 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                                                     |
--- a/scripts/flipcard/flipcard.css
+++ 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;
+}
--- a/scripts/flipcard/flipcard.js
+++ 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();
--- 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 "<script>" (org-reveal--read-file (concat (expand-file-name user-emacs-directory) "scripts/flipcard/flipcard.js")) "\n</script>")))  ;; 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 "<script>\n"
+                                  (org-reveal--read-file
+                                   (concat local-root-path "plugin/" (cdr p)))
+                                  "\n</script>")
+                        (format "<script src=\"%splugin/%s\"></script>\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)