Module: Nitro::JavascriptHelper

Includes:
JavascriptUtils
Included in:
ScriptCompiler
Defined in:
lib/nitro/helper/javascript.rb

Overview

A collection of useful Javascript helpers. This modules integrates helpers for the following javascript libraries:

  • behaviour.js

  • prototype.js

  • effects.js

  • dragdrop.js

  • controls.js

– gmosx: this code is kinda old, will be deprecated soon. ++

Constant Summary collapse

DEFAULT_JAVASCRIPT_FILES = 
[
  'js/behaviour.js', 
  'js/prototype.js', 
  'js/effects.js', 
  'js/dragdrop.js', 
  'js/controls.js'
]

Instance Method Summary collapse

Instance Method Details

#__append_css__(css) ⇒ Object 



427
428
429
430
 
# File 'lib/nitro/helper/javascript.rb', line 427

def __append_css__(css)
  @_css ||= []
  @_css << css unless @_css.include?(css)
end

#__append_script__(script) ⇒ Object 



422
423
424
425
 
# File 'lib/nitro/helper/javascript.rb', line 422

def __append_script__(script)
  @_script ||= []
  @_script << script unless @_script.include?(script)
end

#__append_script_file__(file) ⇒ Object

:section: internal helpers.



417
418
419
420
 
# File 'lib/nitro/helper/javascript.rb', line 417

def __append_script_file__(file)
  @_script_files ||= []
  @_script_files << file unless @_script_files.include?(file)
end

#auto_complete(id, options = {}) ⇒ Object

Add autocomplete functionality to a text field.



229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
 
# File 'lib/nitro/helper/javascript.rb', line 229

def auto_complete(id, options = {})
  update = options[:update] || "#{id}_auto_complete"
  url = options[:url] || "#{id}_auto_complete"

  __append_script_file__ 'js/behaviour.js'
  __append_script_file__ 'js/prototype.js'
  __append_script_file__ 'js/effects.js'
  __append_script_file__ 'js/controls.js'
  
  __append_script__ "\nnew Ajax.Autocompleter('#{id}', '#{update}', '#{url}');"
  
  # Turn off the browser's autocomplete functionality to avoid
  # interference.
  
  behaviour "##{id}", %{
    el.autocomplete = 'off';
  }
  return nil
end

#behaviour(id, js) ⇒ Object

Register javascript code with an HTML element of a given id with the behaviour method.

Example: 

behaviour '#alert', %{
  el.onclick = function() {
    alert('Hello world');
  }    
}



145
146
147
148
149
 
# File 'lib/nitro/helper/javascript.rb', line 145

def behaviour(id, js)
  @_behaviours ||= []
  @_behaviours << [id, js]
  return nil
end

#decorate_borders(options = {}) ⇒ Object

Generalized border decoration.



285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
 
# File 'lib/nitro/helper/javascript.rb', line 285

def decorate_borders(options = {})
  o = {
    :bg => '#fff',
    :fg => '#ccc',
    :klass => 'w'
  }.update(options)

  klass = o[:klass]

  __append_script_file__ 'js/prototype.js'
  __append_script_file__ 'js/styler.js'

  __append_script__ %{ 
    decorateBorders('#{klass}');
  }

  __append_css__ %{
    .#{klass}t {
      background: #{o[:bg]};  
      background-image: url(m/#{klass}t.gif);
      background-repeat: repeat-x;
      background-position: top;
    }
    .#{klass}r {
      background-image: url(m/#{klass}r.gif);
      background-repeat: repeat-y;
      background-position: right;
    }
    .#{klass}b {
      background-image: url(m/#{klass}b.gif);
      background-repeat: repeat-x;
      background-position: bottom;
    }
    .#{klass}l {
      background-image: url(m/#{klass}l.gif);
      background-repeat: repeat-y;
      background-position: left;
    }
    .#{klass}tl {
      background-image: url(m/#{klass}tl.gif);
      background-repeat: no-repeat;
      background-position: top left;
    }
    .#{klass}tr {
      background-image: url(m/#{klass}tr.gif);
      background-repeat: no-repeat;
      background-position: top right;
    }
    .#{klass}bl {
      background-image: url(m/#{klass}bl.gif);
      background-repeat: no-repeat;
      background-position: bottom left;
    }
    .#{klass}br {
      background-image: url(m/#{klass}br.gif);
      background-repeat: no-repeat;
      background-position: bottom right;
    }
    .#{klass}c {
      padding: 25px;
    }      
  }
 
  return nil
end

#draggable(id, options = {}) ⇒ Object

The user may click and drag the element about the screen.



215
216
217
218
219
220
221
222
223
 
# File 'lib/nitro/helper/javascript.rb', line 215

def draggable(id, options = {})
  __append_script_file__ 'js/behaviour.js'
  __append_script_file__ 'js/prototype.js'
  __append_script_file__ 'js/effects.js'
  __append_script_file__ 'js/dragdrop.js'
  
  __append_script__ "\nnew Draggable('#{id}', #{hash_to_js(options)});"
  return nil
end

#emit_css ⇒ Object Also known as: helper_css

Emits the aggregated css.



371
372
373
374
 
# File 'lib/nitro/helper/javascript.rb', line 371

def emit_css
  return unless @_css
  %{<style>#{@_css.join("\n")}</style>}
end

#emit_script ⇒ Object Also known as: helper_script

Call this in your template/page to include the javascript statements that link your HTML to the javascript libraries. Must be called after the HTML elements involved, i.e., at the bottom of the page. – FIXME: refactor this! ++



384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
 
# File 'lib/nitro/helper/javascript.rb', line 384

def emit_script
  code = %|<script type="text/javascript">\n<!--\n|
  unless @_behaviours.empty?
    code << %|var _behaviours = {\n|
    compo = []
    for id, js in @_behaviours
      compo << %|'#{id}': function(el) { #{js} \n }|
    end
    code << compo.join(',')
    code << %|
    }
    Behaviour.register(_behaviours);    
    |
  end
  code << %|
      #{@_script.join("\n")}
  | if @_script
  code << %|
    //-->
    </script>
  |
end

#include_script(*files) ⇒ Object

Inserts links to the .js files necessary for your page. Call it from within HEAD. Add other script files as arguments if desired.



357
358
359
360
361
362
363
364
365
366
367
 
# File 'lib/nitro/helper/javascript.rb', line 357

def include_script(*files)
  return nil if files.empty?
  
  code = ''

  for file in files
    code << %|<script src="#{name_to_jsfile(file)}" type="text/javascript">//</script>\n|
  end if files

  return code
end

#js_distance_of_time_in_words(time) ⇒ Object

…



410
411
412
413
 
# File 'lib/nitro/helper/javascript.rb', line 410

def js_distance_of_time_in_words(time)
  time = time.utc.strftime("%a, %d %b %Y %H:%M:%S GMT")
  %|<span class="human_time" title="#{time}">#{time}</span>|
end

#link_to_function(name, function) ⇒ Object

Insert an anchor to execute a given function when the link is followed. Call with the name of the link, and the function to be called:

link_to_function "Do it." :go



111
112
113
 
# File 'lib/nitro/helper/javascript.rb', line 111

def link_to_function(name, function)
  %{<a href="#" onclick="#{function}; return false;">#{name}</a>}
end

#live_request(id, options = {}) ⇒ Object Also known as: live, async

A live, or asynchronous, request is one that does not bring the user to a new page. It is used to send data back to the web server while the user is still interacting with a document.

Call live with the id of an achor element as a string or a symbol. Alternatively, add async="true" to the anchor (A) element. Specify the anchor to be called either as a second parameter to the live method, or in the HREF option of the anchor element.

Examples:

live :id_of_anchor_element [:method]
<a href="receiver" async="true">Go!</a>



171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
 
# File 'lib/nitro/helper/javascript.rb', line 171

def live_request(id, options = {})
  __append_script_file__ 'js/behaviour.js'
  __append_script_file__ 'js/prototype.js'
  
  if href = options.delete(:href)
    behaviour "##{id}", %{
      el.onclick = function() {
        new Ajax.Request('#{href}', #{hash_to_js(options)});
        return false;
      }
    }
  else
    behaviour "##{id}", %{
      el.onclick = function() {
        new Ajax.Request(el.href, #{hash_to_js(options)});
        return false;
      }
    }
  end
  return nil
end

#round_corners(id, options = {}) ⇒ Object

Round element corners using the nifty corners technique.



258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
 
# File 'lib/nitro/helper/javascript.rb', line 258

def round_corners(id, options = {})
  o = {
    :bg => '#fff',
    :fg => '#ccc',
  }.update(options)

  __append_script_file__ 'js/prototype.js'
  __append_script_file__ 'js/round.js'

  __append_script__ %{
    Box.round('#{id}', '#{o[:fg]}', '#{o[:bg]}');
  }

  __append_css__ %{
    .rtop,.rbottom{display:block}
    .rtop *,.rbottom *{display:block;height: 1px;overflow: hidden}
    .r1{margin: 0 5px}
    .r2{margin: 0 3px}
    .r3{margin: 0 2px}
    .r4{margin: 0 1px;height: 2px}
  }
 
  return nil
end

#style_border ⇒ Object

Style border.



253
254
 
# File 'lib/nitro/helper/javascript.rb', line 253

def style_border
end

#toggleable(id, options = {}) ⇒ Object

Clicking the element will make it disappear. If you want it to reappear, you’ll have to call toggle().



198
199
200
201
202
203
204
205
206
207
208
209
 
# File 'lib/nitro/helper/javascript.rb', line 198

def toggleable(id, options = {})
  __append_script_file__ 'js/prototype.js'
  
  behaviour "##{id}", %{
    el.onclick = function() {
      Element.toggle('#{id}');
      return false;
    }
  }
  
  return nil
end