git.sur5r.net Git - bacula/bacula/blob - gui/baculum/debian/missing-sources/framework/Web/Javascripts/source/tinymce-405/classes/ui/FormatControls.js

   1 /**
   2  * FormatControls.js
   3  *
   4  * Copyright, Moxiecode Systems AB
   5  * Released under LGPL License.
   6  *
   7  * License: http://www.tinymce.com/license
   8  * Contributing: http://www.tinymce.com/contributing
   9  */
  10
  11 /**
  12  * Internal class containing all TinyMCE specific control types such as
  13  * format listboxes, fontlist boxes, toolbar buttons etc.
  14  *
  15  * @class tinymce.ui.FormatControls
  16  */
  17 define("tinymce/ui/FormatControls", [
  18         "tinymce/ui/Control",
  19         "tinymce/ui/Widget",
  20         "tinymce/ui/FloatPanel",
  21         "tinymce/util/Tools",
  22         "tinymce/EditorManager",
  23         "tinymce/Env"
  24 ], function(Control, Widget, FloatPanel, Tools, EditorManager, Env) {
  25         var each = Tools.each;
  26
  27         EditorManager.on('AddEditor', function(e) {
  28                 registerControls(e.editor);
  29         });
  30
  31         Control.translate = function(text) {
  32                 return EditorManager.translate(text);
  33         };
  34
  35         Widget.tooltips = !Env.iOS;
  36
  37         function registerControls(editor) {
  38                 var formatMenu;
  39
  40                 // Generates a preview for a format
  41                 function getPreviewCss(format) {
  42                         var name, previewElm, dom = editor.dom;
  43                         var previewCss = '', parentFontSize, previewStyles;
  44
  45                         previewStyles = editor.settings.preview_styles;
  46
  47                         // No preview forced
  48                         if (previewStyles === false) {
  49                                 return '';
  50                         }
  51
  52                         // Default preview
  53                         if (!previewStyles) {
  54                                 previewStyles = 'font-family font-size font-weight text-decoration ' +
  55                                         'text-transform color background-color border border-radius';
  56                         }
  57
  58                         // Removes any variables since these can't be previewed
  59                         function removeVars(val) {
  60                                 return val.replace(/%(\w+)/g, '');
  61                         }
  62
  63                         // Create block/inline element to use for preview
  64                         format = editor.formatter.get(format);
  65                         if (!format) {
  66                                 return;
  67                         }
  68
  69                         format = format[0];
  70                         name = format.block || format.inline || 'span';
  71                         previewElm = dom.create(name);
  72
  73                         // Add format styles to preview element
  74                         each(format.styles, function(value, name) {
  75                                 value = removeVars(value);
  76
  77                                 if (value) {
  78                                         dom.setStyle(previewElm, name, value);
  79                                 }
  80                         });
  81
  82                         // Add attributes to preview element
  83                         each(format.attributes, function(value, name) {
  84                                 value = removeVars(value);
  85
  86                                 if (value) {
  87                                         dom.setAttrib(previewElm, name, value);
  88                                 }
  89                         });
  90
  91                         // Add classes to preview element
  92                         each(format.classes, function(value) {
  93                                 value = removeVars(value);
  94
  95                                 if (!dom.hasClass(previewElm, value)) {
  96                                         dom.addClass(previewElm, value);
  97                                 }
  98                         });
  99
 100                         editor.fire('PreviewFormats');
 101
 102                         // Add the previewElm outside the visual area
 103                         dom.setStyles(previewElm, {position: 'absolute', left: -0xFFFF});
 104                         editor.getBody().appendChild(previewElm);
 105
 106                         // Get parent container font size so we can compute px values out of em/% for older IE:s
 107                         parentFontSize = dom.getStyle(editor.getBody(), 'fontSize', true);
 108                         parentFontSize = /px$/.test(parentFontSize) ? parseInt(parentFontSize, 10) : 0;
 109
 110                         each(previewStyles.split(' '), function(name) {
 111                                 var value = dom.getStyle(previewElm, name, true);
 112
 113                                 // If background is transparent then check if the body has a background color we can use
 114                                 if (name == 'background-color' && /transparent|rgba\s*\([^)]+,\s*0\)/.test(value)) {
 115                                         value = dom.getStyle(editor.getBody(), name, true);
 116
 117                                         // Ignore white since it's the default color, not the nicest fix
 118                                         // TODO: Fix this by detecting runtime style
 119                                         if (dom.toHex(value).toLowerCase() == '#ffffff') {
 120                                                 return;
 121                                         }
 122                                 }
 123
 124                                 if (name == 'color') {
 125                                         // Ignore black since it's the default color, not the nicest fix
 126                                         // TODO: Fix this by detecting runtime style
 127                                         if (dom.toHex(value).toLowerCase() == '#000000') {
 128                                                 return;
 129                                         }
 130                                 }
 131
 132                                 // Old IE won't calculate the font size so we need to do that manually
 133                                 if (name == 'font-size') {
 134                                         if (/em|%$/.test(value)) {
 135                                                 if (parentFontSize === 0) {
 136                                                         return;
 137                                                 }
 138
 139                                                 // Convert font size from em/% to px
 140                                                 value = parseFloat(value, 10) / (/%$/.test(value) ? 100 : 1);
 141                                                 value = (value * parentFontSize) + 'px';
 142                                         }
 143                                 }
 144
 145                                 if (name == "border" && value) {
 146                                         previewCss += 'padding:0 2px;';
 147                                 }
 148
 149                                 previewCss += name + ':' + value + ';';
 150                         });
 151
 152                         editor.fire('AfterPreviewFormats');
 153
 154                         //previewCss += 'line-height:normal';
 155
 156                         dom.remove(previewElm);
 157
 158                         return previewCss;
 159                 }
 160
 161                 function createListBoxChangeHandler(items, formatName) {
 162                         return function() {
 163                                 var self = this;
 164
 165                                 editor.on('nodeChange', function(e) {
 166                                         var formatter = editor.formatter;
 167                                         var value = null;
 168
 169                                         each(e.parents, function(node) {
 170                                                 each(items, function(item) {
 171                                                         if (formatName) {
 172                                                                 if (formatter.matchNode(node, formatName, {value: item.value})) {
 173                                                                         value = item.value;
 174                                                                 }
 175                                                         } else {
 176                                                                 if (formatter.matchNode(node, item.value)) {
 177                                                                         value = item.value;
 178                                                                 }
 179                                                         }
 180
 181                                                         if (value) {
 182                                                                 return false;
 183                                                         }
 184                                                 });
 185
 186                                                 if (value) {
 187                                                         return false;
 188                                                 }
 189                                         });
 190
 191                                         self.value(value);
 192                                 });
 193                         };
 194                 }
 195
 196                 function createFormats(formats) {
 197                         formats = formats.split(';');
 198
 199                         var i = formats.length;
 200                         while (i--) {
 201                                 formats[i] = formats[i].split('=');
 202                         }
 203
 204                         return formats;
 205                 }
 206
 207                 function createFormatMenu() {
 208                         var count = 0, newFormats = [];
 209
 210                         var defaultStyleFormats = [
 211                                 {title: 'Headers', items: [
 212                                         {title: 'Header 1', format: 'h1'},
 213                                         {title: 'Header 2', format: 'h2'},
 214                                         {title: 'Header 3', format: 'h3'},
 215                                         {title: 'Header 4', format: 'h4'},
 216                                         {title: 'Header 5', format: 'h5'},
 217                                         {title: 'Header 6', format: 'h6'}
 218                                 ]},
 219
 220                                 {title: 'Inline', items: [
 221                                         {title: 'Bold', icon: 'bold', format: 'bold'},
 222                                         {title: 'Italic', icon: 'italic', format: 'italic'},
 223                                         {title: 'Underline', icon: 'underline', format: 'underline'},
 224                                         {title: 'Strikethrough', icon: 'strikethrough', format: 'strikethrough'},
 225                                         {title: 'Superscript', icon: 'superscript', format: 'superscript'},
 226                                         {title: 'Subscript', icon: 'subscript', format: 'subscript'},
 227                                         {title: 'Code', icon: 'code', format: 'code'}
 228                                 ]},
 229
 230                                 {title: 'Blocks', items: [
 231                                         {title: 'Paragraph', format: 'p'},
 232                                         {title: 'Blockquote', format: 'blockquote'},
 233                                         {title: 'Div', format: 'div'},
 234                                         {title: 'Pre', format: 'pre'}
 235                                 ]},
 236
 237                                 {title: 'Alignment', items: [
 238                                         {title: 'Left', icon: 'alignleft', format: 'alignleft'},
 239                                         {title: 'Center', icon: 'aligncenter', format: 'aligncenter'},
 240                                         {title: 'Right', icon: 'alignright', format: 'alignright'},
 241                                         {title: 'Justify', icon: 'alignjustify', format: 'alignjustify'}
 242                                 ]}
 243                         ];
 244
 245                         function createMenu(formats) {
 246                                 var menu = [];
 247
 248                                 if (!formats) {
 249                                         return;
 250                                 }
 251
 252                                 each(formats, function(format) {
 253                                         var menuItem = {
 254                                                 text: format.title,
 255                                                 icon: format.icon
 256                                         };
 257
 258                                         if (format.items) {
 259                                                 menuItem.menu = createMenu(format.items);
 260                                         } else {
 261                                                 var formatName = format.format || "custom" + count++;
 262
 263                                                 if (!format.format) {
 264                                                         format.name = formatName;
 265                                                         newFormats.push(format);
 266                                                 }
 267
 268                                                 menuItem.format = formatName;
 269                                         }
 270
 271                                         menu.push(menuItem);
 272                                 });
 273
 274                                 return menu;
 275                         }
 276
 277                         editor.on('init', function() {
 278                                 each(newFormats, function(format) {
 279                                         editor.formatter.register(format.name, format);
 280                                 });
 281                         });
 282
 283                         var menu = createMenu(editor.settings.style_formats || defaultStyleFormats);
 284
 285                         menu = {
 286                                 type: 'menu',
 287                                 items: menu,
 288                                 onPostRender: function(e) {
 289                                         editor.fire('renderFormatsMenu', {control: e.control});
 290                                 },
 291                                 itemDefaults: {
 292                                         preview: true,
 293
 294                                         textStyle: function() {
 295                                                 if (this.settings.format) {
 296                                                         return getPreviewCss(this.settings.format);
 297                                                 }
 298                                         },
 299
 300                                         onPostRender: function() {
 301                                                 var self = this, formatName = this.settings.format;
 302
 303                                                 if (formatName) {
 304                                                         self.parent().on('show', function() {
 305                                                                 self.disabled(!editor.formatter.canApply(formatName));
 306                                                                 self.active(editor.formatter.match(formatName));
 307                                                         });
 308                                                 }
 309                                         },
 310
 311                                         onclick: function() {
 312                                                 if (this.settings.format) {
 313                                                         toggleFormat(this.settings.format);
 314                                                 }
 315                                         }
 316                                 }
 317                         };
 318
 319                         return menu;
 320                 }
 321
 322                 formatMenu = createFormatMenu();
 323
 324                 // Simple format controls <control/format>:<UI text>
 325                 each({
 326                         bold: 'Bold',
 327                         italic: 'Italic',
 328                         underline: 'Underline',
 329                         strikethrough: 'Strikethrough',
 330                         subscript: 'Subscript',
 331                         superscript: 'Superscript'
 332                 }, function(text, name) {
 333                         editor.addButton(name, {
 334                                 tooltip: text,
 335                                 onPostRender: function() {
 336                                         var self = this;
 337
 338                                         // TODO: Fix this
 339                                         if (editor.formatter) {
 340                                                 editor.formatter.formatChanged(name, function(state) {
 341                                                         self.active(state);
 342                                                 });
 343                                         } else {
 344                                                 editor.on('init', function() {
 345                                                         editor.formatter.formatChanged(name, function(state) {
 346                                                                 self.active(state);
 347                                                         });
 348                                                 });
 349                                         }
 350                                 },
 351                                 onclick: function() {
 352                                         toggleFormat(name);
 353                                 }
 354                         });
 355                 });
 356
 357                 // Simple command controls <control>:[<UI text>,<Command>]
 358                 each({
 359                         outdent: ['Decrease indent', 'Outdent'],
 360                         indent: ['Increase indent', 'Indent'],
 361                         cut: ['Cut', 'Cut'],
 362                         copy: ['Copy', 'Copy'],
 363                         paste: ['Paste', 'Paste'],
 364                         help: ['Help', 'mceHelp'],
 365                         selectall: ['Select all', 'SelectAll'],
 366                         hr: ['Insert horizontal rule', 'InsertHorizontalRule'],
 367                         removeformat: ['Clear formatting', 'RemoveFormat'],
 368                         visualaid: ['Visual aids', 'mceToggleVisualAid'],
 369                         newdocument: ['New document', 'mceNewDocument']
 370                 }, function(item, name) {
 371                         editor.addButton(name, {
 372                                 tooltip: item[0],
 373                                 cmd: item[1]
 374                         });
 375                 });
 376
 377                 // Simple command controls with format state
 378                 each({
 379                         blockquote: ['Toggle blockquote', 'mceBlockQuote'],
 380                         numlist: ['Numbered list', 'InsertOrderedList'],
 381                         bullist: ['Bullet list', 'InsertUnorderedList'],
 382                         subscript: ['Subscript', 'Subscript'],
 383                         superscript: ['Superscript', 'Superscript'],
 384                         alignleft: ['Align left', 'JustifyLeft'],
 385                         aligncenter: ['Align center', 'JustifyCenter'],
 386                         alignright: ['Align right', 'JustifyRight'],
 387                         alignjustify: ['Justify', 'JustifyFull']
 388                 }, function(item, name) {
 389                         editor.addButton(name, {
 390                                 tooltip: item[0],
 391                                 cmd: item[1],
 392                                 onPostRender: function() {
 393                                         var self = this;
 394
 395                                         // TODO: Fix this
 396                                         if (editor.formatter) {
 397                                                 editor.formatter.formatChanged(name, function(state) {
 398                                                         self.active(state);
 399                                                 });
 400                                         } else {
 401                                                 editor.on('init', function() {
 402                                                         editor.formatter.formatChanged(name, function(state) {
 403                                                                 self.active(state);
 404                                                         });
 405                                                 });
 406                                         }
 407                                 }
 408                         });
 409                 });
 410
 411                 function hasUndo() {
 412                         return editor.undoManager ? editor.undoManager.hasUndo() : false;
 413                 }
 414
 415                 function hasRedo() {
 416                         return editor.undoManager ? editor.undoManager.hasRedo() : false;
 417                 }
 418
 419                 function toggleUndoState() {
 420                         var self = this;
 421
 422                         self.disabled(!hasUndo());
 423                         editor.on('Undo Redo AddUndo TypingUndo', function() {
 424                                 self.disabled(!hasUndo());
 425                         });
 426                 }
 427
 428                 function toggleRedoState() {
 429                         var self = this;
 430
 431                         self.disabled(!hasRedo());
 432                         editor.on('Undo Redo AddUndo TypingUndo', function() {
 433                                 self.disabled(!hasRedo());
 434                         });
 435                 }
 436
 437                 function toggleVisualAidState() {
 438                         var self = this;
 439
 440                         editor.on('VisualAid', function(e) {
 441                                 self.active(e.hasVisual);
 442                         });
 443
 444                         self.active(editor.hasVisual);
 445                 }
 446
 447                 editor.addButton('undo', {
 448                         tooltip: 'Undo',
 449                         onPostRender: toggleUndoState,
 450                         cmd: 'undo'
 451                 });
 452
 453                 editor.addButton('redo', {
 454                         tooltip: 'Redo',
 455                         onPostRender: toggleRedoState,
 456                         cmd: 'redo'
 457                 });
 458
 459                 editor.addMenuItem('newdocument', {
 460                         text: 'New document',
 461                         shortcut: 'Ctrl+N',
 462                         icon: 'newdocument',
 463                         cmd: 'mceNewDocument'
 464                 });
 465
 466                 editor.addMenuItem('undo', {
 467                         text: 'Undo',
 468                         icon: 'undo',
 469                         shortcut: 'Ctrl+Z',
 470                         onPostRender: toggleUndoState,
 471                         cmd: 'undo'
 472                 });
 473
 474                 editor.addMenuItem('redo', {
 475                         text: 'Redo',
 476                         icon: 'redo',
 477                         shortcut: 'Ctrl+Y',
 478                         onPostRender: toggleRedoState,
 479                         cmd: 'redo'
 480                 });
 481
 482                 editor.addMenuItem('visualaid', {
 483                         text: 'Visual aids',
 484                         selectable: true,
 485                         onPostRender: toggleVisualAidState,
 486                         cmd: 'mceToggleVisualAid'
 487                 });
 488
 489                 each({
 490                         cut: ['Cut', 'Cut', 'Ctrl+X'],
 491                         copy: ['Copy', 'Copy', 'Ctrl+C'],
 492                         paste: ['Paste', 'Paste', 'Ctrl+V'],
 493                         selectall: ['Select all', 'SelectAll', 'Ctrl+A'],
 494                         bold: ['Bold', 'Bold', 'Ctrl+B'],
 495                         italic: ['Italic', 'Italic', 'Ctrl+I'],
 496                         underline: ['Underline', 'Underline'],
 497                         strikethrough: ['Strikethrough', 'Strikethrough'],
 498                         subscript: ['Subscript', 'Subscript'],
 499                         superscript: ['Superscript', 'Superscript'],
 500                         removeformat: ['Clear formatting', 'RemoveFormat']
 501                 }, function(item, name) {
 502                         editor.addMenuItem(name, {
 503                                 text: item[0],
 504                                 icon: name,
 505                                 shortcut: item[2],
 506                                 cmd: item[1]
 507                         });
 508                 });
 509
 510                 editor.on('mousedown', function() {
 511                         FloatPanel.hideAll();
 512                 });
 513
 514                 function toggleFormat(fmt) {
 515                         if (fmt.control) {
 516                                 fmt = fmt.control.value();
 517                         }
 518
 519                         if (fmt) {
 520                                 editor.execCommand('mceToggleFormat', false, fmt);
 521                         }
 522                 }
 523
 524                 editor.addButton('styleselect', {
 525                         type: 'menubutton',
 526                         text: 'Formats',
 527                         menu: formatMenu
 528                 });
 529
 530                 editor.addButton('formatselect', function() {
 531                         var items = [], blocks = createFormats(editor.settings.block_formats ||
 532                                 'Paragraph=p;' +
 533                                 'Address=address;' +
 534                                 'Pre=pre;' +
 535                                 'Header 1=h1;' +
 536                                 'Header 2=h2;' +
 537                                 'Header 3=h3;' +
 538                                 'Header 4=h4;' +
 539                                 'Header 5=h5;' +
 540                                 'Header 6=h6'
 541                         );
 542
 543                         each(blocks, function(block) {
 544                                 items.push({
 545                                         text: block[0],
 546                                         value: block[1],
 547                                         textStyle: function() {
 548                                                 return getPreviewCss(block[1]);
 549                                         }
 550                                 });
 551                         });
 552
 553                         return {
 554                                 type: 'listbox',
 555                                 text: {raw: blocks[0][0]},
 556                                 values: items,
 557                                 fixedWidth: true,
 558                                 onselect: toggleFormat,
 559                                 onPostRender: createListBoxChangeHandler(items)
 560                         };
 561                 });
 562
 563                 editor.addButton('fontselect', function() {
 564                         var defaultFontsFormats =
 565                                 'Andale Mono=andale mono,times;' +
 566                                 'Arial=arial,helvetica,sans-serif;' +
 567                                 'Arial Black=arial black,avant garde;' +
 568                                 'Book Antiqua=book antiqua,palatino;' +
 569                                 'Comic Sans MS=comic sans ms,sans-serif;' +
 570                                 'Courier New=courier new,courier;' +
 571                                 'Georgia=georgia,palatino;' +
 572                                 'Helvetica=helvetica;' +
 573                                 'Impact=impact,chicago;' +
 574                                 'Symbol=symbol;' +
 575                                 'Tahoma=tahoma,arial,helvetica,sans-serif;' +
 576                                 'Terminal=terminal,monaco;' +
 577                                 'Times New Roman=times new roman,times;' +
 578                                 'Trebuchet MS=trebuchet ms,geneva;' +
 579                                 'Verdana=verdana,geneva;' +
 580                                 'Webdings=webdings;' +
 581                                 'Wingdings=wingdings,zapf dingbats';
 582
 583                         var items = [], fonts = createFormats(editor.settings.font_formats || defaultFontsFormats);
 584
 585                         each(fonts, function(font) {
 586                                 items.push({
 587                                         text: {raw: font[0]},
 588                                         value: font[1],
 589                                         textStyle: font[1].indexOf('dings') == -1 ? 'font-family:' + font[1] : ''
 590                                 });
 591                         });
 592
 593                         return {
 594                                 type: 'listbox',
 595                                 text: 'Font Family',
 596                                 tooltip: 'Font Family',
 597                                 values: items,
 598                                 fixedWidth: true,
 599                                 onPostRender: createListBoxChangeHandler(items, 'fontname'),
 600                                 onselect: function(e) {
 601                                         if (e.control.settings.value) {
 602                                                 editor.execCommand('FontName', false, e.control.settings.value);
 603                                         }
 604                                 }
 605                         };
 606                 });
 607
 608                 editor.addButton('fontsizeselect', function() {
 609                         var items = [], defaultFontsizeFormats = '8pt 10pt 12pt 14pt 18pt 24pt 36pt';
 610                         var fontsize_formats = editor.settings.fontsize_formats || defaultFontsizeFormats;
 611
 612                         each(fontsize_formats.split(' '), function(item) {
 613                                 items.push({text: item, value: item});
 614                         });
 615
 616                         return {
 617                                 type: 'listbox',
 618                                 text: 'Font Sizes',
 619                                 tooltip: 'Font Sizes',
 620                                 values: items,
 621                                 fixedWidth: true,
 622                                 onPostRender: createListBoxChangeHandler(items, 'fontsize'),
 623                                 onclick: function(e) {
 624                                         if (e.control.settings.value) {
 625                                                 editor.execCommand('FontSize', false, e.control.settings.value);
 626                                         }
 627                                 }
 628                         };
 629                 });
 630
 631                 editor.addMenuItem('formats', {
 632                         text: 'Formats',
 633                         menu: formatMenu
 634                 });
 635         }
 636 });