7018b1a6737627bf1ece8d76cba57a2db511bfbe
[redakcja.git] / src / redakcja / static / js / wiki / base.js
1 (function($)
2 {
3     var noop = function() { };
4
5     $.wiki = {
6         perspectives: {},
7         cls: {},
8         state: {
9             "version": 1,
10             "perspectives": {
11                 "ScanGalleryPerspective": {
12                     "show": true,
13                     "page": undefined
14                 },
15                 "CodeMirrorPerspective": {}
16                 /*
17                   "VisualPerspective": {},
18                   "HistoryPerspective": {},
19                   "SummaryPerspective": {}
20                 */
21             }
22         }
23     };
24
25     $.wiki.loadConfig = function() {
26         if(!window.localStorage)
27             return;
28
29         try {
30             var value = window.localStorage.getItem(CurrentDocument.id) || "{}";
31             var config = JSON.parse(value);
32
33             if (config.version == $.wiki.state.version) {
34                 $.wiki.state.perspectives = $.extend($.wiki.state.perspectives, config.perspectives);
35             }
36         } catch(e) {
37             console.log("Failed to load config, using default.");
38         }
39
40         console.log("Loaded:", $.wiki.state, $.wiki.state.version);
41     };
42
43     $(window).bind('unload', function() {
44         if(window.localStorage)
45             window.localStorage.setItem(CurrentDocument.id, JSON.stringify($.wiki.state));
46     })
47
48
49     $.wiki.activePerspective = function() {
50         return this.perspectives[$("#tabs li a.active").parent().attr('id')];
51     };
52
53     $.wiki.exitContext = function() {
54         var ap = this.activePerspective();
55         if(ap) ap.onExit();
56         return ap;
57     };
58
59     $.wiki.enterContext = function(ap) {
60         if(ap) ap.onEnter();
61     };
62
63     $.wiki.isDirty = function() {
64         var ap = this.activePerspective();
65         return (!!CurrentDocument && CurrentDocument.has_local_changes) || ap.dirty();
66     };
67
68     $.wiki.newTab = function(doc, title, klass) {
69         var base_id = 'id' + Math.floor(Math.random()* 5000000000);
70         var id = (''+klass)+'_' + base_id;
71         var $tab = $('<li class="nav-item" id="'+id+'" data-ui-related="'+base_id+'" data-ui-jsclass="'+klass+'" ><a href="#" class="nav-link">'
72                      + title + ' <span class="badge badge-danger tabclose">x</span></a></li>');
73         var $view = $('<div class="editor '+klass+'" id="'+base_id+'"> </div>');
74
75         this.perspectives[id] = new $.wiki[klass]({
76             doc: doc,
77             id: id,
78             base_id: base_id,
79         });
80
81         $('#tabs').append($tab);
82         $view.hide().appendTo('#editor');
83         return {
84             tab: $tab[0],
85             view: $view[0],
86         };
87     };
88
89     $.wiki.initTab = function(options) {
90         var klass = $(options.tab).attr('data-ui-jsclass');
91
92         return new $.wiki[klass]({
93             doc: options.doc,
94             id: $(options.tab).attr('id'),
95             callback: function() {
96                 $.wiki.perspectives[this.perspective_id] = this;
97                 if(options.callback)
98                     options.callback.call(this);
99             }
100         });
101     };
102
103     $.wiki.perspectiveForTab = function(tab) { // element or id
104         return this.perspectives[ $(tab).attr('id')];
105     }
106
107     $.wiki.exitTab = function(tab){
108         var self = this;
109         var $tab = $(tab);
110         if (!('.active', $tab)) return;
111         $('.active', $tab).removeClass('active');
112         self.perspectives[$tab.attr('id')].onExit();
113         $('#' + $tab.attr('data-ui-related')).hide();
114     }
115
116     $.wiki.switchToTab = function(tab){
117         var self = this;
118         var $tab = $(tab);
119
120         if($tab.length != 1)
121             $tab = $(DEFAULT_PERSPECTIVE);
122
123         var $old_a = $tab.closest('.tabs').find('.active');
124
125         $old_a.each(function(){
126             var tab = $(this).parent()
127             $(this).removeClass('active');
128             self.perspectives[tab.attr('id')].onExit();
129             $('#' + tab.attr('data-ui-related')).hide();
130         });
131
132         /* show new */
133         $('a', tab).addClass('active');
134         $('#' + $tab.attr('data-ui-related')).show();
135
136         console.log($tab);
137         console.log($.wiki.perspectives);
138
139         $.wiki.perspectives[$tab.attr('id')].onEnter();
140     };
141
142     /*
143      * Basic perspective.
144      */
145     $.wiki.Perspective = class Perspective {
146         constructor(options) {
147             if(!options) return;
148
149             this.doc = options.doc;
150             if (options.id) {
151                 this.perspective_id = options.id;
152             }
153             else {
154                 this.perspective_id = '';
155             }
156
157             if(options.callback)
158                 options.callback.call(this);
159         };
160
161         config() {
162             return $.wiki.state.perspectives[this.perspective_id];
163         }
164
165         toString() {
166             return this.perspective_id;
167         }
168
169         dirty() {
170             return true;
171         }
172
173         onEnter() {
174             // called when perspective in initialized
175             if (!this.noupdate_hash_onenter) {
176                 document.location.hash = '#' + this.perspective_id;
177             }
178         }
179
180         onExit () {
181             // called when user switches to another perspective
182             if (!this.noupdate_hash_onenter) {
183                 document.location.hash = '';
184             }
185         }
186
187         destroy() {
188             // pass
189         }
190
191         freezeState() {
192             // free UI state (don't store data here)
193         }
194
195         unfreezeState(frozenState) {
196                 // restore UI state
197         }
198     }
199
200     /*
201      * Stub rendering (used in generating history)
202      */
203     $.wiki.renderStub = function(params)
204     {
205         params = $.extend({ 'filters': {} }, params);
206         var $elem = params.stub.clone();
207         $elem.removeClass('row-stub');
208         params.container.append($elem);
209
210         $('*[data-stub-value]', $elem).each(function() {
211             var $this = $(this);
212             var field = $this.attr('data-stub-value');
213
214             var value = params.data[field];
215
216             if(params.filters[field])
217                 value = params.filters[field](value);
218
219             if(value === null || value === undefined) return;
220
221             if(!$this.attr('data-stub-target')) {
222                 $this.text(value);
223             }
224             else {
225                 $this.attr($this.attr('data-stub-target'), value);
226                 $this.removeAttr('data-stub-target');
227                 $this.removeAttr('data-stub-value');
228             }
229         });
230
231         $elem.show();
232         return $elem;
233     };
234
235     /*
236      * Dialogs
237      */
238     class GenericDialog {
239         constructor(element) {
240             if(!element) return;
241
242             var self = this;
243
244             self.$elem = $(element);
245
246             if(!self.$elem.attr('data-ui-initialized')) {
247                 console.log("Initializing dialog", this);
248                 self.initialize();
249                 self.$elem.attr('data-ui-initialized', true);
250             }
251
252             self.show();
253         }
254
255         /*
256          * Steps to follow when the dialog in first loaded on page.
257          */
258         initialize(){
259             var self = this;
260
261             /* bind buttons */
262             $('button[data-ui-action]', self.$elem).click(function(event) {
263                 event.preventDefault();
264
265                 var action = $(this).attr('data-ui-action');
266                 console.log("Button pressed, action: ", action);
267
268                 try {
269                     self[action + "Action"].call(self);
270                 } catch(e) {
271                     console.log("Action failed:", e);
272                     // always hide on cancel
273                     if(action == 'cancel')
274                         self.hide();
275                 }
276             });
277         }
278
279         /*
280          * Prepare dialog for user. Clear any unnessary data.
281          */
282         show() {
283             $.blockUI({
284                 message: this.$elem,
285                 css: {
286                     'top': '25%',
287                     'left': '25%',
288                     'width': '50%',
289                     'max-height': '75%',
290                     'overflow-y': 'scroll'
291                 }
292             });
293         }
294
295         hide() {
296             $.unblockUI();
297         }
298
299         cancelAction() {
300             this.hide();
301         }
302
303         doneAction() {
304             this.hide();
305         }
306
307         clearForm() {
308             $("*[data-ui-error-for]", this.$elem).text('');
309         }
310
311         reportErrors(errors) {
312             var global = $("*[data-ui-error-for='__all__']", this.$elem);
313             var unassigned = [];
314
315             $("*[data-ui-error-for]", this.$elem).text('');
316             for (var field_name in errors)
317             {
318                 var span = $("*[data-ui-error-for='"+field_name+"']", this.$elem);
319
320                 if(!span.length) {
321                     unassigned.push(field_name);
322                     continue;
323                 }
324
325                 span.text(errors[field_name].join(' '));
326             }
327
328             if(unassigned.length > 0)
329                 global.text( global.text() + 'W formularzu wystąpiły błędy');
330         }
331     }
332
333     $.wiki.cls.GenericDialog = GenericDialog;
334
335     $.wiki.showDialog = function(selector, options) {
336         var elem = $(selector);
337
338         if(elem.length != 1) {
339             console.log("Failed to show dialog:", selector, elem);
340             return false;
341         }
342
343         try {
344             var klass = elem.attr('data-ui-jsclass');
345             return new $.wiki.cls[klass](elem, options);
346         } catch(e) {
347             console.log("Failed to show dialog", selector, klass, e);
348             return false;
349         }
350     };
351
352     window.addEventListener("message", (event) => {
353         event.source.close()
354
355         $.ajax("/editor/editor-user-area/", {
356             success: function(d) {
357                 $("#user-area")[0].innerHTML = d;
358             }
359         });
360     }, false);
361
362     $("#login").click(function (e) {
363         e.preventDefault();
364         let h = 600;
365         let w = 500;
366         let x = window.screenX + (window.innerWidth - w) / 2;
367         let y = window.screenY + (window.innerHeight - h) / 2;
368         window.open(
369             "/accounts/login/?next=/editor/back",
370             "login-window",
371             "width=" + w + " height=" + h + " top=" + y + " left=" + x
372         );
373     });
374
375 })(jQuery);