apostrophe
Version:
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
212 lines (187 loc) • 9.03 kB
HTML
{% 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 }}">—</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') }}" 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-generic-button active" data-grid data-view>{{ __('Grid View') }}</a>
<a href="javascript:void(0)" class="apos-view-list apos-generic-button" 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('group', 'Media Type') }}
{{ showField('extension', 'Media Format') }}
{{ showField('createdAt', 'Date Added') }}
<div class="apos-show-pane-field apos-download-original">
<div class="apos-label">{{ __('Download Original') }}</div>
<div class="apos-value" data-name="downloadOriginal">—</div>
</div>
</div>
<a href="#" data-rescue class="apos-control apos-button apos-rescue">{{ __('Rescue From Trash') }}</a>
<a href="#" data-edit class="apos-control apos-button apos-edit">{{ __('Edit Details') }}</a>
</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>
<div class="apos-file-styled">{{ __('Upload Media') }}</div>
{# 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') }}
{{ formTextarea('description', 'Description') }}
<a href="#" data-cancel-item class="apos-control apos-button apos-cancel-item">{{ __('Cancel') }}</a>
<a href="#" data-save-item class="apos-control apos-button apos-save-changes">{{ __('Save Changes') }}</a>
<a href="#" data-delete-item class="apos-control apos-button apos-delete">{{ __('Move to Trash') }}</a>
</form>
</div>
</div>
{% endblock %}