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