ganeti_web/static/js/jquery.progressbar_config.js

   1
   2 /*
   3  * jQuery Progress Bar Config Plugin
   4  *
   5  * This is a plugin for generating a configuration that can be used in
   6  * with the jQuery ProgressBar plugin.  This generates an intuitive widget for
   7  * choosing where color ranges start/end.
   8  *
   9  * Copyright (c) 2011 Open Source Lab
  10
  11 */
  12 (function($) {
  13         $.extend({
  14                 progressBarConfig: new function() {
  15
  16                         this.defaults = {
  17                 'width': 400,
  18                             'colors': [
  19                         ['green',0],
  20                         ['yellow',50],
  21                         ['orange',60],
  22                         ['red',75]]
  23                         };
  24
  25                         /* public methods */
  26                         this.construct = function(arg1) {
  27                                 var arg_config  = null;
  28
  29                                 if (arg1 != null) {
  30                                         arg_config = arg1;
  31                                 }
  32
  33                                 return this.each(function() {
  34                                         var control = this;
  35                     var input = $(this);
  36                     var config = undefined;
  37
  38                     // create configuration
  39                     if (arg_config==null) {
  40                         config = $.extend({}, $.progressBarConfig.defaults, arg_config);
  41                     } else {
  42                         config = $.extend(this.config, arg_config);
  43                     }
  44                     if (input.val() != '') {
  45                         config.colors =  $.parseJSON(input.val());
  46                     }
  47
  48                     //get config values
  49                     var colors = config.colors;
  50                     var width = config.width;
  51                     var slider = undefined;
  52
  53                     this._init = function() {
  54                         // Process color information, also resize divs to fit the slider.
  55                         slider = $("<div class='slider'></div>");
  56                         for (var i in colors){
  57                             i = parseInt(i);
  58                             var div = $("<div class='section'></div>");
  59                             var color = colors[i][0];
  60                             var start = colors[i][1];
  61
  62                             div.attr('id',color);
  63
  64                             if (i < colors.length-1) {
  65                                 div.append("<div class='handle right'></div>");
  66                                 div.width((colors[i+1][1]-start)/100*width);
  67                             } else {
  68                                 div.width((100-start)/100*width);
  69                             }
  70
  71                             if (i > 0) {
  72                                 div.append("<div class='handle left'></div>");
  73                             }
  74                             slider.append(div);
  75                         }
  76
  77                         slider.find('.handle').mousedown(control._mousedown);
  78                         input.hide();
  79                         input.after(slider);
  80                     };
  81
  82                     var origin = undefined;
  83                     var moving = undefined;
  84                     var other = undefined;
  85                     var moving_origin = undefined;
  86                     var other_origin = undefined;
  87                     var reverse = undefined;
  88
  89                     control._mousedown = function(event){
  90                         var bound = $(this);
  91                         origin = event.pageX;
  92                         moving = bound.parent();
  93                         if (bound.hasClass('left')) {
  94                             other = moving.prev();
  95                             reverse = true;
  96                         } else {
  97                             other = moving.next();
  98                             reverse = false;
  99                         }
 100                         moving_origin = moving.width();
 101                         other_origin = other.width();
 102
 103                         $('html')
 104                             .mouseup(control._mouseup)
 105                             .mousemove(control._slide_react);
 106                     };
 107
 108                     control._mouseup = function(event) {
 109                         event.preventDefault();
 110                         slider.unbind('mousemove');
 111                         origin = undefined;
 112                         moving = undefined;
 113                         other = undefined;
 114                         $('html')
 115                             .unbind('mouseup')
 116                             .unbind('mousemove');
 117
 118                         // process bar sizes
 119                         // XXX no JSON encoder so just manually encode array
 120                         var sections = slider.find('.section');
 121                         var data = "[";
 122                         var acc = 0;
 123                         for (var i in colors) {
 124                             if (i!=0) {
 125                                 data += ",";
 126                             }
 127                             data += '["' + [colors[i][0]] + '",' + acc + ']';
 128                             acc += $(sections[i]).width()/width*100;
 129                         }
 130                         data += "]";
 131                         input.val(data);
 132                     };
 133
 134                     this._slide_react = function(event) {
 135                         var offset = event.pageX - origin;
 136
 137                         if (reverse) {
 138                             if (offset > 1 && moving_origin-offset < 0) {
 139                                 offset = moving_origin;
 140                             } else if (other_origin+offset < 0) {
 141                                 offset = -1*other_origin;
 142                             }
 143                             moving.width(moving_origin-offset);
 144                             other.width(other_origin+offset);
 145                         } else {
 146                             if (offset > 1 && other_origin-offset < 0) {
 147                                 offset = other_origin;
 148                             } else if (moving_origin+offset < 0) {
 149                                 offset = -1*moving_origin;
 150                             }
 151                             moving.width(moving_origin+offset);
 152                             other.width(other_origin-offset);
 153                         }
 154                     };
 155
 156                     this._init();
 157                                 });
 158                         };
 159                 }
 160     });
 161
 162         $.fn.extend({
 163         progressBarConfig: $.progressBarConfig.construct
 164         });
 165
 166 })(jQuery);