File: /var/www/lcc.kaunokolegija.lt/wp-content/plugins/envira-gallery-lite/includes/admin/media-view.php
<?php
/**
* Media View class.
*
* @since 1.0.3
*
* @package Envira_Gallery
* @author Envira Team
*/
// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
/**
* Media View Class
*
* @since 1.0.3
*/
class Envira_Gallery_Media_View {
/**
* Holds the class object.
*
* @since 1.0.0
*
* @var object
*/
public static $instance;
/**
* Path to the file.
*
* @since 1.0.0
*
* @var string
*/
public $file = __FILE__;
/**
* Holds the base class object.
*
* @since 1.0.0
*
* @var object
*/
public $base;
/**
* Primary class constructor.
*
* @since 1.0.0
*/
public function __construct() {
// Base.
$this->base = Envira_Gallery_Lite::get_instance();
// Modals.
add_filter( 'envira_gallery_media_view_strings', [ $this, 'media_view_strings' ] );
add_action( 'print_media_templates', [ $this, 'print_media_templates' ] );
}
/**
* Adds media view (modal) strings
*
* @since 1.0.3
*
* @param array $strings Media View Strings.
* @return array Media View Strings
*/
public function media_view_strings( $strings ) {
// Get the current screen, and check whether we're viewing the Envira or Envira Album Post Types.
$screen = get_current_screen();
if ( 'envira' !== $screen->post_type ) {
return $strings;
}
// Remove The "insertFromUrlTitle" option.
unset( $strings['insertFromUrlTitle'] );
return $strings;
}
/**
* Outputs backbone.js wp.media compatible templates, which are loaded into the modal
* view
*
* @since 1.0.3
*/
public function print_media_templates() {
// Always output certain print media templates.
// Insert Gallery (into Visual / Text Editor).
// Use: wp.media.template( 'envira-selection' ).
?>
<script type="text/html" id="tmpl-envira-selection">
<div class="media-frame-title">
<h1>{{data.modal_title}}</h1>
</div>
<div class="media-frame-content">
<div class="attachments-browser envira-gallery envira-gallery-editor">
<!-- Galleries -->
<ul class="attachments">
</ul>
<!-- Sidebar -->
<div class="media-sidebar attachment-info">
</div>
<!-- Search -->
<div class="media-toolbar">
<div class="media-toolbar-secondary">
<span class="spinner"></span>
</div>
<div class="media-toolbar-primary search-form">
<label for="envira-gallery-search" class="screen-reader-text"><?php esc_html_e( 'Search', 'envira-gallery-lite' ); ?></label>
<input type="search" placeholder="<?php esc_attr_e( 'Search', 'envira-gallery-lite' ); ?>" id="envira-gallery-search" class="search" />
</div>
</div>
</div>
</div>
<!-- Footer Bar -->
<div class="media-frame-toolbar">
<div class="media-toolbar">
<div class="media-toolbar-primary search-form">
<button type="button" class="button media-button button-primary button-large media-button-insert" disabled="disabled">
{{data.insert_button_label}}
</button>
</div>
</div>
</div>
</script>
<?php
// Single Selection Item (Gallery or Album).
// Use: wp.media.template( 'envira-selection-item' ).
?>
<script type="text/html" id="tmpl-envira-selection-item">
<div class="attachment-preview" data-id="{{ data.id }}">
<div class="thumbnail">
<#
if ( data.thumbnail != '' ) {
#>
<img src="{{ data.thumbnail }}" alt="{{ data.title }}" />
<#
}
#>
<strong>
<span>{{ data.title }}</span>
</strong>
<code>
[envira-{{ data.action }} id="{{ data.id }}"]
</code>
</div>
</div>
<a class="check">
<div class="media-modal-icon"></div>
</a>
</script>
<?php
// Selection Sidebar
// Use: wp.media.template( 'envira-selection-sidebar' ).
?>
<script type="text/html" id="tmpl-envira-selection-sidebar">
<!-- Helpful Tips -->
<h3><?php esc_html_e( 'Helpful Tips', 'envira-gallery-lite' ); ?></h3>
<strong><?php esc_html_e( 'Choosing Your Gallery', 'envira-gallery-lite' ); ?></strong>
<p>
<?php esc_html_e( 'To choose your gallery, simply click on one of the boxes to the left. Ctrl / cmd and click to select multiple Galleries. The "Insert Gallery" button will be activated once you have selected a gallery.', 'envira-gallery-lite' ); ?>
</p>
<strong><?php esc_html_e( 'Inserting Your Gallery', 'envira-gallery-lite' ); ?></strong>
<p>
<?php esc_html_e( 'insert your gallery into the editor, click on the "Insert Gallery" button below.', 'envira-gallery-lite' ); ?>
</p>
<!-- Insert Options -->
<h3><?php esc_html_e( 'Insert Options', 'envira-gallery-lite' ); ?></h3>
<div class="settings">
<!-- Display Title -->
<label class="setting">
<span class="name"><?php esc_html_e( 'Display Title', 'envira-gallery-lite' ); ?></span>
<select name="title" size="1">
<option value="0" selected><?php esc_html_e( 'No', 'envira-gallery-lite' ); ?></option>
<?php
for ( $i = 1; $i <= 6; $i++ ) {
?>
<?php /* translators: %s: heading size integer*/ ?>
<option value="h<?php echo intval( $i ); ?>"><?php printf( esc_html__( 'Yes, as Heading H%s', 'envira-gallery-lite' ), intval( $i ) ); ?></option>
<?php
}
?>
</select>
</label>
<p class="description">
<?php esc_html_e( 'Prepends each inserted Gallery with the Gallery Title.', 'envira-gallery-lite' ); ?>
</p>
</div>
</script>
<?php
// Error
// Use: wp.media.template( 'envira-gallery-error' ).
?>
<script type="text/html" id="tmpl-envira-gallery-error">
<p>
{{ data.error }}
</p>
</script>
<?php
// Only load other Backbone templates if we're on an Envira CPT.
global $post;
if ( isset( $post ) ) {
$post_id = absint( $post->ID );
} else {
$post_id = 0;
}
// Bail if we're not editing an Envira Gallery.
if ( get_post_type( $post_id ) !== 'envira' ) {
return;
}
// Single Image Editor
// Use: wp.media.template( 'envira-meta-editor' ).
?>
<script type="text/html" id="tmpl-envira-meta-editor">
<div class="edit-media-header">
<button class="left dashicons"><span class="screen-reader-text"><?php esc_html_e( 'Edit previous media item' ); ?></span></button>
<button class="right dashicons"><span class="screen-reader-text"><?php esc_html_e( 'Edit next media item' ); ?></span></button>
</div>
<div class="media-frame-title">
<h1><?php esc_html_e( 'Edit Metadata', 'envira-gallery-lite' ); ?></h1>
</div>
<div class="media-frame-content">
<div class="attachment-details save-ready">
<!-- Left -->
<div class="attachment-media-view portrait">
<div class="thumbnail thumbnail-image">
<img class="details-image" src="{{ data.src }}" draggable="false" />
</div>
</div>
<!-- Right -->
<div class="attachment-info">
<!-- Settings -->
<div class="settings">
<!-- Attachment ID -->
<input type="hidden" name="id" value="{{ data.id }}" />
<!-- Image Title -->
<label class="setting">
<span class="name"><?php esc_html_e( 'Title', 'envira-gallery-lite' ); ?></span>
<input type="text" name="title" value="{{ data.title }}" />
<div class="description">
<?php esc_html_e( 'Image titles can take any type of HTML. You can adjust the position of the titles in the main Lightbox settings.', 'envira-gallery-lite' ); ?>
</div>
</label>
<!-- Alt Text -->
<label class="setting">
<span class="name"><?php esc_html_e( 'Alt Text', 'envira-gallery-lite' ); ?></span>
<input type="text" name="alt" value="{{ data.alt }}" />
<div class="description">
<?php esc_html_e( 'Very important for SEO, the Alt Text describes the image.', 'envira-gallery-lite' ); ?>
</div>
</label>
<!-- Link -->
<label class="setting">
<span class="name"><?php esc_html_e( 'URL', 'envira-gallery-lite' ); ?></span>
<input type="text" name="link" value="{{ data.link }}" />
<# if ( typeof( data.id ) === 'number' ) { #>
<span class="buttons">
<button class="button button-small media-file"><?php esc_html_e( 'Media File', 'envira-gallery-lite' ); ?></button>
<button class="button button-small attachment-page"><?php esc_html_e( 'Attachment Page', 'envira-gallery-lite' ); ?></button>
</span>
<# } #>
<span class="description">
<?php esc_html_e( 'Enter a hyperlink if you wish to link this image to somewhere other than its full size image.', 'envira-gallery-lite' ); ?>
</span>
</label>
<!-- Link in New Window -->
<label class="setting">
<span class="name"><?php esc_html_e( 'Open URL in New Window?', 'envira-gallery-lite' ); ?></span>
<span class="description">
<input type="checkbox" name="link_new_window" value="1"<# if ( data.link_new_window == '1' ) { #> checked <# } #> />
<?php esc_html_e( 'Opens your image links in a new browser window / tab.', 'envira-gallery-lite' ); ?>
</span>
</label>
<!-- Addons can populate the UI here -->
<div class="envira-addons"></div>
</div>
<!-- /.settings -->
<!-- Actions -->
<div class="actions">
<a href="#" class="envira-gallery-meta-submit button media-button button-large button-primary media-button-insert" title="<?php esc_attr_e( 'Save Metadata', 'envira-gallery-lite' ); ?>">
<?php esc_html_e( 'Save Metadata', 'envira-gallery-lite' ); ?>
</a>
<!-- Save Spinner -->
<span class="settings-save-status">
<span class="spinner"></span>
<span class="saved"><?php esc_html_e( 'Saved.', 'envira-gallery-lite' ); ?></span>
</span>
</div>
<!-- /.actions -->
</div>
</div>
</div>
</script>
<?php
// Bulk Image Editor
// Use: wp.media.template( 'envira-meta-bulk-editor' ).
?>
<script type="text/html" id="tmpl-envira-meta-bulk-editor">
<div class="media-frame-title">
<h1><?php esc_html_e( 'Bulk Edit', 'envira-gallery-lite' ); ?></h1>
</div>
<div class="media-frame-content">
<div class="attachment-details save-ready">
<!-- Left -->
<div class="attachment-media-view portrait">
<ul class="attachments envira-bulk-edit">
</ul>
</div>
<!-- Right -->
<div class="attachment-info">
<!-- Settings -->
<div class="settings">
<!-- Image Title -->
<label class="setting">
<span class="name"><?php esc_html_e( 'Title', 'envira-gallery-lite' ); ?></span>
<input type="text" name="title" value="" />
<div class="description">
<?php esc_html_e( 'Image titles can take any type of HTML. You can adjust the position of the titles in the main Lightbox settings.', 'envira-gallery-lite' ); ?>
</div>
</label>
<!-- Caption -->
<div class="setting">
<span class="name"><?php esc_html_e( 'Caption', 'envira-gallery-lite' ); ?></span>
<?php
wp_editor(
'',
'caption',
[
'media_buttons' => false,
'wpautop' => false,
'tinymce' => false,
'textarea_name' => 'caption',
'quicktags' => [
'buttons' => 'strong,em,link,ul,ol,li,close',
],
'editor_height' => 100,
]
);
?>
<div class="description">
<?php esc_html_e( 'Captions can take any type of HTML, and are displayed when an image is clicked.', 'envira-gallery-lite' ); ?>
</div>
</div>
<!-- Alt Text -->
<label class="setting">
<span class="name"><?php esc_html_e( 'Alt Text', 'envira-gallery-lite' ); ?></span>
<input type="text" name="alt" value="" />
<div class="description">
<?php esc_html_e( 'Very important for SEO, the Alt Text describes the image.', 'envira-gallery-lite' ); ?>
</div>
</label>
<!-- Link -->
<label class="setting">
<span class="name"><?php esc_html_e( 'URL', 'envira-gallery-lite' ); ?></span>
<input type="text" name="link" value="" />
<# if ( typeof( data.id ) === 'number' ) { #>
<span class="buttons">
<button class="button button-small media-file"><?php esc_html_e( 'Media File', 'envira-gallery-lite' ); ?></button>
<button class="button button-small attachment-page"><?php esc_html_e( 'Attachment Page', 'envira-gallery-lite' ); ?></button>
</span>
<# } #>
<span class="description">
<?php esc_html_e( 'Enter a hyperlink if you wish to link this image to somewhere other than its full size image.', 'envira-gallery-lite' ); ?>
</span>
</label>
<!-- Link in New Window -->
<label class="setting">
<span class="name"><?php esc_html_e( 'Open URL in New Window?', 'envira-gallery-lite' ); ?></span>
<span class="description">
<input type="checkbox" name="link_new_window" value="1" />
<?php esc_html_e( 'Opens your image links in a new browser window / tab.', 'envira-gallery-lite' ); ?>
</span>
</label>
<!-- Addons can populate the UI here -->
<div class="envira-addons"></div>
</div>
<!-- /.settings -->
<!-- Actions -->
<div class="actions">
<a href="#" class="envira-gallery-meta-submit button media-button button-large button-primary media-button-insert" title="<?php esc_attr_e( 'Save Metadata to Items', 'envira-gallery-lite' ); ?>">
<?php esc_html_e( 'Save Metadata', 'envira-gallery-lite' ); ?>
</a>
<!-- Save Spinner -->
<span class="settings-save-status">
<span class="spinner"></span>
<span class="saved"><?php esc_html_e( 'Saved.', 'envira-gallery-lite' ); ?></span>
</span>
</div>
<!-- /.actions -->
</div>
</div>
</div>
</script>
<?php
// Bulk Image Editor Image.
// Use: wp.media.template( 'envira-meta-bulk-editor-image' ).
?>
<script type="text/html" id="tmpl-envira-meta-bulk-editor-image">
<div class="attachment-preview">
<div class="thumbnail">
<div class="centered">
<img src={{ data._thumbnail }} />
</div>
</div>
</div>
</script>
<?php
/**
* Move Images to Gallery
*/
// Selection Sidebar
// Use: wp.media.template( 'envira-meta-move-media-sidebar' ).
?>
<script type="text/html" id="tmpl-envira-meta-move-media-sidebar">
<!-- Helpful Tips -->
<h3><?php esc_html_e( 'Helpful Tips', 'envira-gallery-lite' ); ?></h3>
<p>
<?php esc_html_e( 'Select the Gallery to move the selected images to by clicking on one of the boxes to the left.', 'envira-gallery-lite' ); ?>
</p>
<p>
<?php esc_html_e( 'Once done, click the Move button, and the selected images will be moved to the chosen Gallery.', 'envira-gallery-lite' ); ?>
</p>
</script>
<?php
/**
* Insert from Third Party Sources.
*/
// Search.
// Use: wp.media.template( 'envira-gallery-search-bar' ).
?>
<script type="text/html" id="tmpl-envira-gallery-search-bar">
<div class="media-toolbar">
<div class="media-toolbar-secondary">
<span class="spinner"></span>
</div>
<div class="media-toolbar-primary search-form">
<label for="envira-gallery-search" class="screen-reader-text"><?php esc_html_e( 'Search', 'envira-gallery-lite' ); ?></label>
<input type="search" placeholder="<?php esc_attr_e( 'Search', 'envira-gallery-lite' ); ?>" id="envira-gallery-search" class="search" />
</div>
</div>
</script>
<?php
// Folders and Items
// Use: wp.media.template( 'envira-gallery-items' ).
?>
<script type="text/html" id="tmpl-envira-gallery-items">
<ul class="attachments envira-gallery-attachments"></ul>
</script>
<?php
// Single Folder or Image (Item)
// Use: wp.media.template( 'envira-gallery-item' ).
?>
<script type="text/html" id="tmpl-envira-gallery-item">
<# if ( ! data.is_dir ) { #>
<div class="attachment-preview js--select-attachment type-image subtype-<# data.mime_type #>" data-id="{{ data.id }}" data-is-dir="{{ data.is_dir }}">
<div class="thumbnail">
<div class="centered">
<img src="{{ data.thumbnail }}" draggable="false" alt="{{ data.title }}" />
</div>
</div>
</div>
<button type="button" class="button-link check" tabindex="-1">
<span class="media-modal-icon"></span>
</button>
<# } else { #>
<div class="attachment-preview" data-id="{{ data.id }}" data-is-dir="{{ data.is_dir }}">
<div class="thumbnail">
<span class="dashicons dashicons-portfolio"></span>
<span>{{ data.title }}</span>
</div>
</div>
<# } #>
</script>
<?php
}
/**
* Returns the singleton instance of the class.
*
* @since 1.0.0
*
* @return object The Envira_Gallery_Media_View object.
*/
public static function get_instance() {
if ( ! isset( self::$instance ) && ! ( self::$instance instanceof Envira_Gallery_Media_View ) ) {
self::$instance = new Envira_Gallery_Media_View();
}
return self::$instance;
}
}
// Load the media class.
$envira_gallery_media_view = Envira_Gallery_Media_View::get_instance();