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.currentFocused = null;
  25         this.themeBoxes = [];
  26     },
  27
  28     modelDataChanged: function(property, value) {
  29         $('.htmlview', this.element).html(value);
  30         this.updatePrintLink();
  31         var self = this;
  32
  33         /* upgrade editable elements */
  34         $("*[x-editable]").each(function() {
  35             $(this).append( self.$menuTemplate.clone() );
  36         });
  37
  38         var n = 5001;
  39
  40         var doc_base = $('.htmlview .utwor', this.element);
  41
  42         /* mark themes */
  43         $(".theme-ref").each(function() {
  44             var id = $(this).attr('x-theme-class');
  45
  46             var end = $("span.theme-end[x-theme-class = " + id+"]");
  47             var begin = $("span.theme-begin[x-theme-class = " + id+"]");
  48
  49             var h = $(this).outerHeight();
  50
  51             h = Math.max(h, end.offset().top - begin.offset().top);
  52             $(this).css('height', h);
  53         });
  54     },
  55
  56     updatePrintLink: function() {
  57         var base = this.$printLink.attr('ui:baseref');
  58         this.$printLink.attr('href', base + "?user="+this.model.document.get('user')+"&revision=" + this.model.get('revision'));
  59     },
  60
  61     modelStateChanged: function(property, value)
  62     {
  63         var self = $(this);
  64
  65         if (value == 'synced' || value == 'dirty') {
  66             this.unfreeze();
  67         } else if (value == 'unsynced') {
  68             if(this.currentOpen) this.closeWithoutSave(this.currentOpen);
  69             this.freeze('Niezsynchronizowany...');
  70         } else if (value == 'loading') {
  71             this.freeze('Ładowanie...');
  72         } else if (value == 'saving') {
  73             this.freeze('Zapisywanie...');
  74         } else if (value == 'error') {
  75             this.freeze(this.model.get('error'));
  76             $('.xml-editor-ref', this.overlay).click(
  77             function(event) {
  78                 console.log("Sending scroll rq.", this);
  79                 try {
  80                     var href = $(this).attr('href').split('-');
  81                     var line = parseInt(href[1]);
  82                     var column = parseInt(href[2]);
  83
  84                     $(document).trigger('xml-scroll-request', {line:line, column:column});
  85                 } catch(e) {
  86                     console.log(e);
  87                 }
  88
  89                 return false;
  90             });
  91         }
  92     },
  93
  94     render: function() {
  95         this.element.unbind('click');
  96
  97         if(this.$printLink) this.$printLink.unbind();
  98         this._super();
  99         this.$printLink = $('.html-print-link', this.element);
 100         this.updatePrintLink();
 101
 102         this.element.bind('click', this.itemClicked.bind(this));
 103         // this.element.bind('mouseover', this.itemHover.bind(this));
 104     },
 105
 106     reload: function() {
 107         this.model.load(true);
 108     },
 109
 110     dispose: function() {
 111         this.model.removeObserver(this);
 112         this._super();
 113     },
 114
 115     itemClicked: function(event)
 116     {
 117         var self = this;
 118
 119         console.log('click:', event, event.ctrlKey, event.target);
 120         var $e = $(event.target);
 121
 122         if($e.hasClass('annotation'))
 123         {
 124             var $box = $e.parent();
 125
 126             if(this.currentFocused)
 127             {
 128                 if($box[0] == this.currentFocused[0]) {
 129                     console.log('unfocus of current');
 130                     this.unfocusAnnotation();
 131                     return false;
 132                 }
 133
 134                 console.log('switch unfocus');
 135                 this.unfocusAnnotation();
 136             }
 137
 138             this.focusAnnotation($box);
 139             return false;
 140         }
 141
 142         /*
 143          * Clicking outside of focused area doesn't unfocus by default
 144          *  - this greatly simplifies the whole click check
 145          */
 146
 147         /* other buttons */
 148         if($e.hasClass('edit-button'))
 149             this.openForEdit( this.editableFor($e) );
 150
 151         if($e.hasClass('accept-button'))
 152             this.closeWithSave( this.editableFor($e) );
 153
 154         if($e.hasClass('reject-button'))
 155             this.closeWithoutSave( this.editableFor($e) );
 156     },
 157
 158     unfocusAnnotation: function() {
 159         if(!this.currentFocused)
 160             return false;
 161
 162         if(this.currentOpen
 163           && this.currentOpen.is("*[x-annotation-box]")
 164           && this.currentOpen.parent()[0] == this.currentFocused[0])
 165             return false;
 166
 167         this.currentFocused.removeAttr('x-focused');
 168         this.currentFocused = null;
 169     },
 170
 171     focusAnnotation: function($e) {
 172         this.currentFocused = $e;
 173         $e.attr('x-focused', 'focused');
 174     },
 175
 176     closeWithSave: function($e) {
 177         var $edit = $e.data('edit-overlay');
 178         var newText = $('textarea', $edit).val();
 179
 180         this.model.putXMLPart($e, newText, function($e, html) {
 181             this.renderPart($e, html);
 182             $edit.remove();
 183             $e.removeAttr('x-open');
 184         }.bind(this) );
 185         this.currentOpen = null;
 186     },
 187
 188     closeWithoutSave: function($e) {
 189         var $edit = $e.data('edit-overlay');
 190         $edit.remove();
 191         $e.removeAttr('x-open');
 192         this.currentOpen = null;
 193     },
 194
 195     renderPart: function($e, html) {
 196             $e.html(html);
 197             $e.append( this.$menuTemplate.clone() );
 198     },
 199
 200     editableFor: function($button)
 201     {
 202         var $e = $button;
 203         var n = 0;
 204
 205         while( ($e[0] != this.element[0]) && !($e.attr('x-editable')) && n < 50)
 206         {
 207             // console.log($e, $e.parent(), this.element);
 208             $e = $e.parent();
 209             n += 1;
 210         }
 211
 212         if(!$e.attr('x-editable'))
 213             throw Exception("Click outside of editable")
 214
 215         console.log("Trigger", $button, " yields editable: ", $e);
 216         return $e;
 217     },
 218
 219     openForEdit: function($origin)
 220     {
 221         if(this.currentOpen && this.currentOpen != $origin) {
 222             this.closeWithSave(this.currentOpen);
 223         }
 224
 225         var x = $origin[0].offsetLeft;
 226         var y = $origin[0].offsetTop;
 227         var w = $origin.outerWidth();
 228         var h = $origin.innerHeight();
 229
 230         console.log("Editable:", $origin, " offsetParent:", $origin[0].offsetParent);
 231         console.log("Dimensions: ", x, y, w , h);
 232
 233         // start edition on this node
 234         var $overlay = $('<div class="html-editarea"><textarea></textarea></div>');
 235
 236         $overlay.css({position: 'absolute', height: h, left: x, top: y, width: '95%'});
 237         $($origin[0].offsetParent).append($overlay);
 238         $origin.data('edit-overlay', $overlay);
 239
 240         this.model.getXMLPart($origin, function(path, data) {
 241             $('textarea', $overlay).val(data);
 242         });
 243
 244         this.currentOpen = $origin;
 245         $origin.attr('x-open', 'open');
 246
 247         if($origin.is("*[x-annotation-box]"))
 248         {
 249             var $b =  $origin.parent();
 250             if(this.currentFocused) {
 251                 if($b[0] != this.currentFocused[0])
 252                     this.unfocusAnnotation();
 253             }
 254
 255             this.focusAnnotation($origin);
 256         }
 257         else {
 258             if(this.currentFocused) this.unfocusAnnotation();
 259         }
 260
 261         return false;
 262     }
 263
 264 });
 265
 266 // Register view
 267 panels['html'] = HTMLView;