You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

167 lines
4.1 KiB

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