mctabs.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. /**
  2. * mctabs.js
  3. *
  4. * Copyright 2009, Moxiecode Systems AB
  5. * Released under LGPL License.
  6. *
  7. * License: http://tinymce.moxiecode.com/license
  8. * Contributing: http://tinymce.moxiecode.com/contributing
  9. */
  10. function MCTabs() {
  11. this.settings = [];
  12. this.onChange = tinyMCEPopup.editor.windowManager.createInstance('tinymce.util.Dispatcher');
  13. };
  14. MCTabs.prototype.init = function(settings) {
  15. this.settings = settings;
  16. };
  17. MCTabs.prototype.getParam = function(name, default_value) {
  18. var value = null;
  19. value = (typeof(this.settings[name]) == "undefined") ? default_value : this.settings[name];
  20. // Fix bool values
  21. if (value == "true" || value == "false")
  22. return (value == "true");
  23. return value;
  24. };
  25. MCTabs.prototype.showTab =function(tab){
  26. tab.className = 'current';
  27. tab.setAttribute("aria-selected", true);
  28. tab.setAttribute("aria-expanded", true);
  29. tab.tabIndex = 0;
  30. };
  31. MCTabs.prototype.hideTab =function(tab){
  32. var t=this;
  33. tab.className = '';
  34. tab.setAttribute("aria-selected", false);
  35. tab.setAttribute("aria-expanded", false);
  36. tab.tabIndex = -1;
  37. };
  38. MCTabs.prototype.showPanel = function(panel) {
  39. panel.className = 'current';
  40. panel.setAttribute("aria-hidden", false);
  41. };
  42. MCTabs.prototype.hidePanel = function(panel) {
  43. panel.className = 'panel';
  44. panel.setAttribute("aria-hidden", true);
  45. };
  46. MCTabs.prototype.getPanelForTab = function(tabElm) {
  47. return tinyMCEPopup.dom.getAttrib(tabElm, "aria-controls");
  48. };
  49. MCTabs.prototype.displayTab = function(tab_id, panel_id, avoid_focus) {
  50. var panelElm, panelContainerElm, tabElm, tabContainerElm, selectionClass, nodes, i, t = this;
  51. tabElm = document.getElementById(tab_id);
  52. if (panel_id === undefined) {
  53. panel_id = t.getPanelForTab(tabElm);
  54. }
  55. panelElm= document.getElementById(panel_id);
  56. panelContainerElm = panelElm ? panelElm.parentNode : null;
  57. tabContainerElm = tabElm ? tabElm.parentNode : null;
  58. selectionClass = t.getParam('selection_class', 'current');
  59. if (tabElm && tabContainerElm) {
  60. nodes = tabContainerElm.childNodes;
  61. // Hide all other tabs
  62. for (i = 0; i < nodes.length; i++) {
  63. if (nodes[i].nodeName == "LI") {
  64. t.hideTab(nodes[i]);
  65. }
  66. }
  67. // Show selected tab
  68. t.showTab(tabElm);
  69. }
  70. if (panelElm && panelContainerElm) {
  71. nodes = panelContainerElm.childNodes;
  72. // Hide all other panels
  73. for (i = 0; i < nodes.length; i++) {
  74. if (nodes[i].nodeName == "DIV")
  75. t.hidePanel(nodes[i]);
  76. }
  77. if (!avoid_focus) {
  78. tabElm.focus();
  79. }
  80. // Show selected panel
  81. t.showPanel(panelElm);
  82. }
  83. };
  84. MCTabs.prototype.getAnchor = function() {
  85. var pos, url = document.location.href;
  86. if ((pos = url.lastIndexOf('#')) != -1)
  87. return url.substring(pos + 1);
  88. return "";
  89. };
  90. //Global instance
  91. var mcTabs = new MCTabs();
  92. tinyMCEPopup.onInit.add(function() {
  93. var tinymce = tinyMCEPopup.getWin().tinymce, dom = tinyMCEPopup.dom, each = tinymce.each;
  94. each(dom.select('div.tabs'), function(tabContainerElm) {
  95. var keyNav;
  96. dom.setAttrib(tabContainerElm, "role", "tablist");
  97. var items = tinyMCEPopup.dom.select('li', tabContainerElm);
  98. var action = function(id) {
  99. mcTabs.displayTab(id, mcTabs.getPanelForTab(id));
  100. mcTabs.onChange.dispatch(id);
  101. };
  102. each(items, function(item) {
  103. dom.setAttrib(item, 'role', 'tab');
  104. dom.bind(item, 'click', function(evt) {
  105. action(item.id);
  106. });
  107. });
  108. dom.bind(dom.getRoot(), 'keydown', function(evt) {
  109. if (evt.keyCode === 9 && evt.ctrlKey && !evt.altKey) { // Tab
  110. keyNav.moveFocus(evt.shiftKey ? -1 : 1);
  111. tinymce.dom.Event.cancel(evt);
  112. }
  113. });
  114. each(dom.select('a', tabContainerElm), function(a) {
  115. dom.setAttrib(a, 'tabindex', '-1');
  116. });
  117. keyNav = tinyMCEPopup.editor.windowManager.createInstance('tinymce.ui.KeyboardNavigation', {
  118. root: tabContainerElm,
  119. items: items,
  120. onAction: action,
  121. actOnFocus: true,
  122. enableLeftRight: true,
  123. enableUpDown: true
  124. }, tinyMCEPopup.dom);
  125. });
  126. });