tabs.js 3.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. /** Modified from original Node-Red source, for audio system visualization
  2. * vim: set ts=4:
  3. * Copyright 2013 IBM Corp.
  4. *
  5. * Licensed under the Apache License, Version 2.0 (the "License");
  6. * you may not use this file except in compliance with the License.
  7. * You may obtain a copy of the License at
  8. *
  9. * http://www.apache.org/licenses/LICENSE-2.0
  10. *
  11. * Unless required by applicable law or agreed to in writing, software
  12. * distributed under the License is distributed on an "AS IS" BASIS,
  13. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14. * See the License for the specific language governing permissions and
  15. * limitations under the License.
  16. **/
  17. RED.tabs = (function() {
  18. function createTabs(options) {
  19. var tabs = {};
  20. var ul = $("#"+options.id)
  21. ul.addClass("red-ui-tabs");
  22. ul.children().first().addClass("active");
  23. ul.children().addClass("red-ui-tab");
  24. function onTabClick() {
  25. activateTab($(this));
  26. return false;
  27. }
  28. function onTabDblClick() {
  29. if (options.ondblclick) {
  30. options.ondblclick(tabs[$(this).attr('href').slice(1)]);
  31. }
  32. return false;
  33. }
  34. function activateTab(link) {
  35. if (typeof link === "string") {
  36. link = ul.find("a[href='#"+link+"']");
  37. }
  38. if (!link.parent().hasClass("active")) {
  39. ul.children().removeClass("active");
  40. link.parent().addClass("active");
  41. if (options.onchange) {
  42. options.onchange(tabs[link.attr('href').slice(1)]);
  43. }
  44. }
  45. }
  46. function updateTabWidths() {
  47. var tabs = ul.find("li.red-ui-tab");
  48. var width = ul.width();
  49. var tabCount = tabs.size();
  50. var tabWidth = (width-6-(tabCount*7))/tabCount;
  51. var pct = 100*tabWidth/width;
  52. tabs.css({width:pct+"%"});
  53. }
  54. ul.find("li.red-ui-tab a").on("click",onTabClick).on("dblclick",onTabDblClick);
  55. updateTabWidths();
  56. function removeTab(id) {
  57. var li = ul.find("a[href='#"+id+"']").parent();
  58. if (li.hasClass("active")) {
  59. var tab = li.prev();
  60. if (tab.size() === 0) {
  61. tab = li.next();
  62. }
  63. activateTab(tab.find("a"));
  64. }
  65. li.remove();
  66. if (options.onremove) {
  67. options.onremove(tabs[id]);
  68. }
  69. delete tabs[id];
  70. updateTabWidths();
  71. }
  72. return {
  73. addTab: function(tab) {
  74. tabs[tab.id] = tab;
  75. var li = $("<li/>",{class:"red-ui-tab"}).appendTo(ul);
  76. var link = $("<a/>",{href:"#"+tab.id, class:"red-ui-tab-label"}).appendTo(li);
  77. link.html(tab.label);
  78. link.on("click",onTabClick);
  79. link.on("dblclick",onTabDblClick);
  80. if (tab.closeable) {
  81. var closeLink = $("<a/>",{href:"#",class:"red-ui-tab-close"}).appendTo(li);
  82. closeLink.html('<i class="icon-remove" />');
  83. closeLink.on("click",function(event) {
  84. removeTab(tab.id);
  85. });
  86. }
  87. updateTabWidths();
  88. if (options.onadd) {
  89. options.onadd(tab);
  90. }
  91. link.attr("title",tab.label);
  92. if (ul.find("li.red-ui-tab").size() == 1) {
  93. activateTab(link);
  94. }
  95. },
  96. removeTab: removeTab,
  97. activateTab: activateTab,
  98. resize: updateTabWidths,
  99. count: function() {
  100. return ul.find("li.red-ui-tab").size();
  101. },
  102. contains: function(id) {
  103. return ul.find("a[href='#"+id+"']").length > 0;
  104. }
  105. }
  106. }
  107. return {
  108. create: createTabs
  109. }
  110. })();