function edit_hotspot_settings_page()
{
$semantic = WP_PLUGIN_URL . '/panomanager/css/semantic.css';
$missions = get_missions();
$types = get_types();
$domains = get_domains();
$hotspot = null;
$show_type_edit = false;
if (isset($_GET['id']) && is_numeric($_GET['id'])) {
$hotspot = build_hotspot($_GET['id']);
}
$hotspot_menu = $hotspot->is_menu_item();
$hotspot_type_id = $hotspot->get_type_id();
$hotspot_type_row = get_hotspot_type($hotspot_type_id);
$hotspot_type = $hotspot_type_row->name;
if ($hotspot_type == "website" || $hotspot_type == "image" || $hotspot_type == "video" || $hotspot_type == "oppia") {
$show_type_edit = true;
}
?>
<link rel="stylesheet" type="text/css" href="<?php
echo $semantic;
?>
"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style type="text/css">
#wpfooter{
display: none;
}
#file_input {
border: 1px solid #cccccc;
padding: 5px;
}
.new_pano_form{
width:85%;
margin: 0px auto;
}
</style>
<script type="text/javascript">
jQuery('#form').ready(function(){
// Hiding oppia id on startup
jQuery('#oppia_input').hide();
// Displaying oppia id or hotspot url input
// according to radio button selection
jQuery('.url_type').change(function(){
if(jQuery('#oppia').is(':checked')){
jQuery('#hotspot_url').val('');
jQuery('#website_input').hide();
jQuery('#oppia_input').show();
jQuery('#oppia_id').focus();
} else {
jQuery('#oppia_id').val('');
jQuery('#oppia_input').hide();
jQuery('#website_input').show();
jQuery('#hotspot_url').focus();
}
});
// Changing hotspot type value
// according to user selection
jQuery('.url_type').change(function(){
if(jQuery('#website').is(':checked')){
jQuery('#hotspot_type').val('website');
}
else if(jQuery('#image').is(':checked')){
jQuery('#hotspot_type').val('image');
}
else if(jQuery('#video').is(':checked')){
jQuery('#hotspot_type').val('video');
}
else if(jQuery('#oppia').is(':checked')){
jQuery('#hotspot_type').val('oppia');
} else {
jQuery('#hotspot_type').val('url');
}
});
// Displaying hotspot zoom if user chooses
// visible hotspot
jQuery('#hotspot_icon').change(function(){
if(jQuery(this).is(':checked')){
jQuery('#zoom_input').show();
jQuery('#size_input').show();
} else {
jQuery('#hotspot_zoom').prop('checked', false);
jQuery('#zoom_input').hide();
jQuery('#size_value').val(125);
jQuery('#size_input').hide();
}
});
// Displaying hotspot menu name input
// if user chooses to be visible
jQuery('#hotspot_menu').change(function(){
if(jQuery(this).is(':checked')){
jQuery('#menu_name_input').show();
} else{
jQuery('#hotspot_menu_name').val('');
jQuery('#menu_name_input').hide();
}
});
// Updating hotspot size value according to slide
jQuery('#hotspot_size').on('input', function(){
jQuery('#size_value').val(jQuery(this).val());
});
});
</script>
<h2>Edit a Hotspot!</h2>
<hr>
<?php
if (isset($_GET['settings-saved'])) {
?>
<div class="updated"><p>Hotspot updated successfully.</p></div>
<?php
} elseif (isset($_GET['error'])) {
?>
<div class="error"><p>Error updating hotspot.</p></div>
<?php
}
?>
<form id="form" method="post" enctype="multipart/form-data" action="<?php
echo get_admin_url() . 'admin-post.php';
?>
">
<!-- pano processing hook -->
<input type="hidden" name="action" value="edit_hotspot" />
<input type="hidden" name="hotspot_id" value="<?php
echo $hotspot->get_id();
?>
" />
<input type="hidden" name="mission_id" value="<?php
echo $hotspot->get_mission_id();
?>
"/>
<input type="hidden" name="hotspot_domain_id" value="<?php
echo $hotspot->get_domain_id();
?>
"/>
<input type="hidden" id="hotspot_type" name="hotspot_type" value="<?php
echo $hotspot_type;
?>
" />
<textarea style="display:none;" name="hotspot_xml" > <?php
echo $hotspot->get_xml();
?>
</textarea>
<textarea style="display:none;" name="hotspot_action_xml" > <?php
echo $hotspot->get_action_xml();
?>
</textarea>
<div class="ui form segment new_pano_form">
<div class="ui form">
<div class="field">
<label for="hotspot_name">Hotspot Name</label>
<input type="text" name="hotspot_name" id="name" value="<?php
echo $hotspot->get_name();
?>
" required />
</div>
</div>
<div class="ui form">
<div class="field">
<label for="hotspot_info">Hotspot Info</label>
<textarea name="hotspot_info" required > <?php
echo $hotspot->get_hotspot_info();
?>
</textarea>
</div>
</div>
<div class="ui form">
<div class="field">
<label for="hotspot_menu">
<input type="checkbox" id="hotspot_menu" name="hotspot_menu" <?php
echo $hotspot_menu ? 'checked' : '';
?>
/>
<span>Show hotspot on the menu</span>
</label>
</div>
</div>
<div class="ui form">
<div class="field">
<label for="hotspot_menu_name">Hotspot Menu Text</label>
<input type="text" name="hotspot_menu_name" id="name" value="<?php
echo $hotspot->get_menu_name();
?>
" required />
</div>
</div>
<?php
if ($show_type_edit) {
?>
<p>Type of URL</p>
<div class="ui form">
<div class="field">
<label for="website">
<input type="radio" class="url_type" name="url_type" id="website" value="website" <?php
echo $hotspot_type == 'website' ? 'checked' : '';
?>
/>
<span>Website</span>
</label>
<label for="image">
<input type="radio" class="url_type" name="url_type" id="image" value="image" <?php
echo $hotspot_type == 'image' ? 'checked' : '';
?>
/>
<span>Image</span>
</label>
<label for="video">
<input type="radio" class="url_type" name="url_type" id="video" value="video" <?php
echo $hotspot_type == 'video' ? 'checked' : '';
?>
/>
<span>Video</span>
</label>
<label for="oppia">
<input type="radio" class="url_type" name="url_type" id="oppia" value="oppia" <?php
echo $hotspot_type == 'oppia' ? 'checked' : '';
?>
/>
<span>Oppia</span>
</label>
</div>
</div>
<div id="website_input" class="ui form">
<div class="field">
<label for="hotspot_url">Hotspot URL</label>
<input type="text" id="hotspot_url" name="hotspot_url" />
</div>
</div>
<div id="oppia_input" class="ui form">
<div class="field">
<label for="oppia_id">Oppia ID</label>
<input type="text" id="oppia_id" name="oppia_id" />
</div>
</div>
<?php
}
?>
<div class="ui form">
<div class="field">
<label for="hotspot_points">Hotspot Points</label>
<input type="number" name="hotspot_points" id="hotspot_points" value="<?php
echo $hotspot->get_points();
?>
" required />
</div>
</div>
<div class="ui form">
<div class="field">
<label for="hotspot_icon">
<input type="checkbox" id="hotspot_icon" name="hotspot_icon" checked />
<span>Make hotspot icon visible</span>
</label>
</div>
</div>
<div id="size_input" class="ui form">
<div class="field">
<label for="hotspot_size">
<span>Hotspot size</span>
<input type="range" id="hotspot_size" name="hotspot_size" min="1" max="500" step="1" value="125" />
<output for="hotspot_size" id="size_value">125</output>
<span> px</span>
</label>
</div>
</div>
<div id="zoom_input" class="ui form">
<div class="field">
<label for="hotspot_zoom">
<input type="checkbox" id="hotspot_zoom" name="hotspot_zoom" checked />
<span>Hotspot icon zoom with panorama</span>
</label>
</div>
</div>
<div class="ui form">
<div class="field">
<label for="max_attempts">Maximum number of attempts (0 for unlimited)</label>
<input type="number" name="max_attempts" id="max_attempts" value="<?php
echo $hotspot->get_attempts();
?>
" required />
</div>
</div>
<?php
submit_button();
?>
</div>
</form>
<?php
}
function pano_hotspot_settings_page()
{
$hotspots = get_hotspots();
$panos = get_panos();
$types = get_types();
$semantic = WP_PLUGIN_URL . '/panomanager/css/semantic.css';
$hotspot_types = admin_url() . "admin.php?page=pano_hotspot_type_settings";
$new_hotspot_url = admin_url() . "admin.php?page=new_hotspot_settings";
$edit_hotspot_url = admin_url() . "admin.php?page=edit_hotspot_settings";
$pano_editor = admin_url() . "admin.php?page=view_panos_settings";
?>
<!-- style sheet so our admin page looks nice -->
<link rel="stylesheet" type="text/css" href="<?php
echo $semantic;
?>
"/>
<hr>
<?php
if (isset($_GET['settings-saved'])) {
?>
<div class="updated"><p>Settings updated successfully.</p></div>
<?php
}
?>
<div>
<h2>Hotspots</h2>
<p>Filter hotspots by:</p>
<label>Pano </label>
<select id="pano_select">
<option value="NA">Select a pano</option>
<?php
foreach ($panos as $pano) {
?>
<option value="<?php
echo $pano->id;
?>
"><?php
echo $pano->title;
?>
</option>
<?php
}
?>
</select>
<label>Hotspot Type </label>
<select id="type_select">
<option value="NA">Select a type</option>
<?php
foreach ($types as $type) {
?>
<option value="<?php
echo $type->id;
?>
"><?php
echo $type->name;
?>
</option>
<?php
}
?>
</select>
</div>
<table id="hostpotTable" class="ui table segment tablesorter">
<thead>
<tr>
<th>Pano</th>
<th>Hotspot</th>
<th>Menu Name</th>
<th>Hotspot Info</th>
<th>Points</th>
<th>Attempts</th>
<th>Type</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<?php
foreach ($hotspots as $hotspot) {
?>
<?php
$current_hotspot = build_hotspot($hotspot->id);
?>
<tr class="hotspot pano<?php
echo $hotspot->pano_id;
?>
type<?php
echo $hotspot->type_id;
?>
">
<td><?php
echo get_pano($hotspot->pano_id)->title;
?>
</td>
<td><?php
echo $current_hotspot->get_name();
?>
</td>
<td><?php
echo $current_hotspot->get_menu_name();
?>
</td>
<td><?php
echo substr($current_hotspot->get_hotspot_info(), 0, 20) . "...";
?>
</td>
<td><?php
echo $current_hotspot->get_points();
?>
</td>
<td><?php
echo $current_hotspot->get_attempts();
?>
</td>
<td><?php
echo $current_hotspot->get_type_name();
?>
</td>
<td><a class="ui blue icon button" href="<?php
echo $edit_hotspot_url;
?>
&id=<?php
echo $current_hotspot->get_id();
?>
" style="padding: 7px">Edit</a></td>
<td>
<form method="post" action="admin-post.php" id="delete_hotspot_form<?php
echo $current_hotspot->get_id();
?>
">
<!-- pano processing hook -->
<input type="hidden" name="action" value="delete_hotspot" />
<input type="hidden" name="hotspot_id" value="<?php
echo $current_hotspot->get_id();
?>
" />
<input type="submit" class="ui blue icon button" value="Delete" style="padding: 7px" >
</form>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
<form method="POST" action="<?php
echo $pano_editor;
?>
&">
<!-- word processing hook -->
<input type="submit" class="ui blue icon button" value="Create Hotspot" style="padding: 7px;" />
</form>
<br/>
<script>
jQuery(document).ready(function(){
jQuery("#hostpotTable").tablesorter();
jQuery("#pano_select").change( function() {
filter_hotspots();
});
jQuery("#type_select").change( function(){
filter_hotspots();
});
function filter_hotspots() {
var pano = jQuery("#pano_select").prop("value");
var type = jQuery("#type_select").prop("value");
if (pano == "NA" && type == "NA") {
jQuery(".hotspot").show();
} else if (pano == "NA" && type != "NA") {
jQuery(".hotspot").hide();
jQuery(".type" + type).show();
} else if (pano != "NA" && type == "NA") {
jQuery(".hotspot").hide();
jQuery(".pano" + pano).show();
} else {
jQuery(".hotspot").hide();
jQuery(".pano" + pano + ".type" + type).show();
}
}
})
</script>
<?php
}
