Key Information

Register
Submit
The challenge is finished.

Challenge Overview

The main goal of this challenge is to refactor header section in topcoder community site to an AngularJS directive that can be dropped into any of the site's Angular apps. It will soon take the place of the existing header as we move off of Wordpress.

Challenge Description :
We need to rewrite and clean up files header.php and header-main.php as an Angular directive. This angular directive can be used by any other AngularJS app / pages which need the topcoder header. The header contains the following parts:
1) The dropdown menus (challenges, community, about topcoder, blog)
2) The login button (the login modal window is out of the scope) - links to http://www.topcoder.com/?action=showlogin
3) The register button (the signup modal window is out of the scope) - links to http://www.topcoder.com/?action=callback
4) The search modal (clicking the search link the rightmost upper corner, will pop out a search modal) 
5) My TopCoder widget displayed (only after user logs in)
6) The logout link

Refactor Requirements:
Modify the submitted code to the angularJS styleguide https://gitlab.com/topcoderinc/angularjs-styleguide/tree/master
This could be either serveral directives, or just 1 (1 seems like the easiest way to have something that can just be dropped into an existing app). They should all be things we could just pull into an Angular app (which is what's going to happen -- they're going to be used by lots of different Angular apps). and please ensure header will display correct content on All templates (home, challenge listing, blog, etc) 
When creating directives, please don't just wrap jQuery in a veneer of Angular.

Here's an idea of what the piece may look like (just suggestions -- again, this could be one directive or several):

  • services
    • memberProfileService
    • etc
  • directives
    • dropdown-menu
    • my-topcoder
    • etc
  • templates (partials)
    • header
    • etc
  • controllers:
    • myTopCoderCtrl
    • etc

- Any inline javascript in header.php and the referenced javascript files like init-header.js should be put in the angular code.

- the dropdown menu items should be put in a hardcoded object and read by directive

- Any new js/css files should be included in the Gruntfile.js as part of the build process. All tests must pass after the included files are minified.

Test Cases : 
Please be sure this refactor and clean up will not break any existing functionality.
- Dropdown menu
- Login / Register buttion
- Logout 
- My TopCoder widget
- Search widget
-
 Challenges listings
- Register / Submit to a develop or Design challenge

During development and review process, don't submit or register to any live challenges, so please ensure your installation has been pointed to QA env, or see config.json.

Browsers Requirements : 
- IE10
- IE11
- Latest Safari
- Latest Firefox
- Latest Chrome

Deployment Guide :

Local Setup : https://gitlab.com/topcoderinc/tc-site/blob/master/README.md#local-env-setup, if want to disable local minification, please configure it on config.json



Final Submission Guidelines

  1. Please submit only PATCH files, reference :https://gitlab.com/topcoderinc/tc-site#challenge-submission-and-review
  2. Any new js or css file must be included in the registry. learn about this on script and style registry section
  3. We will have winner to submit pull request once winner declared

ELIGIBLE EVENTS:

2015 topcoder Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30046931