project/static/js/jquery.hpanel.js

   1 (function($){
   2
   3         /* behaviour */
   4         $.hpanel = {
   5         settings: {},
   6                 current_data: {},
   7         resize_start: function(event, mydata) {
   8                         console.log('Panel ' + mydata.panel.attr('id') + ' started resizing');
   9                         $(document).bind('mousemove', mydata, $.hpanel.resize_changed).
  10                                 bind('mouseup', mydata, $.hpanel.resize_stop);
  11                         return false;
  12                 },
  13                 resize_changed: function(event) {
  14                         var old_width = parseInt(event.data.panel.css('width'));
  15                         var delta = event.pageX + event.data.hotspot_x - old_width;
  16
  17                         console.log('o: ' + (old_width) + ' pX: ' + event.pageX + ' hX: ' + event.data.hotspot_x);
  18                         console.log('next_panel: ' + $(event.data.panel.next_panel).attr('id'));
  19                         event.data.panel.css({'width': old_width + delta});
  20
  21                         if(event.data.panel.next_panel) {
  22                                 var left = parseInt(event.data.panel.next_panel.css('left'));
  23                                 console.log('left: ' + left + ' new_left: ' + (left+delta) );
  24                                 event.data.panel.next_panel.css('left', left+delta);
  25                         }
  26
  27             return false;
  28         },
  29         resize_stop: function(event) {
  30             $(document).unbind('mousemove', $.hpanel.resize_changed).unbind('mouseup', $.hpanel.resize_stop);
  31             $('body').css('cursor', 'auto');
  32         }
  33     };
  34
  35     $.fn.make_hpanel = function(options)
  36         {
  37                 console.log('Making an hpanel out of "#' +  $(this).attr('id') + '"');
  38                 var root = $(this)
  39                 var all_panels = $('.panel-wrap', root)
  40                 console.log('Panels: ' + all_panels);
  41
  42                 var prev = null;
  43
  44                 all_panels.each(function(i) {
  45                         var panel = $(all_panels[i]);
  46                         var handle = $('.panel-slider', panel)
  47
  48                         panel.next_panel = null;
  49                         if (prev) prev.next_panel = panel;
  50
  51                         /* attach the trigger */
  52                 handle.mousedown(function(event) {
  53                                 var touch_data = {
  54                                         panel_root: root,
  55                                         panel: panel,
  56                                         hotspot_x: event.pageX - handle.position().left
  57                                 };
  58                                 $(this).trigger('hpanel:panel-resize-start', touch_data);
  59                                 return false;
  60                         });
  61                         prev = panel;
  62         });
  63
  64                 root.bind('hpanel:panel-resize-start', $.hpanel.resize_start);
  65     };
  66 })(jQuery);
  67