media.php — VikAppointments Services Booking Calendar trunk

vikappointments / libraries / html / form / fields / media.php

vikappointments / libraries / html / form / fields Last commit date

groupedlist.php 2 years ago list.php 2 years ago media.php 4 years ago number.php 4 years ago spacer.php 4 years ago text.php 4 years ago textarea.php 4 years ago toggle.php 4 years ago

media.php

151 lines

1	<?php
2	/**
3	* @package VikAppointments - Libraries
4	* @subpackage html.form
5	* @author E4J s.r.l.
6	* @copyright Copyright (C) 2021 E4J s.r.l. All Rights Reserved.
7	* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
8	* @link https://vikwp.com
9	*/
10
11	// No direct access
12	defined('ABSPATH') or die('No script kiddies please!');
13
14	wp_enqueue_media();
15
16	$name = isset($displayData['name']) ? $displayData['name'] : '';
17	$value = isset($displayData['value']) ? $displayData['value'] : '';
18	$id = isset($displayData['id']) ? $displayData['id'] : uniqid();
19	$class = isset($displayData['class']) ? $displayData['class'] : '';
20	$req = isset($displayData['required']) ? $displayData['required'] : 0;
21	$multiple = isset($displayData['multiple']) ? $displayData['multiple'] : 0;
22
23	$upload_image_id = $id . '-image-preview';
24	$upload_button_id = $id . '-upload-button';
25	$clear_button_id = $id . '-clear-button';
26
27	if ($value)
28	{
29	$img = JUri::root() . $value;
30	}
31	else
32	{
33	$img = '';
34	}
35
36	JText::script('JMEDIA_CHOOSE_IMAGE');
37	JText::script('JMEDIA_CHOOSE_IMAGES');
38	JText::script('JMEDIA_SELECT');
39
40	?>
41
42	<div class="media-control<?php echo $class ? ' ' . $class : ''; ?>">
43
44	<div class="image-preview-wrapper" id="<?php echo $upload_image_id; ?>" style="<?php echo $value ? '' : 'display: none'; ?>">
45	<img src="<?php echo esc_attr($img); ?>" />
46	</div>
47
48	<button type="button" class="button" id="<?php echo $upload_button_id; ?>">
49	<?php echo JText::translate('JMEDIA_UPLOAD_BUTTON'); ?>
50	</button>
51
52	<button type="button" class="button" id="<?php echo $clear_button_id; ?>" style="<?php echo $value ? '' : 'display: none;'; ?>">
53	<?php echo JText::translate('JMEDIA_CLEAR_BUTTON'); ?>
54	</button>
55
56	<input type="hidden" class="<?php echo $req ? 'required' : ''; ?>" name="<?php echo esc_attr($name); ?>" id="<?php echo esc_attr($id); ?>" value="<?php echo $value; ?>" />
57
58	</div>
59
60	<script>
61
62	(function($) {
63	'use strict';
64
65	var file_frame;
66	var multiple = <?php echo $multiple ? 'true' : 'false'; ?>;
67
68	const clearCurrentMultiSelection = () => {
69	if (multiple) {
70	// remove from DOM additional input
71	$('#<?php echo $id; ?>').siblings().filter('.multi-upload').remove();
72	// remove from DOM additional images
73	$('#<?php echo $upload_image_id; ?> img:not(:first-child)').remove();
74	}
75	}
76
77	$(function() {
78	$('#<?php echo $upload_button_id; ?>').on('click', function(event) {
79	event.preventDefault();
80
81	// if the media frame already exists, reopen it
82	if (file_frame) {
83	file_frame.open();
84	return;
85	}
86
87	// create the media frame.
88	file_frame = wp.media.frames.file_frame = wp.media({
89	title: Joomla.JText._(multiple ? 'JMEDIA_CHOOSE_IMAGES' : 'JMEDIA_CHOOSE_IMAGE'),
90	button: {
91	text: Joomla.JText._('JMEDIA_SELECT'),
92	},
93	multiple: multiple,
94	});
95
96	// when an image is selected, run a callback
97	file_frame.on('select', function() {
98	// extract selected image
99	var attachment = file_frame.state().get('selection').first().toJSON();
100
101	var path = attachment.url.replace(/^<?php echo str_replace('/', '\\/', JUri::root()); ?>/, '');
102
103	// clear current extra images
104	clearCurrentMultiSelection();
105
106	// turn on preview box
107	$('#<?php echo $upload_image_id; ?>').show();
108	// turn on clear button
109	$('#<?php echo $clear_button_id; ?>').show();
110
111	// do something with attachment.id and/or attachment.url here
112	$('#<?php echo $upload_image_id; ?> img').attr('src', attachment.url);
113	$('#<?php echo $id; ?>').val(path);
114
115	if (multiple) {
116	// extract all selected images, first one excluded
117	var list = file_frame.state().get('selection').toJSON().splice(1);
118
119	for (var i = 0; i < list.length; i++) {
120	path = list[i].url.replace(/^<?php echo str_replace('/', '\\/', JUri::root()); ?>/, '');
121
122	$('#<?php echo $upload_image_id; ?>').append('<img src="' + list[i].url + '" />\n');
123	$('#<?php echo $id; ?>').parent().append('<input type="hidden" class="multi-upload" name="<?php echo esc_attr($name); ?>" value="' + path + '" />');
124	}
125	}
126	});
127
128	// finally, open the modal
129	file_frame.open();
130	});
131
132	$('#<?php echo $clear_button_id; ?>').on('click', function(event) {
133	event.preventDefault();
134
135	// turn off button
136	$(this).hide();
137	// turn off preview box
138	$('#<?php echo $upload_image_id; ?>').hide();
139
140	// clear preview
141	$('#<?php echo $upload_image_id; ?> img').attr('src', '');
142	// clear input
143	$('#<?php echo $id; ?>').val('');
144
145	clearCurrentMultiSelection();
146	});
147	});
148	})(jQuery);
149
150	</script>
151