public/javascripts/application.js

   1 Lyrix = {}; // Our own little namespace.
   2
   3 // We can pass values from the server this way
   4 // I like this syntax better
   5 $P = function(element) {
   6   return $(element).innerHTML;
   7 }
   8
   9 // ===============================================
  10 // = Behavior proxies to Script.aculo.us objects =
  11 // ===============================================
  12 Lyrix.Draggable = Behavior.create({
  13   initialize: function(options) {
  14     this.options = Object.extend({
  15       revert : true
  16     }, options || {});
  17     this.draggable = new Draggable(this.element, this.options);
  18   }
  19 });
  20
  21 Lyrix.Droppable = Behavior.create({
  22   initialize: function(options) {
  23     this.options = (options || {});
  24     Droppables.add(this.element, this.options);
  25   }
  26 });
  27
  28 Lyrix.Sortable = Behavior.create({
  29   initialize: function(options) {
  30     this.options = Object.extend({
  31       constraint: false
  32     }, options || {});
  33     Sortable.create(this.element, this.options);
  34   }
  35 });
  36
  37 Lyrix.InPlaceEditor = Behavior.create({
  38   initialize: function(options) {
  39     this.options = Object.extend({
  40       urlBuilder: this._makeRequestURL,
  41       ajaxOptions: {method: 'put'}
  42     }, options || {});
  43
  44     this.url = this.options.urlBuilder(this.element);
  45     this.options.urlBuilder = null;
  46
  47     new Ajax.InPlaceEditor(this.element, this.url, this.options);
  48   },
  49   // Builds a default
  50   _makeRequestURL: function(element) {
  51     split_id = element.id.split('_');
  52
  53     params = {object: split_id[0], method: split_id[1], id: split_id[2]};
  54     return '/' + params.object + 's/set_' + params.object + '_' + params.method + '/' + params.id;
  55   }
  56 });
  57
  58 // ====================
  59 // = Custom behaviors =
  60 // ====================
  61 Lyrix.DeleteLink = Behavior.create({
  62   initialize: function() {
  63     this.form = $form({
  64       style: 'display:none',
  65       method: 'post',
  66       action: this.element.href
  67     }, $input({
  68       type: 'hidden',
  69       name: '_method',
  70       value: 'delete'
  71     }));
  72
  73     this.element.appendChild(this.form);
  74   },
  75   onclick: function(e) {
  76     this.form.submit();
  77     Event.stop(e);
  78   }
  79 });
  80
  81 // =================================
  82 // = Behaviors for the application =
  83 // =================================
  84 Event.addBehavior({
  85   // Add some magical in-place-editors
  86   'span.in_place_editor_field': Lyrix.InPlaceEditor(),
  87
  88   // Delete things using a hidden form
  89   'a.deletable': Lyrix.DeleteLink,
  90
  91   // Allow songs to be dragged back and forth
  92   '.song, .usage': Lyrix.Draggable({handle: 'draggable'}),
  93
  94   // Make the songs in a show sortable and
  95   // allow songs from the sidebar to be dropped in
  96   '#songs_list': function() {
  97     sortableOptions = {
  98       constraint: false,
  99       handle: 'draggable',
 100       onUpdate: function(element) {
 101         new Ajax.Request('/shows/' + $P('show_id') + ';reorder', {
 102           method: 'put',
 103           parameters: Sortable.serialize(element)
 104         });
 105       }
 106     };
 107
 108     Lyrix.Droppable.attach(this, {
 109       accept: 'song',
 110       onDrop: function(element) {
 111         new Ajax.Request('/usages?show_id=' + $P('show_id'), {
 112           parameters: 'id=' + encodeURIComponent(element.id.gsub('song_', '')),
 113           onComplete: function() {
 114             Sortable.create('songs_list', sortableOptions);
 115           }
 116         });
 117       }
 118     });
 119
 120     Lyrix.Sortable.attach(this, sortableOptions);
 121   },
 122
 123   // Allow songs from a show to be dropped out of the show
 124   '#side_songs_list': Lyrix.Droppable({
 125     accept: 'usage',
 126     onDrop: function(element) {
 127       id = encodeURIComponent(element.id.gsub('usage_', ''));
 128       new Ajax.Request('/usages/' + id, {
 129         method: 'delete'
 130       });
 131     }
 132   })
 133 });