51f26d50edf4ad2dda33eb8f100ce440bf81a8c5
[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                     "type": "media",
12                 },
13                 {
14                     "name": "alt",
15                     "type": "text",
16                 },
17                 {
18                     "name": "szer",
19                     "type": "percent",
20                 },
21                 {
22                     "name": "wyrownanie",
23                     "type": "select",
24                     "options": ["lewo", "srodek", "prawo"],
25                 },
26                 {
27                     "name": "oblew",
28                     "type": "bool",
29                 },
30             ],
31         },
32         "ref": {
33             "attributes": [
34                 {
35                     "name": "href",
36                 },
37             ],
38         }
39     };
40
41     class PropertiesPerspective extends $.wiki.SidebarPerspective {
42         vsplitbar = 'WŁAŚCIWOŚCI';
43         $edited = null;
44
45         constructor(options) {
46             super(options);
47                 let self = this;
48
49                 self.$pane = $("#side-properties");
50
51                 $("#simple-editor").on('click', '[x-node]', function(e) {
52                     if (!e.redakcja_edited) {
53                         e.redakcja_edited = true;
54                         self.edit(this);
55                     }
56                 });
57
58                 self.$pane.on('click', '#parents li', function(e) {
59                     self.edit($(this).data('node'));
60                 });
61
62                 $(document).on('click', '#bubbles .badge', function(e) {
63                     self.edit($(this).data('node'));
64                 });
65
66                 self.$pane.on('change', '.form-control', function() {
67                     let $input = $(this);
68
69                     let inputval;
70                     if ($input.attr('type') == 'checkbox') {
71                         inputval = $input.is(':checked');
72                     } else {
73                         inputval = $input.val();
74                     }
75
76                     if ($input.data("edited")) {
77                         if ($input.data("edited-attr")) {
78                             $input.data("edited").attr($input.data("edited-attr"), inputval);
79                         } else {
80                             $input.data("edited").text(inputval);
81                         }
82                         $.wiki.perspectives.VisualPerspective.flush();
83                         return;
84                     }
85
86                     html2text({
87                         element: self.$edited[0],
88                         success: function(xml) {
89                             w(222)
90                             let $xmlelem = $($.parseXML(xml));
91                             w(333, $xmlelem)
92                             w($input.data('property'), $input.val());
93                             $xmlelem.contents().attr($input.data('property'), inputval);
94                             w(444, $xmlelem)
95                             let newxml = (new XMLSerializer()).serializeToString($xmlelem[0]);
96                             w(555, newxml)
97                             xml2html({
98                                 xml: newxml,
99                                 base: self.doc.getBase(),
100                                 success: function(html) {
101                                     let htmlElem = $(html);
102                                     self.$edited.replaceWith(htmlElem);
103                                     self.edit(htmlElem);
104                                     $.wiki.activePerspective().flush();
105                                 }
106                             });
107                         },
108                         error: function(e) {console.log(e);},
109                     });
110                     self.$edited;
111                 });
112
113
114                 self.$pane.on('click', '.meta-add', function() {
115                     // create a metadata item
116                     let $fg = $(this).parent();
117                     let ns = $fg.data('ns');
118                     let tag = $fg.data('tag');
119                     let field = $fg.data('field');
120                     let span = $('<span/>');
121                     span.attr('x-node', tag);
122                     span.attr('x-ns', ns)
123                     if (field.value_type.hasLanguage) {
124                         span.attr('x-a-xml-lang', 'pl');
125                     }
126
127                     let rdf = $("> [x-node='RDF']", self.$edited);
128                     if (!rdf.length) {
129                         rdf = $("<span x-node='RDF' x-ns='http://www.w3.org/1999/02/22-rdf-syntax-ns#'>");
130                         self.$edited.prepend(rdf);
131                         self.$edited.prepend('\n  ');
132
133                     }
134                     let rdfdesc = $("> [x-node='Description']", rdf);
135                     if (!rdfdesc.length) {
136                         rdfdesc = $("<span x-node='Description' x-ns='http://www.w3.org/1999/02/22-rdf-syntax-ns#' x-a-rdf-about='" + self.doc.fullUri + "'>");
137                         rdf.prepend(rdfdesc);
138                         rdf.prepend('\n    ');
139                         rdfdesc.append('\n    ');
140                         rdf.append('\n  ');
141                     }
142                     span.appendTo(rdfdesc);
143                     rdfdesc.append('\n    ');
144
145                     self.displayMetaProperty($fg);
146
147                     return false;
148                 });
149
150                 self.$pane.on('click', '.meta-delete', function() {
151                     let $fg = $(this).closest('.form-group');
152                     let $ig = $(this).closest('.input-group');
153                     $('input', $ig).data('edited').remove();
154                     self.displayMetaProperty($fg);
155                     $.wiki.perspectives.VisualPerspective.flush();
156                     return false;
157                 });
158
159                 $('#media-chooser').on('show.bs.modal', function (event) {
160                     var input = $("input", $(event.relatedTarget).parent());
161                     var modal = $(this);
162                     modal.data('target-input', input);
163                     var imglist = modal.find('.modal-body');
164                     imglist.html('');
165
166                     self.doc.refreshImageGallery({
167                         success: function(galleryImages) {
168                             $.each(self.doc.galleryImages, (i, imgItem) => {
169                                 let img = $("<img>").attr("src", imgItem.thumb).attr('title', imgItem.url).data('url', imgItem.url).on('click', function() {
170                                     imglist.find('img').removeClass('active');
171                                     $(this).addClass('active');
172                                 });
173                                 imglist.append(img);
174                             });
175                         }
176                     });
177                 })
178                 $('#media-chooser .ctrl-ok').on('click', function (event) {
179                     $('#media-chooser').data('target-input')
180                         .val(
181                             (new URL($('#media-chooser .active').data('url'), document.baseURI)).href
182                         ).trigger('change');
183                     $('#media-chooser').modal('hide');
184                 });
185
186             /* Meta chooser */
187             $('#meta-chooser').on('show.bs.modal', function (event) {
188                 let input = $("input", $(event.relatedTarget).closest('.input-group'));
189                 let $fg = $(event.relatedTarget).closest('.form-group');
190                 let field = $fg.data('field');
191                 let modal = $(this);
192                 modal.data('target-input', input);
193                 let body = modal.find('.modal-body');
194                 body.html('');
195
196                 let add_options = function(cnt, options, value) {
197                     $.each(options, (i, item) => {
198                         let elem = $('<div class="form-check"><label class="form-check-label"><input class="form-check-input" type="radio" name="metachoose"><div class="value"></div><div class="name"></div><div class="description"></div></label></div>');
199                         if (!item.usable) {
200                             $('input', elem).remove();
201                         }
202                         if (item.hidden) {
203                             $('input', elem).prop('disabled', 'disabled');
204                         }
205                         $('input', elem).val(item.value);
206                         $('input', elem).val(item.value);
207                         $('.value', elem).text(item.value);
208                         $('.name', elem).append(item.name);
209                         $('.description', elem).append(item.description);
210                         let valueMatch = value && value.startsWith(item.value);
211                         if (valueMatch) {
212                             $('label', elem).addClass('text-primary')
213                             if (value == item.value) {
214                                 $('input', elem).prop('checked', true);
215                             }
216                         }
217                         if (item.sub) {
218                             let subT = $('<div class="meta-chooser_toggle">+</div>');
219                             let sub = $('<div>');
220                             elem.append(subT);
221                             elem.append(sub);
222                             subT.on('click', () => {
223                                 sub.toggle()
224                             });
225                             add_options(sub, item.sub, valueMatch ? value : null);
226                         }
227                         elem.appendTo(cnt);
228                     });
229                 };
230
231                 $.ajax({
232                     url: field.value_type.chooser.source,
233                     success: function(data) {
234                         add_options(body, data, input.val());
235                     }
236                 });
237             })
238             $('#meta-chooser .ctrl-ok').on('click', function (event) {
239                 $('#meta-chooser').data('target-input').val(
240                     $('#meta-chooser :checked').val()
241                 ).trigger('change');
242                 $('#meta-chooser').modal('hide');
243             });
244
245                 self.$pane.on('click', '.current-convert', function() {
246                     self.convert($(this).attr('data-to'));
247                 });
248                 self.$pane.on('click', '#current-delete', function() {
249                     self.delete();
250                 });
251         }
252
253         edit(element) {
254             let self = this;
255
256             $("#parents", self.$pane).empty();
257             $("#bubbles").empty();
258
259             let $f = $("#properties-form", self.$pane);
260             $f.empty();
261
262             if (element === null) {
263                 self.$edited = null;
264                 $("h1", self.$pane).text('');
265                 return;
266             }
267
268             let $node = $(element);
269             let b = $("<div class='badge badge-primary'></div>").text($node.attr('x-node'));
270             b.data('node', element);
271             $("#bubbles").append(b);
272
273             $node.parents('[x-node]').each(function() {
274                 let a = $("<li class='breadcrumb-item'>").text($(this).attr('x-node'));
275                 a.data('node', this);
276                 $("#parents", self.$pane).prepend(a)
277
278                 let b = $("<div class='badge badge-info'></div>").text($(this).attr('x-node'));
279                 b.data('node', this);
280                 $("#bubbles").append(b);
281             })
282
283             // It's a tag.
284             let node = $(element).attr('x-node');
285             $("h1", self.$pane).text(node);
286
287             self.$edited = $(element);
288
289             let nodeDef = elementDefs[node];
290             if (nodeDef && nodeDef.attributes) {
291                 $.each(nodeDef.attributes, function(i, a) {
292                     self.addEditField(a, $(element).attr('x-a-wl-' + a.name)); // ...
293                 })
294             }
295
296             // Only utwor can has matadata now.
297             if (node == 'utwor') {
298                 $('<hr>').appendTo($("#properties-form", self.$pane))
299                 META_FIELDS.forEach(function(field) {
300                     let $fg = $("<div class='form-group'>");
301                     $("<label/>").text(field.name).appendTo($fg);
302
303                     // if multiple?
304                     $("<button class='meta-add float-right btn btn-primary'>+</button>").appendTo($fg);
305
306                     let match = field.uri.match(/({(.*)})?(.*)/);
307                     let ns = match[2];
308                     let tag = match[3];
309
310                     let cont = $('<div class="c">');
311
312                     $fg.data('ns', ns);
313                     $fg.data('tag', tag);
314                     $fg.data('field', field);
315                     cont.appendTo($fg);
316
317                     self.displayMetaProperty($fg);
318
319                     $fg.appendTo( $("#properties-form", self.$pane));
320                 });
321             }
322
323             // check node type, find relevant tags
324             if ($node[0].nodeName == 'DIV') {
325                 $("#current-convert").attr("data-current-type", "div");
326             } else if ($node[0].nodeName == 'EM') {
327                 $("#current-convert").attr("data-current-type", "span");
328             }
329         }
330
331         addMetaInput(cont, field, element) {
332             let self = this;
333
334             let ig = $('<div class="input-group">');
335             //ig.data('edited', element);
336             ig.appendTo(cont);
337
338             if (field.value_type.hasLanguage) {
339                 let pp = $("<div class='input-group-prepend'>");
340                 let lang_input = $("<input class='form-control' size='1' class='lang'>");
341                 lang_input.data('edited', $(element));
342                 lang_input.data('edited-attr', 'x-a-xml-lang');
343                 lang_input.val(
344                     $(element).attr('x-a-xml-lang')
345                 );
346                 lang_input.appendTo(pp);
347                 pp.appendTo(ig);
348             }
349
350             let $aninput;
351             if (field.value_type.widget == 'select') {
352                 $aninput = $("<select class='form-control'>");
353                 $.each(field.value_type.options, function() {
354                     $("<option>").text(this).appendTo($aninput);
355                 })
356             } else {
357                 $aninput = $("<input class='form-control'>");
358                 if (field.value_type.autocomplete) {
359                     let autoOptions = field.value_type.autocomplete;
360                     $aninput.autocomplete(autoOptions).autocomplete('instance')._renderItem = function(ul, item) {
361                         let t = item.label;
362                         if (item.name) t += '<br><small><strong>' + item.name + '</strong></small>';
363                         if (item.description) t += '<br><small><em>' + item.description + '</em></small>';
364                         return $( "<li>" )
365                             .append( "<div>" + t + "</div>" )
366                             .appendTo( ul );
367                     };
368                 }
369             }
370             $aninput.data('edited', $(element))
371             $aninput.val(
372                 $(element).text()
373             );
374             $aninput.appendTo(ig);
375
376             let ap = $("<div class='input-group-append'>");
377             ap.appendTo(ig);
378
379             if (field.value_type.chooser) {
380                 ap.append($("<button type='button' class='btn btn-outline-secondary' data-toggle='modal' data-target='#meta-chooser'>…</button>"));
381             }
382             $("<button class='meta-delete btn btn-outline-secondary'>x</button>").appendTo(ap);
383
384             // lang
385         }
386
387         displayMetaProperty($fg) {
388             let self = this;
389             let ns = $fg.data('ns');
390             let tag = $fg.data('tag');
391             let field = $fg.data('field');
392
393             //  clear container
394             $('.c', $fg).empty();
395
396             let selector = "> [x-node='RDF'] > [x-node='Description'] > [x-node='"+tag+"']";
397             if (ns) {
398                 selector += "[x-ns='"+ns+"']";
399             }
400             $(selector, self.$edited).each(function() {
401                 self.addMetaInput(
402                     $('.c', $fg),
403                     field,
404                     this);
405             });
406
407             let count = $('.c > .input-group', $fg).length;
408             if (field.required) {
409                 if (!count) {
410                     $('<div class="text-warning">WYMAGANE</div>').appendTo($('.c', $fg));
411                 }
412             }
413         }
414
415         addEditField(defn, value, elem) {
416             let self = this;
417             let $form = $("#properties-form", self.$pane);
418
419             let $fg = $("<div class='form-group'>");
420             $("<label/>").attr("for", "property-" + defn.name).text(defn.name).appendTo($fg);
421             let $input, $inputCnt;
422             switch (defn.type) {
423             case 'text':
424                 $inputCnt =$input = $("<textarea>");
425                 break;
426             case 'select':
427                 $inputCnt = $input = $("<select>");
428                 $.each(defn.options, function(i, e) {
429                     $("<option>").text(e).appendTo($input);
430                 });
431                 break;
432             case 'bool':
433                 $inputCnt = $input = $("<input type='checkbox'>");
434                 break;
435             case 'media':
436                 $inputCnt = $("<div class='media-input input-group'>");
437                 $input = $("<input type='text'>");
438                 $inputCnt.append($input);
439                 $inputCnt.append($("<button type='button' class='ctrl-media-choose btn btn-primary' data-toggle='modal' data-target='#media-chooser'>…</button>"));
440                 break;
441             default:
442                 $inputCnt = $input = $("<input>");
443             }
444
445             $input.addClass("form-control").attr("id", "property-" + defn.name).data("property", defn.name);
446             if ($input.attr('type') == 'checkbox') {
447                 $input.prop('checked', value == 'true');
448             } else {
449                 $input.val(value);
450             }
451
452             if (elem) {
453                 $input.data("edited", elem);
454             }
455             $inputCnt.appendTo($fg);
456
457             $fg.appendTo($form);
458         }
459
460         convert(newtag) {
461             this.$edited.attr('x-node', newtag);
462             // TODO: take care of attributes?
463         }
464
465         delete(newtag) {
466             p = this.$edited.parent();
467             this.$edited.remove();
468             this.edit(p);
469         }
470
471         onEnter(success, failure) {
472             var self = this;
473             super.onEnter();
474
475             if ($.wiki.activePerspective() != 'VisualPerspective')
476                 $.wiki.switchToTab('#VisualPerspective');
477
478             this.enable();
479         }
480
481         enable() {
482             if (this.$edited === null) {
483                 this.edit($('[x-node="utwor"]')[0]);
484             }
485         }
486         disable() {
487             this.edit(null);
488         }
489     }
490     $.wiki.PropertiesPerspective = PropertiesPerspective;
491
492 })(jQuery);