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

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