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

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