apostrophe/views/slideshowEditor.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" -%}
{%- include "formMacros.html" -%}

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

{%- block modalLabel -%}
  {{ __('Edit Image(s)') }}
{%- 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>
            <a class="apos-slideshow-control apos-info" style="top:0px;" data-info title="Info">
              <i class="icon-info"></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 class='apos-slideshow-editor-item--info'>
      <div info-exit>X</div>
      <div class='apos-show-pane-field'>
        <div class='apos-label'>Title:</div>
        <div class='apos-value' data-name='title'></div>
      </div>
      <div class='apos-show-pane-field'>
        <div class='apos-label'>Date Created:</div>
        <div class='apos-value' data-name='date'></div>
      </div>
      <div class='apos-show-pane-field'>
        <div class='apos-label'>Tags:</div>
        <div class='apos-value' data-name='tags'></div>
      </div>
    </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 -%}