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                     $input.data("edited").text(inputval);
  76                     return;
  77                 }
  78
  79                 html2text({
  80                     element: self.$edited[0],
  81                     success: function(xml) {
  82                         w(222)
  83                         let $xmlelem = $($.parseXML(xml));
  84                         w(333, $xmlelem)
  85                         w($input.data('property'), $input.val());
  86                         $xmlelem.contents().attr($input.data('property'), inputval);
  87                         w(444, $xmlelem)
  88                         let newxml = (new XMLSerializer()).serializeToString($xmlelem[0]);
  89                         w(555, newxml)
  90                         xml2html({
  91                             xml: newxml,
  92                             base: self.doc.getBase(),
  93                             success: function(html) {
  94                                 let htmlElem = $(html);
  95                                 self.$edited.replaceWith(htmlElem);
  96                                 self.edit(htmlElem);
  97                             }
  98                         });
  99                     },
 100                     error: function(e) {console.log(e);},
 101                 });
 102                 self.$edited;
 103             });
 104
 105             self.$pane.on('click', '.current-convert', function() {
 106                 self.convert($(this).attr('data-to'));
 107             });
 108             self.$pane.on('click', '#current-delete', function() {
 109                 self.delete();
 110             });
 111
 112
 113             oldCallback.call(this);
 114         };
 115
 116         $.wiki.SidebarPerspective.call(this, options);
 117     }
 118
 119     PropertiesPerspective.prototype = new $.wiki.SidebarPerspective();
 120
 121     PropertiesPerspective.prototype.edit = function(element) {
 122         let self = this;
 123
 124         let $node = $(element);
 125         $("#parents", self.$pane).empty();
 126         $("#bubbles").empty();
 127
 128         let b = $("<div class='badge badge-primary'></div>").text($node.attr('x-node'));
 129         b.data('node', element);
 130         $("#bubbles").append(b);
 131
 132         $node.parents('[x-node]').each(function() {
 133             let a = $("<li class='breadcrumb-item'>").text($(this).attr('x-node'));
 134             a.data('node', this);
 135             $("#parents", self.$pane).prepend(a)
 136
 137             let b = $("<div class='badge badge-info'></div>").text($(this).attr('x-node'));
 138             b.data('node', this);
 139             $("#bubbles").append(b);
 140         })
 141
 142         // It's a tag.
 143         node = $(element).attr('x-node');
 144         $("h1", self.$pane).text(node);
 145
 146         $f = $("#properties-form", self.$pane);
 147         $f.empty();
 148         self.$edited = $(element);
 149
 150         let nodeDef = elementDefs[node];
 151         if (nodeDef && nodeDef.attributes) {
 152             $.each(nodeDef.attributes, function(i, a) {
 153                 self.addEditField(a, $(element).attr('data-wlf-' + a.name)); // ...
 154             })
 155         }
 156
 157
 158         // Only utwor can has matadata now.
 159         if (node == 'utwor') {
 160             // Let's find all the metadata.
 161             $("> [x-node='RDF'] > [x-node='Description'] > [x-node]", $node).each(function() {
 162                 $meta = $(this);
 163                 self.addEditField(
 164                     {"name": $meta.attr('x-node'),},
 165                     $meta.text(),
 166                     $meta,
 167                 );
 168             });
 169         }
 170
 171
 172
 173         // check node type, find relevant tags
 174         if ($node[0].nodeName == 'DIV') {
 175             $("#current-convert").attr("data-current-type", "div");
 176         } else if ($node[0].nodeName == 'EM') {
 177             $("#current-convert").attr("data-current-type", "span");
 178         }
 179     };
 180
 181
 182
 183     PropertiesPerspective.prototype.addEditField = function(defn, value, elem) {
 184         let self = this;
 185         let $form = $("#properties-form", self.$pane);
 186
 187         let $fg = $("<div class='form-group'>");
 188         $("<label/>").attr("for", "property-" + defn.name).text(defn.name).appendTo($fg);
 189         let $input;
 190         switch (defn.type) {
 191         case 'text':
 192             $input = $("<textarea>");
 193             break;
 194         case 'select':
 195             $input = $("<select>");
 196             $.each(defn.options, function(i, e) {
 197                 $("<option>").text(e).appendTo($input);
 198             });
 199             break;
 200         case 'bool':
 201             $input = $("<input type='checkbox'>");
 202             break;
 203         default:
 204             $input = $("<input>");
 205         }
 206
 207         $input.addClass("form-control").attr("id", "property-" + defn.name).data("property", defn.name);
 208         if ($input.attr('type') == 'checkbox') {
 209             $input.prop('checked', value == 'true');
 210         } else {
 211             $input.val(value);
 212         }
 213
 214         if (elem) {
 215             $input.data("edited", elem);
 216         }
 217         $input.appendTo($fg);
 218
 219         $fg.appendTo($form);
 220     }
 221
 222     PropertiesPerspective.prototype.convert = function(newtag) {
 223         this.$edited.attr('x-node', newtag);
 224         // TODO: take care of attributes?
 225     }
 226
 227     PropertiesPerspective.prototype.delete = function(newtag) {
 228         p = this.$edited.parent();
 229         this.$edited.remove();
 230         this.edit(p);
 231     }
 232
 233     $.wiki.PropertiesPerspective = PropertiesPerspective;
 234
 235 })(jQuery);
 236