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