Created
December 21, 2016 11:54
-
-
Save rahulsahay19/a1313dd2037cfde3dac0fd6832674def to your computer and use it in GitHub Desktop.
main
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*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", ["jquery"], 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",["jquery","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",["jquery","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(["movieApp"],function(movieApp){ | |
/* initialize app */ | |
movieApp.init(); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment