josephernest / bigpicture.js

bigpicture.js is a Javascript library that allows infinite panning and infinite zooming in HTML pages.
https://josephernest.github.io/bigpicture.js/index.html
MIT License
809 stars 58 forks source link

events #13

Closed konsumer closed 6 years ago

konsumer commented 9 years ago

I am working on a websocket version, and I needed events. This adds some minimal events to track what is happening.You can use them like this:

$('#bigpicture')
    .on('bpupdate', function(e, el){
      console.log('update', el);
    })
    .on('bpnew', function(e, x, y, size, text){
      console.log('new', x, y, size, text);
    })
    .on('bpzoom', function(e, zoom, wx, wy, sx, sy){
      console.log('zoom', zoom, wx, wy, sx, sy)
    });
konsumer commented 9 years ago

Actually, nevermind, I did it all with keydown. Seemed more reliable.

$('#bigpicture').on('keyup', '.text', function(e){
    var $e = $(e.target);
    var text = $e.html();
    var id = $e.attr('id');
    if (id){
      if(text == ''){
        socket.emit('post:remove', id);
      }else{
        var post = {
          uuid: id,
          x: $e.data('x'),
          y: $e.data('y'),
          size: $e.data('size'),
          text: text
        };
        socket.emit('post:update', post);
      }
    }else{
      var post = {
        x: $e.data('x'),
        y: $e.data('y'),
        size: $e.data('size'),
        text: text
      };
      socket.emit('post:create', post, function(id){
        $e.attr('id', id);
      });
    }
  })

I have an initial websocket version up at http://bigwall.herokuapp.com/

josephernest commented 9 years ago

Oh we were working on the same thing at the same time : http://github.com/josephernest/BigBigPicture Let's merge our effort :) (PM: Would you like to discuss online, if so join me on twitter @JosephErnest and we'll see how to discuss)