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