app/assets/javascripts/views/speech_balloons/element.js.coffee

   1 class Pettanr.Views.SpeechBalloon.Element extends Backbone.View\r
   2   tagName: 'div'\r
   3   className: 'pettanr-comic-balloon'\r
   4   \r
   5   initialize: (options) ->\r
   6     @element = options.element\r
   7     @root = options.root\r
   8     @spot = options.spot\r
   9   \r
  10   add_element: (element) ->\r
  11     switch element.item_name()\r
  12       when 'balloon'\r
  13         @balloon = element\r
  14         @add_balloon()\r
  15         view = @balloon_view\r
  16       when 'speech'\r
  17         @speech = element\r
  18         @add_speech()\r
  19         view = @speech_view\r
  20     view\r
  21   \r
  22   add_balloon: () ->\r
  23     @set_style()\r
  24     klass = @balloon_class()\r
  25     @balloon_view = new klass({\r
  26       parent: this, \r
  27       element: @balloon, \r
  28       root: @root,\r
  29       spot: @spot\r
  30     })\r
  31     @balloon_view\r
  32   \r
  33   add_speech: () ->\r
  34     klass = @speech_class()\r
  35     @speech_view = new klass({\r
  36       parent: this, \r
  37       element: @speech, \r
  38       root: @root,\r
  39       spot: @spot\r
  40     })\r
  41     @speech_view\r
  42   \r
  43   render: () ->\r
  44     @add_element(@element.get('balloon'))\r
  45     @add_element(@element.get('speech'))\r
  46     this.$el.html('')\r
  47     this.$el.append(@balloon_view.clear().el)\r
  48     this.$el.append(@speech_view.render().el)\r
  49     this\r
  50   \r
  51   set_style: () ->\r
  52     attr = {style: Pettanr.to_style(@style())}\r
  53     this.$el.attr(attr)\r
  54   \r
  55   style: () ->\r
  56     {\r
  57       width: Pettanr.to_s(@balloon.get('width')) + 'px', \r
  58       height: Pettanr.to_s(@balloon.get('height')) + 'px',\r
  59       top: Pettanr.to_s(@balloon.get('y')) + 'px',\r
  60       left: Pettanr.to_s(@balloon.get('x')) + 'px',\r
  61       'z-index': @element.get('z')\r
  62     }\r
  63   \r
  64   balloon_class: () ->\r
  65     Pettanr.Views.Balloon.Element\r
  66   \r
  67   speech_class: () ->\r
  68     Pettanr.Views.Speech.Element\r
  69   \r
  70 class Pettanr.Views.SpeechBalloon.Element.Edit extends Pettanr.Views.SpeechBalloon.Element\r
  71   \r
  72   initialize: (options) ->\r
  73     super(options)\r
  74     @listenTo(@element, 'sort', @set_style)\r
  75     @listenTo(@element, 'active', @active)\r
  76     @listenTo(@element, 'inactive', @inactive)\r
  77   \r
  78   render: () ->\r
  79     this.$el.html('')\r
  80     this\r
  81   \r
  82   set_style: () ->\r
  83     super()\r
  84   \r
  85   add_balloon: () ->\r
  86     super()\r
  87     this.$el.append(@balloon_view.clear().el)\r
  88     @listenTo(@balloon, 'input:r', @input_r)\r
  89     @listenTo(@balloon, 'input:x', @set_style)\r
  90     @listenTo(@balloon, 'input:y', @set_style)\r
  91     @listenTo(@balloon, 'input:width', @set_style)\r
  92     @listenTo(@balloon, 'input:height', @set_style)\r
  93     bln = @balloon\r
  94     this.$el.draggable {\r
  95       stop: (event, ui) ->\r
  96         left = Math.floor($(@).position().left)\r
  97         top = Math.floor($(@).position().top)\r
  98         bln.set({x: left, y: top}, {silent: true})\r
  99         bln.trigger('move')\r
 100     }\r
 101   \r
 102   add_speech: () ->\r
 103     super()\r
 104     this.$el.append(@speech_view.render().el)\r
 105   \r
 106   # listen from speech\r
 107   input_r: () ->\r
 108     @trigger('input:r')\r
 109   \r
 110   active: () ->\r
 111     $('.ui-resizable-handle', this.el).map ->\r
 112       $(@).css('display', 'block')\r
 113   \r
 114   inactive: () ->\r
 115     $('.ui-resizable-handle', this.el).map ->\r
 116       $(@).css('display', 'none')\r
 117   \r
 118   element_class: (element) ->\r
 119     Pettanr.Views[element.singular()].Element.Edit\r
 120   \r
 121   balloon_class: () ->\r
 122     Pettanr.Views.Balloon.Element.Edit\r
 123   \r
 124   speech_class: () ->\r
 125     Pettanr.Views.Speech.Element.Edit\r
 126   \r