Add mobile-friendly browser phone shortcode for frontend use
- Created TWP_Shortcodes class with [twp_browser_phone] shortcode - Mobile-first responsive CSS design with touch-friendly interface - Frontend JavaScript integration with Twilio Voice SDK v2 - Permission checks for logged-in users with twp_access_browser_phone capability - Haptic feedback and dark mode support - Configurable shortcode parameters (title, show_title, compact) - Updated plugin version to 2.1.0 in main file - Added comprehensive documentation to README.md Features: - Visual dialpad with DTMF support - Real-time connection status indicators - Call timer and queue management - Auto-scaling for mobile devices (320px+) - Optimized for both desktop and mobile use 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
178
includes/class-twp-shortcodes.php
Normal file
178
includes/class-twp-shortcodes.php
Normal file
@@ -0,0 +1,178 @@
|
||||
<?php
|
||||
/**
|
||||
* Handle plugin shortcodes
|
||||
*/
|
||||
class TWP_Shortcodes {
|
||||
|
||||
/**
|
||||
* Initialize shortcodes
|
||||
*/
|
||||
public static function init() {
|
||||
add_action('init', array(__CLASS__, 'register_shortcodes'));
|
||||
add_action('wp_enqueue_scripts', array(__CLASS__, 'enqueue_frontend_assets'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Register all shortcodes
|
||||
*/
|
||||
public static function register_shortcodes() {
|
||||
add_shortcode('twp_browser_phone', array(__CLASS__, 'browser_phone_shortcode'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue frontend assets when shortcode is present
|
||||
*/
|
||||
public static function enqueue_frontend_assets() {
|
||||
global $post;
|
||||
|
||||
if (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'twp_browser_phone')) {
|
||||
// Enqueue Twilio Voice SDK
|
||||
wp_enqueue_script(
|
||||
'twilio-voice-sdk',
|
||||
'https://sdk.twilio.com/js/voice/2.11.1/twilio.min.js',
|
||||
array(),
|
||||
'2.11.1',
|
||||
true
|
||||
);
|
||||
|
||||
// Enqueue our browser phone script
|
||||
wp_enqueue_script(
|
||||
'twp-browser-phone-frontend',
|
||||
TWP_PLUGIN_URL . 'assets/js/browser-phone-frontend.js',
|
||||
array('jquery', 'twilio-voice-sdk'),
|
||||
TWP_VERSION,
|
||||
true
|
||||
);
|
||||
|
||||
// Enqueue mobile-friendly styles
|
||||
wp_enqueue_style(
|
||||
'twp-browser-phone-frontend',
|
||||
TWP_PLUGIN_URL . 'assets/css/browser-phone-frontend.css',
|
||||
array(),
|
||||
TWP_VERSION
|
||||
);
|
||||
|
||||
// Localize script with AJAX data
|
||||
wp_localize_script('twp-browser-phone-frontend', 'twp_frontend_ajax', array(
|
||||
'ajax_url' => admin_url('admin-ajax.php'),
|
||||
'nonce' => wp_create_nonce('twp_frontend_nonce'),
|
||||
'user_id' => get_current_user_id(),
|
||||
'is_logged_in' => is_user_logged_in()
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Browser phone shortcode handler
|
||||
*/
|
||||
public static function browser_phone_shortcode($atts) {
|
||||
// Check if user is logged in
|
||||
if (!is_user_logged_in()) {
|
||||
return '<div class="twp-error">You must be logged in to access the browser phone.</div>';
|
||||
}
|
||||
|
||||
// Check if user has permission
|
||||
if (!current_user_can('twp_access_browser_phone') && !current_user_can('manage_options')) {
|
||||
return '<div class="twp-error">You don\'t have permission to access the browser phone.</div>';
|
||||
}
|
||||
|
||||
// Parse shortcode attributes
|
||||
$atts = shortcode_atts(array(
|
||||
'title' => 'Browser Phone',
|
||||
'show_title' => 'true',
|
||||
'compact' => 'false'
|
||||
), $atts, 'twp_browser_phone');
|
||||
|
||||
$show_title = ($atts['show_title'] === 'true');
|
||||
$compact_mode = ($atts['compact'] === 'true');
|
||||
|
||||
ob_start();
|
||||
?>
|
||||
<div id="twp-frontend-browser-phone" class="twp-browser-phone-container <?php echo $compact_mode ? 'compact' : ''; ?>">
|
||||
<?php if ($show_title): ?>
|
||||
<h3 class="twp-browser-phone-title"><?php echo esc_html($atts['title']); ?></h3>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Connection Status -->
|
||||
<div class="twp-connection-status">
|
||||
<span class="status-indicator offline" id="twp-status-indicator"></span>
|
||||
<span class="status-text" id="twp-status-text">Connecting...</span>
|
||||
</div>
|
||||
|
||||
<!-- Phone Number Selection -->
|
||||
<div class="twp-phone-selection">
|
||||
<label for="twp-caller-id">Caller ID:</label>
|
||||
<select id="twp-caller-id" class="twp-select">
|
||||
<option value="">Loading...</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Dial Pad -->
|
||||
<div class="twp-dialpad">
|
||||
<div class="twp-number-display">
|
||||
<input type="tel" id="twp-dial-number" placeholder="Enter number to dial" />
|
||||
<button id="twp-clear-number" class="twp-btn-clear" title="Clear">×</button>
|
||||
</div>
|
||||
|
||||
<div class="twp-dial-grid">
|
||||
<button class="twp-dial-btn" data-digit="1">1<span></span></button>
|
||||
<button class="twp-dial-btn" data-digit="2">2<span>ABC</span></button>
|
||||
<button class="twp-dial-btn" data-digit="3">3<span>DEF</span></button>
|
||||
<button class="twp-dial-btn" data-digit="4">4<span>GHI</span></button>
|
||||
<button class="twp-dial-btn" data-digit="5">5<span>JKL</span></button>
|
||||
<button class="twp-dial-btn" data-digit="6">6<span>MNO</span></button>
|
||||
<button class="twp-dial-btn" data-digit="7">7<span>PQRS</span></button>
|
||||
<button class="twp-dial-btn" data-digit="8">8<span>TUV</span></button>
|
||||
<button class="twp-dial-btn" data-digit="9">9<span>WXYZ</span></button>
|
||||
<button class="twp-dial-btn" data-digit="*">*</button>
|
||||
<button class="twp-dial-btn" data-digit="0">0<span>+</span></button>
|
||||
<button class="twp-dial-btn" data-digit="#">#</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Call Controls -->
|
||||
<div class="twp-call-controls">
|
||||
<button id="twp-call-btn" class="twp-btn twp-btn-primary">
|
||||
<span class="call-icon">📞</span>
|
||||
<span class="call-text">Call</span>
|
||||
</button>
|
||||
<button id="twp-hangup-btn" class="twp-btn twp-btn-danger" style="display: none;">
|
||||
<span class="hangup-icon">📞</span>
|
||||
<span class="hangup-text">Hang Up</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Call Info -->
|
||||
<div class="twp-call-info" id="twp-call-info" style="display: none;">
|
||||
<div class="call-timer">
|
||||
<span class="timer-label">Call Duration:</span>
|
||||
<span class="timer-value" id="twp-call-timer">00:00</span>
|
||||
</div>
|
||||
<div class="call-status">
|
||||
<span id="twp-call-status">Connecting...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Queue Controls (for agents) -->
|
||||
<div class="twp-queue-controls" id="twp-queue-controls" style="display: none;">
|
||||
<h4>Queue Management</h4>
|
||||
<div class="queue-status">
|
||||
<span>Waiting calls: <span id="twp-waiting-count">0</span></span>
|
||||
</div>
|
||||
<button id="twp-accept-queue-call" class="twp-btn twp-btn-success">
|
||||
Accept Next Call
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Audio elements -->
|
||||
<audio id="twp-ringtone" preload="auto" loop>
|
||||
<source src="<?php echo TWP_PLUGIN_URL; ?>assets/audio/ringtone.mp3" type="audio/mpeg">
|
||||
</audio>
|
||||
|
||||
<!-- Error/Success Messages -->
|
||||
<div class="twp-messages" id="twp-messages"></div>
|
||||
</div>
|
||||
<?php
|
||||
return ob_get_clean();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user