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 



399
400
401
402
 
# File 'lib/nitro/helper/javascript.rb', line 399

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

#__append_script__(script) ⇒ Object 



394
395
396
397
 
# File 'lib/nitro/helper/javascript.rb', line 394

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

#__append_script_file__(file) ⇒ Object

:section: internal helpers.



389
390
391
392
 
# File 'lib/nitro/helper/javascript.rb', line 389

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.



201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
 
# File 'lib/nitro/helper/javascript.rb', line 201

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');
  }    
}



117
118
119
120
121
 
# File 'lib/nitro/helper/javascript.rb', line 117

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

#decorate_borders(options = {}) ⇒ Object

Generalized border decoration.



257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
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
 
# File 'lib/nitro/helper/javascript.rb', line 257

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.



187
188
189
190
191
192
193
194
195
 
# File 'lib/nitro/helper/javascript.rb', line 187

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.



343
344
345
346
 
# File 'lib/nitro/helper/javascript.rb', line 343

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! ++



356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
 
# File 'lib/nitro/helper/javascript.rb', line 356

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.



329
330
331
332
333
334
335
336
337
338
339
 
# File 'lib/nitro/helper/javascript.rb', line 329

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

…



382
383
384
385
 
# File 'lib/nitro/helper/javascript.rb', line 382

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



83
84
85
 
# File 'lib/nitro/helper/javascript.rb', line 83

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>



143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
 
# File 'lib/nitro/helper/javascript.rb', line 143

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.



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

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.



225
226
 
# File 'lib/nitro/helper/javascript.rb', line 225

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().



170
171
172
173
174
175
176
177
178
179
180
181
 
# File 'lib/nitro/helper/javascript.rb', line 170

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