Update Web example

@@ -2,6 +2,7 @@
 
 ## 1.3.24
 
+- Update Web example
 - Add more color functions
 - Fix Pdf format
 - Fix warning in tests

@@ -8,6 +8,7 @@ environment:
 
 dependencies:
   pdf:
+  intl:
 
 dependency_overrides:
   pdf:

+/*
+ * Copyright (C) 2017, David PHAM-VAN <dev.nfet.net@gmail.com>
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'package:intl/intl.dart';
+import 'package:pdf/pdf.dart';
+import 'package:pdf/widgets.dart';
+
+class Calendar extends StatelessWidget {
+  Calendar({
+    this.date,
+    this.month,
+    this.year,
+  });
+
+  final DateTime date;
+
+  final int month;
+
+  final int year;
+
+  Widget title(
+    Context context,
+    DateTime date,
+  ) {
+    return Container(
+      width: double.infinity,
+      child: Text(
+        DateFormat.yMMMM().format(date),
+        style: const TextStyle(
+          color: PdfColors.deepPurple,
+          fontSize: 40,
+        ),
+      ),
+    );
+  }
+
+  Widget header(
+    Context context,
+    DateTime date,
+  ) {
+    return Container(
+      color: PdfColors.blue200,
+      padding: const EdgeInsets.all(8.0),
+      child: Text(
+        DateFormat.EEEE().format(date),
+        style: const TextStyle(
+          fontSize: 15,
+        ),
+      ),
+    );
+  }
+
+  Widget day(
+    Context context,
+    DateTime date,
+    bool currentMonth,
+    bool currentDay,
+  ) {
+    String text = '${date.day}';
+    TextStyle style = const TextStyle();
+    PdfColor color = PdfColors.grey300;
+
+    if (currentDay) {
+      style = TextStyle(color: PdfColors.red);
+      color = PdfColors.lightBlue50;
+    }
+
+    if (!currentMonth) {
+      style = TextStyle(color: PdfColors.grey);
+      color = PdfColors.grey100;
+    }
+
+    if (date.day == 1) {
+      text += ' ' + DateFormat.MMM().format(date);
+    }
+
+    return Container(
+      padding: const EdgeInsets.all(4),
+      color: color,
+      child: Text(
+        text,
+        textAlign: TextAlign.right,
+        style: style,
+      ),
+    );
+  }
+
+  @override
+  Widget build(Context context) {
+    final DateTime _date = date ?? DateTime.now();
+    final int _year = year ?? _date.year;
+    final int _month = month ?? _date.month;
+
+    final DateTime start = DateTime(_year, _month, 1, 12);
+    final DateTime end = DateTime(_year, _month + 1, 1, 12).subtract(
+      const Duration(days: 1),
+    );
+
+    final int startId = start.weekday - 1;
+    final int endId = end.difference(start).inDays + startId + 1;
+
+    final Row head = Row(
+      mainAxisSize: MainAxisSize.max,
+      children: List<Widget>.generate(7, (int index) {
+        final DateTime d = start.add(Duration(days: index - startId));
+        return Expanded(
+          child: Container(
+            foregroundDecoration: BoxDecoration(
+              border: BoxBorder(
+                color: PdfColors.black,
+                top: true,
+                left: true,
+                right: index % 7 == 6,
+                bottom: true,
+              ),
+            ),
+            child: header(context, d),
+          ),
+        );
+      }),
+    );
+
+    final GridView body = GridView(
+      crossAxisCount: 7,
+      children: List<Widget>.generate(42, (int index) {
+        final DateTime d = start.add(Duration(days: index - startId));
+        final bool currentMonth = index >= startId && index < endId;
+        final bool currentDay = d.year == _date.year &&
+            d.month == _date.month &&
+            d.day == _date.day;
+        return Container(
+          foregroundDecoration: BoxDecoration(
+            border: BoxBorder(
+              color: PdfColors.black,
+              left: true,
+              right: index % 7 == 6,
+              bottom: true,
+            ),
+          ),
+          child: day(context, d, currentMonth, currentDay),
+        );
+      }),
+    );
+
+    return Container(
+      padding: const EdgeInsets.all(20),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.start,
+        mainAxisSize: MainAxisSize.min,
+        children: <Widget>[
+          title(context, DateTime(_year, _month)),
+          head,
+          Flexible(flex: 1, child: body),
+        ],
+      ),
+    );
+  }
+}

@@ -8,17 +8,87 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Pdf Web Example</title>
   <link rel="stylesheet" href="styles.css">
-  <script defer src="main.dart.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.3.200/pdf.min.js"></script>
+  <script src="main.dart.js"></script>
+  <script>
+    async function displayPdf(pdf) {
+      let doc = await pdfjsLib.getDocument(pdf).promise;
+      document.getElementById('page_count').innerText = doc.numPages;
+      let metadata = await doc.getMetadata();
+      let title = metadata.info.Title || 'Untitled';
+      document.getElementById('title').innerText = title;
+      document.title = title;
+
+      let author = metadata.info.Author || '';
+      let producer = metadata.info.Producer || '';
+      document.getElementById('author').innerText = author + ' | ' + producer;
+
+      let currentPage = 1;
+
+      document.getElementById('prev').addEventListener('click', () => {
+        if (currentPage <= 1) {
+          return;
+        }
+        currentPage--;
+        renderPage(doc, currentPage);
+      });
+
+      document.getElementById('next').addEventListener('click', () => {
+        if (currentPage >= doc.numPages) {
+          return;
+        }
+        currentPage++;
+        renderPage(doc, currentPage);
+      });
+
+      renderPage(doc, currentPage);
+    }
+
+    async function renderPage(doc, pageNum) {
+      document.getElementById('page_num').innerText = pageNum;
+
+      let page = await doc.getPage(pageNum);
+      let viewport = page.getViewport({ scale: 1 });
+      let canvas = document.getElementById('container');
+      canvas.width = viewport.width;
+      canvas.height = viewport.height;
+
+      let renderContext = {
+        canvasContext: canvas.getContext('2d'),
+        viewport: viewport
+      };
+
+      await page.render(renderContext).promise;
+
+      document.getElementById('toolbar-loading').style.display = 'none';
+      document.getElementById('toolbar-content').style.display = '';
+      document.getElementById('container').style.display = '';
+      document.getElementById('author').style.display = '';
+    }
+
+    function ready() {
+      // Dart is fully loaded
+      let pdf = buildPdf();
+      displayPdf(pdf);
+    };
+  </script>
 </head>
 
 <body>
-  <div>
-    <button id="generate">Generate</button>
+  <div class="toolbar">
+    <div id="toolbar-loading">Loading ...</div>
+    <div id="toolbar-content" style="display:none;">
+      <button id="prev">Previous</button>
+      <button id="next">Next</button>
+      &nbsp; &nbsp;
+      <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
+      <span id="title"></span>
     </div>
-
-  <div id="container">
-    <object id="doc" type="application/pdf"></object>
   </div>
+
+
+  <canvas id="container" style="display:none;"></canvas>
+  <div id="author" style="display:none;"></div>
 </body>
 
 </html>

-import 'dart:convert';
+/*
+ * Copyright (C) 2017, David PHAM-VAN <dev.nfet.net@gmail.com>
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'dart:async';
 import 'dart:html';
+import 'dart:js' as js;
+import 'dart:typed_data';
 
 import 'package:pdf/pdf.dart';
 import 'package:pdf/widgets.dart';
 
-void main() {
-  final ButtonElement generateButton = querySelector('#generate');
+import 'calendar.dart';
 
-  generateButton.onClick.listen((_) async {
-    final String data = Uri.encodeComponent(base64.encode(buildPdf()));
+Uint8List buildPdf() {
+  final Document pdf = Document(title: 'My Document', author: 'David PHAM-VAN');
 
-    final ObjectElement doc = querySelector('#doc');
-    doc.data = 'data:application/pdf;base64,$data';
-  });
-}
-
-List<int> buildPdf() {
-  final Document pdf = Document();
-
-  pdf.addPage(Page(build: (Context ctx) {
+  pdf.addPage(Page(
+    build: (Context ctx) {
       return Container(
         width: double.infinity,
         height: double.infinity,
@@ -29,7 +39,33 @@ List<int> buildPdf() {
           ),
         ),
       );
-  }));
+    },
+  ));
+
+  pdf.addPage(Page(
+    pageFormat: PdfPageFormat.a4.landscape,
+    build: (Context context) => Calendar(),
+  ));
 
-  return pdf.save();
+  pdf.addPage(Page(
+    pageFormat: PdfPageFormat.a4.landscape,
+    build: (Context context) => Calendar(
+      month: DateTime.now().month + 1,
+    ),
+  ));
+
+  pdf.addPage(Page(
+    build: (Context ctx) {
+      return Center(child: PdfLogo());
+    },
+  ));
+
+  return Uint8List.fromList(pdf.save());
+}
+
+void main() {
+  js.context['buildPdf'] = buildPdf;
+  Timer.run(() {
+    js.context.callMethod('ready');
+  });
 }

@@ -10,18 +10,44 @@ body {
 }
 
 #container {
-  left: 10px;
-  right: 10px;
-  width: auto;
-  bottom: 10px;
-  top: 49px;
-  display: block;
-  position: absolute;
-  border: 1px dotted red;
+  border: 1px solid rgb(37, 37, 37);
+  box-shadow: 3px 3px 5px rgb(129, 129, 129);
+  margin: 20px;
 }
 
-#doc {
-  width: 100%;
-  height: 100%;
-  display: block;
+.toolbar {
+  background-color: rgb(82, 82, 82);
+  padding: 10px;
+  color: #fff;
+}
+
+button {
+  height: 50px;
+  width: 100px;
+  background-color: #5cb8ff;
+  border: 1px solid #4f90ff;
+  display: inline-block;
+  cursor: pointer;
+  color: #ffffff;
+  font-size: 17px;
+}
+
+button:hover {
+  background-color: #2688ff;
+}
+
+button:active {
+  background-color: #1a64be;
+}
+
+#title {
+  margin-left: 2rem;
+  font-size: 1.8em;
+}
+
+#author {
+  margin-left: 20px;
+  margin-bottom: 20px;
+  color: rgb(65, 72, 77);
+  font-size: 0.7em;
 }