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         this.modelStateChanged('state', this.model.get('state'));
  18         this.model.load();
  19     },
  20
  21     modelDataChanged: function(property, value) {
  22         $('.htmlview', this.element).html(value);
  23         this.updatePrintLink();
  24     },
  25
  26     updatePrintLink: function() {
  27         var base = this.$printLink.attr('ui:baseref');
  28         this.$printLink.attr('href', base + "?user="+this.model.document.get('user')+"&revision=" + this.model.get('revision'));
  29     },
  30
  31     modelStateChanged: function(property, value)
  32     {
  33         var self = $(this);
  34
  35         if (value == 'synced' || value == 'dirty') {
  36             this.unfreeze();
  37         } else if (value == 'unsynced') {
  38             this.freeze('Niezsynchronizowany...');
  39         } else if (value == 'loading') {
  40             this.freeze('Ładowanie...');
  41         } else if (value == 'saving') {
  42             this.freeze('Zapisywanie...');
  43         } else if (value == 'error') {
  44             this.freeze(this.model.get('error'));
  45             $('.xml-editor-ref', this.overlay).click(
  46             function(event) {
  47                 console.log("Sending scroll rq.", this);
  48                 try {
  49                     var href = $(this).attr('href').split('-');
  50                     var line = parseInt(href[1]);
  51                     var column = parseInt(href[2]);
  52
  53                     $(document).trigger('xml-scroll-request', {line:line, column:column});
  54                 } catch(e) {
  55                     console.log(e);
  56                 }
  57
  58                 return false;
  59             });
  60         }
  61     },
  62
  63     render: function() {
  64         this.element.unbind('click');
  65
  66         if(this.$printLink) this.$printLink.unbind();
  67         this._super();
  68         this.$printLink = $('.html-print-link', this.element);
  69         this.updatePrintLink();
  70
  71         this.element.bind('click', this.itemClicked.bind(this));
  72     },
  73
  74     reload: function() {
  75         this.model.load(true);
  76     },
  77
  78     dispose: function() {
  79         this.model.removeObserver(this);
  80         this._super();
  81     },
  82
  83     itemClicked: function(event)
  84     {
  85         var self = this;
  86
  87         console.log('click:', event, event.ctrlKey, event.target);
  88         var editableContent = null;
  89         var $e = $(event.target);
  90
  91         var n = 0;
  92
  93         while( ($e[0] != this.element[0]) && !($e.attr('wl2o:editable'))
  94             && n < 50)
  95         {
  96             // console.log($e, $e.parent(), this.element);
  97             $e = $e.parent();
  98             n += 1;
  99         }
 100
 101         if(!$e.attr('wl2o:editable'))
 102             return true;
 103
 104         // start edition on this node
 105
 106
 107         var $overlay = $(
 108         '<div class="html-editarea">\n\
 109             <p class="html-editarea-toolbar">\n\
 110                 <button class="html-editarea-save-button" type="button">Zapisz</button>\n\
 111                 <button class="html-editarea-cancel-button" type="button">Anuluj</button>\n\
 112             </p>\n\
 113             <textarea></textarea>\n\
 114         </div>');
 115
 116         var x = $e[0].offsetLeft;
 117         var y = $e[0].offsetTop;
 118         var w = $e.outerWidth();
 119         var h = $e.innerHeight();
 120         $overlay.css({position: 'absolute', height: h, left: "5%", top: y, width: "90%"});
 121         $e.offsetParent().append($overlay);
 122
 123         // load the original XML content
 124         console.log($e, $e.offsetParent(), $overlay);
 125
 126         $('.html-editarea-cancel-button', $overlay).click(function() {
 127             $overlay.remove();
 128         });
 129
 130         $('.html-editarea-save-button', $overlay).click(function() {
 131             $overlay.remove();
 132
 133             // put the part back to the model
 134             self.model.putXMLPart($e, $('textarea', $overlay).val());
 135         });
 136
 137         $('textarea', $overlay).focus(function() {
 138             $overlay.css('z-index', 3000);
 139         }).blur(function() {
 140             $overlay.css('z-index', 2000);
 141         });
 142
 143         this.model.getXMLPart($e, function(path, data) {
 144             $('textarea', $overlay).val(data);
 145         });
 146
 147         return false;
 148     }
 149
 150 });
 151
 152 // Register view
 153 panels['html'] = HTMLView;