Image editor fix: make sure toolbar content breaks properly for long motif and object...
[redakcja.git] / redakcja / static / js / wiki_img / view_editor_motifs.js
1 (function($){
2
3     function MotifsPerspective(options){
4
5         var old_callback = options.callback;
6
7         options.callback = function(){
8             var self = this;
9
10             self.$tag_name = $('#motifs-editor .tag-name');
11             withThemes(function(canonThemes){
12                 self.$tag_name.autocomplete(canonThemes, {
13                     autoFill: true,
14                     multiple: true,
15                     selectFirst: true,
16                     highlight: false
17                 });
18             })
19
20             self.$objects_list = $('#motifs-editor .objects-list');
21
22             self.x1 = null;
23             self.x2 = null;
24             self.y1 = null;
25             self.y2 = null;
26
27             if (!CurrentDocument.readonly) {
28                 self.ias = $('#motifs-editor img.area-selectable').imgAreaSelect({ handles: true, onSelectEnd: self._fillCoords(self), instance: true });
29                 $('#motifs-editor .add').click(self._addObject(self));
30
31                 $('.delete', self.$objects_list).live('click', function() {
32                     $(this).prev().trigger('click');
33                     if (window.confirm("Czy na pewno chcesz usunąć ten motyw?")) {
34                         $(this).prev().remove();
35                         $(this).remove();
36                     }
37                     self._resetSelection();
38                     return false;
39                 });
40             }
41
42             $('.image-object', self.$objects_list).live('click', function(){
43                 $('.active', self.$objects_list).removeClass('active');
44                 $(this).addClass('active');
45                 var coords = $(this).data('coords');
46                 if (coords) {
47                     self.ias.setSelection.apply(self.ias, coords);
48                     self.ias.setOptions({ show: true });
49                 }
50                 else {
51                     self._resetSelection();
52                 }
53             });
54
55             old_callback.call(this);
56         };
57
58         $.wiki.Perspective.call(this, options);
59     };
60
61     MotifsPerspective.prototype = new $.wiki.Perspective();
62
63     MotifsPerspective.prototype.freezeState = function(){
64
65     };
66
67     MotifsPerspective.prototype._resetSelection = function() {
68         var self = this;
69         self.x1 = self.x2 = self.y1 = self.y2 = null;
70         self.ias.setOptions({ hide: true });
71     }
72
73
74     MotifsPerspective.prototype._push = function(name, x1, y1, x2, y2) {
75         var $e = $('<span class="image-object"></span>')
76         $e.text(name);
77         if (x1 !== null)
78             $e.data('coords', [x1, y1, x2, y2]);
79         this.$objects_list.append($e);
80         this.$objects_list.append('<span class="delete">(x) </span>');
81     }
82
83
84     MotifsPerspective.prototype._addObject = function(self) {
85         return function() {
86             outputs = [];
87             chunks = self.$tag_name.val().split(',');
88             for (i in chunks) {
89                 item = chunks[i].trim();
90                 if (item == '')
91                     continue;
92                 outputs.push(item.trim());
93             }
94             output = outputs.join(', ');
95
96             self._push(output, self.x1, self.y1, self.x2, self.y2);
97             self._resetSelection();
98         }
99     }
100
101     MotifsPerspective.prototype._fillCoords = function(self) {
102         return function(img, selection) {
103             $('.active', self.$objects_list).removeClass('active');
104             if (selection.x1 != selection.x2 && selection.y1 != selection.y2) {
105                 self.x1 = selection.x1;
106                 self.x2 = selection.x2;
107                 self.y1 = selection.y1;
108                 self.y2 = selection.y2;
109             }
110             else {
111                 self.x1 = self.x2 = self.y1 = self.y2 = null;
112             }
113         }
114     }
115
116     MotifsPerspective.prototype.onEnter = function(success, failure){
117         var self = this;
118         this.$objects_list.children().remove();
119
120         $.each(this.doc.getImageItems('theme'), function(i, e) {
121             self._push.apply(self, e);
122         });
123
124         if (this.x1 !== null)
125             this.ias.setOptions({enable: true, show: true});
126         else
127             this.ias.setOptions({enable: true});
128
129         $.wiki.Perspective.prototype.onEnter.call(this);
130
131     };
132
133     MotifsPerspective.prototype.onExit = function(success, failure){
134         var self = this;
135         var motifs = [];
136         this.$objects_list.children(".image-object").each(function(i, e) {
137             var args = $(e).data('coords');
138             if (!args)
139                 args = [null, null, null, null];
140             args.unshift($(e).text());
141             motifs.push(args);
142         })
143         self.doc.setImageItems('theme', motifs);
144
145         this.ias.setOptions({disable: true, hide: true});
146
147     };
148
149     $.wiki.MotifsPerspective = MotifsPerspective;
150
151 })(jQuery);