main

main.js

/*Require JS Config Section for including JQuery */
require.config({
    paths:{
        jquery: 'jquery-2.1.1.min'
    }
});

//Defining modules

define("MovieOps", [], function(){
    
    "use strict";
    /* load and save movies */

    var STORE_NAME = "movies";

    function savemovieData (movies) {
        localStorage.setItem(STORE_NAME, JSON.stringify(movies));
    }

    function loadmovieData () {
        var storedmovies = localStorage.getItem(STORE_NAME);
        if(storedmovies) {
            return JSON.parse(storedmovies);
        }
        return [];
    }

    function clearmovieData () {
        localStorage.removeItem(STORE_NAME);
    }

    return{
        savemovieData:savemovieData,
        loadmovieData:loadmovieData,
        clearmovieData:clearmovieData
    }
});

define("MovieDom", [], function(){
 /* creating DOM movie elements */

    var movieTemplate = '<li class="movie"><input class="description" type="text" placeholder="Enter movie name..." /> <button class="delete-button">Delete</button></li>';

    function rendermovies(movies) {
        var elementArray = $.map(movies, _rendermovie);

        $("#movie-list")
            .empty()
            .append(elementArray);
    }

    function renderNew() {
        var $movieList = $("#movie-list");
        $movieList.prepend(_rendermovie({}));
    }

    function _rendermovie(movie) {
        var $movie = $(movieTemplate);
        if(movie.complete) {
            $movie.find(".complete").attr("checked", "checked");
        }
        $movie.find(".description").val(movie.description);
        return $movie;
    }
    //Revealing Design Pattern, just returning the objects defined above.
    return{
        rendermovies:rendermovies,
        renderNew:renderNew
    }
});

 /* movie management */
define("movieManagement",["MovieOps","MovieDom"],function(MovieOps,MovieDom){

    function add() {
        MovieDom.renderNew();
    }

    function remove(clickEvent) {
        var movieElement = clickEvent.target;
        $(movieElement).closest(".movie").remove();
    }

    function clear() {
        MovieOps.clearmovieData();
        render();
    }

    function save() {
        var movies = [];
        $("#movie-list .movie").each(function (index, movie) {
            var $movie = $(movie);
            movies.push({
                complete: $movie.find(".complete").prop('checked'),
                description: $movie.find(".description").val()
            });
        });

        MovieOps.savemovieData(movies);
    }


    function render() {
        MovieDom.rendermovies(MovieOps.loadmovieData());
    }

    //Revealing Design Pattern, just returning the objects defined above.
    return{
        add:add,
        remove:remove,
        clear:clear,
        save:save,
        render:render
    }
});

define("movieApp",["movieManagement"],function(movieManagement){

     /* event handlers */
    //  Its good idea to prefix private methods with _
    function _registerEventHandlers() {
        $("#new-movie-button").on("click", movieManagement.add);
        $("#delete-all-button").on("click", movieManagement.clear);
        $("#save-button").on("click", movieManagement.save);
        $("#movie-list").on("click", ".delete-button", movieManagement.remove);
    }

    return{
        init:function(){
            _registerEventHandlers();
            movieManagement.render();
        }
    }
});

//To specfify what modules we are dependent on, we need to include require

require(["jquery","movieApp"],function($, movieApp){
   
         /* initialize app */
         movieApp.init();
});