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