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