5af43e6749737b6e9ddece6fd4034d6a95c1c88b
[redakcja.git] / src / redakcja / static / js / wiki / view_properties.js
1 (function($){
2
3     let w = function() {};
4     w = console.log;
5     
6     const elementDefs = {
7         "ilustr": {
8             "attributes": [
9                 {
10                     "name": "src",
11                 },
12                 {
13                     "name": "alt",
14                     "type": "text",
15                 },
16                 {
17                     "name": "szer",
18                     "type": "percent",
19                 },
20                 {
21                     "name": "wyrownanie",
22                     "type": "select",
23                     "options": ["lewo", "srodek", "prawo"],
24                 },
25                 {
26                     "name": "oblew",
27                     "type": "bool",
28                 },
29             ],
30         },
31         "ref": {
32             "attributes": [
33                 {
34                     "name": "href",
35                 },
36             ],
37         }
38     };
39
40     function PropertiesPerspective(options) {
41         let oldCallback = options.callback || function() {};
42         this.vsplitbar = 'WŁAŚCIWOŚCI';
43
44         options.callback = function() {
45             let self = this;
46
47             self.$pane = $("#side-properties");
48             
49             $(document).on('click', '[x-node]', function(e) {
50                 if (!e.redakcja_edited) {
51                     e.redakcja_edited = true;
52                     self.edit(this);
53                 }
54             });
55
56             self.$pane.on('click', '#parents li', function(e) {
57                 self.edit($(this).data('node'));
58             });
59
60             $(document).on('click', '#bubbles .badge', function(e) {
61                 self.edit($(this).data('node'));
62             });
63
64             self.$pane.on('change', '.form-control', function() {
65                 let $input = $(this);
66
67                 let inputval;
68                 if ($input.attr('type') == 'checkbox') {
69                     inputval = $input.is(':checked');
70                 } else {
71                     inputval = $input.val();
72                 }
73                 
74                 if ($input.data("edited")) {
75                     $input.data("edited").text(inputval);
76                     return;
77                 }
78                 
79                 html2text({
80                     element: self.$edited[0],
81                     success: function(xml) {
82                         w(222)
83                         let $xmlelem = $($.parseXML(xml));
84                         w(333, $xmlelem)
85                         w($input.data('property'), $input.val());
86                         $xmlelem.contents().attr($input.data('property'), inputval);
87                         w(444, $xmlelem)
88                         let newxml = (new XMLSerializer()).serializeToString($xmlelem[0]);
89                         w(555, newxml)
90                         xml2html({
91                             xml: newxml,
92                             base: self.doc.getBase(),
93                             success: function(html) {
94                                 let htmlElem = $(html);
95                                 self.$edited.replaceWith(htmlElem);
96                                 self.edit(htmlElem);
97                             }
98                         });
99                     },
100                     error: function(e) {console.log(e);},
101                 });
102                 self.$edited;
103             });
104
105             self.$pane.on('click', '.current-convert', function() {
106                 self.convert($(this).attr('data-to'));
107             });
108             self.$pane.on('click', '#current-delete', function() {
109                 self.delete();
110             });
111             
112             
113             oldCallback.call(this);
114         };
115
116         $.wiki.SidebarPerspective.call(this, options);
117     }
118
119     PropertiesPerspective.prototype = new $.wiki.SidebarPerspective();
120
121     PropertiesPerspective.prototype.edit = function(element) {
122         let self = this;
123
124         let $node = $(element);
125         $("#parents", self.$pane).empty();
126         $("#bubbles").empty();
127
128         let b = $("<div class='badge badge-primary'></div>").text($node.attr('x-node'));
129         b.data('node', element);
130         $("#bubbles").append(b);
131
132         $node.parents('[x-node]').each(function() {
133             let a = $("<li class='breadcrumb-item'>").text($(this).attr('x-node'));
134             a.data('node', this);
135             $("#parents", self.$pane).prepend(a)
136
137             let b = $("<div class='badge badge-info'></div>").text($(this).attr('x-node'));
138             b.data('node', this);
139             $("#bubbles").append(b);
140         })
141
142         // It's a tag.
143         node = $(element).attr('x-node');
144         $("h1", self.$pane).text(node);
145
146         $f = $("#properties-form", self.$pane);
147         $f.empty();
148         self.$edited = $(element);
149
150         let nodeDef = elementDefs[node];
151         if (nodeDef && nodeDef.attributes) {
152             $.each(nodeDef.attributes, function(i, a) {
153                 self.addEditField(a, $(element).attr('data-wlf-' + a.name)); // ...
154             })
155         }
156
157
158         // Only utwor can has matadata now.
159         if (node == 'utwor') {
160             // Let's find all the metadata.
161             $("> [x-node='RDF'] > [x-node='Description'] > [x-node]", $node).each(function() {
162                 $meta = $(this);
163                 self.addEditField(
164                     {"name": $meta.attr('x-node'),},
165                     $meta.text(),
166                     $meta,
167                 );
168             });
169         }
170
171
172
173         // check node type, find relevant tags
174         if ($node[0].nodeName == 'DIV') {
175             $("#current-convert").attr("data-current-type", "div");
176         } else if ($node[0].nodeName == 'EM') {
177             $("#current-convert").attr("data-current-type", "span");
178         }
179     };
180
181
182
183     PropertiesPerspective.prototype.addEditField = function(defn, value, elem) {
184         let self = this;
185         let $form = $("#properties-form", self.$pane);
186
187         let $fg = $("<div class='form-group'>");
188         $("<label/>").attr("for", "property-" + defn.name).text(defn.name).appendTo($fg);
189         let $input;
190         switch (defn.type) {
191         case 'text':
192             $input = $("<textarea>");
193             break;
194         case 'select':
195             $input = $("<select>");
196             $.each(defn.options, function(i, e) {
197                 $("<option>").text(e).appendTo($input);
198             });
199             break;
200         case 'bool':
201             $input = $("<input type='checkbox'>");
202             break;
203         default:
204             $input = $("<input>");
205         }
206
207         $input.addClass("form-control").attr("id", "property-" + defn.name).data("property", defn.name);
208         if ($input.attr('type') == 'checkbox') {
209             $input.prop('checked', value == 'true');
210         } else {
211             $input.val(value);
212         }
213         
214         if (elem) {
215             $input.data("edited", elem);
216         }
217         $input.appendTo($fg);
218
219         $fg.appendTo($form);
220     }
221
222     PropertiesPerspective.prototype.convert = function(newtag) {
223         this.$edited.attr('x-node', newtag);
224         // TODO: take care of attributes?
225     }
226
227     PropertiesPerspective.prototype.delete = function(newtag) {
228         p = this.$edited.parent();
229         this.$edited.remove();
230         this.edit(p);
231     }
232
233     $.wiki.PropertiesPerspective = PropertiesPerspective;
234
235 })(jQuery);
236