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