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

class/dashboard/subpage-main.php

@@ -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),
 

class/init.php

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

class/settings.php

@@ -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! ######################
  */
 
 
@@ -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.
      *
@@ -402,6 +413,7 @@ class MCI_Footnotes_Settings {
             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

class/task.php

@@ -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);
             }
@@ -147,7 +147,13 @@ class MCI_Footnotes_Task {
             echo '}';
             ?>
 		</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) {
             // load template file
+            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; ' . '<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
                         )
                     );
+					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();
                 }
             }

css/public.css

@@ -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
+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 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;
 }
 
-/*
+.footnote_tooltip {
-tooltip infobox
+    display: none;
-*/
+    z-index: 999;
-span.footnote_tooltip {
-    font-size: inherit;
     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,

css/settings.css

@@ -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
  */
 
 

footnotes.php

@@ -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

readme.txt

@@ -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
 

templates/dashboard/customize-mouse-over-box.html

@@ -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>

templates/public/footnote-alternative.html

@@ -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
+>

templates/public/footnote.html

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