webcit/tiny_mce/utils/mctabs.js

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