[ticket/11563] Fix subPanels()

Fix subPanels() code
Modernize subPanels() with jQuery
Use HTML5 data attributes instead of including JS

PHPBB3-11563
This commit is contained in:
Vjacheslav Trushkin 2013-05-23 11:55:04 +03:00
parent 2fcae1ca16
commit 7a34c7eabe
4 changed files with 47 additions and 47 deletions

View file

@ -106,32 +106,48 @@ function dE(n, s, type) {
/** /**
* Alternate display of subPanels * Alternate display of subPanels
*/ */
function subPanels(p) { jQuery(document).ready(function() {
var i, e, t; jQuery('.sub-panels').each(function() {
if (typeof(p) === 'string') { var panels = this.getAttribute('data-panels').split(','),
show_panel = p; show_panel = this.getAttribute('data-show-panel');
}
for (i = 0; i < panels.length; i++) { if (panels.length) {
e = document.getElementById(panels[i]); subPanels(show_panel);
t = document.getElementById(panels[i] + '-tab'); jQuery('a[data-subpanel]', this).click(function () {
subPanels(this.getAttribute('data-subpanel'));
return false;
});
}
if (e) { function subPanels(p) {
if (panels[i] === show_panel) { var i, e, t;
e.style.display = 'block';
if (t) { if (typeof(p) === 'string') {
t.className = 'activetab'; show_panel = p;
} }
} else {
e.style.display = 'none'; for (i = 0; i < panels.length; i++) {
if (t) { e = document.getElementById(panels[i]);
t.className = ''; t = document.getElementById(panels[i] + '-tab');
if (e) {
if (panels[i] === show_panel) {
e.style.display = 'block';
if (t) {
t.className = 'activetab';
}
} else {
e.style.display = 'none';
if (t) {
t.className = '';
}
}
} }
} }
} }
} });
} });
/** /**
* Call print preview * Call print preview

View file

@ -3,33 +3,24 @@
<div class="tabs-container"> <div class="tabs-container">
<h2><a href="{U_VIEW_TOPIC}">{L_TOPIC}{L_COLON} {TOPIC_TITLE}</a></h2> <h2><a href="{U_VIEW_TOPIC}">{L_TOPIC}{L_COLON} {TOPIC_TITLE}</a></h2>
<script type="text/javascript">
// <![CDATA[
var panels = new Array('display-panel', 'split-panel', 'merge-panel');
<!-- IF S_MERGE_VIEW --> <!-- IF S_MERGE_VIEW -->
var show_panel = 'merge-panel'; <!-- DEFINE $SHOW_PANEL = 'merge-panel' -->
<!-- ELSEIF S_SPLIT_VIEW --> <!-- ELSEIF S_SPLIT_VIEW -->
var show_panel = 'split-panel'; <!-- DEFINE $SHOW_PANEL = 'split-panel' -->
<!-- ELSE --> <!-- ELSE -->
var show_panel = 'display-panel'; <!-- DEFINE $SHOW_PANEL = 'display-panel' -->
<!-- ENDIF --> <!-- ENDIF -->
onload_functions.push('subPanels()'); <div id="minitabs" class="sub-panels" data-show-panel="{$SHOW_PANEL}" data-panels="display-panel,split-panel,merge-panel">
// ]]>
</script>
<div id="minitabs">
<ul> <ul>
<li id="display-panel-tab"<!-- IF not S_MERGE_VIEW --> class="activetab"<!-- ENDIF -->> <li id="display-panel-tab"<!-- IF not S_MERGE_VIEW --> class="activetab"<!-- ENDIF -->>
<a href="#minitabs" onclick="subPanels('display-panel'); return false;"><span>{L_DISPLAY_OPTIONS}</span></a> <a href="#minitabs" data-subpanel="display-panel"><span>{L_DISPLAY_OPTIONS}</span></a>
</li> </li>
<li id="split-panel-tab"> <li id="split-panel-tab">
<a href="#minitabs" onclick="subPanels('split-panel'); return false;"><span>{L_SPLIT_TOPIC}</span></a> <a href="#minitabs" data-subpanel="split-panel"><span>{L_SPLIT_TOPIC}</span></a>
</li> </li>
<li id="merge-panel-tab"<!-- IF S_MERGE_VIEW --> class="activetab"<!-- ENDIF -->> <li id="merge-panel-tab"<!-- IF S_MERGE_VIEW --> class="activetab"<!-- ENDIF -->>
<a href="#minitabs" onclick="subPanels('merge-panel'); return false;"><span>{L_MERGE_POSTS}</span></a> <a href="#minitabs" data-subpanel="merge-panel"><span>{L_MERGE_POSTS}</span></a>
</li> </li>
</ul> </ul>
</div> </div>

View file

@ -193,11 +193,11 @@
<!-- ENDIF --> <!-- ENDIF -->
<!-- IF not S_PRIVMSGS and not S_SHOW_DRAFTS and not $SIG_EDIT eq 1 --> <!-- IF not S_PRIVMSGS and not S_SHOW_DRAFTS and not $SIG_EDIT eq 1 -->
<div id="tabs"> <div id="tabs" class="sub-panels" data-show-panel="options-panel" data-panels="options-panel,attach-panel,poll-panel">
<ul> <ul>
<li id="options-panel-tab" class="activetab"><a href="#tabs" onclick="subPanels('options-panel'); return false;"><span>{L_OPTIONS}</span></a></li> <li id="options-panel-tab" class="activetab"><a href="#tabs" data-subpanel="options-panel"><span>{L_OPTIONS}</span></a></li>
<!-- IF S_SHOW_ATTACH_BOX --><li id="attach-panel-tab"><a href="#tabs" onclick="subPanels('attach-panel'); return false;"><span>{L_ADD_ATTACHMENT}</span></a></li><!-- ENDIF --> <!-- IF S_SHOW_ATTACH_BOX --><li id="attach-panel-tab"><a href="#tabs" data-subpanel="attach-panel"><span>{L_ADD_ATTACHMENT}</span></a></li><!-- ENDIF -->
<!-- IF S_SHOW_POLL_BOX || S_POLL_DELETE --><li id="poll-panel-tab"><a href="#tabs" onclick="subPanels('poll-panel'); return false;"><span>{L_ADD_POLL}</span></a></li><!-- ENDIF --> <!-- IF S_SHOW_POLL_BOX || S_POLL_DELETE --><li id="poll-panel-tab"><a href="#tabs" data-subpanel="poll-panel"><span>{L_ADD_POLL}</span></a></li><!-- ENDIF -->
</ul> </ul>
</div> </div>
<!-- ENDIF --> <!-- ENDIF -->

View file

@ -79,12 +79,5 @@
<!-- IF S_DISPLAY_REVIEW --><!-- INCLUDE posting_topic_review.html --><!-- ENDIF --> <!-- IF S_DISPLAY_REVIEW --><!-- INCLUDE posting_topic_review.html --><!-- ENDIF -->
</form> </form>
<!-- IF not S_PRIVMSGS -->
<script type="text/javascript">
// <![CDATA[
subPanels(show_panel);
// ]]>
</script>
<!-- ENDIF -->
<!-- INCLUDE overall_footer.html --> <!-- INCLUDE overall_footer.html -->