Rumperuu/footnotes
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
class/dashboard/subpage-main.php
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)),
"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)),
"activate-excerpt" => $this->addSelectBox(MCI_Footnotes_Settings::C_BOOL_FOOTNOTES_MOUSE_OVER_BOX_EXCERPT_ENABLED, $l_arr_Enabled),

2
class/init.php
View file

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

104
class/settings.php
View file

@ -10,6 +10,7 @@
* v2.0.4 2020-11-02T2115+0100
* v2.0.7 2020-11-06T1342+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
* @var string
*
* 2020-11-08T2106+0100
*
* 2020-11-08T2106+0100
*/
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";
/**
* 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.
*
@ -393,57 +404,58 @@ class MCI_Footnotes_Settings {
self::C_BOOL_FOOTNOTES_EXPERT_MODE => 'no'
),
"footnotes_storage_custom" => array(
// The default footnote referrer surroundings should be square brackets:
// * as in English typesetting;
// * for better UX thanks to a more button-like appearance;
// * for stylistic consistency with the expand-collapse button
self::C_STR_FOOTNOTES_STYLING_BEFORE => '[',
self::C_STR_FOOTNOTES_STYLING_AFTER => ']',
self::C_BOOL_FOOTNOTES_MOUSE_OVER_BOX_ENABLED => 'yes',
// The mouse over content truncation should be enabled by default
// to raise awareness of the functionality and to prevent the screen
// 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 default position should not be lateral because of the risk
// the box gets squeezed between note anchor at line end and window edge,
// 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
// 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 shouldn’t feature a colored background
// by default, due to diverging user preferences. White is neutral:
self::C_STR_FOOTNOTES_MOUSE_OVER_BOX_BACKGROUND => '#ffffff',
// The default footnote referrer surroundings should be square brackets:
// * as in English typesetting;
// * for better UX thanks to a more button-like appearance;
// * for stylistic consistency with the expand-collapse button
self::C_STR_FOOTNOTES_STYLING_BEFORE => '[',
self::C_STR_FOOTNOTES_STYLING_AFTER => ']',
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
// 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 default position should not be lateral because of the risk
// the box gets squeezed between note anchor at line end and window edge,
// 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
// 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 shouldn’t feature a colored background
// 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_STR_FOOTNOTES_MOUSE_OVER_BOX_BORDER_COLOR => '#cccc99',
// The mouse over box corners mustn’t be rounded as that is outdated:
self::C_INT_FOOTNOTES_MOUSE_OVER_BOX_BORDER_RADIUS => 0,
// 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_STR_FOOTNOTES_MOUSE_OVER_BOX_BORDER_COLOR => '#cccc99',
// The mouse over box corners mustn’t be rounded as that is outdated:
self::C_INT_FOOTNOTES_MOUSE_OVER_BOX_BORDER_RADIUS => 0,
// 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_STR_FOOTNOTES_MOUSE_OVER_BOX_SHADOW_COLOR => '#666666',
self::C_STR_HYPERLINK_ARROW => '↑',
self::C_STR_HYPERLINK_ARROW_USER_DEFINED => '',
self::C_STR_CUSTOM_CSS => ''
),
// These should all be enabled by default to prevent users from
// thinking at first that the feature is broken in post titles.
// These should all be enabled by default to prevent users from
// thinking at first that the feature is broken in post titles.
// 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(
self::C_BOOL_EXPERT_LOOKUP_THE_TITLE => 'yes',
self::C_BOOL_EXPERT_LOOKUP_THE_CONTENT => 'yes',

25
class/task.php
View file

@ -120,7 +120,7 @@ class MCI_Footnotes_Task {
<style type="text/css" media="screen">
<?php
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)) {
printf(" color: %s;", $l_str_Color);
}
@ -146,8 +146,14 @@ class MCI_Footnotes_Task {
}
echo '}';
?>
</style>
<?php
</style>
<?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) {
// 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");
} else {
$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) {
$l_str_ExcerptText = substr($l_str_DummyText, 0, $l_int_MaxLength);
$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; ' . '<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>';
$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>';
}
}
@ -429,7 +438,9 @@ class MCI_Footnotes_Task {
"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();
}
}

71
css/public.css
View file

@ -4,16 +4,18 @@
* Created-Date: 15.05.14
* Created-Time: 16:21
* 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
The classes with 'heading' fix display in dashboard
See class/config.php and css/settings.css
class/config.php
css/settings.css
*/
.footnotes_logo,
@ -31,54 +33,77 @@ See class/config.php and css/settings.css
color: #545f5a;
}
/*
Inline footnote referrers
aka superscript footnote anchors
/*‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
Footnote referrers and tooltips
referrer and surroundings:
.footnote_referrer = enclosing <a>
.footnote_plugin_tooltip_text = inner <sup>
*/
templates/public/footnote.html
templates/public/footnote-alternative.html
.footnote_referrer = enclosing <span>
.footnote_plugin_tooltip_text = inner <sup>
.footnote_tooltip = inner <span>
*/
.footnote_referrer,
.footnote_referrer a,
.footnote_referrer:link,
.footnote_referrer a:link,
.main-content .footnote_referrer,
.main-content .footnote_referrer a,
.main-content .footnote_referrer:link,
.main-content .footnote_referrer a:link,
.footnote_plugin_tooltip_text {
text-decoration: none !important;
border-bottom: none !important;
cursor: pointer;
z-index: 1;
}
.footnote_referrer:hover,
.footnote_referrer a:hover,
.footnote_plugin_tooltip_text:hover {
text-decoration: underline;
font-weight: inherit;
}
/*
tooltip infobox
*/
span.footnote_tooltip {
font-size: inherit;
.footnote_tooltip {
display: none;
z-index: 999;
text-align: left;
padding: 12px;
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;
color: green;
text-decoration: none !important;
cursor: pointer;
}
.continue:hover {
.footnote_tooltip_continue:hover {
color: blue;
text-decoration: underline !important;
}
/*
/*‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
Footnote references container
reference-container.html
templates/public/reference-container.html
*/
/*
@ -181,7 +206,7 @@ Responsive
}
}
/*
/*‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
Footnotes printing style rules
Printing a table, browsers tend to avoid page breaks,

4
css/settings.css
View file

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

2
footnotes.php
View file

@ -4,7 +4,7 @@
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.
Author: Mark Cheret
Version: 2.1.1d2
Version: 2.1.1d3
Author URI: http://cheret.de/plugins/footnotes-2/
Text Domain: footnotes
Domain Path: /languages

3
readme.txt
View file

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

6
templates/dashboard/customize-mouse-over-box.html
View file

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

16
templates/public/footnote-alternative.html Normal file
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
>

17
templates/public/footnote.html
View file

@ -1,14 +1,13 @@
<a
class="footnote_referrer"
><sup
<span
class="footnote_referrer"
><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
class="footnote_tooltip"
id="footnote_plugin_tooltip_text_[[post_id]]_[[id]]"
>[[text]]</span
></a><span
id="footnote_plugin_tooltip_text_[[post_id]]_[[id]]"
class="footnote_tooltip"
>[[text]]</span
></span
>