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