apostrophe/views/slideshowEditor.html

Apostrophe is a user-friendly content management system. This core module of Apostrophe provides rich content editing and essential facilities to integrate Apostrophe into your Express project. Apostrophe also includes simple facilities for storing your r

{%- extends "baseWidgetEditor.html" -%}
{%- include "formMacros.html" -%}

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

{%- block modalLabel -%}
  {{ __('Edit Slideshow') }}
{%- endblock -%}

{%- block modalInstructions -%}
<p>{{ __('Choose image files (GIF, JPEG or PNG). Drag them into the order you prefer. <br />
You can also drag images from your computer into the dashed area below. <br />
Or, drag the existing images shown beneath the dashed area. <br />') }}
<span data-size-warning style="display: none">{{ __('Images must be at least 400x300 pixels.') }}</span></p>
{%- endblock -%}

{%- block formAll -%}
  {# Powered by the blueimp file uploader #}

  <div class="apos-slideshow-drag-container" data-drag-container>
    <div class="apos-slideshow-file-in-message" data-drag-droparea><span data-drag-message>{{ __('Drop Files Here') }}</span></div>
    <div class="apos-progress-container">
      <div data-autocropping class="apos-autocropping">{{ __('Autocropping...') }}</div>
      {%- include "progress.html" -%}
    </div>

    {# Main slideshow editor: reordering and removing of images, drop target #}

    <ul data-items class="apos-slideshow-editor-items apos-chooser-drag-peer">
      {# 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-item class="apos-slideshow-editor-item apos-template">
        <div class="apos-slideshow-editor-item-box" data-image-background>
          {# jQuery will give this img a proper src #}
          {# Use the smallest possible empty GIF in the meantime #}
          <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="apos-slideshow-editor-image" data-image />
          <div class="apos-slideshow-controls">
            <a class="apos-slideshow-control apos-remove" data-remove title="Remove">
              <i class="icon-remove"></i>
            </a>
            <a class="apos-slideshow-control apos-crop" style="top:0px;" data-crop title="Crop">
              <i class="icon-crop"></i>
            </a>
          </div>
        </div>

        <div class="apos-slideshow-extra-fields" data-extra-fields>
          {%- block hyperlink -%}
            <fieldset class="apos-fieldset apos-fieldset-text" data-extra-fields-link>
              <label>{{ __('Link') }}</label>
              <input data-hyperlink class="apos-slideshow-editor-link" type="text" />
            </fieldset>
            <fieldset class="apos-fieldset apos-fieldset-text" data-extra-fields-linkTitle>
              <label>{{ __('Link Title') }}</label>
              <input data-hyperlink-title class="apos-slideshow-editor-link-title" type="text" />
            </fieldset>
            {{ formBoolean('newWindow','New Window') }}
          {%- endblock -%}
          {%- block otherExtraFields -%}
          {%- endblock -%}
          <a href="#" data-extra-fields-save class="apos-control apos-button">{{ __('Save Changes') }}</a>
        </div>
      </li>
    </ul>
    <div class="apos-file-styled-container" data-uploader-container>

      {# ACHTUNG: IN IE9 AND BELOW, we leave the browse button the heck #}
      {# alone and don't try to substitute anything for it. Otherwise #}
      {# it does not work. The class was removed deliberately so the #}
      {# button would be visible. Yes it's an ugly button. That's life. #}
      {# -Tom and Joel #}

      <!--[if lte IE 9]>
        <input data-uploader type="file" name="files[]" data-url="/apos/upload-files" multiple />
      <![endif]-->
      <!--[if !IE]> -->
        <div class="apos-file-styled icon-plus" data-file-uploader-status></div>
        <input data-uploader type="file" name="files[]" class="apos-file-input" data-url="/apos/upload-files" multiple />
      <!-- <![endif]-->
    </div>
    <div class="apos-clear"></div>
  </div>

  {# ADDITIONAL CONTROLS FOR THE ENTIRE SLIDESHOW'S PRESENTATION #}

  {# TODO: you can make these snazzier, but remember the JS expects to #}
  {# set a val() of '0' or '1' on a select element #}
  <div data-orientation-select class="apos-orientation-select-container">
    <label class='apos-instructions'>{{ __('Select Orientation') }}</label>
    {# javascript clones this as needed based on orientation.choices #}
    <a class="apos-button apos-template" title="Title" data-orientation-button="name" href="#"></a>
    {# Examples of what this expands to: #}
    {#
      <a class="apos-button apos-landscape" title="Landscape" data-orientation-button="landscape" href="#"></a>
      <a class="apos-button apos-portrait" title="Portrait" data-orientation-button="portrait" href="#"></a>
      <a class="apos-button apos-square" title="Square" data-orientation-button="square" href="#"></a>
    #}
  </div>

  <div class="apos-slideshow-user-options clearfix">
    {{ formBoolean('showTitles', 'Show Titles') }}
    {{ formBoolean('showDescriptions', 'Show Descriptions') }}
    {{ formBoolean('showCredits', 'Show Credits') }}
  </div>




  {# Media 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 Media Chooser') }}:</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 -%}

{%- block modalFooter -%}
  <div class="apos-limit-reached" data-limit-reached style="display: none">{{ __('You have reached the limit of %s file(s) in this location.', '<span data-limit>5</span>') }}</div>
{%- endblock -%}