1fff64fe85baf2ef430b3248c4a4a4ac59c20aa1
[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             $("#simple-editor").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                     if ($input.data("edited-attr")) {
76                         $input.data("edited").attr($input.data("edited-attr"), inputval);
77                     } else {
78                         $input.data("edited").text(inputval);
79                     }
80                     return;
81                 }
82                 
83                 html2text({
84                     element: self.$edited[0],
85                     success: function(xml) {
86                         w(222)
87                         let $xmlelem = $($.parseXML(xml));
88                         w(333, $xmlelem)
89                         w($input.data('property'), $input.val());
90                         $xmlelem.contents().attr($input.data('property'), inputval);
91                         w(444, $xmlelem)
92                         let newxml = (new XMLSerializer()).serializeToString($xmlelem[0]);
93                         w(555, newxml)
94                         xml2html({
95                             xml: newxml,
96                             base: self.doc.getBase(),
97                             success: function(html) {
98                                 let htmlElem = $(html);
99                                 self.$edited.replaceWith(htmlElem);
100                                 self.edit(htmlElem);
101                             }
102                         });
103                     },
104                     error: function(e) {console.log(e);},
105                 });
106                 self.$edited;
107             });
108
109             
110             self.$pane.on('click', '.meta-add', function() {
111                 // create a metadata item
112                 let $fg = $(this).parent();
113                 let ns = $fg.data('ns');
114                 let tag = $fg.data('tag');
115                 let field = $fg.data('field');
116                 let span = $('<span/>');
117                 span.attr('x-node', tag);
118                 span.attr('x-ns', ns)
119                 if (field.value_type.hasLanguage) {
120                     span.attr('x-a-xml-lang', 'pl');
121                 }
122
123                 rdf = $("> [x-node='RDF']", self.$edited);
124                 if (!rdf.length) {
125                     rdf = $("<span x-node='RDF' x-ns='http://www.w3.org/1999/02/22-rdf-syntax-ns#'>");
126                     self.$edited.prepend(rdf); 
127                     self.$edited.prepend('\n  ');
128                    
129                 }
130                 rdfdesc = $("> [x-node='Description']", rdf);
131                 if (!rdfdesc.length) {
132                     rdfdesc = $("<span x-node='Description' x-ns='http://www.w3.org/1999/02/22-rdf-syntax-ns#' x-a-rdf-about='" + self.doc.fullUri + "'>");
133                     rdf.prepend(rdfdesc);
134                     rdf.prepend('\n    ');
135                     rdfdesc.append('\n    ');
136                     rdf.append('\n  ');
137                 }
138                 span.appendTo(rdfdesc);
139                 rdfdesc.append('\n    ');
140
141                 self.displayMetaProperty($fg);
142                 
143                 return false;
144             });
145             
146             self.$pane.on('click', '.meta-delete', function() {
147                 let $fg = $(this).closest('.form-group'); 
148                 $('input', $fg).data('edited').remove();
149                 self.displayMetaProperty($fg);
150                 return false;
151             });
152
153
154             
155             self.$pane.on('click', '.current-convert', function() {
156                 self.convert($(this).attr('data-to'));
157             });
158             self.$pane.on('click', '#current-delete', function() {
159                 self.delete();
160             });
161             
162             
163             oldCallback.call(this);
164         };
165
166         $.wiki.SidebarPerspective.call(this, options);
167     }
168
169     PropertiesPerspective.prototype = new $.wiki.SidebarPerspective();
170
171     PropertiesPerspective.prototype.edit = function(element) {
172         let self = this;
173
174         let $node = $(element);
175         $("#parents", self.$pane).empty();
176         $("#bubbles").empty();
177
178         let b = $("<div class='badge badge-primary'></div>").text($node.attr('x-node'));
179         b.data('node', element);
180         $("#bubbles").append(b);
181
182         $node.parents('[x-node]').each(function() {
183             let a = $("<li class='breadcrumb-item'>").text($(this).attr('x-node'));
184             a.data('node', this);
185             $("#parents", self.$pane).prepend(a)
186
187             let b = $("<div class='badge badge-info'></div>").text($(this).attr('x-node'));
188             b.data('node', this);
189             $("#bubbles").append(b);
190         })
191
192         // It's a tag.
193         node = $(element).attr('x-node');
194         $("h1", self.$pane).text(node);
195
196         $f = $("#properties-form", self.$pane);
197         $f.empty();
198         self.$edited = $(element);
199
200         let nodeDef = elementDefs[node];
201         if (nodeDef && nodeDef.attributes) {
202             $.each(nodeDef.attributes, function(i, a) {
203                 self.addEditField(a, $(element).attr('x-a-wl-' + a.name)); // ...
204             })
205         }
206
207         // Only utwor can has matadata now.
208         if (node == 'utwor') {
209             $('<hr>').appendTo($("#properties-form", self.$pane))
210             META_FIELDS.forEach(function(field) {
211                 let $fg = $("<div class='form-group'>");
212                 $("<label/>").text(field.name).appendTo($fg);
213
214                 // if multiple?
215                 $("<button class='meta-add float-right btn btn-primary'>+</button>").appendTo($fg);
216
217                 let match = field.uri.match(/({(.*)})?(.*)/);
218                 ns = match[2];
219                 tag = match[3];
220
221                 let cont = $('<div class="c">');
222
223                 $fg.data('ns', ns);
224                 $fg.data('tag', tag);
225                 $fg.data('field', field);
226                 cont.appendTo($fg);
227
228                 self.displayMetaProperty($fg);
229
230                 $fg.appendTo( $("#properties-form", self.$pane));
231             });
232         }
233
234         // check node type, find relevant tags
235         if ($node[0].nodeName == 'DIV') {
236             $("#current-convert").attr("data-current-type", "div");
237         } else if ($node[0].nodeName == 'EM') {
238             $("#current-convert").attr("data-current-type", "span");
239         }
240     };
241
242     PropertiesPerspective.prototype.addMetaInput = function(cont, field, element) {
243         let self = this;
244
245         let ig = $('<div class="input-group">');
246         //ig.data('edited', element);
247         ig.appendTo(cont);
248
249         if (field.value_type.hasLanguage) {
250             let pp = $("<div class='input-group-prepend'>");
251             let lang_input = $("<input class='form-control' size='1' class='lang'>");
252             lang_input.data('edited', $(element));
253             lang_input.data('edited-attr', 'x-a-xml-lang');
254             lang_input.val(
255                 $(element).attr('x-a-xml-lang')
256             );
257             lang_input.appendTo(pp);
258             pp.appendTo(ig);
259         }
260
261         let $aninput;
262         if (field.value_type.widget == 'select') {
263             $aninput = $("<select class='form-control'>");
264             $.each(field.value_type.options, function() {
265                 $("<option>").text(this).appendTo($aninput);
266             })
267         } else {
268             $aninput = $("<input class='form-control'>");
269             if (field.value_type.autocomplete) {
270                 $aninput.autocomplete(field.value_type.autocomplete);
271             }
272         }
273         $aninput.data('edited', $(element))
274         $aninput.val(
275             $(element).text()
276         );
277         $aninput.appendTo(ig);
278
279         let ap = $("<div class='input-group-append'>");
280         ap.appendTo(ig);
281         $("<button class='meta-delete btn btn-outline-secondary'>x</button>").appendTo(ap);
282         
283         // lang
284     };
285     
286
287     PropertiesPerspective.prototype.displayMetaProperty = function($fg) {
288         let self = this;
289         let ns = $fg.data('ns');
290         let tag = $fg.data('tag');
291         let field = $fg.data('field');
292
293         //  clear container
294         $('.c', $fg).empty();
295
296         let selector = "> [x-node='RDF'] > [x-node='Description'] > [x-node='"+tag+"']";
297         if (ns) {
298             selector += "[x-ns='"+ns+"']";
299         }
300         $(selector, self.$edited).each(function() {
301             self.addMetaInput(
302                 $('.c', $fg),
303                 field,
304                 this);
305         });
306
307         count = $('.c > .input-group', $fg).length;
308         if (field.required) {
309             if (!count) {
310                 $('<div class="text-warning">WYMAGANE</div>').appendTo($('.c', $fg));
311             }
312         }
313     };
314     
315
316
317     PropertiesPerspective.prototype.addEditField = function(defn, value, elem) {
318         let self = this;
319         let $form = $("#properties-form", self.$pane);
320
321         let $fg = $("<div class='form-group'>");
322         $("<label/>").attr("for", "property-" + defn.name).text(defn.name).appendTo($fg);
323         let $input;
324         switch (defn.type) {
325         case 'text':
326             $input = $("<textarea>");
327             break;
328         case 'select':
329             $input = $("<select>");
330             $.each(defn.options, function(i, e) {
331                 $("<option>").text(e).appendTo($input);
332             });
333             break;
334         case 'bool':
335             $input = $("<input type='checkbox'>");
336             break;
337         default:
338             $input = $("<input>");
339         }
340
341         $input.addClass("form-control").attr("id", "property-" + defn.name).data("property", defn.name);
342         if ($input.attr('type') == 'checkbox') {
343             $input.prop('checked', value == 'true');
344         } else {
345             $input.val(value);
346         }
347         
348         if (elem) {
349             $input.data("edited", elem);
350         }
351         $input.appendTo($fg);
352
353         $fg.appendTo($form);
354     }
355
356     PropertiesPerspective.prototype.convert = function(newtag) {
357         this.$edited.attr('x-node', newtag);
358         // TODO: take care of attributes?
359     }
360
361     PropertiesPerspective.prototype.delete = function(newtag) {
362         p = this.$edited.parent();
363         this.$edited.remove();
364         this.edit(p);
365     }
366
367     $.wiki.PropertiesPerspective = PropertiesPerspective;
368
369 })(jQuery);
370