add balloon example - issue #385

spipu · Oct 26, 2018 · 446ce71 · 446ce71
1 parent 3e1d8c4
commit 446ce71
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ All notable changes to this project will be documented in this file.
 ## [5.2.1](https://github.com/spipu/html2pdf/compare/v5.2.0...master) - unreleased
 
   * add `cert` tag - thanks to @LittleBigFox
+  * add `balloon` example - issue #385
   * change the name of all the examples from `exemple` to `example`
   * fix tag parser - css style corruption
   * fix issue on relative margin calculation

diff --git a/examples/balloon.php b/examples/balloon.php
@@ -0,0 +1,31 @@
+<?php
+/**
+ * Html2Pdf Library - example
+ *
+ * HTML => PDF converter
+ * distributed under the OSL-3.0 License
+ *
+ * @package   Html2pdf
+ * @author    Laurent MINGUET <webmaster@html2pdf.fr>
+ * @copyright 2017 Laurent MINGUET
+ */
+require_once dirname(__FILE__).'/../vendor/autoload.php';
+
+use Spipu\Html2Pdf\Html2Pdf;
+use Spipu\Html2Pdf\Exception\Html2PdfException;
+use Spipu\Html2Pdf\Exception\ExceptionFormatter;
+
+try {
+    ob_start();
+    include dirname(__FILE__).'/res/balloon.php';
+    $content = ob_get_clean();
+
+    $html2pdf = new Html2Pdf('P', 'A4', 'fr');
+    $html2pdf->writeHTML($content);
+    $html2pdf->output('baloon.pdf');
+} catch (Html2PdfException $e) {
+    $html2pdf->clean();
+
+    $formatter = new ExceptionFormatter($e);
+    echo $formatter->getHtmlMessage();
+}
diff --git a/examples/res/balloon.php b/examples/res/balloon.php
@@ -0,0 +1,104 @@
+<style type="text/css">
+
+.balloon {
+    width: 75%;
+    position: relative;
+}
+
+.on-left {
+    margin-left: 0;
+}
+
+.on-right {
+    margin-left: 25%;
+}
+
+.balloon .balloon-content {
+    position: relative;
+    padding: 4mm;
+    padding: 4mm;
+    margin-left: 2.8mm;
+    margin-right: 2.8mm;
+    margin-bottom: 4mm;
+    border:  0.1mm solid grey;
+    border-top: none;
+    border-radius: 2mm;
+    text-align: left;
+    color:   black;
+}
+
+.balloon .balloon-corner {
+    width: 0;
+    height: 0;
+    border: none;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    top: 0;
+}
+
+.on-left .balloon-content {
+    background-color: #FEFEFE;
+    border-top-left-radius: 0;
+}
+
+.on-right .balloon-content {
+    background-color: #E2FECB;
+    border-top-right-radius: 0;
+}
+
+.on-left .balloon-corner {
+    border-top:  solid 3mm #FEFEFE;
+    border-left: solid 3mm transparent;
+    left: 0;
+}
+
+.on-right .balloon-corner {
+    border-top:   solid 3mm #E2FECB;
+    border-right: solid 3mm transparent;
+    right: 0;
+}
+
+.balloon .balloon-status {
+    color: grey;
+    position: absolute;
+    right: 2mm;
+    bottom: 2mm;
+    font-size: 80%
+}
+
+.balloon .balloon-status img {
+    width: 3mm;
+}
+
+</style>
+<page backcolor="#DDD">
+    <div class="balloon on-right">
+        <div class="balloon-content">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia lectus ut lobortis vestibulum. In id consectetur enim. Donec eu erat ut magna consectetur vestibulum ac malesuada turpis. Suspendisse turpis risus, feugiat id gravida eu, euismod id orci. Nunc egestas ut erat molestie rutrum. Morbi posuere posuere sapien sed mattis. Fusce dapibus nunc leo, viverra mollis massa varius non. Ut in maximus quam. Aliquam volutpat consectetur odio, sed viverra eros tincidunt non. Ut consequat mi maximus congue faucibus. Morbi id finibus nisi.
+            <div class="balloon-status">10:01 PM <img src="./res/check.png" alt="check" /></div>
+        </div>
+        <div class="balloon-corner"></div>
+    </div>
+    <div class="balloon on-left">
+        <div class="balloon-content">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia lectus ut lobortis vestibulum. In id consectetur enim. Donec eu erat ut magna consectetur vestibulum ac malesuada turpis. Suspendisse turpis risus, feugiat id gravida eu, euismod id orci. Nunc egestas ut erat molestie rutrum. Morbi posuere posuere sapien sed mattis. Fusce dapibus nunc leo, viverra mollis massa varius non. Ut in maximus quam. Aliquam volutpat consectetur odio, sed viverra eros tincidunt non. Ut consequat mi maximus congue faucibus. Morbi id finibus nisi.
+            <div class="balloon-status">10:02 PM <img src="./res/check.png" alt="check" /></div>
+        </div>
+        <div class="balloon-corner"></div>
+    </div>
+    <div class="balloon on-right">
+        <div class="balloon-content">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia lectus ut lobortis vestibulum.
+            <div class="balloon-status">10:03 PM</div>
+        </div>
+        <div class="balloon-corner"></div>
+    </div>
+    <div class="balloon on-left">
+        <div class="balloon-content">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia lectus ut lobortis vestibulum.
+            <div class="balloon-status">10:04 PM</div>
+        </div>
+        <div class="balloon-corner"></div>
+    </div>
+</page>
diff --git a/examples/res/check.png b/examples/res/check.png
diff --git a/src/Tests/ExamplesTest.php b/src/Tests/ExamplesTest.php
@@ -82,6 +82,16 @@ public function testBookmark()
         $this->launchExample('bookmark');
     }
 
+    /**
+     * test: bookmark
+     *
+     * @return void
+     */
+    public function testBalloon()
+    {
+        $this->launchExample('balloon');
+    }
+
     /**
      * test: example01
      *