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

media.php in VikBooking Hotel Booking Engine & PMS trunk, at libraries/html/form/fields/media.php

148 lines 4.6 KB

Raw Download Zip

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