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