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