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('Overlay: ' + mydata.overlay);
   9                         $(document).bind('mousemove', mydata, $.hpanel.resize_changed).
  10                                 bind('mouseup', mydata, $.hpanel.resize_stop);
  11
  12                         $('.panel-overlay', mydata.root).css('display', 'block');
  13                         return false;
  14                 },
  15                 resize_changed: function(event) {
  16                         var old_width = parseInt(event.data.overlay.css('width'));
  17                         var delta = event.pageX + event.data.hotspot_x - old_width;
  18                         event.data.overlay.css({'width': old_width + delta});
  19
  20                         if(event.data.overlay.next) {
  21                                 var left = parseInt(event.data.overlay.next.css('left'));
  22                                 event.data.overlay.next.css('left', left+delta);
  23                         }
  24
  25             return false;
  26         },
  27         resize_stop: function(event) {
  28             $(document).unbind('mousemove', $.hpanel.resize_changed).unbind('mouseup', $.hpanel.resize_stop);
  29                         // $('.panel-content', event.data.root).css('display', 'block');
  30                         var overlays = $('.panel-content-overlay', event.data.root);
  31                         $('.panel-content-overlay', event.data.root).each(function(i) {
  32                                 $(this).data('panel').css({
  33                                         'left': $(this).css('left'),
  34                                         'width': $(this).css('width')
  35                                 });
  36                         });
  37
  38                         $('.panel-overlay', event.data.root).css('display', 'none');
  39         }
  40     };
  41
  42     $.fn.makeHorizPanel = function(options)
  43         {
  44                 console.log('Making an hpanel out of "#' +  $(this).attr('id') + '"');
  45                 var root = $(this)
  46                 var all_panels = $('.panel-wrap', root)
  47                 console.log('Panels: ' + all_panels);
  48
  49                 /* create an overlay */
  50                 var overlay_root = $("<div class='panel-overlay'></div>");
  51                 root.append(overlay_root);
  52
  53                 var prev = null;
  54
  55                 all_panels.each(function(i) {
  56                         var panel = $(all_panels[i]);
  57                         var handle = $('.panel-slider', panel);
  58
  59                         var overlay     = $("<div class='panel-content-overlay panel-wrap'><p>Panel #"+i+"</p></div>");
  60                         overlay_root.append(overlay);
  61                         overlay.data('panel', panel);
  62                         overlay.data('next', null);
  63
  64                         if( panel.hasClass('last-panel') )
  65                                 overlay.css({'left': panel.css('left'), 'right': panel.css('right')});
  66                         else
  67                                 overlay.css({'left': panel.css('left'), 'width': panel.css('width')});
  68
  69                         if (prev) prev.next = overlay;
  70
  71                         if(handle) {
  72                                 overlay.append(handle.clone());
  73                                 /* attach the trigger */
  74                                 handle.mousedown(function(event) {
  75                                         var touch_data = {
  76                                                 root: root, overlay: overlay,
  77                                                 hotspot_x: event.pageX - handle.position().left
  78                                         };
  79
  80                                         $(this).trigger('hpanel:panel-resize-start', touch_data);
  81                                         return false;
  82                                 });
  83                                 $('.panel-content', panel).css('right',handle.outerWidth() + 'px');
  84                                 $('.panel-content-overlay', panel).css('right',handle.outerWidth() + 'px');
  85                         }
  86
  87                         prev = overlay;
  88         });
  89
  90         root.bind('hpanel:panel-resize-start', $.hpanel.resize_start);
  91     };
  92 })(jQuery);
  93