Themed post content (tables, images, figures, code)

Added theming for tables, inline images, and figures. Inline images are
specified using the markdown syntax "![link text](link_href)" somewhere
within a paragraph. When a link is specified with the same syntax given
previously, Pandoc will generate it as a figure. Figures are displayed
across the whole width of the post and inline-images floated to the
right. Some javascript was added to js/default.js to enable the ability
to click to toggle fullscreen on images and figures.

Code blocks were previously themed but the styling needed to be updated
due to how an update to how pandoc generates code blocks.

Signed-off-by: Collin J. Doering <collin.doering@rekahsoft.ca>

clay/PageComponents.hs

@@ -38,6 +38,10 @@ pageComponents = do
   businessCard
   tagPageHeading
   srcCodeBlock
+  postFigures
+  inlinePostImages
+  postTables
+  statusMessages
 
 aPost :: Css
 aPost = do
@@ -159,25 +163,24 @@ tagPageHeading = do
 
 srcCodeBlock :: Css
 srcCodeBlock = do
-  ".code-term" # ".sourceCode" ? do
+  div # ".sourceCode" |> (pre <> table) # ".sourceCode" # ".code-term" ? do
     display block
     backgroundColor "#111"
     color white
     sym borderRadius (px 3)
-    sym2 padding (em 0.5) nil
+    sym padding (em 0.5)
     marginBottom (em 0.75)
     overflow auto
     maxHeight (em 50)
 
-  ".code-term" ** pre |> code # ".sourceCode" ? do
+  div # ".sourceCode" ** pre # ".code-term" |> code <>
+   div # ".sourceCode" |> table # ".code-term" ** code ? do
     backgroundColor inherit
     borderStyle none
+    sym padding nil
 
-  (table # ".sourceCode") <>
-    (tr # ".sourceCode")  <>
-    (td # ".lineNumbers") <>
-    (td # ".sourceCode")  <>
-    (table # ".sourceCode" ** pre) ? do
+  (table <> tr <> td) # ".sourceCode"
+    <> table # ".sourceCode" ** pre ? do
       sym margin nil
       sym padding nil
       border none nil black
@@ -193,41 +196,86 @@ srcCodeBlock = do
   td # ".sourceCode" ?
     paddingLeft (px 5)
 
-  (pre <> code) # ".sourceCode" ** span # ".kw" ? do
-    color "#007020"
-    fontWeight bold
+  (pre <> code) # ".sourceCode" ? do
+    span # ".kw" ? do
+      color "#007020"
+      fontWeight bold
+    span # ".dt" ? color "#902000"
+    span # ".dv" ? color "#40a070"
+    span # ".bn" ? color "#40a070"
+    span # ".fl" ? color "#40a070"
+    span # ".ch" ? color "#4070a0"
+    span # ".st" ? color "#4070a0"
+    span # ".co" ? do
+      color "#60a0b0"
+      fontStyle italic
+    span # ".al" ? do
+      color red
+      fontWeight bold
+    span # ".fu" ? color "#06287e"
+    span # ".er" ? do
+      color red
+      fontWeight bold
 
-  (pre <> code) # ".sourceCode" ** span # ".dt" ?
-    color "#902000"
+postFigures :: Css
+postFigures = do
+  figure ? do
+    border solid (px 1) black
+    sym borderRadius (px 3)
+    clear both
 
-  (pre <> code) # ".sourceCode" ** span # ".dv" ?
-    color "#40a070"
+  figure ? do
+    img <? do
+      display block
+      width (pct 100)
+      borderBottom solid (px 1) black
+      cursor pointer
 
-  (pre <> code) # ".sourceCode" ** span # ".bn" ?
-    color "#40a070"
+    figcaption # ":before" <? do
+      display inlineBlock
+      content $ stringContent "Fig:"
+      paddingRight (em 1)
+      fontWeight bold
 
-  (pre <> code) # ".sourceCode" ** span # ".fl" ?
-    color "#40a070"
+    figcaption <? do
+      sym2 padding nil (em 1)
+      backgroundColor "#B4D1EF"
 
-  (pre <> code) # ".sourceCode" ** span # ".ch" ?
-    color "#4070a0"
+inlinePostImages :: Css
+inlinePostImages = article # ".post" ? do
+  p |> img <? do
+    clear clearRight
+    float floatRight
+    width (pct 30)
+    border solid (px 1) black
+    sym borderRadius (px 3)
+    sym margin (em 1)
+    cursor pointer
 
-  (pre <> code) # ".sourceCode" ** span # ".st" ?
-    color "#4070a0"
+  let fullCss = do
+        width (pct 100)
+        float none
+  p |> img # ":-webkit-full-screen" <? fullCss
+  p |> img # ":-moz-full-screen"    <? fullCss
+  p |> img # ":-ms-full-screen"     <? fullCss
+  p |> img # ":fullscreen"          <? fullCss
 
-  (pre <> code) # ".sourceCode" ** span # ".co" ? do
-    color "#60a0b0"
-    fontStyle italic
+postTables :: Css
+postTables = article # ".post" ? do
+  table <? do
+    margin nil auto (em 1) auto
+    thead ? do
+      backgroundColor "#ACBDEA"
+    tbody <? do
+      tr # ".odd" ? backgroundColor "#DFEAFF"
+      tr # ".even" ? backgroundColor "#E3E3F0"
+    caption ? backgroundColor "#f5f5f5"
 
-  (pre <> code) # ".sourceCode" ** span # ".al" ? do
-    color red
-    fontWeight bold
+  table <? do
+    (th <> td) # ":first-child" ? paddingLeft (px 14)
+    (th <> td) # ":last-child"  ? paddingRight (px 14)
 
-  (pre <> code) # ".sourceCode" ** span # ".fu" ?
-    color "#06287e"
-
-  -- (pre <> code) # ".sourceCode" ** span # ".re"
-
-  (pre <> code) # ".sourceCode" ** span # ".er" ? do
-    color red
-    fontWeight bold
+statusMessages :: Css
+statusMessages = "#status" ? do
+  ".close-button" <? float floatRight
+  ".message" <? marginBottom nil

js/default.js

@@ -216,6 +216,14 @@
                                 }
                             });
 
+                            // Add fullscreen functionality to inline-images and figures
+                            $('article.post p > img').click(function () {
+                                $(this).get(0).toggleFullScreen();
+                            });
+                            $('figure').click(function () {
+                                $(this).children('img').get(0).toggleFullScreen();
+                            });
+
                             // Run current handles onSuccess callback (if it exists)
                             if (handlerCallback.hasOwnProperty('onSuccess') && typeof handlerCallback.onSuccess === 'function') {
                                 handlerCallback.onSuccess();
@@ -281,3 +289,31 @@
 
     page.init(router);
 }(jQuery, MathJax));
+
+// Modified from: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
+function toggleFullScreen() {
+    if (!document.fullscreenElement &&    // alternative standard method
+        !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
+        if (document.documentElement.requestFullscreen) {
+            this.requestFullscreen();
+        } else if (document.documentElement.msRequestFullscreen) {
+            this.msRequestFullscreen();
+        } else if (document.documentElement.mozRequestFullScreen) {
+            this.mozRequestFullScreen();
+        } else if (document.documentElement.webkitRequestFullscreen) {
+            this.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+        }
+    } else {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        }
+    }
+}
+
+Element.prototype.toggleFullScreen = toggleFullScreen;