a6d519c9fa3483674dfb1f12789062bf97ca012a
[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
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;