code.jelly

<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout">
  <st:documentation>
    Displays a copyable code snippet.

    <st:attribute name="code">
      Code snippet to be displayed if and only if "file" is not set.
    </st:attribute>
    <st:attribute name="callback">
      JavaScript function to be called when the "Execute code" button is clicked.
      If "code" attribute is set, these two attributes should be in sync ("code" cannot be inline JS anymore due to CSP).
    </st:attribute>
    <st:attribute name="file">
      File containing the code snippet to be displayed.
      If the "callback" attribute is set, the file will be referenced in a script tag, so that it can be invoked.
    </st:attribute>
    <st:attribute name="language" use="optional">
      Defaults to 'xml'.
    </st:attribute>
    <st:attribute name="previewable" type="boolean" />
  </st:documentation>

  <div class="jdl-component-code">
    <pre class="jdl-component-code__code">
      <code class="language-${language != null ? language : 'xml'} ${file != null ? 'sample-remote' : ''}" data-component-name="${it.class.simpleName}" data-sample="${file}" data-executable="${callback != null}">
        ${code}
      </code>
    </pre>
    <div class="jdl-component-code__controls">
      <div>
        <d:invokeBody />

        <j:if test="${callback != null}">
          <!-- This only works if the 'code' attribute is set -->
          <button class="jenkins-button jenkins-button--tertiary jenkins-!-build-color callback-button" data-callback="${callback}" tooltip="${%Execute code}">
            <l:icon src="symbol-play" />
          </button>
        </j:if>
        <j:if test="${previewable == 'true'}">
          <a href="${file.replace('.jelly', '')}" class="jenkins-button jenkins-button--tertiary" tooltip="${%Preview in new tab}" target="_blank">
            <l:icon src="symbol-open-outline plugin-ionicons-api" />
          </a>
        </j:if>
        <l:copyButton text="${code}" clazz="jenkins-button--tertiary" />
      </div>
    </div>
  </div>
</j:jelly>