new.js

   1 /* Dynamic images, change class */
   2
   3 // MooTools
   4
   5 window
   6
   7     .addEvent('domready', function()
   8
   9     {
  10
  11
  12
  13         $$('*.dynamic_img').addEvents(
  14
  15         {
  16
  17             'mouseenter': function()
  18
  19             {
  20
  21                 this.addClass('over');
  22
  23             },
  24
  25             'mouseleave': function()
  26
  27             {
  28
  29                 this.removeClass('over');
  30
  31                 this.removeClass('clicked');
  32
  33             },
  34
  35             'mousedown': function()
  36
  37             {
  38
  39                 this.removeClass('over');
  40
  41                 this.addClass('clicked');
  42
  43             }
  44
  45         });
  46
  47
  48
  49         $$('img.tSwitch')
  50
  51             .addEvents(
  52
  53             {
  54
  55                 'mousedown': function()
  56
  57                 {
  58
  59                     var tbody = this.getParent('thead').getNext('tbody');
  60
  61                     tbody.toggleClass('hide');
  62
  63                     if (tbody.hasClass('hide'))
  64
  65                     {
  66
  67                         document.cookie = 't3' + this.getParent('table')
  68
  69                             .getProperty('id') + '=1; expires=Wed, 1 Jan 2020 00:00:00 GMT';
  70
  71                         this.removeClass('opened');
  72
  73                         this.addClass('closed');
  74
  75                     }
  76
  77                     else
  78
  79                     {
  80
  81                         document.cookie = 't3' + this.getParent('table')
  82
  83                             .getProperty('id') + '=1; expires=Thu, 01-Jan-1970 00:00:01 GMT';
  84
  85                         this.removeClass('closed');
  86
  87                         this.addClass('opened');
  88
  89                     }
  90
  91                 }
  92
  93             });
  94
  95
  96
  97         $$('table.row_table_data tbody tr').addEvents(
  98
  99         {
 100
 101             'mouseenter': function()
 102
 103             {
 104
 105                 this.addClass('hlight');
 106
 107             },
 108
 109             'mouseleave': function()
 110
 111             {
 112
 113                 this.removeClass('hlight');
 114
 115             },
 116
 117             'mousedown': function()
 118
 119             {
 120
 121                 this.toggleClass('marked');
 122
 123             }
 124
 125         });
 126
 127
 128
 129     });
 130
 131
 132
 133 // IE MooTools Fix
 134
 135 if (Browser.Engine.trident) // für IE
 136
 137 {
 138
 139     /**
 140
 141      * Element Erweiterungen
 142
 143      *
 144
 145      */
 146
 147     Element.implement(
 148
 149     {
 150
 151         insertAtCursor: function(value, select)
 152
 153         {
 154
 155             var pos = this.getSelectedRange();
 156
 157
 158
 159             // IE fix BEGIN
 160
 161             if (pos.start == 0 && pos.end == 0)
 162
 163             {
 164
 165                 this.focus();
 166
 167                 sel = document.selection.createRange();
 168
 169                 sel.text = value;
 170
 171                 this.focus();
 172
 173                 return this;
 174
 175             }
 176
 177             // IE fix END
 178
 179
 180
 181             var text = this.get('value');
 182
 183             this.set('value', text.substring(0, pos.start) + value + text.substring(pos.end, text.length));
 184
 185             if ($pick(select, true))
 186
 187             {
 188
 189                 this.selectRange(pos.start, pos.start + value.length);
 190
 191             }
 192
 193             else
 194
 195             {
 196
 197                 this.setCaretPosition(pos.start + value.length);
 198
 199             }
 200
 201
 202
 203             return this;
 204
 205         },
 206
 207
 208
 209         insertAroundCursor: function(options, select)
 210
 211         {
 212
 213             options = $extend(
 214
 215             {
 216
 217                 before: '',
 218
 219                 defaultMiddle: '',
 220
 221                 after: ''
 222
 223             }, options);
 224
 225
 226
 227             var value = this.getSelectedText() || options.defaultMiddle;
 228
 229             var pos = this.getSelectedRange();
 230
 231
 232
 233             // IE fix BEGIN
 234
 235             if (pos.start == 0 && pos.end == 0)
 236
 237             {
 238
 239                 this.focus();
 240
 241                 sel = document.selection.createRange();
 242
 243                 sel.text = options.before + options.after;
 244
 245                 this.focus();
 246
 247                 return this;
 248
 249             }
 250
 251             // IE fix END
 252
 253
 254
 255             var text = this.get('value');
 256
 257             if (pos.start == pos.end)
 258
 259             {
 260
 261                 this.set('value', text.substring(0, pos.start) + options.before + value + options.after + text.substring(pos.end, text.length));
 262
 263                 this.selectRange(pos.start + options.before.length, pos.end + options.before.length + value.length);
 264
 265             }
 266
 267             else
 268
 269             {
 270
 271                 var current = text.substring(pos.start, pos.end);
 272
 273                 this.set('value', text.substring(0, pos.start) + options.before + current + options.after + text.substring(pos.end, text.length));
 274
 275                 var selStart = pos.start + options.before.length;
 276
 277
 278
 279                 if ($pick(select, true))
 280
 281                 {
 282
 283                     this.selectRange(selStart, selStart + current.length);
 284
 285                 }
 286
 287                 else
 288
 289                 {
 290
 291                     this.setCaretPosition(selStart + text.length);
 292
 293                 }
 294
 295             }
 296
 297             return this;
 298
 299         }
 300
 301     });
 302
 303 }
 304
 305
 306
 307 var BBEditor = new Class ({
 308
 309     preview: null,
 310
 311     textArea: null,
 312
 313     id: null,
 314
 315
 316
 317     Binds: ['fetchPreview', 'showToolbarWindow', 'insertTag', 'insertSingleTag', 'insertSmilieTag', 'hideToolbarWindow', 'showPreview', 'hidePreview'],
 318
 319
 320
 321     /**
 322
 323      * Initialisiert den Editor
 324
 325      */
 326
 327     initialize: function(textAreaId) {
 328
 329
 330
 331         //connect elements
 332
 333         this.id = textAreaId;
 334
 335         this.textArea = $(textAreaId);
 336
 337         this.toolbar = $(textAreaId + '_toolbar');
 338
 339         this.preview = $(textAreaId + '_preview');
 340
 341
 342
 343         //init elements
 344
 345         this.preview.setStyle('display', 'none');
 346
 347
 348
 349         //add Events
 350
 351         $(textAreaId + '_previewButton').addEvent('click', this.fetchPreview);
 352
 353         $(textAreaId + '_resourceButton').addEvent('click', this.showToolbarWindow);
 354
 355         $(textAreaId + '_smilieButton').addEvent('click', this.showToolbarWindow);
 356
 357         $(textAreaId + '_troopButton').addEvent('click', this.showToolbarWindow);
 358
 359         $(textAreaId).addEvent('click', this.hideToolbarWindow);
 360
 361         this.addEvent($(textAreaId + '_toolbar'), this.insertTag);
 362
 363         this.addEvent($(textAreaId + '_resources'), this.insertTag);
 364
 365         this.addEvent($(textAreaId + '_smilies'), this.insertTag);
 366
 367         this.addEvent($(textAreaId + '_troops'), this.insertTag);
 368
 369     },
 370
 371
 372
 373     /**
 374
 375      * Fügt den klickbaren Objekten die Events hinzu
 376
 377      *
 378
 379      * @param object containerObjekt
 380
 381      * @param string callback
 382
 383      */
 384
 385     addEvent: function(div, call) {
 386
 387         var childen =  div.getChildren();
 388
 389         for (i = 0; i < childen.length; i++) {
 390
 391             if ($(childen[i]).get('bbTag')) {
 392
 393                 $(childen[i]).addEvent('click', call);
 394
 395             }
 396
 397         }
 398
 399     },
 400
 401
 402
 403     /**
 404
 405      * Fügt einen ausgewählten Tag in die
 406
 407      * Textarea ein
 408
 409      *
 410
 411      * @param Object
 412
 413      */
 414
 415     insertTag: function(Event) {
 416
 417         this.hidePreview();
 418
 419         var link = $(Event.target.parentNode);
 420
 421         var tag = link.get('bbTag');
 422
 423
 424
 425         switch (link.get('bbType')) {
 426
 427             //double tag
 428
 429             case 'd':
 430
 431                 this.textArea.insertAroundCursor({before: '[' + tag + ']', after: '[/' + tag + ']'});
 432
 433                 break;
 434
 435             //smilie
 436
 437             case 's':
 438
 439                 this.textArea.insertAtCursor(tag, false);
 440
 441                 break;
 442
 443             //once
 444
 445             case 'o':
 446
 447                 this.textArea.insertAtCursor('[' + link.get('bbTag') + ']', false);
 448
 449                 break;
 450
 451         }
 452
 453     },
 454
 455
 456
 457     /**
 458
 459      * Zeigt ein Unterfenster der Toolbar
 460
 461      * an
 462
 463      *
 464
 465      * @param Object
 466
 467      */
 468
 469     showToolbarWindow: function(Event) {
 470
 471         var targetDiv = Event.target.parentNode;
 472
 473         var window = $(this.id + '_' +  targetDiv.get('bbWin'));
 474
 475
 476
 477         var show = true;
 478
 479         if (window.getStyle('display') == 'block') {
 480
 481             show = false;
 482
 483         }
 484
 485
 486
 487         this.hideToolbarWindow();
 488
 489
 490
 491         if (show) {
 492
 493             window.fade('hide').fade('in');
 494
 495             window.setStyle('display', 'block');
 496
 497         }
 498
 499     },
 500
 501
 502
 503     /**
 504
 505      * Versteckt die Fenster der Toolbar
 506
 507      *
 508
 509      * @param Object
 510
 511      */
 512
 513     hideToolbarWindow: function() {
 514
 515         var childen =  $(this.id + '_toolbarWindows').getChildren();
 516
 517         for (i = 0; i < childen.length; i++) {
 518
 519             $(childen[i]).setStyle('display', 'none');
 520
 521         }
 522
 523     },
 524
 525
 526
 527     /**
 528
 529      * Holt die Vorschau vom Server
 530
 531      *
 532
 533      * @param Object
 534
 535      */
 536
 537     fetchPreview: function(Event) {
 538
 539         if (this.textArea.getStyle('display') == 'none' || this.textArea.value.length < 1) {
 540
 541             this.hidePreview();
 542
 543             return;
 544
 545         }
 546
 547
 548
 549         var jsonRequest = new Request.JSON({
 550
 551             method: 'post',
 552
 553             url: 'ajax.php?f=bb',
 554
 555             data:
 556
 557             {
 558
 559                 nl2br:  1,
 560
 561                 target: this.id,
 562
 563                 text:   this.textArea.value
 564
 565             },
 566
 567             onSuccess: this.showPreview
 568
 569         });
 570
 571         jsonRequest.post();
 572
 573     },
 574
 575
 576
 577     /**
 578
 579      * Zeigt die Vorschau
 580
 581      *
 582
 583      * @param string textAreaId
 584
 585      */
 586
 587     showPreview: function(data) {
 588
 589         if (data.error == true) {
 590
 591             alert(data.errorMsg);
 592
 593             return;
 594
 595         } else {
 596
 597             this.preview.innerHTML = data.text;
 598
 599             this.preview.setStyle('display','block');
 600
 601             this.textArea.setStyle('display','none');
 602
 603         }
 604
 605     },
 606
 607
 608
 609     /**
 610
 611      * Versteckt die Vorschau
 612
 613      *
 614
 615      * @param string textAreaId
 616
 617      */
 618
 619     hidePreview: function() {
 620
 621         this.preview.setStyle('display','none');
 622
 623         this.textArea.setStyle('display','inline');
 624
 625     }
 626
 627 });
 628
 629
 630
 631
 632
 633
 634
 635 var attackSysbolState = new Array();
 636
 637
 638
 639 function getAttackSymbolState(id)
 640
 641 {
 642
 643     var state = attackSysbolState[id];
 644
 645
 646
 647     if (!state)
 648
 649     {
 650
 651         state = new Object();
 652
 653
 654
 655         var type = 0;
 656
 657
 658
 659         var imgClass = $('markSybol_'+id).get('class');
 660
 661
 662
 663         var color = imgClass.substr(imgClass.lastIndexOf('_')+1, 11);
 664
 665
 666
 667         switch (color)
 668
 669         {
 670
 671             case 'green':
 672
 673                 type = 1;
 674
 675                 break;
 676
 677             case 'yellow':
 678
 679                 type = 2;
 680
 681                 break;
 682
 683             case 'red':
 684
 685                 type = 3;
 686
 687                 break;
 688
 689             default:
 690
 691                 type = 0;
 692
 693                 break;
 694
 695         }
 696
 697         state.type = type;
 698
 699         state.oldType = type;
 700
 701
 702
 703
 704
 705         attackSysbolState[id] = state;
 706
 707     }
 708
 709
 710
 711     return state;
 712
 713 }
 714
 715
 716
 717 function drawAttackSymbol(id)
 718
 719 {
 720
 721     var state = getAttackSymbolState(id);
 722
 723
 724
 725     if (state.type == 4)
 726
 727     {
 728
 729         state.type = 0;
 730
 731     }
 732
 733
 734
 735     switch (state.type)
 736
 737     {
 738
 739         case 1:
 740
 741             img = 'img/green.gif';
 742
 743             color = 'green';
 744
 745             break;
 746
 747         case 2:
 748
 749             img = 'img/yellow.gif';
 750
 751             color = 'yellow';
 752
 753             break;
 754
 755         case 3:
 756
 757             img = 'img/red.gif';
 758
 759             color = 'red';
 760
 761             break;
 762
 763         default:
 764
 765             img = 'img/grey.gif';
 766
 767             color = 'grey';
 768
 769             break;
 770
 771     }
 772
 773     $('markSybol_'+id).set('class', 'attack_symbol_'+color);
 774
 775 }
 776
 777
 778
 779 function markAttackSymbol(id)
 780
 781 {
 782
 783
 784
 785     var state = getAttackSymbolState(id);
 786
 787     state.type ++ ;
 788
 789
 790
 791     drawAttackSymbol(id);
 792
 793
 794
 795     if (state.isSaving != true)
 796
 797     {
 798
 799         state.isSaving = true;
 800
 801
 802
 803         (function()
 804
 805         {
 806
 807             if (state.type != state.oldType)
 808
 809             {
 810
 811                 var jsonRequest = new Request.JSON(
 812
 813                 {
 814
 815                    method: 'post',
 816
 817                    url: 'ajax.php?f=vp&id='+id+'&state='+state.type,
 818
 819                    onSuccess: function(data)
 820
 821                    {
 822
 823                         var state = getAttackSymbolState(data.id);
 824
 825
 826
 827                         state.isSaving = false;
 828
 829
 830
 831                         state.type = data.type;
 832
 833                         state.oldType = data.type;
 834
 835
 836
 837                         drawAttackSymbol(data.id);
 838
 839                    }
 840
 841                 });
 842
 843                 jsonRequest.post();
 844
 845             }
 846
 847             else
 848
 849             {
 850
 851                 state.isSaving = false;
 852
 853
 854
 855             }
 856
 857
 858
 859          }).delay(1000);
 860
 861     }
 862
 863
 864
 865 }