scratch
| /bower_components/drawingboard.js/js/controls/drawingmode.js |
|---|
| @@ -0,0 +1,44 @@ |
| DrawingBoard.Control.DrawingMode = DrawingBoard.Control.extend({ |
| name: 'drawingmode', |
| defaults: { |
| pencil: true, |
| eraser: true, |
| filler: true |
| }, |
| initialize: function() { |
| this.prevMode = this.board.getMode(); |
| $.each(["pencil", "eraser", "filler"], $.proxy(function(k, value) { |
| if (this.opts[value]) { |
| this.$el.append('<button class="drawing-board-control-drawingmode-' + value + '-button" data-mode="' + value + '"></button>'); |
| } |
| }, this)); |
| this.$el.on('click', 'button[data-mode]', $.proxy(function(e) { |
| var value = $(e.currentTarget).attr('data-mode'); |
| var mode = this.board.getMode(); |
| if (mode !== value) this.prevMode = mode; |
| var newMode = mode === value ? this.prevMode : value; |
| this.board.setMode( newMode ); |
| e.preventDefault(); |
| }, this)); |
| this.board.ev.bind('board:mode', $.proxy(function(mode) { |
| this.toggleButtons(mode); |
| }, this)); |
| this.toggleButtons( this.board.getMode() ); |
| }, |
| toggleButtons: function(mode) { |
| this.$el.find('button[data-mode]').each(function(k, item) { |
| var $item = $(item); |
| $item.toggleClass('active', mode === $item.attr('data-mode')); |
| }); |
| } |
| }); |