Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Item10918: improve javascript api
Item12511: removed dependency on metadata
  • Loading branch information
MichaelDaum committed Nov 22, 2016
1 parent fac7003 commit cd9a295
Show file tree
Hide file tree
Showing 6 changed files with 280 additions and 158 deletions.
21 changes: 19 additions & 2 deletions JQueryPlugin/data/System/JQueryTabpane.txt
@@ -1,4 +1,4 @@
%META:TOPICINFO{author="ProjectContributor" date="1456220586" format="1.1" version="1"}%
%META:TOPICINFO{author="ProjectContributor" date="1479816293" format="1.1" version="1"}%
%META:TOPICPARENT{name="JQueryPlugin"}%
---+ %TOPIC%

Expand Down Expand Up @@ -40,6 +40,23 @@ It does match JQueryButton in terms of look & feel.
%INCLUDE{"VarTAB"}%
%INCLUDE{"VarENDTAB"}%

---++ <nop>JavaScript API

Each =.jqTabPane= DOM node has got an instance of the =TabPane= javascript class attached to it that implements its behaviour.
This instance can be accessed via the HTML5 data attribute =tabPane=:

<verbatim class="js">
var tb = $(".jqTabPane").data("tabPane");
</verbatim>

The returned object =tb= can then be used directly to control the related =.jqTabPane= DOM. The most useful methods are listed below:

| *Method* | *Description* |
| =getNextTab([selector])= | get the next tab following the current one or the one specified by =selector= |
| =hideTab([selector])= | hide the current tab or the one specified by =selector= |
| =showTab([selector])= | show the current tab or the one specified by =selector= |
| =switchTab(selectorOrObject)= | switch to the tab specified by a selector or a tab object |

---++ Examples
%TABPANE%
%TAB{"Tab 1"}%
Expand Down Expand Up @@ -121,7 +138,7 @@ erat bibendum blandit. Proin enim nunc, rutrum et, congue mattis, ultrices at,

%STARTSECTION{"foo"}%
---+++!! Foo
%TABPANE{animate="on"}%
%TABPANE{animate="on" class="plain"}%
%TAB{"Later"}%
tristique ligula suscipit suscipit. Donec et tortor. Integer eros eros, commodo
in, aliquam sit amet, facilisis et, magna. Sed nisl. Pellentesque mattis, quam
Expand Down
4 changes: 2 additions & 2 deletions JQueryPlugin/data/System/VarTABPANE.txt
@@ -1,4 +1,4 @@
%META:TOPICINFO{author="ProjectContributor" date="1456220586" format="1.1" version="1"}%
%META:TOPICINFO{author="ProjectContributor" date="1479816293" format="1.1" version="1"}%
%META:TOPICPARENT{name="Macros"}%
---+ TABPANE -- tabpane widget
This macro starts the tabpane, containing a series of TAB...ENDTABs and ends with ENDTABPANE. A complete tabpane normally looks like this:
Expand Down Expand Up @@ -36,7 +36,7 @@ This macro starts the tabpane, containing a series of TAB...ENDTABs and ends wit
| =select= | number or id of tab to select | =1= |
| =automaxexpand= | resizes the tabpane to the maximum height to fit into the window | =off= |
| =minheight= | when automaxexpand is enabled, this is the minimum size a tab is allowed to be resized | 230 |
| =class= | extra class: use =simple= for a non-3D tabpane | |
| =class= | extra class: use =simple= for a non-3D tabpane; use=plain= for a no-frame look&feel | |
| =animate= | enables/disables animation of switching tabs | =off= |
---++ Examples
see JQueryTabpane for more examples
Expand Down
4 changes: 2 additions & 2 deletions JQueryPlugin/lib/Foswiki/Plugins/JQueryPlugin.pm
Expand Up @@ -24,8 +24,8 @@ BEGIN {
}
}

our $VERSION = '7.10';
our $RELEASE = '06 Sep 2016';
our $VERSION = '7.20';
our $RELEASE = '22 Nov 2016';
our $SHORTDESCRIPTION = 'jQuery <nop>JavaScript library for Foswiki';
our $NO_PREFS_IN_TOPIC = 1;

Expand Down
32 changes: 13 additions & 19 deletions JQueryPlugin/lib/Foswiki/Plugins/JQueryPlugin/TABPANE.pm
Expand Up @@ -35,7 +35,7 @@ sub new {
tags => 'TABPABNE, ENDTABPANE, TAB, ENDTAB',
css => ['jquery.tabpane.css'],
javascript => ['jquery.tabpane.js'],
dependencies => [ 'metadata', 'livequery', 'easing' ],
dependencies => [ 'livequery', 'easing' ],
),
$class
);
Expand Down Expand Up @@ -70,7 +70,7 @@ sub handleTabPane {
}

return
"<div class=\"jqTabPane $class {select:'$select', autoMaxExpand:$autoMaxExpand, animate:$animate, minHeight:$minHeight}\">";
"<div class='jqTabPane $class' data-select='$select' data-auto-max-expand='$autoMaxExpand' data-animate='$animate' data-min-height='$minHeight'>";
}

=begin TML
Expand All @@ -95,41 +95,35 @@ sub handleTab {
my $width = $params->{width};
my $tabId = 'jqTab' . Foswiki::Plugins::JQueryPlugin::Plugins::getRandom();

my @metaData = ();
my @html5Data = ();
if ($beforeHandler) {

# $beforeHandler =~ s/'/\\'/go;
push @metaData,
"beforeHandler: function(oldTabId, newTabId) {$beforeHandler}";
push @html5Data,
"data-before-handler=\"function(oldTabId, newTabId) {$beforeHandler}\"";
}
if ($afterHandler) {

# $afterHandler =~ s/'/\\'/go;
push @metaData,
"afterHandler: function(oldTabId, newTabId) {$afterHandler}";
push @html5Data,
"data-after-handler=\"function(oldTabId, newTabId) {$afterHandler}\"";
}
if ($afterLoadHandler) {

# $afterLoadHandler =~ s/'/\\'/go;
push @metaData,
"afterLoadHandler: function(oldTabId, newTabId) {$afterLoadHandler}";
push @html5Data,
"data-after-load-handler=\"function(oldTabId, newTabId) {$afterLoadHandler}\"";
}
if ($container) {
push @metaData, "container: '$container'";
push @html5Data, "data-container=\"$container\"";
}
if ($url) {
push @metaData, "url: '$url'";
push @html5Data, "data-url=\"$url\"";
$tabClass .= ' jqAjaxTab';
}
my $metaData = scalar(@metaData) ? ' {' . join( ',', @metaData ) . '}' : '';
my $html5Data = scalar(@html5Data) ? ' ' . join( ' ', @html5Data ) : '';

my $style = '';
$style .= "height:$height;" if defined $height;
$style .= "width:$width;" if defined $width;
$style = "style='$style'" if $style;

return
"<!-- TAB --><div id='$tabId' class=\"$tabClass jqTab$metaData\">\n<h2 class='jqTabLabel'>$theName</h2>\n<div class='jqTabContents' $style>";
"<div id='$tabId' class='$tabClass jqTab'$html5Data style='display:none'>\n<h2 class='jqTabLabel'>$theName</h2>\n<div class='jqTabContents' $style>";
}

=begin TML
Expand Down
@@ -1,12 +1,15 @@
.foswikiFormSteps .jqTabPane {
margin:0px;
}
.jqTabLabel {
display:none;
}
.jqTabPane form {
margin:0px;
padding:0px;
}
.jqTab {
display:none; /* switched on by plugin */
display:none;
border:1px solid #BDBEC5;
padding:0px;
margin:0px;
Expand All @@ -16,7 +19,7 @@
border:none;
}
.jqTab.current {
display:block;
display:block !important;
}
.jqTabContents {
padding:1em;
Expand Down Expand Up @@ -108,7 +111,7 @@ ul.jqTabGroup a {

/* limitted support for printouts */
.jqTabPane.jqStatic .jqTab {
display:block;
display:block!important;
border:0;
padding:0;
}
Expand All @@ -120,11 +123,12 @@ ul.jqTabGroup a {
}
.jqTabPane.jqStatic .jqTabLabel {
margin:1em 0;
display:block;
}

@media print {
.jqTabPane .jqTab {
display:block;
display:block!important;
border:0;
padding:0;
}
Expand All @@ -136,6 +140,7 @@ ul.jqTabGroup a {
}
.jqTabLabel {
margin:1em 0;
display:block;
}
}

Expand Down

0 comments on commit cd9a295

Please sign in to comment.