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