caveatPatchor.js

/*
  As of version 1.1.2, Propane will load and execute the contents of
  ~Library/Application Support/Propane/unsupported/caveatPatchor.js
  immediately following the execution of its own enhancer.js file.

  You can use this mechanism to add your own customizations to Campfire
  in Propane.

  Below you'll find two customization examples.

  1 - A responder that adds avatars to your chat view
  2 - A responder that displays CloudApp images inline

  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  THE SOFTWARE.
*/

var displayAvatars = true;
var displayCloudAppImages = true;


/* 
  Display avatars in the chat view - based on code originally by @tmm1
*/

if (displayAvatars) {

  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; float: right;"></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" style="box-shadow: 0 1px 2px #888; opacity: 1.0; 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");
}


/* 
  Display CloudApp images inline.

  This responder illustrates using Propane's requestJSON service to request 
  JSON from remote (non-authenticated) servers and have the results passed
  to a callback of your choosing.
*/

if (displayCloudAppImages) {

  Campfire.CloudAppExpander = Class.create({
    initialize: function(chat) {
      this.chat = chat;
      var messages = this.chat.transcript.messages;
      for (var i = 0; i < messages.length; i++) {
        this.detectCloudAppURL(messages[i]);
      }
    },

    detectCloudAppURL: function(message) {
      /* we are going to use the messageID to uniquely identify our requestJSON request
         so we don't check pending messages */
      if (!message.pending() && message.kind === 'text') {
        var links = message.bodyElement().select('a:not(image)');
        if (links.length != 1) {
          return;
        }
        var href = links[0].getAttribute('href');
        var match = href.match(/^https?:\/\/cl.ly\/[A-Za-z0-9]+\/?$/);
        if (!match) return;
        window.propane.requestJSON(message.id(), href, 'window.chat.cloudappexpander', 'onEmbedDataLoaded', 'onEmbedDataFailed');
      }
    },

    onEmbedDataLoaded: function(messageID, data) {
      var message = window.chat.transcript.getMessageById(messageID);
      if (!message) return;

      if (data['item_type'] === 'image') {
        var imageURL = data['content_url'];
        message.resize((function() {
          message.bodyCell.insert({bottom: '<div style="width:100%; margin-top:5px; padding-top: 5px; border-top:1px dotted #ccc;"><a href="'+imageURL+'" class="image loading" target="_blank">' + '<img src="'+imageURL+'" onload="$dispatch(&quot;inlineImageLoaded&quot;, this)" onerror="$dispatch(&quot;inlineImageLoadFailed&quot;, this)" /></a></div>'});
        }).bind(this));
      }
    },

    onEmbedDataFailed: function(messageID) {
      /* No cleanup required, we only alter the HTML after we get back a succesful load from the data */
    },

    onMessagesInsertedBeforeDisplay: function(messages) {
      for (var i = 0; i < messages.length; i++) {
        this.detectCloudAppURL(messages[i]);
      }
    },

    onMessageAccepted: function(message, messageID) {
      this.detectCloudAppURL(message);
    }
  });

  Campfire.Responders.push("CloudAppExpander");
  window.chat.installPropaneResponder("CloudAppExpander", "cloudappexpander");
}

cf_chat.css

body, .dialog, td {
  /* MODS Trevor Squires: make sure the body background is
     white so that our div.speak clipping gradient doesn't
     look like rubbish on the standard gray body background */
  background-color: #FFFFFF ! important;
  font: 13px/1.3em "Helvetica" !important;
}

div.col {
  padding: 0 !important;
}
tbody.chat td {
  padding: 3px 5px !important;
/*  border: 0 !important;*/
}
tbody.chat td.body {
  border-bottom: 1px solid #000 !important;
}
td.person, 
table.chat tr.you td,
table.chat tr.leave_message td, 
table.chat tr.enter_message td, 
table.chat tr.kick_message td {
  background-color: white !important;
}
td.person {
    background-color: #f5f5f5 !important;
}
table.chat tr.you td {
    background-color: #f5f5f5 !important;
}

table.chat tr.you td {
  color: #333 !important;
}
td.person {
  font-weight: bold !important;
}
table.chat tr.leave_message td, 
table.chat tr.enter_message td, 
table.chat tr.kick_message td {
  color: #777 !important;
}
a:link, a:visited {
  color: #b00 !important;
}
table.chat td a img {
    border: solid 5px #f2f2f2 !important;
}
tr.lock_message, tr.unlock_message {
  color: red !important;
  font-weight: bold !important;
}


#upload_target {
  display:none ! important;
}
div.bottom {
  padding:0px ! important;
  margin:0px ! important;
  background-image: none ! important;
}
/* MODS Trevor Squires - changed last_message, clipper and speak styles 
   so that a nice white 'fade' gradient overlays the bottom of the 
   transcript.
   If you want the clipping gradient to be a different size, tweak
   #last_message height and padding to create enough space.
*/
div#last_message{
  height: 10px ! important;
  padding-bottom: 5px ! important;
}
div#clipper > div {
  display:none ! important;
}
/* Override the URL for div.speak background image.
   Note how I'm using a data: URL to get around the fact that
   the stylesheet can't refer to local resources.
   I created the base64 version of my gradient image  in Ruby like this:
   puts Base64.encode64(`cat speak-gradient.png`).split(/\n/).join()
   Also note that I set the height of div.speak to be the same as the sum
   of div#clipper height and padding and made sure bottom was 0 so everything
   lined up properly.
*/
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: .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;
}
tr.propane_search td { background-color: #ffd8d8 ! important; }

tr.propane_current_search td { background-color: #ff9090 ! important; }

form#search_form { display: none ! 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; }