Merge pull request #26 from delapuente/refactor-and-modularization
Refactor and modularization
This commit is contained in:
Salvador de la Puente González
Коммит
f6aaf1a30a
|
|
@ -15,6 +15,6 @@ before_script:
|
|||
- ./install-wp-tests.sh wordpress_test root '' localhost $WP_VERSION
|
||||
- composer install --working-dir=wp-add-to-homescreen
|
||||
- npm install -g bower
|
||||
- cd wp-add-to-homescreen && bower install
|
||||
- cd wp-add-to-homescreen && bower install && cd ..
|
||||
|
||||
script: make test
|
||||
|
|
|
|||
17
README.md
17
README.md
|
|
@ -3,6 +3,23 @@
|
|||
|
||||
[](https://travis-ci.org/mozilla/wp-add-to-homescreen)
|
||||
|
||||
## Installation
|
||||
|
||||
To test this plugin, follow these steps.
|
||||
|
||||
First clone the repository.
|
||||
|
||||
Once inside the repository you will need [composer](https://getcomposer.org) and [bower](http://bower.io/) installed. Go to the folder `wp-add-to-homescreen` inside the repository folder and run:
|
||||
|
||||
```
|
||||
$ composer install
|
||||
$ bower install
|
||||
```
|
||||
|
||||
Now you can copy (or symlink) the `wp-add-to-homescreen` folder inside your WordPress plugins directory.
|
||||
|
||||
Once installed, activate the plugin from the _Plugins_ menu in the _Dashboard_.
|
||||
|
||||
## Running tests
|
||||
|
||||
Install dependencies:
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<?php
|
||||
|
||||
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');
|
||||
|
||||
// Based on: https://codex.wordpress.org/Creating_Options_Pages#Example_.232
|
||||
|
|
@ -160,31 +161,33 @@ class WP_Add_To_Homescreen_Admin {
|
|||
}
|
||||
|
||||
public function print_widget() {
|
||||
$overlay_count = $this->options->get('addtohomescreen_stats_how-to-was-displayed');
|
||||
$stats = WP_Add_To_Homescreen_Stats::get_stats();
|
||||
$instructions_shown = $stats->get('instructions-shown');
|
||||
$prompted = $stats->get('prompted');
|
||||
$installed = $stats->get('installed');
|
||||
|
||||
echo '<p>';
|
||||
printf(_n(
|
||||
'<strong>%s</strong> user saw <em>how to add to home screen</em> instructions.',
|
||||
'<strong>%s</strong> users saw <em>how to add to home screen</em> instructions.',
|
||||
$overlay_count, 'add-to-homescreen'
|
||||
), number_format_i18n($overlay_count));
|
||||
$instructions_shown, 'add-to-homescreen'
|
||||
), number_format_i18n($instructions_shown));
|
||||
echo '</p>';
|
||||
|
||||
$prompted_count = $this->options->get('addtohomescreen_stats_prompted');
|
||||
echo '<p>';
|
||||
printf(_n(
|
||||
'<strong>%s</strong> user has been prompted about adding your site as an application.',
|
||||
'<strong>%s</strong> users have been prompted about adding your site as an application.',
|
||||
$prompted_count, 'add-to-homescreen'
|
||||
), number_format_i18n($prompted_count));
|
||||
$prompted, 'add-to-homescreen'
|
||||
), number_format_i18n($prompted));
|
||||
echo '</p>';
|
||||
|
||||
$installation_count = $this->options->get('addtohomescreen_stats_installed');
|
||||
echo '<p>';
|
||||
printf(_n(
|
||||
'<strong>%s</strong> user has added your site as an application.',
|
||||
'<strong>%s</strong> users have added your site as an application.',
|
||||
$installation_count, 'add-to-homescreen'
|
||||
), number_format_i18n($installation_count));
|
||||
$installed, 'add-to-homescreen'
|
||||
), number_format_i18n($installed));
|
||||
echo '</p>';
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,10 +4,6 @@ class WP_Add_To_Homescreen_Options {
|
|||
private static $instance;
|
||||
|
||||
private static $DEFAULTS = array(
|
||||
'offline_network_timeout' => 4000,
|
||||
'offline_cache_name' => 'wpOfflineContent',
|
||||
'offline_debug_sw' => false,
|
||||
'offline_precache' => array('pages' => true)
|
||||
);
|
||||
|
||||
public static function get_options() {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<?php
|
||||
|
||||
include_once(plugin_dir_path(__FILE__) . 'class-wp-add-to-homescreen-options.php');
|
||||
include_once(plugin_dir_path(__FILE__) . 'class-wp-add-to-homescreen-stats.php');
|
||||
include_once(plugin_dir_path(__FILE__) . 'vendor/marco-c/wp-web-app-manifest-generator/WebAppManifestGenerator.php');
|
||||
include_once(plugin_dir_path(__FILE__) . 'vendor/mozilla/wp-sw-manager/class-wp-sw-manager.php');
|
||||
|
||||
|
|
@ -18,6 +19,8 @@ class WP_Add_To_Homescreen_Plugin {
|
|||
|
||||
private $options;
|
||||
|
||||
private $stats;
|
||||
|
||||
private $add2home_script;
|
||||
|
||||
private $add2home_start_script;
|
||||
|
|
@ -30,6 +33,7 @@ class WP_Add_To_Homescreen_Plugin {
|
|||
|
||||
private function __construct() {
|
||||
$plugin_main_file = plugin_dir_path(__FILE__) . 'wp-add-to-homescreen.php';
|
||||
$this->stats = WP_Add_To_Homescreen_Stats::get_stats();
|
||||
$this->options = WP_Add_To_Homescreen_Options::get_options();
|
||||
$this->set_urls();
|
||||
$this->generate_manifest();
|
||||
|
|
@ -110,15 +114,7 @@ class WP_Add_To_Homescreen_Plugin {
|
|||
}
|
||||
|
||||
public function register_statistics() {
|
||||
$metric = $_POST['metric'];
|
||||
if (!$metric) {
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO: Isolate in a PHP class for statistics
|
||||
$current = $this->options->get('addtohomescreen_stats_' . $metric);
|
||||
$this->options->set('addtohomescreen_stats_' . $metric, $current + 1);
|
||||
wp_die();
|
||||
$this->stats->process_event($_POST['event'], $_POST);
|
||||
}
|
||||
|
||||
public function activate() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
<?php
|
||||
include_once(plugin_dir_path(__FILE__) . 'class-wp-add-to-homescreen-options.php');
|
||||
|
||||
class WP_Add_To_Homescreen_Stats {
|
||||
|
||||
private static $types_for_events = array(
|
||||
'prompted' => 'counter',
|
||||
'installed' => 'counter',
|
||||
'instructions-shown' => 'counter'
|
||||
);
|
||||
|
||||
private static $instance;
|
||||
|
||||
public static function get_stats() {
|
||||
if(!self::$instance) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
public static function get_option_name($event) {
|
||||
return 'addtohomescreen_event:' . $event;
|
||||
}
|
||||
|
||||
private $options;
|
||||
|
||||
private function __construct() {
|
||||
$this->options = WP_Add_To_Homescreen_Options::get_options();
|
||||
}
|
||||
|
||||
public function get($event) {
|
||||
return $this->options->get(self::get_option_name($event));
|
||||
}
|
||||
|
||||
public function process_event($event, $data) {
|
||||
if (!$event || !array_key_exists($event, self::$types_for_events)) {
|
||||
return;
|
||||
}
|
||||
|
||||
$type = self::$types_for_events[$event];
|
||||
$handler = "process_$type";
|
||||
$this->$handler($event, $data);
|
||||
wp_die();
|
||||
}
|
||||
|
||||
private function process_counter($event, $data) {
|
||||
$option_name = self::get_option_name($event);
|
||||
$current = $this->options->get($option_name) || 0;
|
||||
$this->options->set($option_name, $current + 1);
|
||||
}
|
||||
}
|
||||
|
||||
?>
|
||||
|
|
@ -11,70 +11,9 @@
|
|||
var wpAddToHomescreen = globals.wpAddToHomescreen = {
|
||||
storage: localforage.createInstance({ name: PRIVATE_NAME }),
|
||||
|
||||
stats: {
|
||||
registerPrompted: function () {
|
||||
return wpAddToHomescreen.storage.getItem('prompted')
|
||||
.then(function (isPrompted) {
|
||||
if (!isPrompted) {
|
||||
this.sendEvent('prompted');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
registerInstallation: function () {
|
||||
return wpAddToHomescreen.storage.getItem('installed')
|
||||
.then(function (isInstalled) {
|
||||
if (!isInstalled) {
|
||||
this.sendEvent('installed');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
sendEvent: function (metric, data) {
|
||||
data = data || {};
|
||||
data.metric = metric;
|
||||
var encodedData = (function () {
|
||||
var form = new FormData();
|
||||
Object.keys(data).forEach(function (key) { form.append(key, data[key]); });
|
||||
return form;
|
||||
})();
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', setup.statsEndPoint, true);
|
||||
xhr.send(encodedData);
|
||||
}
|
||||
},
|
||||
|
||||
overlay: {
|
||||
element: null,
|
||||
|
||||
show: function () {
|
||||
wpAddToHomescreen.overlay.element.classList.add('shown');
|
||||
document.body.classList.add('noscroll');
|
||||
this._registerHowToWasDisplayed();
|
||||
},
|
||||
|
||||
hide: function () {
|
||||
wpAddToHomescreen.overlay.element.classList.remove('shown');
|
||||
document.body.classList.remove('noscroll');
|
||||
},
|
||||
|
||||
_registerHowToWasDisplayed: function () {
|
||||
wpAddToHomescreen.storage.getItem('how-to-was-displayed')
|
||||
.then(function (instructionsDisplayed) {
|
||||
if (!instructionsDisplayed) {
|
||||
wpAddToHomescreen.stats.sendEvent('how-to-was-displayed');
|
||||
wpAddToHomescreen.storage.setItem('how-to-was-displayed', true);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
init: function (overlayContainer, buttonContainer) {
|
||||
if (this.isPlatformSupported()) {
|
||||
this.overlay.element = this.installOverlay(overlayContainer);
|
||||
this.overlay.init(overlayContainer, document.body);
|
||||
this.installAddToHomescreenButton(buttonContainer);
|
||||
window.addEventListener('beforeinstallprompt', this._onBeforeInstall.bind(this));
|
||||
}
|
||||
|
|
@ -83,7 +22,7 @@
|
|||
installAddToHomescreenButton: function (container) {
|
||||
var button = document.createElement('BUTTON');
|
||||
button.id = 'wp-add-to-homescreen-button';
|
||||
button.onclick = wpAddToHomescreen.overlay.show.bind(wpAddToHomescreen.overlay);
|
||||
button.onclick = wpAddToHomescreen.overlay.show;
|
||||
container.appendChild(button);
|
||||
window.addEventListener('scroll', function () {
|
||||
if (window.scrollY > 0) {
|
||||
|
|
@ -96,24 +35,14 @@
|
|||
return button;
|
||||
},
|
||||
|
||||
installOverlay: function (container) {
|
||||
var browser = this.detectBrowser();
|
||||
var platform = this.detectPlatform();
|
||||
var overlay = this.buildOverlay(browser, platform);
|
||||
container.appendChild(overlay);
|
||||
return overlay;
|
||||
},
|
||||
|
||||
_onBeforeInstall: function (event) {
|
||||
wpAddToHomescreen.stats.registerPrompted()
|
||||
.then(wpAddToHomescreen.storage.setItem('prompted', true));
|
||||
|
||||
wpAddToHomescreen.stats.logOnce('prompted');
|
||||
event.userChoice.then(function (choice) {
|
||||
if (choice.outcome === 'accepted') {
|
||||
wpAddToHomescreen.stats.registerInstallation()
|
||||
.then(wpAddToHomescreen.storage.setItem('installed', true));
|
||||
wpAddToHomescreen.stats.logOnce('installed');
|
||||
}
|
||||
});
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
isPlatformSupported: function () {
|
||||
|
|
@ -140,6 +69,54 @@
|
|||
|
||||
detectPlatform: function () {
|
||||
return 'android';
|
||||
}
|
||||
};
|
||||
|
||||
wpAddToHomescreen.stats = {
|
||||
|
||||
logOnce: function (event, data) {
|
||||
var lock = 'done-log-once-' + event;
|
||||
return wpAddToHomescreen.storage.getItem(lock)
|
||||
.then(function (isDone) {
|
||||
if (!isDone) {
|
||||
this.sendEvent(event, data);
|
||||
}
|
||||
return wpAddToHomescreen.storage.setItem(lock, true);
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
sendEvent: function (event, data) {
|
||||
data = data || {};
|
||||
data.event = event;
|
||||
var encodedData = (function () {
|
||||
var form = new FormData();
|
||||
Object.keys(data).forEach(function (key) { form.append(key, data[key]); });
|
||||
return form;
|
||||
})();
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', setup.statsEndPoint, true);
|
||||
xhr.send(encodedData);
|
||||
}
|
||||
};
|
||||
|
||||
wpAddToHomescreen.overlay = {
|
||||
element: null,
|
||||
|
||||
body: null,
|
||||
|
||||
init: function (overlayContainer, bodyElement) {
|
||||
this.show = this.show.bind(this);
|
||||
this.hide = this.hide.bind(this);
|
||||
this.body = bodyElement;
|
||||
this.element = this.installOverlay(overlayContainer);
|
||||
},
|
||||
|
||||
installOverlay: function (container) {
|
||||
var browser = wpAddToHomescreen.detectBrowser();
|
||||
var platform = wpAddToHomescreen.detectPlatform();
|
||||
var overlay = this.buildOverlay(browser, platform);
|
||||
container.appendChild(overlay);
|
||||
return overlay;
|
||||
},
|
||||
|
||||
buildOverlay: function (browser, platform) {
|
||||
|
|
@ -164,7 +141,7 @@
|
|||
var dismissButton = document.createElement('BUTTON');
|
||||
dismissButton.classList.add('dismiss');
|
||||
dismissButton.textContent = setup.dismissText;
|
||||
dismissButton.onclick = wpAddToHomescreen.overlay.hide.bind(wpAddToHomescreen.overlay);
|
||||
dismissButton.onclick = this.hide;
|
||||
|
||||
div.appendChild(instructionsSection);
|
||||
div.appendChild(explanationImage);
|
||||
|
|
@ -174,6 +151,17 @@
|
|||
return div;
|
||||
},
|
||||
|
||||
show: function () {
|
||||
this.element.classList.add('shown');
|
||||
this.body.classList.add('noscroll');
|
||||
wpAddToHomescreen.stats.logOnce('instructions-shown');
|
||||
},
|
||||
|
||||
hide: function () {
|
||||
this.element.classList.remove('shown');
|
||||
this.body.classList.remove('noscroll');
|
||||
},
|
||||
|
||||
getExplanationImage: function (platform) {
|
||||
return setup.libUrl + 'imgs/' + platform + '.png';
|
||||
},
|
||||
|
|
@ -187,7 +175,7 @@
|
|||
var buffer = document.createDocumentFragment();
|
||||
var p = document.createElement('P');
|
||||
p.innerHTML = '<strong>Long press</strong> the navigation bar and tap ' +
|
||||
'on <q>Add to Home Screen</q>.';
|
||||
'on <q>Add to Home Screen</q>.';
|
||||
buffer.appendChild(p);
|
||||
return buffer;
|
||||
},
|
||||
|
|
@ -195,7 +183,7 @@
|
|||
var buffer = document.createDocumentFragment();
|
||||
var p = document.createElement('P');
|
||||
p.innerHTML = '<strong>Tap on menu</strong>, then tap on <q>Add to ' +
|
||||
'Home Screen</q>.';
|
||||
'Home Screen</q>.';
|
||||
buffer.appendChild(p);
|
||||
return buffer;
|
||||
},
|
||||
|
|
@ -216,7 +204,5 @@
|
|||
return buffer;
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
})(window, wpAddToHomescreenSetup, isMobile, localforage);
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче