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