OSDN Git Service

fix: any
[pettanr/pettanr.git] / app / assets / javascripts / views / panel_pictures / element.js.coffee
index ea1a192..70ec929 100644 (file)
@@ -1,4 +1,4 @@
-class Pettanr.Views.PanelPicture.Element extends Backbone.View\r
+class Pettanr.Views.PanelPicture.Element extends Pettanr.View\r
   tagName: 'div'\r
   className: 'pettanr-panel-picture-wrapper'\r
   \r
@@ -6,19 +6,31 @@ 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
-      element: @element,\r
-      spot: @spot,\r
-      picture: @element.picture()\r
-    })\r
   \r
   render: () ->\r
-    @attr = {style: Pettanr.to_style(@style())}\r
-    this.$el.attr(@attr)\r
-    this.$el.html(@img.render().el)\r
+    @element.get_parent('picture', this, {\r
+      success: (@picture) =>\r
+        img_class = @img_class()\r
+        img = new img_class({\r
+          wrapper: this,\r
+          element: @element,\r
+          picture: @picture,\r
+          spot: @spot\r
+        })\r
+        @listenTo(img, 'http_get', @http_get)\r
+        @restyle()\r
+        this.$el.html(img.render().el)\r
+        @init_picture(img)\r
+    })\r
     this\r
   \r
+  init_picture: (img) ->\r
+    @img = img\r
+  \r
+  restyle: () ->\r
+    attr = {style: Pettanr.to_style(@style())}\r
+    this.$el.attr(attr)\r
+  \r
   style: () ->\r
     {\r
       'top': Pettanr.to_s(@element.get('y')) + 'px',\r
@@ -31,30 +43,59 @@ class Pettanr.Views.PanelPicture.Element extends Backbone.View
     Pettanr.Views[element.singular()].Element\r
   \r
   img_class: () ->\r
-    Pettanr.Views.PanelPicture.Element.Img\r
+    if @element.get('link')\r
+      if @element.get('link').match(/\:\/\//)\r
+        Pettanr.Views.PanelPicture.Element.LinkedImg\r
+      else\r
+        Pettanr.Views.PanelPicture.Element.ButtonImg\r
+    else\r
+      Pettanr.Views.PanelPicture.Element.Img\r
+  \r
+  http_get: (url) ->\r
+    @trigger('http_get', url)\r
+  \r
+class Pettanr.Views.PanelPicture.Element.LinkedImg extends Tag.A_\r
+  \r
+  initialize: (options) ->\r
+    img = new Pettanr.Views.PanelPicture.Element.Img(options)\r
+    super({content: img.render().el, attr: {href: options.element.get('link')}})\r
+  \r
+class Pettanr.Views.PanelPicture.Element.ButtonImg extends Tag.A\r
+  \r
+  initialize: (options) ->\r
+    img = new Pettanr.Views.PanelPicture.Element.Img(options)\r
+    @link = options.element.get('link')\r
+    super({content: img.render().el, attr: {href: '/' + @link}})\r
   \r
-class Pettanr.Views.PanelPicture.Element.Img extends Backbone.View\r
+  click: () ->\r
+    super()\r
+    @trigger('http_get', @link)\r
+    return false\r
+  \r
+class Pettanr.Views.PanelPicture.Element.Img extends Pettanr.View\r
   tagName: 'img'\r
   \r
   initialize: (options) ->\r
+    @wrapper = options.wrapper\r
     @element = options.element\r
     @picture = options.picture\r
     @spot = options.spot\r
-    @listenTo(this, 'ready', @render)\r
-    @picture.fetch({cache: true}).done =>\r
-      @trigger('ready')\r
   \r
   render: () ->\r
-    this.$el.attr(@attr(@spot))\r
+    this.$el.html('')\r
+    @restyle()\r
     this\r
   \r
+  restyle: () ->\r
+    this.$el.attr(@attr(@spot))\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
     {\r
       vPicture: @element.get('id'), \r
-      src: @element.r_url(@picture), \r
+      src: @picture.picture_file(@element.flip()).src(), \r
       width: Pettanr.to_s(Math.abs(@element.get('width'))) + 'px', \r
       height: Pettanr.to_s(Math.abs(@element.get('height'))) + 'px', \r
       alt: @element.get('caption'), \r
@@ -65,68 +106,89 @@ class Pettanr.Views.PanelPicture.Element.Edit extends Pettanr.Views.PanelPicture
   \r
   initialize: (options) ->\r
     super(options)\r
-    @listenTo(@root, 'input:width', @restyle)\r
-    @listenTo(@root, 'input:height', @restyle)\r
   \r
-  render: () ->\r
-    super()\r
+  init_picture: (img) ->\r
+    super(img)\r
+    @listenTo(@element, 'input:x', @restyle)\r
+    @listenTo(@element, 'input:y', @restyle)\r
+    @listenTo(@element, 'sort', @restyle)\r
+    @listenTo(@element, 'active', @active)\r
+    @listenTo(@element, 'inactive', @inactive)\r
+    wrapper = this\r
     this.$el.draggable {\r
-      stop: (event, ui) =>\r
-        left = @img.$el.parent().position().left + this.$el.position().left\r
-        top = @img.$el.parent().position().top + this.$el.position().top\r
-        @element.set({left: parseInt(left), top: parseInt(top)}, {silent: true})\r
-        @element.trigger('move')\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
-    this.$el.resizable {\r
-      stop: (event, ui) =>\r
-        resize_div = $(@)\r
-        panel_picture_div = resize_div.parent()\r
-        trace = editor.element_tag_id(panel_picture_div)\r
+    elm = @element\r
+    img.$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 = panel_picture_div.position().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 = panel_picture_div.position().left + ui.position.left\r
-          #@element.set({y: Math.floor(leftp)}, {silent: true})\r
+          left += ui.position.left\r
+          #@element.set({y: leftp)}, {silent: true})\r
           panel_picture_div.css('left', left.toString() + 'px')\r
-        width = if @element.get('width') < 0\r
+        width = if elm.get('width') < 0\r
           -ui.size.width\r
         else\r
           ui.size.width\r
-        height = if @element.get('height') < 0\r
+        height = if elm.get('height') < 0\r
           -ui.size.height\r
         else\r
           ui.size.height\r
-        @element.set({\r
-          left: parseInt(left), \r
-          top: parseInt(top), \r
+        elm.set({\r
+          x: Math.floor(left), \r
+          y: Math.floor(top), \r
           width: width, \r
           height: height\r
         }, {silent: true})\r
-        @element.trigger('move')\r
-      resize: (event, ui) =>\r
-        resize_div = $(@)\r
-        panel_picture_div = resize_div.parent()\r
-        trace = editor.element_tag_id(panel_picture_div)\r
+        elm.trigger('resize')\r
       handles: 'all',\r
       autoHide: true\r
     }\r
+    this\r
+  \r
+  active: () ->\r
+    $('.ui-resizable-handle', this.el).map ->\r
+      $(@).css('display', 'block')\r
+  \r
+  inactive: () ->\r
+    $('.ui-resizable-handle', this.el).map ->\r
+      $(@).css('display', 'none')\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
+    @listenTo(@element, 'input:width', @restyle)\r
+    @listenTo(@element, 'input:height', @restyle)\r
+  \r
+  render: () ->\r
+    super()\r
+  \r
+  restyle: () ->\r
+    super()\r
+    resize_div = this.$el.parent()\r
+    width = this.$el.css('width')\r
+    height = this.$el.css('height')\r
+    resize_div.width(width)\r
+    resize_div.height(height)\r
+  \r