chore(examples): generate examples with vis-dev-utils (visjs#126)

daRoof · Oct 5, 2019 · cb1f4bb · cb1f4bb
1 parent 785bc43
commit cb1f4bb
Show file tree

Hide file tree

Showing 43 changed files with 1,506 additions and 166 deletions.
diff --git a/examples/graph2d/08_performance.html b/examples/graph2d/08_performance.html
@@ -15,7 +15,7 @@
     </style>
 
     <!-- note: moment.js must be loaded before vis-timeline-graph2d or the embedded version of moment.js is used -->
-    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
 
     <script src="../../dist/vis-timeline-graph2d.min.js"></script>
     <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />

diff --git a/examples/graph2d/14_toggleGroups.html b/examples/graph2d/14_toggleGroups.html
@@ -4,6 +4,9 @@
   <title>Graph2d | Toggle Groups Example</title>
     <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
     <meta content="utf-8" http-equiv="encoding">
+
+    <meta name="example-screenshot-selector" content="#visualization6" />
+
   <style type="text/css">
     body, html {
       font-family: sans-serif;
@@ -142,4 +145,4 @@ <h2>Graph2d | Groups Example</h2>
   graph2d5.setOptions({groups:{visibility:{0:false, 1:false, 2:false, 3:false, "__ungrouped__":true}}})
 </script>
 </body>
-</html>
+</html>
diff --git a/examples/timeline/dataHandling/loadExternalData.html b/examples/timeline/dataHandling/loadExternalData.html
@@ -3,6 +3,8 @@
 <head>
   <title>Timeline | External data</title>
 
+  <meta name="example-screenshot-selector" content="body" />
+
   <style type="text/css">
     body, html {
       font-family: sans-serif;

diff --git a/examples/timeline/editing/itemsAlwaysDraggable.html b/examples/timeline/editing/itemsAlwaysDraggable.html
@@ -7,10 +7,10 @@
     </head>
     <body>
         <p>The <code>itemsAlwaysDraggable</code> option allows to drag items around without first selecting them. When <code>itemsAlwaysDraggable.range</code> is set to <code>true</code>, the range can be changed without selection as well.</p>
-        <div id="mytimeline"></div>
+        <div id="visualization"></div>
 
         <script>
-            var container = document.getElementById('mytimeline'),
+            var container = document.getElementById('visualization'),
                 items = new vis.DataSet();
 
             for (var i = 10; i >= 0; i--) {

diff --git a/examples/timeline/editing/overrideEditingItems.html b/examples/timeline/editing/overrideEditingItems.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-  <title>Timeline | Individual editable items</title>
+  <title>Timeline | Individual editable items (override)</title>
 
   <style>
     body, html {

diff --git a/examples/timeline/editing/tooltipOnItemChange.html b/examples/timeline/editing/tooltipOnItemChange.html
@@ -2,6 +2,8 @@
 <head>
   <title>Timeline | Tooltip on item onUpdateTime Option</title>
 
+  <meta name="example-screenshot-selector" content="#mytimeline1" />
+
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
   <script src="../../../dist/vis-timeline-graph2d.min.js"></script>
   <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />

diff --git a/examples/timeline/editing/updateDataOnEvent.html b/examples/timeline/editing/updateDataOnEvent.html
@@ -29,7 +29,7 @@
 <div id="customTime">&nbsp;</div>
 <p></p>
 
-<div id="mytimeline"></div>
+<div id="visualization"></div>
 
 
 <script>
@@ -49,7 +49,7 @@
   };
 
   // create a timeline
-  var container = document.getElementById('mytimeline');
+  var container = document.getElementById('visualization');
   timeline = new vis.Timeline(container, data, options);
 
   timeline.addCustomTime(new Date());

diff --git a/examples/timeline/groups/groups.html b/examples/timeline/groups/groups.html
@@ -17,7 +17,7 @@
   </style>
 
   <!-- note: moment.js must be loaded before vis-timeline-graph2d or the embedded version of moment.js is used -->
-  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
 
   <script src="../../../dist/vis-timeline-graph2d.min.js"></script>
   <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />

diff --git a/examples/timeline/groups/nestedGroups.html b/examples/timeline/groups/nestedGroups.html
@@ -17,7 +17,7 @@
   </style>
 
   <!-- note: moment.js must be loaded before vis-timeline-graph2d or the embedded version of moment.js is used -->
-  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
 
   <script src="../../../dist/vis-timeline-graph2d.min.js"></script>
   <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />

diff --git a/examples/timeline/groups/nestedThreeLevels.html b/examples/timeline/groups/nestedThreeLevels.html
@@ -2,7 +2,7 @@
 <html>
 
 <head>
-    <title>Timeline | Nested Groups example</title>
+    <title>Timeline | Nested Groups example (3 levels)</title>
 
     <style>
         body,
@@ -19,7 +19,7 @@
     </style>
 
     <!-- note: moment.js must be loaded before vis-timeline-graph2d or the embedded version of moment.js is used -->
-    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
 
     <script src="../../../dist/vis-timeline-graph2d.min.js"></script>
     <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
@@ -191,4 +191,4 @@
     </script>
 </body>
 
-</html>
+</html>
diff --git a/examples/timeline/groups/verticalItemsHide.html b/examples/timeline/groups/verticalItemsHide.html
@@ -1,6 +1,6 @@
 <html>
 <head>
-  <title>Timeline | A lot of grouped data</title>
+  <title>Timeline | Vertical Items Hide</title>
 
   <script src="../../../docs/js/jquery.min.js"></script>
   <script src="../../../dist/vis-timeline-graph2d.min.js"></script>
@@ -25,7 +25,7 @@ <h2>visible items:</h2>
   <h3 id="visibleItemsContainer"></h3>
 </div>
 
-<div id="mytimeline"></div>
+<div id="visualization"></div>
 <br>
 
 <script>
@@ -107,7 +107,7 @@ <h3 id="visibleItemsContainer"></h3>
   };
 
   // create a Timeline
-  var container = document.getElementById('mytimeline');
+  var container = document.getElementById('visualization');
   timeline = new vis.Timeline(container, null, options);
   timeline.setGroups(groups);
   timeline.setItems(items);

diff --git a/examples/timeline/groups/visibleGroups.html b/examples/timeline/groups/visibleGroups.html
@@ -1,7 +1,7 @@
 <html>
 
 <head>
-    <title>Timeline | A lot of grouped data</title>
+    <title>Timeline | Visible Groups</title>
 
     <script src="../../../docs/js/jquery.min.js"></script>
     <script src="../../../dist/vis-timeline-graph2d.min.js"></script>
@@ -26,7 +26,7 @@ <h3 id="visibleGroupsContainer"></h3>
         <h2>(Scroll with the mouse and see the items being focus automatically on the timeline)</h2>
     </div>
 
-    <div id="mytimeline"></div>
+    <div id="visualization"></div>
     <br>
 
     <script>
@@ -77,7 +77,7 @@ <h2>(Scroll with the mouse and see the items being focus automatically on the ti
         }
 
         // create a Timeline
-        var container = document.getElementById('mytimeline');
+        var container = document.getElementById('visualization');
         timeline = new vis.Timeline(container, null, options);
         timeline.setGroups(groups);
         timeline.setItems(items);
@@ -110,4 +110,4 @@ <h2>(Scroll with the mouse and see the items being focus automatically on the ti
 
 </body>
 
-</html>
+</html>
diff --git a/examples/timeline/interaction/clickToUse.html b/examples/timeline/interaction/clickToUse.html
@@ -3,6 +3,8 @@
 <head>
   <title>Timeline | Click to use</title>
 
+  <meta name="example-screenshot-selector" content="#main" />
+
   <style>
     body, html {
       font-family: arial, sans-serif;
@@ -70,4 +72,4 @@ <h1>Timeline click to use</h1>
 
 </script>
 </body>
-</html>
+</html>
diff --git a/examples/timeline/interaction/rollingMode.html b/examples/timeline/interaction/rollingMode.html
@@ -12,11 +12,11 @@
 
 <h1><i id="icon">&#9974;</i>Timeline rolling mode option</h1>
 
-<div id="mytimeline"></div>
+<div id="visualization"></div>
 
 
 <script>
-  var container = document.getElementById('mytimeline');
+  var container = document.getElementById('visualization');
 
   var items = new vis.DataSet();
 

diff --git a/examples/timeline/items/tooltip.html b/examples/timeline/items/tooltip.html
@@ -3,6 +3,8 @@
 <head>
   <title>Timeline | Tooltips</title>
 
+  <meta name="example-screenshot-selector" content="#tooltips" />
+
   <style type="text/css">
     body, html {
       font-family: sans-serif;

diff --git a/examples/timeline/items/tooltipTemplate.html b/examples/timeline/items/tooltipTemplate.html
@@ -18,7 +18,7 @@
 
 <h1>Tooltip Templates</h1>
 
-<div id="tooltips"></div>
+<div id="visualization"></div>
 <script type="text/javascript">
   var items = new vis.DataSet([{
     id: 1,
@@ -39,7 +39,7 @@ <h1>Tooltip Templates</h1>
     }
   };
 
-  var element = document.getElementById('tooltips');
+  var element = document.getElementById('visualization');
 
   // Timeline object
   var timelineTooltips = new vis.Timeline(element, items, options);

diff --git a/examples/timeline/items/visibleFrameTemplateContent.html b/examples/timeline/items/visibleFrameTemplateContent.html
@@ -34,11 +34,11 @@
 </head>
 <body>
 
-<div id="myTimeline"></div>
+<div id="visualization"></div>
 
 <script type="text/javascript">
   // DOM element where the Timeline will be attached
-  var container = document.getElementById('myTimeline');
+  var container = document.getElementById('visualization');
 
   // Create a DataSet (allows two way data-binding)
   var items = new vis.DataSet([
@@ -64,4 +64,4 @@
   var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
-</html>
+</html>
diff --git a/examples/timeline/other/clustering.html b/examples/timeline/other/clustering.html
@@ -32,14 +32,14 @@
   </style>
 
   <!-- note: moment.js must be loaded before vis-timeline-graph2d or the embedded version of moment.js is used -->
-  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
 
   <script src="../../../dist/vis-timeline-graph2d.min.js"></script>
   <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
 
-  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
-  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
-  <link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
+  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+  <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <p>
@@ -243,4 +243,4 @@
   });
 </script>
 </body>
-</html>
+</html>
diff --git a/examples/timeline/other/customTimeBarsTooltip.html b/examples/timeline/other/customTimeBarsTooltip.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-  <title>Timeline | Show current and custom time bars</title>
+  <title>Timeline | Show current and custom time bars tooltip</title>
 
   <style type="text/css">
     body, html {
@@ -92,4 +92,4 @@
 
 </script>
 </body>
-</html>
+</html>
diff --git a/examples/timeline/other/dataAttributes.html b/examples/timeline/other/dataAttributes.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-  <title>Timeline | Basic demo</title>
+  <title>Timeline | Data Attributes</title>
 
   <style type="text/css">
     body, html {
@@ -41,4 +41,4 @@
   var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
-</html>
+</html>
diff --git a/examples/timeline/other/dataAttributesAll.html b/examples/timeline/other/dataAttributesAll.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-  <title>Timeline | Basic demo</title>
+  <title>Timeline | Data Attributes All</title>
 
   <style type="text/css">
     body, html {
@@ -41,4 +41,4 @@
   var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
-</html>
+</html>
diff --git a/examples/timeline/other/drag_drop.html b/examples/timeline/other/drag_drop.html
@@ -57,7 +57,7 @@ <h1>Timeline Drag & Drop Example</h1>
 
 <p>For this to work, you will have to define your own <code>'dragstart'</code> eventListener on each item in your list of items (make sure that any new item added to the list is attached to this eventListener 'dragstart' handler). This 'dragstart' handler must set <code>dataTransfer</code> - notice you can set  the item's information as you want this way.</p>
 
-<div id="mytimeline" ></div>
+<div id="visualization" ></div>
 
 <div class='items-panel'>
   <div class='side'>
@@ -138,7 +138,7 @@ <h3>Object with "target:'item'":</h3>
   };
 
   // create a Timeline
-  var container = document.getElementById('mytimeline');
+  var container = document.getElementById('visualization');
   timeline1 = new vis.Timeline(container, items, groups, options);
 
   function handleDragStart(event) {

diff --git a/examples/timeline/other/functionLabelFormats.html b/examples/timeline/other/functionLabelFormats.html
@@ -17,7 +17,7 @@
   </style>
 
   <!-- note: moment.js must be loaded before vis-timeline-graph2d or the embedded version of moment.js is used -->
-  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
 
   <script src="../../../dist/vis-timeline-graph2d.min.js"></script>
   <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />

diff --git a/examples/timeline/other/groupsPerformance.html b/examples/timeline/other/groupsPerformance.html
@@ -28,7 +28,7 @@ <h1>Timeline grouping performance</h1>
   Current number of items: <span id='count'>100</span>
 </p>
 
-<div id="mytimeline"></div>
+<div id="visualization"></div>
 
 <script>
   /**
@@ -98,7 +98,7 @@ <h1>Timeline grouping performance</h1>
   };
 
   // create a Timeline
-  var container = document.getElementById('mytimeline');
+  var container = document.getElementById('visualization');
   timeline = new vis.Timeline(container, null, options);
   timeline.setGroups(groups);
   timeline.setItems(items);