create new tag
, view all tags

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

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


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.


---+ Test 1

   * test 1 text

---++ Test 1a


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

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


---++ Test 1b

---+ Test 2

   * test 2 text

Examples are atteched.

best regards christian voigt

-- Christian Voigt - 2016-11-22

Discussion and Answer


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){$(".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]");}});}
-(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


      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

            Change status to:
      ALERT! 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.
      Status Answered
      Title JQueryPlugin - JQTAB - parameter for heading (h1..h6)
      SupportCategory JQueryPlugin
      TWiki version 6.0.2
      Server OS SLES 11.4, kernel 3.0.101
      Web server Apache2 2.2.12-59.1
      Perl version 5.10.0
      Browser & version Opera 41.0, FirefoxESR 45.4.0
      Topic attachments
      I Attachment History Action Size Date Who Comment
      PNGpng twiki_jquery_example_a.png r1 manage 25.7 K 2016-11-22 - 18:07 ChristianVoigt  
      PNGpng twiki_jquery_example_b.png r1 manage 17.6 K 2016-11-22 - 18:08 ChristianVoigt  
      PNGpng twiki_jquery_example_genPDF.png r1 manage 12.9 K 2016-11-22 - 18:10 ChristianVoigt  
      Edit | Attach | Watch | Print version | History: r4 < r3 < r2 < r1 | Backlinks | Raw View | Raw edit | More topic actions
      Topic revision: r4 - 2016-12-03 - HideyoImazu
      • Learn about TWiki  
      • Download TWiki
      This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
      Copyright © 1999-2016 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.