app/assets/javascripts/views/panel_pictures/element.js.coffee

   1 class Pettanr.Views.PanelPicture.Element extends Backbone.View\r
   2   tagName: 'div'\r
   3   className: 'pettanr-panel-picture-wrapper'\r
   4   \r
   5   initialize: (options) ->\r
   6     @element = options.element\r
   7     @root = options.root\r
   8     @spot = options.spot\r
   9     img_class = @img_class()\r
  10     @img = new img_class({\r
  11       element: @element,\r
  12       spot: @spot,\r
  13       picture: @element.picture()\r
  14     })\r
  15   \r
  16   render: () ->\r
  17     @attr = {style: Pettanr.to_style(@style())}\r
  18     this.$el.attr(@attr)\r
  19     this.$el.html(@img.render().el)\r
  20     this\r
  21   \r
  22   style: () ->\r
  23     {\r
  24       'top': Pettanr.to_s(@element.get('y')) + 'px',\r
  25       'left': Pettanr.to_s(@element.get('x')) + 'px',\r
  26       'z-index': @element.get('z'),\r
  27       'position': 'absolute'\r
  28     }\r
  29   \r
  30   element_class: (element) ->\r
  31     Pettanr.Views[element.singular()].Element\r
  32   \r
  33   img_class: () ->\r
  34     Pettanr.Views.PanelPicture.Element.Img\r
  35   \r
  36 class Pettanr.Views.PanelPicture.Element.Img extends Backbone.View\r
  37   tagName: 'img'\r
  38   \r
  39   initialize: (options) ->\r
  40     @element = options.element\r
  41     @picture = options.picture\r
  42     @spot = options.spot\r
  43     @listenTo(this, 'ready', @render)\r
  44     @picture.fetch({cache: true}).done =>\r
  45       @trigger('ready')\r
  46   \r
  47   render: () ->\r
  48     this.$el.attr(@attr(@spot))\r
  49     this\r
  50   \r
  51   attr: (spot = null, opacity = 20) ->\r
  52     style = {}\r
  53     if spot and spot.constructor == @element.constructor and spot.get('id') != @element.get('id')\r
  54       @element.merge_opacity(style, opacity)\r
  55     {\r
  56       vPicture: @element.get('id'), \r
  57       src: @element.r_url(@picture), \r
  58       width: Pettanr.to_s(Math.abs(@element.get('width'))) + 'px', \r
  59       height: Pettanr.to_s(Math.abs(@element.get('height'))) + 'px', \r
  60       alt: @element.get('caption'), \r
  61       style: Pettanr.to_style(style)\r
  62     }\r
  63   \r
  64 class Pettanr.Views.PanelPicture.Element.Edit extends Pettanr.Views.PanelPicture.Element\r
  65   \r
  66   initialize: (options) ->\r
  67     super(options)\r
  68     @listenTo(@root, 'input:width', @restyle)\r
  69     @listenTo(@root, 'input:height', @restyle)\r
  70   \r
  71   render: () ->\r
  72     super()\r
  73     this.$el.draggable {\r
  74       stop: (event, ui) =>\r
  75         left = @img.$el.parent().position().left + this.$el.position().left\r
  76         top = @img.$el.parent().position().top + this.$el.position().top\r
  77         @element.set({left: parseInt(left), top: parseInt(top)}, {silent: true})\r
  78         @element.trigger('move')\r
  79     }\r
  80     this\r
  81   \r
  82   element_class: (element) ->\r
  83     Pettanr.Views[element.singular()].Element.Edit\r
  84   \r
  85   img_class: () ->\r
  86     Pettanr.Views.PanelPicture.Element.Img.Edit\r
  87   \r
  88 class Pettanr.Views.PanelPicture.Element.Img.Edit extends Pettanr.Views.PanelPicture.Element.Img\r
  89   \r
  90   initialize: (options) ->\r
  91     super(options)\r
  92   \r
  93   render: () ->\r
  94     super()\r
  95     this.$el.resizable {\r
  96       stop: (event, ui) =>\r
  97         resize_div = $(@)\r
  98         panel_picture_div = resize_div.parent()\r
  99         trace = editor.element_tag_id(panel_picture_div)\r
 100         \r
 101         resize_div.css('top', '0px')\r
 102         resize_div.css('left', '0px')\r
 103         if ui.originalPosition.top != ui.position.top\r
 104           top = panel_picture_div.position().top + ui.position.top\r
 105           #@element.set({y: Math.floor(top)}, {silent: true})\r
 106           panel_picture_div.css('top', top.toString() + 'px')\r
 107         if ui.originalPosition.left != ui.position.left\r
 108           left = panel_picture_div.position().left + ui.position.left\r
 109           #@element.set({y: Math.floor(leftp)}, {silent: true})\r
 110           panel_picture_div.css('left', left.toString() + 'px')\r
 111         width = if @element.get('width') < 0\r
 112           -ui.size.width\r
 113         else\r
 114           ui.size.width\r
 115         height = if @element.get('height') < 0\r
 116           -ui.size.height\r
 117         else\r
 118           ui.size.height\r
 119         @element.set({\r
 120           left: parseInt(left), \r
 121           top: parseInt(top), \r
 122           width: width, \r
 123           height: height\r
 124         }, {silent: true})\r
 125         @element.trigger('move')\r
 126       resize: (event, ui) =>\r
 127         resize_div = $(@)\r
 128         panel_picture_div = resize_div.parent()\r
 129         trace = editor.element_tag_id(panel_picture_div)\r
 130       handles: 'all',\r
 131       autoHide: true\r
 132     }\r