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

   1 class Pettanr.Views.GroundPicture.Element extends Backbone.View\r
   2   tagName: 'div'\r
   3   className: 'pettanr-comic-ground-picture'\r
   4   \r
   5   initialize: (options) ->\r
   6     @element = options.element\r
   7     @root = options.root\r
   8     @spot = options.spot\r
   9     @add_element()\r
  10     retriever = @element.picture()\r
  11     @listenTo(retriever, 'retrieve', @retrieve_picture)\r
  12     retriever.retrieve()\r
  13   \r
  14   retrieve_picture: (@picture) ->\r
  15     @restyle()\r
  16   \r
  17   clear: () ->\r
  18     this\r
  19   \r
  20   render: () ->\r
  21     this\r
  22   \r
  23   restyle: () ->\r
  24     s = @style(@spot)\r
  25     _.extend(s, @style_wh())\r
  26     attr = {\r
  27       style: Pettanr.to_style(s)\r
  28     }\r
  29     this.$el.attr(attr)\r
  30   \r
  31   add_element: () ->\r
  32     null\r
  33   \r
  34   style: (spot = null, opacity = 20) ->\r
  35     r = {\r
  36       position: 'absolute', \r
  37       top: '0px', \r
  38       left: '0px',\r
  39       'z-index': @element.get('z'), \r
  40       'background-image': 'url(' + @picture.r_url() + ')', \r
  41       'background-repeat': @element.repeat_text(), \r
  42       'background-position': Pettanr.to_s(@element.get('x')) + 'px ' + Pettanr.to_s(@element.get('y')) + 'px'\r
  43     }\r
  44     r\r
  45   \r
  46   style_wh: () ->\r
  47     {\r
  48       width: Pettanr.to_s(@root.get('width')) + 'px', \r
  49       height: Pettanr.to_s(@root.get('height')) + 'px'\r
  50     }\r
  51   \r
  52 class Pettanr.Views.GroundPicture.Element.Edit extends Pettanr.Views.GroundPicture.Element\r
  53   \r
  54   initialize: (options) ->\r
  55     super(options)\r
  56     @listenTo(@root, 'resize', @restyle)\r
  57     @listenTo(@root, 'input:width', @restyle)\r
  58     @listenTo(@root, 'input:height', @restyle)\r
  59     @listenTo(@element, 'input:repeat', @restyle)\r
  60     @listenTo(@element, 'input:x', @restyle)\r
  61     @listenTo(@element, 'input:y', @restyle)\r
  62     @listenTo(@element, 'active', @active)\r
  63     @listenTo(@element, 'inactive', @inactive)\r
  64   \r
  65   retrieve_picture: (picture) ->\r
  66     @listenTo(@element, 'sort', @restyle)\r
  67     super(picture)\r
  68   \r
  69   active: () ->\r
  70     @root.trigger('active')\r
  71   \r
  72   inactive: () ->\r
  73     @root.trigger('inactive')\r
  74   \r