Merge pull request #1618 from plotly/optional-codepen

basic examples without codepens

Author: Joseph Damiba

_includes/layouts/head.html

@@ -10,6 +10,11 @@
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
  {% endif %}
+ 
+ {% if page.language == "plotly_js" %}
+ <!-- Plotly.js -->
+ <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+ {% endif %}
 
  <!--
  //// Stylesheets

_includes/posts/auto_examples.html

@@ -1,40 +1,54 @@
-
+{% assign counter = 0 %} 
 {% for example in examples %}
+ {% assign counter=counter | plus:1 %}
  <div class="section">
- <div class="row auto-eg-padding">
- <div class=" row twelve columns">
- <h4 id="{{ example.name | replace:' ','-' | remove:',' | downcase | strip_html }}"><a class="no_underline plot-blue" href="#{{ example.name | replace:' ','-' | remove:',' | downcase | strip_html }}">{{ example.name }}</a></h4>
- </div>
- <div class="row">
- <div class="{% if example.arrangement contains 'horizontal' %}twelve{% else %}six{% endif %} columns">
- {% if example.markdown_content %}
- {{ example.markdown_content | markdownify }}
- {% endif %}
- {% if example.content != "" %}
- <div class="z-depth-1">
- <pre><code class="{{page.language}}">{{ example.content | xml_escape }}</code></pre>
- </div>
- {% endif %}
- {% if example.description %}
- <blockquote>
- {{ example.description }}
- </blockquote>
- {% endif %}
+ <div class="row auto-eg-padding">
+ <div class=" row twelve columns">
+ <h4 id="{{ example.name | replace:' ','-' | remove:',' | downcase | strip_html }}">
+ <a class="no_underline plot-blue" href="#{{ example.name | replace:' ','-' | remove:',' | downcase | strip_html }}">{{ example.name }}</a>
+ </h4>
  </div>
- {% if example.plot_url %}
+
+ <div class="row">
  <div class="{% if example.arrangement contains 'horizontal' %}twelve{% else %}six{% endif %} columns">
- <div class="border" style="text-align:center;">
+ {% if example.markdown_content %}
+ {{ example.markdown_content | markdownify }}
+ {% endif %}
+ {% if example.content != "" %}
+ <div class="z-depth-1">
+ <pre><code class="{{page.language}}">{{ example.content | xml_escape }}</code></pre>
+ </div>
+ {% endif %}
+ {% if example.description %}
+ <blockquote>
+ {{ example.description }}
+ </blockquote>
+ {% endif %}
+ </div>
+ {% if example.plot_url %}
+ <div class="{% if example.arrangement contains 'horizontal' %}twelve{% else %}six{% endif %} columns">
  {% if example.plot_url contains '.gif' or example.plot_url contains '.png' %}
- <img src="{{ example.plot_url }}" />
+  <img src="{{ example.plot_url }}" />
  {% else %}
- <iframe id="auto-examples" src="{{ example.plot_url }}{% if example.plot_url contains 'plot.ly' %}.embed{% endif %}"
+  <iframe id="auto-examples" src="{{ example.plot_url }}{% if example.plot_url contains 'plot.ly' %}.embed{% endif %}"
  style="width: {% if example.width %}{{example.width}}px;{% else %}100%;{% endif %} height: {% if example.height %}{{example.height}}px;{% else %}550px;{% endif %} border: none;"></iframe>
  {% endif %}
  </div>
- </div>
- {% endif %}
- </div>
+ {% elsif page.language == "plotly_js" and (example.content contains "'myDiv'" or example.content contains '"myDiv"') %}
+ <div class="{% if example.arrangement contains 'horizontal' %}twelve{% else %}six{% endif %} columns">
+ <form style="margin-bottom: 35px; font-weight: 'Open Sans', sans-serif;" action="https://codepen.io/pen/define" method="POST" target="_blank">
+ <input type="hidden" name="data" 
+ value="{&quot;title&quot;:&quot;Plotly.js {{example.name}}&quot;,&quot;html&quot;:&quot;&lt;head&gt;\n\t&lt;!-- Load plotly.js into the DOM --&gt;\n\t&lt;script src='https://cdn.plot.ly/plotly-latest.min.js'>&lt;/script&gt;\n&lt;/head>\n\n&lt;body&gt;\n\t&lt;div id='myDiv'&gt;&lt;!-- Plotly chart will be drawn inside this DIV --&gt;&lt;/div&gt;\n&lt;/body&gt;&quot;,&quot;js&quot;:{{example.content | jsonify | escape | replace: "your access token", "pk.eyJ1IjoiZXRwaW5hcmQiLCJhIjoiY2luMHIzdHE0MGFxNXVubTRxczZ2YmUxaCJ9.hwWZful0U2CQxit4ItNsiQ"}}}">
+ <input style=" float: right; background-color:#119dff; border-radius: 4px; color: white;" class="codepen-submit" type="submit" value="Try It On CodePen!">
+ </form>
+ {% capture unique_myDiv %}myDiv_{{counter}}{% endcapture %}
+ <div style="max-width: 100%; margin: auto" id="{{unique_myDiv}}"></div>
+ <script>
+ {{ example.content | replace: 'myDiv', unique_myDiv | replace: "your access token", "pk.eyJ1IjoiZXRwaW5hcmQiLCJhIjoiY2luMHIzdHE0MGFxNXVubTRxczZ2YmUxaCJ9.hwWZful0U2CQxit4ItNsiQ"}}
+ </script>
+ </div>
+ {% endif %}
  </div>
-
  </div>
-{% endfor %}
+{% endfor %}
+

_posts/plotly_js/basic/WebGL/2018-08-07-webgl_100000-points.html

@@ -1,6 +1,5 @@
 ---
 name: WebGL with 100,000 points
-plot_url: https://codepen.io/plotly/embed/wxEeGx/?height=500&theme-id=15263&default-tab=result
 language: plotly_js
 suite: webgl-vs-svg
 order: 1

_posts/plotly_js/basic/WebGL/2018-08-07-webgl_1mill-points.html

@@ -1,6 +1,5 @@
 ---
 name: WebGL with 1 Million points
-plot_url: https://codepen.io/plotly/embed/OwBPaP/?height=500&theme-id=15263&default-tab=result
 language: plotly_js
 suite: webgl-vs-svg
 order: 2

_posts/plotly_js/basic/WebGL/2018-08-07-webgl_many-traces.html

@@ -1,6 +1,5 @@
 ---
 name: WebGL with many traces
-plot_url: https://codepen.io/plotly/embed/VBELPZ/?height=300&theme-id=15263&default-tab=result
 language: plotly_js
 suite: webgl-vs-svg
 order: 3

_posts/plotly_js/basic/area/2015-04-09-basic-area.html

@@ -1,6 +1,5 @@
 ---
 name: Basic Overlaid Area Chart
-plot_url: https://codepen.io/plotly/embed/d7cac856a2a4f35bbec4b08e7845c14f/?height=500&theme-id=15263&default-tab=result
 language: plotly_js
 suite: area
 order: 1

_posts/plotly_js/basic/area/2015-04-09-hoveron.html

@@ -1,6 +1,5 @@
 ---
 name: Select Hover Points
-plot_url: https://codepen.io/plotly/embed/zpgvpz/?height=463&theme-id=15263&default-tab=result
 language: plotly_js
 suite: area
 order: 3

_posts/plotly_js/basic/area/2015-04-09-stacked-area.html

@@ -1,6 +1,5 @@
 ---
 name: Stacked Area Chart
-plot_url: https://codepen.io/plotly/embed/PqLGjK/?height=463&theme-id=15263&default-tab=result
 language: plotly_js
 suite: area
 order: 2
@@ -14,4 +13,4 @@
 {x: [1,2,3], y: [3,0,2], stackgroup: 'one'}
 ];
 
-Plotly.newPlot(plotDiv, traces, {title: 'stacked and filled line chart'});
+Plotly.newPlot('myDiv', traces, {title: 'stacked and filled line chart'});

_posts/plotly_js/basic/area/2015-08-10-overlaid-area-char-without-boundary-lines.html

@@ -1,6 +1,5 @@
 ---
 name: Overlaid Area Chart Without Boundary Lines
-plot_url: https://codepen.io/plotly/embed/19c27282161f7a3b3287ee44896932c5/?height=500&theme-id=15263&default-tab=result
 language: plotly_js
 suite: area
 order: 2

_posts/plotly_js/basic/area/2018-09-18-normalized-stacked-area.html

@@ -1,6 +1,5 @@
 ---
 name: Normalized Stacked Area Chart
-plot_url: https://codepen.io/plotly/embed/MqzvoO/?height=463&theme-id=15263&default-tab=result
 language: plotly_js
 suite: area
 order: 2.1
@@ -14,5 +13,5 @@
 {x: [1,2,3], y: [3,0,2], stackgroup: 'one'}
 ];
 
-Plotly.newPlot(plotDiv, traces, {title: 'Normalized stacked and filled line chart'});
+Plotly.newPlot('myDiv', traces, {title: 'Normalized stacked and filled line chart'});