Item7550: Highlight section on hover over heading; auto section link style enhancements

1. Highlight behavior - DONE

Currently one needs to hover over the edit link to see the section highlight. In stealth mode it is not obvious that there is a section edit. IMHO it is better to highlight the section when the mouse is hovering over the whole heading, not just the auto section links.

--- pub/TWiki/AutoSectionsPlugin/AutoSections.js   (revision 27977)
+++ pub/TWiki/AutoSectionsPlugin/AutoSections.js   (working copy)
@@ -180,14 +180,14 @@
 
       if (stealthMode) {
         $menu.css({opacity: '0'});
-        $menu.mouseover(function () {$menu.css({opacity: '1'})});
-        $menu.mouseout(function () {$menu.css({opacity: '0'})});
+        $menu.parent().parent().mouseover(function () {$menu.css({opacity: '1'})});
+        $menu.parent().parent().mouseout(function () {$menu.css({opacity: '0'})});
       }
 
       $rawLink.css({opacity: '0'});
       $editLink.css({opacity: '1'});
-      $menu.mouseover(function () {$rawLink.css({opacity: '1'})});
-      $menu.mouseout(function () {$rawLink.css({opacity: '0'})});
+      $menu.parent().parent().mouseover(function () {$rawLink.css({opacity: '1'})});
+      $menu.parent().parent().mouseout(function () {$rawLink.css({opacity: '0'})});
 
       var ajaxLoad = null;
       var ajaxSave = null;
@@ -271,11 +271,11 @@
         });
       };
 
-      $menu.mouseover(function() {
+      $menu.parent().parent().mouseover(function() {
         $content.addClass("twikiAutoSectionHighlighted");
       });
 
-      $menu.mouseout(function() {
+      $menu.parent().parent().mouseout(function() {
         $content.removeClass("twikiAutoSectionHighlighted");
       });
 

2. Change "raw" to "raw view" - DONE

This brings it in line with the "Raw View" link at the bottom.

--- lib/TWiki/Plugins/AutoSectionsPlugin.pm   (revision 27977)
+++ lib/TWiki/Plugins/AutoSectionsPlugin.pm   (working copy)
@@ -91,7 +91,7 @@
     # Raw label
     $rawLabel = TWiki::Func::getPreferencesValue('AUTOSECTIONS_RAWLABEL') ||
         $TWiki::cfg{Plugins}{$pluginName}{RawLabel} ||
-        'raw';
+        'raw view';
     $rawLabel = '' if $rawLabel eq 'off';
 
     $rawLabel = TWiki::Func::expandCommonVariables($rawLabel) if $rawLabel =~ /%/;

3. Add margin and padding to auto section links - DONE

The "raw view" and "edit" are very close. Better to add some padding and margin to separate them:

--- lib/TWiki/Plugins/AutoSectionsPlugin.pm   (revision 27977)
+++ lib/TWiki/Plugins/AutoSectionsPlugin.pm   (working copy)
@@ -242,7 +242,8 @@
 a:link.twikiAutoSectionLink {
     font-weight: normal;
     font-size: 11px;
-    padding: 2px;
+    margin-left: 8px;
+    padding: 2px 4px;
     border-style: none;
 }
 #patternMainContents h1 a:hover.twikiAutoSectionLink,

4. Show buttons on hover over auto section links - DONE

I think it is more intuitive to apply the twikiButton style to the auto section links on hover. Here is the patch for item 1 above and item 4 here combined:

--- pub/TWiki/AutoSectionsPlugin/AutoSections.js   (revision 27977)
+++ pub/TWiki/AutoSectionsPlugin/AutoSections.js   (working copy)
@@ -180,14 +180,22 @@
 
       if (stealthMode) {
         $menu.css({opacity: '0'});
-        $menu.mouseover(function () {$menu.css({opacity: '1'})});
-        $menu.mouseout(function () {$menu.css({opacity: '0'})});
+        $menu.parent().parent().mouseover(function () {
+          $menu.css({opacity: '1'});
+          $editLink.addClass('twikiButton');
+        }).mouseout(function () {
+          $menu.css({opacity: '0'});
+          $editLink.removeClass('twikiButton');
+        });
       }
 
       $rawLink.css({opacity: '0'});
       $editLink.css({opacity: '1'});
-      $menu.mouseover(function () {$rawLink.css({opacity: '1'})});
-      $menu.mouseout(function () {$rawLink.css({opacity: '0'})});
+      $menu.parent().parent().mouseover(function () {
+        $rawLink.css({opacity: '1'}).addClass('twikiButton');
+      }).mouseout(function () {
+        $rawLink.css({opacity: '0'}).removeClass('twikiButton');
+      });
 
       var ajaxLoad = null;
       var ajaxSave = null;
@@ -271,12 +279,18 @@
         });
       };
 
-      $menu.mouseover(function() {
+      $menu.parent().parent().mouseover(function() {
         $content.addClass("twikiAutoSectionHighlighted");
+        $editLink.addClass('twikiButton');
+      }).mouseout(function() {
+        $content.removeClass("twikiAutoSectionHighlighted");
+        $editLink.removeClass('twikiButton');
       });
 
-      $menu.mouseout(function() {
-        $content.removeClass("twikiAutoSectionHighlighted");
+      $editorHeading.mouseover(function() {
+        $editorHeading.find("a").addClass('twikiButton');
+      }).mouseout(function() {
+        $editorHeading.find("a").removeClass('twikiButton');
       });
 
       $editorHeading.find("a").eq(0).click(cancelEditing);

5. Remove undocumented dependency on DateTimePlugin - DONE

Better to use the pre-installed SpreadSheetPlugin. Patch:

--- lib/TWiki/Plugins/AutoSectionsPlugin.pm   (revision 27977)
+++ lib/TWiki/Plugins/AutoSectionsPlugin.pm   (working copy)
@@ -231,7 +231,7 @@
     editLabel: "$editLabelEsc",
     rawLabel: "$rawLabelEsc",
     cancelLabel: "$cancelLabelEsc",
-    topicDate: %DATETIME{date="%REVINFO{"\$iso"}%" format="\$epoch"}%
+    topicDate: %CALCULATE{\$TIME(%REVINFO{"\$year-\$mo-\$day \$hour:\$min:\$sec"}% GMT)}%
 };
 </script>
 <script type="text/javascript" src="$jsPath?t=$t"></script>

6. Make edit aware of fixed font/proportional font preference - DONE

The user can set fixed font/proportional font in raw edit. It would be helpful if this setting is also used for sectional edit.

-- TWiki:Main/PeterThoeny - 2014-09-11

It seems to have been implemented (probably TWikirev:28270). It should work now. If you change the fixed/proportional in the edit page, the status is reflected in a later auto-sections edit.

-- TWiki:Main.MahiroAndo - 2016-07-29

7. Triple-click select issue - DONE

Minor usability issue: When you triple-click on a heading and copy the text, it copies also the link labels "view raw" and "edit".

-- TWiki:Main.PeterThoeny - 2014-10-02

This is now fixed. I have rearranged the DOM structure so that the edit buttons are outside of the heading tags, so the trip-click should not include them unexpectedly.

-- TWiki:Main.MahiroAndo - 2016-07-29

8. Add a gray highlight bar on the right - DONE

Add a gray bar on the right on hover to highlight the section that will be edited. Also, reduce the gray background color to a very faint gray to make it less intrusive.

Here is the combined patch for item 2, 3, 5 above, as well as the gray highlight bar on the right:

@@ -91,7 +91,7 @@
     # Raw label
     $rawLabel = TWiki::Func::getPreferencesValue('AUTOSECTIONS_RAWLABEL') ||
         $TWiki::cfg{Plugins}{$pluginName}{RawLabel} ||
-        'raw';
+        'raw view';
     $rawLabel = '' if $rawLabel eq 'off';
 
     $rawLabel = TWiki::Func::expandCommonVariables($rawLabel) if $rawLabel =~ /%/;
@@ -231,18 +231,22 @@
     editLabel: "$editLabelEsc",
     rawLabel: "$rawLabelEsc",
     cancelLabel: "$cancelLabelEsc",
-    topicDate: %DATETIME{date="%REVINFO{"\$iso"}%" format="\$epoch"}%
+    topicDate: %CALCULATE{\$TIME(%REVINFO{"\$year-\$mo-\$day \$hour:\$min:\$sec"}% GMT)}%
 };
 </script>
 <script type="text/javascript" src="$jsPath?t=$t"></script>
 <style>
 .twikiAutoSectionHighlighted {
-    background-color: #EEE;
+    background-color: #fafafe;
+    border-right: 0.4em #a0a0a4 solid;
+    margin-right: -1.2em;
+    padding-right: 0.8em
 }
 a:link.twikiAutoSectionLink {
     font-weight: normal;
     font-size: 11px;
-    padding: 2px;
+    margin-left: 8px;
+    padding: 2px 4px;
     border-style: none;
 }
 #patternMainContents h1 a:hover.twikiAutoSectionLink,

-- TWiki:Main.PeterThoeny - 2014-10-03

I updated the TWiki.org TWiki so that you can see how it looks.

-- TWiki:Main.PeterThoeny - 2014-10-03

Great enhancement! Thank you for these changes.

I think it's a good idea to highlight the section by hovering anywhere in the header, but I've realized it sometimes "flashes" a lot of parts just by moving around the mouse cursor, which might not be ideal in some cases.

Here is an alternative - just show the "edit" links when hovering the header, but add the gray highlight only when hovering the "edit" links.

--- a/pub/TWiki/AutoSectionsPlugin/AutoSections.js
+++ b/pub/TWiki/AutoSectionsPlugin/AutoSections.js
@@ -280,13 +280,17 @@ if (window.jQuery) {
       };

       $menu.parent().parent().mouseover(function() {
-        $content.addClass("twikiAutoSectionHighlighted");
         $editLink.addClass('twikiButton');
       }).mouseout(function() {
-        $content.removeClass("twikiAutoSectionHighlighted");
         $editLink.removeClass('twikiButton');
       });

+      $menu.mouseover(function() {
+        $content.addClass("twikiAutoSectionHighlighted");
+      }).mouseout(function() {
+        $content.removeClass("twikiAutoSectionHighlighted");
+      });
+
       $editorHeading.mouseover(function() {
         $editorHeading.find("a").addClass('twikiButton');
       }).mouseout(function() {

How does it look like to you? Maybe it would be better to provide a preference variable for this.

-- TWiki:Main.MahiroAndo - 2014-10-05

Mahiro, I feel only highlighting when mouse is over menu is too hidden when stealth mode is in use. I think it is better to act on mouse over heading.

Did you see the latest patch, also installed on TWiki.org? It is not intrusive at all.

-- TWiki:Main.PeterThoeny - 2014-10-06

Yes, my feedback was based on what I saw it in action on TWiki.org. What I meant was that when the mouse is anywhere on the header, only the buttons should become visible (not the entire section-wide background color). I think it meets your intent for it "to act on mouse over heading."

In other words:

1. Initially, buttons and background color are invisible.
2. When the mouse is anywhere on the header, the buttons become visible.
3. Additionally, when the mouse is on the buttons, the background color becomes visible.

It is a very good point to allow users to be more aware of the presence of this plugin just by hovering over the header, but isn't it enough to show the buttons? And then only when the mouse is on the buttons, the background color and the new right-edge bar you introduced can be made visible.

I've found the flashing a little intrusive if I use a MacBook where the background color is fairly distinct even with the faint color. It is especially so when there are many sub-sections with h3 and h4 levels. On the other hand, when I see it on another desktop monitor (not so high-contract for bright colors I guess), the new color #fafafe is almost completely invisible. The new right-edge bar you introduced works well though. I think the background color should be a little bit darker for better coverage of various monitors (e.g. #f6f6f9, which is the same as the comment plugin's base background color) and keep it visible only when the mouse is on the buttons rather than the entire header.

I've tried to commit my changes to svn to see how it looks like to you. I'm also looking into the other two issues you've raised.

-- TWiki:Main.MahiroAndo - 2014-10-14

Yes, that is good functionality too!

Consider also this as an alternative: No background change, but gray bar on hover over heading. This makes it less intrusive, and the gray bar still makes it obvious how big the section is.

Thank you for looking into the other items.

-- TWiki:Main.PeterThoeny - 2014-10-14

That sounds a good idea. I'll try to see how the alternative works.

Meanwhile, I've implemented the font style button (and also added enlarge/shrink buttons). Unfortunately, it does not work in our own environment (the textarea always uses the fixed font regardless), so I've made it configurable, so it can be turned off via $TWiki::cfg for an environment like ours. It is on by default, as it works with the pattern skin.

Regarding the triple-click issue, it does not seem to be reproducible on my side (Chrome 37 and IE 11). The copy-and-paste just seems to work as expected where the edit buttons are not included in the copied text. Could you double check, and if it is still reproducible, could you tell me what browser you are using?

-- TWiki:Main.MahiroAndo - 2014-10-15

I use FF 32.0.3 on OS-X.

Example: Heading is "Comments", triple clicked content is "raw viewedit Comments".

This is a minor issue, can be ignored.

-- TWiki:Main.PeterThoeny - 2014-10-15

Thanks Peter, I've changed the way it hides the buttons (it was 'opacity:0' for stealth mode, but I changed it to 'display:none'). Right now, I don't have FF to access my local dev environment so I haven't been able to test it, but it might possibly resolve the copy issue. I will test it when I can, but if it doesn't work, I'll leave it as a future enhancement for now.

I've also made the right bar visible on mouse over heading. (I used integer px values instead of float numbers for the right margin, because there seem to be a round-off issue, which sometimes affect the word-wrap length in an unintended way.)

I'll also update the documentation to reflect all the recent changes.

-- TWiki:Main.MahiroAndo - 2014-10-19

The display: none did not fix it, a copy still contains the button text.

A new bug just surfaced: The "raw view" and "Edit" buttons are very big and overlap now.

-- TWiki:Main.PeterThoeny - 2014-10-19

Another issue with latest version: Apache error log has this warning on every page load:

File does not exist: /var/www/html/pub

Warning goes away if there are no headings, or if the AutoSectionsPlugin is disabled.

-- TWiki:Main.PeterThoeny - 2014-10-20

These issues have been fixed by TWiki:Main.HideyoImazu san - See Item7725 and Item7726.

-- TWiki:Main.MahiroAndo - 2016-07-29

9. TOC issue - DONE

Another bug: When !! is used within a heading, it does not show up in the TOC, and the heading shows the text to the right of !! instead of to the left.

Test case:

This is visible - This text should be hidden in TOC

Next test case.

This whole heading is not shown in TOC

End test case.

-- TWiki:Main.PeterThoeny - 2014-11-07

This was due to incorrect detection of the NOTOC part. It has been fixed now. (Item7724)

-- TWiki:Main.MahiroAndo - 2016-07-29

10. READONLYSKINMODE awareness - DONE

See details in Item7609: Make autosection edit aware of READONLYSKINMODE setting

-- TWiki:Main.PeterThoeny - 2015-01-15

This has been implemented now.

-- TWiki:Main.MahiroAndo - 2016-07-29