Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
  <script src="https://raw.github.com/marionettejs/backbone.wreqr/master/lib/backbone.wreqr.js"></script>
  <script src="https://raw.github.com/marionettejs/backbone.eventbinder/master/lib/backbone.eventbinder.js"></script>
  <script src="https://raw.github.com/marionettejs/backbone.marionette/master/lib/backbone.marionette.js"></script>
<meta name="description" content="" />
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script type="text/html" id="template-empty"> </script>
<script type="text/html" id="template-image-and-map">
<img usemap="#imagemap" style="width:200px; height:200px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCRUQwREIxNjE4OEIxMUUyOTRGQkFEQjFENkJFMUE0NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCRUQwREIxNzE4OEIxMUUyOTRGQkFEQjFENkJFMUE0NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkJFRDBEQjE0MTg4QjExRTI5NEZCQURCMUQ2QkUxQTQ3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkJFRDBEQjE1MTg4QjExRTI5NEZCQURCMUQ2QkUxQTQ3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+5vfxFAAAABpJREFUeNpi/P//PwMxgImBSDCqkDoKAQIMANUSAxFqvpFcAAAAAElFTkSuQmCC" />
<map name="imagemap"></map>
</script>
  
<script>
window.addEventListener('load', function() {
​
​
  var Button = Backbone.Model.extend({
    defaults: {
      name: 'default',
      mouse_state: 'off',
      shape: 'rect',
      coords: '0,0,20,20'
    }
  });
​
  var Buttons = Backbone.Collection.extend({
    model: Button,
    createAll: function() {
      var list = [{
        name: 'insert',
        shape: 'poly',
        coords: '10,10,20,0,30,10,40,20,30,30,20,40'
      }, {
        name: 'higher',
        shape: 'poly',
        coords: '110,10,120,0,130,10,140,20,130,30,120,40'
      }, {
        name: 'lower',
        shape: 'poly',
        coords: '110,110,120,100,130,110,140,120,130,130,120,140'
      }],
        buttons = this;
      list.forEach(function(props) {
        buttons.add(props);
      });
    }
  });
​
​
  /* SpriteView only _reacts_ to changes in the Model, it never sets anything there */
  var SpriteView = Marionette.ItemView.extend({
    template: '#template-empty',
    // empty, we just want a single tag
    modelEvents: {
      'change:mouse_state': 'changeMouseState'
    },
    initialize: function() {
      // add initial classes to the created element
      $(this.el).addClass('sprite ' + this.model.get('name') + ' ' + this.model.get('mouse_state'));
    },
    changeMouseState: function() {
      $(this.el).removeClass('mouseover mouseout mousedown mouseup').addClass(this.model.get('mouse_state'));
    }
  });
  var SpritesView = Marionette.CompositeView.extend({
    itemView: SpriteView,
    template: '#template-empty'
  });
​
​
  // The &quot;areas&quot; in the &quot;map&quot; actual set things on the model,
  // rather than reacting to changes in it
  var AreaView = Marionette.ItemView.extend({
    template: '#template-empty',
    // empty, we just want a single tag
    tagName: 'area',
    events: {
      mouseover: 'mouseevent',
      mouseout: 'mouseevent',
      mousedown: 'mouseevent',
      mouseup: 'mouseevent',
      click: 'clickevent'
    },
    initialize: function() {
      var name = this.model.get('name');
      $(this.el).attr({
        href: '#',
        title: name,
        shape: this.model.get('shape'),
        coords: this.model.get('coords')
      });
    },
    mouseevent: function(event) {
      this.model.set('mouse_state', event.type);
    },
    clickevent: function(event) {
    // Assumes you're using a Marionette App and it's "vent".
      App.vent.trigger('click', this.model.get('name'));
      return false;
    }
  });
​
  var ImageAndMap = Marionette.CompositeView.extend({
    template: '#template-image-and-map',
    itemView: AreaView,
    itemViewContainer: 'map'
  });
​
​
​
  // make an App
  var App = new Marionette.Application();
​
  // add some regions for automatic dom insertion
  App.addRegions({
    sprites: '#sprites',
    overlay: '#overlay'
  });
​
  // create the default collection
  var buttons = new Buttons();
  buttons.createAll();
​
  // show the views
  App.sprites.show(new SpritesView({collection:buttons}));
  App.overlay.show(new ImageAndMap({collection:buttons}));
​
  App.vent.on('click', function(name) {
    console.log('You clicked: '+name);
  })
​
  App.start();
​
});
​
​
    
</script>
​
<style>
  #sprites {
    background-color: #eee;
  }
  #sprites, #overlay {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0px;
    left: 0px;
  }
  .sprite {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAACtCAYAAADyDywnAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCRUQwREIxMjE4OEIxMUUyOTRGQkFEQjFENkJFMUE0NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCRUQwREIxMzE4OEIxMUUyOTRGQkFEQjFENkJFMUE0NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkVCRjRCNDc1MTdBRDExRTI5NEZCQURCMUQ2QkUxQTQ3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkVCRjRCNDc2MTdBRDExRTI5NEZCQURCMUQ2QkUxQTQ3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+i0od5AAADmFJREFUeNrsmwd0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);
    width: 30px;
    height: 44px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: -10px -10px;
  }
  .insert {
    top: 0px;
    left: 10px;
  }
  .higher {
    top: 0px;
    left: 110px;
  }
  .lower {
    top: 100px;
    left: 110px;
  }
  .insert.mouseover,
  .higher.mouseover,
  .lower.mouseover {
    background-position: -10px -65px;
  }
  .insert.mousedown,
  .higher.mousedown,
  .lower.mousedown {
    background-position: -10px -120px;
  }
</style>
  <div id="controls">
    <div id="sprites"></div>
    <div id="overlay"></div>
  </div>
  
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
pete_otaquipro
0viewers