204a4dec286652e6f33350450d32c929018e686f
[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         $("#parents", self.$pane).empty();
175         $("#bubbles").empty();
176
177         $f = $("#properties-form", self.$pane);
178         $f.empty();
179
180         if (element === null) {
181             self.$edited = null;
182             return;
183         }
184
185         let $node = $(element);
186         let b = $("<div class='badge badge-primary'></div>").text($node.attr('x-node'));
187         b.data('node', element);
188         $("#bubbles").append(b);
189
190         $node.parents('[x-node]').each(function() {
191             let a = $("<li class='breadcrumb-item'>").text($(this).attr('x-node'));
192             a.data('node', this);
193             $("#parents", self.$pane).prepend(a)
194
195             let b = $("<div class='badge badge-info'></div>").text($(this).attr('x-node'));
196             b.data('node', this);
197             $("#bubbles").append(b);
198         })
199
200         // It's a tag.
201         node = $(element).attr('x-node');
202         $("h1", self.$pane).text(node);
203
204         self.$edited = $(element);
205
206         let nodeDef = elementDefs[node];
207         if (nodeDef && nodeDef.attributes) {
208             $.each(nodeDef.attributes, function(i, a) {
209                 self.addEditField(a, $(element).attr('x-a-wl-' + a.name)); // ...
210             })
211         }
212
213         // Only utwor can has matadata now.
214         if (node == 'utwor') {
215             $('<hr>').appendTo($("#properties-form", self.$pane))
216             META_FIELDS.forEach(function(field) {
217                 let $fg = $("<div class='form-group'>");
218                 $("<label/>").text(field.name).appendTo($fg);
219
220                 // if multiple?
221                 $("<button class='meta-add float-right btn btn-primary'>+</button>").appendTo($fg);
222
223                 let match = field.uri.match(/({(.*)})?(.*)/);
224                 ns = match[2];
225                 tag = match[3];
226
227                 let cont = $('<div class="c">');
228
229                 $fg.data('ns', ns);
230                 $fg.data('tag', tag);
231                 $fg.data('field', field);
232                 cont.appendTo($fg);
233
234                 self.displayMetaProperty($fg);
235
236                 $fg.appendTo( $("#properties-form", self.$pane));
237             });
238         }
239
240         // check node type, find relevant tags
241         if ($node[0].nodeName == 'DIV') {
242             $("#current-convert").attr("data-current-type", "div");
243         } else if ($node[0].nodeName == 'EM') {
244             $("#current-convert").attr("data-current-type", "span");
245         }
246     };
247
248     PropertiesPerspective.prototype.addMetaInput = function(cont, field, element) {
249         let self = this;
250
251         let ig = $('<div class="input-group">');
252         //ig.data('edited', element);
253         ig.appendTo(cont);
254
255         if (field.value_type.hasLanguage) {
256             let pp = $("<div class='input-group-prepend'>");
257             let lang_input = $("<input class='form-control' size='1' class='lang'>");
258             lang_input.data('edited', $(element));
259             lang_input.data('edited-attr', 'x-a-xml-lang');
260             lang_input.val(
261                 $(element).attr('x-a-xml-lang')
262             );
263             lang_input.appendTo(pp);
264             pp.appendTo(ig);
265         }
266
267         let $aninput;
268         if (field.value_type.widget == 'select') {
269             $aninput = $("<select class='form-control'>");
270             $.each(field.value_type.options, function() {
271                 $("<option>").text(this).appendTo($aninput);
272             })
273         } else {
274             $aninput = $("<input class='form-control'>");
275             if (field.value_type.autocomplete) {
276                 let autoOptions = field.value_type.autocomplete;
277                 $aninput.autocomplete(autoOptions).autocomplete('instance')._renderItem = function(ul, item) {
278                     let t = item.label;
279                     if (item.name) t += '<br><small><strong>' + item.name + '</strong></small>';
280                     if (item.description) t += '<br><small><em>' + item.description + '</em></small>';
281                     return $( "<li>" )
282                         .append( "<div>" + t + "</div>" )
283                         .appendTo( ul );
284                 };
285             }
286         }
287         $aninput.data('edited', $(element))
288         $aninput.val(
289             $(element).text()
290         );
291         $aninput.appendTo(ig);
292
293         let ap = $("<div class='input-group-append'>");
294         ap.appendTo(ig);
295         $("<button class='meta-delete btn btn-outline-secondary'>x</button>").appendTo(ap);
296         
297         // lang
298     };
299     
300
301     PropertiesPerspective.prototype.displayMetaProperty = function($fg) {
302         let self = this;
303         let ns = $fg.data('ns');
304         let tag = $fg.data('tag');
305         let field = $fg.data('field');
306
307         //  clear container
308         $('.c', $fg).empty();
309
310         let selector = "> [x-node='RDF'] > [x-node='Description'] > [x-node='"+tag+"']";
311         if (ns) {
312             selector += "[x-ns='"+ns+"']";
313         }
314         $(selector, self.$edited).each(function() {
315             self.addMetaInput(
316                 $('.c', $fg),
317                 field,
318                 this);
319         });
320
321         count = $('.c > .input-group', $fg).length;
322         if (field.required) {
323             if (!count) {
324                 $('<div class="text-warning">WYMAGANE</div>').appendTo($('.c', $fg));
325             }
326         }
327     };
328     
329
330
331     PropertiesPerspective.prototype.addEditField = function(defn, value, elem) {
332         let self = this;
333         let $form = $("#properties-form", self.$pane);
334
335         let $fg = $("<div class='form-group'>");
336         $("<label/>").attr("for", "property-" + defn.name).text(defn.name).appendTo($fg);
337         let $input;
338         switch (defn.type) {
339         case 'text':
340             $input = $("<textarea>");
341             break;
342         case 'select':
343             $input = $("<select>");
344             $.each(defn.options, function(i, e) {
345                 $("<option>").text(e).appendTo($input);
346             });
347             break;
348         case 'bool':
349             $input = $("<input type='checkbox'>");
350             break;
351         default:
352             $input = $("<input>");
353         }
354
355         $input.addClass("form-control").attr("id", "property-" + defn.name).data("property", defn.name);
356         if ($input.attr('type') == 'checkbox') {
357             $input.prop('checked', value == 'true');
358         } else {
359             $input.val(value);
360         }
361         
362         if (elem) {
363             $input.data("edited", elem);
364         }
365         $input.appendTo($fg);
366
367         $fg.appendTo($form);
368     }
369
370     PropertiesPerspective.prototype.convert = function(newtag) {
371         this.$edited.attr('x-node', newtag);
372         // TODO: take care of attributes?
373     }
374
375     PropertiesPerspective.prototype.delete = function(newtag) {
376         p = this.$edited.parent();
377         this.$edited.remove();
378         this.edit(p);
379     }
380
381     PropertiesPerspective.prototype.onEnter = function(success, failure){
382         var self = this;
383         $.wiki.SidebarPerspective.prototype.onEnter.call(this);
384
385         if ($.wiki.activePerspective() != 'VisualPerspective')
386             $.wiki.switchToTab('#VisualPerspective');
387
388         self.edit($('[x-node="utwor"]')[0]);
389     };
390
391     $.wiki.PropertiesPerspective = PropertiesPerspective;
392
393 })(jQuery);
394