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             $(document).on('click', '[x-node]', function(e) {
  50                 e.stopPropagation();
  51                 self.edit(this);
  52             });
  53
  54             self.$pane.on('click', '#parents li', function(e) {
  55                 self.edit($(this).data('node'));
  56             });
  57
  58             self.$pane.on('change', '.form-control', function() {
  59                 let $input = $(this);
  60
  61                 let inputval;
  62                 if ($input.attr('type') == 'checkbox') {
  63                     inputval = $input.is(':checked');
  64                 } else {
  65                     inputval = $input.val();
  66                 }
  67
  68                 if ($input.data("edited")) {
  69                     $input.data("edited").text(inputval);
  70                     return;
  71                 }
  72
  73                 html2text({
  74                     element: self.$edited[0],
  75                     success: function(xml) {
  76                         w(222)
  77                         let $xmlelem = $($.parseXML(xml));
  78                         w(333, $xmlelem)
  79                         w($input.data('property'), $input.val());
  80                         $xmlelem.contents().attr($input.data('property'), inputval);
  81                         w(444, $xmlelem)
  82                         let newxml = (new XMLSerializer()).serializeToString($xmlelem[0]);
  83                         w(555, newxml)
  84                         xml2html({
  85                             xml: newxml,
  86                             base: self.doc.getBase(),
  87                             success: function(html) {
  88                                 let htmlElem = $(html);
  89                                 self.$edited.replaceWith(htmlElem);
  90                                 self.edit(htmlElem);
  91                             }
  92                         });
  93                     },
  94                     error: function(e) {console.log(e);},
  95                 });
  96                 self.$edited;
  97             });
  98
  99             oldCallback.call(this);
 100         };
 101
 102         $.wiki.SidebarPerspective.call(this, options);
 103     }
 104
 105     PropertiesPerspective.prototype = new $.wiki.SidebarPerspective();
 106
 107     PropertiesPerspective.prototype.edit = function(element) {
 108         let self = this;
 109
 110         let $node = $(element);
 111         $("#parents", self.$pane).empty();
 112         $node.parents('[x-node]').each(function() {
 113             let a = $("<li class='breadcrumb-item'>").text($(this).attr('x-node'));
 114             a.data('node', this);
 115             $("#parents", self.$pane).prepend(a)
 116         })
 117         // It's a tag.
 118         node = $(element).attr('x-node');
 119         $("h1", self.$pane).text(node);
 120
 121         $f = $("#properties-form", self.$pane);
 122         $f.empty();
 123         self.$edited = $(element);
 124
 125         let nodeDef = elementDefs[node];
 126         if (nodeDef && nodeDef.attributes) {
 127             $.each(nodeDef.attributes, function(i, a) {
 128                 self.addEditField(a, $(element).attr('data-wlf-' + a.name)); // ...
 129             })
 130         }
 131
 132
 133         // Only utwor can has matadata now.
 134         if (node == 'utwor') {
 135             // Let's find all the metadata.
 136             $("> .RDF > .Description > [x-node]", $node).each(function() {
 137                 $meta = $(this);
 138                 self.addEditField(
 139                     {"name": $meta.attr('x-node'),},
 140                     $meta.text(),
 141                     $meta,
 142                 );
 143             });
 144         }
 145     };
 146
 147     PropertiesPerspective.prototype.addEditField = function(defn, value, elem) {
 148         let self = this;
 149         let $form = $("#properties-form", self.$pane);
 150
 151         let $fg = $("<div class='form-group'>");
 152         $("<label/>").attr("for", "property-" + defn.name).text(defn.name).appendTo($fg);
 153         let $input;
 154         switch (defn.type) {
 155         case 'text':
 156             $input = $("<textarea>");
 157             break;
 158         case 'select':
 159             $input = $("<select>");
 160             $.each(defn.options, function(i, e) {
 161                 $("<option>").text(e).appendTo($input);
 162             });
 163             break;
 164         case 'bool':
 165             $input = $("<input type='checkbox'>");
 166             break;
 167         default:
 168             $input = $("<input>");
 169         }
 170
 171         $input.addClass("form-control").attr("id", "property-" + defn.name).data("property", defn.name);
 172         if ($input.attr('type') == 'checkbox') {
 173             $input.prop('checked', value == 'true');
 174         } else {
 175             $input.val(value);
 176         }
 177
 178         if (elem) {
 179             $input.data("edited", elem);
 180         }
 181         $input.appendTo($fg);
 182
 183         $fg.appendTo($form);
 184     }
 185
 186     $.wiki.PropertiesPerspective = PropertiesPerspective;
 187
 188 })(jQuery);
 189