src/redakcja/static/js/wiki_img/view_editor_objects.js

   1 (function($){
   2
   3     function ObjectsPerspective(options){
   4         if (!options) return;
   5
   6         var old_callback = options.callback;
   7
   8         options.callback = function(){
   9             this.$editor = $("#objects-editor");
  10             this.object_type_name = "obiekt";
  11             this.xml_object_type = 'object';
  12             this._init();
  13             old_callback.call(this);
  14         };
  15
  16         $.wiki.Perspective.call(this, options);
  17     };
  18
  19     ObjectsPerspective.prototype = new $.wiki.Perspective();
  20
  21     ObjectsPerspective.prototype._init = function() {
  22             var self = this;
  23
  24             self.$tag_name = $('.tag-name', self.$editor);
  25             self.$toolbar = $('.toolbar', self.$editor);
  26             self.$scrolled = $('.scrolled', self.$editor);
  27             self.$objects_list = $('.objects-list', self.$editor);
  28
  29             self.x1 = null;
  30             self.x2 = null;
  31             self.y1 = null;
  32             self.y2 = null;
  33
  34             if (!CurrentDocument.readonly) {
  35                 self.ias = $('img.area-selectable', self.$editor).imgAreaSelect({
  36                     handles: true,
  37                     instance: true,
  38                     onSelectEnd: self._fillCoords(self),
  39                     onSelectChange: function() {self._cropSelection();},
  40                 });
  41                 $('.add', self.$editor).click(self._addObject(self));
  42
  43                 $(self.$objects_list).on('click', '.delete', function() {
  44                     $(this).parent().trigger('click');
  45                     if (window.confirm("Czy na pewno chcesz usunąć ten " + object_type_name + "?")) {
  46                         $(this).parent().remove();
  47                     }
  48                     self._resetSelection();
  49                     return false;
  50                 });
  51             }
  52
  53             $(self.$objects_list).on('click', '.image-object', function(){
  54                 $('.active', self.$objects_list).removeClass('active');
  55                 $(this).addClass('active');
  56                 var coords = $(this).data('coords');
  57                 if (coords) {
  58                     self.ias.setSelection.apply(self.ias, coords);
  59                     self.ias.setOptions({ show: true });
  60                     self._cropSelection();
  61                 }
  62                 else {
  63                     self._resetSelection();
  64                 }
  65             });
  66
  67             self.$scrolled.scroll(function() {
  68                 self.ias.update();
  69                 self._cropSelection();
  70             });
  71     }
  72
  73     ObjectsPerspective.prototype._cropSelection = function() {
  74         var mintop = this.$scrolled.offset().top;
  75         var maxbottom = mintop + this.$scrolled.height();
  76         $(".imgareaselect-outer").each(function(i, e) {
  77             var top = parseInt(e.style.top);
  78             var height = parseInt(e.style.height);
  79             var bottom = top + height;
  80             dtop = dheight = 0;
  81             if (top < mintop) {
  82                 dtop += mintop - top;
  83                 dheight -= dtop;
  84             }
  85             if (bottom > maxbottom) {
  86                 dheight -= bottom - maxbottom;
  87             }
  88             if (dtop) {
  89                 e.style.top = top + dtop + 'px';
  90             }
  91             if (dheight) {
  92                 e.style.height = Math.max(0, height + dheight) + 'px';
  93             }
  94         });
  95     }
  96
  97     ObjectsPerspective.prototype._resetSelection = function() {
  98         var self = this;
  99         self.x1 = self.x2 = self.y1 = self.y2 = null;
 100         self.ias.setOptions({ hide: true });
 101     }
 102
 103     ObjectsPerspective.prototype._push = function(name, x1, y1, x2, y2) {
 104         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>');
 105         $(".name", $e).text(name);
 106         if (x1 !== null)
 107             $e.data('coords', [x1, y1, x2, y2]);
 108         this.$objects_list.append($e);
 109     }
 110
 111
 112     ObjectsPerspective.prototype._addObject = function(self) {
 113         return function() {
 114             outputs = [];
 115             chunks = self.$tag_name.val().split(',');
 116             for (i in chunks) {
 117                 item = chunks[i].trim();
 118                 if (item == '')
 119                     continue;
 120                 outputs.push(item.trim());
 121             }
 122             output = outputs.join(', ');
 123
 124             self._push(output, self.x1, self.y1, self.x2, self.y2);
 125             self._resetSelection();
 126         }
 127     }
 128
 129     ObjectsPerspective.prototype._fillCoords = function(self) {
 130         return function(img, selection) {
 131             $('.active', self.$objects_list).removeClass('active');
 132             if (selection.x1 != selection.x2 && selection.y1 != selection.y2) {
 133                 self.x1 = selection.x1;
 134                 self.x2 = selection.x2;
 135                 self.y1 = selection.y1;
 136                 self.y2 = selection.y2;
 137             }
 138             else {
 139                 self.x1 = self.x2 = self.y1 = self.y2 = null;
 140             }
 141         }
 142     }
 143
 144     ObjectsPerspective.prototype.onEnter = function(success, failure){
 145         var self = this;
 146         this.$objects_list.children().remove();
 147
 148         $.each(this.doc.getImageItems(self.xml_object_type), function(i, e) {
 149             self._push.apply(self, e);
 150         });
 151
 152         if (this.x1 !== null)
 153             this.ias.setOptions({enable: true, show: true});
 154         else
 155             this.ias.setOptions({enable: true});
 156
 157         $.wiki.Perspective.prototype.onEnter.call(this);
 158
 159     };
 160
 161     ObjectsPerspective.prototype.onExit = function(success, failure){
 162         var self = this;
 163         var objects = [];
 164         this.$objects_list.children(".image-object").each(function(i, e) {
 165             var args = $(e).data('coords');
 166             if (!args)
 167                 args = [null, null, null, null];
 168             args.unshift($(".name", e).text());
 169             objects.push(args);
 170         })
 171         self.doc.setImageItems(self.xml_object_type, objects);
 172
 173         this.ias.setOptions({disable: true, hide: true});
 174
 175     };
 176
 177     $.wiki.ObjectsPerspective = ObjectsPerspective;
 178
 179 })(jQuery);