sources/plugins/scayt/dialogs/options.js

   1 /*
   2 Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
   3 For licensing, see LICENSE.html or http://ckeditor.com/license
   4 */
   5
   6 CKEDITOR.dialog.add( 'scaytDialog', function( editor ) {
   7         var scayt_instance =  editor.scayt;
   8
   9         var aboutTabDefinition = '<p><img src="' + scayt_instance.getLogo() + '" /></p>' +
  10                                 '<p>' + scayt_instance.getLocal('version') + scayt_instance.getVersion() + '</p>' +
  11                                 '<p>' + scayt_instance.getLocal('text_copyrights') + '</p>';
  12
  13         var doc = CKEDITOR.document;
  14
  15         var optionGenerator = function() {
  16                 var scayt_instance_ = editor.scayt,
  17                         applicationConfig = scayt_instance.getApplicationConfig(),
  18                         optionArrayUiCheckboxes = [],
  19                         optionLocalizationList = {
  20                                 "ignore-all-caps-words"                 : "label_allCaps",
  21                                 "ignore-domain-names"                   : "label_ignoreDomainNames",
  22                                 "ignore-words-with-mixed-cases" : "label_mixedCase",
  23                                 "ignore-words-with-numbers"     : "label_mixedWithDigits"
  24                         };
  25
  26                 for(var option in applicationConfig) {
  27
  28                         var checkboxConfig = {
  29                                 type: "checkbox"
  30                         };
  31
  32                         checkboxConfig.id  = option;
  33                         checkboxConfig.label  = scayt_instance.getLocal(optionLocalizationList[option]);
  34
  35                         optionArrayUiCheckboxes.push(checkboxConfig);
  36                 }
  37
  38                 return optionArrayUiCheckboxes;
  39         };
  40
  41         var languageModelState = {
  42                 isChanged : function() {
  43                         return (this.newLang === null || this.currentLang === this.newLang) ? false : true;
  44                 },
  45                 currentLang: scayt_instance.getLang(),
  46                 newLang: null,
  47                 reset: function() {
  48                         this.currentLang = scayt_instance.getLang();
  49                         this.newLang = null;
  50                 },
  51                 id: 'lang'
  52         };
  53
  54         var generateDialogTabs = function(tabsList, editor) {
  55                 var tabs = [],
  56                         uiTabs = editor.config.scayt_uiTabs;
  57
  58                 if(!uiTabs) {
  59                         return tabsList;
  60                 } else {
  61                         for(var i in uiTabs) {
  62                                 (uiTabs[i] == 1) && tabs.push(tabsList[i]);
  63                         }
  64
  65                         tabs.push(tabsList[tabsList.length - 1]);
  66                 }
  67
  68                 return tabs;
  69         };
  70
  71         var dialogTabs = [{
  72                 id : 'options',
  73                 label : scayt_instance.getLocal('tab_options'),
  74                 onShow: function() {
  75                         // console.log("tab show");
  76                 },
  77                 elements : [
  78                         {
  79                                 type: 'vbox',
  80                                 id: 'scaytOptions',
  81                                 children: optionGenerator(),
  82                                 onShow: function() {
  83                                         var optionsTab = this.getChild(),
  84                                                 scayt_instance =  editor.scayt;
  85                                         for(var i = 0; i < this.getChild().length; i++) {
  86                                                 this.getChild()[i].setValue(scayt_instance.getApplicationConfig()[this.getChild()[i].id]);
  87                                         }
  88
  89                                 }
  90                         }
  91
  92                 ]
  93         },
  94         {
  95                 id : 'langs',
  96                 label : scayt_instance.getLocal('tab_languages'),
  97                 elements : [
  98                         {
  99                                 id: "leftLangColumn",
 100                                 type: 'vbox',
 101                                 align: 'left',
 102                                 widths: ['100'],
 103                                 children: [
 104                                         {
 105                                                 type: 'html',
 106                                                 id: 'langBox',
 107                                                 style: 'overflow: hidden; white-space: normal;margin-bottom:15px;',
 108                                                 html: '<div><div style="float:left;width:45%;margin-left:5px;" id="left-col-' + editor.name + '"></div><div style="float:left;width:45%;margin-left:15px;" id="right-col-' + editor.name + '"></div></div>',
 109                                                 onShow: function() {
 110                                                         var scayt_instance =  editor.scayt;
 111                                                         var lang = scayt_instance.getLang(),
 112                                                                 prefix_id = "scaytLang_",
 113                                                                 radio = doc.getById(prefix_id + editor.name + '_' + lang);
 114
 115                                                         radio.$.checked = true;
 116                                                 }
 117                                         },
 118                                         {
 119                                                 type: 'html',
 120                                                 id: 'graytLanguagesHint',
 121                                                 html: '<div style="margin:5px auto; width:95%;white-space:normal;" id="' + editor.name + 'graytLanguagesHint"><span style="width:10px;height:10px;display: inline-block; background:#02b620;vertical-align:top;margin-top:2px;"></span> - This languages are supported by Grammar As You Type(GRAYT).</div>',
 122                                                 onShow: function() {
 123                                                         var graytLanguagesHint = doc.getById(editor.name + 'graytLanguagesHint');
 124
 125                                                         if (!editor.config.grayt_autoStartup) {
 126                                                                 graytLanguagesHint.$.style.display = 'none';
 127                                                         }
 128                                                 }
 129                                         }
 130                                 ]
 131                         }
 132                 ]
 133         },
 134         {
 135                 id : 'dictionaries',
 136                 label : scayt_instance.getLocal('tab_dictionaries'),
 137                 elements : [
 138                         {
 139                                 type: 'vbox',
 140                                 id: 'rightCol_col__left',
 141                                 children: [
 142                                         {
 143                                                 type: 'html',
 144                                                 id: 'dictionaryNote',
 145                                                 html: ''
 146                                         },
 147                                         {
 148                                                 type: 'text',
 149                                                 id: 'dictionaryName',
 150                                                 label: scayt_instance.getLocal('label_fieldNameDic') || 'Dictionary name',
 151                                                 onShow: function(data) {
 152                                                         var dialog = data.sender,
 153                                                                 scayt_instance = editor.scayt;
 154
 155                                                         // IE7 specific fix
 156                                                         setTimeout(function() {
 157                                                                 // clear dictionaryNote field
 158                                                                 dialog.getContentElement("dictionaries", "dictionaryNote").getElement().setText('');
 159
 160                                                                 // restore/clear dictionaryName field
 161                                                                 if(scayt_instance.getUserDictionaryName() != null && scayt_instance.getUserDictionaryName() != '') {
 162                                                                         dialog.getContentElement("dictionaries", "dictionaryName").setValue(scayt_instance.getUserDictionaryName());
 163                                                                 }
 164                                                         }, 0);
 165                                                 }
 166                                         },
 167                                         {
 168                                                 type: 'hbox',
 169                                                 id: 'notExistDic',
 170                                                 align: 'left',
 171                                                 style: 'width:auto;',
 172                                                 widths: [ '50%', '50%' ],
 173                                                 children: [
 174                                                         {
 175                                                                 type: 'button',
 176                                                                 id: 'createDic',
 177                                                                 label: scayt_instance.getLocal('btn_createDic'),
 178                                                                 title: scayt_instance.getLocal('btn_createDic'),
 179                                                                 onClick: function() {
 180                                                                         var dialog = this.getDialog(),
 181                                                                                 self = dialogDefinition,
 182                                                                                 scayt_instance = editor.scayt,
 183                                                                                 name = dialog.getContentElement("dictionaries", "dictionaryName").getValue();
 184
 185                                                                         scayt_instance.createUserDictionary(name, function(response) {
 186                                                                                 if(!response.error) {
 187                                                                                         self.toggleDictionaryButtons.call(dialog, true);
 188                                                                                 }
 189                                                                                 response.dialog = dialog;
 190                                                                                 response.command = "create";
 191                                                                                 response.name = name;
 192                                                                                 editor.fire("scaytUserDictionaryAction", response);
 193                                                                         }, function(error) {
 194                                                                                 error.dialog = dialog;
 195                                                                                 error.command = "create";
 196                                                                                 error.name = name;
 197                                                                                 editor.fire("scaytUserDictionaryActionError", error);
 198                                                                         });
 199                                                                 }
 200                                                         },
 201                                                         {
 202                                                                 type: 'button',
 203                                                                 id: 'restoreDic',
 204                                                                 label: scayt_instance.getLocal('btn_restoreDic'),
 205                                                                 title: scayt_instance.getLocal('btn_restoreDic'),
 206                                                                 onClick: function() {
 207                                                                         var dialog = this.getDialog(),
 208                                                                                 scayt_instance = editor.scayt,
 209                                                                                 self = dialogDefinition,
 210                                                                                 name = dialog.getContentElement("dictionaries", "dictionaryName").getValue();
 211
 212                                                                         scayt_instance.restoreUserDictionary(name, function(response) {
 213                                                                                 response.dialog = dialog;
 214                                                                                 if(!response.error) {
 215                                                                                         self.toggleDictionaryButtons.call(dialog, true);
 216                                                                                 }
 217                                                                                 response.command = "restore";
 218                                                                                 response.name = name;
 219                                                                                 editor.fire("scaytUserDictionaryAction", response);
 220                                                                         }, function(error) {
 221                                                                                 error.dialog = dialog;
 222                                                                                 error.command = "restore";
 223                                                                                 error.name = name;
 224                                                                                 editor.fire("scaytUserDictionaryActionError", error);
 225                                                                         });
 226                                                                 }
 227                                                         }
 228                                                 ]
 229                                         },
 230                                         {
 231                                                 type: 'hbox',
 232                                                 id: 'existDic',
 233                                                 align: 'left',
 234                                                 style: 'width:auto;',
 235                                                 widths: [ '50%', '50%' ],
 236                                                 children: [
 237                                                         {
 238                                                                 type: 'button',
 239                                                                 id: 'removeDic',
 240                                                                 label: scayt_instance.getLocal('btn_deleteDic'),
 241                                                                 title: scayt_instance.getLocal('btn_deleteDic'),
 242                                                                 onClick: function() {
 243                                                                         var dialog = this.getDialog(),
 244                                                                                 scayt_instance = editor.scayt,
 245                                                                                 self = dialogDefinition,
 246                                                                                 dictionaryNameField = dialog.getContentElement("dictionaries", "dictionaryName"),
 247                                                                                 name = dictionaryNameField.getValue();
 248
 249                                                                         scayt_instance.removeUserDictionary(name, function(response) {
 250                                                                                 dictionaryNameField.setValue("");
 251                                                                                 if(!response.error) {
 252                                                                                         self.toggleDictionaryButtons.call(dialog, false);
 253                                                                                 }
 254                                                                                 response.dialog = dialog;
 255                                                                                 response.command = "remove";
 256                                                                                 response.name = name;
 257                                                                                 editor.fire("scaytUserDictionaryAction", response);
 258                                                                         }, function(error) {
 259                                                                                 error.dialog = dialog;
 260                                                                                 error.command = "remove";
 261                                                                                 error.name = name;
 262                                                                                 editor.fire("scaytUserDictionaryActionError", error);
 263                                                                         });
 264                                                                 }
 265                                                         },
 266                                                         {
 267                                                                 type: 'button',
 268                                                                 id: 'renameDic',
 269                                                                 label: scayt_instance.getLocal('btn_renameDic'),
 270                                                                 title: scayt_instance.getLocal('btn_renameDic'),
 271                                                                 onClick: function() {
 272                                                                         var dialog = this.getDialog(),
 273                                                                                 scayt_instance = editor.scayt,
 274                                                                                 name = dialog.getContentElement("dictionaries", "dictionaryName").getValue();
 275
 276                                                                         scayt_instance.renameUserDictionary(name, function(response) {
 277                                                                                 response.dialog = dialog;
 278                                                                                 response.command = "rename";
 279                                                                                 response.name = name;
 280                                                                                 editor.fire("scaytUserDictionaryAction", response);
 281                                                                         }, function(error) {
 282                                                                                 error.dialog = dialog;
 283                                                                                 error.command = "rename";
 284                                                                                 error.name = name;
 285                                                                                 editor.fire("scaytUserDictionaryActionError", error);
 286                                                                         });
 287                                                                 }
 288                                                         }
 289                                                 ]
 290                                         },
 291                                         {
 292                                                 type: 'html',
 293                                                 id: 'dicInfo',
 294                                                 html: '<div id="dic_info_editor1" style="margin:5px auto; width:95%;white-space:normal;">' + scayt_instance.getLocal('text_descriptionDic')  + '</div>'
 295                                         }
 296                                 ]
 297                         }
 298                 ]
 299         },
 300         {
 301                 id : 'about',
 302                 label : scayt_instance.getLocal('tab_about'),
 303                 elements : [
 304                         {
 305                                 type : 'html',
 306                                 id : 'about',
 307                                 style : 'margin: 5px 5px;',
 308                                 html : '<div><div id="scayt_about_">' +
 309                                                 aboutTabDefinition +
 310                                                 '</div></div>'
 311                         }
 312                 ]
 313         }];
 314
 315         editor.on("scaytUserDictionaryAction", function(event) {
 316                 var UILib = SCAYT.prototype.UILib,
 317                         dialog = event.data.dialog,
 318                         dictionaryNote = dialog.getContentElement("dictionaries", "dictionaryNote").getElement(),
 319                         scayt_instance =  event.editor.scayt,
 320                         messageTemplate;
 321
 322                 if(event.data.error === undefined) {
 323
 324                         // success message
 325                         messageTemplate = scayt_instance.getLocal("message_success_" + event.data.command + "Dic");
 326                         messageTemplate = messageTemplate.replace('%s', event.data.name);
 327                         dictionaryNote.setText(messageTemplate);
 328                         UILib.css(dictionaryNote.$, {color: 'blue'});
 329                 } else {
 330
 331                         // error message
 332                         if(event.data.name === '') {
 333
 334                                 // empty dictionary name
 335                                 dictionaryNote.setText(scayt_instance.getLocal('message_info_emptyDic'));
 336                         } else {
 337                                 messageTemplate = scayt_instance.getLocal("message_error_" + event.data.command + "Dic");
 338                                 messageTemplate = messageTemplate.replace('%s', event.data.name);
 339                                 dictionaryNote.setText(messageTemplate);
 340                         }
 341                         UILib.css(dictionaryNote.$, {color: 'red'});
 342
 343                         if(scayt_instance.getUserDictionaryName() != null && scayt_instance.getUserDictionaryName() != '') {
 344                                 dialog.getContentElement("dictionaries", "dictionaryName").setValue(scayt_instance.getUserDictionaryName());
 345                         } else {
 346                                 dialog.getContentElement("dictionaries", "dictionaryName").setValue("");
 347                         }
 348                 }
 349         });
 350
 351         editor.on("scaytUserDictionaryActionError", function(event) {
 352                 var UILib = SCAYT.prototype.UILib,
 353                         dialog = event.data.dialog,
 354                         dictionaryNote = dialog.getContentElement("dictionaries", "dictionaryNote").getElement(),
 355                         scayt_instance =  event.editor.scayt,
 356                         messageTemplate;
 357
 358                 if(event.data.name === '') {
 359
 360                         // empty dictionary name
 361                         dictionaryNote.setText(scayt_instance.getLocal('message_info_emptyDic'));
 362                 } else {
 363                         messageTemplate = scayt_instance.getLocal("message_error_" + event.data.command + "Dic");
 364                         messageTemplate = messageTemplate.replace('%s', event.data.name);
 365                         dictionaryNote.setText(messageTemplate);
 366                 }
 367                 UILib.css(dictionaryNote.$, {color: 'red'});
 368
 369
 370                 if(scayt_instance.getUserDictionaryName() != null && scayt_instance.getUserDictionaryName() != '') {
 371                         dialog.getContentElement("dictionaries", "dictionaryName").setValue(scayt_instance.getUserDictionaryName());
 372                 } else {
 373                         dialog.getContentElement("dictionaries", "dictionaryName").setValue("");
 374                 }
 375
 376         });
 377
 378         var plugin = CKEDITOR.plugins.scayt;
 379
 380         var dialogDefinition = {
 381                 title:          scayt_instance.getLocal('text_title'),
 382                 resizable:      CKEDITOR.DIALOG_RESIZE_BOTH,
 383                 minWidth:               340,
 384                 minHeight:              260,
 385                 onLoad: function() {
 386                         if(editor.config.scayt_uiTabs[1] == 0) {
 387                                 return;
 388                         }
 389
 390                         var dialog = this,
 391                                 self = dialogDefinition,
 392                                 langBoxes = self.getLangBoxes.call(dialog);
 393
 394                         langBoxes.getParent().setStyle("white-space", "normal");
 395
 396                         //dialog.data = editor.fire( 'scaytDialog', {} );
 397                         self.renderLangList(langBoxes);
 398
 399                         var scayt_instance = editor.scayt;
 400
 401                         this.definition.minWidth = this.getSize().width;
 402                         this.resize(this.definition.minWidth, this.definition.minHeight);
 403                 },
 404                 onCancel: function() {
 405                         languageModelState.reset();
 406                 },
 407                 onHide: function() {
 408                         editor.unlockSelection();
 409                 },
 410                 onShow: function() {
 411                         editor.fire("scaytDialogShown", this);
 412
 413                         if(editor.config.scayt_uiTabs[2] == 0) {
 414                                 return;
 415                         }
 416
 417                         var scayt_instance = editor.scayt,
 418                                 self = dialogDefinition,
 419                                 dialog = this,
 420                                 dictionaryNameField = dialog.getContentElement("dictionaries", "dictionaryName"),
 421                                 existance = dialog.getContentElement("dictionaries", "existDic").getElement().getParent(),
 422                                 notExistance = dialog.getContentElement("dictionaries", "notExistDic").getElement().getParent();
 423
 424                         existance.hide();
 425                         notExistance.hide();
 426
 427                         if(scayt_instance.getUserDictionaryName() != null && scayt_instance.getUserDictionaryName() != '') {
 428                                 dialog.getContentElement("dictionaries", "dictionaryName").setValue(scayt_instance.getUserDictionaryName());
 429                                 existance.show();
 430                         } else {
 431                                 dictionaryNameField.setValue("");
 432                                 notExistance.show();
 433                         }
 434                 },
 435                 onOk: function() {
 436                         var dialog = this,
 437                                 self = dialogDefinition,
 438                                 scayt_instance =  editor.scayt,
 439                                 scaytOptions = dialog.getContentElement("options", "scaytOptions"),
 440                                 changedOptions = self.getChangedOption.call(dialog);
 441
 442                         scayt_instance.commitOption({ changedOptions: changedOptions });
 443                 },
 444                 toggleDictionaryButtons: function(exist) {
 445                         var existance = this.getContentElement("dictionaries", "existDic").getElement().getParent(),
 446                                 notExistance = this.getContentElement("dictionaries", "notExistDic").getElement().getParent();
 447
 448                         if(exist) {
 449                                 existance.show();
 450                                 notExistance.hide();
 451                         } else {
 452                                 existance.hide();
 453                                 notExistance.show();
 454                         }
 455
 456                 },
 457                 getChangedOption: function() {
 458                         var changedOption = {};
 459
 460                         if(editor.config.scayt_uiTabs[0] == 1) {
 461                                 var dialog = this,
 462                                         scaytOptions = dialog.getContentElement("options", "scaytOptions").getChild();
 463
 464                                 for(var i = 0; i < scaytOptions.length; i++) {
 465                                         if(scaytOptions[i].isChanged()) {
 466                                                 changedOption[scaytOptions[i].id] = scaytOptions[i].getValue();
 467                                         }
 468                                 }
 469                         }
 470
 471                         if(languageModelState.isChanged()) {
 472                                 changedOption[languageModelState.id] = editor.config.scayt_sLang = languageModelState.currentLang = languageModelState.newLang;
 473                         }
 474
 475                         return changedOption;
 476                 },
 477                 buildRadioInputs: function(key, value, isSupportedByGrayt) {
 478                         var divContainer = new CKEDITOR.dom.element( 'div' ),
 479                                 doc = CKEDITOR.document,
 480                                 id = "scaytLang_" + editor.name + '_' + value,
 481                                 radio = CKEDITOR.dom.element.createFromHtml( '<input id="' +
 482                                         id + '" type="radio" ' +
 483                                         ' value="' + value + '" name="scayt_lang" />' ),
 484
 485                                 radioLabel = new CKEDITOR.dom.element( 'label' ),
 486                                 scayt_instance = editor.scayt;
 487
 488                         divContainer.setStyles({
 489                                 "white-space": "normal",
 490                                 'position': 'relative',
 491                                 'padding-bottom': '2px'
 492                         });
 493
 494                         radio.on( 'click', function(data) {
 495                                 languageModelState.newLang = data.sender.getValue();
 496                         });
 497
 498                         radioLabel.appendText(key);
 499                         radioLabel.setAttribute("for", id);
 500
 501                         if(isSupportedByGrayt && editor.config.grayt_autoStartup) {
 502                                 radioLabel.setStyles({
 503                                         'color': '#02b620'
 504                                 });
 505                         }
 506
 507                         divContainer.append(radio);
 508                         divContainer.append(radioLabel);
 509
 510                         if(value === scayt_instance.getLang()) {
 511                                 radio.setAttribute("checked", true);
 512                                 radio.setAttribute('defaultChecked', 'defaultChecked');
 513                         }
 514
 515                         return divContainer;
 516                 },
 517                 renderLangList: function(langBoxes) {
 518                         var dialog = this,
 519                                 leftCol = langBoxes.find('#left-col-' + editor.name).getItem(0),
 520                                 rightCol = langBoxes.find('#right-col-' + editor.name).getItem(0),
 521                                 scaytLangList = scayt_instance.getScaytLangList(),
 522                                 graytLangList = scayt_instance.getGraytLangList(),
 523                                 mergedLangList = {},
 524                                 sortable = [],
 525                                 counter = 0,
 526                                 isSupportedByGrayt = false,
 527                                 half, lang;
 528
 529                         for(lang in scaytLangList.ltr) {
 530                                 mergedLangList[lang] = scaytLangList.ltr[lang];
 531                         }
 532
 533                         for(lang in scaytLangList.rtl) {
 534                                 mergedLangList[lang] = scaytLangList.rtl[lang];
 535                         }
 536
 537                         // sort alphabetically lang list
 538                         for(lang in mergedLangList) {
 539                                 sortable.push([lang, mergedLangList[lang]]);
 540                         }
 541                         sortable.sort(function(a, b) {
 542                                 var result = 0;
 543                                 if(a[1] > b[1]) {
 544                                         result = 1;
 545                                 } else if(a[1] < b[1]) {
 546                                         result = -1;
 547                                 }
 548                                 return result;
 549                         });
 550                         mergedLangList = {};
 551                         for(var i = 0; i < sortable.length; i++) {
 552                                 mergedLangList[sortable[i][0]] = sortable[i][1];
 553                         }
 554
 555                         half = Math.round(sortable.length / 2);
 556
 557                         for(lang in mergedLangList) {
 558                                 counter++;
 559                                 isSupportedByGrayt = (lang in graytLangList.ltr) || (lang in graytLangList.rtl);
 560                                 dialog.buildRadioInputs(mergedLangList[lang], lang, isSupportedByGrayt).appendTo(counter <= half ? leftCol : rightCol);
 561                         }
 562                 },
 563                 getLangBoxes: function() {
 564                         var dialog = this,
 565                                 langboxes = dialog.getContentElement("langs", "langBox").getElement();
 566
 567                         return langboxes;
 568                 },
 569                 contents: generateDialogTabs(dialogTabs, editor)
 570         };
 571
 572         return dialogDefinition;
 573 });