Class: Element

Inherits:
Object
  • Object
show all
Includes:
Enumerable
Defined in:
opal/opal-jquery/element.rb

Instance Attribute Summary (collapse)

Class Method Summary (collapse)

Instance Method Summary (collapse)

Instance Attribute Details

- (Object) selector (readonly)

Returns the value of attribute selector



48
49
50
 
# File 'opal/opal-jquery/element.rb', line 48

def selector
  @selector
end

Class Method Details

+ (Object) [](selector) 



13
14
15
 
# File 'opal/opal-jquery/element.rb', line 13

def self.[](selector)
  `$(#{selector})`
end

+ (Object) expose(*methods) 



37
38
39
40
41
42
43
44
45
46
 
# File 'opal/opal-jquery/element.rb', line 37

def self.expose(*methods)
  %x{
    for (var i = 0, length = methods.length, method; i < length; i++) {
      method = methods[i];
      self._proto['$' + method] = self._proto[method];
    }

    return nil;
  }
end

+ (Object) find(selector) 



9
10
11
 
# File 'opal/opal-jquery/element.rb', line 9

def self.find(selector)
  `$(#{selector})`
end

+ (Object) id(id) 



17
18
19
20
21
22
23
24
25
26
27
 
# File 'opal/opal-jquery/element.rb', line 17

def self.id(id)
  %x{
    var el = document.getElementById(id);

    if (!el) {
      return nil;
    }

    return $(el);
  }
end

+ (Object) new(tag = 'div') 



29
30
31
 
# File 'opal/opal-jquery/element.rb', line 29

def self.new(tag = 'div')
  `$(document.createElement(tag))`
end

+ (Object) parse(str) 



33
34
35
 
# File 'opal/opal-jquery/element.rb', line 33

def self.parse(str)
  `$(str)`
end

Instance Method Details

- (Object) [](name) 



91
92
93
 
# File 'opal/opal-jquery/element.rb', line 91

def [](name)
  `self.attr(name) || ""`
end

- (Object) add_attribute(name) 



95
96
97
 
# File 'opal/opal-jquery/element.rb', line 95

def add_attribute name
  self[name] = ''
end

- (Object) animate(params, &block)

Set css values over time to create animations. The first parameter is a set of css properties and values to animate to. The first parameter also accepts a special :speed value to set animation speed. If a block is given, the block is run as a callback when the animation finishes.



171
172
173
174
175
176
177
178
 
# File 'opal/opal-jquery/element.rb', line 171

def animate(params, &block)
  speed = params.has_key?(:speed) ? params.delete(:speed) : 400
  %x{
    self.animate(#{params.to_n}, #{speed}, function() {
      #{block.call if block_given?}
    })
  }
end

- (Boolean) any?

Returns:

  • (Boolean) 


274
275
276
 
# File 'opal/opal-jquery/element.rb', line 274

def any?
  `self.length > 0`
end

- (Object) append_to_body 



103
104
105
 
# File 'opal/opal-jquery/element.rb', line 103

def append_to_body
  `self.appendTo(document.body)`
end

- (Object) append_to_head 



107
108
109
 
# File 'opal/opal-jquery/element.rb', line 107

def append_to_head
  `self.appendTo(document.head)`
end

- (Object) at(index)

Returns the element at the given index as a new `DOM` instance. Negative indexes can be used and are counted from the end. If the given index is outside the range then `nil` is returned.



114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
 
# File 'opal/opal-jquery/element.rb', line 114

def at(index)
  %x{
    var length = self.length;

    if (index < 0) {
      index += length;
    }

    if (index < 0 || index >= length) {
      return nil;
    }

    return $(self[index]);
  }
end

- (Object) class_name

Returns the CSS class name of the firt element in self collection. If the collection is empty then an empty string is returned. Only the class name of the first element will ever be returned.



133
134
135
136
137
138
 
# File 'opal/opal-jquery/element.rb', line 133

def class_name
  %x{
    var first = self[0];
    return (first && first.className) || "";
  }
end

- (Object) class_name=(name)

Sets the CSS class name of every element in self collection to the given string. self does not append the class names, it replaces the entire current class name.



143
144
145
146
147
148
149
150
 
# File 'opal/opal-jquery/element.rb', line 143

def class_name=(name)
  %x{
    for (var i = 0, length = self.length; i < length; i++) {
      self[i].className = name;
    }
  }
  self
end

- (Object) css(name, value = nil)

Get or set css properties on each element in self collection. If only the `name` is given, then that css property name is read from the first element in the collection and returned. If the `value` property is also given then the given css property is set to the given value for each of the elements in self collection. The property can also be a hash of properties and values.



158
159
160
161
162
163
164
165
 
# File 'opal/opal-jquery/element.rb', line 158

def css(name, value=nil)
  if value.nil? && name.is_a?(String)
    return `self.css(name)`
  else
    name.is_a?(Hash) ? `self.css(#{name.to_n})` : `self.css(name, value)`
  end
  self
end

- (Object) data(*args) 



180
181
182
183
184
185
 
# File 'opal/opal-jquery/element.rb', line 180

def data(*args)
  %x{
    var result = self.data.apply(self, args);
    return result == null ? nil : result;
  }
end

- (Object) each {|`$(self[i])`| ... }

Yields:

  • (`$(self[i])`) 


205
206
207
208
209
210
 
# File 'opal/opal-jquery/element.rb', line 205

def each
  `for (var i = 0, length = self.length; i < length; i++) {`
    yield `$(self[i])`
  `}`
  self
end

- (Object) effect(name, *args, &block)

Start a visual effect (e.g. fadeIn, fadeOut, …) passing its name. Underscored style is automatically converted (e.g. `effect(:fade_in)`). Also accepts additional arguments and a block for the finished callback.



190
191
192
193
194
195
 
# File 'opal/opal-jquery/element.rb', line 190

def effect(name, *args, &block)
  name = name.gsub(/_\w/) { |match| match[1].upcase }
  args = args.map { |a| a.to_n if a.respond_to? :to_n }.compact
  args << `function() { #{block.call if block_given?} }`
  `self[#{name}].apply(self, #{args})`
end

- (Object) first 



212
213
214
 
# File 'opal/opal-jquery/element.rb', line 212

def first
  `self.length ? self.first() : nil`
end

- (Boolean) has_attribute?(name)

Returns:

  • (Boolean) 


99
100
101
 
# File 'opal/opal-jquery/element.rb', line 99

def has_attribute? name
  `!!self.attr(name)`
end

- (Object) height 



327
328
329
 
# File 'opal/opal-jquery/element.rb', line 327

def height
  `self.height() || nil`
end

- (Object) html(content = undefined) 



216
217
218
219
220
221
222
223
224
 
# File 'opal/opal-jquery/element.rb', line 216

def html(content = undefined)
  %x{
    if (content != null) {
      return self.html(content);
    }

    return self.html() || '';
  }
end

- (Object) id 



226
227
228
229
230
231
 
# File 'opal/opal-jquery/element.rb', line 226

def id
  %x{
    var first = self[0];
    return (first && first.id) || "";
  }
end

- (Object) id=(id) 



233
234
235
236
237
238
239
240
241
242
243
 
# File 'opal/opal-jquery/element.rb', line 233

def id=(id)
  %x{
    var first = self[0];

    if (first) {
      first.id = id;
    }

    return self;
  }
end

- (Object) inspect 



249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
 
# File 'opal/opal-jquery/element.rb', line 249

def inspect
  %x{
    if      (self[0] === document) return '#<Element [document]>'
    else if (self[0] === window  ) return '#<Element [window]>'

    var val, el, str, result = [];

    for (var i = 0, length = self.length; i < length; i++) {
      el  = self[i];
      str = "<" + el.tagName.toLowerCase();

      if (val = el.id) str += (' id="' + val + '"');
      if (val = el.className) str += (' class="' + val + '"');

      result.push(str + '>');
    }

    return '#<Element [' + result.join(', ') + ']>';
  }
end

- (Object) length Also known as: size 



270
271
272
 
# File 'opal/opal-jquery/element.rb', line 270

def length
  `self.length`
end

- (Object) off(name, sel, block = nil) 



307
308
309
310
311
312
313
314
315
316
317
318
319
 
# File 'opal/opal-jquery/element.rb', line 307

def off(name, sel, block = nil)
  %x{
    if (sel == null) {
      return self.off(name);
    }
    else if (block === nil) {
      return self.off(name, sel._jq_wrap);
    }
    else {
      return self.off(name, sel, block._jq_wrap);
    }
  }
end

- (Object) offset 



201
202
203
 
# File 'opal/opal-jquery/element.rb', line 201

def offset
  Native(`self.offset()`)
end

- (Object) on(name, sel = nil, &block) 



284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
 
# File 'opal/opal-jquery/element.rb', line 284

def on(name, sel = nil, &block)
  %x{
    var wrapper = function(evt) {
      if (evt.preventDefault) {
        evt = #{Event.new `evt`};
      }

      return block.apply(null, arguments);
    };

    block._jq_wrap = wrapper;

    if (sel == nil) {
      self.on(name, wrapper);
    }
    else {
      self.on(name, sel, wrapper);
    }
  }

  block
end

- (Object) position 



335
336
337
 
# File 'opal/opal-jquery/element.rb', line 335

def position
  Native(`self.position()`)
end

- (Object) tag_name 



245
246
247
 
# File 'opal/opal-jquery/element.rb', line 245

def tag_name
  `self.length > 0 ? self[0].tagName.toLowerCase() : #{nil}`
end

- (Object) to_n 



87
88
89
 
# File 'opal/opal-jquery/element.rb', line 87

def to_n
  self
end

- (Object) value 



323
324
325
 
# File 'opal/opal-jquery/element.rb', line 323

def value
  `self.val() || ""`
end

- (Boolean) visible?

Returns:

  • (Boolean) 


197
198
199
 
# File 'opal/opal-jquery/element.rb', line 197

def visible?
  `self.is(':visible')`
end

- (Object) width 



331
332
333
 
# File 'opal/opal-jquery/element.rb', line 331

def width
  `self.width() || nil`
end