Propane Hacks

caveatPatchor.js

Object.extend(Campfire.Message.prototype, {
  addAvatar: function() {
    if (this.actsLikeTextMessage()) {
      var author = this.authorElement();
      var avatar = '';

      if (author.visible()) {
        author.hide();
        if (this.bodyCell.select('strong').length === 0) {
          //this.bodyCell.insert({top: '<strong style="color:#333;">'+author.textContent+'</strong><br>'});
          this.bodyCell.insert({top: '<strong style="color:#333;"></strong>'});
          avatar = author.getAttribute('data-avatar') || 'http://asset1.37img.com/global/missing/avatar.png?r=3';
          author.insert({after: '<img alt="'+this.author()+'" width="32" height="32" align="top" class="avatar" style="opacity: 1.0; margin-left: 5px; border-radius:3px" src="'+avatar+'">'});
        }
      }
    }
  }
});

/* if you can wrap rather than rewrite, use swizzle like this: */
swizzle(Campfire.Message, {
  setAuthorVisibilityInRelationTo: function($super, message) {
    $super(message);
    this.addAvatar();
  }
});


/* defining a new responder is probably the best way to insulate your hacks from Campfire and Propane */
Campfire.AvatarMangler = Class.create({
  initialize: function(chat) {
    this.chat = chat;

    var messages = this.chat.transcript.messages;
    for (var i = 0; i < messages.length; i++) {
      var message = messages[i];
      message.addAvatar();
    }

    this.chat.layoutmanager.layout();
    this.chat.windowmanager.scrollToBottom();
  },

  onMessagesInserted: function(messages) {
    var scrolledToBottom = this.chat.windowmanager.isScrolledToBottom();

    for (var i = 0; i < messages.length; i++) {
      var message = messages[i];
      message.addAvatar();
    }

    if (scrolledToBottom) {
      this.chat.windowmanager.scrollToBottom();
    }
  }
});

/* Here is how to install your responder into the running chat */
Campfire.Responders.push("AvatarMangler");
window.chat.installPropaneResponder("AvatarMangler", "avatarmangler");

cf_chat.css

body {
  background-color:white ! important;
}
#upload_target {
  display:none ! important;
}
div.bottom {
  padding:0px ! important;
  margin:0px ! important;
  background-image: none ! important;
}
table.chat {
  margin-bottom: 5px ! important;
}
div#last_message{
  height: 10px ! important;
  padding-bottom: 5px ! important;
}
div#clipper > div {
  display:none ! important;
}
div.speak {
  width: 100% ! important;
  padding:0px ! important;
  margin:0px ! important;
  height:15px ! important;
  bottom:0px ! important;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAN0lEQVQ4EWP8//8/NwMVAQvQLAkqmscAMlBy0Bs46mXKomjwxzIjMKf8p8yTqLqZULmU80aggQDfMQgRDRblXgAAAABJRU5ErkJggg==) top repeat-x ! important;
}
div.Left div.col {
  margin:0px ! important;
  padding-top: 0px ! important;
  padding-bottom: 0px ! important;
  background-image:none ! important;
}
div#Header {
  display:none ! important;
}
div#Sidebar {
  display:fixed ! important;
  right:-800px ! important;
  margin:0px ! important;
  padding:0px ! important;
}
div#corner_logo {
  display:none ! important;
}
tbody#chat div, tbody#chat span {
  font-size: 0.9em ! important;
}
div.Left {
  width: 100% ! important;
  padding: 0px ! important;
  margin: 0px ! important;
}
div#Wrapper {
  padding: 0px ! important;
  margin: 0px ! important;
}
div#Container {
  margin:0px auto 0pt ! important;
  padding:0px ! important;
  padding-bottom:5px ! important;
  background-color:#FFFFFF ! important;
}
form#search_form { display: none ! important; }
tr.propane_search td { background-color: #ffd8d8 ! important; }
tr.propane_current_search td { background-color: #ff9090 ! important; }
div#open_bar { display: none ! important; }
tr.propane_alert_match:not(.propane_search) td.body { background-color: #D9FAD9 ! important; }
tr.propane_hidden_enterleave { display: none ! important; }

tbody#chat td.body {
  vertical-align: middle;
}