Module: Situated::Element

Includes:
PositionAndSize
Included in:
Element
Defined in:
lib/source/redshift/situated.rb

Instance Method Summary collapse

Methods included from PositionAndSize

#height, #left, #scroll_height, #scroll_left, #scroll_top, #scroll_width, #top, #width

Instance Method Details

#offset_parent ⇒ Object

call-seq:

situated.offset_parent -> element

returns the parent element that provides the visual offset from the top left corner of the viewport

This is typically the closest statically position element or body



160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
 
# File 'lib/source/redshift/situated.rb', line 160

def offset_parent
  element = self
  return nil if element.is_body?
  
  # All engines except trident have a native offsetParent property
  `var e = #{element}.__native__.offsetParent`
  return `$E(#{element}.__native__.offsetParent)` unless trident?
  
  # For trident we walk the DOM until we have a static positioned element or reach the body
  while ((element = `$E(#{element}.__native__.parentNode)`) && !element.is_body?) do 
    return element unless element.styles[:position] == 'static'
  end
  
  return nil
end

#offsets ⇒ Object 



176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
 
# File 'lib/source/redshift/situated.rb', line 176

def offsets
  `var Native = this.__native__`
  if trident?
    `var bound = Native.getBoundingClientRect()`
    `var html  = this.m$document.__native__.documentElement`
    return {
      :x => `bound.left + html.scrollLeft - html.clientLeft`,
      :y => `bound.top  + html.scrollTop  - html.clientTop`
    }
  end

  `var position = {x: 0, y: 0}`
  return {:x => `position.x`, :y => `position.y`} if self.is_body?
  `
  
  element = Native
  while (element && !c$Situated.c$Utilities.m$is_body_bool(element)){
    position.x += element.offsetLeft;
    position.y += element.offsetTop;

    if (#{gecko?}){
      if (!c$Situated.c$Utilities.m$border_box(element)){
        position.x += c$Situated.c$Utilities.m$left_border(element);
        position.y += c$Situated.c$Utilities.m$top_border(element);
      }
      var parent = element.parentNode;
      if (parent && window.styleString(parent, 'overflow') != 'visible'){
        position.x += c$Situated.c$Utilities.m$left_border(parent);
        position.y += c$Situated.c$Utilities.m$top_border(parent);
      }
    } else if (element != this && #{webkit?}){
      position.x += c$Situated.c$Utilities.m$left_border(element);
      position.y += c$Situated.c$Utilities.m$top_border(element);
    }

    element = element.offsetParent;
  }
  
  if (#{gecko?} && !c$Situated.c$Utilities.m$border_box(Native)){
    position.x -= c$Situated.c$Utilities.m$left_border(Native);
    position.y -= c$Situated.c$Utilities.m$top_border(Native);
  }
  `
  return {:x => `position.x`, :y => `position.y`}
end

#position(relative_to = nil) ⇒ Object 



228
229
230
231
232
233
234
235
236
 
# File 'lib/source/redshift/situated.rb', line 228

def position(relative_to = nil)
  # if (isBody(this)) return {x: 0, y: 0};
  offset = self.offsets
  scroll = self.scrolls
  position = {:x => offset[:x] - scroll[:x], :y => offset[:y] - scroll[:y]}
  relative_position = {:x => 0, :y => 0}
  # relativePosition = (relative_to && (relative_to = $(relative_to)) ? relative_to.position : {x: 0, y: 0};
 a = {:x => position[:x] - relative_position[:x], :y => position[:y] - relative_position[:y]}
end

#position_at(x, y) ⇒ Object 



222
223
224
225
226
 
# File 'lib/source/redshift/situated.rb', line 222

def position_at(x,y)
  `var Native = this.__native__`
  h = {:left => x - Situated::Utilities.styleNumber(`Native`, `'margin-left'`), :top => y - Situated::Utilities.styleNumber(`Native`, `'margin-top'`), :position => 'absolute'}
  self.set_styles(h)
end

#scroll ⇒ Object

call-seq:

situated.scroll -> hash

returns a hash containing keys <tt>:x<tt> and <tt>:y<tt> representing the the distance that a situated has been scrolled originating at the top left corner of the situated

For example if a situated has been scrolled 10px left and 5px down situated.scroll #=> => 10, :y => 5



90
91
92
93
 
# File 'lib/source/redshift/situated.rb', line 90

def scroll
  return self.window.scroll if self.is_body? 
  return {:x => `#{self}.__native__.scrollLeft`, :y => `#{self}.__native__.scrollTop`}
end

#scroll_size ⇒ Object

call-seq:

situated.scroll_size -> hash

returns a hash containing keys <tt>:x<tt> and <tt>:y<tt> representing the the size that a situated included potential scrollable area.

For example if a situated has been a visible width of 100px and visible height of 50px and 100 additional pixels of horizontal unseen content that can be scrolled to uncover

situated.scroll_size #=> => 200, :y => 50



115
116
117
118
 
# File 'lib/source/redshift/situated.rb', line 115

def scroll_size
  return self.window.scroll_size if self.is_body?
  return {:x => `#{self}.__native__.scrollWidth`, :y => `#{self}.__native__.scrollHeight`}
end

#scroll_to(x, y) ⇒ Object

call-seq:

situated.scroll_to(x,y) -> situated

Scrolls the situated to the position referenced by the coordinates x and y which are pixel dimensions measured from the top left corner of hte situated

Will scroll to the limit of one dimension if a cooridnate for that dimension is larger than the size element

No scrolling in a direction will occur if scrolling in that direction would have no effect.

Examples:

Given a situated that is 200px wide and 500px long and has only 150px of horizontal dimension visible at any time and only 200px of vertical dimension visible at any time

situated.scroll_to(10,10) will scroll the visible area 10 pixels from the left and 10pixels from the top

scroll.scroll_to(200,0) will scroll the situated to the maximum left scrolling possible and return the situated to the original height position.



143
144
145
146
147
148
149
150
151
 
# File 'lib/source/redshift/situated.rb', line 143

def scroll_to(x,y)
  if self.is_body?
    self.window.scroll_to(x, y)
  else
    `this.__native__.scrollLeft = x`
    `this.__native__.scrollTop  = y`
  end
  return self
end

#scrolls ⇒ Object 



95
96
97
98
99
100
101
102
103
 
# File 'lib/source/redshift/situated.rb', line 95

def scrolls
  `var element = this.__native__, position = {x : 0, y : 0};
  while (element && !c$Situated.c$Utilities.m$is_body_bool(element)){
    position.x += element.scrollLeft;
    position.y += element.scrollTop;
    element = element.parentNode;
  }`
  return {:x => `position.x`, :y => `position.y`}
end

#size ⇒ Object 



77
78
79
80
 
# File 'lib/source/redshift/situated.rb', line 77

def size
  return self.window.size if self.is_body?
  return {:x => `#{self}.__native__.offsetWidth`, :y => `#{self}.__native__.offsetHeight`}
end