fix: element edit

[pettanr/pettanr.git] / app / assets / javascripts / views / balloons / element.js.coffee

diff --git a/app/assets/javascripts/views/balloons/element.js.coffee b/app/assets/javascripts/views/balloons/element.js.coffee
index dd14345..89cc58d 100644 (file)
--- a/app/assets/javascripts/views/balloons/element.js.coffee
+++ b/app/assets/javascripts/views/balloons/element.js.coffee
@@ -6,15 +6,103 @@ class Pettanr.Views.Balloon.Element extends Backbone.View
     @element = options.element\r
     @root = options.root\r
     @spot = options.spot\r
+    @speech_balloon = options.parent\r
+  \r
+  clear: () ->\r
+    this\r
   \r
   render: () ->\r
-    _this = this\r
-    system_picture = @element.system_picture()\r
-    system_picture.fetch({cache: true}).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
+    retriever = @element.system_picture()\r
+    @listenTo(retriever, 'retrieve', @retrieve_system_picture)\r
+    retriever.retrieve()\r
+  \r
+  retrieve_system_picture: (@system_picture) ->\r
+    @set_style()\r
+  \r
+  set_style: () ->\r
+    attr = {\r
+      src: @system_picture.r_url(), \r
+      alt: @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
+  add_element: (element) ->\r
+    null\r
+  \r
+class Pettanr.Views.Balloon.Element.Edit extends Pettanr.Views.Balloon.Element\r
+  \r
+  initialize: (options) ->\r
+    super(options)\r
+    @listenTo(@element, 'input:system_picture_id', @input_r)\r
+    @listenTo(@element, 'input:width', @resize)\r
+    @listenTo(@element, 'input:height', @resize)\r
+  \r
+  retrieve_system_picture: (@system_picture) ->\r
+    super(@system_picture)\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
+     resize: (event, ui) ->\r
+        resize_div = $(@)\r
+        speech_balloon_div = resize_div.parent()\r
+      handles: 'all',\r
+      autoHide: true\r
+    }\r
     this\r
   \r
+  style: () ->\r
+    {\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
+    @render()\r
+    resize_div = this.$el.parent()\r
+    resize_div.css('z-index', 1)\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