Develop pages

build/js/messenger.js

@@ -489,6 +489,7 @@ window.Messenger.Events = (function() {
       } else {
         this.$message.removeClass('messenger-will-hide-on-navigate');
       }
+      this.trigger('update', this);
       return this.trigger('update', this);
     };
 

index.html

@@ -311,11 +311,6 @@ <h4>Change Language</h4>
 # Need to hide all messages?
 Messenger().hideAll()
 </code><code executable>
-# If your action responds with a promise-like thing, its
-# methods will be copied onto the message:
-
-Messenger().run({}, {url: 'a'}).fail(-> alert "Uh oh")
-</code><code executable>
 # Do you use Backbone? Hook all backbone calls:
 Messenger().hookBackboneAjax()
 

javascripts/demo.js

@@ -0,0 +1,41 @@
+$(function(){
+  Messenger().post("Thanks for checking out Messenger!");
+
+  var loc = ['bottom', 'right'];
+  var style = 'future';
+
+  var $output = $('.controls output');
+  var $lsel = $('.location-selector');
+  var $tsel = $('.theme-selector');
+
+  var update = function(){
+    var classes = 'messenger-fixed';
+
+    for (var i=0; i < loc.length; i++)
+      classes += ' messenger-on-' + loc[i];
+
+    $.globalMessenger({ extraClasses: classes, theme: style });
+    Messenger.options = { extraClasses: classes, theme: style };
+
+    $output.text("Messenger.options = {\n\textraClasses: '" + classes + "',\n\ttheme: '" + style + "'\n}");
+  };
+
+  update();
+
+  $lsel.locationSelector()
+    .on('update', function(pos){
+      loc = pos;
+
+      update();
+    })
+  ;
+
+  $tsel.themeSelector({
+    themes: ['future', 'block', 'air', 'ice']
+  }).on('update', function(theme){
+    style = theme;
+
+    update();
+  });
+
+});

javascripts/execute.coffee

@@ -0,0 +1,19 @@
+$.fn.executr = (opts) ->
+  defaults =
+    codeSelector: 'code[executable]'
+
+  opts = $.extend {}, defaults, opts
+
+  this.on 'click', opts.codeSelector, (e) ->
+    $target = $ e.target
+    $code = $target.parents(opts.codeSelector)
+
+    ctx = window
+    if opts.setUp?
+      CoffeeScript.run opts.setUp, ctx
+
+    CoffeeScript.run $code.text(), ctx
+
+    if opts.tearDown?
+      CoffeeScript.run opts.tearDown, ctx
+

javascripts/location-sel.coffee

@@ -0,0 +1,41 @@
+class LocationSelector extends Backbone.View
+  className: 'location-selector'
+
+  events:
+    'click .bit': 'handleClick'
+
+  render: ->
+    @$el.html ''
+
+    do @draw
+
+  draw: ->
+    @_addBit 'top left'
+    @_addBit 'top right'
+    @_addBit 'top'
+
+    @_addBit 'bottom left'
+    @_addBit 'bottom right'
+    @_addBit 'bottom'
+
+  _addBit: (classes) ->
+    bit = $ '<div>'
+    bit.addClass "bit #{ classes }"
+    bit.attr 'data-position', classes
+    @$el.append bit
+
+    bit
+
+  handleClick: (e) ->
+    $bit = $ e.target
+
+    @trigger 'update', $bit.attr('data-position').split(' ')
+
+$.fn.locationSelector = (opts) ->
+  loc = new LocationSelector $.extend {}, opts,
+    el: this
+
+  $(this).addClass loc.className
+  loc.render()
+
+  loc

javascripts/main.js

@@ -0,0 +1 @@
+console.log('This would be the main JS file.');

javascripts/theme-sel.coffee

@@ -0,0 +1,30 @@
+class ThemeSelector extends Backbone.View
+  tagName: 'ul'
+  className: 'theme-selector'
+
+  events:
+    'click li': 'handleClick'
+
+  render: ->
+    @$el.html ''
+
+    for theme in @options.themes
+      $li = $ '<li>'
+      $li.attr 'data-id', theme
+      $li.text theme
+
+      @$el.append $li
+
+  handleClick: (e) ->
+    $li = $ e.target
+
+    @trigger 'update', $li.attr('data-id')
+
+$.fn.themeSelector = (opts) ->
+  sel = new ThemeSelector $.extend {}, opts,
+    el: this
+
+  $(this).addClass sel.className
+  sel.render()
+
+  sel

spec/MessengerSpec.coffee

@@ -573,6 +573,7 @@ describe 'do ajax', ->
     # - formatTime
     # - findById
     # - message ids / singleton
+    # - specifying defaults
     # - show / hide message events (+ re wasShown)
     # - show calling message.render if not already rendered
     # - message.update with string argument

src/coffee/messenger.coffee

@@ -148,6 +148,8 @@ class _Message extends BaseView
 
         @trigger 'update', @
 
+        @trigger 'update', @
+
     scrollTo: ->
         return unless @options.scroll
 

stylesheets/demo.css

@@ -0,0 +1,33 @@
+.social {
+  position: absolute;
+  top: 10px;
+}
+
+h2 .subtitle {
+  font-size: 14px;
+}
+
+.highlight .c1 {
+  font-size: 12px;
+}
+
+.controls {
+  margin-bottom: 20px;
+}
+
+.controls > div {
+  margin: 0 40px;
+  float: left;
+}
+
+.controls h4 {
+  text-align: center;
+}
+
+.clear {
+  clear: both;
+  height: 0;
+  margin: 0;
+  margin-bottom: 15px;
+  border-width: 0;
+}

stylesheets/location-sel.css

@@ -0,0 +1,28 @@
+.location-selector {
+  width: 140px;
+  height: 100px;
+  background-color: #eeeeee;
+  position: relative; }
+  .location-selector .bit {
+    background-color: #dddddd;
+    cursor: pointer;
+    position: absolute; }
+    .location-selector .bit:hover {
+      background-color: #cccccc; }
+    .location-selector .bit.top, .location-selector .bit.bottom {
+      height: 25%;
+      width: 40%;
+      margin: 0 30%; }
+    .location-selector .bit.top {
+      top: 0; }
+    .location-selector .bit.bottom {
+      bottom: 0; }
+    .location-selector .bit.right, .location-selector .bit.left {
+      height: 20%;
+      width: 20%;
+      margin-left: 0;
+      margin-right: 0; }
+    .location-selector .bit.right {
+      right: 0; }
+    .location-selector .bit.left {
+      left: 0; }