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