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