app/assets/javascripts/views/balloons/element.js.coffee

   1 class Pettanr.Views.Balloon.Element extends Backbone.View\r
   2   tagName: 'img'\r
   3   className: 'pettanr-balloon'\r
   4   \r
   5   initialize: (options) ->\r
   6     @element = options.element\r
   7     @root = options.root\r
   8     @spot = options.spot\r
   9     @speech_balloon = options.parent\r
  10   \r
  11   clear: () ->\r
  12     this\r
  13   \r
  14   render: () ->\r
  15     this.$el.html('')\r
  16     retriever = @element.system_picture()\r
  17     @listenTo(retriever, 'retrieve', @retrieve_system_picture)\r
  18     retriever.retrieve()\r
  19   \r
  20   retrieve_system_picture: (@system_picture) ->\r
  21     @set_style()\r
  22   \r
  23   set_style: () ->\r
  24     attr = {\r
  25       src: @system_picture.r_url(), \r
  26       alt: @element.get('caption'),\r
  27       style: Pettanr.to_style(@style())\r
  28     }\r
  29     this.$el.attr(attr)\r
  30   \r
  31   style: () ->\r
  32     {\r
  33       'width': '100%',\r
  34       'height': '100%',\r
  35       'z-index': 1  # play case\r
  36     }\r
  37   \r
  38   add_element: (element) ->\r
  39     null\r
  40   \r
  41 class Pettanr.Views.Balloon.Element.Edit extends Pettanr.Views.Balloon.Element\r
  42   \r
  43   initialize: (options) ->\r
  44     super(options)\r
  45     @listenTo(@element, 'input:system_picture_id', @input_r)\r
  46     @listenTo(@element, 'input:width', @resize)\r
  47     @listenTo(@element, 'input:height', @resize)\r
  48   \r
  49   retrieve_system_picture: (@system_picture) ->\r
  50     super(@system_picture)\r
  51     sb = @speech_balloon\r
  52     elm = @element\r
  53     this.$el.resizable {\r
  54       stop: (event, ui) ->\r
  55         resize_div = $(@)\r
  56         speech_balloon_div = sb.$el\r
  57         \r
  58         resize_div.css('top', '0px')\r
  59         resize_div.css('left', '0px')\r
  60         resize_div.css('z-index', 1)\r
  61         width = ui.size.width\r
  62         height = ui.size.height\r
  63         top = speech_balloon_div.position().top\r
  64         if ui.originalPosition.top != ui.position.top\r
  65           top += ui.position.top\r
  66           speech_balloon_div.css('top', top.toString() + 'px')\r
  67           speech_balloon_div.css('height', height + 'px')\r
  68         left = speech_balloon_div.position().left\r
  69         if ui.originalPosition.left != ui.position.left\r
  70           left += ui.position.left\r
  71           speech_balloon_div.css('left', left.toString() + 'px')\r
  72           speech_balloon_div.css('width', width + 'px')\r
  73         speech_balloon_div.css('width', width.toString() + 'px')\r
  74         speech_balloon_div.css('height', height.toString() + 'px')\r
  75         elm.set({\r
  76           x: Math.floor(left), \r
  77           y: Math.floor(top), \r
  78           width: width, \r
  79           height: height\r
  80         }, {silent: true})\r
  81         elm.trigger('resize')\r
  82      resize: (event, ui) ->\r
  83         resize_div = $(@)\r
  84         speech_balloon_div = resize_div.parent()\r
  85       handles: 'all',\r
  86       autoHide: true\r
  87     }\r
  88     this\r
  89   \r
  90   style: () ->\r
  91     {\r
  92       width: Pettanr.to_s(@element.get('width')) + 'px', \r
  93       height: Pettanr.to_s(@element.get('height')) + 'px',\r
  94       'z-index': 1  # play case\r
  95     }\r
  96   \r
  97   input_r: () ->\r
  98     @render()\r
  99     resize_div = this.$el.parent()\r
 100     resize_div.css('z-index', 1)\r
 101   \r
 102   resize: () ->\r
 103     resize_div = this.$el.parent()\r
 104     resize_div.css('width', '100%')\r
 105     resize_div.css('height', '100%')\r
 106     this.$el.css('width',  '100%')\r
 107     this.$el.css('height', '100%')\r
 108   \r