SID-02277: JQueryPlugin - JQTAB - parameter for heading (h1..h6)

Status:	Answered	TWiki version:	6.0.2	Perl version:	5.10.0
Category:	JQueryPlugin	Server OS:	SLES 11.4, kernel 3.0.101	Last update:	9 years ago

Hi,

first, sorry for my bad english. I hope you understand me. We use 2 plugins. First plugin is GenPDFAddOn. This plugin works fine. The secound plugin is JQueryPlugin.

GenPDFAddOn - Add-on Version: 2014-01-08
JQueryPlugin - Plugin Version: 2015-09-11

Our problem is, the %JQTAB{".."}% is hardcoded on <h2>. It isn't correct for the GenPDFAddOn because the index in the generated pdf is inkorrekt.

A further problem from the JQueuePlugin is follow:

vi <twiki install path>/lib/TWiki/Plugins/JQueryPlugin/Core.pm +97
   . " <h2 >$theName</h2><div class=\"jqTabContents\">";

The "<h2 >" is not good for the GenPDFAddOn. Because the regex don't work with the blank in the html tag. Look at the follow code.

vi "../lib/TWiki/Contrib/GenPDFAddOn.pm" +316
         $html =~ s|<h(\d)>((?:(?!<h\d>).)*)</h\d>|'<h'.($newHead = ($1+$prefs{'shift'})>15?15:($1+$prefs{'shift'})<1?1:($1+$prefs{'shift'})).'>'.$2.'</h'.($newHead).'>'|gsei;

But that is not my primary problem. My primary problem is the hard coded h2 tag in the jQueryPlugin. I had modified the perl file.

<twiki install path>/lib/TWiki/Plugins/JQueryPlugin/Core.pm

@@ -68,6 +68,7 @@
   my $container = $params->{container} || '';
   my $tabClass = $params->{class} || '';
   my $tabId = 'jqTab'.($tabCounter++);
+  my $level = $params->{headerlevel} || '2';

@@ -93,9 +94,8 @@
   }
   my $metaData = '{' . join(',', @metaData) . '}';

-print STDERR "\nDEBUG - JQueryPlugin - handleTab - \$theName: ".$theName."\n";
   return " <div id='$tabId' class='$tabClass jqTab' data-options='$metaData'>"
-       . " <h2 >$theName</h2><div class=\"jqTabContents\">";
+       . " <h" . $level . " >" . $theName . "</h" . $level . "><div class=\"jqTabContents\">";

<twiki install path>/pub/TWiki/JQueryPlugin/jquery.tabpane.uncompressed.js

@@ -18,6 +18,8 @@
   $.fn.tabpane = function(options) {
     writeDebug("called tabpane()");

+    var headerlevel=data.headerlevel||'2';
+
     // build main options before element iteration
     var opts = $.extend({}, $.fn.tabpane.defaults, options);

Then can i do the following parameter.

%JQTAB{"A" headerlevel="2"}% 
...
%JQTAB{"B" headerlevel="3"}%

For the GenPDFAddOn works fine. The result in pdf is: <h2>A</h2> <h3>B</h3>

But in Twiki is all <>h2 Header missing in showed topic. The tab named "undefined". What is the problem?

I hope, you unterstand me.

Here my example.

%TOC%

---+ Test 1

   * test 1 text

---++ Test 1a

%JQTABPANE%

%JQTAB{"A" headerlevel="2"}% 
<b>fasel 1</b>
%JQENDTAB%

%JQTAB{"B" headerlevel="3"}%
<b>fasel 2</b>
%JQENDTAB%

%JQENDTABPANE%

---++ Test 1b

---+ Test 2

   * test 2 text

Examples are atteched.

best regards christian voigt

-- Christian Voigt - 2016-11-22

Discussion and Answer

Hi,

i fixed it in java. It's not nice but it works.

+ var searchstring =/.*jqTab.*/;if( searchstring.test(this.id) ){var headerlevel=this.firstElementChild.firstChild.parentNode.tagName.toLowerCase()};
- var title=$('h2',this).eq(0).remove().html();
+ title=$(headerlevel,this).eq(0).remove().html();

For a patch file:

--- unpatched/pub/TWiki/JQueryPlugin/jquery-all.js        2015-09-11 03:49:27.000000000 +0200
+++ patched/pub/TWiki/JQueryPlugin/jquery-all.js 2016-11-23 19:48:46.000000000 +0100
@@ -155,7 +155,7 @@
 if(false){$(".jqRounded").roundedCorners();}
 if(false){$(".twikiToc").each(function(){$(this).prepend("[hide]")});$(".twikiTocToggle").css("float","right").click(function(){$("> ul",$(this).parent()).slideToggle({easing:'easeInOutQuad',duration:300});if($(this).text()=="[hide]"){$(this).text("[show]");}else{$(this).text("[hide]");}});}
 if($jqTreeviews){$jqTreeviews.css('display','block');}});;;
-(function($){$.fn.tabpane=function(options){writeDebug("called tabpane()");var opts=$.extend({},$.fn.tabpane.defaults,options);return this.each(function(){var $thisPane=$(this);var thisOpts=$.extend({},opts,$thisPane.data());var $tabContainer=$thisPane;var $tabGroup=$('
').prependTo($tabContainer);var index=1;var currentTabId;$thisPane.children(".jqTab").each(function(){var title=$('h2',this).eq(0).remove().html();$tabGroup.append(''+title+'');if(index==thisOpts.select){currentTabId=this.id;$(this).addClass("current");}else{$(this).removeClass("current");}
+(function($){$.fn.tabpane=function(options){writeDebug("called tabpane()");var opts=$.extend({},$.fn.tabpane.defaults,options);return this.each(function(){var $thisPane=$(this);var thisOpts=$.extend({},opts,$thisPane.data());var $tabContainer=$thisPane;var $tabGroup=$('
').prependTo($tabContainer);var index=1;var currentTabId;$thisPane.children(".jqTab").each(function(){var searchstring =/.*jqTab.*/;if( searchstring.test(this.id) ){var headerlevel=this.firstElementChild.firstChild.parentNode.tagName.toLowerCase()};var title=$(headerlevel,this).eq(0).remove().html();$tabGroup.append(''+title+'');if(index==thisOpts.select){currentTabId=this.id;$(this).addClass("current");}else{$(this).removeClass("current");}
 index++;});switchTab(currentTabId,currentTabId,thisOpts);$(".jqTabGroup li > a",this).click(function(){$(this).blur();var newTabId=$(this).attr('data');if(newTabId!=currentTabId){$("#"+currentTabId).removeClass("current");$("#"+newTabId).addClass("current");$(this).parent().parent().children("li").removeClass("current");$(this).parent().addClass("current");switchTab(currentTabId,newTabId,thisOpts);currentTabId=newTabId;}
 return false;});$thisPane.css("display","block");});};function switchTab(oldTabId,newTabId,thisOpts){writeDebug("switch from "+oldTabId+" to "+newTabId);var $newTab=$("#"+newTabId);if(!thisOpts[newTabId]){thisOpts[newTabId]=$newTab.data("options");}
 var data=thisOpts[newTabId];if(typeof(data.beforeHandler)!="undefined"){var command="{ oldTab = '"+oldTabId+"'; newTab = '"+newTabId+"'; "+data.beforeHandler+";}";writeDebug("exec "+command);eval(command);}

-- Christian Voigt - 2016-12-01

Christian,

JQTAB{"title"} rendering the title with <h2 >, having a space before > is on purpose. It is to prevent tabs from showing up in TOC.

Maybe instead of h2 or any other hN tag, a tab title should be rendered with div so that GenPDFAddOn doesn't pick it up in the table of contents. TOC and the table of contents of the PDF of the page should be consistent.

That said, introducing the headerlevel parameter to JQTAB{} isn't in the right direction. It increases complexity while it does not make TOC and the table of contents of the PDF more consistent. Very few people would be benefitted by the additional complexity.

-- Hideyo Imazu - 2016-12-03

If you answer a question - or someone answered one of your questions - please remember to edit the page and set the status to answered. The status selector is below the edit box.