[Summary view] [Print] [Text view]

   1  if (typeof(PhpDebugBar) == 'undefined') {
   2      // namespace
   3      var PhpDebugBar = {};
   4      PhpDebugBar.$ = jQuery;
   5  }
   6  
   7  (function($) {
   8  
   9      var csscls = function(cls) {
  10          return PhpDebugBar.utils.csscls(cls, 'phpdebugbar-openhandler-');
  11      };
  12  
  13      PhpDebugBar.OpenHandler = PhpDebugBar.Widget.extend({
  14  
  15          className: 'phpdebugbar-openhandler',
  16  
  17          defaults: {
  18              items_per_page: 20
  19          },
  20  
  21          render: function() {
  22              var self = this;
  23  
  24              this.$el.appendTo('body').hide();
  25              this.$closebtn = $('<a><i class="phpdebugbar-fa phpdebugbar-fa-times"></i></a>');
  26              this.$table = $('<tbody />');
  27              $('<div>PHP DebugBar | Open</div>').addClass(csscls('header')).append(this.$closebtn).appendTo(this.$el);
  28              $('<table><thead><tr><th width="150">Date</th><th width="55">Method</th><th>URL</th><th width="125">IP</th><th width="100">Filter data</th></tr></thead></table>').append(this.$table).appendTo(this.$el);
  29              this.$actions = $('<div />').addClass(csscls('actions')).appendTo(this.$el);
  30  
  31              this.$closebtn.on('click', function() {
  32                  self.hide();
  33              });
  34  
  35              this.$loadmorebtn = $('<a>Load more</a>')
  36                  .appendTo(this.$actions)
  37                  .on('click', function() {
  38                      self.find(self.last_find_request, self.last_find_request.offset + self.get('items_per_page'), self.handleFind.bind(self));
  39                  });
  40  
  41              this.$showonlycurrentbtn = $('<a>Show only current URL</a>')
  42                  .appendTo(this.$actions)
  43                  .on('click', function() {
  44                      self.$table.empty();
  45                      self.find({uri: window.location.pathname}, 0, self.handleFind.bind(self));
  46                  });
  47  
  48              this.$showallbtn = $('<a>Show all</a>')
  49                  .appendTo(this.$actions)
  50                  .on('click', function() {
  51                      self.refresh();
  52                  });
  53  
  54              this.$clearbtn = $('<a>Delete all</a>')
  55                  .appendTo(this.$actions)
  56                  .on('click', function() {
  57                      self.clear(function() {
  58                          self.hide();
  59                      });
  60                  });
  61                  
  62              this.addSearch();
  63  
  64              this.$overlay = $('<div />').addClass(csscls('overlay')).hide().appendTo('body');
  65              this.$overlay.on('click', function() {
  66                  self.hide();
  67              });
  68          },
  69  
  70          refresh: function() {
  71              this.$table.empty();
  72              this.$loadmorebtn.show();
  73              this.find({}, 0, this.handleFind.bind(this));
  74          },
  75          
  76          addSearch: function(){
  77              var self = this;
  78              var searchBtn = $('<button />')
  79                  .text('Search')
  80                  .attr('type', 'submit')
  81                  .on('click', function(e) {
  82                      self.$table.empty();
  83                      var search = {};
  84                      var a = $(this).parent().serializeArray();
  85                      $.each(a, function() {
  86                          if(this.value){
  87                              search[this.name] = this.value;
  88                          }
  89                      });
  90  
  91                      self.find(search, 0, self.handleFind.bind(self));
  92                      e.preventDefault();
  93                  });
  94  
  95              $('<form />')
  96                  .append('<br/><b>Filter results</b><br/>')
  97                  .append('Method: <select name="method"><option></option><option>GET</option><option>POST</option><option>PUT</option><option>DELETE</option></select><br/>')
  98                  .append('Uri: <input type="text" name="uri"><br/>')
  99                  .append('IP: <input type="text" name="ip"><br/>')
 100                  .append(searchBtn)
 101                  .appendTo(this.$actions);
 102          },
 103  
 104          handleFind: function(data) {
 105              var self = this;
 106              $.each(data, function(i, meta) {
 107                 var a = $('<a />')
 108                      .text('Load dataset')
 109                      .on('click', function(e) {
 110                         self.hide();
 111                         self.load(meta['id'], function(data) {
 112                             self.callback(meta['id'], data);
 113                         });
 114                         e.preventDefault();
 115                      });
 116                      
 117                  var method = $('<a />')
 118                      .text(meta['method'])
 119                      .on('click', function(e) {
 120                          self.$table.empty();
 121                          self.find({method: meta['method']}, 0, self.handleFind.bind(self));
 122                          e.preventDefault();
 123                      });
 124  
 125                  var uri = $('<a />')
 126                      .text(meta['uri'])
 127                      .on('click', function(e) {
 128                          self.hide();
 129                          self.load(meta['id'], function(data) {
 130                              self.callback(meta['id'], data);
 131                          });
 132                          e.preventDefault();
 133                      });
 134  
 135                  var ip = $('<a />')
 136                      .text(meta['ip'])
 137                      .on('click', function(e) {
 138                          self.$table.empty();
 139                          self.find({ip: meta['ip']}, 0, self.handleFind.bind(self));
 140                          e.preventDefault();
 141                      });
 142  
 143                  var search = $('<a />')
 144                      .text('Show URL')
 145                      .on('click', function(e) {
 146                          self.$table.empty();
 147                          self.find({uri: meta['uri']}, 0, self.handleFind.bind(self));
 148                          e.preventDefault();
 149                      });
 150                      
 151                  $('<tr />')
 152                      .append('<td>' + meta['datetime'] + '</td>')
 153                      .append('<td>' + meta['method'] + '</td>')
 154                      .append($('<td />').append(uri))
 155                      .append($('<td />').append(ip))
 156                      .append($('<td />').append(search))
 157                      .appendTo(self.$table);
 158              });
 159              if (data.length < this.get('items_per_page')) {
 160                  this.$loadmorebtn.hide();
 161              }
 162          },
 163  
 164          show: function(callback) {
 165              this.callback = callback;
 166              this.$el.show();
 167              this.$overlay.show();
 168              this.refresh();
 169          },
 170  
 171          hide: function() {
 172              this.$el.hide();
 173              this.$overlay.hide();
 174          },
 175  
 176          find: function(filters, offset, callback) {
 177              var data = $.extend({}, filters, {max: this.get('items_per_page'), offset: offset || 0});
 178              this.last_find_request = data;
 179              this.ajax(data, callback);
 180          },
 181  
 182          load: function(id, callback) {
 183              this.ajax({op: "get", id: id}, callback);
 184          },
 185  
 186          clear: function(callback) {
 187              this.ajax({op: "clear"}, callback);
 188          },
 189  
 190          ajax: function(data, callback) {
 191              $.ajax({
 192                  dataType: 'json',
 193                  url: this.get('url'),
 194                  data: data,
 195                  success: callback,
 196                  ignoreDebugBarAjaxHandler: true
 197              });
 198          }
 199  
 200      });
 201  
 202  })(PhpDebugBar.$);