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   \r
  10   clear: () ->\r
  11     this\r
  12   \r
  13   render: () ->\r
  14     retriever = @element.picture()\r
  15     @listenTo(retriever, 'retrieve', @retrieve_picture)\r
  16     retriever.retrieve()\r
  17     this\r
  18   \r
  19   retrieve_picture: (@picture) ->\r
  20     img_class = @img_class()\r
  21     @img = new img_class({\r
  22       wrapper: this,\r
  23       element: @element,\r
  24       picture: @picture,\r
  25       spot: @spot\r
  26     })\r
  27     @restyle()\r
  28     this.$el.html(@img.render().el)\r
  29   \r
  30   restyle: () ->\r
  31     attr = {style: Pettanr.to_style(@style())}\r
  32     this.$el.attr(attr)\r
  33   \r
  34   add_element: () ->\r
  35     null\r
  36   \r
  37   style: () ->\r
  38     {\r
  39       'top': Pettanr.to_s(@element.get('y')) + 'px',\r
  40       'left': Pettanr.to_s(@element.get('x')) + 'px',\r
  41       'z-index': @element.get('z'),\r
  42       'position': 'absolute'\r
  43     }\r
  44   \r
  45   element_class: (element) ->\r
  46     Pettanr.Views[element.singular()].Element\r
  47   \r
  48   img_class: () ->\r
  49     Pettanr.Views.PanelPicture.Element.Img\r
  50   \r
  51 class Pettanr.Views.PanelPicture.Element.Img extends Backbone.View\r
  52   tagName: 'img'\r
  53   \r
  54   initialize: (options) ->\r
  55     @wrapper = options.wrapper\r
  56     @element = options.element\r
  57     @picture = options.picture\r
  58     @spot = options.spot\r
  59   \r
  60   clear: () ->\r
  61     this\r
  62   \r
  63   render: () ->\r
  64     this.$el.html('')\r
  65     @restyle()\r
  66     this\r
  67   \r
  68   restyle: () ->\r
  69     this.$el.attr(@attr(@spot))\r
  70   \r
  71   attr: (spot = null, opacity = 20) ->\r
  72     style = {}\r
  73     if spot and spot.constructor == @element.constructor and spot.get('id') != @element.get('id')\r
  74       @element.merge_opacity(style, opacity)\r
  75     {\r
  76       vPicture: @element.get('id'), \r
  77       src: @element.r_url(@picture), \r
  78       width: Pettanr.to_s(Math.abs(@element.get('width'))) + 'px', \r
  79       height: Pettanr.to_s(Math.abs(@element.get('height'))) + 'px', \r
  80       alt: @element.get('caption'), \r
  81       style: Pettanr.to_style(style)\r
  82     }\r
  83   \r
  84 class Pettanr.Views.PanelPicture.Element.Edit extends Pettanr.Views.PanelPicture.Element\r
  85   \r
  86   initialize: (options) ->\r
  87     super(options)\r
  88     @listenTo(@element, 'input:x', @restyle)\r
  89     @listenTo(@element, 'input:y', @restyle)\r
  90     @listenTo(@element, 'sort', @restyle)\r
  91     @listenTo(@element, 'active', @active)\r
  92     @listenTo(@element, 'inactive', @inactive)\r
  93   \r
  94   retrieve_picture: (@picture) ->\r
  95     super(@picture)\r
  96     img = @img\r
  97     wrapper = this\r
  98     this.$el.draggable {\r
  99       stop: (event, ui) ->\r
 100         left = img.$el.parent().position().left + wrapper.$el.position().left\r
 101         top = img.$el.parent().position().top + wrapper.$el.position().top\r
 102         elm.set({x: parseInt(left), y: parseInt(top)}, {silent: true})\r
 103         elm.trigger('move')\r
 104     }\r
 105     elm = @element\r
 106     @img.$el.resizable {\r
 107       stop: (event, ui) ->\r
 108         resize_div = ui.element\r
 109         panel_picture_div = wrapper.$el\r
 110         \r
 111         resize_div.css('top', '0px')\r
 112         resize_div.css('left', '0px')\r
 113         top = panel_picture_div.position().top\r
 114         if ui.originalPosition.top != ui.position.top\r
 115           top += ui.position.top\r
 116           #@element.set({y: Math.floor(top)}, {silent: true})\r
 117           panel_picture_div.css('top', top.toString() + 'px')\r
 118         left = panel_picture_div.position().left\r
 119         if ui.originalPosition.left != ui.position.left\r
 120           left += ui.position.left\r
 121           #@element.set({y: leftp)}, {silent: true})\r
 122           panel_picture_div.css('left', left.toString() + 'px')\r
 123         width = if elm.get('width') < 0\r
 124           -ui.size.width\r
 125         else\r
 126           ui.size.width\r
 127         height = if elm.get('height') < 0\r
 128           -ui.size.height\r
 129         else\r
 130           ui.size.height\r
 131         elm.set({\r
 132           x: Math.floor(left), \r
 133           y: Math.floor(top), \r
 134           width: width, \r
 135           height: height\r
 136         }, {silent: true})\r
 137         elm.trigger('resize')\r
 138       handles: 'all',\r
 139       autoHide: true\r
 140     }\r
 141     this\r
 142   \r
 143   active: () ->\r
 144     $('.ui-resizable-handle', this.el).map ->\r
 145       $(@).css('display', 'block')\r
 146   \r
 147   inactive: () ->\r
 148     $('.ui-resizable-handle', this.el).map ->\r
 149       $(@).css('display', 'none')\r
 150   \r
 151   element_class: (element) ->\r
 152     Pettanr.Views[element.singular()].Element.Edit\r
 153   \r
 154   img_class: () ->\r
 155     Pettanr.Views.PanelPicture.Element.Img.Edit\r
 156   \r
 157 class Pettanr.Views.PanelPicture.Element.Img.Edit extends Pettanr.Views.PanelPicture.Element.Img\r
 158   \r
 159   initialize: (options) ->\r
 160     super(options)\r
 161     @listenTo(@element, 'input:width', @restyle)\r
 162     @listenTo(@element, 'input:height', @restyle)\r
 163   \r
 164   render: () ->\r
 165     super()\r
 166   \r
 167   restyle: () ->\r
 168     super()\r
 169     resize_div = this.$el.parent()\r
 170     width = this.$el.css('width')\r
 171     height = this.$el.css('height')\r
 172     resize_div.width(width)\r
 173     resize_div.height(height)\r
 174   \r