From 323af1f0d01e548132b741eb6b5723d3547853f2 Mon Sep 17 00:00:00 2001 From: Zuriel Yahav Date: Wed, 4 Jan 2017 23:44:08 +0200 Subject: [PATCH 01/14] html + main --- ex9/js/main.js | 95 ++++++++++++++++++++++++++++++++++++++++++++++ ex9/phonebook.html | 79 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 174 insertions(+) create mode 100644 ex9/js/main.js create mode 100644 ex9/phonebook.html diff --git a/ex9/js/main.js b/ex9/js/main.js new file mode 100644 index 0000000..b4e7ab4 --- /dev/null +++ b/ex9/js/main.js @@ -0,0 +1,95 @@ +require(['ajaxGet'], function(ajaxGet) { + $(function() { + var on; + setEvents(); + on = { + loadList: function() { + ajaxGet('json/data.json', function(phoneBookData) { + $('li').remove(); + $("#phoneBookTemplate").tmpl( phoneBookData ) + .appendTo( "#phoneBook" ); + }); + }, + searchInput: function() { + console.log('searchInput'); + if($('#textSearch').val() === '') { + $( "#btnFilter" ).prop( "disabled", true ); + } else { + $( "#btnFilter" ).prop( "disabled", false ); + } + }, + searchChange: function() { + console.log('searchChange'); + if($('#textSearch').val() === '') { + $( "#btnFilter" ).prop( "disabled", true ); + } else { + $( "#btnFilter" ).prop( "disabled", false ); + } + }, + filter: function() { + console.log('filter click'); + }, + searchOn: function() { + console.log('searchOn'); + // Search off + $( "#btnFilter" ).prop( "disabled", true ); + $('#textSearch').show(); + $('#btnFilter').show(); + $('#btnSearchOff').show(); + $('#btnSearchOn').hide(); + }, + searchOff: function() { + console.log('searchOff'); + // Search off + $('#textSearch').hide(); + $('#btnFilter').hide(); + $('#btnSearchOff').hide(); + $('#btnSearchOn').show(); + }, + asc: function() { + console.log('asc'); + $('#btnASC').hide(); + $('#btnDESC').show(); + }, + desc: function() { + console.log('desc'); + $('#btnASC').show(); + $('#btnDESC').hide(); + } + }; + + function setEvents() { + $('#btnReloadList').click(function() { + on.loadList(); + }); + + $('#btnSearchOn').click(function() { + on.searchOn(); + }); + + $('#btnSearchOff').click(function() { + on.searchOff(); + }); + + $('#textSearch').change(function() { + on.searchChange(); + }); + + $('#textSearch').on('input', function() { + on.searchInput(); + }); + + $('#btnFilter').click(function() { + on.filter(); + }); + + $('#btnASC').click(function() { + on.asc(); + }); + + $('#btnDESC').click(function() { + on.desc(); + }); + } + }); +}); diff --git a/ex9/phonebook.html b/ex9/phonebook.html new file mode 100644 index 0000000..dc49e0c --- /dev/null +++ b/ex9/phonebook.html @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + + + + + +
    +
  1. + + *ohad kravchick + + + 347-346-2425 + + +
    2. +
  2. + + *ohad kravchick + + + 347-346-2425 + + +
    3. +
  3. + + *ohad kravchick + + + 347-346-2425 + + +
    4. +
  4. + + *zuriel yahav + + + 0450-9001564 + + +
    5. +
+ + From c5c05b4b00f31d0167617df4ae238d314074b815 Mon Sep 17 00:00:00 2001 From: Zuriel Yahav Date: Fri, 6 Jan 2017 22:17:47 +0200 Subject: [PATCH 02/14] html container and split files --- ex9/js/main.js | 99 +++++----------------------------------------- ex9/js/order.js | 27 +++++++++++++ ex9/js/search.js | 69 ++++++++++++++++++++++++++++++++ ex9/phonebook.html | 25 ++++++++---- 4 files changed, 122 insertions(+), 98 deletions(-) create mode 100644 ex9/js/order.js create mode 100644 ex9/js/search.js diff --git a/ex9/js/main.js b/ex9/js/main.js index b4e7ab4..b70f6d2 100644 --- a/ex9/js/main.js +++ b/ex9/js/main.js @@ -1,95 +1,14 @@ -require(['ajaxGet'], function(ajaxGet) { +requirejs(['search', 'order', 'ajaxGet'], function(search, order, ajaxGet) { $(function() { - var on; - setEvents(); - on = { - loadList: function() { - ajaxGet('json/data.json', function(phoneBookData) { - $('li').remove(); - $("#phoneBookTemplate").tmpl( phoneBookData ) - .appendTo( "#phoneBook" ); - }); - }, - searchInput: function() { - console.log('searchInput'); - if($('#textSearch').val() === '') { - $( "#btnFilter" ).prop( "disabled", true ); - } else { - $( "#btnFilter" ).prop( "disabled", false ); - } - }, - searchChange: function() { - console.log('searchChange'); - if($('#textSearch').val() === '') { - $( "#btnFilter" ).prop( "disabled", true ); - } else { - $( "#btnFilter" ).prop( "disabled", false ); - } - }, - filter: function() { - console.log('filter click'); - }, - searchOn: function() { - console.log('searchOn'); - // Search off - $( "#btnFilter" ).prop( "disabled", true ); - $('#textSearch').show(); - $('#btnFilter').show(); - $('#btnSearchOff').show(); - $('#btnSearchOn').hide(); - }, - searchOff: function() { - console.log('searchOff'); - // Search off - $('#textSearch').hide(); - $('#btnFilter').hide(); - $('#btnSearchOff').hide(); - $('#btnSearchOn').show(); - }, - asc: function() { - console.log('asc'); - $('#btnASC').hide(); - $('#btnDESC').show(); - }, - desc: function() { - console.log('desc'); - $('#btnASC').show(); - $('#btnDESC').hide(); - } - }; - - function setEvents() { - $('#btnReloadList').click(function() { - on.loadList(); - }); - - $('#btnSearchOn').click(function() { - on.searchOn(); - }); - - $('#btnSearchOff').click(function() { - on.searchOff(); - }); - - $('#textSearch').change(function() { - on.searchChange(); + $('#btnReloadList').click(function() { + ajaxGet('json/data.json', function(phoneBookData) { + $('li').remove(); + $("#phoneBookTemplate").tmpl( phoneBookData ) + .appendTo( "#phoneBook" ); }); + }); - $('#textSearch').on('input', function() { - on.searchInput(); - }); - - $('#btnFilter').click(function() { - on.filter(); - }); - - $('#btnASC').click(function() { - on.asc(); - }); - - $('#btnDESC').click(function() { - on.desc(); - }); - } + search(); + order(); }); }); diff --git a/ex9/js/order.js b/ex9/js/order.js new file mode 100644 index 0000000..ed4ae5a --- /dev/null +++ b/ex9/js/order.js @@ -0,0 +1,27 @@ +define(function() { + return function() { + setEvents(); + } + + function setEvents() { + $('#btnASC').click(function() { + asc(); + }); + + $('#btnDESC').click(function() { + desc(); + }); + } + + function asc() { + console.log('asc'); + $('#btnASC').hide(); + $('#btnDESC').show(); + } + + function desc() { + console.log('desc'); + $('#btnASC').show(); + $('#btnDESC').hide(); + } +}); diff --git a/ex9/js/search.js b/ex9/js/search.js new file mode 100644 index 0000000..f2e001c --- /dev/null +++ b/ex9/js/search.js @@ -0,0 +1,69 @@ +define(function() { + return function() { + setEvents(); + } + + function setEvents() { + $('#btnMax').click(function() { + showSearch(); + }); + + $('#btnMin').click(function() { + hideSearch(); + }); + + $( '#filter' ).focus(function() { + if ($( '#filter' ).val() === 'Type your filter') { + $( '#filter' ).val( '' ); + } + }); + + $('#filter').change(function() { + onFilterChange(); + }); + + $('#filter').on('input', function() { + onFilterInput(); + }); + + $('#btnFilter').click(function() { + filterList(); + }); + } + + function onFilterInput() { + console.log('searchInput'); + if($('#filter').val() === '') { + $( '#btnFilter' ).prop( "disabled", true ); + } else { + $( '#btnFilter' ).prop( "disabled", false ); + } + } + + function onFilterChange() { + console.log('searchChange'); + if($('#filter').val() === '') { + $( '#btnFilter' ).prop( "disabled", true ); + } else { + $( "#btnFilter" ).prop( "disabled", false ); + } + } + + function filterList() { + console.log('filter list click'); + } + + function showSearch() { + console.log('searchOn'); + $( '#btnFilter' ).prop( "disabled", true ); + $('#filter').val('Type your filter'); + $('.searchMin').hide(); + $('.searchMax').show(); + } + + function hideSearch() { + console.log('searchOff'); + $('.searchMin').show(); + $('.searchMax').hide(); + } +}); diff --git a/ex9/phonebook.html b/ex9/phonebook.html index dc49e0c..ba3cad0 100644 --- a/ex9/phonebook.html +++ b/ex9/phonebook.html @@ -7,15 +7,24 @@ - - - - - - - - +
+ +
+
+ + +
+
+
+ +
+
+ + + +
+
-
- -
+
+
+ +
-
- - -
-
-
- +
+ +
-
- - - + +
+
+ +
+
+ + + +
-
- + + +
    +
  1. + + *ohad kravchick + + + 347-346-2425 + + +
    2. +
  2. + + *ohad kravchick + + + 347-346-2425 + + +
    3. +
  3. + + *ohad kravchick + + + 347-346-2425 + + +
    4. +
  4. + + *zuriel yahav + + + 0450-9001564 + + +
    5. +
-
    -
  1. - - *ohad kravchick - - - 347-346-2425 - - -
    2. -
  2. - - *ohad kravchick - - - 347-346-2425 - - -
    3. -
  3. - - *ohad kravchick - - - 347-346-2425 - - -
    4. -
  4. - - *zuriel yahav - - - 0450-9001564 - - -
    5. -
+
diff --git a/ex9/style/style.css b/ex9/style/style.css index d6de8a9..972ec96 100644 --- a/ex9/style/style.css +++ b/ex9/style/style.css @@ -1,17 +1,42 @@ /* * http://www.codeography.com/2010/08/02/how-to-make-vim-a-first-class-css-editor.html */ +body{ + font-family: 'Roboto', sans-serif; + font-size: 100%; font-size: 14px; +} + + +.center { + margin: auto; + width: 40%; + border: 3px solid green; + padding: 0px; +} + .name { font-size: 34px; display:block; } -/*li { - background-color: red; +ol { + list-style: none; + margin: 0px; + padding: 0px; +} + +li { + margin: 0px; + padding: 0px; + transition: all 1.4s ease-out; + opacity: 1; +} + +div { +margin: 0px; } -*/ #phoneBook li:nth-child(2n){ background-color: gray; From f28aa17e5a2fc7995e7ea4366477160b429e6fab Mon Sep 17 00:00:00 2001 From: Zuriel Yahav Date: Mon, 9 Jan 2017 01:03:00 +0200 Subject: [PATCH 05/14] delete all calls to ajax stor data in obj --- ex9/js/load.js | 2 +- ex9/js/main.js | 41 ++++++++++++++++++++++++++++++++--------- 2 files changed, 33 insertions(+), 10 deletions(-) diff --git a/ex9/js/load.js b/ex9/js/load.js index 2768307..0c1b08b 100644 --- a/ex9/js/load.js +++ b/ex9/js/load.js @@ -1,4 +1,4 @@ -define(['ajaxGet'], function(ajaxGet) { +define(function() { return function(fun) { $('#btnReloadList').click(function() { fun.load(); diff --git a/ex9/js/main.js b/ex9/js/main.js index b70f6d2..7f74489 100644 --- a/ex9/js/main.js +++ b/ex9/js/main.js @@ -1,14 +1,37 @@ -requirejs(['search', 'order', 'ajaxGet'], function(search, order, ajaxGet) { +requirejs(['ajaxGet','load','search', 'order'] , function(ajaxGet, load, search, order) { $(function() { - $('#btnReloadList').click(function() { - ajaxGet('json/data.json', function(phoneBookData) { + var fun = { + data: {}, + load: function(){ + ajaxGet('json/data.json', function(phoneBookData) { + fun.data = phoneBookData; + fun.print( fun.data ); + }); + }, + sortByAsc: function() { + fun.print( _.sortBy(fun.data, 'name') ); + }, + sortByDesc: function() { + fun.print( _.sortBy(fun.data, 'name').reverse()); + }, + filter: function() { + var filterList = _.filter(fun.data, function(name) { + if (name.name.indexOf($( '#filter' ).val()) > -1) return name; + } + ); + fun.print( _.sortBy(filterList, 'name').reverse()); + }, + print: function(objList) { $('li').remove(); - $("#phoneBookTemplate").tmpl( phoneBookData ) - .appendTo( "#phoneBook" ); - }); - }); + $("#phoneBookTemplate").tmpl( objList ) + .appendTo( "#phoneBook" ); + } + } - search(); - order(); + + + load(fun); + search(fun); + order(fun); }); }); From 9c0df667182b03657056721e09d4577c43fb918f Mon Sep 17 00:00:00 2001 From: Zuriel Yahav Date: Mon, 9 Jan 2017 01:11:01 +0200 Subject: [PATCH 06/14] remove ajax --- ex9/js/order.js | 2 +- ex9/js/search.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ex9/js/order.js b/ex9/js/order.js index 39427b2..83f5ff9 100644 --- a/ex9/js/order.js +++ b/ex9/js/order.js @@ -1,4 +1,4 @@ -define(['ajaxGet'], function(ajaxGet) { +define(function() { return function(fun) { $('#btnASC').click(function() { console.log('asc'); diff --git a/ex9/js/search.js b/ex9/js/search.js index ed1b785..5d2818e 100644 --- a/ex9/js/search.js +++ b/ex9/js/search.js @@ -1,4 +1,4 @@ -define(['ajaxGet'], function(ajaxGet) { +define(function() { return function(fun) { $('#btnMax').click(function() { From 660f246d09e3669a0087e7848324d369f704f566 Mon Sep 17 00:00:00 2001 From: Zuriel Yahav Date: Mon, 9 Jan 2017 10:53:11 +0200 Subject: [PATCH 07/14] filter return true --- ex9/js/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ex9/js/main.js b/ex9/js/main.js index 7f74489..bfeeec7 100644 --- a/ex9/js/main.js +++ b/ex9/js/main.js @@ -16,7 +16,7 @@ requirejs(['ajaxGet','load','search', 'order'] , function(ajaxGet, load, search, }, filter: function() { var filterList = _.filter(fun.data, function(name) { - if (name.name.indexOf($( '#filter' ).val()) > -1) return name; + if (name.name.indexOf($( '#filter' ).val()) > -1) return true; } ); fun.print( _.sortBy(filterList, 'name').reverse()); From 00d6294c74f5f5ea56fa1674a9151ba31f2a2f8d Mon Sep 17 00:00:00 2001 From: Zuriel Yahav Date: Mon, 9 Jan 2017 10:55:21 +0200 Subject: [PATCH 08/14] rename print to render --- ex9/js/main.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/ex9/js/main.js b/ex9/js/main.js index bfeeec7..43f6e91 100644 --- a/ex9/js/main.js +++ b/ex9/js/main.js @@ -5,23 +5,23 @@ requirejs(['ajaxGet','load','search', 'order'] , function(ajaxGet, load, search, load: function(){ ajaxGet('json/data.json', function(phoneBookData) { fun.data = phoneBookData; - fun.print( fun.data ); + fun.render( fun.data ); }); }, sortByAsc: function() { - fun.print( _.sortBy(fun.data, 'name') ); + fun.render( _.sortBy(fun.data, 'name') ); }, sortByDesc: function() { - fun.print( _.sortBy(fun.data, 'name').reverse()); + fun.render( _.sortBy(fun.data, 'name').reverse()); }, filter: function() { var filterList = _.filter(fun.data, function(name) { if (name.name.indexOf($( '#filter' ).val()) > -1) return true; } ); - fun.print( _.sortBy(filterList, 'name').reverse()); + fun.render( _.sortBy(filterList, 'name').reverse()); }, - print: function(objList) { + render: function(objList) { $('li').remove(); $("#phoneBookTemplate").tmpl( objList ) .appendTo( "#phoneBook" ); From 01c62a095855fb4eefa9bcf15245b34fa0e22649 Mon Sep 17 00:00:00 2001 From: Zuriel Yahav Date: Mon, 9 Jan 2017 10:57:43 +0200 Subject: [PATCH 09/14] remove error 404 --- ex9/js/ajaxGet.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/ex9/js/ajaxGet.js b/ex9/js/ajaxGet.js index 9182d0d..04ebade 100644 --- a/ex9/js/ajaxGet.js +++ b/ex9/js/ajaxGet.js @@ -4,10 +4,6 @@ define(function() { $.ajax({ type: 'GET', url: url, - statusCode: { - 404: function() { - alert( "page not found" ); - } }, error: function(fff){ alert( "it is an error" + fff ); From 1872632c34638b1b0ca87bf040633adcb1652939 Mon Sep 17 00:00:00 2001 From: Zuriel Yahav Date: Mon, 9 Jan 2017 15:52:48 +0200 Subject: [PATCH 10/14] styl, remove li on click --- ex9/js/filter.js | 40 ++++++++++++++++++++++++++++ ex9/js/load.js | 13 +++++++--- ex9/js/main.js | 63 +++++++++++++++++++++++---------------------- ex9/style/style.css | 21 +++++++++++++-- 4 files changed, 100 insertions(+), 37 deletions(-) create mode 100644 ex9/js/filter.js diff --git a/ex9/js/filter.js b/ex9/js/filter.js new file mode 100644 index 0000000..5fb68fd --- /dev/null +++ b/ex9/js/filter.js @@ -0,0 +1,40 @@ +define(function() { + return function(filter) { + $('#btnMax').click(function() { + console.log('searchOn'); + $( '#btnFilter' ).prop( "disabled", true ); + //$('#filter').val('Type your filter'); + $('.searchMin').hide(); + $('.searchMax').show(); + }); + + $('#btnMin').click(function() { + console.log('searchOff'); + $('.searchMin').show(); + $('.searchMax').hide(); + }); + + $( '#filter' ).focus(function() { + //if ($( '#filter' ).val() === 'Type your filter') { + // $( '#filter' ).val( '' ); + //} + }); + + $('#filter').on('keydown', function(val) { + if (val.which == 13) filter(); + }); + + $('#filter').on('input', function() { + console.log('searchInput'); + if($('#filter').val() === '') { + $( '#btnFilter' ).prop( "disabled", true ); + } else { + $( '#btnFilter' ).prop( "disabled", false ); + } + }); + + $('#btnFilter').click(function() { + filter(); + }); + } +}); diff --git a/ex9/js/load.js b/ex9/js/load.js index 0c1b08b..0848eb9 100644 --- a/ex9/js/load.js +++ b/ex9/js/load.js @@ -1,7 +1,12 @@ define(function() { - return function(fun) { + return function(loadData) { $('#btnReloadList').click(function() { - fun.load(); - }); - } + console.log('reload Clickd'); + loadData(); + $( '#btnReloadList' ).prop( 'value', 'Reload' ); + $( '#btnASC' ).prop( 'disabled', false ); + $( '#btnDESC' ).prop( 'disabled', false ); + $( '#btnMax' ).prop( 'disabled', false ); + }); + }; }); diff --git a/ex9/js/main.js b/ex9/js/main.js index 43f6e91..f77fa6c 100644 --- a/ex9/js/main.js +++ b/ex9/js/main.js @@ -1,37 +1,38 @@ -requirejs(['ajaxGet','load','search', 'order'] , function(ajaxGet, load, search, order) { +requirejs(['ajaxGet','load','filter', 'sort'] , function(ajaxGet, load, filter, sort) { $(function() { - var fun = { - data: {}, - load: function(){ - ajaxGet('json/data.json', function(phoneBookData) { - fun.data = phoneBookData; - fun.render( fun.data ); - }); - }, - sortByAsc: function() { - fun.render( _.sortBy(fun.data, 'name') ); - }, - sortByDesc: function() { - fun.render( _.sortBy(fun.data, 'name').reverse()); - }, - filter: function() { - var filterList = _.filter(fun.data, function(name) { - if (name.name.indexOf($( '#filter' ).val()) > -1) return true; - } - ); - fun.render( _.sortBy(filterList, 'name').reverse()); - }, - render: function(objList) { - $('li').remove(); - $("#phoneBookTemplate").tmpl( objList ) - .appendTo( "#phoneBook" ); - } - } + var phoneBookData = {}; + var render = function(objList) { + $('li').remove(); + $("#phoneBookTemplate").tmpl( objList ) + .appendTo( "#phoneBook" ); + // Remove li element from list + $("li").on("click",function(elementID) { + console.log('testing',elementID); + $(this).remove(); + }); - load(fun); - search(fun); - order(fun); + }; + + load(function() { + ajaxGet('json/data.json', function(phoneBookDataA) { + phoneBookData = phoneBookDataA; + render( phoneBookData ); + }) + }); + + filter(function() { + var filterList = _.filter(phoneBookData, function(name) { + if (name.name.indexOf($( '#filter' ).val()) > -1) return true; + }); + render( _.sortBy(filterList, 'name')); + }); + + sort(function() { + render( _.sortBy(phoneBookData, 'name') ); + }, function() { + render( _.sortBy(phoneBookData, 'name').reverse()); + }); }); }); diff --git a/ex9/style/style.css b/ex9/style/style.css index 972ec96..166bc43 100644 --- a/ex9/style/style.css +++ b/ex9/style/style.css @@ -6,19 +6,32 @@ body{ font-size: 100%; font-size: 14px; } +#filter { +} +h1 { + color: gray; + text-align: center; +} .center { margin: auto; width: 40%; border: 3px solid green; padding: 0px; } +.info { + margin: auto; + width: 90%; + padding: 0px; +} .name { font-size: 34px; display:block; + color: gray; +text-transform: uppercase; } ol { @@ -37,15 +50,19 @@ li { div { margin: 0px; } -#phoneBook li:nth-child(2n){ - background-color: gray; +.orderList{ } .searchMax { display: none; } +#btnASC { + border-radius: 8px; +} + #btnDESC { display: none; + border-radius: 8px; } From ba5bbe05055246da5ae8a3d3dcc5ce4f587ca75f Mon Sep 17 00:00:00 2001 From: Zuriel Yahav Date: Mon, 9 Jan 2017 16:06:32 +0200 Subject: [PATCH 11/14] more style --- ex9/style/style.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/ex9/style/style.css b/ex9/style/style.css index 166bc43..a5ef9dc 100644 --- a/ex9/style/style.css +++ b/ex9/style/style.css @@ -62,7 +62,22 @@ margin: 0px; border-radius: 8px; } +#btnReloadList, #btnASC, #btnDESC, #btnMax{ + background-color: #4CAF50; /* Green */ + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + cursor: pointer; + border-radius: 12px; +} + #btnDESC { display: none; border-radius: 8px; } + From 572532c08cf8f668ee57d57c4394defeb2f965ac Mon Sep 17 00:00:00 2001 From: Zuriel Yahav Date: Mon, 9 Jan 2017 17:07:12 +0200 Subject: [PATCH 12/14] assad --- ex9/js/ajaxGet.js | 1 - ex9/js/sort.js | 17 +++++++++++++ ex9/json/data.json | 44 ++++++++++++++++----------------- ex9/phonebook.html | 59 +++++++++++++++++++++++++++++---------------- ex9/style/style.css | 39 ++++++++++++++++++++++-------- 5 files changed, 106 insertions(+), 54 deletions(-) create mode 100644 ex9/js/sort.js diff --git a/ex9/js/ajaxGet.js b/ex9/js/ajaxGet.js index 04ebade..f24ad08 100644 --- a/ex9/js/ajaxGet.js +++ b/ex9/js/ajaxGet.js @@ -4,7 +4,6 @@ define(function() { $.ajax({ type: 'GET', url: url, - }, error: function(fff){ alert( "it is an error" + fff ); }, diff --git a/ex9/js/sort.js b/ex9/js/sort.js new file mode 100644 index 0000000..21f8f82 --- /dev/null +++ b/ex9/js/sort.js @@ -0,0 +1,17 @@ +define(function() { + return function(asc,desc) { + $('#btnASC').click(function() { + console.log('asc'); + $('#btnASC').hide(); + $('#btnDESC').show(); + asc(); + }); + + $('#btnDESC').click(function() { + console.log('desc'); + $('#btnASC').show(); + $('#btnDESC').hide(); + desc(); + }); + }; +}); diff --git a/ex9/json/data.json b/ex9/json/data.json index 228b9f8..c9a4ace 100644 --- a/ex9/json/data.json +++ b/ex9/json/data.json @@ -1,41 +1,41 @@ [ { - "name": "1 - Ohad K", + "name": "Ohad K", "comm": { "mail": "ohadK@gmail.com", "phone": "100-900-1564" } }, { - "name": "2 - Zuriel Yahav", + "name": "Zuriel Yahav", "comm": { "mail": "zyahav@gmail.com", "phone": "050-9001564" } }, { - "name": "3 - Ohad K", + "name": "Noam", "comm": { "mail": "ohadK@gmail.com", "phone": "200-1001564" } }, { - "name": "4 - Zuriel Yahav", + "name": "Dane", "comm": { "mail": "zyahav@gmail.com", "phone": "050-9001564" } }, { - "name": "Yariv Dotan", + "name": "Eden", "comm": { "mail": "Yariv@Dotan.com", "phone": "+972505283832" } }, { - "name": "Yaron Bloch", + "name": "Ariel", "comm": { "mail": "Bloch@Yaron.com", "phone": "099600100" @@ -77,112 +77,112 @@ } }, { - "name": "Yossi Haim", + "name": "p Yossi Haim", "comm": { "mail": "Yossi@Haim.com", "phone": "035759922" } }, { - "name": "yudith farhi", + "name": "o yudith farhi", "comm": { "mail": "yudith@@farhi.com", "phone": "+0542802807" } }, { - "name": "yuval halperin", + "name": "n yuval halperin", "comm": { "mail": "zyuval@halperin.co.il", "phone": "+036932080" } }, { - "name": "ZOY-Arthur", + "name": "m ZOY-Arthur", "comm": { "mail": "zzoy@zjzoy.com", "phone": "+0504057334" } }, { - "name":"Zuriel", + "name":"l Zuriel", "comm": { "mail": "zzyahav@villagjoy.com", "phone": "(054) 251-5435" } }, { - "name": "Zvi Fridman", + "name": "k Zvi Fridman", "comm": { "mail": "Shai@Pilpel.com", "phone": "++97237412877" } }, { - "name": "SShai Yitshaki's", + "name": "j SShai Yitshaki's", "comm": { "mail": "Shai@Yitshaki.com", "phone": "+0533026301" } }, { - "name": "SShay Azoulay's", + "name": "i SShay Azoulay's", "comm": { "mail": "Shay@Azoula.com", "phone": "++972546690517" } }, { - "name": "SShay David's", + "name": "h SShay David's", "comm": { "mail": "Shay@David.com", "phone": "++972523544494" } }, { - "name": "Shay Eliash's", + "name": "g Shay Eliash's", "comm": { "mail": "Shay@Eliash.com", "phone": "++972522546635" } }, { - "name": "Ssheris", + "name": "f Ssheris", "comm": { "mail": "sher@i.com", "phone": "++972506959096" } }, { - "name": "SShimon Goldber's", + "name": "e SShimon Goldber's", "comm": { "mail": "Shimon@Goldbe.com", "phone": "++972544363888" } }, { - "name": "himon Malka's", + "name": "d himon Malka's", "comm": { "mail": "Shimon@Malk.com", "phone": "+972522581992" } }, { - "name": "hlomi Mizrahi's", + "name": "c hlomi Mizrahi's", "comm": { "mail": "Shlomi@Mizrahi.com", "phone": "+972528543027" } }, { - "name": "Shlomo Laker's", + "name": "b Shlomo Laker's", "comm": { "mail": "Shlomo@Laker.com", "phone": "+972546690513" } }, { - "name": "Shmoulik", + "name": "a Shmoulik", "comm": { "mail": "Shmoulik@Poal.com", "phone": "+972522759092" diff --git a/ex9/phonebook.html b/ex9/phonebook.html index a069580..50c2cfd 100644 --- a/ex9/phonebook.html +++ b/ex9/phonebook.html @@ -10,35 +10,52 @@
-
- +
+

CONTACTS

+
+
+
+ +
-
- - -
- -
-
- +
+ + +
-
- - - +
+
+ +
+
+ + + +
+
diff --git a/ex9/style/style.css b/ex9/style/style.css index a5ef9dc..b7647c9 100644 --- a/ex9/style/style.css +++ b/ex9/style/style.css @@ -9,29 +9,54 @@ body{ #filter { } +.main-buttons{ + +} + +.loadorder-buttuns-layout { + display: flex; +} + +#btnReloadList { + flex: 1; +} + +#btnASC { + + flex: 1; +} + +#btnDESC { + +} + +#btnMax{ + +} + h1 { color: gray; text-align: center; } + .center { margin: auto; width: 40%; border: 3px solid green; padding: 0px; } + .info { margin: auto; width: 90%; padding: 0px; - } .name { - font-size: 34px; display:block; color: gray; -text-transform: uppercase; + text-transform: uppercase; } ol { @@ -48,7 +73,7 @@ li { } div { -margin: 0px; + margin: 0px; } .orderList{ @@ -58,10 +83,6 @@ margin: 0px; display: none; } -#btnASC { - border-radius: 8px; -} - #btnReloadList, #btnASC, #btnDESC, #btnMax{ background-color: #4CAF50; /* Green */ border: none; @@ -78,6 +99,4 @@ margin: 0px; #btnDESC { display: none; - border-radius: 8px; } - From 5f2f6e694b9a0665f3bf5595879ed95e48bb8df4 Mon Sep 17 00:00:00 2001 From: Zuriel Yahav Date: Tue, 10 Jan 2017 02:19:59 +0200 Subject: [PATCH 13/14] cards --- ex9/js/filter.js | 36 +- ex9/js/lib/howler.js | 2770 ++++++++++++++++++++++++++++++++++++++++++ ex9/js/main.js | 63 +- ex9/js/records.js | 31 + ex9/js/sort.js | 6 +- ex9/phonebook.html | 98 +- 6 files changed, 2912 insertions(+), 92 deletions(-) create mode 100644 ex9/js/lib/howler.js create mode 100644 ex9/js/records.js diff --git a/ex9/js/filter.js b/ex9/js/filter.js index 5fb68fd..2f22240 100644 --- a/ex9/js/filter.js +++ b/ex9/js/filter.js @@ -1,17 +1,14 @@ define(function() { - return function(filter) { - $('#btnMax').click(function() { - console.log('searchOn'); - $( '#btnFilter' ).prop( "disabled", true ); - //$('#filter').val('Type your filter'); - $('.searchMin').hide(); - $('.searchMax').show(); + return function(callbalck) { + $( '#btnMax' ).click(function() { + //$( '#btnFilter' ).prop( 'disabled', true ); + $( '.searchMin' ).hide(); + $( '.searchMax' ).show(); }); - $('#btnMin').click(function() { - console.log('searchOff'); - $('.searchMin').show(); - $('.searchMax').hide(); + $( '#btnMin' ).click(function() { + $( '.searchMin' ).show(); + $( '.searchMax' ).hide(); }); $( '#filter' ).focus(function() { @@ -20,21 +17,20 @@ define(function() { //} }); - $('#filter').on('keydown', function(val) { - if (val.which == 13) filter(); + $( '#filter' ).on( 'keydown' , function(val) { + if (val.which == 13) callbalck($( '#filter' ).val()); }); - $('#filter').on('input', function() { - console.log('searchInput'); - if($('#filter').val() === '') { - $( '#btnFilter' ).prop( "disabled", true ); + $( '#filter' ).on( 'input' , function() { + if($( '#filter' ).val() === '') { + $( '#btnFilter' ).prop( 'disabled' , true ); } else { - $( '#btnFilter' ).prop( "disabled", false ); + $( '#btnFilter' ).prop( 'disabled' , false ); } }); - $('#btnFilter').click(function() { - filter(); + $( '#btnFilter' ).click(function() { + callbalck($( '#filter' ).val()); }); } }); diff --git a/ex9/js/lib/howler.js b/ex9/js/lib/howler.js new file mode 100644 index 0000000..4efb128 --- /dev/null +++ b/ex9/js/lib/howler.js @@ -0,0 +1,2770 @@ +/*! + * howler.js v2.0.2 + * howlerjs.com + * + * (c) 2013-2016, James Simpson of GoldFire Studios + * goldfirestudios.com + * + * MIT License + */ + +(function() { + + 'use strict'; + + /** Global Methods **/ + /***************************************************************************/ + + /** + * Create the global controller. All contained methods and properties apply + * to all sounds that are currently playing or will be in the future. + */ + var HowlerGlobal = function() { + this.init(); + }; + HowlerGlobal.prototype = { + /** + * Initialize the global Howler object. + * @return {Howler} + */ + init: function() { + var self = this || Howler; + + // Internal properties. + self._codecs = {}; + self._howls = []; + self._muted = false; + self._volume = 1; + self._canPlayEvent = 'canplaythrough'; + self._navigator = (typeof window !== 'undefined' && window.navigator) ? window.navigator : null; + + // Public properties. + self.masterGain = null; + self.noAudio = false; + self.usingWebAudio = true; + self.autoSuspend = true; + self.ctx = null; + + // Set to false to disable the auto iOS enabler. + self.mobileAutoEnable = true; + + // Setup the various state values for global tracking. + self._setup(); + + return self; + }, + + /** + * Get/set the global volume for all sounds. + * @param {Float} vol Volume from 0.0 to 1.0. + * @return {Howler/Float} Returns self or current volume. + */ + volume: function(vol) { + var self = this || Howler; + vol = parseFloat(vol); + + // If we don't have an AudioContext created yet, run the setup. + if (!self.ctx) { + setupAudioContext(); + } + + if (typeof vol !== 'undefined' && vol >= 0 && vol <= 1) { + self._volume = vol; + + // Don't update any of the nodes if we are muted. + if (self._muted) { + return self; + } + + // When using Web Audio, we just need to adjust the master gain. + if (self.usingWebAudio) { + self.masterGain.gain.value = vol; + } + + // Loop through and change volume for all HTML5 audio nodes. + for (var i=0; i=0; i--) { + self._howls[i].unload(); + } + + // Create a new AudioContext to make sure it is fully reset. + if (self.usingWebAudio && self.ctx && typeof self.ctx.close !== 'undefined') { + self.ctx.close(); + self.ctx = null; + setupAudioContext(); + } + + return self; + }, + + /** + * Check for codec support of specific extension. + * @param {String} ext Audio file extention. + * @return {Boolean} + */ + codecs: function(ext) { + return (this || Howler)._codecs[ext.replace(/^x-/, '')]; + }, + + /** + * Setup various state values for global tracking. + * @return {Howler} + */ + _setup: function() { + var self = this || Howler; + + // Keeps track of the suspend/resume state of the AudioContext. + self.state = self.ctx ? self.ctx.state || 'running' : 'running'; + + // Automatically begin the 30-second suspend process + self._autoSuspend(); + + // Check if audio is available. + if (!self.usingWebAudio) { + // No audio is available on this system if noAudio is set to true. + if (typeof Audio !== 'undefined') { + try { + var test = new Audio(); + + // Check if the canplaythrough event is available. + if (typeof test.oncanplaythrough === 'undefined') { + self._canPlayEvent = 'canplay'; + } + } catch(e) { + self.noAudio = true; + } + } else { + self.noAudio = true; + } + } + + // Test to make sure audio isn't disabled in Internet Explorer. + try { + var test = new Audio(); + if (test.muted) { + self.noAudio = true; + } + } catch (e) {} + + // Check for supported codecs. + if (!self.noAudio) { + self._setupCodecs(); + } + + return self; + }, + + /** + * Check for browser support for various codecs and cache the results. + * @return {Howler} + */ + _setupCodecs: function() { + var self = this || Howler; + var audioTest = null; + + // Must wrap in a try/catch because IE11 in server mode throws an error. + try { + audioTest = (typeof Audio !== 'undefined') ? new Audio() : null; + } catch (err) { + return self; + } + + if (!audioTest || typeof audioTest.canPlayType !== 'function') { + return self; + } + + var mpegTest = audioTest.canPlayType('audio/mpeg;').replace(/^no$/, ''); + + // Opera version <33 has mixed MP3 support, so we need to check for and block it. + var checkOpera = self._navigator && self._navigator.userAgent.match(/OPR\/([0-6].)/g); + var isOldOpera = (checkOpera && parseInt(checkOpera[0].split('/')[1], 10) < 33); + + self._codecs = { + mp3: !!(!isOldOpera && (mpegTest || audioTest.canPlayType('audio/mp3;').replace(/^no$/, ''))), + mpeg: !!mpegTest, + opus: !!audioTest.canPlayType('audio/ogg; codecs="opus"').replace(/^no$/, ''), + ogg: !!audioTest.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/, ''), + oga: !!audioTest.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/, ''), + wav: !!audioTest.canPlayType('audio/wav; codecs="1"').replace(/^no$/, ''), + aac: !!audioTest.canPlayType('audio/aac;').replace(/^no$/, ''), + caf: !!audioTest.canPlayType('audio/x-caf;').replace(/^no$/, ''), + m4a: !!(audioTest.canPlayType('audio/x-m4a;') || audioTest.canPlayType('audio/m4a;') || audioTest.canPlayType('audio/aac;')).replace(/^no$/, ''), + mp4: !!(audioTest.canPlayType('audio/x-mp4;') || audioTest.canPlayType('audio/mp4;') || audioTest.canPlayType('audio/aac;')).replace(/^no$/, ''), + weba: !!audioTest.canPlayType('audio/webm; codecs="vorbis"').replace(/^no$/, ''), + webm: !!audioTest.canPlayType('audio/webm; codecs="vorbis"').replace(/^no$/, ''), + dolby: !!audioTest.canPlayType('audio/mp4; codecs="ec-3"').replace(/^no$/, ''), + flac: !!(audioTest.canPlayType('audio/x-flac;') || audioTest.canPlayType('audio/flac;')).replace(/^no$/, '') + }; + + return self; + }, + + /** + * Mobile browsers will only allow audio to be played after a user interaction. + * Attempt to automatically unlock audio on the first user interaction. + * Concept from: http://paulbakaus.com/tutorials/html5/web-audio-on-ios/ + * @return {Howler} + */ + _enableMobileAudio: function() { + var self = this || Howler; + + // Only run this on mobile devices if audio isn't already eanbled. + var isMobile = /iPhone|iPad|iPod|Android|BlackBerry|BB10|Silk|Mobi/i.test(self._navigator && self._navigator.userAgent); + var isTouch = !!(('ontouchend' in window) || (self._navigator && self._navigator.maxTouchPoints > 0) || (self._navigator && self._navigator.msMaxTouchPoints > 0)); + if (self._mobileEnabled || !self.ctx || (!isMobile && !isTouch)) { + return; + } + + self._mobileEnabled = false; + + // Some mobile devices/platforms have distortion issues when opening/closing tabs and/or web views. + // Bugs in the browser (especially Mobile Safari) can cause the sampleRate to change from 44100 to 48000. + // By calling Howler.unload(), we create a new AudioContext with the correct sampleRate. + if (!self._mobileUnloaded && self.ctx.sampleRate !== 44100) { + self._mobileUnloaded = true; + self.unload(); + } + + // Scratch buffer for enabling iOS to dispose of web audio buffers correctly, as per: + // http://stackoverflow.com/questions/24119684 + self._scratchBuffer = self.ctx.createBuffer(1, 1, 22050); + + // Call this method on touch start to create and play a buffer, + // then check if the audio actually played to determine if + // audio has now been unlocked on iOS, Android, etc. + var unlock = function() { + // Create an empty buffer. + var source = self.ctx.createBufferSource(); + source.buffer = self._scratchBuffer; + source.connect(self.ctx.destination); + + // Play the empty buffer. + if (typeof source.start === 'undefined') { + source.noteOn(0); + } else { + source.start(0); + } + + // Setup a timeout to check that we are unlocked on the next event loop. + source.onended = function() { + source.disconnect(0); + + // Update the unlocked state and prevent this check from happening again. + self._mobileEnabled = true; + self.mobileAutoEnable = false; + + // Remove the touch start listener. + document.removeEventListener('touchend', unlock, true); + }; + }; + + // Setup a touch start listener to attempt an unlock in. + document.addEventListener('touchend', unlock, true); + + return self; + }, + + /** + * Automatically suspend the Web Audio AudioContext after no sound has played for 30 seconds. + * This saves processing/energy and fixes various browser-specific bugs with audio getting stuck. + * @return {Howler} + */ + _autoSuspend: function() { + var self = this; + + if (!self.autoSuspend || !self.ctx || typeof self.ctx.suspend === 'undefined' || !Howler.usingWebAudio) { + return; + } + + // Check if any sounds are playing. + for (var i=0; i 0 ? sound._seek : self._sprite[sprite][0] / 1000); + var duration = Math.max(0, ((self._sprite[sprite][0] + self._sprite[sprite][1]) / 1000) - seek); + var timeout = (duration * 1000) / Math.abs(sound._rate); + + // Update the parameters of the sound + sound._paused = false; + sound._ended = false; + sound._sprite = sprite; + sound._seek = seek; + sound._start = self._sprite[sprite][0] / 1000; + sound._stop = (self._sprite[sprite][0] + self._sprite[sprite][1]) / 1000; + sound._loop = !!(sound._loop || self._sprite[sprite][2]); + + // Begin the actual playback. + var node = sound._node; + if (self._webAudio) { + // Fire this when the sound is ready to play to begin Web Audio playback. + var playWebAudio = function() { + self._refreshBuffer(sound); + + // Setup the playback params. + var vol = (sound._muted || self._muted) ? 0 : sound._volume; + node.gain.setValueAtTime(vol, Howler.ctx.currentTime); + sound._playStart = Howler.ctx.currentTime; + + // Play the sound using the supported method. + if (typeof node.bufferSource.start === 'undefined') { + sound._loop ? node.bufferSource.noteGrainOn(0, seek, 86400) : node.bufferSource.noteGrainOn(0, seek, duration); + } else { + sound._loop ? node.bufferSource.start(0, seek, 86400) : node.bufferSource.start(0, seek, duration); + } + + // Start a new timer if none is present. + if (timeout !== Infinity) { + self._endTimers[sound._id] = setTimeout(self._ended.bind(self, sound), timeout); + } + + if (!internal) { + setTimeout(function() { + self._emit('play', sound._id); + }, 0); + } + }; + + var isRunning = (Howler.state === 'running'); + if (self._state === 'loaded' && isRunning) { + playWebAudio(); + } else { + // Wait for the audio to load and then begin playback. + self.once(isRunning ? 'load' : 'resume', playWebAudio, isRunning ? sound._id : null); + + // Cancel the end timer. + self._clearTimer(sound._id); + } + } else { + // Fire this when the sound is ready to play to begin HTML5 Audio playback. + var playHtml5 = function() { + node.currentTime = seek; + node.muted = sound._muted || self._muted || Howler._muted || node.muted; + node.volume = sound._volume * Howler.volume(); + node.playbackRate = sound._rate; + + setTimeout(function() { + node.play(); + + // Setup the new end timer. + if (timeout !== Infinity) { + self._endTimers[sound._id] = setTimeout(self._ended.bind(self, sound), timeout); + } + + if (!internal) { + self._emit('play', sound._id); + } + }, 0); + }; + + // Play immediately if ready, or wait for the 'canplaythrough'e vent. + var loadedNoReadyState = (self._state === 'loaded' && (window && window.ejecta || !node.readyState && Howler._navigator.isCocoonJS)); + if (node.readyState === 4 || loadedNoReadyState) { + playHtml5(); + } else { + var listener = function() { + // Begin playback. + playHtml5(); + + // Clear this listener. + node.removeEventListener(Howler._canPlayEvent, listener, false); + }; + node.addEventListener(Howler._canPlayEvent, listener, false); + + // Cancel the end timer. + self._clearTimer(sound._id); + } + } + + return sound._id; + }, + + /** + * Pause playback and save current position. + * @param {Number} id The sound ID (empty to pause all in group). + * @return {Howl} + */ + pause: function(id) { + var self = this; + + // If the sound hasn't loaded, add it to the load queue to pause when capable. + if (self._state !== 'loaded') { + self._queue.push({ + event: 'pause', + action: function() { + self.pause(id); + } + }); + + return self; + } + + // If no id is passed, get all ID's to be paused. + var ids = self._getSoundIds(id); + + for (var i=0; i Returns the group's volume value. + * volume(id) -> Returns the sound id's current volume. + * volume(vol) -> Sets the volume of all sounds in this Howl group. + * volume(vol, id) -> Sets the volume of passed sound id. + * @return {Howl/Number} Returns self or current volume. + */ + volume: function() { + var self = this; + var args = arguments; + var vol, id; + + // Determine the values based on arguments. + if (args.length === 0) { + // Return the value of the groups' volume. + return self._volume; + } else if (args.length === 1 || args.length === 2 && typeof args[1] === 'undefined') { + // First check if this is an ID, and if not, assume it is a new volume. + var ids = self._getSoundIds(); + var index = ids.indexOf(args[0]); + if (index >= 0) { + id = parseInt(args[0], 10); + } else { + vol = parseFloat(args[0]); + } + } else if (args.length >= 2) { + vol = parseFloat(args[0]); + id = parseInt(args[1], 10); + } + + // Update the volume or return the current volume. + var sound; + if (typeof vol !== 'undefined' && vol >= 0 && vol <= 1) { + // If the sound hasn't loaded, add it to the load queue to change volume when capable. + if (self._state !== 'loaded') { + self._queue.push({ + event: 'volume', + action: function() { + self.volume.apply(self, args); + } + }); + + return self; + } + + // Set the group volume. + if (typeof id === 'undefined') { + self._volume = vol; + } + + // Update one or all volumes. + id = self._getSoundIds(id); + for (var i=0; i to ? 'out' : 'in'; + var steps = diff / 0.01; + var stepLen = (steps > 0) ? len / steps : len; + + // Since browsers clamp timeouts to 4ms, we need to clamp our steps to that too. + if (stepLen < 4) { + steps = Math.ceil(steps / (4 / stepLen)); + stepLen = 4; + } + + // If the sound hasn't loaded, add it to the load queue to fade when capable. + if (self._state !== 'loaded') { + self._queue.push({ + event: 'fade', + action: function() { + self.fade(from, to, len, id); + } + }); + + return self; + } + + // Set the volume to the start position. + self.volume(from, id); + + // Fade the volume of one or all sounds. + var ids = self._getSoundIds(id); + for (var i=0; i 0) { + vol += (dir === 'in' ? 0.01 : -0.01); + } + + // Make sure the volume is in the right bounds. + vol = Math.max(0, vol); + vol = Math.min(1, vol); + + // Round to within 2 decimal points. + vol = Math.round(vol * 100) / 100; + + // Change the volume. + if (self._webAudio) { + if (typeof id === 'undefined') { + self._volume = vol; + } + + sound._volume = vol; + } else { + self.volume(vol, soundId, true); + } + + // When the fade is complete, stop it and fire event. + if (vol === to) { + clearInterval(sound._interval); + sound._interval = null; + self.volume(vol, soundId); + self._emit('fade', soundId); + } + }.bind(self, ids[i], sound), stepLen); + } + } + + return self; + }, + + /** + * Internal method that stops the currently playing fade when + * a new fade starts, volume is changed or the sound is stopped. + * @param {Number} id The sound id. + * @return {Howl} + */ + _stopFade: function(id) { + var self = this; + var sound = self._soundById(id); + + if (sound && sound._interval) { + if (self._webAudio) { + sound._node.gain.cancelScheduledValues(Howler.ctx.currentTime); + } + + clearInterval(sound._interval); + sound._interval = null; + self._emit('fade', id); + } + + return self; + }, + + /** + * Get/set the loop parameter on a sound. This method can optionally take 0, 1 or 2 arguments. + * loop() -> Returns the group's loop value. + * loop(id) -> Returns the sound id's loop value. + * loop(loop) -> Sets the loop value for all sounds in this Howl group. + * loop(loop, id) -> Sets the loop value of passed sound id. + * @return {Howl/Boolean} Returns self or current loop value. + */ + loop: function() { + var self = this; + var args = arguments; + var loop, id, sound; + + // Determine the values for loop and id. + if (args.length === 0) { + // Return the grou's loop value. + return self._loop; + } else if (args.length === 1) { + if (typeof args[0] === 'boolean') { + loop = args[0]; + self._loop = loop; + } else { + // Return this sound's loop value. + sound = self._soundById(parseInt(args[0], 10)); + return sound ? sound._loop : false; + } + } else if (args.length === 2) { + loop = args[0]; + id = parseInt(args[1], 10); + } + + // If no id is passed, get all ID's to be looped. + var ids = self._getSoundIds(id); + for (var i=0; i Returns the first sound node's current playback rate. + * rate(id) -> Returns the sound id's current playback rate. + * rate(rate) -> Sets the playback rate of all sounds in this Howl group. + * rate(rate, id) -> Sets the playback rate of passed sound id. + * @return {Howl/Number} Returns self or the current playback rate. + */ + rate: function() { + var self = this; + var args = arguments; + var rate, id; + + // Determine the values based on arguments. + if (args.length === 0) { + // We will simply return the current rate of the first node. + id = self._sounds[0]._id; + } else if (args.length === 1) { + // First check if this is an ID, and if not, assume it is a new rate value. + var ids = self._getSoundIds(); + var index = ids.indexOf(args[0]); + if (index >= 0) { + id = parseInt(args[0], 10); + } else { + rate = parseFloat(args[0]); + } + } else if (args.length === 2) { + rate = parseFloat(args[0]); + id = parseInt(args[1], 10); + } + + // Update the playback rate or return the current value. + var sound; + if (typeof rate === 'number') { + // If the sound hasn't loaded, add it to the load queue to change playback rate when capable. + if (self._state !== 'loaded') { + self._queue.push({ + event: 'rate', + action: function() { + self.rate.apply(self, args); + } + }); + + return self; + } + + // Set the group rate. + if (typeof id === 'undefined') { + self._rate = rate; + } + + // Update one or all volumes. + id = self._getSoundIds(id); + for (var i=0; i Returns the first sound node's current seek position. + * seek(id) -> Returns the sound id's current seek position. + * seek(seek) -> Sets the seek position of the first sound node. + * seek(seek, id) -> Sets the seek position of passed sound id. + * @return {Howl/Number} Returns self or the current seek position. + */ + seek: function() { + var self = this; + var args = arguments; + var seek, id; + + // Determine the values based on arguments. + if (args.length === 0) { + // We will simply return the current position of the first node. + id = self._sounds[0]._id; + } else if (args.length === 1) { + // First check if this is an ID, and if not, assume it is a new seek position. + var ids = self._getSoundIds(); + var index = ids.indexOf(args[0]); + if (index >= 0) { + id = parseInt(args[0], 10); + } else { + id = self._sounds[0]._id; + seek = parseFloat(args[0]); + } + } else if (args.length === 2) { + seek = parseFloat(args[0]); + id = parseInt(args[1], 10); + } + + // If there is no ID, bail out. + if (typeof id === 'undefined') { + return self; + } + + // If the sound hasn't loaded, add it to the load queue to seek when capable. + if (self._state !== 'loaded') { + self._queue.push({ + event: 'seek', + action: function() { + self.seek.apply(self, args); + } + }); + + return self; + } + + // Get the sound. + var sound = self._soundById(id); + + if (sound) { + if (typeof seek === 'number' && seek >= 0) { + // Pause the sound and update position for restarting playback. + var playing = self.playing(id); + if (playing) { + self.pause(id, true); + } + + // Move the position of the track and cancel timer. + sound._seek = seek; + sound._ended = false; + self._clearTimer(id); + + // Restart the playback if the sound was playing. + if (playing) { + self.play(id, true); + } + + // Update the seek position for HTML5 Audio. + if (!self._webAudio && sound._node) { + sound._node.currentTime = seek; + } + + self._emit('seek', id); + } else { + if (self._webAudio) { + var realTime = self.playing(id) ? Howler.ctx.currentTime - sound._playStart : 0; + var rateSeek = sound._rateSeek ? sound._rateSeek - sound._seek : 0; + return sound._seek + (rateSeek + realTime * Math.abs(sound._rate)); + } else { + return sound._node.currentTime; + } + } + } + + return self; + }, + + /** + * Check if a specific sound is currently playing or not (if id is provided), or check if at least one of the sounds in the group is playing or not. + * @param {Number} id The sound id to check. If none is passed, the whole sound group is checked. + * @return {Boolean} True if playing and false if not. + */ + playing: function(id) { + var self = this; + + // Check the passed sound ID (if any). + if (typeof id === 'number') { + var sound = self._soundById(id); + return sound ? !sound._paused : false; + } + + // Otherwise, loop through all sounds and check if any are playing. + for (var i=0; i= 0) { + Howler._howls.splice(index, 1); + } + } + + // Delete this sound from the cache (if no other Howl is using it). + var remCache = true; + for (i=0; i=0; i--) { + if (!events[i].id || events[i].id === id || event === 'load') { + setTimeout(function(fn) { + fn.call(this, id, msg); + }.bind(self, events[i].fn), 0); + + // If this event was setup with `once`, remove it. + if (events[i].once) { + self.off(event, events[i].fn, events[i].id); + } + } + } + + return self; + }, + + /** + * Queue of actions initiated before the sound has loaded. + * These will be called in sequence, with the next only firing + * after the previous has finished executing (even if async like play). + * @return {Howl} + */ + _loadQueue: function() { + var self = this; + + if (self._queue.length > 0) { + var task = self._queue[0]; + + // don't move onto the next task until this one is done + self.once(task.event, function() { + self._queue.shift(); + self._loadQueue(); + }); + + task.action(); + } + + return self; + }, + + /** + * Fired when playback ends at the end of the duration. + * @param {Sound} sound The sound object to work with. + * @return {Howl} + */ + _ended: function(sound) { + var self = this; + var sprite = sound._sprite; + + // Should this sound loop? + var loop = !!(sound._loop || self._sprite[sprite][2]); + + // Fire the ended event. + self._emit('end', sound._id); + + // Restart the playback for HTML5 Audio loop. + if (!self._webAudio && loop) { + self.stop(sound._id, true).play(sound._id); + } + + // Restart this timer if on a Web Audio loop. + if (self._webAudio && loop) { + self._emit('play', sound._id); + sound._seek = sound._start || 0; + sound._rateSeek = 0; + sound._playStart = Howler.ctx.currentTime; + + var timeout = ((sound._stop - sound._start) * 1000) / Math.abs(sound._rate); + self._endTimers[sound._id] = setTimeout(self._ended.bind(self, sound), timeout); + } + + // Mark the node as paused. + if (self._webAudio && !loop) { + sound._paused = true; + sound._ended = true; + sound._seek = sound._start || 0; + sound._rateSeek = 0; + self._clearTimer(sound._id); + + // Clean up the buffer source. + self._cleanBuffer(sound._node); + + // Attempt to auto-suspend AudioContext if no sounds are still playing. + Howler._autoSuspend(); + } + + // When using a sprite, end the track. + if (!self._webAudio && !loop) { + self.stop(sound._id); + } + + return self; + }, + + /** + * Clear the end timer for a sound playback. + * @param {Number} id The sound ID. + * @return {Howl} + */ + _clearTimer: function(id) { + var self = this; + + if (self._endTimers[id]) { + clearTimeout(self._endTimers[id]); + delete self._endTimers[id]; + } + + return self; + }, + + /** + * Return the sound identified by this ID, or return null. + * @param {Number} id Sound ID + * @return {Object} Sound object or null. + */ + _soundById: function(id) { + var self = this; + + // Loop through all sounds and find the one with this ID. + for (var i=0; i=0; i--) { + if (cnt <= limit) { + return; + } + + if (self._sounds[i]._ended) { + // Disconnect the audio source when using Web Audio. + if (self._webAudio && self._sounds[i]._node) { + self._sounds[i]._node.disconnect(0); + } + + // Remove sounds until we have the pool size. + self._sounds.splice(i, 1); + cnt--; + } + } + }, + + /** + * Get all ID's from the sounds pool. + * @param {Number} id Only return one ID if one is passed. + * @return {Array} Array of IDs. + */ + _getSoundIds: function(id) { + var self = this; + + if (typeof id === 'undefined') { + var ids = []; + for (var i=0; i 0) { + cache[self._src] = buffer; + loadSound(self, buffer); + } + }, function() { + self._emit('loaderror', null, 'Decoding audio data failed.'); + }); + }; + + /** + * Sound is now loaded, so finish setting everything up and fire the loaded event. + * @param {Howl} self + * @param {Object} buffer The decoded buffer sound source. + */ + var loadSound = function(self, buffer) { + // Set the duration. + if (buffer && !self._duration) { + self._duration = buffer.duration; + } + + // Setup a sprite if none is defined. + if (Object.keys(self._sprite).length === 0) { + self._sprite = {__default: [0, self._duration * 1000]}; + } + + // Fire the loaded event. + if (self._state !== 'loaded') { + self._state = 'loaded'; + self._emit('load'); + self._loadQueue(); + } + }; + + /** + * Setup the audio context when available, or switch to HTML5 Audio mode. + */ + var setupAudioContext = function() { + // Check if we are using Web Audio and setup the AudioContext if we are. + try { + if (typeof AudioContext !== 'undefined') { + Howler.ctx = new AudioContext(); + } else if (typeof webkitAudioContext !== 'undefined') { + Howler.ctx = new webkitAudioContext(); + } else { + Howler.usingWebAudio = false; + } + } catch(e) { + Howler.usingWebAudio = false; + } + + // Check if a webview is being used on iOS8 or earlier (rather than the browser). + // If it is, disable Web Audio as it causes crashing. + var iOS = (/iP(hone|od|ad)/.test(Howler._navigator && Howler._navigator.platform)); + var appVersion = Howler._navigator && Howler._navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/); + var version = appVersion ? parseInt(appVersion[1], 10) : null; + if (iOS && version && version < 9) { + var safari = /safari/.test(Howler._navigator && Howler._navigator.userAgent.toLowerCase()); + if (Howler._navigator && Howler._navigator.standalone && !safari || Howler._navigator && !Howler._navigator.standalone && !safari) { + Howler.usingWebAudio = false; + } + } + + // Create and expose the master GainNode when using Web Audio (useful for plugins or advanced usage). + if (Howler.usingWebAudio) { + Howler.masterGain = (typeof Howler.ctx.createGain === 'undefined') ? Howler.ctx.createGainNode() : Howler.ctx.createGain(); + Howler.masterGain.gain.value = 1; + Howler.masterGain.connect(Howler.ctx.destination); + } + + // Re-run the setup on Howler. + Howler._setup(); + }; + + // Add support for AMD (Asynchronous Module Definition) libraries such as require.js. + if (typeof define === 'function' && define.amd) { + define([], function() { + return { + Howler: Howler, + Howl: Howl + }; + }); + } + + // Add support for CommonJS libraries such as browserify. + if (typeof exports !== 'undefined') { + exports.Howler = Howler; + exports.Howl = Howl; + } + + // Define globally in case AMD is not available or unused. + if (typeof window !== 'undefined') { + window.HowlerGlobal = HowlerGlobal; + window.Howler = Howler; + window.Howl = Howl; + window.Sound = Sound; + } else if (typeof global !== 'undefined') { // Add to global in Node.js (for testing, etc). + global.HowlerGlobal = HowlerGlobal; + global.Howler = Howler; + global.Howl = Howl; + global.Sound = Sound; + } +})(); + + +/*! + * Spatial Plugin - Adds support for stereo and 3D audio where Web Audio is supported. + * + * howler.js v2.0.2 + * howlerjs.com + * + * (c) 2013-2016, James Simpson of GoldFire Studios + * goldfirestudios.com + * + * MIT License + */ + +(function() { + + 'use strict'; + + // Setup default properties. + HowlerGlobal.prototype._pos = [0, 0, 0]; + HowlerGlobal.prototype._orientation = [0, 0, -1, 0, 1, 0]; + + /** Global Methods **/ + /***************************************************************************/ + + /** + * Helper method to update the stereo panning position of all current Howls. + * Future Howls will not use this value unless explicitly set. + * @param {Number} pan A value of -1.0 is all the way left and 1.0 is all the way right. + * @return {Howler/Number} Self or current stereo panning value. + */ + HowlerGlobal.prototype.stereo = function(pan) { + var self = this; + + // Stop right here if not using Web Audio. + if (!self.ctx || !self.ctx.listener) { + return self; + } + + // Loop through all Howls and update their stereo panning. + for (var i=self._howls.length-1; i>=0; i--) { + self._howls[i].stereo(pan); + } + + return self; + }; + + /** + * Get/set the position of the listener in 3D cartesian space. Sounds using + * 3D position will be relative to the listener's position. + * @param {Number} x The x-position of the listener. + * @param {Number} y The y-position of the listener. + * @param {Number} z The z-position of the listener. + * @return {Howler/Array} Self or current listener position. + */ + HowlerGlobal.prototype.pos = function(x, y, z) { + var self = this; + + // Stop right here if not using Web Audio. + if (!self.ctx || !self.ctx.listener) { + return self; + } + + // Set the defaults for optional 'y' & 'z'. + y = (typeof y !== 'number') ? self._pos[1] : y; + z = (typeof z !== 'number') ? self._pos[2] : z; + + if (typeof x === 'number') { + self._pos = [x, y, z]; + self.ctx.listener.setPosition(self._pos[0], self._pos[1], self._pos[2]); + } else { + return self._pos; + } + + return self; + }; + + /** + * Get/set the direction the listener is pointing in the 3D cartesian space. + * A front and up vector must be provided. The front is the direction the + * face of the listener is pointing, and up is the direction the top of the + * listener is pointing. Thus, these values are expected to be at right angles + * from each other. + * @param {Number} x The x-orientation of the listener. + * @param {Number} y The y-orientation of the listener. + * @param {Number} z The z-orientation of the listener. + * @param {Number} xUp The x-orientation of the top of the listener. + * @param {Number} yUp The y-orientation of the top of the listener. + * @param {Number} zUp The z-orientation of the top of the listener. + * @return {Howler/Array} Returns self or the current orientation vectors. + */ + HowlerGlobal.prototype.orientation = function(x, y, z, xUp, yUp, zUp) { + var self = this; + + // Stop right here if not using Web Audio. + if (!self.ctx || !self.ctx.listener) { + return self; + } + + // Set the defaults for optional 'y' & 'z'. + var or = self._orientation; + y = (typeof y !== 'number') ? or[1] : y; + z = (typeof z !== 'number') ? or[2] : z; + xUp = (typeof xUp !== 'number') ? or[3] : xUp; + yUp = (typeof yUp !== 'number') ? or[4] : yUp; + zUp = (typeof zUp !== 'number') ? or[5] : zUp; + + if (typeof x === 'number') { + self._orientation = [x, y, z, xUp, yUp, zUp]; + self.ctx.listener.setOrientation(x, y, z, xUp, yUp, zUp); + } else { + return or; + } + + return self; + }; + + /** Group Methods **/ + /***************************************************************************/ + + /** + * Add new properties to the core init. + * @param {Function} _super Core init method. + * @return {Howl} + */ + Howl.prototype.init = (function(_super) { + return function(o) { + var self = this; + + // Setup user-defined default properties. + self._orientation = o.orientation || [1, 0, 0]; + self._stereo = o.stereo || null; + self._pos = o.pos || null; + self._pannerAttr = { + coneInnerAngle: typeof o.coneInnerAngle !== 'undefined' ? o.coneInnerAngle : 360, + coneOuterAngle: typeof o.coneOuterAngle !== 'undefined' ? o.coneOuterAngle : 360, + coneOuterGain: typeof o.coneOuterGain !== 'undefined' ? o.coneOuterGain : 0, + distanceModel: typeof o.distanceModel !== 'undefined' ? o.distanceModel : 'inverse', + maxDistance: typeof o.maxDistance !== 'undefined' ? o.maxDistance : 10000, + panningModel: typeof o.panningModel !== 'undefined' ? o.panningModel : 'HRTF', + refDistance: typeof o.refDistance !== 'undefined' ? o.refDistance : 1, + rolloffFactor: typeof o.rolloffFactor !== 'undefined' ? o.rolloffFactor : 1 + }; + + // Setup event listeners. + self._onstereo = o.onstereo ? [{fn: o.onstereo}] : []; + self._onpos = o.onpos ? [{fn: o.onpos}] : []; + self._onorientation = o.onorientation ? [{fn: o.onorientation}] : []; + + // Complete initilization with howler.js core's init function. + return _super.call(this, o); + }; + })(Howl.prototype.init); + + /** + * Get/set the stereo panning of the audio source for this sound or all in the group. + * @param {Number} pan A value of -1.0 is all the way left and 1.0 is all the way right. + * @param {Number} id (optional) The sound ID. If none is passed, all in group will be updated. + * @return {Howl/Number} Returns self or the current stereo panning value. + */ + Howl.prototype.stereo = function(pan, id) { + var self = this; + + // Stop right here if not using Web Audio. + if (!self._webAudio) { + return self; + } + + // If the sound hasn't loaded, add it to the load queue to change stereo pan when capable. + if (self._state !== 'loaded') { + self._queue.push({ + event: 'stereo', + action: function() { + self.stereo(pan, id); + } + }); + + return self; + } + + // Check for PannerStereoNode support and fallback to PannerNode if it doesn't exist. + var pannerType = (typeof Howler.ctx.createStereoPanner === 'undefined') ? 'spatial' : 'stereo'; + + // Setup the group's stereo panning if no ID is passed. + if (typeof id === 'undefined') { + // Return the group's stereo panning if no parameters are passed. + if (typeof pan === 'number') { + self._stereo = pan; + self._pos = [pan, 0, 0]; + } else { + return self._stereo; + } + } + + // Change the streo panning of one or all sounds in group. + var ids = self._getSoundIds(id); + for (var i=0; i Returns the group's values. + * pannerAttr(id) -> Returns the sound id's values. + * pannerAttr(o) -> Set's the values of all sounds in this Howl group. + * pannerAttr(o, id) -> Set's the values of passed sound id. + * + * Attributes: + * coneInnerAngle - (360 by default) There will be no volume reduction inside this angle. + * coneOuterAngle - (360 by default) The volume will be reduced to a constant value of + * `coneOuterGain` outside this angle. + * coneOuterGain - (0 by default) The amount of volume reduction outside of `coneOuterAngle`. + * distanceModel - ('inverse' by default) Determines algorithm to use to reduce volume as audio moves + * away from listener. Can be `linear`, `inverse` or `exponential`. + * maxDistance - (10000 by default) Volume won't reduce between source/listener beyond this distance. + * panningModel - ('HRTF' by default) Determines which spatialization algorithm is used to position audio. + * Can be `HRTF` or `equalpower`. + * refDistance - (1 by default) A reference distance for reducing volume as the source + * moves away from the listener. + * rolloffFactor - (1 by default) How quickly the volume reduces as source moves from listener. + * + * @return {Howl/Object} Returns self or current panner attributes. + */ + Howl.prototype.pannerAttr = function() { + var self = this; + var args = arguments; + var o, id, sound; + + // Stop right here if not using Web Audio. + if (!self._webAudio) { + return self; + } + + // Determine the values based on arguments. + if (args.length === 0) { + // Return the group's panner attribute values. + return self._pannerAttr; + } else if (args.length === 1) { + if (typeof args[0] === 'object') { + o = args[0]; + + // Set the grou's panner attribute values. + if (typeof id === 'undefined') { + self._pannerAttr = { + coneInnerAngle: typeof o.coneInnerAngle !== 'undefined' ? o.coneInnerAngle : self._coneInnerAngle, + coneOuterAngle: typeof o.coneOuterAngle !== 'undefined' ? o.coneOuterAngle : self._coneOuterAngle, + coneOuterGain: typeof o.coneOuterGain !== 'undefined' ? o.coneOuterGain : self._coneOuterGain, + distanceModel: typeof o.distanceModel !== 'undefined' ? o.distanceModel : self._distanceModel, + maxDistance: typeof o.maxDistance !== 'undefined' ? o.maxDistance : self._maxDistance, + panningModel: typeof o.panningModel !== 'undefined' ? o.panningModel : self._panningModel, + refDistance: typeof o.refDistance !== 'undefined' ? o.refDistance : self._refDistance, + rolloffFactor: typeof o.rolloffFactor !== 'undefined' ? o.rolloffFactor : self._rolloffFactor + }; + } + } else { + // Return this sound's panner attribute values. + sound = self._soundById(parseInt(args[0], 10)); + return sound ? sound._pannerAttr : self._pannerAttr; + } + } else if (args.length === 2) { + o = args[0]; + id = parseInt(args[1], 10); + } + + // Update the values of the specified sounds. + var ids = self._getSoundIds(id); + for (var i=0; i -1) return true; + if (name.name.indexOf(filterString) > -1) return true; }); render( _.sortBy(filterList, 'name')); }); - sort(function() { - render( _.sortBy(phoneBookData, 'name') ); - }, function() { - render( _.sortBy(phoneBookData, 'name').reverse()); +/* + * + */ + sort(function(sortBy) { + console.log('sortByAcs',sortBy); + if (sortBy.asc) { + render( _.sortBy(phoneBookData, 'name') ); + } else { + render( _.sortBy(phoneBookData, 'name').reverse()); + } }); }); }); diff --git a/ex9/js/records.js b/ex9/js/records.js new file mode 100644 index 0000000..58a8b56 --- /dev/null +++ b/ex9/js/records.js @@ -0,0 +1,31 @@ +define(function() { + return function(callback) { + $( '.letterImage' ).on( 'click' , function(elementID) { + console.log('testing',elementID); + console.log('testing',$(this).attr('alt')); + callback({ + number: $(this).attr('alt'), + type: 'letterImage' + }); + }); + $( '.nounImage' ).on( 'click' , function(elementID) { + console.log('testing',elementID); + console.log('testing',$(this).attr('alt')); + callback({ + number: $(this).attr('alt'), + type: 'nounImage' + }); + }); + + var updateRecords = function(objRecord) { + $('li').remove(); + $( "#phoneBook" ).hide(); + $("#phoneBookTemplate").tmpl( objRecord ) + .appendTo( "#phoneBook" ); + $('#phoneBook').slideDown( 3000, function() { + document.getElementById("loader").style.display = "none"; + }); + } + updateRecords(); + }; +}); diff --git a/ex9/js/sort.js b/ex9/js/sort.js index 21f8f82..e572b70 100644 --- a/ex9/js/sort.js +++ b/ex9/js/sort.js @@ -1,17 +1,17 @@ define(function() { - return function(asc,desc) { + return function(sortList) { $('#btnASC').click(function() { console.log('asc'); $('#btnASC').hide(); $('#btnDESC').show(); - asc(); + sortList({asc: true}); }); $('#btnDESC').click(function() { console.log('desc'); $('#btnASC').show(); $('#btnDESC').hide(); - desc(); + sortList({asc: false}); }); }; }); diff --git a/ex9/phonebook.html b/ex9/phonebook.html index 50c2cfd..35b5d91 100644 --- a/ex9/phonebook.html +++ b/ex9/phonebook.html @@ -3,12 +3,43 @@ + + +

CONTACTS

@@ -35,6 +66,7 @@

CONTACTS

+
    -
  1. - - *ohad kravchick - - - 347-346-2425 - - -
    2. -
  2. - - *ohad kravchick - - - 347-346-2425 - - -
    3. -
  3. - - *ohad kravchick - - - 347-346-2425 - - -
    4. -
  4. - - *zuriel yahav - - - 0450-9001564 - - -
From 6f1d3f60df47fee9eb3b63e75a086547e3e34019 Mon Sep 17 00:00:00 2001 From: Zuriel Yahav Date: Tue, 10 Jan 2017 02:47:55 +0200 Subject: [PATCH 14/14] main, records --- ex9/js/main.js | 15 ++++++++++++++- ex9/js/records.js | 11 ----------- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/ex9/js/main.js b/ex9/js/main.js index 90567c8..894ad14 100644 --- a/ex9/js/main.js +++ b/ex9/js/main.js @@ -3,9 +3,22 @@ requirejs(['ajaxGet','load','filter', 'sort','records'] , function(ajaxGet, load var phoneBookData = []; var render = function(objList) { + + console.log('updateRecordsAAA'); + var updateRecords = function(objRecord) { + console.log('updateRecords'); + $('li').remove(); + $( "#phoneBook" ).hide(); + $("#phoneBookTemplate").tmpl( objRecord ) + .appendTo( "#phoneBook" ); + $('#phoneBook').slideDown( 3000, function() { + document.getElementById("loader").style.display = "none"; + }); + } + updateRecords(objList); + records(function(myThis) { - updateRecords(objList); var file = {}; if (myThis.type === 'letterImage') { file = {src: ['assets/sound/letter/'+myThis.number+'-letter.mp3']}; diff --git a/ex9/js/records.js b/ex9/js/records.js index 58a8b56..150d542 100644 --- a/ex9/js/records.js +++ b/ex9/js/records.js @@ -16,16 +16,5 @@ define(function() { type: 'nounImage' }); }); - - var updateRecords = function(objRecord) { - $('li').remove(); - $( "#phoneBook" ).hide(); - $("#phoneBookTemplate").tmpl( objRecord ) - .appendTo( "#phoneBook" ); - $('#phoneBook').slideDown( 3000, function() { - document.getElementById("loader").style.display = "none"; - }); - } - updateRecords(); }; });