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