public/assets/plugins/square/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('entry'), dir + '/entry/',
  76                 '_128x128.png', ['start', 'finally', 'end'], [mxResources.get('start'),
  77                         mxResources.get('finally'), mxResources.get('end')
  78                 ]);
  79         this.addImagePalette('call_management', mxResources.get('call_management'),
  80                 dir + '/call_management/', '_128x128.png', ['answer', 'hangup', 'dial',
  81                         'ext_dial', 'queue', 'voicemail'
  82                         // , 'callback'
  83                 ], [mxResources.get('answer'), mxResources.get('hangup'), mxResources.get(
  84                                 'dial'), mxResources.get('ext_dial'), mxResources.get('queue'),
  85                         mxResources.get('voicemail')
  86                         // , mxResources.get('callback')
  87                 ]);
  88         this.addImagePalette('variable', mxResources.get('variable'), dir +
  89                 '/variable/', '_128x128.png', ['set', 'math'], [mxResources.get('set'),
  90                         mxResources.get('math')
  91                 ]);
  92         this.addImagePalette('playback', mxResources.get('playback'), dir +
  93                 '/playback/', '_128x128.png', ['playback', 'menu',
  94                         'saydigits', 'saynumber', 'sayphonetic', 'tts', 'ispeechtts', 'getdigits'
  95                 ], [mxResources.get('playback'), mxResources
  96                         .get('menu'), mxResources.get('saydigits'), mxResources.get('saynumber'),
  97                         mxResources.get('sayphonetic'), mxResources.get('tts'), mxResources.get('ispeechtts'), mxResources.get('getdigits')
  98                 ]);
  99         this.addImagePalette('recording', mxResources.get('recording'), dir +
 100                 '/recording/', '_128x128.png', ['record'], [mxResources.get('record')]);
 101         this.addImagePalette('integrationServer', mxResources.get('integrationServer'),
 102                 dir + '/integration_server/', '_128x128.png', ['database', 'ispeechasr'], [
 103                         mxResources.get('database'), mxResources.get('ispeechasr')
 104                 ]);
 105         this.addImagePalette('callflow', mxResources.get('callflow'), dir +
 106                 '/callflow/', '_128x128.png', ['gotoc', 'gotoif', 'gotoiftime', 'vswitch'], [
 107                         mxResources.get('gotoc'), mxResources.get('gotoif'), mxResources.get(
 108                                 'gotoiftime'), mxResources.get('vswitch')
 109                 ]);
 110         this.addImagePalette('stats', mxResources.get('stats'), dir + '/stats/',
 111                 '_128x128.png', [
 112                         // 'queuelog', 'goal'
 113                 ], [
 114                         // mxResources.get('queuelog'),
 115                         // mxResources.get('goal')
 116                 ]);
 117         this.addImagePalette('general', mxResources.get('general'), dir + '/general/',
 118                 '_128x128.png', ['noop', 'system', 'agi', 'subproject','custom_app'], [mxResources.get(
 119                         'noop'), mxResources.get('system'), mxResources.get('agi'), mxResources.get(
 120                         'subproject'),mxResources.get(
 121                         'custom_app')]);
 122
 123 };
 124
 125 /**
 126  * Specifies if tooltips should be visible. Default is true.
 127  */
 128 Sidebar.prototype.enableTooltips = !mxClient.IS_TOUCH;
 129
 130 /**
 131  * Specifies the delay for the tooltip. Default is 16 px.
 132  */
 133 Sidebar.prototype.tooltipBorder = 16;
 134
 135 /**
 136  * Specifies the delay for the tooltip. Default is 3 px.
 137  */
 138 Sidebar.prototype.thumbBorder = 3;
 139
 140 /**
 141  * Specifies the delay for the tooltip. Default is 300 ms.
 142  */
 143 Sidebar.prototype.tooltipDelay = 300;
 144
 145 /**
 146  * Specifies if edges should be used as templates if clicked. Default is true.
 147  */
 148 Sidebar.prototype.installEdges = true;
 149
 150 /**
 151  * Specifies the URL of the gear image.
 152  */
 153 Sidebar.prototype.gearImage = STENCIL_PATH + '/clipart/Gear_128x128.png';
 154
 155 /**
 156  * Specifies the width of the thumbnails.
 157  */
 158 Sidebar.prototype.thumbWidth = 34;
 159
 160 /**
 161  * Specifies the height of the thumbnails.
 162  */
 163 Sidebar.prototype.thumbHeight = 34;
 164
 165 /**
 166  * Specifies the padding for the thumbnails. Default is 3.
 167  */
 168 Sidebar.prototype.thumbPadding = 2;
 169
 170 /**
 171  * Specifies the size of the sidebar titles.
 172  */
 173 Sidebar.prototype.sidebarTitleSize = 9;
 174
 175 /**
 176  * Specifies if titles in the sidebar should be enabled.
 177  */
 178 Sidebar.prototype.sidebarTitles = false;
 179
 180 /**
 181  * Specifies if titles in the tooltips should be enabled.
 182  */
 183 Sidebar.prototype.tooltipTitles = false;
 184
 185 /**
 186  * Adds all palettes to the sidebar.
 187  */
 188 Sidebar.prototype.showTooltip = function(elt, cells, title, showLabel) {
 189         if (this.enableTooltips && this.showTooltips) {
 190                 if (this.currentElt != elt) {
 191                         if (this.thread != null) {
 192                                 window.clearTimeout(this.thread);
 193                                 this.thread = null;
 194                         }
 195
 196                         var show = mxUtils.bind(this, function() {
 197                                 // Lazy creation of the DOM nodes and graph instance
 198                                 if (this.tooltip == null) {
 199                                         this.tooltip = document.createElement('div');
 200                                         this.tooltip.className = 'geSidebarTooltip';
 201                                         document.body.appendChild(this.tooltip);
 202
 203                                         this.graph2 = new Graph(this.tooltip, null, null, this.editorUi.editor.graph
 204                                                 .getStylesheet());
 205                                         this.graph2.view.setTranslate(this.tooltipBorder, this.tooltipBorder);
 206                                         this.graph2.resetViewOnRootChange = false;
 207                                         this.graph2.foldingEnabled = false;
 208                                         this.graph2.autoScroll = false;
 209                                         this.graph2.setTooltips(false);
 210                                         this.graph2.setConnectable(false);
 211                                         this.graph2.setEnabled(false);
 212
 213                                         if (!mxClient.IS_SVG) {
 214                                                 this.graph2.view.canvas.style.position = 'relative';
 215                                         }
 216
 217                                         this.tooltipImage = mxUtils.createImage(IMAGE_PATH + '/tooltip.png');
 218                                         this.tooltipImage.style.position = 'absolute';
 219                                         this.tooltipImage.style.width = '14px';
 220                                         this.tooltipImage.style.height = '27px';
 221
 222                                         document.body.appendChild(this.tooltipImage);
 223                                 }
 224
 225                                 this.tooltip.style.display = 'block';
 226                                 this.graph2.labelsVisible = (showLabel == null || showLabel);
 227                                 this.graph2.model.clear();
 228                                 this.graph2.addCells(cells);
 229
 230                                 var bounds = this.graph2.getGraphBounds();
 231                                 var width = bounds.width + 2 * this.tooltipBorder;
 232                                 var height = bounds.height + 2 * this.tooltipBorder;
 233
 234                                 if (mxClient.IS_QUIRKS) {
 235                                         width += 4;
 236                                         height += 4;
 237                                         this.tooltip.style.overflow = 'hidden';
 238                                 } else {
 239                                         this.tooltip.style.overflow = 'visible';
 240                                 }
 241
 242                                 this.tooltipImage.style.visibility = 'visible';
 243                                 this.tooltip.style.width = width + 'px';
 244
 245                                 // Adds title for entry
 246                                 if (this.tooltipTitles && title != null && title.length > 0) {
 247                                         if (this.tooltipTitle == null) {
 248                                                 this.tooltipTitle = document.createElement('div');
 249                                                 this.tooltipTitle.style.borderTop = '1px solid gray';
 250                                                 this.tooltipTitle.style.textAlign = 'center';
 251                                                 this.tooltipTitle.style.width = '100%';
 252
 253                                                 // Oversize titles are cut-off currently. Should make tooltip wider later.
 254                                                 this.tooltipTitle.style.overflow = 'hidden';
 255
 256                                                 if (mxClient.IS_SVG) {
 257                                                         this.tooltipTitle.style.paddingTop = '2px';
 258                                                 } else {
 259                                                         this.tooltipTitle.style.position = 'absolute';
 260                                                         this.tooltipTitle.style.paddingTop = '6px';
 261                                                 }
 262
 263                                                 this.tooltip.appendChild(this.tooltipTitle);
 264                                         } else {
 265                                                 this.tooltipTitle.innerHTML = '';
 266                                         }
 267
 268                                         this.tooltipTitle.style.display = '';
 269                                         mxUtils.write(this.tooltipTitle, title);
 270
 271                                         var dy = this.tooltipTitle.offsetHeight + 10;
 272                                         height += dy;
 273
 274                                         if (mxClient.IS_SVG) {
 275                                                 this.tooltipTitle.style.marginTop = (-dy) + 'px';
 276                                         } else {
 277                                                 height -= 6;
 278                                                 this.tooltipTitle.style.top = (height - dy) + 'px';
 279                                         }
 280                                 } else if (this.tooltipTitle != null && this.tooltipTitle.parentNode !=
 281                                         null) {
 282                                         this.tooltipTitle.style.display = 'none';
 283                                 }
 284
 285                                 this.tooltip.style.height = height + 'px';
 286                                 var x0 = -Math.min(0, bounds.x - this.tooltipBorder);
 287                                 var y0 = -Math.min(0, bounds.y - this.tooltipBorder);
 288
 289                                 var left = this.container.clientWidth + this.editorUi.splitSize + 3;
 290                                 var top = Math.max(0, (this.container.offsetTop + elt.offsetTop - this.container
 291                                         .scrollTop - height / 2 + 16));
 292
 293                                 if (mxClient.IS_SVG) {
 294                                         this.graph2.view.canvas.setAttribute('transform', 'translate(' + x0 +
 295                                                 ',' + y0 + ')');
 296                                 } else {
 297                                         this.graph2.view.drawPane.style.left = x0 + 'px';
 298                                         this.graph2.view.drawPane.style.top = y0 + 'px';
 299                                 }
 300
 301                                 // Workaround for ignored position CSS style in IE9
 302                                 // (changes to relative without the following line)
 303                                 // Added width of the page-sidebar
 304                                 left += document.getElementById('page-sidebar').offsetWidth;
 305                                 // Added static height of the page-navbar
 306                                 top += 90;
 307
 308                                 this.tooltip.style.position = 'absolute';
 309                                 this.tooltip.style.left = left + 'px';
 310                                 this.tooltip.style.top = top + 'px';
 311                                 this.tooltipImage.style.left = (left - 13) + 'px';
 312                                 this.tooltipImage.style.top = (top + height / 2 - 13) + 'px';
 313                         });
 314
 315                         if (this.tooltip != null && this.tooltip.style.display != 'none') {
 316                                 show();
 317                         } else {
 318                                 this.thread = window.setTimeout(show, this.tooltipDelay);
 319                         }
 320
 321                         this.currentElt = elt;
 322                 }
 323         }
 324 };
 325
 326 /**
 327  * Hides the current tooltip.
 328  */
 329 Sidebar.prototype.hideTooltip = function() {
 330         if (this.thread != null) {
 331                 window.clearTimeout(this.thread);
 332                 this.thread = null;
 333         }
 334
 335         if (this.tooltip != null) {
 336                 this.tooltip.style.display = 'none';
 337                 this.tooltipImage.style.visibility = 'hidden';
 338                 this.currentElt = null;
 339         }
 340 };
 341
 342 /**
 343  * Creates and returns the given title element.
 344  */
 345 Sidebar.prototype.createTitle = function(label) {
 346         var elt = document.createElement('a');
 347         elt.setAttribute('href', 'javascript:void(0);');
 348         elt.className = 'geTitle';
 349         mxUtils.write(elt, label);
 350
 351         return elt;
 352 };
 353
 354 /**
 355  * Creates a thumbnail for the given cells.
 356  */
 357 Sidebar.prototype.createThumb = function(cells, width, height, parent, title,
 358         showLabel) {
 359         this.graph.labelsVisible = (showLabel == null || showLabel);
 360         this.graph.view.scaleAndTranslate(1, 0, 0);
 361         this.graph.addCells(cells);
 362         var bounds = this.graph.getGraphBounds();
 363         var corr = this.thumbBorder;
 364         var s = Math.min((width - 2) / (bounds.width - bounds.x + corr), (height - 2) /
 365                 (bounds.height - bounds.y + corr));
 366         var x0 = -Math.min(bounds.x, 0);
 367         var y0 = -Math.min(bounds.y, 0);
 368         this.graph.view.scaleAndTranslate(s, x0, y0);
 369
 370         bounds = this.graph.getGraphBounds();
 371         var dx = Math.max(0, Math.floor((width - bounds.width - bounds.x) / 2));
 372         var dy = Math.max(0, Math.floor((height - bounds.height - bounds.y) / 2));
 373
 374         var node = null;
 375
 376         // For supporting HTML labels in IE9 standards mode the container is cloned instead
 377         if (this.graph.dialect == mxConstants.DIALECT_SVG && !mxClient.NO_FO) {
 378                 node = this.graph.view.getCanvas().ownerSVGElement.cloneNode(true);
 379         }
 380         // LATER: Check if deep clone can be used for quirks if container in DOM
 381         else {
 382                 node = this.graph.container.cloneNode(false);
 383                 node.innerHTML = this.graph.container.innerHTML;
 384         }
 385
 386         this.graph.getModel().clear();
 387
 388         // Catch-all event handling
 389         if (mxClient.IS_IE6) {
 390                 parent.style.backgroundImage = 'url(' + this.editorUi.editor.transparentImage +
 391                         ')';
 392         }
 393
 394         var dd = 3;
 395         node.style.position = 'relative';
 396         node.style.overflow = 'hidden';
 397         node.style.cursor = 'pointer';
 398         node.style.left = (dx + dd) + 'px';
 399         node.style.top = (dy + dd) + 'px';
 400         node.style.width = width + 'px';
 401         node.style.height = height + 'px';
 402         node.style.visibility = '';
 403         node.style.minWidth = '';
 404         node.style.minHeight = '';
 405
 406         parent.appendChild(node);
 407
 408         // Adds title for sidebar entries
 409         if (this.sidebarTitles && title != null) {
 410                 var border = (mxClient.IS_QUIRKS) ? 2 * this.thumbPadding + 2 : 0;
 411                 parent.style.height = (this.thumbHeight + border + this.sidebarTitleSize + 8) +
 412                         'px';
 413
 414                 var div = document.createElement('div');
 415                 div.style.fontSize = this.sidebarTitleSize + 'px';
 416                 div.style.textAlign = 'center';
 417                 div.style.whiteSpace = 'nowrap';
 418
 419                 if (mxClient.IS_IE) {
 420                         div.style.height = (this.sidebarTitleSize + 12) + 'px';
 421                 }
 422
 423                 div.style.paddingTop = '4px';
 424                 mxUtils.write(div, title);
 425                 parent.appendChild(div);
 426         }
 427 };
 428
 429 /**
 430  * Creates and returns a new palette item for the given image.
 431  */
 432 Sidebar.prototype.createItem = function(cells, title, showLabel) {
 433         var elt = document.createElement('a');
 434         elt.setAttribute('href', 'javascript:void(0);');
 435         elt.className = 'geItem';
 436         elt.style.overflow = 'hidden';
 437         var border = (mxClient.IS_QUIRKS) ? 8 + 2 * this.thumbPadding : 6;
 438         elt.style.width = (this.thumbWidth + border) + 'px';
 439         elt.style.height = (this.thumbHeight + border) + 'px';
 440         elt.style.padding = this.thumbPadding + 'px';
 441
 442         // Blocks default click action
 443         mxEvent.addListener(elt, 'click', function(evt) {
 444                 mxEvent.consume(evt);
 445         });
 446
 447         this.createThumb(cells, this.thumbWidth, this.thumbHeight, elt, title,
 448                 showLabel);
 449
 450         return elt;
 451 };
 452
 453 /**
 454  * Creates a drop handler for inserting the given cells.
 455  */
 456 Sidebar.prototype.createDropHandler = function(cells, allowSplit) {
 457         return function(graph, evt, target, x, y) {
 458                 if (graph.isEnabled()) {
 459                         cells = graph.getImportableCells(cells);
 460
 461                         if (cells.length > 0) {
 462                                 var validDropTarget = (target != null) ?
 463                                         graph.isValidDropTarget(target, cells, evt) : false;
 464                                 var select = null;
 465
 466                                 if (target != null && !validDropTarget) {
 467                                         target = null;
 468                                 }
 469
 470                                 // Splits the target edge or inserts into target group
 471                                 if (allowSplit && graph.isSplitEnabled() && graph.isSplitTarget(target,
 472                                                 cells, evt)) {
 473                                         graph.splitEdge(target, cells, null, x, y);
 474                                         select = cells;
 475                                 } else if (cells.length > 0) {
 476                                         select = graph.importCells(cells, x, y, target);
 477                                 }
 478
 479                                 if (select != null && select.length > 0) {
 480                                         graph.scrollCellToVisible(select[0]);
 481                                         graph.setSelectionCells(select);
 482                                 }
 483                         }
 484                 }
 485         };
 486 };
 487
 488 /**
 489  * Creates and returns a preview element for the given width and height.
 490  */
 491 Sidebar.prototype.createDragPreview = function(width, height) {
 492         var elt = document.createElement('div');
 493         elt.style.border = '1px dashed black';
 494         elt.style.width = width + 'px';
 495         elt.style.height = height + 'px';
 496
 497         return elt;
 498 };
 499
 500 /**
 501  * Creates a drag source for the given element.
 502  */
 503 Sidebar.prototype.createDragSource = function(elt, dropHandler, preview) {
 504         var dragSource = mxUtils.makeDraggable(elt, this.editorUi.editor.graph,
 505                 dropHandler,
 506                 preview, 0, 0, this.editorUi.editor.graph.autoscroll, true, true);
 507
 508         // Allows drop into cell only if target is a valid root
 509         dragSource.getDropTarget = function(graph, x, y) {
 510                 var target = mxDragSource.prototype.getDropTarget.apply(this, arguments);
 511
 512                 if (!graph.isValidRoot(target)) {
 513                         target = null;
 514                 }
 515
 516                 return target;
 517         };
 518
 519         return dragSource;
 520 };
 521
 522 /**
 523  * Adds a handler for inserting the cell with a single click.
 524  */
 525 Sidebar.prototype.addClickHandler = function(elt, ds) {
 526         var graph = this.editorUi.editor.graph;
 527         var first = null;
 528
 529         mxEvent.addGestureListeners(elt, function(evt) {
 530                 first = new mxPoint(mxEvent.getClientX(evt), mxEvent.getClientY(evt));
 531         });
 532
 533         var oldMouseUp = ds.mouseUp;
 534         ds.mouseUp = function(evt) {
 535                 if (!mxEvent.isPopupTrigger(evt) && this.currentGraph == null && first !=
 536                         null) {
 537                         var tol = graph.tolerance;
 538
 539                         if (Math.abs(first.x - mxEvent.getClientX(evt)) <= tol &&
 540                                 Math.abs(first.y - mxEvent.getClientY(evt)) <= tol) {
 541                                 var gs = graph.getGridSize();
 542                                 ds.drop(graph, evt, null, gs, gs);
 543                         }
 544                 }
 545
 546                 oldMouseUp.apply(this, arguments);
 547                 first = null;
 548         };
 549 };
 550
 551 /**
 552  * Giuseppe Careri
 553  * Create xml document vertex
 554  */
 555 Sidebar.prototype.createXmlDocument = function(element, label, variables,
 556         values) {
 557         var doc = mxUtils.createXmlDocument();
 558         var node = doc.createElement(element)
 559         node.setAttribute('label', label);
 560
 561         variables.forEach(function(variable, index) {
 562                 node.setAttribute(variable, values[index] ? values[index] : '');
 563         });
 564
 565         return node;
 566 }
 567
 568 /**
 569  * Giuseppe Careri
 570  * Creates a drop handler for inserting the given cells.
 571  */
 572 Sidebar.prototype.createVertexTemplate = function(style, width, height, value,
 573         title, showLabel) {
 574         var variables = [];
 575         var values = [];
 576
 577         switch (value) {
 578                 case 'answer':
 579                         break;
 580                 case 'ispeechasr':
 581                         variables = ['key', 'model', 'ispeech_asr_language'];
 582                         values = ['', 0, 'it-IT'];
 583                         break;
 584                 case 'playback':
 585                         variables = ['file_id', 'opts'];
 586                         values = ['0'];
 587                         break;
 588                 case 'background':
 589                         variables = ['file_id', 'response', 'digit'];
 590                         values = ['0', '5', '1'];
 591                         break;
 592                 case 'menu':
 593                         variables = ['file_id', 'response', 'digit', 'retry', 'variable_id'];
 594                         values = ['0', '5', '1', '1', '0'];
 595                         break;
 596                 case 'getdigits':
 597                         variables = ['file_id', 'response', 'mindigit', 'maxdigit', 'retry', 'variable_id'];
 598                         values = ['0', '5', '1', '10', '1', '0'];
 599                         break;
 600                 case 'custom_app':
 601                         variables = ['application', 'options'];
 602                         values = ['',''];
 603                         break;
 604                 case 'set':
 605                         variables = ['variable_id', 'variable_value'];
 606                         values = ['0', ''];
 607                         break;
 608                 case 'database':
 609                         variables = ['odbc_id', 'query', 'variable_id'];
 610                         values = ['0', '', '0'];
 611                         break;
 612                 case 'noop':
 613                         variables = ['output'];
 614                         values = [];
 615                         break;
 616                 case 'gotoc':
 617                         variables = ['context', 'extension'];
 618                         values = [];
 619                         break;
 620                 case 'system':
 621                         variables = ['variable_id', 'command'];
 622                         values = [];
 623                         break;
 624                 case 'agi':
 625                         variables = ['args', 'command'];
 626                         values = [];
 627                         break;
 628                 case 'gotoif':
 629                         variables = ['condition'];
 630                         values = [];
 631                         break;
 632                 case 'gotoiftime':
 633                         variables = ['interval_id'];
 634                         values = ['0'];
 635                         break;
 636                 case 'gotoifmultitime':
 637                         variables = ['interval_id'];
 638                         values = ['0'];
 639                         break;
 640                 case 'vswitch':
 641                         variables = ['variable_id'];
 642                         values = ['0'];
 643                         break;
 644                 case 'saydigits':
 645                         variables = ['digits', 'escape_digits'];
 646                         values = ['', '#'];
 647                         break;
 648                 case 'saynumber':
 649                         variables = ['number', 'escape_digits'];
 650                         values = ['', '#'];
 651                         break;
 652                 case 'sayphonetic':
 653                         variables = ['text', 'escape_digits'];
 654                         values = ['', '#'];
 655                         break;
 656                 case 'record':
 657                         variables = ['file', 'timeout', 'escape_digits'];
 658                         values = ['', '-1', '#'];
 659                         break;
 660                 case 'dial':
 661                         variables = ['sip_id', 'timeout', 'custom_app', 'url'];
 662                         values = ['0', '60'];
 663                         break;
 664                 case 'ext_dial':
 665                         variables = ['phone', 'trunk_id', 'timeout', 'opts', 'url'];
 666                         values = ['', '0', '60'];
 667                         break;
 668                 case 'tts':
 669                         variables = ['text', 'google_tts_language'];
 670                         values = ['', 'it'];
 671                         break;
 672                 case 'ispeechtts':
 673                         variables = ['text', 'key', 'ispeech_tts_language'];
 674                         values = ['', '', 'euritalianfemale'];
 675                         break;
 676                 case 'queue':
 677                         variables = ['queue_id', 'opts', 'url', 'file_id', 'timeout', 'agi',
 678                                 'macro', 'gosub', 'position'
 679                         ];
 680                         values = ['0', '', '', '0', '300'];
 681                         break;
 682                 case 'voicemail':
 683                         variables = ['boxnumber', 'context', 'opts'];
 684                         values = ['', 'from-voicemail'];
 685                         break;
 686                 case 'subproject':
 687                         variables = ['project_id'];
 688                         values = ['0'];
 689                         break;
 690                 case 'math':
 691                         variables = ['operation', 'variable_id'];
 692                         values = ['', '0'];
 693                         break;
 694                 case 'queuelog':
 695                         variables = ['queuename', 'agent', 'queue_event', 'data1', 'data2', 'data3',
 696                                 'data4', 'data5'
 697                         ];
 698                         values = [];
 699                         break;
 700                 case 'goal':
 701                         variables = ['goalname'];
 702                         values = [];
 703                         break;
 704                 case 'callback':
 705                         variables = ['list_id'];
 706                         values = ['0', '{CALLERID(num)}'];
 707                         break;
 708                 default:
 709                         variables = [];
 710                         values = [];
 711                         break;
 712         }
 713
 714         var node = this.createXmlDocument(value, title, variables, values);
 715
 716         //var cells = [new mxCell((value != null) ? value : '', new mxGeometry(0, 0, width, height), style)];
 717         var cells = [new mxCell(node, new mxGeometry(0, 0, width, height), style)];
 718         cells[0].vertex = true;
 719
 720         return this.createVertexTemplateFromCells(cells, width, height, title,
 721                 showLabel);
 722 };
 723
 724 /**
 725  * Creates a drop handler for inserting the given cells.
 726  */
 727 Sidebar.prototype.createVertexTemplateFromCells = function(cells, width, height,
 728         title, showLabel) {
 729         var elt = this.createItem(cells, title, showLabel);
 730         var ds = this.createDragSource(elt, this.createDropHandler(cells, true), this
 731                 .createDragPreview(width, height));
 732         this.addClickHandler(elt, ds);
 733
 734         // Uses guides for vertices only if enabled in graph
 735         ds.isGuidesEnabled = mxUtils.bind(this, function() {
 736                 return this.editorUi.editor.graph.graphHandler.guidesEnabled;
 737         });
 738
 739         // Shows a tooltip with the rendered cell
 740         if (!touchStyle) {
 741                 mxEvent.addListener(elt, 'mousemove', mxUtils.bind(this, function(evt) {
 742                         this.showTooltip(elt, cells, title, showLabel);
 743                 }));
 744         }
 745
 746         return elt;
 747 };
 748
 749 /**
 750  * Creates a drop handler for inserting the given cells.
 751  */
 752 Sidebar.prototype.createEdgeTemplate = function(style, width, height, value,
 753         title, showLabel) {
 754         var cells = [new mxCell((value != null) ? value : '', new mxGeometry(0, 0,
 755                 width, height), style)];
 756         cells[0].geometry.setTerminalPoint(new mxPoint(0, height), true);
 757         cells[0].geometry.setTerminalPoint(new mxPoint(width, 0), false);
 758         cells[0].geometry.relative = true;
 759         cells[0].edge = true;
 760
 761         return this.createEdgeTemplateFromCells(cells, width, height, title,
 762                 showLabel);
 763 };
 764
 765 /**
 766  * Creates a drop handler for inserting the given cells.
 767  */
 768 Sidebar.prototype.createEdgeTemplateFromCells = function(cells, width, height,
 769         title, showLabel) {
 770         var elt = this.createItem(cells, title, showLabel);
 771         this.createDragSource(elt, this.createDropHandler(cells, false), this.createDragPreview(
 772                 width, height));
 773
 774         // Installs the default edge
 775         var graph = this.editorUi.editor.graph;
 776         mxEvent.addListener(elt, 'click', mxUtils.bind(this, function(evt) {
 777                 if (this.installEdges) {
 778                         graph.setDefaultEdge(cells[0]);
 779                 }
 780
 781                 // Highlights the entry for 200ms
 782                 elt.style.backgroundColor = '#ffffff';
 783
 784                 window.setTimeout(function() {
 785                         elt.style.backgroundColor = '';
 786                 }, 300);
 787
 788                 mxEvent.consume(evt);
 789         }));
 790
 791         // Shows a tooltip with the rendered cell
 792         if (!touchStyle) {
 793                 mxEvent.addListener(elt, 'mousemove', mxUtils.bind(this, function(evt) {
 794                         this.showTooltip(elt, cells, title, showLabel);
 795                 }));
 796         }
 797
 798         return elt;
 799 };
 800
 801 /**
 802  * Adds the given palette.
 803  */
 804 Sidebar.prototype.addPalette = function(id, title, expanded, onInit) {
 805         var elt = this.createTitle(title);
 806         this.container.appendChild(elt);
 807
 808         var div = document.createElement('div');
 809         div.className = 'geSidebar';
 810
 811         if (expanded) {
 812                 onInit(div);
 813                 onInit = null;
 814         } else {
 815                 div.style.display = 'none';
 816         }
 817
 818         this.addFoldingHandler(elt, div, onInit);
 819
 820         var outer = document.createElement('div');
 821         outer.appendChild(div);
 822         this.container.appendChild(outer);
 823
 824         // Keeps references to the DOM nodes
 825         if (id != null) {
 826                 this.palettes[id] = [elt, outer];
 827         }
 828 };
 829
 830 /**
 831  * Create the given title element.
 832  */
 833 Sidebar.prototype.addFoldingHandler = function(title, content, funct) {
 834         var initialized = false;
 835
 836         title.style.backgroundImage = (content.style.display == 'none') ?
 837                 'url(' + IMAGE_PATH + '/collapsed.gif)' : 'url(' + IMAGE_PATH +
 838                 '/expanded.gif)';
 839         title.style.backgroundRepeat = 'no-repeat';
 840         title.style.backgroundPosition = '100% 50%';
 841
 842         mxEvent.addListener(title, 'click', function(evt) {
 843                 if (content.style.display == 'none') {
 844                         if (!initialized) {
 845                                 initialized = true;
 846
 847                                 if (funct != null) {
 848                                         title.style.cursor = 'wait';
 849                                         window.setTimeout(function() {
 850                                                 funct(content);
 851                                                 title.style.cursor = '';
 852                                         }, 0);
 853                                 }
 854                         }
 855
 856                         title.style.backgroundImage = 'url(' + IMAGE_PATH + '/expanded.gif)';
 857                         content.style.display = 'block';
 858                 } else {
 859                         title.style.backgroundImage = 'url(' + IMAGE_PATH + '/collapsed.gif)';
 860                         content.style.display = 'none';
 861                 }
 862
 863                 mxEvent.consume(evt);
 864         });
 865 };
 866
 867 /**
 868  * Removes the palette for the given ID.
 869  */
 870 Sidebar.prototype.removePalette = function(id) {
 871         var elts = this.palettes[id];
 872
 873         if (elts != null) {
 874                 this.palettes[id] = null;
 875
 876                 for (var i = 0; i < elts.length; i++) {
 877                         this.container.removeChild(elts[i]);
 878                 }
 879
 880                 return true;
 881         }
 882
 883         return false;
 884 };
 885
 886 /**
 887  * Adds the given image palette.
 888  */
 889 Sidebar.prototype.addImagePalette = function(id, title, prefix, postfix, items,
 890         titles) {
 891         // Giuseppe Careri
 892         // Expanded Sidebar only entry
 893         this.addPalette(id, title, (id === 'entry'), mxUtils.bind(this, function(
 894                 content) {
 895                 var showTitles = titles != null;
 896
 897                 for (var i = 0; i < items.length; i++) {
 898                         var icon = prefix + items[i] + postfix;
 899                         content.appendChild(this.createVertexTemplate('image;image=' + icon, 80,
 900                                 80, items[i], (showTitles) ? titles[i] : null, showTitles));
 901                 }
 902         }));
 903 };