Merge pull request #47 from delapuente/improve-explanations
Improve explanations
This commit is contained in:
Salvador de la Puente González
Коммит
afccf74f2b
|
|
@ -27,6 +27,7 @@ class WP_Add_To_Homescreen_Admin {
|
|||
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'));
|
||||
add_action('update_option_' . $this->options->o('theme-color'), array($this, 'regenerate_icon'));
|
||||
}
|
||||
|
||||
public function admin_init() {
|
||||
|
|
@ -246,6 +247,12 @@ class WP_Add_To_Homescreen_Admin {
|
|||
echo '</p>';
|
||||
}
|
||||
|
||||
public function regenerate_icon($old_value, $new_value) {
|
||||
if ($old_value !== $new_value) {
|
||||
WP_Serve_File::getInstance()->invalidate_files(array('add2home.svg'));
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -34,12 +34,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(array(
|
||||
'icon' => array(
|
||||
'url' => plugins_url('/lib/imgs/rocket.png', __FILE__),
|
||||
'mime' => 'image/png'
|
||||
)
|
||||
));
|
||||
$this->options = WP_Add_To_Homescreen_Options::get_options();
|
||||
$this->set_urls();
|
||||
$this->generate_sw();
|
||||
add_action('wp_ajax_nopriv_' . self::STATS_ACTION, array($this, 'register_statistics'));
|
||||
|
|
@ -47,6 +42,8 @@ class WP_Add_To_Homescreen_Plugin {
|
|||
add_action('wp_head', array($this, 'add_theme_and_icons'));
|
||||
register_activation_hook($plugin_main_file, array($this, 'activate'));
|
||||
register_deactivation_hook($plugin_main_file, array($this, 'deactivate'));
|
||||
|
||||
WP_Serve_File::getInstance()->add_file('add2home.svg', array($this, 'generate_add2home_icon'));
|
||||
}
|
||||
|
||||
private function set_urls() {
|
||||
|
|
@ -80,11 +77,13 @@ class WP_Add_To_Homescreen_Plugin {
|
|||
false,
|
||||
true
|
||||
);
|
||||
$app_name = $this->options->get('app-name');
|
||||
wp_localize_script('add-to-homescreen', 'wpAddToHomescreenSetup', array(
|
||||
'libUrl' => plugins_url('lib/', __FILE__),
|
||||
'invitationText' => 'Make this site appear among your apps!',
|
||||
'dismissText' => 'Got it!',
|
||||
'statsEndPoint' => admin_url('/admin-ajax.php?action=' . self::STATS_ACTION)
|
||||
'title' => sprintf(__('Add %s to home screen', 'add-to-homescreen'), $app_name['value']),
|
||||
'dismissText' => __('Got it!', 'add-to-homescreen'),
|
||||
'statsEndPoint' => admin_url('/admin-ajax.php?action=' . self::STATS_ACTION),
|
||||
'add2homeIconUrl' => WP_Serve_File::getInstance()->get_relative_to_host_root_url('add2home.svg')
|
||||
));
|
||||
wp_enqueue_script('add-to-homescreen');
|
||||
wp_enqueue_script(
|
||||
|
|
@ -109,6 +108,7 @@ class WP_Add_To_Homescreen_Plugin {
|
|||
|
||||
public function activate() {
|
||||
$this->generate_manifest();
|
||||
WP_Serve_File::getInstance()->invalidate_files(array('add2home.svg'));
|
||||
}
|
||||
|
||||
public function deactivate() {
|
||||
|
|
@ -142,6 +142,15 @@ class WP_Add_To_Homescreen_Plugin {
|
|||
}
|
||||
}
|
||||
|
||||
public function generate_add2home_icon() {
|
||||
$theme_color = $this->options->get('theme-color');
|
||||
$svg = file_get_contents(plugin_dir_path(__FILE__) . 'lib/imgs/add2home.svg');
|
||||
return array(
|
||||
'content' => str_replace('theme-color', $theme_color, $svg),
|
||||
'contentType' => 'img/svg+xml'
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
?>
|
||||
|
|
@ -4,7 +4,7 @@ msgid ""
|
|||
msgstr ""
|
||||
"Project-Id-Version: Add to Home Screen 0.1.0\n"
|
||||
"Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/wp-add-to-homescreen\n"
|
||||
"POT-Creation-Date: 2016-03-21 13:22:09+00:00\n"
|
||||
"POT-Creation-Date: 2016-03-22 14:44:00+00:00\n"
|
||||
"MIME-Version: 1.0\n"
|
||||
"Content-Type: text/plain; charset=UTF-8\n"
|
||||
"Content-Transfer-Encoding: 8bit\n"
|
||||
|
|
@ -12,80 +12,88 @@ msgstr ""
|
|||
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
|
||||
"Language-Team: LANGUAGE <LL@li.org>\n"
|
||||
|
||||
#: class-wp-add-to-homescreen-admin.php:41
|
||||
#: class-wp-add-to-homescreen-admin.php:42
|
||||
msgid "UI Configuration"
|
||||
msgstr ""
|
||||
|
||||
#: class-wp-add-to-homescreen-admin.php:48
|
||||
#: class-wp-add-to-homescreen-admin.php:49
|
||||
msgid "App name"
|
||||
msgstr ""
|
||||
|
||||
#: class-wp-add-to-homescreen-admin.php:56
|
||||
#: class-wp-add-to-homescreen-admin.php:57
|
||||
msgid "Theme color"
|
||||
msgstr ""
|
||||
|
||||
#: class-wp-add-to-homescreen-admin.php:64
|
||||
#: class-wp-add-to-homescreen-admin.php:65
|
||||
msgid "Home Screen icon"
|
||||
msgstr ""
|
||||
|
||||
#: class-wp-add-to-homescreen-admin.php:83 lib/pages/admin.php:2
|
||||
#: class-wp-add-to-homescreen-admin.php:84 lib/pages/admin.php:2
|
||||
msgid "Add to Home Screen"
|
||||
msgstr ""
|
||||
|
||||
#: class-wp-add-to-homescreen-admin.php:100
|
||||
#: class-wp-add-to-homescreen-admin.php:101
|
||||
msgid "Use the Site Title"
|
||||
msgstr ""
|
||||
|
||||
#: class-wp-add-to-homescreen-admin.php:103
|
||||
#: class-wp-add-to-homescreen-admin.php:104
|
||||
msgid "Custom:"
|
||||
msgstr ""
|
||||
|
||||
#: class-wp-add-to-homescreen-admin.php:107
|
||||
#: class-wp-add-to-homescreen-admin.php:108
|
||||
msgid "This name will appear in your home screen labeling the icon so if you choose a custom name, try to choose one fitting the field provided above."
|
||||
msgstr ""
|
||||
|
||||
#: class-wp-add-to-homescreen-admin.php:119
|
||||
#: class-wp-add-to-homescreen-admin.php:120
|
||||
msgid "The color for the overlay showing the instructions. Those browsers supporting themes will tint their UI with this color."
|
||||
msgstr ""
|
||||
|
||||
#: class-wp-add-to-homescreen-admin.php:126
|
||||
#: class-wp-add-to-homescreen-admin.php:127
|
||||
msgid "Icon to appear in the Home Screen (size must be 144x144px)"
|
||||
msgstr ""
|
||||
|
||||
#: class-wp-add-to-homescreen-admin.php:139
|
||||
#: class-wp-add-to-homescreen-admin.php:140
|
||||
msgid "Select..."
|
||||
msgstr ""
|
||||
|
||||
#: class-wp-add-to-homescreen-admin.php:189
|
||||
#: class-wp-add-to-homescreen-admin.php:190
|
||||
msgid "The name must not be empty."
|
||||
msgstr ""
|
||||
|
||||
#: class-wp-add-to-homescreen-admin.php:210
|
||||
#: class-wp-add-to-homescreen-admin.php:211
|
||||
msgid "Incorrect application name."
|
||||
msgstr ""
|
||||
|
||||
#: class-wp-add-to-homescreen-admin.php:215
|
||||
#: class-wp-add-to-homescreen-admin.php:216
|
||||
msgid "Add To Home Screen"
|
||||
msgstr ""
|
||||
|
||||
#: class-wp-add-to-homescreen-admin.php:225
|
||||
#: class-wp-add-to-homescreen-admin.php:226
|
||||
msgid "<strong>%s</strong> user saw <em>how to add to home screen</em> instructions."
|
||||
msgid_plural "<strong>%s</strong> users saw <em>how to add to home screen</em> instructions."
|
||||
msgstr[0] ""
|
||||
msgstr[1] ""
|
||||
|
||||
#: class-wp-add-to-homescreen-admin.php:233
|
||||
#: class-wp-add-to-homescreen-admin.php:234
|
||||
msgid "<strong>%s</strong> user has been prompted about adding your site as an application."
|
||||
msgid_plural "<strong>%s</strong> users have been prompted about adding your site as an application."
|
||||
msgstr[0] ""
|
||||
msgstr[1] ""
|
||||
|
||||
#: class-wp-add-to-homescreen-admin.php:241
|
||||
#: class-wp-add-to-homescreen-admin.php:242
|
||||
msgid "<strong>%s</strong> user has added your site as an application."
|
||||
msgid_plural "<strong>%s</strong> users have added your site as an application."
|
||||
msgstr[0] ""
|
||||
msgstr[1] ""
|
||||
|
||||
#: class-wp-add-to-homescreen-plugin.php:83
|
||||
msgid "Add %s to home screen"
|
||||
msgstr ""
|
||||
|
||||
#: class-wp-add-to-homescreen-plugin.php:84
|
||||
msgid "Got it!"
|
||||
msgstr ""
|
||||
|
||||
#: lib/pages/admin.php:6
|
||||
msgid "Save Changes"
|
||||
msgstr ""
|
||||
|
|
|
|||
|
|
@ -9,25 +9,76 @@
|
|||
padding: 1rem;
|
||||
pointer-events: none;
|
||||
z-index: 200000;
|
||||
opacity: 0.0;
|
||||
transition: opacity 400ms;
|
||||
transform: translateY(100%);
|
||||
transition: transform 700ms;
|
||||
color: white;
|
||||
background-color: #D53C30;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#wp-add-to-homescreen-overlay.shown {
|
||||
opacity: 1.0;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#wp-add-to-homescreen-overlay .invitation {
|
||||
font-size: 1.3rem;
|
||||
text-align: center;
|
||||
#wp-add-to-homescreen-overlay > div {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#wp-add-to-homescreen-overlay .arrow {
|
||||
font-size: 30px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#wp-add-to-homescreen-overlay .arrow.top {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#wp-add-to-homescreen-overlay .arrow.left {
|
||||
left: 1%;
|
||||
}
|
||||
|
||||
#wp-add-to-homescreen-overlay .arrow.right {
|
||||
right: 2%;
|
||||
}
|
||||
|
||||
#wp-add-to-homescreen-overlay .arrow.bottom {
|
||||
bottom: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
#wp-add-to-homescreen-overlay .arrow.center {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
#wp-add-to-homescreen-overlay .arrow.bottom.center {
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(180deg);
|
||||
}
|
||||
|
||||
#wp-add-to-homescreen-overlay h2 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#wp-add-to-homescreen-overlay .instructions {
|
||||
font-size: 1.3rem;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#wp-add-to-homescreen-overlay button {
|
||||
box-shadow: #BBB 0 2px 0;
|
||||
margin-top: 1rem;
|
||||
padding: 8px 25px;
|
||||
line-height: normal;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#wp-add-to-homescreen-overlay img {
|
||||
|
|
@ -55,14 +106,14 @@ body.noscroll {
|
|||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
width: 5rem;
|
||||
background-image: url('../imgs/add2home.svg');
|
||||
height: 5rem;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-color: transparent;
|
||||
background-size: cover;
|
||||
opacity: 1.0;
|
||||
transition: opacity 400ms;
|
||||
pointer-events: auto;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#wp-add-to-homescreen-button.hidden {
|
||||
|
|
|
|||
|
|
@ -31,6 +31,38 @@
|
|||
id="path14539"
|
||||
inkscape:connector-curvature="0" />
|
||||
</symbol>
|
||||
<filter
|
||||
style="color-interpolation-filters:sRGB;"
|
||||
inkscape:label="Drop Shadow"
|
||||
id="filter22048">
|
||||
<feFlood
|
||||
flood-opacity="0.313726"
|
||||
flood-color="rgb(0,0,0)"
|
||||
result="flood"
|
||||
id="feFlood22050" />
|
||||
<feComposite
|
||||
in="flood"
|
||||
in2="SourceGraphic"
|
||||
operator="in"
|
||||
result="composite1"
|
||||
id="feComposite22052" />
|
||||
<feGaussianBlur
|
||||
in="composite1"
|
||||
stdDeviation="0.8"
|
||||
result="blur"
|
||||
id="feGaussianBlur22054" />
|
||||
<feOffset
|
||||
dx="1.94289e-16"
|
||||
dy="2.77556e-17"
|
||||
result="offset"
|
||||
id="feOffset22056" />
|
||||
<feComposite
|
||||
in="SourceGraphic"
|
||||
in2="offset"
|
||||
operator="over"
|
||||
result="composite2"
|
||||
id="feComposite22058" />
|
||||
</filter>
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
|
|
@ -40,7 +72,7 @@
|
|||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="5.6"
|
||||
inkscape:cx="-0.95402618"
|
||||
inkscape:cx="-1.1325976"
|
||||
inkscape:cy="-10.106878"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
|
|
@ -62,7 +94,7 @@
|
|||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
|
|
@ -71,35 +103,33 @@
|
|||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-358.04724,-498.5748)">
|
||||
<rect
|
||||
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||
id="rect22002"
|
||||
width="22.67857"
|
||||
height="30.17857"
|
||||
x="371.44009"
|
||||
y="508.35968" />
|
||||
<g
|
||||
id="use27067"
|
||||
style="fill:#000000;stroke:#000000"
|
||||
style="fill:theme-color;stroke:#ffffff;stroke-opacity:1;filter:url(#filter22048)"
|
||||
transform="translate(358.85039,499.37795)">
|
||||
<title
|
||||
id="title27087">Smartphone</title>
|
||||
<path
|
||||
id="path27089"
|
||||
style="stroke:none"
|
||||
d="M 34,2.02 14,2 c -2.21,0 -4,1.79 -4,4 l 0,36 c 0,2.21 1.79,4 4,4 l 20,0 c 2.21,0 4,-1.79 4,-4 L 38,6 C 38,3.79 36.21,2.02 34,2.02 Z m 0,35.98 -20,0 0,-28 20,0 0,28 z"
|
||||
inkscape:connector-curvature="0" />
|
||||
style="stroke:#ffffff;stroke-opacity:1"
|
||||
d="M 34,2.02 14,2 c -2.21,0 -4,1.79 -4,4 l 0,36 c 0,2.21 1.79,4 4,4 l 20,0 c 2.21,0 4,-1.79 4,-4 L 38,6 C 38,3.79 36.21,2.02 34,2.02 Z"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccssssssc" />
|
||||
</g>
|
||||
<rect
|
||||
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||
id="rect22002"
|
||||
width="22.67857"
|
||||
height="30.17857"
|
||||
x="371.51111"
|
||||
y="508.28867" />
|
||||
<g
|
||||
style="font-style:normal;font-weight:normal;font-size:17.08722687px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:theme-color;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
id="text27081">
|
||||
<path
|
||||
d="m 383.55123,518.02148 0,4.64726 4.64726,0 0,1.41838 -4.64726,0 0,4.64725 -1.40169,0 0,-4.64725 -4.64726,0 0,-1.41838 4.64726,0 0,-4.64726 1.40169,0 z"
|
||||
style=""
|
||||
id="path21860" />
|
||||
</g>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:17.08722687px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
x="375.69177"
|
||||
y="528.73438"
|
||||
id="text27081"
|
||||
sodipodi:linespacing="125%"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan27083"
|
||||
x="375.69177"
|
||||
y="528.73438">+</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 3.9 KiB После Ширина: | Высота: | Размер: 4.8 KiB |
|
|
@ -23,6 +23,7 @@
|
|||
var button = document.createElement('BUTTON');
|
||||
button.id = 'wp-add-to-homescreen-button';
|
||||
button.onclick = wpAddToHomescreen.overlay.show;
|
||||
button.style.backgroundImage = 'url(' + setup.add2homeIconUrl + ')';
|
||||
container.appendChild(button);
|
||||
window.addEventListener('scroll', function () {
|
||||
if (window.scrollY > 0) {
|
||||
|
|
@ -100,6 +101,8 @@
|
|||
};
|
||||
|
||||
wpAddToHomescreen.overlay = {
|
||||
container: null,
|
||||
|
||||
element: null,
|
||||
|
||||
body: null,
|
||||
|
|
@ -108,6 +111,7 @@
|
|||
this.show = this.show.bind(this);
|
||||
this.hide = this.hide.bind(this);
|
||||
this.body = bodyElement;
|
||||
this.container = overlayContainer;
|
||||
this.element = this.installOverlay(overlayContainer);
|
||||
},
|
||||
|
||||
|
|
@ -120,40 +124,48 @@
|
|||
},
|
||||
|
||||
buildOverlay: function (browser, platform) {
|
||||
var bgColor = document.querySelector('meta[name=theme-color]').getAttribute('content');
|
||||
var textColor = this.getContrastedColor(bgColor);
|
||||
var themeColor = document.querySelector('meta[name=theme-color]').getAttribute('content');
|
||||
var contrastedColor = this.getContrastedColor(themeColor);
|
||||
|
||||
var div = document.createElement('DIV');
|
||||
div.id = 'wp-add-to-homescreen-overlay';
|
||||
div.style.backgroundColor = bgColor;
|
||||
div.style.color = textColor;
|
||||
var overlay = document.createElement('SECTION');
|
||||
overlay.id = 'wp-add-to-homescreen-overlay';
|
||||
overlay.style.backgroundColor = themeColor;
|
||||
overlay.style.color = contrastedColor;
|
||||
|
||||
var invitationParagraph = document.createElement('P');
|
||||
invitationParagraph.classList.add('invitation');
|
||||
invitationParagraph.textContent = setup.invitationText;
|
||||
var wrapper = document.createElement('DIV');
|
||||
|
||||
var explanationImage = document.createElement('IMG');
|
||||
explanationImage.class = 'explanation';
|
||||
explanationImage.src = this.getExplanationImage(platform);
|
||||
var title = document.createElement('H2');
|
||||
title.textContent = setup.title;
|
||||
|
||||
var hr = document.createElement('hr');
|
||||
hr.class = 'separator';
|
||||
var instructions = this.getInstructions(browser);
|
||||
var explanation = instructions[0];
|
||||
var arrowHint = { vertical: instructions[1], horizontal: instructions[2] };
|
||||
|
||||
var arrow = document.createElement('DIV');
|
||||
arrow.classList.add('arrow');
|
||||
arrow.classList.add(arrowHint.vertical);
|
||||
arrow.classList.add(arrowHint.horizontal);
|
||||
arrow.textContent = "▲";
|
||||
arrow.style.color = contrastedColor;
|
||||
|
||||
var instructionsSection = document.createElement('SECTION');
|
||||
instructionsSection.classList.add('instructions');
|
||||
instructionsSection.appendChild(this.getInstructions(browser));
|
||||
instructionsSection.appendChild(explanation);
|
||||
|
||||
var dismissButton = document.createElement('BUTTON');
|
||||
dismissButton.classList.add('dismiss');
|
||||
dismissButton.textContent = setup.dismissText;
|
||||
dismissButton.style.color = themeColor;
|
||||
dismissButton.style.backgroundColor = contrastedColor;
|
||||
dismissButton.onclick = this.hide;
|
||||
|
||||
div.appendChild(instructionsSection);
|
||||
div.appendChild(explanationImage);
|
||||
div.appendChild(invitationParagraph);
|
||||
div.appendChild(dismissButton);
|
||||
wrapper.appendChild(arrow);
|
||||
wrapper.appendChild(title);
|
||||
wrapper.appendChild(instructionsSection);
|
||||
wrapper.appendChild(dismissButton);
|
||||
overlay.appendChild(wrapper);
|
||||
|
||||
return div;
|
||||
return overlay;
|
||||
},
|
||||
|
||||
// http://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color#answer-3943023
|
||||
|
|
@ -179,16 +191,14 @@
|
|||
show: function () {
|
||||
this.element.classList.add('shown');
|
||||
this.body.classList.add('noscroll');
|
||||
this.preventScroll();
|
||||
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';
|
||||
this.restoreScroll();
|
||||
},
|
||||
|
||||
getInstructions: function (browser) {
|
||||
|
|
@ -202,23 +212,23 @@
|
|||
p.innerHTML = '<strong>Long press</strong> the navigation bar and tap ' +
|
||||
'on <q>Add to Home Screen</q>.';
|
||||
buffer.appendChild(p);
|
||||
return buffer;
|
||||
return [buffer, 'top', 'right'];
|
||||
},
|
||||
chrome: function (setup) {
|
||||
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>.';
|
||||
p.innerHTML = '<strong>Tap on ⋮</strong> and then tap on <q>Add to ' +
|
||||
'Home screen</q>.';
|
||||
buffer.appendChild(p);
|
||||
return buffer;
|
||||
return [buffer, 'top', 'right'];
|
||||
},
|
||||
opera: function (setup) {
|
||||
var buffer = document.createDocumentFragment();
|
||||
var p = document.createElement('P');
|
||||
p.innerHTML = '<strong>Tap on the + icon</strong>, then tap on <q>Add to ' +
|
||||
'Home Screen</q>.';
|
||||
'home screen</q>.';
|
||||
buffer.appendChild(p);
|
||||
return buffer;
|
||||
return [buffer, 'top', 'left'];
|
||||
},
|
||||
safari: function (setup) {
|
||||
var buffer = document.createDocumentFragment();
|
||||
|
|
@ -226,8 +236,24 @@
|
|||
p.innerHTML = '<strong>Tap on the share icon</strong>, then tap on <q>Add to ' +
|
||||
'Home Screen</q>.';
|
||||
buffer.appendChild(p);
|
||||
return buffer;
|
||||
return [buffer, 'bottom', 'center'];
|
||||
}
|
||||
},
|
||||
|
||||
preventScroll: function () {
|
||||
['scroll', 'touchmove', 'mousewheel'].forEach(function (event) {
|
||||
this.container.addEventListener(event, this.noScroll, true);
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
restoreScroll: function () {
|
||||
['scroll', 'touchmove', 'mousewheel'].forEach(function (event) {
|
||||
this.container.removeEventListener(event, this.noScroll, true);
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
noScroll: function (evt) {
|
||||
evt.preventDefault();
|
||||
}
|
||||
};
|
||||
})(window, wpAddToHomescreenSetup, isMobile, localforage);
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ Complete native experience by offering [push notifications](https://es.wordpress
|
|||
Alternatively,
|
||||
|
||||
1. Clone or download the project repository
|
||||
2. [Install bower](http://bower.io/) and make `bower install` inside the `wp-add-to-homescreen` folder of the repository.
|
||||
2. [Install bower](http://bower.io/) and [composer](https://getcomposer.org/), enter the `wp-add-to-homescreen` folder of the repository and run `composer install && bower install`.
|
||||
3. Copy (or symlink) the `wp-add-to-homescreen` folder inside your WordPress installation plugins directory.
|
||||
4. Enable the plugin from the admin panel.
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче