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         this._super(element, model, template);
  10         this.parent = parent;
  11
  12         this.model
  13         .addObserver(this, 'data', this.modelDataChanged.bind(this))
  14         .addObserver(this, 'state', this.modelStateChanged.bind(this));
  15
  16         $('.htmlview', this.element).html(this.model.get('data'));
  17
  18         this.$menuTemplate = $(render_template('html-view-frag-menu-template', this));
  19
  20         this.modelStateChanged('state', this.model.get('state'));
  21         this.model.load();
  22
  23         this.currentOpen = null;
  24         this.themeBoxes = [];
  25     },
  26
  27     modelDataChanged: function(property, value) {
  28         $('.htmlview', this.element).html(value);
  29         this.updatePrintLink();
  30         var self = this;
  31
  32         /* upgrade editable elements */
  33         $("*[x-editable]").each(function() {
  34             $(this).append( self.$menuTemplate.clone() );
  35         });
  36
  37         var n = 5001;
  38
  39         var doc_base = $('.htmlview .utwor', this.element);
  40
  41         /* mark themes */
  42         $(".theme-ref").each(function() {
  43             var id = $(this).attr('x-theme-class');
  44
  45             var end = $("span.theme-end[x-theme-class = " + id+"]");
  46             var begin = $("span.theme-begin[x-theme-class = " + id+"]");
  47
  48             var h = $(this).outerHeight();
  49
  50             h = Math.max(h, end.offset().top - begin.offset().top);
  51             $(this).css('height', h);
  52         });
  53     },
  54
  55     updatePrintLink: function() {
  56         var base = this.$printLink.attr('ui:baseref');
  57         this.$printLink.attr('href', base + "?user="+this.model.document.get('user')+"&revision=" + this.model.get('revision'));
  58     },
  59
  60     modelStateChanged: function(property, value)
  61     {
  62         var self = $(this);
  63
  64         if (value == 'synced' || value == 'dirty') {
  65             this.unfreeze();
  66         } else if (value == 'unsynced') {
  67             if(this.currentOpen) this.closeWithoutSave(this.currentOpen);
  68             this.freeze('Niezsynchronizowany...');
  69         } else if (value == 'loading') {
  70             this.freeze('Ładowanie...');
  71         } else if (value == 'saving') {
  72             this.freeze('Zapisywanie...');
  73         } else if (value == 'error') {
  74             this.freeze(this.model.get('error'));
  75             $('.xml-editor-ref', this.overlay).click(
  76             function(event) {
  77                 console.log("Sending scroll rq.", this);
  78                 try {
  79                     var href = $(this).attr('href').split('-');
  80                     var line = parseInt(href[1]);
  81                     var column = parseInt(href[2]);
  82
  83                     $(document).trigger('xml-scroll-request', {line:line, column:column});
  84                 } catch(e) {
  85                     console.log(e);
  86                 }
  87
  88                 return false;
  89             });
  90         }
  91     },
  92
  93     render: function() {
  94         this.element.unbind('click');
  95
  96         if(this.$printLink) this.$printLink.unbind();
  97         this._super();
  98         this.$printLink = $('.html-print-link', this.element);
  99         this.updatePrintLink();
 100
 101         this.element.bind('click', this.itemClicked.bind(this));
 102         // this.element.bind('mouseover', this.itemHover.bind(this));
 103     },
 104
 105     reload: function() {
 106         this.model.load(true);
 107     },
 108
 109     dispose: function() {
 110         this.model.removeObserver(this);
 111         this._super();
 112     },
 113
 114     itemClicked: function(event)
 115     {
 116         var self = this;
 117
 118         console.log('click:', event, event.ctrlKey, event.target);
 119         var $e = $(event.target);
 120
 121         if($e.hasClass('edit-button'))
 122             this.openForEdit( this.editableFor($e) );
 123
 124         if($e.hasClass('accept-button'))
 125             this.closeWithSave( this.editableFor($e) );
 126
 127         if($e.hasClass('reject-button'))
 128             this.closeWithoutSave( this.editableFor($e) );
 129     },
 130
 131     closeWithSave: function($e) {
 132         var $edit = $e.data('edit-overlay');
 133         var newText = $('textarea', $edit).val();
 134
 135         this.model.putXMLPart($e, newText, function($e, html) {
 136             this.renderPart($e, html);
 137             $edit.remove();
 138             $e.removeAttr('x-open');
 139         }.bind(this) );
 140         this.currentOpen = null;
 141     },
 142
 143     closeWithoutSave: function($e) {
 144         var $edit = $e.data('edit-overlay');
 145         $edit.remove();
 146         $e.removeAttr('x-open');
 147         this.currentOpen = null;
 148     },
 149
 150     renderPart: function($e, html) {
 151             $e.html(html);
 152             $e.append( this.$menuTemplate.clone() );
 153     },
 154
 155     editableFor: function($button)
 156     {
 157         var $e = $button;
 158         var n = 0;
 159
 160         while( ($e[0] != this.element[0]) && !($e.attr('x-editable')) && n < 50)
 161         {
 162             // console.log($e, $e.parent(), this.element);
 163             $e = $e.parent();
 164             n += 1;
 165         }
 166
 167         if(!$e.attr('x-editable'))
 168             throw Exception("Click outside of editable")
 169
 170         return $e;
 171     },
 172
 173     openForEdit: function($origin)
 174     {
 175         if(this.currentOpen && this.currentOpen != $origin) {
 176             this.closeWithSave(this.currentOpen);
 177
 178         }
 179
 180         // start edition on this node
 181         var $overlay = $('<div class="html-editarea"><textarea></textarea></div>');
 182
 183         var x = $origin[0].offsetLeft;
 184         var y = $origin[0].offsetTop;
 185         var w = $origin.outerWidth();
 186         var h = $origin.innerHeight();
 187
 188         $overlay.css({position: 'absolute', height: h, left: x, top: y, width: '95%'});
 189
 190             $origin.offsetParent().append($overlay);
 191             $origin.data('edit-overlay', $overlay);
 192
 193             this.model.getXMLPart($origin, function(path, data) {
 194                 $('textarea', $overlay).val(data);
 195             });
 196
 197             this.currentOpen = $origin;
 198             $origin.attr('x-open', 'open');
 199
 200
 201         return false;
 202     }
 203
 204 });
 205
 206 // Register view
 207 panels['html'] = HTMLView;