X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/5913c54d19b8f6775633176032161d49f9b2f1aa..14f2c24a604e36cad62ba9f6f8d71bf500f8e35a:/src/redakcja/static/js/wiki_img/view_editor_objects.js

diff --git a/src/redakcja/static/js/wiki_img/view_editor_objects.js b/src/redakcja/static/js/wiki_img/view_editor_objects.js
index b0cf2a9d..588aee59 100644
--- a/src/redakcja/static/js/wiki_img/view_editor_objects.js
+++ b/src/redakcja/static/js/wiki_img/view_editor_objects.js
@@ -1,16 +1,30 @@
 (function($){
 
     function ObjectsPerspective(options){
+        if (!options) return;
 
         var old_callback = options.callback;
 
         options.callback = function(){
+            this.$editor = $("#objects-editor");
+            this.object_type_name = "obiekt";
+            this.xml_object_type = 'object';
+            this._init();
+            old_callback.call(this);
+        };
+
+        $.wiki.Perspective.call(this, options);
+    };
+
+    ObjectsPerspective.prototype = new $.wiki.Perspective();
+
+    ObjectsPerspective.prototype._init = function() {
             var self = this;
 
-            self.$tag_name = $('#objects-editor .tag-name');
-            self.$toolbar = $('#objects-editor .toolbar');
-            self.$scrolled = $('#objects-editor .scrolled');
-            self.$objects_list = $('#objects-editor .objects-list');
+            self.$tag_name = $('.tag-name', self.$editor);
+            self.$toolbar = $('.toolbar', self.$editor);
+            self.$scrolled = $('.scrolled', self.$editor);
+            self.$objects_list = $('.objects-list', self.$editor);
 
             self.x1 = null;
             self.x2 = null;
@@ -18,45 +32,67 @@
             self.y2 = null;
 
             if (!CurrentDocument.readonly) {
-                self.ias = $('#objects-editor img.area-selectable').imgAreaSelect({ handles: true, onSelectEnd: self._fillCoords(self), instance: true });
-                $('#objects-editor .add').click(self._addObject(self));
-
-                $('.delete', self.$objects_list).live('click', function() {
-                    $(this).prev().trigger('click');
-                    if (window.confirm("Czy na pewno chcesz usunąć ten obiekt?")) {
-                        $(this).prev().remove();
-                        $(this).remove();
-                        self._refreshLayout();
+                self.ias = $('img.area-selectable', self.$editor).imgAreaSelect({
+                    handles: true,
+                    instance: true,
+                    onSelectEnd: self._fillCoords(self),
+                    onSelectChange: function() {self._cropSelection();},
+                });
+                $('.add', self.$editor).click(self._addObject(self));
+
+                $(self.$objects_list).on('click', '.delete', function() {
+                    $(this).parent().trigger('click');
+                    if (window.confirm("Czy na pewno chcesz usunąć ten " + object_type_name + "?")) {
+                        $(this).parent().remove();
                     }
                     self._resetSelection();
                     return false;
                 });
             }
 
-            $('.image-object', self.$objects_list).live('click', function(){
+            $(self.$objects_list).on('click', '.image-object', function(){
                 $('.active', self.$objects_list).removeClass('active');
                 $(this).addClass('active');
                 var coords = $(this).data('coords');
                 if (coords) {
                     self.ias.setSelection.apply(self.ias, coords);
                     self.ias.setOptions({ show: true });
+                    self._cropSelection();
                 }
                 else {
                     self._resetSelection();
                 }
             });
 
-            old_callback.call(this);
-        };
-
-        $.wiki.Perspective.call(this, options);
-    };
-
-    ObjectsPerspective.prototype = new $.wiki.Perspective();
-
-    ObjectsPerspective.prototype.freezeState = function(){
+            self.$scrolled.scroll(function() {
+                self.ias.update();
+                self._cropSelection();
+            });
+    }
 
-    };
+    ObjectsPerspective.prototype._cropSelection = function() {
+        var mintop = this.$scrolled.offset().top;
+        var maxbottom = mintop + this.$scrolled.height();
+        $(".imgareaselect-outer").each(function(i, e) {
+            var top = parseInt(e.style.top);
+            var height = parseInt(e.style.height);
+            var bottom = top + height;
+            dtop = dheight = 0;
+            if (top < mintop) {
+                dtop += mintop - top;
+                dheight -= dtop;
+            }
+            if (bottom > maxbottom) {
+                dheight -= bottom - maxbottom;
+            }
+            if (dtop) {
+                e.style.top = top + dtop + 'px';
+            }
+            if (dheight) {
+                e.style.height = Math.max(0, height + dheight) + 'px';
+            }
+        });
+    }
 
     ObjectsPerspective.prototype._resetSelection = function() {
         var self = this;
@@ -64,18 +100,12 @@
         self.ias.setOptions({ hide: true });
     }
 
-    ObjectsPerspective.prototype._refreshLayout = function() {
-        this.$scrolled.css({top: this.$toolbar.height()});
-    };
-
     ObjectsPerspective.prototype._push = function(name, x1, y1, x2, y2) {
-        var $e = $('<span class="image-object"></span>')
-        $e.text(name);
+        var $e = $('<span class="image-object btn btn-outline-light mr-1"><span class="name"></span><span class="delete badge badge-danger ml-2">x</span></span>');
+        $(".name", $e).text(name);
         if (x1 !== null)
             $e.data('coords', [x1, y1, x2, y2]);
         this.$objects_list.append($e);
-        this.$objects_list.append('<span class="delete">(x) </span>');
-        this._refreshLayout();
     }
 
 
@@ -115,7 +145,7 @@
         var self = this;
         this.$objects_list.children().remove();
 
-        $.each(this.doc.getImageItems('object'), function(i, e) {
+        $.each(this.doc.getImageItems(self.xml_object_type), function(i, e) {
             self._push.apply(self, e);
         });
 
@@ -135,10 +165,10 @@
             var args = $(e).data('coords');
             if (!args)
                 args = [null, null, null, null];
-            args.unshift($(e).text());
+            args.unshift($(".name", e).text());
             objects.push(args);
         })
-        self.doc.setImageItems('object', objects);
+        self.doc.setImageItems(self.xml_object_type, objects);
 
         this.ias.setOptions({disable: true, hide: true});