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