Allow customization of the icon through media library
This commit is contained in:
Salvador de la Puente González
Родитель
f6aaf1a30a
Коммит
7134d70beb
|
|
@ -2,14 +2,15 @@
|
|||
|
||||
include_once(plugin_dir_path(__FILE__) . 'class-wp-add-to-homescreen-stats.php');
|
||||
include_once(plugin_dir_path(__FILE__) . 'class-wp-add-to-homescreen-options.php');
|
||||
include_once(plugin_dir_path(__FILE__) . 'vendor/marco-c/wp-web-app-manifest-generator/WebAppManifestGenerator.php');
|
||||
|
||||
// Based on: https://codex.wordpress.org/Creating_Options_Pages#Example_.232
|
||||
class WP_Add_To_Homescreen_Admin {
|
||||
private static $instance;
|
||||
|
||||
public static $options_page_id = 'offline-options';
|
||||
public static $options_page_id = 'add-to-homescreen-options';
|
||||
|
||||
public static $options_group = 'offline-settings-group';
|
||||
public static $options_group = 'add-to-homescreen-settings-group';
|
||||
|
||||
public static function init() {
|
||||
if (!self::$instance) {
|
||||
|
|
@ -23,65 +24,40 @@ class WP_Add_To_Homescreen_Admin {
|
|||
private function __construct() {
|
||||
$this->options = WP_Add_To_Homescreen_Options::get_options();
|
||||
add_action('wp_dashboard_setup', array($this, 'add_dashboard_widgets'));
|
||||
// add_action('admin_menu', array($this, 'admin_menu'));
|
||||
// add_action('admin_init', array($this, 'admin_init'));
|
||||
add_action('admin_menu', array($this, 'admin_menu'));
|
||||
add_action('admin_init', array($this, 'admin_init'));
|
||||
add_action('admin_enqueue_scripts', array($this, 'enqueue_scripts'));
|
||||
}
|
||||
|
||||
public function admin_init() {
|
||||
$options = $this->options;
|
||||
$group = self::$options_group;
|
||||
register_setting($group, 'offline_network_timeout', array($this, 'sanitize_network_timeout'));
|
||||
register_setting($group, 'offline_debug_sw', array($this, 'sanitize_debug_sw'));
|
||||
register_setting($group, 'offline_precache', array($this, 'sanitize_precache'));
|
||||
register_setting($group, $options->n('icon'), array($this, 'sanitize_icon'));
|
||||
|
||||
add_settings_section(
|
||||
'default',
|
||||
'',
|
||||
__('UI Configuration', 'add-to-homescreen'),
|
||||
function () {},
|
||||
self::$options_page_id
|
||||
);
|
||||
|
||||
add_settings_field(
|
||||
'debug-sw',
|
||||
__('Debug service worker', 'offline-content'),
|
||||
array($this, 'debug_sw_input'),
|
||||
$options->n('icon'),
|
||||
__('Home Screen icon', 'offline-content'),
|
||||
array($this, 'icon_input'),
|
||||
self::$options_page_id,
|
||||
'default'
|
||||
);
|
||||
}
|
||||
|
||||
add_settings_section(
|
||||
'precache',
|
||||
__('Precache', 'offline-content'),
|
||||
array($this, 'print_precache_info'),
|
||||
self::$options_page_id
|
||||
);
|
||||
|
||||
add_settings_field(
|
||||
'precache',
|
||||
__('Content', 'offline-content'),
|
||||
array($this, 'precache_input'),
|
||||
self::$options_page_id,
|
||||
'precache'
|
||||
);
|
||||
|
||||
add_settings_section(
|
||||
'serving-policy',
|
||||
__('Serving policy', 'offline-content'),
|
||||
array($this, 'print_serving_policy_info'),
|
||||
self::$options_page_id
|
||||
);
|
||||
|
||||
add_settings_field(
|
||||
'network-timeout',
|
||||
__('Network timeout', 'offline-content'),
|
||||
array($this, 'network_timeout_input'),
|
||||
self::$options_page_id,
|
||||
'serving-policy'
|
||||
);
|
||||
public function enqueue_scripts() {
|
||||
wp_enqueue_media();
|
||||
wp_enqueue_script('options-page-script', plugins_url('lib/js/options-page.js', __FILE__));
|
||||
}
|
||||
|
||||
public function admin_menu() {
|
||||
add_options_page(
|
||||
__('Offline Content Options', 'offline-content'), __('Offline Content', 'offline-content'),
|
||||
__('Add to Home Screen', 'add-to-homescreen'), __('Add to Home Screen', 'add-to-homescreen'),
|
||||
'manage_options', self::$options_page_id, array($this, 'create_admin_page')
|
||||
);
|
||||
}
|
||||
|
|
@ -90,70 +66,40 @@ class WP_Add_To_Homescreen_Admin {
|
|||
include_once(plugin_dir_path(__FILE__) . 'lib/pages/admin.php');
|
||||
}
|
||||
|
||||
public function network_timeout_input() {
|
||||
$network_timeout = $this->options->get('offline_network_timeout') / 1000;
|
||||
public function icon_input() {
|
||||
$id = $this->options->n('icon');
|
||||
$current_icon = $this->options->get('addtohomescreen_icon');
|
||||
$explanation = __('Icon to appear in the Home Screen (size must be 144x144px)', 'add-to-homescreen');
|
||||
?>
|
||||
<input id="offline-network-timeout" type="number" name="offline_network_timeout"
|
||||
value="<?php echo $network_timeout; ?>" min="1" step="1"
|
||||
class="small-text"/> <?php _e('seconds before serving cached content', 'offline-content'); ?>
|
||||
<img id="icon-preview" style="width: 144px; height: 144px;"
|
||||
src="<?php echo $current_icon; ?>"
|
||||
alt="<?php echo $explanation; ?>"
|
||||
/>
|
||||
<p class"small-text"><?php echo $explanation; ?></p>
|
||||
<p>
|
||||
<input type="hidden" id="icon-url" name="<?php echo $id; ?>"
|
||||
value="<?php echo $current_icon; ?>"/>
|
||||
<input type="button" class="button" id="select-icon-button"
|
||||
value="<?php _e('Select...', 'add-to-homescreen'); ?>" />
|
||||
</p>
|
||||
<?php
|
||||
}
|
||||
|
||||
public function debug_sw_input() {
|
||||
$debug_sw = $this->options->get('offline_debug_sw');
|
||||
?>
|
||||
<label>
|
||||
<input id="offline-debug-sw" type="checkbox" name="offline_debug_sw"
|
||||
value="true" <?php echo $debug_sw ? 'checked="checked"' : ''; ?>/>
|
||||
<?php _e('Enable debug traces from the service worker in the console.', 'offline-content'); ?>
|
||||
</label>
|
||||
<?php
|
||||
}
|
||||
|
||||
public function precache_input() {
|
||||
$precache = $this->options->get('offline_precache');
|
||||
?>
|
||||
<label>
|
||||
<input id="offline-precache" type="checkbox" name="offline_precache[pages]"
|
||||
value="pages" <?php echo $precache['pages'] ? 'checked="checked"' : ''; ?>/>
|
||||
<?php _e('Precache published pages.', 'offline-content'); ?>
|
||||
</label>
|
||||
<?php
|
||||
}
|
||||
|
||||
public function sanitize_network_timeout($value) {
|
||||
$value = $value * 1000; // convert to milliseconds
|
||||
if (isset($value) && $value < 1000) {
|
||||
add_settings_error(
|
||||
'network_timeout',
|
||||
'incorrect-network-timeout',
|
||||
__('Network timeout must be at least 1 second.', 'offline-content')
|
||||
);
|
||||
$value = $this->options->get('offline_network_timeout');
|
||||
public function sanitize_icon($new_icon) {
|
||||
$current_icon = $this->options->get('addtohomescreen_icon');
|
||||
if (!isset($new_icon)) {
|
||||
return $current_icon;
|
||||
}
|
||||
return $value;
|
||||
}
|
||||
|
||||
public function sanitize_debug_sw($value) {
|
||||
return isset($value);
|
||||
}
|
||||
|
||||
public function sanitize_precache($value) {
|
||||
$sanitized = array();
|
||||
$sanitized['pages'] = isset($value['pages']);
|
||||
return $sanitized;
|
||||
}
|
||||
|
||||
public function print_serving_policy_info() {
|
||||
?>
|
||||
<p><?php _e('Offline plugin prefers to serve fresh living content from the Internet but it will serve cached content in case network is not available or not reliable.', 'offline-content');?></p>
|
||||
<?php
|
||||
}
|
||||
|
||||
public function print_precache_info() {
|
||||
?>
|
||||
<p><?php _e('Precache options allows you to customize which content will be available even if the user never visit it before.', 'offline-content');?></p>
|
||||
<?php
|
||||
if ($current_icon !== $new_icon) {
|
||||
WebAppManifestGenerator::getInstance()->set_field('icons', array(
|
||||
array(
|
||||
'src' => $new_icon,
|
||||
'sizes' => '144x144',
|
||||
'type' => 'image/png' // TODO: detect automatically
|
||||
)
|
||||
));
|
||||
}
|
||||
return $new_icon;
|
||||
}
|
||||
|
||||
public function add_dashboard_widgets() {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<?php
|
||||
|
||||
class WP_Add_To_Homescreen_Options {
|
||||
const OPTIONS_PREFIX = 'addtohomescreen_';
|
||||
|
||||
private static $instance;
|
||||
|
||||
private static $DEFAULTS = array(
|
||||
|
|
@ -8,6 +10,7 @@ class WP_Add_To_Homescreen_Options {
|
|||
|
||||
public static function get_options() {
|
||||
if(!self::$instance) {
|
||||
self::$DEFAULTS['addtohomescreen_icon'] = plugins_url('/lib/imgs/rocket.png', __FILE__);
|
||||
self::$instance = new self();
|
||||
}
|
||||
return self::$instance;
|
||||
|
|
@ -16,6 +19,10 @@ class WP_Add_To_Homescreen_Options {
|
|||
private function __construct() {
|
||||
}
|
||||
|
||||
public function n($option) {
|
||||
return self::OPTIONS_PREFIX . $option;
|
||||
}
|
||||
|
||||
public function set_defaults() {
|
||||
foreach (self::$DEFAULTS as $name => $value) {
|
||||
if (!get_option($name)) {
|
||||
|
|
@ -36,7 +43,9 @@ class WP_Add_To_Homescreen_Options {
|
|||
}
|
||||
|
||||
public function get($name) {
|
||||
return get_option($name);
|
||||
$option = $name;
|
||||
$value = get_option($option);
|
||||
return ($value !== false) ? $value : self::$DEFAULTS[$name];
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -36,7 +36,6 @@ class WP_Add_To_Homescreen_Plugin {
|
|||
$this->stats = WP_Add_To_Homescreen_Stats::get_stats();
|
||||
$this->options = WP_Add_To_Homescreen_Options::get_options();
|
||||
$this->set_urls();
|
||||
$this->generate_manifest();
|
||||
$this->generate_sw();
|
||||
add_action('wp_ajax_nopriv_' . self::STATS_ACTION, array($this, 'register_statistics'));
|
||||
add_action('wp_enqueue_scripts', array($this, 'enqueue_assets'));
|
||||
|
|
@ -59,21 +58,6 @@ class WP_Add_To_Homescreen_Plugin {
|
|||
$this->add2home_style = plugins_url('/lib/css/style.css', __FILE__);
|
||||
}
|
||||
|
||||
private function generate_manifest() {
|
||||
$manifest = WebAppManifestGenerator::getInstance();
|
||||
$manifest->set_field('name', get_bloginfo('name'));
|
||||
$manifest->set_field('display', 'standalone');
|
||||
$manifest->set_field('orientation', 'portrait');
|
||||
$manifest->set_field('start_url', home_url('/', 'relative'));
|
||||
$manifest->set_field('icons', array(
|
||||
array(
|
||||
'src' => plugins_url('/lib/imgs/rocket.png', __FILE__),
|
||||
'sizes' => '144x144',
|
||||
'type' => 'image/png'
|
||||
)
|
||||
));
|
||||
}
|
||||
|
||||
private function generate_sw() {
|
||||
// An empty SW only to meet Chrome add to homescreen banner requirements.
|
||||
WP_SW_Manager::get_manager()->sw()->add_content(function () { });
|
||||
|
|
@ -110,7 +94,7 @@ class WP_Add_To_Homescreen_Plugin {
|
|||
public function add_theme_and_icons() {
|
||||
$icon_path = plugins_url('/lib/imgs/rocket.png', __FILE__);
|
||||
echo '<meta name="theme-color" content="#d53c30" />';
|
||||
echo '<link rel="icon" sizes="144x144" href="' . $icon_path . '" />';
|
||||
echo '<link rel="icon" sizes="144x144" href="' . $this->options->get('addtohomescreen_icon') . '" />';
|
||||
}
|
||||
|
||||
public function register_statistics() {
|
||||
|
|
@ -118,10 +102,28 @@ class WP_Add_To_Homescreen_Plugin {
|
|||
}
|
||||
|
||||
public function activate() {
|
||||
$this->options->set_defaults();
|
||||
$this->generate_manifest();
|
||||
}
|
||||
|
||||
public static function deactivate() {
|
||||
}
|
||||
|
||||
private function generate_manifest() {
|
||||
$manifest = WebAppManifestGenerator::getInstance();
|
||||
$manifest->set_field('name', get_bloginfo('name'));
|
||||
$manifest->set_field('display', 'standalone');
|
||||
$manifest->set_field('orientation', 'portrait');
|
||||
$manifest->set_field('start_url', home_url('/', 'relative'));
|
||||
$manifest->set_field('icons', array(
|
||||
array(
|
||||
'src' => plugins_url('/lib/imgs/rocket.png', __FILE__),
|
||||
'sizes' => '144x144',
|
||||
'type' => 'image/png'
|
||||
)
|
||||
));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
?>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
(function (globals) {
|
||||
'use strict';
|
||||
|
||||
var window = globals;
|
||||
var document = globals.document;
|
||||
|
||||
function showMediaLibrary() {
|
||||
var media = globals.wp.media({ multiple: false });
|
||||
media.on('select', updateIconUrl.bind(media));
|
||||
media.open();
|
||||
}
|
||||
|
||||
function updateIconUrl() {
|
||||
var iconPreview = document.getElementById('icon-preview');
|
||||
var iconUrl = document.getElementById('icon-url');
|
||||
iconUrl.value = this.state().get('selection').first().toJSON().url;
|
||||
iconPreview.src = iconUrl.value;
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', function () {
|
||||
var iconButton = document.getElementById('select-icon-button');
|
||||
iconButton.onclick = function (event) {
|
||||
event.preventDefault();
|
||||
showMediaLibrary();
|
||||
};
|
||||
});
|
||||
})(window);
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<div class="wrap">
|
||||
<h1><?php _e('Add to Home Screen', 'add-to-homescreen'); ?></h1>
|
||||
<form method="post" action="options.php" enctype="multipart/form-data">
|
||||
<?php settings_fields(self::$options_group); ?>
|
||||
<?php do_settings_sections(self::$options_page_id); ?>
|
||||
<?php submit_button(__('Save Changes', 'add-to-homescreen'), 'primary'); ?>
|
||||
</form>
|
||||
</div>
|
||||
Загрузка…
Ссылка в новой задаче