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