Plugins

This are example plugins to get you started.

OS X

Save the code in a file ~/Library/Application Support/Bungloo/Plugin.js. You have to create this directory yourself.

You can add CSS too, create the file ~/Library/Application Support/Bungloo/Plugin.css where you can put your personal CSS.

Since OS X 10.7 Lion, the ~/Library/ folder is hidden by default. If you want to save your own CSS file, open the Finder and choose Go → Go to folder… and enter ~/Library/Application Support/, there you can create the Folder Bungloo, if it doesn't exist and copy the plugin file there. You can also open the Library folder by choosing the Library menu item that appear in the Go menu while pressing the Option ⌥ key.

An alternative is to make the ~/Library folder visible. To do this, open the Terminal and type in chflags nohidden ~/Library/. This will show the Library folder in the finder. If you want to remove the folder from the finder, you have to open the Terminal again and type in chflags hidden ~/Library/ and the folder is gone.

To ease plugins development you can enable WebKit inspector for Tent windows using executing this command in a Terminal window: defaults write nu.jabs.apps.bungloo WebKitDeveloperExtras -bool YES. To open the inspector, right click on the view and choose Inspect Element from the contextual menu.

Windows

The paths for the plugins on Windows 7 are:

C:\Users\USERNAME\.config\bungloo\

So Bungloo creates a .config directory in your home directory, I am sure you will find out where your home directory is on the other Windows versions.

Linux

The paths for the plugins on Linux are more confortable:

~/.config/bungloo/Plugin.js
~/.config/bungloo/Plugin.css

More

You can use the embedded jQuery too.

If you are using more then one plug-in then you can save them in different files (within the same directory as Plugin.js) and use require.js to load them from within the Plugin.js file (you need to prepend the path with plugins/):

require( [
    'plugins/hide-replies',
    'plugins/scroll-lock',
    'plugins/marked-post'
    ], function() {}
);

Plugins can get the JSON representation of a post through the status property of its li tag.

document.getElementById('post-' + post_id + '-timeline').status;

---

Hide posts with stopwords plugin

// hide posts with stopwords
$(document).ready(function() {
  if(bungloo.timeline) {
    bungloo.timeline.body.addEventListener( 'DOMNodeInserted', filter, false );
  }
});

function filter(e) {
  var stopwords = [
    // Add the stopwords here
    'apple',
    '#iPhone'
  ];
  var element = e.target;
  var parent = element.parentNode;
  if(parent != bungloo.timeline.body) return;
  var text = element.innerHTML;
  for(var i=0, count=stopwords.length; i<count; ++i) {
    if(text.indexOf(stopwords[i]) > -1) {
      parent.removeChild(element);
      return;
    }
  }   
}

Mark post plugin

A plugin which lets you mark particular posts so you don't forget them in your timeline

// mark posts with dbl-click
$('ol').delegate('a', 'click dblclick', function(e) {
	e.stopPropagation();
}).delegate('li', 'dblclick', function(e) {
	$(this).toggleClass('selected');
});

And add this to your CSS plugin file:

/* mark posts with dbl-click */
.selected {
	border-left: 5px solid green;
	padding-left: 3px;
}

Make the font BIGGER

Better readability on big resolutions screens (css)

/* bigger font */
ol li .message {
  font-size: 1.5em;
}

/* better names distinction */
ol li .message a.name {
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: .8em;
  font-weight: normal;
  padding: 1px 2px;
}
ol li:hover .message a.name {
  background: #efefef; 
}

Make Bungloo “safe for work”

Hides all colorful avatars, images, maps, videos, etc.

.sidebar-user, .image, .images { display: none; }
.data { margin-left: 0; }

More

Another set of plugins is available at https://github.com/poweruser82/bungloo-plugins

A minimal CSS theme is at https://github.com/sfcgeorge/Minimaliffic