ebdf90af49e021f7c447923bab920caed5a2d8cf
[redakcja.git] / 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;