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