apostrophe/views/embedEditor.html

Apostrophe is a user-friendly content management system. You'll need more than this core module. See apostrophenow.org to get started.

{% extends "baseWidgetEditor.html" %}

{% block modalClass %}
  {{super()}} apos-embed-editor apos-ui-modal-no-sidebar
{% endblock %}

{% block modalLabel  %}
  {{ __('Edit Embedded Item') }}
{% endblock %}

{% block modalInstructions %}
  <p>{{ __('Paste a link to the item you wish to embed. NOTE: some sites may not preview properly, or may require you to refresh the page after you save your work. You may not be able to preview something that is already on the current page. These are limitations of the services being embedded.') }}</p>
{% endblock %}

{% block formEnd %}
  {% block previewButton %}
    <input data-preview="data-preview" type="submit" value="Preview" class="apos-preview-button"/>
    {% include "progress.html" %}
  {% endblock %}
    <div class="iframe">
      <fieldset><label>Always Use Iframe</label><input data-always-iframe type="checkbox" /></fieldset>
      {# This div is used to toggle visibility #}
      <div data-iframe-options>
        <fieldset><label>Iframe Height (Pixels)</label><input data-iframe-height type="text" /></fieldset>
      </div>
    </div>
  </div>
  <div class="apos-widget-preview-container apos-requires-preview">
    {# We decided to move float preview into the main area editor so #}
    {# this preview is just for things whose appearance is not obvious #}
    {# or which require custom settings be tweaked (example: RSS feed) #}
  </div>
  {# Embed chooser #}

  <div class="apos-media-chooser apos-chooser-drag-peer" data-chooser>
    {# I float right #}
    <a href="#" data-next class="apos-next apos-chooser-pager"></a>
    {# I float left #}
    <a href="#" data-previous class="apos-previous apos-chooser-pager"></a>
    {# I sting like a bee #}
    <h5 class="apos-media-chooser-title">{{ __('Recently Added In Embed Library') }}:</h5>

    {# UX note: you can pretty up the search submit button but please don't remove it #}
    {# entirely as some users will not press enter. -Tom #}
    <div class="apos-media-chooser-search">
      <label class="apos-chooser-search-label">{{ __('Search') }}</label>
      <input type="text" name="search" class="apos-chooser-search" />
      <input type="submit" class="apos-search-submit" value="Go" name="search-submit" />
      <a href="#" class="apos-remove-search apos-control apos-button" data-remove-search>x</a>
    </div>
    <ul data-chooser-items class="apos-media-chooser-items clearfix">
      {# I am a template. I get cloned and populated by jQuery. If you #}
      {# leave my data attributes intact you can edit me quite a bit. #}
      <li data-chooser-item class="apos-media-chooser-item apos-template">
        <div class="apos-media-chooser-add">+</div>
        <div class="apos-media-chooser-item-box">
          {# jQuery will give this img a proper src #}
          {# Use the smallest possible empty GIF in the meantime #}
          <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-image />
        </div>
      </li>
    </ul>

  </div>
{% endblock %}