try editor event dispatching

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

diff --git a/app/assets/javascripts/views/panel_pictures/element.js.coffee b/app/assets/javascripts/views/panel_pictures/element.js.coffee
index c3e05f4..7ab0fa7 100644 (file)
--- a/app/assets/javascripts/views/panel_pictures/element.js.coffee
+++ b/app/assets/javascripts/views/panel_pictures/element.js.coffee
@@ -6,20 +6,21 @@ class Pettanr.Views.PanelPicture.Element extends Backbone.View
     @element = options.element\r
     @root = options.root\r
     @spot = options.spot\r
+    img_class = @img_class()\r
+    @img = new img_class({\r
+      wrapper: this,\r
+      element: @element,\r
+      spot: @spot\r
+    })\r
+    @element.fetch({cache: false})\r
   \r
   render: () ->\r
-    @attr = {style: Pettanr.to_style(@opt_div_style())}\r
+    @attr = {style: Pettanr.to_style(@style())}\r
     this.$el.attr(@attr)\r
-    @picture = @element.picture()\r
-    _this = this\r
-    @picture.fetch({cache: true}).done ->\r
-      _this.img = new Tag.Img({\r
-        attr: _this.opt_img_tag(_this.spot)\r
-      })\r
-      _this.$el.html(_this.img.render().el)\r
+    this.$el.html(@img.clear().el)\r
     this\r
   \r
-  opt_div_style: () ->\r
+  style: () ->\r
     {\r
       'top': Pettanr.to_s(@element.get('y')) + 'px',\r
       'left': Pettanr.to_s(@element.get('x')) + 'px',\r
@@ -27,7 +28,32 @@ class Pettanr.Views.PanelPicture.Element extends Backbone.View
       'position': 'absolute'\r
     }\r
   \r
-  opt_img_tag: (spot = null, opacity = 20) ->\r
+  element_class: (element) ->\r
+    Pettanr.Views[element.singular()].Element\r
+  \r
+  img_class: () ->\r
+    Pettanr.Views.PanelPicture.Element.Img\r
+  \r
+class Pettanr.Views.PanelPicture.Element.Img extends Backbone.View\r
+  tagName: 'img'\r
+  \r
+  initialize: (options) ->\r
+    @wrapper = options.wrapper\r
+    @element = options.element\r
+    @spot = options.spot\r
+    @picture = @element.picture()\r
+    @listenTo(this, 'ready', @render)\r
+    @picture.fetch({cache: true}).done =>\r
+      @trigger('ready')\r
+  \r
+  clear: () ->\r
+    this\r
+  \r
+  render: () ->\r
+    this.$el.attr(@attr(@spot))\r
+    this\r
+  \r
+  attr: (spot = null, opacity = 20) ->\r
     style = {}\r
     if spot and spot.constructor == @element.constructor and spot.get('id') != @element.get('id')\r
       @element.merge_opacity(style, opacity)\r
@@ -42,3 +68,72 @@ class Pettanr.Views.PanelPicture.Element extends Backbone.View
   \r
 class Pettanr.Views.PanelPicture.Element.Edit extends Pettanr.Views.PanelPicture.Element\r
   \r
+  initialize: (options) ->\r
+    super(options)\r
+    @listenTo(@root, 'input:width', @restyle)\r
+    @listenTo(@root, 'input:height', @restyle)\r
+  \r
+  render: () ->\r
+    super()\r
+    img = @img\r
+    wrapper = this\r
+    elm = @element\r
+    this.$el.draggable {\r
+      stop: (event, ui) ->\r
+        left = img.$el.parent().position().left + wrapper.$el.position().left\r
+        top = img.$el.parent().position().top + wrapper.$el.position().top\r
+        elm.set({x: parseInt(left), y: parseInt(top)}, {silent: true})\r
+        elm.trigger('move')\r
+    }\r
+    this\r
+  \r
+  element_class: (element) ->\r
+    Pettanr.Views[element.singular()].Element.Edit\r
+  \r
+  img_class: () ->\r
+    Pettanr.Views.PanelPicture.Element.Img.Edit\r
+  \r
+class Pettanr.Views.PanelPicture.Element.Img.Edit extends Pettanr.Views.PanelPicture.Element.Img\r
+  \r
+  initialize: (options) ->\r
+    super(options)\r
+  \r
+  render: () ->\r
+    super()\r
+    wrapper = @wrapper\r
+    elm = @element\r
+    this.$el.resizable {\r
+      stop: (event, ui) ->\r
+        resize_div = ui.element\r
+        panel_picture_div = wrapper.$el\r
+        \r
+        resize_div.css('top', '0px')\r
+        resize_div.css('left', '0px')\r
+        top = panel_picture_div.position().top\r
+        if ui.originalPosition.top != ui.position.top\r
+          top += ui.position.top\r
+          #@element.set({y: Math.floor(top)}, {silent: true})\r
+          panel_picture_div.css('top', top.toString() + 'px')\r
+        left = panel_picture_div.position().left\r
+        if ui.originalPosition.left != ui.position.left\r
+          left += ui.position.left\r
+          #@element.set({y: leftp)}, {silent: true})\r
+          panel_picture_div.css('left', left.toString() + 'px')\r
+        width = if elm.get('width') < 0\r
+          -ui.size.width\r
+        else\r
+          ui.size.width\r
+        height = if elm.get('height') < 0\r
+          -ui.size.height\r
+        else\r
+          ui.size.height\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('move')\r
+      handles: 'all',\r
+      autoHide: true\r
+    }\r