Description

This is an entry for the "Show off your CSS chops!" CloudSpokes Challenge (CSC1962). The base application got HEAVILY modified to represent the original chatter feed DOM structure for styling purposes. My approach was to use the already done CSS files and assets from the existing chatter page (since equal visuals should have the same style definitions anyway...).

On the way i made the application more "angular" and future ready by extracting repeated "components" (starting with "chatterfeed") and packing them into directives with additional control logic. Please referr to csc1962/public/js/directives.js for details and comments on each of them.

I switched the application to nodejs with express, although it could be easily backported to ruby.

Templates

The templates used by the directives can be found in the csc1962/public/partials/templates/chatterfeed folder.

Installation / deployment

Setting up project folder

Create a folder in Your workspace:

$ cd ~/workspace
~workspace$ mkdir csc1962

Getting source

Unpack the submitted zip archive:

~workspace/csc1962$ unzip csc1962.zip

or alternatively get source from git:

~workspace$ git clone https://github.com/bitbay/csc1962.git

Configuration

Running the application does not need any extra configuration. Simply install node dependencies with

~workspace/csc1962$ npm install -d

Running the application

Simply run

~workspace/csc1962$ node app.js

Now You can navigate with a browser to http://localhost:3000/.

Running tests

No tests are included in this entry.

Heroku setup

Creating application

Create a new application with the heroku command-line client (or toolchain):

$ heroku apps:create {app}

Configure web process

Assign (at least) one web process to the application with:

$ heroku ps:scale web=1

Deploy to heroku

Once created, push the git source to the heroku master branch:

~workspace/csc1962$ git push heroku master

If no errors, You can check the application on the web, navigating to http://{app}.herokuapps.com

Application Internals

Modifications done in the base application

The view partial of feed.html was completely modified to represent the structure of the chatter page on salesforce.com. Header, left and main content.

I switched the chatterfeed.json (v23) to a new one with v24 syntax, and some more variety in content (attachments).

I commented out the "parsing" of the loaded json chatterfeed in the main controller, since to have as much as possible from the existing chatter feed functionality more data was needed (some originally stripped out feed.comments keys).

General clean-up following the boy scout rule.

I deleted some not-used images.

Services

I added two services, one for basically storing some "currenUser" data, which could be populated by other services (login) and a fake id generator that is used in adding some bogus ids to newly created comments.

Body/message parsing

The created chatterfeedbody directive goes beyond simply echoing the feeditem.body.text, and parses the actual feeditem.body.messageSegments and creates inline anchors in the content.

It is re-used in both the chatterfeed and the chatterfeedcomment directives - one, centralized body parser.

CSS and images

All sprites and CSS where downloaded from and property of salesforce.com, except styles.css and normalize.css As mentioned before, the approach is based on the most seamless integration with the existing feed reader.

Level of supporting original chatter feed actions/features

The application includes:

• creating/deleting a feed.item comment
• bookmarking a feed.item
• deleting a feed.item
• like/unlike a feed.item/comment
• visualize attachments