tinymce-docs/_includes/live-demo.html

{% comment %}

Makes an embedded editor example with tabs, including an "Edit on CodePen" tab.


params:

id (required). Picks folder for files, and used in css classes.
type (optional) - Specifies if the example is `tinymce` or `tinydrive` specific default is `tinymce`
tab (optional - default to "run"), "run", "html", "css" or "js". The first tab to open.
height (optional - no default). min-height in pixels.
script_url_override (optional - no default).
  - Override the full tinymce.min.js URL, including api key.
  - Useful for testing things that aren't in the main channel, yet.
  - Remove this setting once the feature is in the main channel.

Files required under _includes/live-demos/id/

index.html
index.js
index.css optional file
example.js optional file

if index.css is omitted, the css tab will not display

example.js purpose:
when the file is present the live-demo js will display the contents of example.js, while the real demo code executes with index.js
Useful for when we want to hide actual api-keys or tokens: 'example-token'.
When the example.js file is present, the link to the external codepen site is disabled



{% endcomment %}

{% comment %} Add cloud script(s) {% endcomment %}
{% if include.script_url_override %}
  <script src='{{ include.script_url_override }}'></script>
{% else %}
  {% if include.type == 'tinydrive' %}
    {% include tinydrive-script-tag-once.html %}
  {% else %}
    {% include tinymce-script-tag-once.html %}
  {% endif %}
{% endif %}

{% comment %} Check if a example.js exists {% endcomment %}
{% capture hasExampleJS %}
{% file_exists _includes/live-demos/{{ include.id }}/example.js %}
{% endcapture %}

{% comment %} Check if a example.html exists {% endcomment %}
{% capture hasExampleHTML %}
{% file_exists _includes/live-demos/{{ include.id }}/example.html %}
{% endcapture %}

{% comment %} Assign html to live_demo_html {% endcomment %}
{% capture live_demo_html %}
{% include live-demos/{{ include.id }}/index.html %}
{% endcapture %}

{% comment %} Assign js to live_demo_js {% endcomment %}
{% capture live_demo_js %}
{% include live-demos/{{ include.id }}/index.js %}
{% endcapture %}

{% comment %} If example.js exists, Assign to example_js else use index.js {% endcomment %}
{% if hasExampleJS contains "true" %}
{% capture example_js %}
{% include live-demos/{{ include.id }}/example.js %}
{% endcapture %}
{% else %}
{% capture example_js %}
{% include live-demos/{{ include.id }}/index.js %}
{% endcapture %}
{% endif %}

{% comment %} If example.html exists, Assign to example_html else use index.html {% endcomment %}
{% if hasExampleHTML contains "true" %}
{% capture example_html %}
{% include live-demos/{{ include.id }}/example.html %}
{% endcapture %}
{% else %}
{% capture example_html %}
{% include live-demos/{{ include.id }}/index.html %}
{% endcapture %}
{% endif %}

{% comment %} Check if a style.css exists {% endcomment %}
{% capture hasCss %}
{% file_exists _includes/live-demos/{{ include.id }}/style.css %}
{% endcapture %}

{% comment %} If style.css has been provided... {% endcomment %}
{% if hasCss contains "true" %}
{% comment %} Assign CSS to live_demo_css {% endcomment %}
{% capture live_demo_css %}
{% include live-demos/{{ include.id }}/style.css %}
{% endcapture %}
{% comment %} Create and assign a CSS codeblock to live_demo_css_preview {% endcomment %}
{% capture live_demo_css_preview %}
```css
{{ live_demo_css }}
```
{% endcapture %}
{% endif %}

{% comment %} Create and assign a HTML codeblock to live_demo_html_preview {% endcomment %}
{% capture live_demo_html_preview %}
```html
{{ example_html }}
```
{% endcapture %}

{% comment %} Create and assign a JS codeblock to live_demo_js_preview {% endcomment %}
{% capture live_demo_js_preview %}
```js
{{ example_js }}
```
{% endcapture %}

{% comment %} Changes primary tab name where type is provided {% endcomment %}
{% if include.type == 'tinydrive' %}
    {% assign runText = "Tiny Drive" %}
{% else %}
    {% assign runText = "TinyMCE" %}
{% endif %}

{% comment %} Changes initial tab where tab is specified {% endcomment %}
{% if include.tab %}
    {% assign initialTab = include.tab %}
{% else %}
    {% assign initialTab = "run" %}
{% endif %}

{% comment %} Creates the live-demo tabs {% endcomment %}
<div id="live_demo_{{ include.id }}" class="live_demo" {% if include.height %}style="min-height:{{ include.height }}px;"{% endif %}>
    <div class="live_demo_tabs">
        {% for tab in site.data.live-demo-tabs %}
            {% if tab.name == initialTab %}
                {% assign class="live_demo_tab_selected" %}
            {% else %}
                {% assign class="live_demo_tab_deselected" %}
            {% endif %}
            {% if tab.name != "css" or hasCss contains "true" %}
                {% if tab.name == "run" %}
                    <a href="#" id="live_demo_tab_{{ tab.name }}_{{ include.id }}" class="{{ class }}">{{ runText }}</a>
                {% else %}
                    <a href="#" id="live_demo_tab_{{ tab.name }}_{{ include.id }}" class="{{ class }}">{{ tab.text }}</a>
                {% endif %}
            {% endif %}
        {% endfor %}

        {% if hasExampleJS contains 'false' %}
        <a href="#" id="live_demo_tab_codepen_{{ include.id }}" class="live_demo_tab_deselected ie11_optional">Edit on CodePen.io</a>
        {% endif %}
    </div>

    {% comment %} Adds style.css to page if provided {% endcomment %}
    <div id="live_demo_pane_run_{{ include.id }}" {% if "run" != initialTab %}style="display:none;"{% endif %}>
        {% if hasCss contains "true" %}
            <style type="text/css">
                {{ live_demo_css }}
            </style>
        {% endif %}
        {{ live_demo_html }}
    </div>

    {% comment %} Adds HTML tab content {% endcomment %}
    <div id="live_demo_pane_html_{{ include.id }}" {% if "html" != initialTab %}style="display:none;"{% endif %}>
        {{ live_demo_html_preview | markdownify }}
    </div>

    {% comment %} If style.css exists, add CSS tab content {% endcomment %}
    {% if hasCss contains "true" %}
        <div id="live_demo_pane_css_{{ include.id }}" {% if "css" != initialTab %}style="display:none;"{% endif %}>
            {{ live_demo_css_preview | markdownify }}
        </div>
    {% endif %}

    {% comment %} Add content to JS tab from index.js or example.js {% endcomment %}
    <div id="live_demo_pane_js_{{ include.id }}" {% if "js" != initialTab %}style="display:none;"{% endif %}>
        {{ live_demo_js_preview | markdownify }}
    </div>
</div>

{% comment %} Changes initial tab where tab is specified {% endcomment %}
<form action="https://codepen.io/pen/define" method="POST" target="_blank" id="codepen_form_{{ include.id }}">
    <input type="hidden" name="data" id="codepen_data_{{ include.id }}" />
</form>

<script>
  (function() {
    var isIE = !!window.MSInputMethodContext && !!document.documentMode;
    if (isIE && document.getElementsByClassName("ie11_optional")[0] !== undefined) {
        document.getElementsByClassName("ie11_optional")[0].style.display = 'none';
    }
  })();

  {% comment %} Add index.js to the page (primary tab content) {% endcomment %}
  (function() {
    {{ live_demo_js }}
  })();

  (function() {
    /* TODO: more js, less jekyll */
    var id = "{{ include.id }}";

    {% comment %} Add index.js and HTML to variables {% endcomment %}
    var html = decodeURIComponent("{{ live_demo_html | uri_escape }}");
    var js = decodeURIComponent("{{ live_demo_js | uri_escape }}");

    {% comment %} If style.css provided, add to variable {% endcomment %}
    {% comment %} set which tabz are shown in on codepen site {% endcomment %}
    {% if hasCss contains "true" %}
        var css = decodeURIComponent("{{ live_demo_css | uri_escape }}");
        var tabNames = ["run","html","css","js"];
    {% else %}
        var css = "";
        var tabNames = ["run","html","js"];
    {% endif %}

    {% comment %} Data to send to codepen dot io via form input {% endcomment %}
    /* Note: there are some other fields we could populate here to polish this. */
    /* See: https://blog.codepen.io/documentation/api/prefill/ */
    var data = {
      title: "{{ runText }} Example",
      description: '',
      html: html,
      css: css,
      js: js,
      js_external: '{{ site.tinymce_live_demo_url }}'
    };
    document.getElementById("codepen_data_{{ include.id }}").value = JSON.stringify(data);

    {% comment %} Below is just tab selection/change logic {% endcomment %}
    /* TODO: */
    var tabs = tabNames.map(function(t) {
      return {
        name: t,
        tab: document.getElementById("live_demo_tab_" + t + "_" + id),
        pane: document.getElementById("live_demo_pane_" + t + "_" + id)
      };
    });

    var lastTabName = '{{ initialTab }}';
    tabs.forEach(function(t) {
      t.tab.onclick = function(e) {
        if (lastTabName !== t.name) {
          tabs.forEach(function(tt) {
            tt.pane.style.display = t === tt ? 'block' : 'none';
            tt.tab.className = t === tt ? 'live_demo_tab_selected' : 'live_demo_tab_deselected';
          });

          {% if include.type != 'tinydrive' %}
          var editor = tinymce.get('{{ include.id }}');
          if (editor) {
            if (t.name === 'run') {
              editor.show();
            } else if (lastTabName === 'run') {
              editor.hide();
            }
          }
          {% endif %}

          lastTabName = t.name;
        }
        e.preventDefault();
      };
    });

    if (document.getElementById("live_demo_tab_codepen_" + id) !== null) {
        document.getElementById("live_demo_tab_codepen_" + id).onclick = function() {
            document.getElementById("codepen_form_" + id).submit();
        };
    }

  })();

</script>