apostrophe/views/mediaLibrary.html

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

{% extends "baseModal.html" %}
{% include 'uiMacros.html' %}
{% include "formMacros.html" %}

{% macro showField(name, label) %}
  <div class="apos-show-pane-field">
    <div class="apos-label">{{ __(label) | e }}</div>
    <div class="apos-value" data-name="{{ name | e }}">&mdash;</div>
  </div>
{% endmacro %}

{% block modalClass %}
  apos-media-library apos-ui-modal-full-page apos-ui-modal-no-sidebar
{% endblock%}

{% block modalLabel %}
  {{ __('Media Library')}}
{% endblock %}

{% block modalControls %}
  {{ renderProgressBtn({dataAttrs: 'data-cancel', float: 'left', label: 'Back', arrow: 'left'}) }}
{% endblock %}

{% block modalFilters %}
  <div class="apos-modal-bar" data-bar>
    <div class="apos-modal-bar-filters clearfix">
      {% if browseByType %}
        <fieldset class="apos-fieldset apos-fieldset-float apos-fieldset-text apos-fieldset-select apos-fieldset-selectize">
          <label>{{ __('Browse') }}:</label>
          <div class="apos-select-wrapper apos-inline-input">
            {{ formSelectStandalone('extension', browseByType ) }}
          </div>
        </fieldset>
      {% else %}
        <fieldset class="apos-fieldset apos-fieldset-float apos-fieldset-text apos-fieldset-select apos-fieldset-selectize">
          <label>{{ __('Browse') }}:</label>
          <div class="apos-select-wrapper apos-inline-input">
            {{ formSelectStandalone('group',
              [
                { label: 'All Media Types', value: '' },
                { label: 'Images', value: 'images' },
                { label: 'Office', value: 'office' }
              ]
            ) }}

          </div>
        </fieldset>
      {% endif %}


    {% if browseByTag %}
      <fieldset class="apos-fieldset apos-fieldset-float apos-fieldset-text apos-fieldset-select apos-fieldset-selectize">
        <label>{{ __('Tagged') }}:</label>
        <div class="apos-select-wrapper apos-inline-input">
          {{ formSelectStandalone('tag',
            [
              { label: 'All Tags', value: '' }
            ],
            {},
            { plain: true }
          ) }}
        </div>
      </fieldset>
    {% endif %}

      <fieldset class="apos-fieldset apos-fieldset-float apos-fieldset-text apos-fieldset-select apos-fieldset-selectize">
        <label>{{ __('Uploaded By') }}:</label>
        <div class="apos-select-wrapper apos-inline-input">
          {{ formSelectStandalone('owner',
            [
              { label: 'Everyone', value: 'all' },
              { label: 'Me', value: 'user' }
            ]
          ) }}

        </div>
      </fieldset>

      <fieldset class="apos-fieldset apos-fieldset-float apos-fieldset-text apos-fieldset-select apos-fieldset-selectize">
        <label>{{ __('Status') }}:</label>
        <div class="apos-select-wrapper apos-inline-input">
          {{ formSelectStandalone('trash',
            [
              { label: 'Live', value: '0' },
              { label: 'Trash', value: '1' }
            ]
          ) }}

        </div>
      </fieldset>

      <fieldset class="apos-fieldset apos-fieldset-float apos-fieldset-text apos-fieldset-select apos-fieldset-selectize">
        <label>{{ __('Search') }}:</label>
        <div class="apos-select-wrapper apos-inline-input">
          <div class="apos-search-field icon-search">
            <input type="search" placeholder="{{ __('Search titles, users, tags, etc.') }}" name="search" />
          </div>
        </div>
      </fieldset>
    </div>

  </div>
{% endblock %}


{% block modalBody %}

    <div class="apos-index-pane apos-grid-view" data-index>
      <div class="apos-index-header">

        <div class="apos-add-files apos-file-container">
          <!-- <h4 class="apos-add-files-title">Add Files</h4> -->
          <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 style 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">
                {{ __('Drag Media Here or <span>Click Here</span> to Select Files') }}
              </div>
              <input data-uploader type="file" name="files[]" class="apos-file-input" data-url="/apos/upload-files" multiple />
            <!-- <![endif]-->
          </div>
          <div class="apos-media-file-in-message" data-drag-droparea><!-- <span data-drag-message>{{ __('Drop Files Here') }}</span> --></div>
          {# I want to use progress.html here, but its styles are complex and don't seem #}
          {# to work in this context #}
          <!-- <span data-progress style="display: none">Uploading...</span> -->
          {% include "progress.html" %}

        </div>

        <div class="apos-view-picker">
          <a href="javascript:void(0)" class="apos-view-grid apos-progress-btn active icon icon-th-large" data-grid data-view>{{ __('Grid View') }}</a>
          <a href="javascript:void(0)" class="apos-view-list apos-progress-btn icon icon-reorder" data-list data-view>{{ __('List View') }}</a>
        </div>
      </div>
      <div class="apos-index-item apos-template" data-item>
        {# Populates with an img element when appropriate #}
        <div data-preview class="apos-preview"></div>
        <h4 data-title>'{{ __('Title') }}'</h4>
        <div class="apos-item-list-details" data-list-details></div>
      </div>
    </div>
    <div class="apos-show-pane" data-show>
      <div data-normal-view class="apos-normal-view">
        {# Image element will populate inside data-preview if type is appropriate #}
        <div class="apos-preview" >
          <div class="apos-preview-inner" >
            <div class="apos-preview-image" data-preview></div>
            <div class="apos-preview-info">
              {{ showField('title', 'Title') }}
              {{ showField('name', 'Filename') }}
              {{ showField('tags', 'Tags') }}
              {{ showField('credit', 'Credit') }}
              {{ showField('description', 'Description') }}
              {{ showField('owner', 'Uploaded By') }}
              {{ showField('private', 'Private') }}
              {{ showField('group', 'Media Type') }}
              {{ showField('extension', 'Media Format') }}
              {{ showField('createdAt', 'Date Added') }}
              {{ showField('size', 'Size') }}
              <div class="apos-show-pane-field apos-download-original">
                <div class="apos-label">{{ __('Download Original') }}</div>
                <div class="apos-value" data-name="downloadOriginal">&mdash;</div>
              </div>
            </div>
            <span data-rescue class="apos-ui-container">
              <a href="#" data-rescue class="apos-ui-btn apos-rescue">{{ __('Rescue From Trash') }}</a>
            </span>
            <span data-edit class="apos-ui-container">
              <a href="#" data-edit class="apos-ui-btn apos-edit">{{ __('Edit Details') }}</a>
            </span>
          </div>
        </div>
      </div>
      <div data-edit-view class="apos-edit-view apos-template">
        <div class="apos-preview" data-preview></div>
        <div class="apos-replace-file apos-file-container">
          <h4>{{ __('Replace File') }}</h4>
          <span class="apos-ui-container"><div class="apos-file-styled">{{ __('Upload Media') }}</div></span>

          {# ACHTUNG: IN IE9 AND BELOW, we leave the browse button the heck #}
          {# alone and don't try to style 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]> -->
            <input data-uploader type="file" name="files[]" class="apos-file-input" data-url="/apos/upload-files" multiple />
          <!-- <![endif]-->

          <div class="apos-media-file-in-message" data-drag-droparea><span data-drag-message>{{ __('Drop Files Here') }}</span></div>
          {# I want to use progress.html here, but its styles are complex and don't seem #}
          {# to work in this context #}
          <span data-progress style="display: none">{{ __('Uploading...') }}</span>
        </div>
        <form>
          {{ formText('title', 'Title') }}
          {{ formTags('tags', 'Tags') }}
          {{ formText('credit', 'Credit') }}
          {{ formBoolean('private', 'Private') }}
          {{ formTextarea('description', 'Description') }}
          <span data-cancel-item class="apos-ui-container">
            <a href="#" data-cancel-item class="apos-ui-btn apos-cancel-item">{{ __('Cancel') }}</a>
          </span>
          <span data-save-item class="apos-ui-container">
            <a href="#" data-save-item class="apos-ui-btn apos-save-changes">{{ __('Save Changes') }}</a>
          </span>
          <span data-delete-item class="apos-ui-container">
            <a href="#" data-delete-item class="apos-ui-btn apos-delete">{{ __('Move to Trash') }}</a>
          </span>
        </form>
      </div>
    </div>
{% endblock %}