dashboard.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. // jQuery UI style "widget" for editing an iTop "dashboard"
  2. $(function()
  3. {
  4. // the widget definition, where "itop" is the namespace,
  5. // "dashboard" the widget name
  6. $.widget( "itop.dashboard",
  7. {
  8. // default options
  9. options:
  10. {
  11. dashboard_id: '',
  12. layout_class: '',
  13. title: '',
  14. submit_to: 'index.php',
  15. submit_parameters: {},
  16. render_to: 'index.php',
  17. render_parameters: {},
  18. new_dashlet_parameters: {}
  19. },
  20. // the constructor
  21. _create: function()
  22. {
  23. var me = this;
  24. this.element
  25. .addClass('itop-dashboard');
  26. this.ajax_div = $('<div></div>').appendTo(this.element);
  27. $('.itop-dashboard').bind('keyup.dashboard_editor', function(event) { me._on_keyup(event); } );
  28. this._make_draggable();
  29. },
  30. // called when created, and later when changing options
  31. _refresh: function()
  32. {
  33. var oParams = this._get_state(this.options.render_parameters);
  34. var me = this;
  35. $.post(this.options.render_to, oParams, function(data){
  36. me.element.html(data);
  37. me._make_draggable();
  38. });
  39. },
  40. // events bound via _bind are removed automatically
  41. // revert other modifications here
  42. destroy: function()
  43. {
  44. this.element
  45. .removeClass('itop-dashboard');
  46. this.ajax_div.remove();
  47. $(document).unbind('keyup.dashboard_editor');
  48. // call the original destroy method since we overwrote it
  49. $.Widget.prototype.destroy.call( this );
  50. },
  51. // _setOptions is called with a hash of all options that are changing
  52. _setOptions: function()
  53. {
  54. // in 1.9 would use _superApply
  55. $.Widget.prototype._setOptions.apply( this, arguments );
  56. this._refresh();
  57. },
  58. // _setOption is called for each individual option that is changing
  59. _setOption: function( key, value )
  60. {
  61. // in 1.9 would use _super
  62. $.Widget.prototype._setOption.call( this, key, value );
  63. },
  64. _get_state: function(oMergeInto)
  65. {
  66. var oState = oMergeInto;
  67. oState.cells = [];
  68. this.element.find('.layout_cell').each(function() {
  69. var aList = [];
  70. $(this).find(':itop-dashlet').each(function() {
  71. var oDashlet = $(this).data('dashlet');
  72. if(oDashlet)
  73. {
  74. var oDashletParams = oDashlet.get_params();
  75. var sId = oDashletParams.dashlet_id;
  76. oState[sId] = oDashletParams;
  77. aList.push({dashlet_id: sId, dashlet_class: oDashletParams.dashlet_class} );
  78. }
  79. });
  80. if (aList.length == 0)
  81. {
  82. oState[0] = {dashlet_id: 0, dashlet_class: 'DashletEmptyCell'};
  83. aList.push({dashlet_id: 0, dashlet_class: 'DashletEmptyCell'});
  84. }
  85. oState.cells.push(aList);
  86. });
  87. oState.dashboard_id = this.options.dashboard_id;
  88. oState.layout_class = this.options.layout_class;
  89. oState.title = this.options.title;
  90. return oState;
  91. },
  92. save: function()
  93. {
  94. var oParams = this._get_state(this.options.submit_parameters);
  95. var me = this;
  96. $.post(this.options.submit_to, oParams, function(data){
  97. me.ajax_div.html(data);
  98. });
  99. },
  100. add_dashlet: function(options)
  101. {
  102. var sDashletId = this._get_new_id();
  103. var oDashlet = $('<div class="dashlet" id="dashlet_'+sDashletId+'"/>');
  104. oDashlet.appendTo(options.container);
  105. var oDashletProperties = $('<div class="dashlet_properties" id="dashlet_properties_'+sDashletId+'"/>');
  106. oDashletProperties.appendTo($('#dashlet_properties'));
  107. var oParams = this.options.new_dashlet_parameters;
  108. var sDashletClass = options.dashlet_class;
  109. oParams.dashlet_class = sDashletClass;
  110. oParams.dashlet_id = sDashletId;
  111. var me = this;
  112. $.post(this.options.render_to, oParams, function(data){
  113. me.ajax_div.html(data);
  114. $('#dashlet_'+sDashletId)
  115. .dashlet({dashlet_id: sDashletId, dashlet_class: sDashletClass})
  116. .dashlet('deselect_all')
  117. .dashlet('select')
  118. .draggable({
  119. revert: 'invalid', appendTo: 'body', zIndex: 9999,
  120. helper: function() {
  121. var oDragItem = $(this).dashlet('get_drag_icon');
  122. return oDragItem;
  123. },
  124. cursorAt: { top: 16, left: 16 },
  125. });
  126. if (options.refresh)
  127. {
  128. me._refresh();
  129. }
  130. });
  131. },
  132. _get_new_id: function()
  133. {
  134. var iMaxId = 0;
  135. this.element.find(':itop-dashlet').each(function() {
  136. var oDashlet = $(this).data('dashlet');
  137. if(oDashlet)
  138. {
  139. var oDashletParams = oDashlet.get_params();
  140. var id = parseInt(oDashletParams.dashlet_id, 10);
  141. if (id > iMaxId) iMaxId = id;
  142. }
  143. });
  144. return 1 + iMaxId;
  145. },
  146. _make_draggable: function()
  147. {
  148. var me = this;
  149. this.element.find('.dashlet').draggable({
  150. revert: 'invalid', appendTo: 'body', zIndex: 9999,
  151. helper: function() {
  152. var oDragItem = $(this).dashlet('get_drag_icon');
  153. return oDragItem;
  154. },
  155. cursorAt: { top: 16, left: 16 },
  156. });
  157. this.element.find('table td').droppable({
  158. accept: '.dashlet,.dashlet_icon',
  159. drop: function(event, ui) {
  160. $( this ).find( ".placeholder" ).remove();
  161. var bRefresh = $(this).hasClass('layout_extension');
  162. var oDashlet = ui.draggable;
  163. if (oDashlet.hasClass('dashlet'))
  164. {
  165. // moving around a dashlet
  166. oDashlet.detach();
  167. oDashlet.css({top: 0, left: 0});
  168. oDashlet.appendTo($(this));
  169. if( bRefresh )
  170. {
  171. // The layout was extended... refresh the whole dashboard
  172. me._refresh();
  173. }
  174. }
  175. else
  176. {
  177. // inserting a new dashlet
  178. var sDashletClass = ui.draggable.attr('dashlet_class');
  179. $(':itop-dashboard').dashboard('add_dashlet', {dashlet_class: sDashletClass, container: $(this), refresh: bRefresh });
  180. }
  181. },
  182. });
  183. },
  184. _on_keyup: function(event)
  185. {
  186. console.log('Key pressed in Dashlet');
  187. }
  188. });
  189. });