diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..ba3b77f Binary files /dev/null and b/.DS_Store differ diff --git a/index.html b/index.html index 57954bb..a53343a 100644 --- a/index.html +++ b/index.html @@ -9,10 +9,7 @@ - - - - +
@@ -28,4 +25,4 @@
- \ No newline at end of file + diff --git a/js/.DS_Store b/js/.DS_Store new file mode 100644 index 0000000..3b74eae Binary files /dev/null and b/js/.DS_Store differ diff --git a/js/Playlist.js b/js/Playlist.js index b641bf2..6ec3767 100644 --- a/js/Playlist.js +++ b/js/Playlist.js @@ -1,49 +1,21 @@ +define(['jquery'], function($) { + var Playlist = function(){ + // initialize + this.playlist = JSON.parse(sessionStorage.getItem('playlist')) || []; + this.updatePlaylist(); + }; -var Playlist = function(){ - // initialize - this.playlist = JSON.parse(sessionStorage.getItem('playlist')) || []; - this.listenAddSong(); + Playlist.prototype.addSong = function(song){ + this.playlist.push(song); + this.updatePlaylist(); + }; + Playlist.prototype.removeSong = function(index){ + this.playlist.splice(index, 1); + this.updatePlaylist(); + }; + Playlist.prototype.updatePlaylist = function() { + sessionStorage.setItem('playlist', JSON.stringify(this.playlist)); + }; - this.updatePlaylist(); - -}; -Playlist.prototype.listenAddSong = function(){ - var that = this; - $('#addSongForm').on('submit', function(event){ - that.addSong($('#song').val()); - $('#song').val(''); - - return false; - }); -}; -Playlist.prototype.addSong = function(song){ - this.playlist.push(song); - this.updatePlaylist(); -}; -Playlist.prototype.removeSong = function(index){ - this.playlist.splice(index, 1); - this.updatePlaylist(); -}; -Playlist.prototype.updatePlaylist = function() { - sessionStorage.setItem('playlist', JSON.stringify(this.playlist)); - this.updatePlaylistDom(); -}; -Playlist.prototype.updatePlaylistDom = function(){ - var that = this; - var playlistDom = this.playlist.map(function(song, index){ - var removeButton = document.createElement("button"); - removeButton.appendChild(document.createTextNode("remove")); - $(removeButton).click(function(){ - that.removeSong(index); - }); - $(removeButton).addClass("btn"); - - var li = document.createElement('li'); - li.appendChild(document.createTextNode(song)); - li.appendChild(removeButton); - return li; - }); - - $('#currentPlaylist').html(playlistDom); - -}; + return Playlist; +}); diff --git a/js/PlaylistView.js b/js/PlaylistView.js new file mode 100644 index 0000000..555aa07 --- /dev/null +++ b/js/PlaylistView.js @@ -0,0 +1,45 @@ +define(['Playlist', 'Song'], function(Playlist, Song) { + var PlaylistView = function() { + // console.log("test") + this.playlist = new Playlist(); + this.updatePlaylistDom(); + this.listenAddSong(); + + }; + + PlaylistView.prototype.listenAddSong = function(){ + var that = this; + $('#addSongForm').on('submit', function(event){ + var song = new Song($('#song').val()); + that.playlist.addSong(song); + that.updatePlaylistDom(); + $('#song').val(''); + + return false; + }); + }; + + PlaylistView.prototype.updatePlaylistDom = function(){ + var playlist = this.playlist; + var that = this; + var playlistDom = playlist.playlist.map(function(song, index){ + var removeButton = document.createElement("button"); + removeButton.appendChild(document.createTextNode("remove")); + $(removeButton).click(function(){ + playlist.removeSong(index); + that.updatePlaylistDom(); + }); + $(removeButton).addClass("btn"); + + var li = document.createElement('li'); + li.appendChild(document.createTextNode("Title: " + song.title)); + li.appendChild(removeButton); + return li; + }); + + $('#currentPlaylist').html(playlistDom); + + }; + + return PlaylistView; +}); diff --git a/js/Song.js b/js/Song.js new file mode 100644 index 0000000..2290d74 --- /dev/null +++ b/js/Song.js @@ -0,0 +1,7 @@ +define([], function() { + var Song = function(title) { + this.title = title + } + + return Song; +}) diff --git a/js/main.js b/js/main.js index f1fad65..061ac84 100644 --- a/js/main.js +++ b/js/main.js @@ -1,5 +1,20 @@ -$(function(){ +requirejs.config({ + baseUrl: 'js', + paths: { + jquery: 'vendors/jquery.min', + bootstrap: 'vendors/bootstrap.min' + }, + shim: { + bootstrap: { + deps: ['jquery'] + } + } +}); - var playlist = new Playlist(); +requirejs(['jquery', 'bootstrap', 'PlaylistView'], function($, bootstrap, PlaylistView) { + $(function(){ -}); \ No newline at end of file + var playlistView = new PlaylistView(); + + }); +}); diff --git a/js/vendors/require.js b/js/vendors/require.js new file mode 100644 index 0000000..693164a --- /dev/null +++ b/js/vendors/require.js @@ -0,0 +1,36 @@ +/* + RequireJS 2.1.20 Copyright (c) 2010-2015, The Dojo Foundation All Rights Reserved. + Available via the MIT or new BSD license. + see: http://github.com/jrburke/requirejs for details +*/ +var requirejs,require,define; +(function(ba){function G(b){return"[object Function]"===K.call(b)}function H(b){return"[object Array]"===K.call(b)}function v(b,c){if(b){var d;for(d=0;dthis.depCount&&!this.defined){if(G(l)){if(this.events.error&&this.map.isDefine||e.onError!==ca)try{f=h.execCb(c,l,b,f)}catch(d){a=d}else f=h.execCb(c,l,b,f);this.map.isDefine&& +void 0===f&&((b=this.module)?f=b.exports:this.usingExports&&(f=this.exports));if(a)return a.requireMap=this.map,a.requireModules=this.map.isDefine?[this.map.id]:null,a.requireType=this.map.isDefine?"define":"require",w(this.error=a)}else f=l;this.exports=f;if(this.map.isDefine&&!this.ignore&&(q[c]=f,e.onResourceLoad))e.onResourceLoad(h,this.map,this.depMaps);y(c);this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete= +!0)}}else t(h.defQueueMap,c)||this.fetch()}},callPlugin:function(){var a=this.map,b=a.id,d=i(a.prefix);this.depMaps.push(d);s(d,"defined",u(this,function(f){var l,d;d=n(aa,this.map.id);var g=this.map.name,P=this.map.parentMap?this.map.parentMap.name:null,p=h.makeRequire(a.parentMap,{enableBuildCallback:!0});if(this.map.unnormalized){if(f.normalize&&(g=f.normalize(g,function(a){return c(a,P,!0)})||""),f=i(a.prefix+"!"+g,this.map.parentMap),s(f,"defined",u(this,function(a){this.init([],function(){return a}, +null,{enabled:!0,ignore:!0})})),d=n(m,f.id)){this.depMaps.push(f);if(this.events.error)d.on("error",u(this,function(a){this.emit("error",a)}));d.enable()}}else d?(this.map.url=h.nameToUrl(d),this.load()):(l=u(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),l.error=u(this,function(a){this.inited=!0;this.error=a;a.requireModules=[b];A(m,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&y(a.map.id)});w(a)}),l.fromText=u(this,function(f,c){var d=a.name,g=i(d),P=M;c&&(f=c);P&& +(M=!1);r(g);t(k.config,b)&&(k.config[d]=k.config[b]);try{e.exec(f)}catch(m){return w(B("fromtexteval","fromText eval for "+b+" failed: "+m,m,[b]))}P&&(M=!0);this.depMaps.push(g);h.completeLoad(d);p([d],l)}),f.load(a.name,p,l,k))}));h.enable(d,this);this.pluginMaps[d.id]=d},enable:function(){V[this.map.id]=this;this.enabling=this.enabled=!0;v(this.depMaps,u(this,function(a,b){var c,f;if("string"===typeof a){a=i(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c= +n(L,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;s(a,"defined",u(this,function(a){this.undefed||(this.defineDep(b,a),this.check())}));this.errback?s(a,"error",u(this,this.errback)):this.events.error&&s(a,"error",u(this,function(a){this.emit("error",a)}))}c=a.id;f=m[c];!t(L,c)&&(f&&!f.enabled)&&h.enable(a,this)}));A(this.pluginMaps,u(this,function(a){var b=n(m,a.id);b&&!b.enabled&&h.enable(a,this)}));this.enabling=!1;this.check()},on:function(a,b){var c=this.events[a];c||(c=this.events[a]= +[]);c.push(b)},emit:function(a,b){v(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};h={config:k,contextName:b,registry:m,defined:q,urlFetched:S,defQueue:C,defQueueMap:{},Module:Z,makeModuleMap:i,nextTick:e.nextTick,onError:w,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=k.shim,c={paths:!0,bundles:!0,config:!0,map:!0};A(a,function(a,b){c[b]?(k[b]||(k[b]={}),U(k[b],a,!0,!0)):k[b]=a});a.bundles&&A(a.bundles,function(a,b){v(a, +function(a){a!==b&&(aa[a]=b)})});a.shim&&(A(a.shim,function(a,c){H(a)&&(a={deps:a});if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=h.makeShimExports(a);b[c]=a}),k.shim=b);a.packages&&v(a.packages,function(a){var b,a="string"===typeof a?{name:a}:a;b=a.name;a.location&&(k.paths[b]=a.location);k.pkgs[b]=a.name+"/"+(a.main||"main").replace(ha,"").replace(Q,"")});A(m,function(a,b){!a.inited&&!a.map.unnormalized&&(a.map=i(b,null,!0))});if(a.deps||a.callback)h.require(a.deps||[],a.callback)},makeShimExports:function(a){return function(){var b; +a.init&&(b=a.init.apply(ba,arguments));return b||a.exports&&da(a.exports)}},makeRequire:function(a,j){function g(c,d,p){var k,n;j.enableBuildCallback&&(d&&G(d))&&(d.__requireJsBuild=!0);if("string"===typeof c){if(G(d))return w(B("requireargs","Invalid require call"),p);if(a&&t(L,c))return L[c](m[a.id]);if(e.get)return e.get(h,c,a,g);k=i(c,a,!1,!0);k=k.id;return!t(q,k)?w(B("notloaded",'Module name "'+k+'" has not been loaded yet for context: '+b+(a?"":". Use require([])"))):q[k]}J();h.nextTick(function(){J(); +n=r(i(null,a));n.skipMap=j.skipMap;n.init(c,d,p,{enabled:!0});D()});return g}j=j||{};U(g,{isBrowser:z,toUrl:function(b){var d,e=b.lastIndexOf("."),j=b.split("/")[0];if(-1!==e&&(!("."===j||".."===j)||1g.attachEvent.toString().indexOf("[native code"))&&!Y?(M=!0,g.attachEvent("onreadystatechange",b.onScriptLoad)):(g.addEventListener("load",b.onScriptLoad,!1),g.addEventListener("error",b.onScriptError,!1));g.src=d;J=g;D?y.insertBefore(g,D):y.appendChild(g);J=null;return g}if(ea)try{importScripts(d),b.completeLoad(c)}catch(i){b.onError(B("importscripts", +"importScripts failed for "+c+" at "+d,i,[c]))}};z&&!s.skipDataMain&&T(document.getElementsByTagName("script"),function(b){y||(y=b.parentNode);if(I=b.getAttribute("data-main"))return r=I,s.baseUrl||(E=r.split("/"),r=E.pop(),O=E.length?E.join("/")+"/":"./",s.baseUrl=O),r=r.replace(Q,""),e.jsExtRegExp.test(r)&&(r=I),s.deps=s.deps?s.deps.concat(r):[r],!0});define=function(b,c,d){var e,g;"string"!==typeof b&&(d=c,c=b,b=null);H(c)||(d=c,c=null);!c&&G(d)&&(c=[],d.length&&(d.toString().replace(ja,"").replace(ka, +function(b,d){c.push(d)}),c=(1===d.length?["require"]:["require","exports","module"]).concat(c)));if(M){if(!(e=J))N&&"interactive"===N.readyState||T(document.getElementsByTagName("script"),function(b){if("interactive"===b.readyState)return N=b}),e=N;e&&(b||(b=e.getAttribute("data-requiremodule")),g=F[e.getAttribute("data-requirecontext")])}g?(g.defQueue.push([b,c,d]),g.defQueueMap[b]=!0):R.push([b,c,d])};define.amd={jQuery:!0};e.exec=function(b){return eval(b)};e(s)}})(this);