-class Pettanr.Views.Balloon.Element extends Backbone.View\r
+class Pettanr.Views.Balloon.Element extends Pettanr.View\r
tagName: 'img'\r
className: 'pettanr-balloon'\r
\r
@element = options.element\r
@root = options.root\r
@spot = options.spot\r
+ @speech_balloon = options.parent\r
\r
render: () ->\r
- _this = this\r
- system_picture = @element.system_picture()\r
- system_picture.fetch().done ->\r
- attr = {\r
- src: system_picture.r_url(), \r
- alt: _this.element.get('caption')\r
- }\r
- _this.$el.attr(attr)\r
+ this.$el.html('')\r
+ @set_style()\r
this\r
\r
+ init_picture: () ->\r
+ \r
+ set_style: () ->\r
+ attr = {\r
+ src: @system_picture.picture_file().src(), \r
+ alt: @speech_balloon.element.get('caption'),\r
+ style: Pettanr.to_style(@style())\r
+ }\r
+ this.$el.attr(attr)\r
+ \r
+ style: () ->\r
+ {\r
+ 'width': '100%',\r
+ 'height': '100%',\r
+ 'z-index': 1 # play case\r
+ }\r
+ \r
+class Pettanr.Views.Balloon.Element.Edit extends Pettanr.Views.Balloon.Element\r
+ \r
+ initialize: (options) ->\r
+ super(options)\r
+ \r
+ init_picture: () ->\r
+ @listenTo(@element, 'input:system_picture_id', @input_r)\r
+ @listenTo(@element, 'input:width', @resize)\r
+ @listenTo(@element, 'input:height', @resize)\r
+ sb = @speech_balloon\r
+ elm = @element\r
+ this.$el.resizable {\r
+ stop: (event, ui) ->\r
+ resize_div = $(@)\r
+ speech_balloon_div = sb.$el\r
+ \r
+ resize_div.css('top', '0px')\r
+ resize_div.css('left', '0px')\r
+ # resize_div.css('z-index', 1)\r
+ width = ui.size.width\r
+ height = ui.size.height\r
+ top = speech_balloon_div.position().top\r
+ if ui.originalPosition.top != ui.position.top\r
+ top += ui.position.top\r
+ speech_balloon_div.css('top', top.toString() + 'px')\r
+ speech_balloon_div.css('height', height + 'px')\r
+ left = speech_balloon_div.position().left\r
+ if ui.originalPosition.left != ui.position.left\r
+ left += ui.position.left\r
+ speech_balloon_div.css('left', left.toString() + 'px')\r
+ speech_balloon_div.css('width', width + 'px')\r
+ speech_balloon_div.css('width', width.toString() + 'px')\r
+ speech_balloon_div.css('height', height.toString() + 'px')\r
+ elm.set({\r
+ x: Math.floor(left), \r
+ y: Math.floor(top), \r
+ width: width, \r
+ height: height\r
+ }, {silent: true})\r
+ elm.trigger('resize')\r
+ handles: 'all',\r
+ autoHide: true\r
+ }\r
+ this\r
+ \r
+ style: () ->\r
+ {\r
+ top: '0px',\r
+ left: '0px',\r
+ width: Pettanr.to_s(@element.get('width')) + 'px', \r
+ height: Pettanr.to_s(@element.get('height')) + 'px',\r
+ 'z-index': 1 # play case\r
+ }\r
+ \r
+ input_r: () ->\r
+ @element.get_parent('system_picture', this, {\r
+ success: (@system_picture) =>\r
+ @set_style()\r
+ #resize_div = this.$el.parent()\r
+ #resize_div.css('z-index', 1)\r
+ })\r
+ \r
+ resize: () ->\r
+ resize_div = this.$el.parent()\r
+ resize_div.css('width', '100%')\r
+ resize_div.css('height', '100%')\r
+ this.$el.css('width', '100%')\r
+ this.$el.css('height', '100%')\r
+ \r