breadcrumb.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. //iTop Form field
  2. ;
  3. $(function()
  4. {
  5. // the widget definition, where 'itop' is the namespace,
  6. // 'breadcrumb' the widget name
  7. $.widget( 'itop.breadcrumb',
  8. {
  9. // default options
  10. options:
  11. {
  12. itop_instance_id: '',
  13. new_entry: null,
  14. },
  15. // the constructor
  16. _create: function()
  17. {
  18. var me = this;
  19. this.element
  20. .addClass('breadcrumb');
  21. if(typeof(Storage) !== "undefined")
  22. {
  23. var sBreadCrumbStorageKey = this.options.itop_instance_id + 'breadcrumb-v1';
  24. var aBreadCrumb = [];
  25. var sBreadCrumbData = sessionStorage.getItem(sBreadCrumbStorageKey);
  26. if (sBreadCrumbData !== null)
  27. {
  28. aBreadCrumb = JSON.parse(sBreadCrumbData);
  29. }
  30. var iDisplayableItems = aBreadCrumb.length;
  31. if (this.options.new_entry !== null) {
  32. var sUrl = this.options.new_entry.url;
  33. if (sUrl.length == 0) {
  34. sUrl = window.location.href;
  35. }
  36. // Eliminate items having the same id, before appending the new item
  37. var aBreadCrumb = $.grep(aBreadCrumb, function(item, ipos){
  38. if (item.id == me.options.new_entry.id) return false;
  39. else return true;
  40. });
  41. aBreadCrumb.push({
  42. id: this.options.new_entry.id,
  43. label: this.options.new_entry.label,
  44. description: this.options.new_entry.description,
  45. icon: this.options.new_entry.icon,
  46. url: sUrl
  47. });
  48. // Keep only the last N items
  49. aBreadCrumb = aBreadCrumb.slice(-8);
  50. // Do not show the last = current item
  51. iDisplayableItems = aBreadCrumb.length - 1;
  52. }
  53. sBreadCrumbData = JSON.stringify(aBreadCrumb);
  54. sessionStorage.setItem(sBreadCrumbStorageKey, sBreadCrumbData);
  55. var sBreadCrumbHtml = '<ul>';
  56. for (iEntry in aBreadCrumb)
  57. {
  58. //if (iEntry >= iDisplayableItems) break; // skip the current page
  59. var oEntry = aBreadCrumb[iEntry];
  60. if (oEntry['label'].length > 0)
  61. {
  62. var sIconSpec = '';
  63. if (oEntry['icon'].length > 0)
  64. {
  65. sIconSpec = '<span class="icon"><img src="'+oEntry['icon']+'"/></span>';
  66. }
  67. var sTitle = oEntry['description'];
  68. if (sTitle.length == 0) {
  69. sTitle = oEntry['label'];
  70. }
  71. sBreadCrumbHtml += '<li><a class="itop-breadcrumb-link" breadcrumb-entry="'+iEntry+'" href="'+oEntry['url']+'" title="'+sTitle+'">'+sIconSpec+'<span class="truncate">'+oEntry['label']+'</span></a></li>';
  72. }
  73. }
  74. sBreadCrumbHtml += '</ul>';
  75. $('#itop-breadcrumb').html(sBreadCrumbHtml);
  76. }
  77. else
  78. {
  79. // Sorry! No Web Storage support..
  80. //$('#itop-breadcrumb').html('<span style="display:none;">Session storage not available for the current browser</span>');
  81. }
  82. },
  83. // called when created, and later when changing options
  84. _refresh: function()
  85. {
  86. },
  87. // events bound via _bind are removed automatically
  88. // revert other modifications here
  89. _destroy: function()
  90. {
  91. this.element
  92. .removeClass('breadcrumb');
  93. },
  94. // _setOptions is called with a hash of all options that are changing
  95. // always refresh when changing options
  96. _setOptions: function()
  97. {
  98. this._superApply(arguments);
  99. },
  100. // _setOption is called for each individual option that is changing
  101. _setOption: function( key, value )
  102. {
  103. this._super( key, value );
  104. }
  105. });
  106. });