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