public/assets/plugins/jscripty/js/Sidebar.js

   1 'use strict';
   2
   3 /**
   4  * Construcs a new sidebar for the given editor.
   5  */
   6 function Sidebar(editorUi, container) {
   7         this.editorUi = editorUi;
   8         this.container = container;
   9         this.palettes = new Object();
  10         this.showTooltips = true;
  11         this.graph = new Graph(document.createElement('div'), null, null, this.editorUi
  12                 .editor.graph.getStylesheet());
  13         this.graph.resetViewOnRootChange = false;
  14         this.graph.foldingEnabled = false;
  15         this.graph.setConnectable(false);
  16         this.graph.autoScroll = false;
  17         this.graph.setTooltips(false);
  18         this.graph.setEnabled(false);
  19
  20         // Container must be in the DOM for correct HTML rendering
  21         this.graph.container.style.visibility = 'hidden';
  22         this.graph.container.style.position = 'absolute';
  23         document.body.appendChild(this.graph.container);
  24
  25         if (!mxClient.IS_TOUCH) {
  26                 mxEvent.addListener(document, 'mouseup', mxUtils.bind(this, function() {
  27                         this.showTooltips = true;
  28                 }));
  29
  30                 // Enables tooltips after scroll
  31                 mxEvent.addListener(container, 'scroll', mxUtils.bind(this, function() {
  32                         this.showTooltips = true;
  33                 }));
  34
  35                 mxEvent.addListener(document, 'mousedown', mxUtils.bind(this, function() {
  36                         this.showTooltips = false;
  37                         this.hideTooltip();
  38                 }));
  39
  40                 mxEvent.addListener(document, 'mousemove', mxUtils.bind(this, function(evt) {
  41                         var src = mxEvent.getSource(evt);
  42
  43                         while (src != null) {
  44                                 if (src == this.currentElt) {
  45                                         return;
  46                                 }
  47
  48                                 src = src.parentNode;
  49                         }
  50
  51                         this.hideTooltip();
  52                 }));
  53
  54                 // Handles mouse leaving the window
  55                 mxEvent.addListener(document, 'mouseout', mxUtils.bind(this, function(evt) {
  56                         if (evt.toElement == null && evt.relatedTarget == null) {
  57                                 this.hideTooltip();
  58                         }
  59                 }));
  60         }
  61
  62         this.init();
  63
  64         // Pre-fetches tooltip image
  65         new Image().src = IMAGE_PATH + '/tooltip.png';
  66 };
  67
  68 /**
  69  * Adds all palettes to the sidebar.
  70  */
  71 Sidebar.prototype.init = function() {
  72         var dir = STENCIL_PATH;
  73         console.log(dir);
  74
  75         this.addImagePalette('entry', mxResources.get('application'), dir + '/',
  76                 '_128x128.png', ['start', 'question', 'input', 'end', 'email'], [mxResources.get('start'),
  77                         mxResources.get('question'), mxResources.get('input'), mxResources.get('end'), mxResources.get('email')
  78                 ]);
  79
  80         // this.addBpmnPalette(dir, false);
  81
  82 };
  83
  84 /**
  85  * Specifies if tooltips should be visible. Default is true.
  86  */
  87 Sidebar.prototype.enableTooltips = !mxClient.IS_TOUCH;
  88
  89 /**
  90  * Specifies the delay for the tooltip. Default is 16 px.
  91  */
  92 Sidebar.prototype.tooltipBorder = 16;
  93
  94 /**
  95  * Specifies the delay for the tooltip. Default is 3 px.
  96  */
  97 Sidebar.prototype.thumbBorder = 3;
  98
  99 /**
 100  * Specifies the delay for the tooltip. Default is 300 ms.
 101  */
 102 Sidebar.prototype.tooltipDelay = 300;
 103
 104 /**
 105  * Specifies if edges should be used as templates if clicked. Default is true.
 106  */
 107 Sidebar.prototype.installEdges = true;
 108
 109 /**
 110  * Specifies the URL of the gear image.
 111  */
 112 Sidebar.prototype.gearImage = STENCIL_PATH + '/clipart/Gear_128x128.png';
 113
 114 /**
 115  * Specifies the width of the thumbnails.
 116  */
 117 Sidebar.prototype.thumbWidth = 34;
 118
 119 /**
 120  * Specifies the height of the thumbnails.
 121  */
 122 Sidebar.prototype.thumbHeight = 34;
 123
 124 /**
 125  * Specifies the padding for the thumbnails. Default is 3.
 126  */
 127 Sidebar.prototype.thumbPadding = 2;
 128
 129 /**
 130  * Specifies the size of the sidebar titles.
 131  */
 132 Sidebar.prototype.sidebarTitleSize = 9;
 133
 134 /**
 135  * Specifies if titles in the sidebar should be enabled.
 136  */
 137 Sidebar.prototype.sidebarTitles = false;
 138
 139 /**
 140  * Specifies if titles in the tooltips should be enabled.
 141  */
 142 Sidebar.prototype.tooltipTitles = false;
 143
 144 /**
 145  * Adds all palettes to the sidebar.
 146  */
 147 Sidebar.prototype.showTooltip = function(elt, cells, title, showLabel) {
 148         if (this.enableTooltips && this.showTooltips) {
 149                 if (this.currentElt != elt) {
 150                         if (this.thread != null) {
 151                                 window.clearTimeout(this.thread);
 152                                 this.thread = null;
 153                         }
 154
 155                         var show = mxUtils.bind(this, function() {
 156                                 // Lazy creation of the DOM nodes and graph instance
 157                                 if (this.tooltip == null) {
 158                                         this.tooltip = document.createElement('div');
 159                                         this.tooltip.className = 'geSidebarTooltip';
 160                                         document.body.appendChild(this.tooltip);
 161
 162                                         this.graph2 = new Graph(this.tooltip, null, null, this.editorUi.editor.graph
 163                                                 .getStylesheet());
 164                                         this.graph2.view.setTranslate(this.tooltipBorder, this.tooltipBorder);
 165                                         this.graph2.resetViewOnRootChange = false;
 166                                         this.graph2.foldingEnabled = false;
 167                                         this.graph2.autoScroll = false;
 168                                         this.graph2.setTooltips(false);
 169                                         this.graph2.setConnectable(false);
 170                                         this.graph2.setEnabled(false);
 171
 172                                         if (!mxClient.IS_SVG) {
 173                                                 this.graph2.view.canvas.style.position = 'relative';
 174                                         }
 175
 176                                         this.tooltipImage = mxUtils.createImage(IMAGE_PATH + '/tooltip.png');
 177                                         this.tooltipImage.style.position = 'absolute';
 178                                         this.tooltipImage.style.width = '14px';
 179                                         this.tooltipImage.style.height = '27px';
 180
 181                                         document.body.appendChild(this.tooltipImage);
 182                                 }
 183
 184                                 this.tooltip.style.display = 'block';
 185                                 this.graph2.labelsVisible = (showLabel == null || showLabel);
 186                                 this.graph2.model.clear();
 187                                 this.graph2.addCells(cells);
 188
 189                                 var bounds = this.graph2.getGraphBounds();
 190                                 var width = bounds.width + 2 * this.tooltipBorder;
 191                                 var height = bounds.height + 2 * this.tooltipBorder;
 192
 193                                 if (mxClient.IS_QUIRKS) {
 194                                         width += 4;
 195                                         height += 4;
 196                                         this.tooltip.style.overflow = 'hidden';
 197                                 } else {
 198                                         this.tooltip.style.overflow = 'visible';
 199                                 }
 200
 201                                 this.tooltipImage.style.visibility = 'visible';
 202                                 this.tooltip.style.width = width + 'px';
 203
 204                                 // Adds title for entry
 205                                 if (this.tooltipTitles && title != null && title.length > 0) {
 206                                         if (this.tooltipTitle == null) {
 207                                                 this.tooltipTitle = document.createElement('div');
 208                                                 this.tooltipTitle.style.borderTop = '1px solid gray';
 209                                                 this.tooltipTitle.style.textAlign = 'center';
 210                                                 this.tooltipTitle.style.width = '100%';
 211
 212                                                 // Oversize titles are cut-off currently. Should make tooltip wider later.
 213                                                 this.tooltipTitle.style.overflow = 'hidden';
 214
 215                                                 if (mxClient.IS_SVG) {
 216                                                         this.tooltipTitle.style.paddingTop = '2px';
 217                                                 } else {
 218                                                         this.tooltipTitle.style.position = 'absolute';
 219                                                         this.tooltipTitle.style.paddingTop = '6px';
 220                                                 }
 221
 222                                                 this.tooltip.appendChild(this.tooltipTitle);
 223                                         } else {
 224                                                 this.tooltipTitle.innerHTML = '';
 225                                         }
 226
 227                                         this.tooltipTitle.style.display = '';
 228                                         mxUtils.write(this.tooltipTitle, title);
 229
 230                                         var dy = this.tooltipTitle.offsetHeight + 10;
 231                                         height += dy;
 232
 233                                         if (mxClient.IS_SVG) {
 234                                                 this.tooltipTitle.style.marginTop = (-dy) + 'px';
 235                                         } else {
 236                                                 height -= 6;
 237                                                 this.tooltipTitle.style.top = (height - dy) + 'px';
 238                                         }
 239                                 } else if (this.tooltipTitle != null && this.tooltipTitle.parentNode !=
 240                                         null) {
 241                                         this.tooltipTitle.style.display = 'none';
 242                                 }
 243
 244                                 this.tooltip.style.height = height + 'px';
 245                                 var x0 = -Math.min(0, bounds.x - this.tooltipBorder);
 246                                 var y0 = -Math.min(0, bounds.y - this.tooltipBorder);
 247
 248                                 var left = this.container.clientWidth + this.editorUi.splitSize + 3;
 249                                 var top = Math.max(0, (this.container.offsetTop + elt.offsetTop - this.container
 250                                         .scrollTop - height / 2 + 16));
 251
 252                                 if (mxClient.IS_SVG) {
 253                                         this.graph2.view.canvas.setAttribute('transform', 'translate(' + x0 +
 254                                                 ',' + y0 + ')');
 255                                 } else {
 256                                         this.graph2.view.drawPane.style.left = x0 + 'px';
 257                                         this.graph2.view.drawPane.style.top = y0 + 'px';
 258                                 }
 259
 260                                 // Workaround for ignored position CSS style in IE9
 261                                 // (changes to relative without the following line)
 262                                 // Added width of the page-sidebar
 263                                 //              left += document.getElementById('page-sidebar').offsetWidth;
 264                                 // Added static height of the page-navbar
 265                                 top += 90;
 266
 267                                 this.tooltip.style.position = 'absolute';
 268                                 this.tooltip.style.left = left + 'px';
 269                                 this.tooltip.style.top = top + 'px';
 270                                 this.tooltipImage.style.left = (left - 13) + 'px';
 271                                 this.tooltipImage.style.top = (top + height / 2 - 13) + 'px';
 272                         });
 273
 274                         if (this.tooltip != null && this.tooltip.style.display != 'none') {
 275                                 show();
 276                         } else {
 277                                 this.thread = window.setTimeout(show, this.tooltipDelay);
 278                         }
 279
 280                         this.currentElt = elt;
 281                 }
 282         }
 283 };
 284
 285 /**
 286  * Hides the current tooltip.
 287  */
 288 Sidebar.prototype.hideTooltip = function() {
 289         if (this.thread != null) {
 290                 window.clearTimeout(this.thread);
 291                 this.thread = null;
 292         }
 293
 294         if (this.tooltip != null) {
 295                 this.tooltip.style.display = 'none';
 296                 this.tooltipImage.style.visibility = 'hidden';
 297                 this.currentElt = null;
 298         }
 299 };
 300
 301 /**
 302  * Creates and returns the given title element.
 303  */
 304 Sidebar.prototype.createTitle = function(label) {
 305         var elt = document.createElement('a');
 306         elt.setAttribute('href', 'javascript:void(0);');
 307         elt.className = 'geTitle';
 308         mxUtils.write(elt, label);
 309
 310         return elt;
 311 };
 312
 313 /**
 314  * Creates a thumbnail for the given cells.
 315  */
 316 Sidebar.prototype.createThumb = function(cells, width, height, parent, title,
 317         showLabel) {
 318         this.graph.labelsVisible = (showLabel == null || showLabel);
 319         this.graph.view.scaleAndTranslate(1, 0, 0);
 320         this.graph.addCells(cells);
 321         var bounds = this.graph.getGraphBounds();
 322         var corr = this.thumbBorder;
 323         var s = Math.min((width - 2) / (bounds.width - bounds.x + corr), (height - 2) /
 324                 (bounds.height - bounds.y + corr));
 325         var x0 = -Math.min(bounds.x, 0);
 326         var y0 = -Math.min(bounds.y, 0);
 327         this.graph.view.scaleAndTranslate(s, x0, y0);
 328
 329         bounds = this.graph.getGraphBounds();
 330         var dx = Math.max(0, Math.floor((width - bounds.width - bounds.x) / 2));
 331         var dy = Math.max(0, Math.floor((height - bounds.height - bounds.y) / 2));
 332
 333         var node = null;
 334
 335         // For supporting HTML labels in IE9 standards mode the container is cloned instead
 336         if (this.graph.dialect == mxConstants.DIALECT_SVG && !mxClient.NO_FO) {
 337                 node = this.graph.view.getCanvas().ownerSVGElement.cloneNode(true);
 338         }
 339         // LATER: Check if deep clone can be used for quirks if container in DOM
 340         else {
 341                 node = this.graph.container.cloneNode(false);
 342                 node.innerHTML = this.graph.container.innerHTML;
 343         }
 344
 345         this.graph.getModel().clear();
 346
 347         // Catch-all event handling
 348         if (mxClient.IS_IE6) {
 349                 parent.style.backgroundImage = 'url(' + this.editorUi.editor.transparentImage +
 350                         ')';
 351         }
 352
 353         var dd = 3;
 354         node.style.position = 'relative';
 355         node.style.overflow = 'hidden';
 356         node.style.cursor = 'pointer';
 357         node.style.left = (dx + dd) + 'px';
 358         node.style.top = (dy + dd) + 'px';
 359         node.style.width = width + 'px';
 360         node.style.height = height + 'px';
 361         node.style.visibility = '';
 362         node.style.minWidth = '';
 363         node.style.minHeight = '';
 364
 365         parent.appendChild(node);
 366
 367         // Adds title for sidebar entries
 368         if (this.sidebarTitles && title != null) {
 369                 var border = (mxClient.IS_QUIRKS) ? 2 * this.thumbPadding + 2 : 0;
 370                 parent.style.height = (this.thumbHeight + border + this.sidebarTitleSize + 8) +
 371                         'px';
 372
 373                 var div = document.createElement('div');
 374                 div.style.fontSize = this.sidebarTitleSize + 'px';
 375                 div.style.textAlign = 'center';
 376                 div.style.whiteSpace = 'nowrap';
 377
 378                 if (mxClient.IS_IE) {
 379                         div.style.height = (this.sidebarTitleSize + 12) + 'px';
 380                 }
 381
 382                 div.style.paddingTop = '4px';
 383                 mxUtils.write(div, title);
 384                 parent.appendChild(div);
 385         }
 386 };
 387
 388 /**
 389  * Creates and returns a new palette item for the given image.
 390  */
 391 Sidebar.prototype.createItem = function(cells, title, showLabel) {
 392         var elt = document.createElement('a');
 393         elt.setAttribute('href', 'javascript:void(0);');
 394         elt.className = 'geItem';
 395         elt.style.overflow = 'hidden';
 396         var border = (mxClient.IS_QUIRKS) ? 8 + 2 * this.thumbPadding : 6;
 397         elt.style.width = (this.thumbWidth + border) + 'px';
 398         elt.style.height = (this.thumbHeight + border) + 'px';
 399         elt.style.padding = this.thumbPadding + 'px';
 400
 401         // Blocks default click action
 402         mxEvent.addListener(elt, 'click', function(evt) {
 403                 mxEvent.consume(evt);
 404         });
 405
 406         this.createThumb(cells, this.thumbWidth, this.thumbHeight, elt, title,
 407                 showLabel);
 408
 409         return elt;
 410 };
 411
 412
 413 /**
 414  * Creates a drop handler for inserting the given cells.
 415  */
 416 Sidebar.prototype.createDropHandler = function(cells, allowSplit) {
 417         return function(graph, evt, target, x, y) {
 418                 if (graph.isEnabled()) {
 419                         cells = graph.getImportableCells(cells);
 420
 421                         if (cells.length > 0) {
 422                                 var validDropTarget = (target != null) ?
 423                                         graph.isValidDropTarget(target, cells, evt) : false;
 424                                 var select = null;
 425
 426                                 if (target != null && !validDropTarget) {
 427                                         target = null;
 428                                 }
 429
 430                                 // Splits the target edge or inserts into target group
 431                                 if (allowSplit && graph.isSplitEnabled() && graph.isSplitTarget(target,
 432                                                 cells, evt)) {
 433                                         graph.splitEdge(target, cells, null, x, y);
 434                                         select = cells;
 435                                 } else if (cells.length > 0) {
 436                                         select = graph.importCells(cells, x, y, target);
 437                                 }
 438
 439                                 if (select != null && select.length > 0) {
 440                                         graph.scrollCellToVisible(select[0]);
 441                                         graph.setSelectionCells(select);
 442                                 }
 443                         }
 444                 }
 445         };
 446 };
 447
 448 /**
 449  * Creates and returns a preview element for the given width and height.
 450  */
 451 Sidebar.prototype.createDragPreview = function(width, height) {
 452         var elt = document.createElement('div');
 453         elt.style.border = '1px dashed black';
 454         elt.style.width = width + 'px';
 455         elt.style.height = height + 'px';
 456
 457         return elt;
 458 };
 459
 460 /**
 461  * Creates a drag source for the given element.
 462  */
 463 Sidebar.prototype.createDragSource = function(elt, dropHandler, preview) {
 464         var dragSource = mxUtils.makeDraggable(elt, this.editorUi.editor.graph,
 465                 dropHandler,
 466                 preview, 0, 0, this.editorUi.editor.graph.autoscroll, true, true);
 467
 468
 469
 470         // Allows drop into cell only if target is a valid root
 471         dragSource.getDropTarget = function(graph, x, y) {
 472                 var target = mxDragSource.prototype.getDropTarget.apply(this, arguments);
 473                 if (!graph.isValidRoot(target)) {
 474                         target = null;
 475                 }
 476
 477                 return target;
 478         };
 479
 480         return dragSource;
 481 };
 482
 483
 484
 485 /**
 486  * Adds a handler for inserting the cell with a single click.
 487  */
 488 Sidebar.prototype.addClickHandler = function(elt, ds) {
 489         var graph = this.editorUi.editor.graph;
 490         var first = null;
 491
 492         mxEvent.addGestureListeners(elt, function(evt) {
 493                 first = new mxPoint(mxEvent.getClientX(evt), mxEvent.getClientY(evt));
 494         });
 495
 496         var oldMouseUp = ds.mouseUp;
 497         ds.mouseUp = function(evt) {
 498                 if (!mxEvent.isPopupTrigger(evt) && this.currentGraph == null && first !=
 499                         null) {
 500                         var tol = graph.tolerance;
 501
 502                         if (Math.abs(first.x - mxEvent.getClientX(evt)) <= tol &&
 503                                 Math.abs(first.y - mxEvent.getClientY(evt)) <= tol) {
 504                                 var gs = graph.getGridSize();
 505                                 ds.drop(graph, evt, null, gs, gs);
 506                         }
 507                 }
 508
 509                 oldMouseUp.apply(this, arguments);
 510                 first = null;
 511         };
 512 };
 513
 514 /**
 515  * Giuseppe Careri
 516  * Create xml document vertex
 517  */
 518 Sidebar.prototype.createXmlDocument = function(element, label, variables,
 519         values) {
 520         var doc = mxUtils.createXmlDocument();
 521         var node = doc.createElement(element)
 522         node.setAttribute('label', label);
 523
 524         variables.forEach(function(variable, index) {
 525                 node.setAttribute(variable, values[index] ? values[index] : '');
 526         });
 527
 528         return node;
 529 }
 530
 531 /**
 532  * Giuseppe Careri
 533  * Creates a drop handler for inserting the given cells.
 534  */
 535 Sidebar.prototype.createVertexTemplate = function(style, width, height, value,
 536         title, showLabel) {
 537         var variables = [];
 538         var values = [];
 539
 540         switch (value) {
 541
 542                 // case 'start':
 543                 //      variables = ['Text'];
 544                 //      values = [];
 545                 //      break;
 546                 case 'question':
 547                         variables = ['question', 'other'];
 548                         values = ['', 'false'];
 549                         break;
 550                 case 'input':
 551                         variables = ['question', 'Type'];
 552                         values = [''];
 553                         break;
 554                         // case 'end':
 555                         //      variables = ['Text', 'Zendesk', 'Summary'];
 556                         //      values = [];
 557                         //      break;
 558                 case 'email':
 559                         variables = ["Host", "Username", "Password", "To", "Subject", "Body"];
 560                         values = [''];
 561                         break;
 562                 default:
 563                         variables = [];
 564                         values = [];
 565                         break;
 566         }
 567
 568         var node = this.createXmlDocument(value, title, variables, values);
 569
 570         //var cells = [new mxCell((value != null) ? value : '', new mxGeometry(0, 0, width, height), style)];
 571         var cells = [new mxCell(node, new mxGeometry(0, 0, width, height), style)];
 572         cells[0].vertex = true;
 573
 574         return this.createVertexTemplateFromCells(cells, width, height, title,
 575                 showLabel);
 576 };
 577
 578
 579
 580 /**
 581  * Creates a drop handler for inserting the given cells.
 582  */
 583 Sidebar.prototype.createVertexTemplateFromCells = function(cells, width, height,
 584         title, showLabel) {
 585         var elt = this.createItem(cells, title, showLabel);
 586         var ds = this.createDragSource(elt, this.createDropHandler(cells, true), this
 587                 .createDragPreview(width, height));
 588         this.addClickHandler(elt, ds);
 589
 590         // Uses guides for vertices only if enabled in graph
 591         ds.isGuidesEnabled = mxUtils.bind(this, function() {
 592                 return this.editorUi.editor.graph.graphHandler.guidesEnabled;
 593         });
 594
 595         // Shows a tooltip with the rendered cell
 596         if (!touchStyle) {
 597                 mxEvent.addListener(elt, 'mousemove', mxUtils.bind(this, function(evt) {
 598                         this.showTooltip(elt, cells, title, showLabel);
 599                 }));
 600         }
 601
 602         return elt;
 603 };
 604
 605 /**
 606  * Creates a drop handler for inserting the given cells.
 607  */
 608 Sidebar.prototype.createEdgeTemplate = function(style, width, height, value,
 609         title, showLabel) {
 610         var cells = [new mxCell((value != null) ? value : '', new mxGeometry(0, 0,
 611                 width, height), style)];
 612         cells[0].geometry.setTerminalPoint(new mxPoint(0, height), true);
 613         cells[0].geometry.setTerminalPoint(new mxPoint(width, 0), false);
 614         cells[0].geometry.relative = true;
 615         cells[0].edge = true;
 616
 617         return this.createEdgeTemplateFromCells(cells, width, height, title,
 618                 showLabel);
 619 };
 620
 621 /**
 622  * Creates a drop handler for inserting the given cells.
 623  */
 624 Sidebar.prototype.createEdgeTemplateFromCells = function(cells, width, height,
 625         title, showLabel) {
 626         var elt = this.createItem(cells, title, showLabel);
 627         this.createDragSource(elt, this.createDropHandler(cells, false), this.createDragPreview(
 628                 width, height));
 629
 630         // Installs the default edge
 631         var graph = this.editorUi.editor.graph;
 632         mxEvent.addListener(elt, 'click', mxUtils.bind(this, function(evt) {
 633                 if (this.installEdges) {
 634                         graph.setDefaultEdge(cells[0]);
 635                 }
 636
 637                 // Highlights the entry for 200ms
 638                 elt.style.backgroundColor = '#ffffff';
 639
 640                 window.setTimeout(function() {
 641                         elt.style.backgroundColor = '';
 642                 }, 300);
 643
 644                 mxEvent.consume(evt);
 645         }));
 646
 647         // Shows a tooltip with the rendered cell
 648         touchStyle = false;
 649         if (!touchStyle) {
 650                 mxEvent.addListener(elt, 'mousemove', mxUtils.bind(this, function(evt) {
 651                         this.showTooltip(elt, cells, title, showLabel);
 652                 }));
 653         }
 654
 655         return elt;
 656 };
 657
 658 /**
 659  * Adds the given palette.
 660  */
 661 Sidebar.prototype.addPalette = function(id, title, expanded, onInit) {
 662         var elt = this.createTitle(title);
 663         this.container.appendChild(elt);
 664
 665         var div = document.createElement('div');
 666         div.className = 'geSidebar';
 667
 668         if (expanded) {
 669                 onInit(div);
 670                 onInit = null;
 671         } else {
 672                 div.style.display = 'none';
 673         }
 674
 675         this.addFoldingHandler(elt, div, onInit);
 676
 677         var outer = document.createElement('div');
 678         outer.appendChild(div);
 679         this.container.appendChild(outer);
 680
 681         // Keeps references to the DOM nodes
 682         if (id != null) {
 683                 this.palettes[id] = [elt, outer];
 684         }
 685 };
 686
 687 /**
 688  * Create the given title element.
 689  */
 690 Sidebar.prototype.addFoldingHandler = function(title, content, funct) {
 691         var initialized = false;
 692
 693         title.style.backgroundImage = (content.style.display == 'none') ?
 694                 'url(' + IMAGE_PATH + '/collapsed.gif)' : 'url(' + IMAGE_PATH +
 695                 '/expanded.gif)';
 696         title.style.backgroundRepeat = 'no-repeat';
 697         title.style.backgroundPosition = '100% 50%';
 698
 699         mxEvent.addListener(title, 'click', function(evt) {
 700                 if (content.style.display == 'none') {
 701                         if (!initialized) {
 702                                 initialized = true;
 703
 704                                 if (funct != null) {
 705                                         title.style.cursor = 'wait';
 706                                         window.setTimeout(function() {
 707                                                 funct(content);
 708                                                 title.style.cursor = '';
 709                                         }, 0);
 710                                 }
 711                         }
 712
 713                         title.style.backgroundImage = 'url(' + IMAGE_PATH + '/expanded.gif)';
 714                         content.style.display = 'block';
 715                 } else {
 716                         title.style.backgroundImage = 'url(' + IMAGE_PATH + '/collapsed.gif)';
 717                         content.style.display = 'none';
 718                 }
 719
 720                 mxEvent.consume(evt);
 721         });
 722 };
 723
 724 /**
 725  * Removes the palette for the given ID.
 726  */
 727 Sidebar.prototype.removePalette = function(id) {
 728         var elts = this.palettes[id];
 729
 730         if (elts != null) {
 731                 this.palettes[id] = null;
 732
 733                 for (var i = 0; i < elts.length; i++) {
 734                         this.container.removeChild(elts[i]);
 735                 }
 736
 737                 return true;
 738         }
 739
 740         return false;
 741 };
 742
 743 /**
 744  * Adds the given image palette.
 745  */
 746 Sidebar.prototype.addImagePalette = function(id, title, prefix, postfix, items,
 747         titles) {
 748         // Giuseppe Careri
 749         // Expanded Sidebar only entry
 750         this.addPalette(id, title, (id === 'entry'), mxUtils.bind(this, function(
 751                 content) {
 752                 var showTitles = titles != null;
 753
 754                 for (var i = 0; i < items.length; i++) {
 755                         var icon = prefix + items[i] + postfix;
 756                         content.appendChild(this.createVertexTemplate('image;image=' + icon, 80,
 757                                 80, items[i], (showTitles) ? titles[i] : null, showTitles));
 758                 }
 759         }));
 760 };
 761 // ***********modified***************
 762 // Sidebar.prototype.addBpmnPalette = function(dir, expand) {
 763 //      //Abigael Dawit
 764 //
 765 //      var fns = [
 766 //              this.createVertexTemplate(
 767 //                      'text;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;',
 768 //                      40, 20, 'Text', 'Text', null),
 769 //              //this.createVertexTemplate('shape=ext;rounded=1;whiteSpace=wrap;dashed=1;dashPattern=1 4;', 120, 80, 'Event\nSub-Process', 'Event Sub-Process', null),
 770 //              this.createVertexTemplate('shape=swimlane;whiteSpace=wrap;startSize=60;',
 771 //                      120, 160, 'Container', 'Container', null),
 772 //              //      this.createVertexTemplate('shape=ellipse;', 120, 160, 'Ellips', 'Ellipse', null)
 773 //              this.createVertexTemplate(
 774 //                      'shape=swimlane;html=1;horizontal=0;swimlaneFillColor=white;swimlaneLine=0;fillColor=none;rounded=1;verticalAlign=middle',
 775 //                      300, 120, 'Lane', 'Lane', null)
 776 //
 777 //      ]
 778 //
 779 //      this.addPalette('utility', 'Utility ', false, mxUtils.bind(this, function(
 780 //              content) {
 781 //              //var showTitles = titles != null;
 782 //              for (var i = 0; i < fns.length; i++) {
 783 //                      content.appendChild(fns[i]);
 784 //              }
 785 //      }));
 786 //
 787 // };