From 892a4edeb1c9b9810c8386e639d8e457bbae7e86 Mon Sep 17 00:00:00 2001
From: John MacFarlane <jgm@berkeley.edu>
Date: Mon, 14 Aug 2017 23:05:09 -0700
Subject: Implement multicolumn support for slide formats.

The structure expected is:

    <div class="columns">
      <div class="column" width="40%">
        contents...
      </div>
      <div class="column" width="60%">
        contents...
      </div>
    </div>

Support has been added for beamer and all HTML slide formats.

Closes #1710.

Note:  later we could add a more elegant way to create
this structure in Markdown than to use raw HTML div elements.
This would come for free with a "native div syntax" (#168).
Or we could devise something specific to slides
---
 data/templates/default.dzslides  |  1 +
 data/templates/default.html4     |  1 +
 data/templates/default.html5     |  1 +
 data/templates/default.revealjs  |  1 +
 data/templates/default.s5        |  1 +
 data/templates/default.slideous  |  1 +
 data/templates/default.slidy     |  1 +
 src/Text/Pandoc/Writers/HTML.hs  |  8 +++-
 src/Text/Pandoc/Writers/LaTeX.hs | 23 +++++++++-
 test/command/1710.md             | 91 ++++++++++++++++++++++++++++++++++++++++
 test/lhs-test.html               |  1 +
 test/lhs-test.html+lhs           |  1 +
 test/s5-basic.html               |  1 +
 test/s5-fancy.html               |  1 +
 test/s5-inserts.html             |  1 +
 test/writer.html4                |  1 +
 test/writer.html5                |  1 +
 17 files changed, 133 insertions(+), 3 deletions(-)
 create mode 100644 test/command/1710.md

diff --git a/data/templates/default.dzslides b/data/templates/default.dzslides
index 479d2f06e..e17e23df8 100644
--- a/data/templates/default.dzslides
+++ b/data/templates/default.dzslides
@@ -15,6 +15,7 @@ $endif$
   <style type="text/css">
       code{white-space: pre-wrap;}
       .smallcaps{font-variant: small-caps;}
+      .column{display: inline-block;}
 $if(quotes)$
       q { quotes: "“" "”" "‘" "’"; }
 $endif$
diff --git a/data/templates/default.html4 b/data/templates/default.html4
index 837b20080..37a8dc0d4 100644
--- a/data/templates/default.html4
+++ b/data/templates/default.html4
@@ -18,6 +18,7 @@ $endif$
       code{white-space: pre-wrap;}
       .smallcaps{font-variant: small-caps;}
       .line-block{white-space: pre-line;}
+      .column{display: inline-block;}
 $if(quotes)$
       q { quotes: "“" "”" "‘" "’"; }
 $endif$
diff --git a/data/templates/default.html5 b/data/templates/default.html5
index 203001f21..061966858 100644
--- a/data/templates/default.html5
+++ b/data/templates/default.html5
@@ -18,6 +18,7 @@ $endif$
       code{white-space: pre-wrap;}
       .smallcaps{font-variant: small-caps;}
       .line-block{white-space: pre-line;}
+      .column{display: inline-block;}
 $if(quotes)$
       q { quotes: "“" "”" "‘" "’"; }
 $endif$
diff --git a/data/templates/default.revealjs b/data/templates/default.revealjs
index 4350c80e8..d3504c67f 100644
--- a/data/templates/default.revealjs
+++ b/data/templates/default.revealjs
@@ -21,6 +21,7 @@ $endif$
       code{white-space: pre-wrap;}
       .smallcaps{font-variant: small-caps;}
       .line-block{white-space: pre-line;}
+      .column{display: inline-block;}
 $if(quotes)$
       q { quotes: "“" "”" "‘" "’"; }
 $endif$
diff --git a/data/templates/default.s5 b/data/templates/default.s5
index 1ba3998c3..a94459bb1 100644
--- a/data/templates/default.s5
+++ b/data/templates/default.s5
@@ -19,6 +19,7 @@ $endif$
       code{white-space: pre-wrap;}
       .smallcaps{font-variant: small-caps;}
       .line-block{white-space: pre-line;}
+      .column{display: inline-block;}
 $if(quotes)$
       q { quotes: "“" "”" "‘" "’"; }
 $endif$
diff --git a/data/templates/default.slideous b/data/templates/default.slideous
index 7f6364cfc..359640822 100644
--- a/data/templates/default.slideous
+++ b/data/templates/default.slideous
@@ -20,6 +20,7 @@ $endif$
       code{white-space: pre-wrap;}
       .smallcaps{font-variant: small-caps;}
       .line-block{white-space: pre-line;}
+      .column{display: inline-block;}
 $if(quotes)$
       q { quotes: "“" "”" "‘" "’"; }
 $endif$
diff --git a/data/templates/default.slidy b/data/templates/default.slidy
index 48bb254ae..5922d083c 100644
--- a/data/templates/default.slidy
+++ b/data/templates/default.slidy
@@ -20,6 +20,7 @@ $endif$
       code{white-space: pre-wrap;}
       .smallcaps{font-variant: small-caps;}
       .line-block{white-space: pre-line;}
+      .column{display: inline-block;}
 $if(quotes)$
       q { quotes: "“" "”" "‘" "’"; }
 $endif$
diff --git a/src/Text/Pandoc/Writers/HTML.hs b/src/Text/Pandoc/Writers/HTML.hs
index b899ce96a..c73af4604 100644
--- a/src/Text/Pandoc/Writers/HTML.hs
+++ b/src/Text/Pandoc/Writers/HTML.hs
@@ -640,8 +640,14 @@ blockToHtml opts (LineBlock lns) =
     let lf = preEscapedString "\n"
     htmlLines <- mconcat . intersperse lf <$> mapM (inlineListToHtml opts) lns
     return $ H.div ! A.class_ "line-block" $ htmlLines
-blockToHtml opts (Div attr@(ident, classes, kvs) bs) = do
+blockToHtml opts (Div attr@(ident, classes, kvs') bs) = do
   html5 <- gets stHtml5
+  let kvs = kvs' ++
+        if "column" `elem` classes
+           then let w = fromMaybe "48%" (lookup "width" kvs')
+                in  [("style", "width:" ++ w ++ ";min-width:" ++ w ++
+                      ";vertical-align:top;")]
+           else []
   let speakerNotes = "notes" `elem` classes
   -- we don't want incremental output inside speaker notes, see #1394
   let opts' = if speakerNotes then opts{ writerIncremental = False } else opts
diff --git a/src/Text/Pandoc/Writers/LaTeX.hs b/src/Text/Pandoc/Writers/LaTeX.hs
index fcc5ad1c6..4a81cd245 100644
--- a/src/Text/Pandoc/Writers/LaTeX.hs
+++ b/src/Text/Pandoc/Writers/LaTeX.hs
@@ -452,7 +452,25 @@ blockToLaTeX (Div (identifier,classes,kvs) bs) = do
             _ -> linkAnchor'
   let align dir txt = inCmd "begin" dir $$ txt $$ inCmd "end" dir
   lang <- toLang $ lookup "lang" kvs
-  let wrapDir = case lookup "dir" kvs of
+  let wrapColumns = if "columns" `elem` classes
+                       then \contents ->
+                          inCmd "begin" "columns" <> brackets "T"
+                              $$ contents
+                              $$ inCmd "end" "columns"
+                       else id
+      wrapColumn  = if "column" `elem` classes
+                       then \contents ->
+                          let fromPct xs =
+                                case reverse xs of
+                                     '%':ds -> '0':'.': reverse ds
+                                     _      -> xs
+                              w = maybe "0.48" fromPct (lookup "width" kvs)
+                          in  inCmd "begin" "column" <>
+                              braces (text w <> "\\textwidth")
+                              $$ contents
+                              $$ inCmd "end" "column"
+                       else id
+      wrapDir = case lookup "dir" kvs of
                   Just "rtl" -> align "RTL"
                   Just "ltr" -> align "LTR"
                   _          -> id
@@ -468,7 +486,8 @@ blockToLaTeX (Div (identifier,classes,kvs) bs) = do
       wrapNotes txt = if beamer && "notes" `elem` classes
                           then "\\note" <> braces txt -- speaker notes
                           else linkAnchor $$ txt
-  fmap (wrapDir . wrapLang . wrapNotes) $ blockListToLaTeX bs
+  fmap (wrapColumns . wrapColumn . wrapDir . wrapLang . wrapNotes)
+    $ blockListToLaTeX bs
 blockToLaTeX (Plain lst) =
   inlineListToLaTeX $ dropWhile isLineBreakOrSpace lst
 -- title beginning with fig: indicates that the image is a figure
diff --git a/test/command/1710.md b/test/command/1710.md
new file mode 100644
index 000000000..be96678bd
--- /dev/null
+++ b/test/command/1710.md
@@ -0,0 +1,91 @@
+```
+% pandoc -t revealjs
+# Slide one
+
+<div class="columns">
+<div class="column" width="40%">
+- a
+- b
+</div>
+<div class="column" width="40%">
+- c
+- d
+</div>
+<div class="column" width="10%">
+ok
+</div>
+</div>
+^D
+<section id="slide-one" class="slide level1">
+<h1>Slide one</h1>
+<div class="columns">
+<div class="column" width="40%" style="width:40%;min-width:40%;vertical-align:top;">
+<ul>
+<li>a</li>
+<li>b</li>
+</ul>
+</div>
+<div class="column" width="40%" style="width:40%;min-width:40%;vertical-align:top;">
+<ul>
+<li>c</li>
+<li>d</li>
+</ul>
+</div>
+<div class="column" width="10%" style="width:10%;min-width:10%;vertical-align:top;">
+<p>ok</p>
+</div>
+</div>
+</section>
+```
+
+```
+% pandoc -t beamer
+# Slide one
+
+<div class="columns">
+<div class="column" width="40%">
+- a
+- b
+</div>
+<div class="column" width="40%">
+- c
+- d
+</div>
+<div class="column" width="10%">
+ok
+</div>
+</div>
+^D
+\begin{frame}{%
+\protect\hypertarget{slide-one}{%
+Slide one}}
+
+\begin{columns}[T]
+\begin{column}{0.40\textwidth}
+\begin{itemize}
+\tightlist
+\item
+  a
+\item
+  b
+\end{itemize}
+\end{column}
+
+\begin{column}{0.40\textwidth}
+\begin{itemize}
+\tightlist
+\item
+  c
+\item
+  d
+\end{itemize}
+\end{column}
+
+\begin{column}{0.10\textwidth}
+ok
+\end{column}
+\end{columns}
+
+\end{frame}
+```
+
diff --git a/test/lhs-test.html b/test/lhs-test.html
index ff14e3699..6cf6285d1 100644
--- a/test/lhs-test.html
+++ b/test/lhs-test.html
@@ -9,6 +9,7 @@
       code{white-space: pre-wrap;}
       .smallcaps{font-variant: small-caps;}
       .line-block{white-space: pre-line;}
+      .column{display: inline-block;}
   </style>
   <style type="text/css">
 div.sourceCode { overflow-x: auto; }
diff --git a/test/lhs-test.html+lhs b/test/lhs-test.html+lhs
index f0bfd0465..3a29b8c30 100644
--- a/test/lhs-test.html+lhs
+++ b/test/lhs-test.html+lhs
@@ -9,6 +9,7 @@
       code{white-space: pre-wrap;}
       .smallcaps{font-variant: small-caps;}
       .line-block{white-space: pre-line;}
+      .column{display: inline-block;}
   </style>
   <style type="text/css">
 div.sourceCode { overflow-x: auto; }
diff --git a/test/s5-basic.html b/test/s5-basic.html
index b559a9af6..f3ca9bbf8 100644
--- a/test/s5-basic.html
+++ b/test/s5-basic.html
@@ -14,6 +14,7 @@
       code{white-space: pre-wrap;}
       .smallcaps{font-variant: small-caps;}
       .line-block{white-space: pre-line;}
+      .column{display: inline-block;}
   </style>
   <!-- configuration parameters -->
   <meta name="defaultView" content="slideshow" />
diff --git a/test/s5-fancy.html b/test/s5-fancy.html
index a24baa556..3031cf071 100644
--- a/test/s5-fancy.html
+++ b/test/s5-fancy.html
@@ -14,6 +14,7 @@
       code{white-space: pre-wrap;}
       .smallcaps{font-variant: small-caps;}
       .line-block{white-space: pre-line;}
+      .column{display: inline-block;}
   </style>
   <!-- configuration parameters -->
   <meta name="defaultView" content="slideshow" />
diff --git a/test/s5-inserts.html b/test/s5-inserts.html
index 97c8de384..a3c3a7886 100644
--- a/test/s5-inserts.html
+++ b/test/s5-inserts.html
@@ -12,6 +12,7 @@
       code{white-space: pre-wrap;}
       .smallcaps{font-variant: small-caps;}
       .line-block{white-space: pre-line;}
+      .column{display: inline-block;}
   </style>
   <link rel="stylesheet" href="main.css" type="text/css" />
   STUFF INSERTED
diff --git a/test/writer.html4 b/test/writer.html4
index 89cf07685..2040b4a1a 100644
--- a/test/writer.html4
+++ b/test/writer.html4
@@ -12,6 +12,7 @@
       code{white-space: pre-wrap;}
       .smallcaps{font-variant: small-caps;}
       .line-block{white-space: pre-line;}
+      .column{display: inline-block;}
   </style>
 </head>
 <body>
diff --git a/test/writer.html5 b/test/writer.html5
index 6762f8198..e3b3a07ca 100644
--- a/test/writer.html5
+++ b/test/writer.html5
@@ -12,6 +12,7 @@
       code{white-space: pre-wrap;}
       .smallcaps{font-variant: small-caps;}
       .line-block{white-space: pre-line;}
+      .column{display: inline-block;}
   </style>
   <!--[if lt IE 9]>
     <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
-- 
cgit v1.2.3