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