development version 2.1.1d3 with experimental optional alternative tooltip implementation in response to user

git-svn-id: https://plugins.svn.wordpress.org/footnotes/trunk@2416861 b8457f37-d9ea-0310-8a92-e5e31aec5664
This commit is contained in:
pewgeuges 2020-11-11 20:49:44 +00:00
parent c05c96a6fd
commit 5a8e30e6ea
11 changed files with 163 additions and 90 deletions

View file

@ -322,6 +322,9 @@ class MCI_Footnotes_Layout_Settings extends MCI_Footnotes_LayoutEngine {
"label-enable" => $this->addLabel(MCI_Footnotes_Settings::C_BOOL_FOOTNOTES_MOUSE_OVER_BOX_ENABLED, __("Enable the mouse-over box", MCI_Footnotes_Config::C_STR_PLUGIN_NAME)), "label-enable" => $this->addLabel(MCI_Footnotes_Settings::C_BOOL_FOOTNOTES_MOUSE_OVER_BOX_ENABLED, __("Enable the mouse-over box", MCI_Footnotes_Config::C_STR_PLUGIN_NAME)),
"enable" => $this->addSelectBox(MCI_Footnotes_Settings::C_BOOL_FOOTNOTES_MOUSE_OVER_BOX_ENABLED, $l_arr_Enabled), "enable" => $this->addSelectBox(MCI_Footnotes_Settings::C_BOOL_FOOTNOTES_MOUSE_OVER_BOX_ENABLED, $l_arr_Enabled),
"label-alternative" => $this->addLabel(MCI_Footnotes_Settings::C_BOOL_FOOTNOTES_MOUSE_OVER_BOX_ALTERNATIVE, __("Use alternative tooltip implementation", MCI_Footnotes_Config::C_STR_PLUGIN_NAME)),
"alternative" => $this->addSelectBox(MCI_Footnotes_Settings::C_BOOL_FOOTNOTES_MOUSE_OVER_BOX_ALTERNATIVE, $l_arr_Enabled),
"label-activate-excerpt" => $this->addLabel(MCI_Footnotes_Settings::C_BOOL_FOOTNOTES_MOUSE_OVER_BOX_EXCERPT_ENABLED, __("Display only an excerpt", MCI_Footnotes_Config::C_STR_PLUGIN_NAME)), "label-activate-excerpt" => $this->addLabel(MCI_Footnotes_Settings::C_BOOL_FOOTNOTES_MOUSE_OVER_BOX_EXCERPT_ENABLED, __("Display only an excerpt", MCI_Footnotes_Config::C_STR_PLUGIN_NAME)),
"activate-excerpt" => $this->addSelectBox(MCI_Footnotes_Settings::C_BOOL_FOOTNOTES_MOUSE_OVER_BOX_EXCERPT_ENABLED, $l_arr_Enabled), "activate-excerpt" => $this->addSelectBox(MCI_Footnotes_Settings::C_BOOL_FOOTNOTES_MOUSE_OVER_BOX_EXCERPT_ENABLED, $l_arr_Enabled),

View file

@ -151,7 +151,7 @@ class MCI_Footnotes {
'mci-footnotes-css-public', 'mci-footnotes-css-public',
plugins_url('../css/public.css', __FILE__), plugins_url('../css/public.css', __FILE__),
'', '',
'2.1.1d2' '2.1.1d3'
); );
} }

View file

@ -10,6 +10,7 @@
* v2.0.4 2020-11-02T2115+0100 * v2.0.4 2020-11-02T2115+0100
* v2.0.7 2020-11-06T1342+0100 * v2.0.7 2020-11-06T1342+0100
* v2.1.0 2020-11-08T2149+0100 * v2.1.0 2020-11-08T2149+0100
* V2.2.0 2020-11-11T1819+0100 ######## set to '' line 416 before release! ######################
*/ */
@ -28,8 +29,8 @@ class MCI_Footnotes_Settings {
* *
* @since 2.0.9 * @since 2.0.9
* @var string * @var string
* *
* 2020-11-08T2106+0100 * 2020-11-08T2106+0100
*/ */
const C_STR_FOOTNOTES_TOOLTIP_READON_LABEL = "footnote_inputfield_readon_label"; const C_STR_FOOTNOTES_TOOLTIP_READON_LABEL = "footnote_inputfield_readon_label";
@ -168,6 +169,16 @@ class MCI_Footnotes_Settings {
*/ */
const C_BOOL_FOOTNOTES_MOUSE_OVER_BOX_ENABLED = "footnote_inputfield_custom_mouse_over_box_enabled"; const C_BOOL_FOOTNOTES_MOUSE_OVER_BOX_ENABLED = "footnote_inputfield_custom_mouse_over_box_enabled";
/**
* Settings Container Key for alternative tooltip implementation
*
* @since 2.2.0
* @var string
*
* 2020-11-11T1817+0100
*/
const C_BOOL_FOOTNOTES_MOUSE_OVER_BOX_ALTERNATIVE = "footnote_inputfield_custom_mouse_over_box_alternative";
/** /**
* Settings Container Key for the mouse-over box to display only an excerpt. * Settings Container Key for the mouse-over box to display only an excerpt.
* *
@ -393,57 +404,58 @@ class MCI_Footnotes_Settings {
self::C_BOOL_FOOTNOTES_EXPERT_MODE => 'no' self::C_BOOL_FOOTNOTES_EXPERT_MODE => 'no'
), ),
"footnotes_storage_custom" => array( "footnotes_storage_custom" => array(
// The default footnote referrer surroundings should be square brackets: // The default footnote referrer surroundings should be square brackets:
// * as in English typesetting; // * as in English typesetting;
// * for better UX thanks to a more button-like appearance; // * for better UX thanks to a more button-like appearance;
// * for stylistic consistency with the expand-collapse button // * for stylistic consistency with the expand-collapse button
self::C_STR_FOOTNOTES_STYLING_BEFORE => '[', self::C_STR_FOOTNOTES_STYLING_BEFORE => '[',
self::C_STR_FOOTNOTES_STYLING_AFTER => ']', self::C_STR_FOOTNOTES_STYLING_AFTER => ']',
self::C_BOOL_FOOTNOTES_MOUSE_OVER_BOX_ENABLED => 'yes', self::C_BOOL_FOOTNOTES_MOUSE_OVER_BOX_ENABLED => 'yes',
self::C_BOOL_FOOTNOTES_MOUSE_OVER_BOX_ALTERNATIVE => 'yes',
// The mouse over content truncation should be enabled by default
// to raise awareness of the functionality and to prevent the screen // The mouse over content truncation should be enabled by default
// from being filled at mouse-over, and to allow the Continue reading: // to raise awareness of the functionality and to prevent the screen
self::C_BOOL_FOOTNOTES_MOUSE_OVER_BOX_EXCERPT_ENABLED => 'yes', // from being filled at mouse-over, and to allow the Continue reading:
self::C_BOOL_FOOTNOTES_MOUSE_OVER_BOX_EXCERPT_ENABLED => 'yes',
// The truncation length is raised from 150 to 200 chars:
self::C_INT_FOOTNOTES_MOUSE_OVER_BOX_EXCERPT_LENGTH => 200, // The truncation length is raised from 150 to 200 chars:
self::C_INT_FOOTNOTES_MOUSE_OVER_BOX_EXCERPT_LENGTH => 200,
// The default position should not be lateral because of the risk
// the box gets squeezed between note anchor at line end and window edge, // The default position should not be lateral because of the risk
// and top because reading at the bottom of the window is more likely: // the box gets squeezed between note anchor at line end and window edge,
self::C_STR_FOOTNOTES_MOUSE_OVER_BOX_POSITION => 'top center', // and top because reading at the bottom of the window is more likely:
self::C_STR_FOOTNOTES_MOUSE_OVER_BOX_POSITION => 'top center',
self::C_INT_FOOTNOTES_MOUSE_OVER_BOX_OFFSET_X => 0,
// The vertical offset must be negative for the box not to cover self::C_INT_FOOTNOTES_MOUSE_OVER_BOX_OFFSET_X => 0,
// the current line of text (web coordinates origin is top left): // The vertical offset must be negative for the box not to cover
self::C_INT_FOOTNOTES_MOUSE_OVER_BOX_OFFSET_Y => -7, // the current line of text (web coordinates origin is top left):
self::C_INT_FOOTNOTES_MOUSE_OVER_BOX_OFFSET_Y => -7,
self::C_STR_FOOTNOTES_MOUSE_OVER_BOX_COLOR => '',
// The mouse over box shouldnt feature a colored background self::C_STR_FOOTNOTES_MOUSE_OVER_BOX_COLOR => '',
// by default, due to diverging user preferences. White is neutral: // The mouse over box shouldnt feature a colored background
self::C_STR_FOOTNOTES_MOUSE_OVER_BOX_BACKGROUND => '#ffffff', // by default, due to diverging user preferences. White is neutral:
self::C_STR_FOOTNOTES_MOUSE_OVER_BOX_BACKGROUND => '#ffffff',
self::C_INT_FOOTNOTES_MOUSE_OVER_BOX_BORDER_WIDTH => 1, self::C_INT_FOOTNOTES_MOUSE_OVER_BOX_BORDER_WIDTH => 1,
self::C_STR_FOOTNOTES_MOUSE_OVER_BOX_BORDER_COLOR => '#cccc99', self::C_STR_FOOTNOTES_MOUSE_OVER_BOX_BORDER_COLOR => '#cccc99',
// The mouse over box corners mustnt be rounded as that is outdated: // The mouse over box corners mustnt be rounded as that is outdated:
self::C_INT_FOOTNOTES_MOUSE_OVER_BOX_BORDER_RADIUS => 0, self::C_INT_FOOTNOTES_MOUSE_OVER_BOX_BORDER_RADIUS => 0,
// The width should be limited to start with, for the box to have shape: // The width should be limited to start with, for the box to have shape:
self::C_INT_FOOTNOTES_MOUSE_OVER_BOX_MAX_WIDTH => 450, self::C_INT_FOOTNOTES_MOUSE_OVER_BOX_MAX_WIDTH => 450,
self::C_STR_FOOTNOTES_MOUSE_OVER_BOX_SHADOW_COLOR => '#666666', self::C_STR_FOOTNOTES_MOUSE_OVER_BOX_SHADOW_COLOR => '#666666',
self::C_STR_HYPERLINK_ARROW => '↑', self::C_STR_HYPERLINK_ARROW => '↑',
self::C_STR_HYPERLINK_ARROW_USER_DEFINED => '', self::C_STR_HYPERLINK_ARROW_USER_DEFINED => '',
self::C_STR_CUSTOM_CSS => '' self::C_STR_CUSTOM_CSS => ''
), ),
// These should all be enabled by default to prevent users from // These should all be enabled by default to prevent users from
// thinking at first that the feature is broken in post titles. // thinking at first that the feature is broken in post titles.
// See <https://wordpress.org/support/topic/more-feature-ideas/> // See <https://wordpress.org/support/topic/more-feature-ideas/>
// In titles, footnotes are functionally pointless in WordPress. // In titles, footnotes are functionally pointless in WordPress.
"footnotes_storage_expert" => array( "footnotes_storage_expert" => array(
self::C_BOOL_EXPERT_LOOKUP_THE_TITLE => 'yes', self::C_BOOL_EXPERT_LOOKUP_THE_TITLE => 'yes',
self::C_BOOL_EXPERT_LOOKUP_THE_CONTENT => 'yes', self::C_BOOL_EXPERT_LOOKUP_THE_CONTENT => 'yes',

View file

@ -120,7 +120,7 @@ class MCI_Footnotes_Task {
<style type="text/css" media="screen"> <style type="text/css" media="screen">
<?php <?php
echo MCI_Footnotes_Settings::instance()->get(MCI_Footnotes_Settings::C_STR_CUSTOM_CSS); echo MCI_Footnotes_Settings::instance()->get(MCI_Footnotes_Settings::C_STR_CUSTOM_CSS);
echo '.footnote_tooltip { display: none; padding: 12px; font-size: 13px;'; echo '.footnote_tooltip {';
if (!empty($l_str_Color)) { if (!empty($l_str_Color)) {
printf(" color: %s;", $l_str_Color); printf(" color: %s;", $l_str_Color);
} }
@ -146,8 +146,14 @@ class MCI_Footnotes_Task {
} }
echo '}'; echo '}';
?> ?>
</style> </style>
<?php <?php
if (MCI_Footnotes_Convert::toBool(MCI_Footnotes_Settings::instance()->get(MCI_Footnotes_Settings::C_BOOL_FOOTNOTES_MOUSE_OVER_BOX_ALTERNATIVE))) {
echo '<script content="text/javascript">' . "\r\n";
echo "\t" . 'function footnoteTooltipShow(footnoteTooltipId) { document.getElementById(footnoteTooltipId).style.display = "block"; };' . "\r\n";
echo "\t" . 'function footnoteTooltipHide(footnoteTooltipId) { document.getElementById(footnoteTooltipId).style.display = "none"; }' . "\r\n";
echo "</script>\r\n";
};
} }
/** /**
@ -353,7 +359,11 @@ class MCI_Footnotes_Task {
if (!$p_bool_HideFootnotesText) { if (!$p_bool_HideFootnotesText) {
// load template file // load template file
$l_obj_Template = new MCI_Footnotes_Template(MCI_Footnotes_Template::C_STR_PUBLIC, "footnote"); if (MCI_Footnotes_Convert::toBool(MCI_Footnotes_Settings::instance()->get(MCI_Footnotes_Settings::C_BOOL_FOOTNOTES_MOUSE_OVER_BOX_ALTERNATIVE))) {
$l_obj_Template = new MCI_Footnotes_Template(MCI_Footnotes_Template::C_STR_PUBLIC, "footnote-alternative");
} else {
$l_obj_Template = new MCI_Footnotes_Template(MCI_Footnotes_Template::C_STR_PUBLIC, "footnote");
}
$l_obj_TemplateTooltip = new MCI_Footnotes_Template(MCI_Footnotes_Template::C_STR_PUBLIC, "tooltip"); $l_obj_TemplateTooltip = new MCI_Footnotes_Template(MCI_Footnotes_Template::C_STR_PUBLIC, "tooltip");
} else { } else {
$l_obj_Template = null; $l_obj_Template = null;
@ -395,8 +405,7 @@ class MCI_Footnotes_Task {
if (is_int($l_int_MaxLength) && strlen($l_str_DummyText) > $l_int_MaxLength) { if (is_int($l_int_MaxLength) && strlen($l_str_DummyText) > $l_int_MaxLength) {
$l_str_ExcerptText = substr($l_str_DummyText, 0, $l_int_MaxLength); $l_str_ExcerptText = substr($l_str_DummyText, 0, $l_int_MaxLength);
$l_str_ExcerptText = substr($l_str_ExcerptText, 0, strrpos($l_str_ExcerptText, ' ')); $l_str_ExcerptText = substr($l_str_ExcerptText, 0, strrpos($l_str_ExcerptText, ' '));
// Removed hyperlink navigation on user request, but left <a> element for style. $l_str_ExcerptText .= '&nbsp;&#x2026; ' . '<span class="footnote_tooltip_continue" onclick="footnote_moveToAnchor_' . $l_int_PostID . '(\'footnote_plugin_reference_' . $l_int_PostID . '_' . $l_str_Index . '\');">' . MCI_Footnotes_Settings::instance()->get(MCI_Footnotes_Settings::C_STR_FOOTNOTES_TOOLTIP_READON_LABEL) . '</span>';
$l_str_ExcerptText .= '&nbsp;&#x2026; ' . '<a class="continue" onclick="footnote_moveToAnchor_' . $l_int_PostID . '(\'footnote_plugin_reference_' . $l_int_PostID . '_' . $l_str_Index . '\');">' . MCI_Footnotes_Settings::instance()->get(MCI_Footnotes_Settings::C_STR_FOOTNOTES_TOOLTIP_READON_LABEL) . '</a>';
} }
} }
@ -429,7 +438,9 @@ class MCI_Footnotes_Task {
"offset-x" => !empty($l_int_OffsetX) ? $l_int_OffsetX : 0 "offset-x" => !empty($l_int_OffsetX) ? $l_int_OffsetX : 0
) )
); );
$l_str_FootnoteReplaceText .= $l_obj_TemplateTooltip->getContent(); if (!MCI_Footnotes_Convert::toBool(MCI_Footnotes_Settings::instance()->get(MCI_Footnotes_Settings::C_BOOL_FOOTNOTES_MOUSE_OVER_BOX_ALTERNATIVE))) {
$l_str_FootnoteReplaceText .= $l_obj_TemplateTooltip->getContent();
}
$l_obj_TemplateTooltip->reload(); $l_obj_TemplateTooltip->reload();
} }
} }

View file

@ -4,16 +4,18 @@
* Created-Date: 15.05.14 * Created-Date: 15.05.14
* Created-Time: 16:21 * Created-Time: 16:21
* Since: 1.0 * Since: 1.0
* Version: 2.1.1d2 * Version: 2.1.1d3
* *
* Last modified: 2020-11-11T1402+0100 * Last modified: 2020-11-11T2146+0100
*/ */
/* /*
MCI Footnotes logo MCI Footnotes logo
The classes with 'heading' fix display in dashboard The classes with 'heading' fix display in dashboard
See class/config.php and css/settings.css
class/config.php
css/settings.css
*/ */
.footnotes_logo, .footnotes_logo,
@ -31,54 +33,77 @@ See class/config.php and css/settings.css
color: #545f5a; color: #545f5a;
} }
/* /*
Inline footnote referrers Footnote referrers and tooltips
aka superscript footnote anchors
referrer and surroundings: templates/public/footnote.html
.footnote_referrer = enclosing <a> templates/public/footnote-alternative.html
.footnote_plugin_tooltip_text = inner <sup>
*/ .footnote_referrer = enclosing <span>
.footnote_plugin_tooltip_text = inner <sup>
.footnote_tooltip = inner <span>
*/
.footnote_referrer, .footnote_referrer,
.footnote_referrer a,
.footnote_referrer:link, .footnote_referrer:link,
.footnote_referrer a:link,
.main-content .footnote_referrer, .main-content .footnote_referrer,
.main-content .footnote_referrer a,
.main-content .footnote_referrer:link, .main-content .footnote_referrer:link,
.main-content .footnote_referrer a:link,
.footnote_plugin_tooltip_text { .footnote_plugin_tooltip_text {
text-decoration: none !important; text-decoration: none !important;
border-bottom: none !important; border-bottom: none !important;
cursor: pointer; cursor: pointer;
z-index: 1;
} }
.footnote_referrer:hover, .footnote_referrer:hover,
.footnote_referrer a:hover,
.footnote_plugin_tooltip_text:hover { .footnote_plugin_tooltip_text:hover {
text-decoration: underline; text-decoration: underline;
font-weight: inherit; font-weight: inherit;
} }
/* .footnote_tooltip {
tooltip infobox display: none;
*/ z-index: 999;
span.footnote_tooltip {
font-size: inherit;
text-align: left; text-align: left;
padding: 12px;
line-height: 1.2em; line-height: 1.2em;
z-index: 99; font-size: inherit;
font-weight: normal;
font-style: normal;
} }
.continue {
.footnote_relative {
position: relative;
}
.footnote_tooltip_alternative {
position: absolute;
bottom: 24px;
left: -50px;
width: 400px;
}
/*
Read-on button
*/
.footnote_tooltip_continue {
font-style: italic; font-style: italic;
color: green; color: green;
text-decoration: none !important; text-decoration: none !important;
cursor: pointer; cursor: pointer;
} }
.continue:hover { .footnote_tooltip_continue:hover {
color: blue; color: blue;
text-decoration: underline !important; text-decoration: underline !important;
} }
/*
/*
Footnote references container Footnote references container
reference-container.html
templates/public/reference-container.html
*/ */
/* /*
@ -181,7 +206,7 @@ Responsive
} }
} }
/* /*
Footnotes printing style rules Footnotes printing style rules
Printing a table, browsers tend to avoid page breaks, Printing a table, browsers tend to avoid page breaks,

View file

@ -4,9 +4,9 @@
* Created-Date: 15.05.14 * Created-Date: 15.05.14
* Created-Time: 16:21 * Created-Time: 16:21
* Since: 1.0 * Since: 1.0
* Version: 2.1.1d2 * Version: 2.1.1d3
* *
* Last modified: 2020-11-11T1402+0100 * Last modified: 2020-11-11T2145+0100
*/ */

View file

@ -4,7 +4,7 @@
Plugin URI: https://wordpress.org/plugins/footnotes/ Plugin URI: https://wordpress.org/plugins/footnotes/
Description: time to bring footnotes to your website! footnotes are known from offline publishing and everybody takes them for granted when reading a magazine. Description: time to bring footnotes to your website! footnotes are known from offline publishing and everybody takes them for granted when reading a magazine.
Author: Mark Cheret Author: Mark Cheret
Version: 2.1.1d2 Version: 2.1.1d3
Author URI: http://cheret.de/plugins/footnotes-2/ Author URI: http://cheret.de/plugins/footnotes-2/
Text Domain: footnotes Text Domain: footnotes
Domain Path: /languages Domain Path: /languages

View file

@ -80,6 +80,9 @@ Visit this swift write-up from a **footnotes** user by the name of **Southwest**
== Changelog == == Changelog ==
= 2.1.1d3 =
- Add: UI: Tooltips: experimental optional alternative CSS/JS implementation
= 2.1.1d2 = = 2.1.1d2 =
- Bugfix: Libraries: jQuery UI: properly pick the libraries registered by WordPress needed for tooltips - Bugfix: Libraries: jQuery UI: properly pick the libraries registered by WordPress needed for tooltips

View file

@ -4,6 +4,10 @@
<td>[[label-enable]]</td> <td>[[label-enable]]</td>
<td>[[enable]]</td> <td>[[enable]]</td>
</tr> </tr>
<tr>
<td>[[label-alternative]]</td>
<td>[[alternative]]</td>
</tr>
<tr> <tr>
<td>[[label-activate-excerpt]]</td> <td>[[label-activate-excerpt]]</td>
<td>[[activate-excerpt]]</td> <td>[[activate-excerpt]]</td>
@ -53,4 +57,4 @@
<td>[[box-shadow-color]] <em>[[notice-box-shadow-color]]</em></td> <td>[[box-shadow-color]] <em>[[notice-box-shadow-color]]</em></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

View file

@ -0,0 +1,16 @@
<span
class="footnote_referrer footnote_relative"
onmouseover="footnoteTooltipShow('footnote_plugin_tooltip_text_[[post_id]]_[[id]]')"
onmouseout="footnoteTooltipHide('footnote_plugin_tooltip_text_[[post_id]]_[[id]]')"
><a><sup
id="footnote_plugin_tooltip_[[post_id]]_[[id]]"
class="footnote_plugin_tooltip_text"
onclick="footnote_moveToAnchor_[[post_id]]('footnote_plugin_reference_[[post_id]]_[[id]]');"
>[[before]][[index]][[after]]</sup
></a><span
id="footnote_plugin_tooltip_text_[[post_id]]_[[id]]"
class="footnote_tooltip_alternative footnote_tooltip"
onmouseout="footnoteTooltipHide('footnote_plugin_tooltip_text_[[post_id]]_[[id]]')"
>[[text]]</span
></span
>

View file

@ -1,14 +1,13 @@
<a <span
class="footnote_referrer" class="footnote_referrer"
><sup ><a><sup
id="footnote_plugin_tooltip_[[post_id]]_[[id]]" id="footnote_plugin_tooltip_[[post_id]]_[[id]]"
class="footnote_plugin_tooltip_text" class="footnote_plugin_tooltip_text"
onclick="footnote_moveToAnchor_[[post_id]]('footnote_plugin_reference_[[post_id]]_[[id]]');" onclick="footnote_moveToAnchor_[[post_id]]('footnote_plugin_reference_[[post_id]]_[[id]]');"
>[[before]][[index]][[after]]</sup >[[before]][[index]][[after]]</sup
></a ></a><span
> id="footnote_plugin_tooltip_text_[[post_id]]_[[id]]"
<span class="footnote_tooltip"
class="footnote_tooltip" >[[text]]</span
id="footnote_plugin_tooltip_text_[[post_id]]_[[id]]" ></span
>[[text]]</span
> >