platforma/static/js/views/html.js

   1 /*global View render_template panels */
   2 var HTMLView = View.extend({
   3     _className: 'HTMLView',
   4     element: null,
   5     model: null,
   6     template: 'html-view-template',
   7
   8     init: function(element, model, parent, template) {
   9         var submodel = model.contentModels['html'];
  10         this._super(element, submodel, template);
  11         this.parent = parent;
  12
  13         this.themeEditor = new ThemeEditDialog( $('#theme-edit-dialog') );
  14
  15         this.model
  16         .addObserver(this, 'data', this.modelDataChanged.bind(this))
  17         .addObserver(this, 'state', this.modelStateChanged.bind(this));
  18
  19         this.modelStateChanged('state', this.model.get('state'));
  20         this.modelDataChanged('data', this.model.get('data'));
  21
  22         this.model.load();
  23
  24         this.currentOpen = null;
  25         this.currentFocused = null;
  26         this.themeBoxes = [];
  27     },
  28
  29     modelDataChanged: function(property, value)
  30     {
  31         if(!value) return;
  32
  33         // the xml model changed
  34         var container = $('.htmlview', this.element);
  35         container.empty();
  36         container.append(value);
  37
  38         this.updatePrintLink();
  39
  40     /* mark themes */
  41     /* $(".theme-ref", this.$docbase).each(function() {
  42             var id = $(this).attr('x-theme-class');
  43
  44             var end = $("span.theme-end[x-theme-class = " + id+"]");
  45             var begin = $("span.theme-begin[x-theme-class = " + id+"]");
  46
  47             var h = $(this).outerHeight();
  48
  49             h = Math.max(h, end.offset().top - begin.offset().top);
  50             $(this).css('height', h);
  51         }); */
  52     },
  53
  54     updatePrintLink: function() {
  55         var base = this.$printLink.attr('ui:baseref');
  56         this.$printLink.attr('href', base + "?user="+this.model.document.get('user')+"&revision=" + this.model.get('revision'));
  57     },
  58
  59     modelStateChanged: function(property, value)
  60     {
  61         var self = $(this);
  62
  63         if (value == 'synced' || value == 'dirty') {
  64             this.unfreeze();
  65         } else if (value == 'unsynced') {
  66             if(this.currentOpen) this.closeWithoutSave(this.currentOpen);
  67             this.freeze('Niezsynchronizowany...');
  68         } else if (value == 'loading') {
  69             this.freeze('Ładowanie...');
  70         } else if (value == 'saving') {
  71             this.freeze('Zapisywanie...');
  72         } else if (value == 'error') {
  73             this.freeze(this.model.get('error'));
  74             $('.xml-editor-ref', this.overlay).click(
  75                 function(event) {
  76                     console.log("Sending scroll rq.", this);
  77                     try {
  78                         var href = $(this).attr('href').split('-');
  79                         var line = parseInt(href[1]);
  80                         var column = parseInt(href[2]);
  81
  82                         $(document).trigger('xml-scroll-request', {
  83                             line:line,
  84                             column:column
  85                         });
  86                     } catch(e) {
  87                         console.log(e);
  88                     }
  89
  90                     return false;
  91                 });
  92         }
  93     },
  94
  95     render: function() {
  96         if(this.$docbase)
  97             this.$docbase.unbind('click');
  98
  99         if(this.$printLink)
 100             this.$printLink.unbind();
 101
 102         if(this.$addThemeButton)
 103             this.$addThemeButton.unbind();
 104
 105         if(this.$addAnnotation)
 106             this.$addAnnotation.unbind();
 107
 108         this._super();
 109
 110         this.$printLink = $('.htmlview-toolbar .html-print-link', this.element);
 111         this.$docbase = $('.htmlview', this.element);
 112         this.$addThemeButton = $('.htmlview-toolbar .html-add-theme', this.element);
 113         this.$addAnnotation = $('.htmlview-toolbar .html-add-annotation', this.element);
 114         // this.$debugButton = $('.htmlview-toolbar .html-serialize', this.element);
 115
 116         this.updatePrintLink();
 117         this.$docbase.bind('click', this.itemClicked.bind(this));
 118         this.$addThemeButton.click( this.addTheme.bind(this) );
 119         this.$addAnnotation.click( this.addAnnotation.bind(this) );
 120         // this.$debugButton.click( this.serialized.bind(this) );
 121     },
 122
 123     /* serialized: function() {
 124         this.model.set('state', 'dirty');
 125         console.log( this.model.serializer.serializeToString(this.model.get('data')) );
 126     }, */
 127
 128     reload: function() {
 129         this.model.load(true);
 130     },
 131
 132     dispose: function() {
 133         this.model.removeObserver(this);
 134         this._super();
 135     },
 136
 137     itemClicked: function(event)
 138     {
 139         var self = this;
 140
 141         console.log('click:', event, event.ctrlKey, event.target);
 142         var $e = $(event.target);
 143
 144         if($e.hasClass('annotation'))
 145         {
 146             if(this.currentOpen) return false;
 147
 148             var $p = $e.parent();
 149             if(this.currentFocused)
 150             {
 151                 console.log(this.currentFocused, $p);
 152                 if($p[0] == this.currentFocused[0]) {
 153                     console.log('unfocus of current');
 154                     this.unfocusAnnotation();
 155                     return false;
 156                 }
 157
 158                 console.log('switch unfocus');
 159                 this.unfocusAnnotation();
 160             }
 161
 162             this.focusAnnotation($p);
 163             return false;
 164         }
 165
 166         /*
 167          * Clicking outside of focused area doesn't unfocus by default
 168          *  - this greatly simplifies the whole click check
 169          */
 170
 171         if( $e.hasClass('motyw'))
 172         {
 173             this.selectTheme($e.attr('theme-class'));
 174             return false;
 175         }
 176
 177         if( $e.hasClass('theme-text-list') )
 178         {
 179             this.selectTheme($e.parent().attr('theme-class'));
 180             return false;
 181         }
 182
 183         /* other buttons */
 184         try {
 185             var editable = this.editableFor($e);
 186
 187             if(!editable)
 188                 return false;
 189
 190             if($e.hasClass('delete-button'))
 191                 this.deleteElement(editable);
 192
 193             if($e.hasClass('edit-button'))
 194             {
 195                 if( editable.hasClass('motyw') )
 196                     this.editTheme(editable);
 197                 else
 198                     this.openForEdit(editable);
 199             }
 200
 201             if($e.hasClass('accept-button'))
 202                 this.closeWithSave(editable);
 203
 204             if($e.hasClass('reject-button'))
 205                 this.closeWithoutSave(editable);
 206
 207         } catch(e) {
 208             messageCenter.addMessage('error', "wlsave", 'Błąd:' + e.toString());
 209         }
 210
 211         return false;
 212     },
 213
 214     unfocusAnnotation: function()
 215     {
 216         if(!this.currentFocused)
 217         {
 218             console.log('Redundant unfocus');
 219             return false;
 220         }
 221
 222         if(this.currentOpen
 223             && this.currentOpen.is("*[x-annotation-box]")
 224             && this.currentOpen.parent()[0] == this.currentFocused[0])
 225             {
 226             console.log("Can't unfocus open box");
 227             return false;
 228         }
 229
 230         var $box = $("*[x-annotation-box]", this.currentFocused);
 231         $box.css({
 232             'display': 'none'
 233         });
 234         // this.currentFocused.removeAttr('x-focused');
 235         // this.currentFocused.hide();
 236         this.currentFocused = null;
 237     },
 238
 239     focusAnnotation: function($e) {
 240         this.currentFocused = $e;
 241         var $box = $("*[x-annotation-box]", $e);
 242         $box.css({
 243             'display': 'block'
 244         });
 245
 246     // $e.attr('x-focused', 'focused');
 247     },
 248
 249     closeWithSave: function($e) {
 250         var $edit = $e.data('edit-overlay');
 251         var newText = $('textarea', $edit).val();
 252         var errors = null;
 253
 254         errors = this.model.updateInnerWithWLML($e, newText);
 255
 256         if(errors)
 257             messageCenter.addMessage('error', 'render', errors);
 258         else {
 259             $edit.remove();
 260             this.currentOpen = null;
 261         }
 262     },
 263
 264     closeWithoutSave: function($e) {
 265         var $edit = $e.data('edit-overlay');
 266         $edit.remove();
 267         $e.removeAttr('x-open');
 268         this.currentOpen = null;
 269     },
 270
 271     editableFor: function($button)
 272     {
 273         var $e = $button;
 274         var n = 0;
 275
 276         while( ($e[0] != this.element[0]) && !($e.attr('x-editable')) && n < 50)
 277         {
 278             // console.log($e, $e.parent(), this.element);
 279             $e = $e.parent();
 280             n += 1;
 281         }
 282
 283         if(!$e.attr('x-editable'))
 284             return null;
 285
 286         console.log("Trigger", $button, " yields editable: ", $e);
 287         return $e;
 288     },
 289
 290     openForEdit: function($origin)
 291     {
 292         if(this.currentOpen && this.currentOpen != $origin) {
 293             this.closeWithSave(this.currentOpen);
 294         }
 295
 296         var $box = null
 297
 298         // annotations overlay their sub box - not their own box //
 299         if($origin.is(".annotation-inline-box"))
 300             $box = $("*[x-annotation-box]", $origin);
 301         else
 302             $box = $origin;
 303
 304         var x = $box[0].offsetLeft;
 305         var y = $box[0].offsetTop;
 306         var w = $box.outerWidth();
 307         var h = $box.innerHeight();
 308
 309         console.log("Edit origin:", $origin, " box:", $box);
 310         console.log("offsetParent:", $box[0].offsetParent);
 311         console.log("Dimensions: ", x, y, w , h);
 312
 313         // start edition on this node
 314         var $overlay = $('<div class="html-editarea"><textarea></textarea></div>');
 315
 316         h = Math.max(h, 2*parseInt($box.css('line-height')));
 317
 318         $overlay.css({
 319             position: 'absolute',
 320             height: h,
 321             left: x,
 322             top: y,
 323             width: '95%'
 324         });
 325
 326         try {
 327             $('textarea', $overlay).val( this.model.innerAsWLML($origin[0]) );
 328
 329             if($origin.is(".annotation-inline-box"))
 330             {
 331                 if(this.currentFocused) {
 332                     // if some other is focused
 333                     if($origin[0] != this.currentFocused[0]) {
 334                         this.unfocusAnnotation();
 335                         this.focusAnnotation($origin);
 336                     }
 337                 // already focues
 338                 }
 339                 else { // nothing was focused
 340                     this.focusAnnotation($origin);
 341                 }
 342             }
 343             else { // this item is not focusable
 344                 if(this.currentFocused) this.unfocusAnnotation();
 345             }
 346
 347             $($box[0].offsetParent).append($overlay);
 348             $origin.data('edit-overlay', $overlay);
 349
 350             this.currentOpen = $origin;
 351             $origin.attr('x-open', 'open');
 352         }
 353         catch(e) {
 354             console.log("Can't open", e);
 355         }
 356
 357         return false;
 358     },
 359
 360     deleteElement: function($editable)
 361     {
 362         var relatedThemes = $("*[x-node='begin'], *[x-node='end']", $editable);
 363
 364         var themeMarks = relatedThemes.map(function() {
 365             return $(".motyw[theme-class='"+$(this).attr('theme-class')+"']");
 366         });
 367
 368         if($editable.is("*.motyw"))
 369         {
 370             console.log($editable);
 371             var selector = "[theme-class='"+$editable.attr('theme-class')+"']";
 372             relatedThemes = relatedThemes.add("*[x-node='begin']"+selector+", *[x-node='end']"+selector);
 373         }
 374
 375         console.log(relatedThemes, themeMarks);
 376
 377         var del = confirm("Usunięcie elementu jest nieodwracalne.\n"
 378         +" Czy na pewno chcesz usunąć ten element, wraz z zawartymi motywami ?\n");
 379
 380         if(del) {
 381             relatedThemes.remove();
 382             themeMarks.remove();
 383             $editable.remove();
 384         }
 385     },
 386
 387     //
 388     // Special stuff for themes
 389     //
 390
 391     // Theme related stuff
 392     verifyThemeInsertPoint: function(node) {
 393
 394         if(node.nodeType == 3) { // Text Node
 395             node = node.parentNode;
 396         }
 397
 398         if(node.nodeType != 1) return false;
 399
 400         console.log('Selection point:', node);
 401
 402         node = $(node);
 403         var xtype = node.attr('x-node');
 404
 405         if(!xtype || (xtype.search(':') >= 0) ||
 406                 xtype == 'motyw' || xtype == 'begin' || xtype == 'end')
 407             return false;
 408
 409         // this is hopefully redundant
 410         //if(! node.is('*.utwor *') )
 411         //    return false;
 412
 413         // don't allow themes inside annotations
 414         if( node.is('*[x-annotation-box] *') )
 415             return false;
 416
 417         return true;
 418     },
 419
 420
 421     editTheme: function($element)
 422     {
 423         var themeTextSpan = $('.theme-text-list', $element);
 424         this.themeEditor.setFromString( themeTextSpan.text() );
 425
 426         function _editThemeFinish(dialog) {
 427             themeTextSpan.text( dialog.userData.themes.join(', ') );
 428         };
 429
 430         this.themeEditor.show(_editThemeFinish);
 431     },
 432
 433
 434     addTheme: function()
 435     {
 436         var selection = window.getSelection();
 437         var n = selection.rangeCount;
 438
 439         console.log("Range count:", n);
 440         if(n == 0) {
 441             window.alert("Nie zaznaczono żadnego obszaru");
 442             return false;
 443         }
 444
 445         // for now allow only 1 range
 446         if(n > 1) {
 447             window.alert("Zaznacz jeden obszar");
 448             return false;
 449         }
 450
 451         // remember the selected range
 452         var range = selection.getRangeAt(0);
 453         console.log(range.startContainer, range.endContainer);
 454
 455         // verify if the start/end points make even sense -
 456         // they must be inside a x-node (otherwise they will be discarded)
 457         // and the x-node must be a main text
 458         if(! this.verifyThemeInsertPoint(range.startContainer) ) {
 459             window.alert("Motyw nie może się zaczynać w tym miejscu.");
 460             return false;
 461         }
 462
 463         if(! this.verifyThemeInsertPoint(range.endContainer) ) {
 464             window.alert("Motyw nie może się kończyć w tym miejscu.");
 465             return false;
 466         }
 467
 468         function _addThemeFinish(dialog)
 469         {
 470             var date = (new Date()).getTime();
 471             var random = Math.floor(4000000000*Math.random());
 472             var id = (''+date) + '-' + (''+random);
 473
 474             var spoint = document.createRange();
 475             var epoint = document.createRange();
 476
 477             spoint.setStart(range.startContainer, range.startOffset);
 478             epoint.setStart(range.endContainer, range.endOffset);
 479
 480             var mtag, btag, etag, errors;
 481             var themesStr = dialog.userData.themes.join(', ');
 482
 483             // insert theme-ref
 484             mtag = $('<span></span>');
 485             spoint.insertNode(mtag[0]);
 486             errors = this.model.updateWithWLML(mtag, '<motyw id="m'+id+'">'+themesStr+'</motyw>');
 487
 488             if(errors) {
 489                 messageCenter.addMessage('error', null, 'Błąd przy dodawaniu motywu :' + errors);
 490                 return false;
 491             }
 492
 493             // insert theme-begin
 494             btag = $('<span></span>');
 495             spoint.insertNode(btag[0]);
 496             errors = this.model.updateWithWLML(btag, '<begin id="b'+id+'" />');
 497             if(errors) {
 498                 mtag.remove();
 499                 messageCenter.addMessage('error', null, 'Błąd przy dodawaniu motywu :' + errors);
 500                 return false;
 501             }
 502
 503             etag = $('<span></span>');
 504             epoint.insertNode(etag[0]);
 505             result = this.model.updateWithWLML(etag, '<end id="e'+id+'" />');
 506             if(errors) {
 507                 btag.remove();
 508                 mtag.remove();
 509                 messageCenter.addMessage('error', null, 'Błąd przy dodawaniu motywu :' + errors);
 510                 return false;
 511             }
 512
 513             selection.removeAllRanges();
 514             return true;
 515         };
 516
 517         // show the modal
 518         this.themeEditor.setFromString('');
 519         this.themeEditor.show(_addThemeFinish.bind(this));
 520     },
 521
 522     selectTheme: function(themeId)
 523     {
 524         var selection = window.getSelection();
 525
 526         // remove current selection
 527         selection.removeAllRanges();
 528
 529         var range = document.createRange();
 530         var s = $(".motyw[theme-class='"+themeId+"']")[0];
 531         var e = $(".end[theme-class='"+themeId+"']")[0];
 532         console.log('Selecting range:', themeId, range, s, e);
 533
 534         if(s && e) {
 535             range.setStartAfter(s);
 536             range.setEndBefore(e);
 537             selection.addRange(range);
 538         }
 539     },
 540
 541     addAnnotation: function()
 542     {
 543         var selection = window.getSelection();
 544         var n = selection.rangeCount;
 545
 546         console.log("Range count:", n);
 547         if(n == 0) {
 548             window.alert("Nie zaznaczono żadnego obszaru");
 549             return false;
 550         }
 551
 552         // for now allow only 1 range
 553         if(n > 1) {
 554             window.alert("Zaznacz jeden obszar");
 555             return false;
 556         }
 557
 558         // remember the selected range
 559         var range = selection.getRangeAt(0);
 560
 561         if(! this.verifyThemeInsertPoint(range.endContainer) ) {
 562             window.alert("Nie można wstawić w to miejsce przypisu.");
 563             return false;
 564         }
 565
 566         var text = range.toString();
 567         var tag = $('<span></span>');
 568         range.collapse(false);
 569         range.insertNode(tag[0]);
 570         var errors = this.model.updateWithWLML(tag, '<pr><slowo_obce>'+text+"</slowo_obce> </pr>");
 571
 572         if(errors) {
 573                 tag.remove();
 574                 messageCenter.addMessage('error', null, 'Błąd przy dodawaniu przypisu:' + errors);
 575                 return false;
 576         }
 577
 578         return true;
 579     }
 580 });
 581
 582 var ThemeEditDialog = AbstractDialog.extend({
 583
 584      validate: function()
 585      {
 586          var active = $('input.theme-list-item:checked', this.$window);
 587
 588          if(active.length < 1) {
 589              this.errors.push("You must select at least one theme.");
 590              return false;
 591          }
 592
 593          console.log("Active:", active);
 594          this.userData.themes = $.makeArray(active.map(function() { return this.value; }) );
 595          console.log('After validate:', this.userData);
 596          return this._super();
 597      },
 598
 599      setFromString: function(string)
 600      {
 601          var $unmatchedList = $('tbody.unknown-themes', this.$window);
 602
 603          $("tr:not(.header)", $unmatchedList).remove();
 604          $unmatchedList.hide();
 605
 606          $('input.theme-list-item', this.$window).removeAttr('checked');
 607
 608          var unmatched = [];
 609
 610          $.each(string.split(','), function() {
 611              var name = $.trim(this);
 612              if(!name) return;
 613
 614              console.log('Selecting:', name);
 615              var checkbox = $("input.theme-list-item[value='"+name+"']", this.$window);
 616
 617              if(checkbox.length > 0)
 618                  checkbox.attr('checked', 'checked');
 619              else
 620                  unmatched.push(name);
 621          });
 622
 623          if(unmatched.length > 0)
 624          {
 625              $.each(unmatched, function() {
 626                  $('<tr><td colspan="5"><label><input type="checkbox"'+
 627                      ' checked="checked" class="theme-list-item" value="'
 628                      + this+ '" />"'+this+'"</label></td></tr>').
 629                  appendTo($unmatchedList);
 630              });
 631
 632              $unmatchedList.show();
 633          }
 634      },
 635
 636      displayErrors: function() {
 637         var errorP = $('.error-messages-inline-box', this.$window);
 638         if(errorP.length > 0) {
 639             var html = '';
 640             $.each(this.errors, function() {
 641                 html += '<span>' + this + '</span>';
 642             });
 643             errorP.html(html);
 644             errorP.show();
 645             console.log('Validation errors:', html);
 646         }
 647         else
 648             this._super();
 649     },
 650
 651     reset: function()
 652     {
 653         this._super();
 654         $('.error-messages-inline-box', this.$window).html('').hide();
 655     }
 656
 657  });
 658
 659 // Register view
 660 panels['html'] = HTMLView;