From f497bd3dea75c89dba2f57d1fbd690182c7136c3 Mon Sep 17 00:00:00 2001 From: Dmitry Borisov Date: Wed, 21 Nov 2012 18:54:02 +0600 Subject: [PATCH 01/10] initial html --- event-dom.html | 94 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 event-dom.html diff --git a/event-dom.html b/event-dom.html new file mode 100644 index 0000000..3440166 --- /dev/null +++ b/event-dom.html @@ -0,0 +1,94 @@ + + + + + + EVents test + + + + + + + +
+
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ + dd.MM.yy hh:mm +
+
+
+ +
+ + dd.MM.yy hh:mm +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ + +
+
+
+
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + +
ИмяМестоНачалоКонецПериодичностьПредупреждениеЗаметки
ИмяМесто23423423423Начало234234234234Конец234234234234234ПериодичностьПредупреждениеЗаметки
+
+
+ + + \ No newline at end of file From bdfd6b07af4135faf5117b146331775d097447dc Mon Sep 17 00:00:00 2001 From: Borisov Dmitry Date: Sun, 25 Nov 2012 22:58:46 +0600 Subject: [PATCH 02/10] added dz 4 as submodule --- .gitmodules | 3 +++ dz-4-oop | 1 + event-controller.js | 22 ++++++++++++++++++++++ event-dom.html | 14 +++----------- 4 files changed, 29 insertions(+), 11 deletions(-) create mode 100644 .gitmodules create mode 160000 dz-4-oop create mode 100644 event-controller.js diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..66d5759 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "dz-4-oop"] + path = dz-4-oop + url = git@github.com:turboDi/dz-4-oop.git diff --git a/dz-4-oop b/dz-4-oop new file mode 160000 index 0000000..dd05570 --- /dev/null +++ b/dz-4-oop @@ -0,0 +1 @@ +Subproject commit dd055707bdc2f2c63b01d40c92ba8606fb96f296 diff --git a/event-controller.js b/event-controller.js new file mode 100644 index 0000000..3f74515 --- /dev/null +++ b/event-controller.js @@ -0,0 +1,22 @@ +function $(id) { + return document.getElementById(id); +} + +function addEventRow() { + var table = $('eventTable'); + table.innerHTML += ''+ + 'Имя'+ + 'Место23423423423'+ + 'Начало234234234234'+ + 'Конец234234234234234'+ + 'Периодичность'+ + 'Предупреждение'+ + 'Заметки'+ + ''; +} + +function addClick(e) { + title = $('title').value; + addEventRow(); + return false; +} \ No newline at end of file diff --git a/event-dom.html b/event-dom.html index 3440166..6e3cfc9 100644 --- a/event-dom.html +++ b/event-dom.html @@ -61,13 +61,13 @@
- +
- +
@@ -77,18 +77,10 @@ - - - - - - - - -
Имя МестоПредупреждение Заметки
ИмяМесто23423423423Начало234234234234Конец234234234234234ПериодичностьПредупреждениеЗаметки
+ \ No newline at end of file From e2a27054cd2991ebbf120f36dde648d649d1df70 Mon Sep 17 00:00:00 2001 From: Borisov Dmitry Date: Mon, 26 Nov 2012 00:41:43 +0600 Subject: [PATCH 03/10] add event to table logic --- dz-4-oop | 2 +- event-controller.js | 62 ++++++++++++++++++++++++++++++++++----------- event-dom.html | 24 ++++++++++++------ 3 files changed, 64 insertions(+), 24 deletions(-) diff --git a/dz-4-oop b/dz-4-oop index dd05570..21bca18 160000 --- a/dz-4-oop +++ b/dz-4-oop @@ -1 +1 @@ -Subproject commit dd055707bdc2f2c63b01d40c92ba8606fb96f296 +Subproject commit 21bca18b8e3372b03b9e5b59a9200ccd394c5bd0 diff --git a/event-controller.js b/event-controller.js index 3f74515..cf4a0ae 100644 --- a/event-controller.js +++ b/event-controller.js @@ -2,21 +2,53 @@ function $(id) { return document.getElementById(id); } -function addEventRow() { - var table = $('eventTable'); - table.innerHTML += ''+ - 'Имя'+ - 'Место23423423423'+ - 'Начало234234234234'+ - 'Конец234234234234234'+ - 'Периодичность'+ - 'Предупреждение'+ - 'Заметки'+ - ''; +function initSelect(select, obj) { + var item, index = 0; + for (item in obj) { + if (obj.hasOwnProperty(item)) { + select.innerHTML += ''; + } + } } -function addClick(e) { - title = $('title').value; - addEventRow(); - return false; +function initControls() { + initSelect($('repeat'), Const.REPEAT); + initSelect($('alert'), Const.ALERT); +} + +function addEventRow(event) { + var tbody = $('eventTable').getElementsByTagName("tbody")[0], evRowHTML = '', prop; + for (prop in event) { + if (event.hasOwnProperty(prop)) { + evRowHTML += '' + event[prop] + ''; + } + } + tbody.innerHTML += evRowHTML + ''; +} + +function invalidateForm(validator) { + +} + +function addClick() { + var validator, event = new Event({ + title : $('title').value, + location : $('location').value, + startDate : new Date($('startDate').value), + endDate : new Date($('endDate').value), + repeat : Const.REPEAT[$('repeat').value], + alert : Const.ALERT[$('alert').value], + notes : $('notes').value + }); + validator = event.validate(); + if (validator.valid) { + addEventRow(event); + } else { + invalidateForm(validator); + } +} + +function clearTable() { + var tbody = $('eventTable').getElementsByTagName("tbody")[0]; + tbody.innerHTML = ""; } \ No newline at end of file diff --git a/event-dom.html b/event-dom.html index 6e3cfc9..0536276 100644 --- a/event-dom.html +++ b/event-dom.html @@ -9,7 +9,7 @@ - +
@@ -30,38 +30,38 @@
- dd.MM.yy hh:mm + dd/MM/yyyy hh:mm
- dd.MM.yy hh:mm + dd/MM/yyyy hh:mm
- +
- +
-
+
@@ -77,10 +77,18 @@ Предупреждение Заметки + +
- + + + + + + + + - \ No newline at end of file From 67f367aa0b9dfd284aef992ac3df356e93423ca5 Mon Sep 17 00:00:00 2001 From: Borisov Dmitry Date: Tue, 27 Nov 2012 01:04:22 +0600 Subject: [PATCH 04/10] validation --- dz-4-oop | 2 +- event-controller.js | 189 ++++++++++++++++++++++++++++++++++---------- event-dom.html | 23 ++++-- 3 files changed, 164 insertions(+), 50 deletions(-) diff --git a/dz-4-oop b/dz-4-oop index 21bca18..fb5e6e1 160000 --- a/dz-4-oop +++ b/dz-4-oop @@ -1 +1 @@ -Subproject commit 21bca18b8e3372b03b9e5b59a9200ccd394c5bd0 +Subproject commit fb5e6e1224cb9d7fa5ee33d81a55329844b6d77d diff --git a/event-controller.js b/event-controller.js index cf4a0ae..cb69087 100644 --- a/event-controller.js +++ b/event-controller.js @@ -1,54 +1,157 @@ -function $(id) { - return document.getElementById(id); -} +var EventController = (function () { + function $(id) { + return document.getElementById(id); + } -function initSelect(select, obj) { - var item, index = 0; - for (item in obj) { - if (obj.hasOwnProperty(item)) { - select.innerHTML += ''; + function addClass( classname, element ) { + var cn = element.className; + //test for existance + if( cn.indexOf( classname ) != -1 ) { + return; + } + //add a space if the element already has class + if( cn != '' ) { + classname = ' '+classname; } + element.className = cn+classname; } -} -function initControls() { - initSelect($('repeat'), Const.REPEAT); - initSelect($('alert'), Const.ALERT); -} + function removeClass( classname, element ) { + var cn = element.className; + var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" ); + cn = cn.replace( rxp, '' ); + element.className = cn; + } -function addEventRow(event) { - var tbody = $('eventTable').getElementsByTagName("tbody")[0], evRowHTML = '', prop; - for (prop in event) { - if (event.hasOwnProperty(prop)) { - evRowHTML += '' + event[prop] + ''; + function initSelect(select, obj) { + var item, index = 0; + for (item in obj) { + if (obj.hasOwnProperty(item)) { + select.innerHTML += ''; + } } } - tbody.innerHTML += evRowHTML + ''; -} -function invalidateForm(validator) { + function clearForm() { + var field, fields = $('add-form').querySelectorAll('div.control-group'); + for (field in fields) { + if (fields.hasOwnProperty(field)) { + removeClass("error", fields[field]); + } + } + addClass("invisible", $("errors")); + } -} + function initControls() { + initSelect($('repeat'), Const.REPEAT); + initSelect($('alert'), Const.ALERT); + clearForm(); + } -function addClick() { - var validator, event = new Event({ - title : $('title').value, - location : $('location').value, - startDate : new Date($('startDate').value), - endDate : new Date($('endDate').value), - repeat : Const.REPEAT[$('repeat').value], - alert : Const.ALERT[$('alert').value], - notes : $('notes').value - }); - validator = event.validate(); - if (validator.valid) { - addEventRow(event); - } else { - invalidateForm(validator); - } -} + function addEventRow(event) { + var tbody = $('eventTable').getElementsByTagName("tbody")[0], evRowHTML = '', prop; + for (prop in event) { + if (event.hasOwnProperty(prop)) { + evRowHTML += '' + event[prop] + ''; + } + } + tbody.innerHTML += evRowHTML + ''; + } -function clearTable() { - var tbody = $('eventTable').getElementsByTagName("tbody")[0]; - tbody.innerHTML = ""; -} \ No newline at end of file + function invalidateForm(validator) { + var error, field, summary = "Errors!
"; + for (error in validator.errors) { + if (validator.errors.hasOwnProperty(error)) { + field = $(validator.errors[error].fieldName); + addClass("error", field.parentNode.parentNode); + summary += validator.errors[error].errorText + "
"; + } + } + $("errors-summary").innerHTML = summary; + removeClass("invisible", $("errors")); + } + + Event.prototype.getDisplayableView = function() { + return { + title : this.title, + location : this.location, + startDate : formatDate(this.startDate), + endDate : formatDate(this.endDate), + repeat : this.repeat.title, + alert : this.alert.title, + notes : this.notes + } + } + + function formatDate(date) { + var dd, mm, yyyy, hh, min; + dd = date.getDate(); + mm = date.getMonth(); + yyyy = date.getFullYear(); + hh = date.getHours(); + min = date.getMinutes(); + return dd + "/" + mm + "/" + yyyy + " " + hh + ":" + min; + } + + function clearTable() { + var tbody = $('eventTable').getElementsByTagName("tbody")[0]; + tbody.innerHTML = ""; + } + + function fillTable(events) { + var event; + for (event in events) { + if (events.hasOwnProperty(event)) { + addEventRow(events[event].getDisplayableView()); + } + } + } + + function refreshTable(events) { + clearTable(); + fillTable(events); + } + + var events = new Events(); + + function addClick(random) { + var validator, event; + if (random) { + event = Utils.randomEvent(); + $('title').value = event.title; + $('location').value = event.location; + $('startDate').value = formatDate(event.startDate); + $('endDate').value = formatDate(event.endDate); + $('repeat').value = event.repeat; + $('alert').value = event.alert; + $('notes').value = event.notes; + } else { + event = new Event({ + title : $('title').value, + location : $('location').value, + startDate : new Date($('startDate').value), + endDate : new Date($('endDate').value), + repeat : Const.REPEAT[$('repeat').value], + alert : Const.ALERT[$('alert').value], + notes : $('notes').value + }); + } + validator = event.validate(); + if (validator.valid) { + clearForm(); + events.add(event); + refreshTable(events.items); + } else { + invalidateForm(validator); + } + } + + return { + addClick : function(random) { + addClick(random); + }, + initControls : function() { + initControls(); + } + } +}()); \ No newline at end of file diff --git a/event-dom.html b/event-dom.html index 0536276..8986c84 100644 --- a/event-dom.html +++ b/event-dom.html @@ -6,18 +6,29 @@ EVents test - + - +
-
+
+
+ × +
+
- +
@@ -60,8 +71,8 @@
- - + +
From 58d37c372de03ef518eb88a2117e69e15330324d Mon Sep 17 00:00:00 2001 From: Dmitry Borisov Date: Tue, 27 Nov 2012 19:28:17 +0600 Subject: [PATCH 05/10] extracted Controls namespace --- controls.js | 104 +++++++++++++++++++++++++++++++++ event-controller.js | 137 ++++++++------------------------------------ event-dom.html | 3 +- 3 files changed, 129 insertions(+), 115 deletions(-) create mode 100644 controls.js diff --git a/controls.js b/controls.js new file mode 100644 index 0000000..5d8fb73 --- /dev/null +++ b/controls.js @@ -0,0 +1,104 @@ +function $(id) { + 'use strict'; + return document.getElementById(id); +} + +var Controls = (function () { + 'use strict'; + function addClass(classname, element) { + var cn = element.className; + if (cn.indexOf(classname) !== -1) { + return; + } + if (cn !== '') { + classname = ' ' + classname; + } + element.className = cn + classname; + } + + function removeClass(classname, element) { + var cn = element.className, + rxp = new RegExp("\\s?\\b" + classname + "\\b", "g"); + cn = cn.replace(rxp, ''); + element.className = cn; + } + + function initSelect(select, obj) { + var item, index = 0; + for (item in obj) { + if (obj.hasOwnProperty(item)) { + select.innerHTML += ''; + } + } + } + + var Table = function () { + this.id = 'eventTable'; + this.body = $(this.id).getElementsByTagName("tbody")[0]; + }, Form = function () { + this.id = 'add-form'; + }, table = new Table(), form = new Form(); + + Table.prototype = + { + addRow : function (obj) { + var rowHTML = '', prop; + for (prop in obj) { + if (obj.hasOwnProperty(prop)) { + rowHTML += '' + obj[prop] + ''; + } + } + this.body.innerHTML += rowHTML + ''; + }, + clear : function () { + this.body.innerHTML = ""; + }, + fill : function (objs) { + var obj; + for (obj in objs) { + if (objs.hasOwnProperty(obj)) { + this.addRow(objs[obj].getDisplayableView()); + } + } + }, + refresh : function (objs) { + this.clear(); + this.fill(objs); + } + }; + + Form.prototype = + { + clear : function () { + var field, fields = $(this.id).querySelectorAll('div.control-group'); + for (field in fields) { + if (fields.hasOwnProperty(field)) { + removeClass("error", fields[field]); + } + } + addClass("invisible", $("errors")); + }, + invalidate : function (validator) { + var error, field, summary = "Errors!
"; + for (error in validator.errors) { + if (validator.errors.hasOwnProperty(error)) { + field = $(validator.errors[error].fieldName); + addClass("error", field.parentNode.parentNode); + summary += validator.errors[error].errorText + "
"; + } + } + $("errors-summary").innerHTML = summary; + removeClass("invisible", $("errors")); + } + }; + + return { + form : form, + table : table, + init : function () { + initSelect($('repeat'), Const.REPEAT); + initSelect($('alert'), Const.ALERT); + form.clear(); + } + }; +}()); \ No newline at end of file diff --git a/event-controller.js b/event-controller.js index cb69087..94f47c3 100644 --- a/event-controller.js +++ b/event-controller.js @@ -1,77 +1,16 @@ var EventController = (function () { - function $(id) { - return document.getElementById(id); - } - - function addClass( classname, element ) { - var cn = element.className; - //test for existance - if( cn.indexOf( classname ) != -1 ) { - return; - } - //add a space if the element already has class - if( cn != '' ) { - classname = ' '+classname; - } - element.className = cn+classname; - } - - function removeClass( classname, element ) { - var cn = element.className; - var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" ); - cn = cn.replace( rxp, '' ); - element.className = cn; - } - - function initSelect(select, obj) { - var item, index = 0; - for (item in obj) { - if (obj.hasOwnProperty(item)) { - select.innerHTML += ''; - } - } - } - - function clearForm() { - var field, fields = $('add-form').querySelectorAll('div.control-group'); - for (field in fields) { - if (fields.hasOwnProperty(field)) { - removeClass("error", fields[field]); - } - } - addClass("invisible", $("errors")); - } - - function initControls() { - initSelect($('repeat'), Const.REPEAT); - initSelect($('alert'), Const.ALERT); - clearForm(); - } - - function addEventRow(event) { - var tbody = $('eventTable').getElementsByTagName("tbody")[0], evRowHTML = '', prop; - for (prop in event) { - if (event.hasOwnProperty(prop)) { - evRowHTML += '' + event[prop] + ''; - } - } - tbody.innerHTML += evRowHTML + ''; + 'use strict'; + function formatDate(date) { + var dd, mm, yyyy, hh, min; + dd = date.getDate(); + mm = date.getMonth(); + yyyy = date.getFullYear(); + hh = date.getHours(); + min = date.getMinutes(); + return dd + "/" + mm + "/" + yyyy + " " + hh + ":" + min; } - function invalidateForm(validator) { - var error, field, summary = "Errors!
"; - for (error in validator.errors) { - if (validator.errors.hasOwnProperty(error)) { - field = $(validator.errors[error].fieldName); - addClass("error", field.parentNode.parentNode); - summary += validator.errors[error].errorText + "
"; - } - } - $("errors-summary").innerHTML = summary; - removeClass("invisible", $("errors")); - } - - Event.prototype.getDisplayableView = function() { + Event.prototype.getDisplayableView = function () { return { title : this.title, location : this.location, @@ -80,40 +19,13 @@ var EventController = (function () { repeat : this.repeat.title, alert : this.alert.title, notes : this.notes - } - } - - function formatDate(date) { - var dd, mm, yyyy, hh, min; - dd = date.getDate(); - mm = date.getMonth(); - yyyy = date.getFullYear(); - hh = date.getHours(); - min = date.getMinutes(); - return dd + "/" + mm + "/" + yyyy + " " + hh + ":" + min; - } - - function clearTable() { - var tbody = $('eventTable').getElementsByTagName("tbody")[0]; - tbody.innerHTML = ""; - } - - function fillTable(events) { - var event; - for (event in events) { - if (events.hasOwnProperty(event)) { - addEventRow(events[event].getDisplayableView()); - } - } - } - - function refreshTable(events) { - clearTable(); - fillTable(events); - } - - var events = new Events(); - + }; + }; + + var events = new Events(), + table = Controls.table, + form = Controls.form; + function addClick(random) { var validator, event; if (random) { @@ -138,20 +50,17 @@ var EventController = (function () { } validator = event.validate(); if (validator.valid) { - clearForm(); + form.clear(); events.add(event); - refreshTable(events.items); + table.refresh(events.items); } else { - invalidateForm(validator); + form.invalidate(validator); } } - + return { - addClick : function(random) { + addClick : function (random) { addClick(random); - }, - initControls : function() { - initControls(); } - } + }; }()); \ No newline at end of file diff --git a/event-dom.html b/event-dom.html index 8986c84..06193e7 100644 --- a/event-dom.html +++ b/event-dom.html @@ -16,7 +16,7 @@ - +
@@ -100,6 +100,7 @@ + \ No newline at end of file From 9f3186ce9653d360a40a6c7d1fd2b4a048b2f03f Mon Sep 17 00:00:00 2001 From: Dmitry Borisov Date: Wed, 28 Nov 2012 18:42:23 +0600 Subject: [PATCH 06/10] added filterBar & sortBar controls --- controls.js | 41 +++++++++++++++++++++++++++++++++++++++-- event-controller.js | 10 +++++++++- event-dom.html | 20 +++++++++++++++++++- 3 files changed, 67 insertions(+), 4 deletions(-) diff --git a/controls.js b/controls.js index 5d8fb73..b18e86e 100644 --- a/controls.js +++ b/controls.js @@ -5,9 +5,14 @@ function $(id) { var Controls = (function () { 'use strict'; + function hasClass(classname, element) { + var cn = element.className; + return cn.indexOf(classname) !== -1; + } + function addClass(classname, element) { var cn = element.className; - if (cn.indexOf(classname) !== -1) { + if (hasClass(classname, element)) { return; } if (cn !== '') { @@ -23,6 +28,12 @@ var Controls = (function () { element.className = cn; } + function removeFromArray(arr, from, to) { + var rest = arr.slice((to || from) + 1 || arr.length); + arr.length = from < 0 ? arr.length + from : from; + return arr.push.apply(arr, rest); + } + function initSelect(select, obj) { var item, index = 0; for (item in obj) { @@ -37,7 +48,12 @@ var Controls = (function () { this.body = $(this.id).getElementsByTagName("tbody")[0]; }, Form = function () { this.id = 'add-form'; - }, table = new Table(), form = new Form(); + }, FilterBar = function () { + this.id = 'filter-bar'; + this.filters = []; + }, SortBar = function () { + this.id = 'sort-bar'; + }; Table.prototype = { @@ -92,9 +108,30 @@ var Controls = (function () { } }; + FilterBar.prototype = + { + addFilter : function (filter) { + this.filters.push(filter); + }, + removeFilter : function (filter) { + this.filters = removeFromArray(this.filters, this.filters.indexOf(filter)); + }, + pushBtn : function (filter) { + var filterBtn = $(filter); + if (hasClass("active", filterBtn)) { + this.removeFilter(filter); + } else { + this.addFilter(filter); + addClass("active", filterBtn); + } + } + }; + + var table = new Table(), form = new Form(), filterBar = new FilterBar(); return { form : form, table : table, + filterBar : filterBar, init : function () { initSelect($('repeat'), Const.REPEAT); initSelect($('alert'), Const.ALERT); diff --git a/event-controller.js b/event-controller.js index 94f47c3..d9ffb78 100644 --- a/event-controller.js +++ b/event-controller.js @@ -24,7 +24,8 @@ var EventController = (function () { var events = new Events(), table = Controls.table, - form = Controls.form; + form = Controls.form, + filterBar = Controls.filterBar; function addClick(random) { var validator, event; @@ -58,9 +59,16 @@ var EventController = (function () { } } + function filter() { + filterBar.pushBtn('findPastEvents'); + } + return { addClick : function (random) { addClick(random); + }, + filter : function () { + filter(); } }; }()); \ No newline at end of file diff --git a/event-dom.html b/event-dom.html index 06193e7..3d001f9 100644 --- a/event-dom.html +++ b/event-dom.html @@ -22,7 +22,6 @@
- ×
@@ -78,6 +77,25 @@
+
+
+ Filter + +
+ Sort + +
+
+
From cca681744d0f8883c65f8419cf13bca3a0f99e50 Mon Sep 17 00:00:00 2001 From: Borisov Dmitry Date: Thu, 29 Nov 2012 01:38:27 +0600 Subject: [PATCH 07/10] now filter works --- controls.js | 300 +++++++++++++++++++++++--------------------- event-controller.js | 155 ++++++++++++----------- event-dom.html | 8 +- 3 files changed, 246 insertions(+), 217 deletions(-) diff --git a/controls.js b/controls.js index b18e86e..c318a06 100644 --- a/controls.js +++ b/controls.js @@ -1,141 +1,161 @@ -function $(id) { - 'use strict'; - return document.getElementById(id); -} - -var Controls = (function () { - 'use strict'; - function hasClass(classname, element) { - var cn = element.className; - return cn.indexOf(classname) !== -1; - } - - function addClass(classname, element) { - var cn = element.className; - if (hasClass(classname, element)) { - return; - } - if (cn !== '') { - classname = ' ' + classname; - } - element.className = cn + classname; - } - - function removeClass(classname, element) { - var cn = element.className, - rxp = new RegExp("\\s?\\b" + classname + "\\b", "g"); - cn = cn.replace(rxp, ''); - element.className = cn; - } - - function removeFromArray(arr, from, to) { - var rest = arr.slice((to || from) + 1 || arr.length); - arr.length = from < 0 ? arr.length + from : from; - return arr.push.apply(arr, rest); - } - - function initSelect(select, obj) { - var item, index = 0; - for (item in obj) { - if (obj.hasOwnProperty(item)) { - select.innerHTML += ''; - } - } - } - - var Table = function () { - this.id = 'eventTable'; - this.body = $(this.id).getElementsByTagName("tbody")[0]; - }, Form = function () { - this.id = 'add-form'; - }, FilterBar = function () { - this.id = 'filter-bar'; - this.filters = []; - }, SortBar = function () { - this.id = 'sort-bar'; - }; - - Table.prototype = - { - addRow : function (obj) { - var rowHTML = '', prop; - for (prop in obj) { - if (obj.hasOwnProperty(prop)) { - rowHTML += ''; - } - } - this.body.innerHTML += rowHTML + ''; - }, - clear : function () { - this.body.innerHTML = ""; - }, - fill : function (objs) { - var obj; - for (obj in objs) { - if (objs.hasOwnProperty(obj)) { - this.addRow(objs[obj].getDisplayableView()); - } - } - }, - refresh : function (objs) { - this.clear(); - this.fill(objs); - } - }; - - Form.prototype = - { - clear : function () { - var field, fields = $(this.id).querySelectorAll('div.control-group'); - for (field in fields) { - if (fields.hasOwnProperty(field)) { - removeClass("error", fields[field]); - } - } - addClass("invisible", $("errors")); - }, - invalidate : function (validator) { - var error, field, summary = "Errors!
"; - for (error in validator.errors) { - if (validator.errors.hasOwnProperty(error)) { - field = $(validator.errors[error].fieldName); - addClass("error", field.parentNode.parentNode); - summary += validator.errors[error].errorText + "
"; - } - } - $("errors-summary").innerHTML = summary; - removeClass("invisible", $("errors")); - } - }; - - FilterBar.prototype = - { - addFilter : function (filter) { - this.filters.push(filter); - }, - removeFilter : function (filter) { - this.filters = removeFromArray(this.filters, this.filters.indexOf(filter)); - }, - pushBtn : function (filter) { - var filterBtn = $(filter); - if (hasClass("active", filterBtn)) { - this.removeFilter(filter); - } else { - this.addFilter(filter); - addClass("active", filterBtn); - } - } - }; - - var table = new Table(), form = new Form(), filterBar = new FilterBar(); - return { - form : form, - table : table, - filterBar : filterBar, - init : function () { - initSelect($('repeat'), Const.REPEAT); - initSelect($('alert'), Const.ALERT); - form.clear(); - } - }; +function $(id) { + 'use strict'; + return document.getElementById(id); +} + +var Controls = (function () { + 'use strict'; + function hasClass(classname, element) { + var cn = element.className; + return cn.indexOf(classname) !== -1; + } + + function addClass(classname, element) { + var cn = element.className; + if (hasClass(classname, element)) { + return; + } + if (cn !== '') { + classname = ' ' + classname; + } + element.className = cn + classname; + } + + function removeClass(classname, element) { + var cn = element.className, + rxp = new RegExp("\\s?\\b" + classname + "\\b", "g"); + cn = cn.replace(rxp, ''); + element.className = cn; + } + + function initSelect(select, obj) { + var item, index = 0; + for (item in obj) { + if (obj.hasOwnProperty(item)) { + select.innerHTML += ''; + } + } + } + + var Table = function () { + this.id = 'eventTable'; + this.body = $(this.id).getElementsByTagName("tbody")[0]; + }, Form = function () { + this.id = 'add-form'; + }, FilterBar = function () { + this.id = 'filter-bar'; + this.filters = []; + }, SortBar = function () { + this.id = 'sort-bar'; + }; + + Table.prototype = + { + addRow : function (obj) { + var rowHTML = '', prop; + for (prop in obj) { + if (obj.hasOwnProperty(prop)) { + rowHTML += ''; + } + } + this.body.innerHTML += rowHTML + ''; + }, + clear : function () { + this.body.innerHTML = ""; + }, + fill : function (objs) { + var obj; + for (obj in objs) { + if (objs.hasOwnProperty(obj)) { + this.addRow(objs[obj].getDisplayableView()); + } + } + }, + refresh : function (objs) { + this.clear(); + this.fill(objs); + } + }; + + Form.prototype = + { + clear : function () { + var field, fields = $(this.id).querySelectorAll('div.control-group'); + for (field in fields) { + if (fields.hasOwnProperty(field)) { + removeClass("error", fields[field]); + } + } + addClass("invisible", $("errors")); + }, + invalidate : function (validator) { + var error, field, summary = "Errors!
"; + for (error in validator.errors) { + if (validator.errors.hasOwnProperty(error)) { + field = $(validator.errors[error].fieldName); + addClass("error", field.parentNode.parentNode); + summary += validator.errors[error].errorText + "
"; + } + } + $("errors-summary").innerHTML = summary; + removeClass("invisible", $("errors")); + } + }; + + FilterBar.prototype = + { + addFilter : function (filter) { + this.filters.push(filter); + }, + removeFilter : function (filter) { + var index = this.filters.indexOf(filter); + if (index !== -1) { + this.filters.splice(index, 1); + } + }, + pushBtn : function (filter) { + var wasOn, filterLi = $(filter).parentNode; + if (hasClass("active", filterLi)) { + this.removeFilter(filter); + removeClass("active", filterLi); + wasOn = true; + } else { + this.addFilter(filter); + addClass("active", filterLi); + wasOn = false; + } + return wasOn; + }, + invokeInt : function(filter) { + this.filtered = this.filtered[filter](); + }, + invoke : function(collection, filter) { + var fullRefresh = this.pushBtn(filter); + if (this.filtered && !fullRefresh) { + this.invokeInt(filter); + } else { + this.filtered = collection; + for (filter in this.filters) { + if (this.filters.hasOwnProperty(filter)) { + this.invokeInt(this.filters[filter]); + } + } + } + return this.filtered; + } + }; + + return { + form : new Form(), + table : new Table(), + filterBar : new FilterBar(), + initSelect : function (select, obj) { + var item, index = 0; + for (item in obj) { + if (obj.hasOwnProperty(item)) { + select.innerHTML += ''; + } + } + } + }; }()); \ No newline at end of file diff --git a/event-controller.js b/event-controller.js index d9ffb78..30255d8 100644 --- a/event-controller.js +++ b/event-controller.js @@ -1,74 +1,83 @@ -var EventController = (function () { - 'use strict'; - function formatDate(date) { - var dd, mm, yyyy, hh, min; - dd = date.getDate(); - mm = date.getMonth(); - yyyy = date.getFullYear(); - hh = date.getHours(); - min = date.getMinutes(); - return dd + "/" + mm + "/" + yyyy + " " + hh + ":" + min; - } - - Event.prototype.getDisplayableView = function () { - return { - title : this.title, - location : this.location, - startDate : formatDate(this.startDate), - endDate : formatDate(this.endDate), - repeat : this.repeat.title, - alert : this.alert.title, - notes : this.notes - }; - }; - - var events = new Events(), - table = Controls.table, - form = Controls.form, - filterBar = Controls.filterBar; - - function addClick(random) { - var validator, event; - if (random) { - event = Utils.randomEvent(); - $('title').value = event.title; - $('location').value = event.location; - $('startDate').value = formatDate(event.startDate); - $('endDate').value = formatDate(event.endDate); - $('repeat').value = event.repeat; - $('alert').value = event.alert; - $('notes').value = event.notes; - } else { - event = new Event({ - title : $('title').value, - location : $('location').value, - startDate : new Date($('startDate').value), - endDate : new Date($('endDate').value), - repeat : Const.REPEAT[$('repeat').value], - alert : Const.ALERT[$('alert').value], - notes : $('notes').value - }); - } - validator = event.validate(); - if (validator.valid) { - form.clear(); - events.add(event); - table.refresh(events.items); - } else { - form.invalidate(validator); - } - } - - function filter() { - filterBar.pushBtn('findPastEvents'); - } - - return { - addClick : function (random) { - addClick(random); - }, - filter : function () { - filter(); - } - }; +var EventController = (function () { + 'use strict'; + function formatDate(date) { + var dd, mm, yyyy, hh, min; + dd = date.getDate(); + mm = date.getMonth() + 1; + yyyy = date.getFullYear(); + hh = date.getHours(); + min = date.getMinutes(); + return dd + "/" + mm + "/" + yyyy + " " + hh + ":" + min; + } + + Event.prototype.getDisplayableView = function () { + return { + title : this.title, + location : this.location, + startDate : formatDate(this.startDate), + endDate : formatDate(this.endDate), + repeat : this.repeat.title, + alert : this.alert.title, + notes : this.notes + }; + }; + + var events = new Events(), + table = Controls.table, + form = Controls.form, + filterBar = Controls.filterBar; + + function addClick(random) { + var validator, event; + if (random) { + event = Utils.randomEvent(); + $('title').value = event.title; + $('location').value = event.location; + $('startDate').value = formatDate(event.startDate); + $('endDate').value = formatDate(event.endDate); + $('repeat').value = event.repeat; + $('alert').value = event.alert; + $('notes').value = event.notes; + } else { + event = new Event({ + title : $('title').value, + location : $('location').value, + startDate : new Date($('startDate').value), + endDate : new Date($('endDate').value), + repeat : Const.REPEAT[$('repeat').value], + alert : Const.ALERT[$('alert').value], + notes : $('notes').value + }); + } + validator = event.validate(); + if (validator.valid) { + form.clear(); + events.add(event); + table.refresh(events.items); + } else { + form.invalidate(validator); + } + } + + return { + addClick : function (random) { + addClick(random); + }, + init : function () { + Controls.initSelect($('repeat'), Const.REPEAT); + Controls.initSelect($('alert'), Const.ALERT); + form.clear(); + $('addBtn').addEventListener('click', function() { + addClick(); + }); + $('addRandomBtn').addEventListener('click', function() { + addClick(true); + }); + $(filterBar.id).addEventListener('click', function(e) { + var filtered, cur = e.srcElement || e.originalTarget; + filtered = filterBar.invoke(events, cur.id); + table.refresh(filtered.items); + }); + } + }; }()); \ No newline at end of file diff --git a/event-dom.html b/event-dom.html index 3d001f9..1ec1949 100644 --- a/event-dom.html +++ b/event-dom.html @@ -16,7 +16,7 @@ - +
@@ -70,8 +70,8 @@
- - + +
@@ -81,7 +81,7 @@
Filter
', prop; - for (prop in obj) { - if (obj.hasOwnProperty(prop)) { - rowHTML += ''; - } - } - this.body.innerHTML += rowHTML + ''; - }, - clear : function () { - this.body.innerHTML = ""; - }, - fill : function (objs) { - var obj; - for (obj in objs) { - if (objs.hasOwnProperty(obj)) { - this.addRow(objs[obj].getDisplayableView()); - } - } - }, - refresh : function (objs) { - this.clear(); - this.fill(objs); - } - }; - - Form.prototype = - { - clear : function () { - var field, fields = $(this.id).querySelectorAll('div.control-group'); - for (field in fields) { - if (fields.hasOwnProperty(field)) { - removeClass("error", fields[field]); - } - } - addClass("invisible", $("errors")); - }, - invalidate : function (validator) { - var error, field, summary = "Errors!
"; - for (error in validator.errors) { - if (validator.errors.hasOwnProperty(error)) { - field = $(validator.errors[error].fieldName); - addClass("error", field.parentNode.parentNode); - summary += validator.errors[error].errorText + "
"; - } - } - $("errors-summary").innerHTML = summary; - removeClass("invisible", $("errors")); - } - }; - - FilterBar.prototype = - { - addFilter : function (filter) { - this.filters.push(filter); - }, - removeFilter : function (filter) { - var index = this.filters.indexOf(filter); - if (index !== -1) { - this.filters.splice(index, 1); - } - }, - pushBtn : function (filter) { - var wasOn, filterLi = $(filter).parentNode; - if (hasClass("active", filterLi)) { - this.removeFilter(filter); - removeClass("active", filterLi); - wasOn = true; - } else { - this.addFilter(filter); - addClass("active", filterLi); - wasOn = false; - } - return wasOn; - }, - invokeInt : function(filter) { - this.filtered = this.filtered[filter](); - }, - invoke : function(collection, filter) { - var fullRefresh = this.pushBtn(filter); - if (this.filtered && !fullRefresh) { - this.invokeInt(filter); - } else { - this.filtered = collection; - for (filter in this.filters) { - if (this.filters.hasOwnProperty(filter)) { - this.invokeInt(this.filters[filter]); - } - } - } - return this.filtered; - } - }; - - return { - form : new Form(), - table : new Table(), - filterBar : new FilterBar(), - initSelect : function (select, obj) { - var item, index = 0; - for (item in obj) { - if (obj.hasOwnProperty(item)) { - select.innerHTML += ''; - } - } - } - }; +function $(id) { + 'use strict'; + return document.getElementById(id); +} + +var Controls = (function () { + 'use strict'; + function hasClass(classname, element) { + var cn = element.className; + return cn.indexOf(classname) !== -1; + } + + function addClass(classname, element) { + var cn = element.className; + if (hasClass(classname, element)) { + return; + } + if (cn !== '') { + classname = ' ' + classname; + } + element.className = cn + classname; + } + + function removeClass(classname, element) { + var cn = element.className, + rxp = new RegExp("\\s?\\b" + classname + "\\b", "g"); + cn = cn.replace(rxp, ''); + element.className = cn; + } + + function toggleClass(classname, element) { + var hadClass = hasClass(classname, element); + if (hadClass) { + removeClass(classname, element); + } else { + addClass(classname, element); + } + return hadClass; + } + + function initSelect(select, obj) { + var item, index = 0; + for (item in obj) { + if (obj.hasOwnProperty(item)) { + select.innerHTML += ''; + } + } + } + + var Table = function () { + this.id = 'eventTable'; + this.body = $(this.id).getElementsByTagName("tbody")[0]; + }, Form = function () { + this.id = 'add-form'; + }, FilterBar = function () { + this.id = 'filter-bar'; + this.filters = []; + }, SortBar = function () { + this.id = 'sort-bar'; + }; + + Table.prototype = + { + addRow : function (obj) { + var rowHTML = '', prop; + for (prop in obj) { + if (obj.hasOwnProperty(prop)) { + rowHTML += ''; + } + } + this.body.innerHTML += rowHTML + ''; + }, + clear : function () { + this.body.innerHTML = ""; + }, + fill : function (objs) { + var obj; + for (obj in objs) { + if (objs.hasOwnProperty(obj)) { + this.addRow(objs[obj].getDisplayableView()); + } + } + }, + refresh : function (objs) { + this.clear(); + this.fill(objs); + } + }; + + Form.prototype = + { + clear : function () { + var field, fields = $(this.id).querySelectorAll('div.control-group'); + for (field in fields) { + if (fields.hasOwnProperty(field)) { + removeClass("error", fields[field]); + } + } + addClass("invisible", $("errors")); + }, + invalidate : function (validator) { + var error, field, summary = "Errors!
"; + for (error in validator.errors) { + if (validator.errors.hasOwnProperty(error)) { + field = $(validator.errors[error].fieldName); + addClass("error", field.parentNode.parentNode); + summary += validator.errors[error].errorText + "
"; + } + } + $("errors-summary").innerHTML = summary; + removeClass("invisible", $("errors")); + } + }; + + FilterBar.prototype = + { + clear : function () { + var filterLi, filterLis = $(this.id).getElementsByTagName('li'); + for (filterLi in filterLis) { + if (filterLis.hasOwnProperty(filterLi)) { + removeClass("active", filterLis[filterLi]); + } + } + this.filtered = null; + }, + addFilter : function (filter) { + this.filters.push(filter); + }, + removeFilter : function (filter) { + var index = this.filters.indexOf(filter); + if (index !== -1) { + this.filters.splice(index, 1); + } + }, + pushBtn : function (filter) { + var filterLi = $(filter).parentNode, wasOn = toggleClass("active", filterLi); + if (wasOn) { + this.removeFilter(filter); + } else { + this.addFilter(filter); + } + return wasOn; + }, + invokeInt : function (filter) { + this.filtered = this.filtered[filter](); + }, + invoke : function (collection, filterFunc) { + var filter, fullRefresh = this.pushBtn(filterFunc); + if (this.filtered && !fullRefresh) { + this.invokeInt(filterFunc); + } else { + this.filtered = collection; + for (filter in this.filters) { + if (this.filters.hasOwnProperty(filter)) { + this.invokeInt(this.filters[filter]); + } + } + } + return this.filtered; + } + }; + + SortBar.prototype = + { + clear : function () { + var sortLi, sortLis = $(this.id).getElementsByTagName('li'); + for (sortLi in sortLis) { + if (sortLis.hasOwnProperty(sortLi)) { + removeClass("active", sortLis[sortLi]); + } + } + this.sortFunc = ''; + }, + pushBtn : function (sortFunc) { + var sortLi = $(sortFunc).parentNode; + this.clear(); + this.sortFunc = sortFunc; + toggleClass("active", sortLi); + }, + invoke : function (collection, sortFunc) { + this.pushBtn(sortFunc); + return collection[sortFunc](); + } + }; + + return { + form : new Form(), + table : new Table(), + filterBar : new FilterBar(), + sortBar : new SortBar(), + initSelect : function (select, obj) { + var item, index = 0; + for (item in obj) { + if (obj.hasOwnProperty(item)) { + select.innerHTML += ''; + } + } + } + }; }()); \ No newline at end of file diff --git a/event-controller.js b/event-controller.js index 30255d8..9b7a148 100644 --- a/event-controller.js +++ b/event-controller.js @@ -1,83 +1,92 @@ -var EventController = (function () { - 'use strict'; - function formatDate(date) { - var dd, mm, yyyy, hh, min; - dd = date.getDate(); - mm = date.getMonth() + 1; - yyyy = date.getFullYear(); - hh = date.getHours(); - min = date.getMinutes(); - return dd + "/" + mm + "/" + yyyy + " " + hh + ":" + min; - } - - Event.prototype.getDisplayableView = function () { - return { - title : this.title, - location : this.location, - startDate : formatDate(this.startDate), - endDate : formatDate(this.endDate), - repeat : this.repeat.title, - alert : this.alert.title, - notes : this.notes - }; - }; - - var events = new Events(), - table = Controls.table, - form = Controls.form, - filterBar = Controls.filterBar; - - function addClick(random) { - var validator, event; - if (random) { - event = Utils.randomEvent(); - $('title').value = event.title; - $('location').value = event.location; - $('startDate').value = formatDate(event.startDate); - $('endDate').value = formatDate(event.endDate); - $('repeat').value = event.repeat; - $('alert').value = event.alert; - $('notes').value = event.notes; - } else { - event = new Event({ - title : $('title').value, - location : $('location').value, - startDate : new Date($('startDate').value), - endDate : new Date($('endDate').value), - repeat : Const.REPEAT[$('repeat').value], - alert : Const.ALERT[$('alert').value], - notes : $('notes').value - }); - } - validator = event.validate(); - if (validator.valid) { - form.clear(); - events.add(event); - table.refresh(events.items); - } else { - form.invalidate(validator); - } - } - - return { - addClick : function (random) { - addClick(random); - }, - init : function () { - Controls.initSelect($('repeat'), Const.REPEAT); - Controls.initSelect($('alert'), Const.ALERT); - form.clear(); - $('addBtn').addEventListener('click', function() { - addClick(); - }); - $('addRandomBtn').addEventListener('click', function() { - addClick(true); - }); - $(filterBar.id).addEventListener('click', function(e) { - var filtered, cur = e.srcElement || e.originalTarget; - filtered = filterBar.invoke(events, cur.id); - table.refresh(filtered.items); - }); - } - }; +var EventController = (function () { + 'use strict'; + function formatDate(date) { + var dd, mm, yyyy, hh, min; + dd = date.getDate(); + mm = date.getMonth() + 1; + yyyy = date.getFullYear(); + hh = date.getHours(); + min = date.getMinutes(); + return dd + "/" + mm + "/" + yyyy + " " + hh + ":" + min; + } + + Event.prototype.getDisplayableView = function () { + return { + title : this.title, + location : this.location, + startDate : formatDate(this.startDate), + endDate : formatDate(this.endDate), + repeat : this.repeat.title, + alert : this.alert.title, + notes : this.notes + }; + }; + + var events = new Events(), + table = Controls.table, + form = Controls.form, + filterBar = Controls.filterBar, + sortBar = Controls.sortBar; + + function addClick(random) { + var validator, event; + if (random) { + event = Utils.randomEvent(); + $('title').value = event.title; + $('location').value = event.location; + $('startDate').value = formatDate(event.startDate); + $('endDate').value = formatDate(event.endDate); + $('repeat').value = event.repeat; + $('alert').value = event.alert; + $('notes').value = event.notes; + } else { + event = new Event({ + title : $('title').value, + location : $('location').value, + startDate : new Date($('startDate').value), + endDate : new Date($('endDate').value), + repeat : Const.REPEAT[$('repeat').value], + alert : Const.ALERT[$('alert').value], + notes : $('notes').value + }); + } + validator = event.validate(); + if (validator.valid) { + form.clear(); + filterBar.clear(); + sortBar.clear(); + events.add(event); + table.refresh(events.items); + } else { + form.invalidate(validator); + } + } + + return { + addClick : function (random) { + addClick(random); + }, + init : function () { + Controls.initSelect($('repeat'), Const.REPEAT); + Controls.initSelect($('alert'), Const.ALERT); + form.clear(); + $('addBtn').addEventListener('click', function () { + addClick(); + }); + $('addRandomBtn').addEventListener('click', function () { + addClick(true); + }); + $(filterBar.id).addEventListener('click', function (e) { + var filtered, cur = e.srcElement || e.originalTarget; + filtered = filterBar.invoke(events, cur.id); + table.refresh(filtered.items); + }); + $(sortBar.id).addEventListener('click', function (e) { + var cur = e.srcElement || e.originalTarget, + collection = filterBar.filtered || events; + sortBar.invoke(collection, cur.id); + table.refresh(collection.items); + }); + } + }; }()); \ No newline at end of file From 3f3c1f9903a195bc7f6a5a30e6fafa068df74909 Mon Sep 17 00:00:00 2001 From: Borisov Dmitry Date: Thu, 29 Nov 2012 23:05:52 +0600 Subject: [PATCH 09/10] finally did it --- controls.js | 506 +++++++++++++++++++++++++++----------------- event-controller.js | 199 +++++++++-------- 2 files changed, 415 insertions(+), 290 deletions(-) diff --git a/controls.js b/controls.js index ae7cff9..d3cd8dd 100644 --- a/controls.js +++ b/controls.js @@ -1,200 +1,308 @@ -function $(id) { - 'use strict'; - return document.getElementById(id); -} - -var Controls = (function () { - 'use strict'; - function hasClass(classname, element) { - var cn = element.className; - return cn.indexOf(classname) !== -1; - } - - function addClass(classname, element) { - var cn = element.className; - if (hasClass(classname, element)) { - return; - } - if (cn !== '') { - classname = ' ' + classname; - } - element.className = cn + classname; - } - - function removeClass(classname, element) { - var cn = element.className, - rxp = new RegExp("\\s?\\b" + classname + "\\b", "g"); - cn = cn.replace(rxp, ''); - element.className = cn; - } - - function toggleClass(classname, element) { - var hadClass = hasClass(classname, element); - if (hadClass) { - removeClass(classname, element); - } else { - addClass(classname, element); - } - return hadClass; - } - - function initSelect(select, obj) { - var item, index = 0; - for (item in obj) { - if (obj.hasOwnProperty(item)) { - select.innerHTML += ''; - } - } - } - - var Table = function () { - this.id = 'eventTable'; - this.body = $(this.id).getElementsByTagName("tbody")[0]; - }, Form = function () { - this.id = 'add-form'; - }, FilterBar = function () { - this.id = 'filter-bar'; - this.filters = []; - }, SortBar = function () { - this.id = 'sort-bar'; - }; - - Table.prototype = - { - addRow : function (obj) { - var rowHTML = '', prop; - for (prop in obj) { - if (obj.hasOwnProperty(prop)) { - rowHTML += ''; - } - } - this.body.innerHTML += rowHTML + ''; - }, - clear : function () { - this.body.innerHTML = ""; - }, - fill : function (objs) { - var obj; - for (obj in objs) { - if (objs.hasOwnProperty(obj)) { - this.addRow(objs[obj].getDisplayableView()); - } - } - }, - refresh : function (objs) { - this.clear(); - this.fill(objs); - } - }; - - Form.prototype = - { - clear : function () { - var field, fields = $(this.id).querySelectorAll('div.control-group'); - for (field in fields) { - if (fields.hasOwnProperty(field)) { - removeClass("error", fields[field]); - } - } - addClass("invisible", $("errors")); - }, - invalidate : function (validator) { - var error, field, summary = "Errors!
"; - for (error in validator.errors) { - if (validator.errors.hasOwnProperty(error)) { - field = $(validator.errors[error].fieldName); - addClass("error", field.parentNode.parentNode); - summary += validator.errors[error].errorText + "
"; - } - } - $("errors-summary").innerHTML = summary; - removeClass("invisible", $("errors")); - } - }; - - FilterBar.prototype = - { - clear : function () { - var filterLi, filterLis = $(this.id).getElementsByTagName('li'); - for (filterLi in filterLis) { - if (filterLis.hasOwnProperty(filterLi)) { - removeClass("active", filterLis[filterLi]); - } - } - this.filtered = null; - }, - addFilter : function (filter) { - this.filters.push(filter); - }, - removeFilter : function (filter) { - var index = this.filters.indexOf(filter); - if (index !== -1) { - this.filters.splice(index, 1); - } - }, - pushBtn : function (filter) { - var filterLi = $(filter).parentNode, wasOn = toggleClass("active", filterLi); - if (wasOn) { - this.removeFilter(filter); - } else { - this.addFilter(filter); - } - return wasOn; - }, - invokeInt : function (filter) { - this.filtered = this.filtered[filter](); - }, - invoke : function (collection, filterFunc) { - var filter, fullRefresh = this.pushBtn(filterFunc); - if (this.filtered && !fullRefresh) { - this.invokeInt(filterFunc); - } else { - this.filtered = collection; - for (filter in this.filters) { - if (this.filters.hasOwnProperty(filter)) { - this.invokeInt(this.filters[filter]); - } - } - } - return this.filtered; - } - }; - - SortBar.prototype = - { - clear : function () { - var sortLi, sortLis = $(this.id).getElementsByTagName('li'); - for (sortLi in sortLis) { - if (sortLis.hasOwnProperty(sortLi)) { - removeClass("active", sortLis[sortLi]); - } - } - this.sortFunc = ''; - }, - pushBtn : function (sortFunc) { - var sortLi = $(sortFunc).parentNode; - this.clear(); - this.sortFunc = sortFunc; - toggleClass("active", sortLi); - }, - invoke : function (collection, sortFunc) { - this.pushBtn(sortFunc); - return collection[sortFunc](); - } - }; - - return { - form : new Form(), - table : new Table(), - filterBar : new FilterBar(), - sortBar : new SortBar(), - initSelect : function (select, obj) { - var item, index = 0; - for (item in obj) { - if (obj.hasOwnProperty(item)) { - select.innerHTML += ''; - } - } - } - }; +function $(id) { + 'use strict'; + return document.getElementById(id); +} + +var Controls = (function () { + 'use strict'; + /** + * Проверяет есть ли у элемента css класс + * + * @param {String} classname имя css класса + * @param {Element} element DOM элемент + * + * @return {Boolean} + */ + function hasClass(classname, element) { + var cn = element.className; + return cn.indexOf(classname) !== -1; + } + + /** + * Добавляет css класс элементу + * + * @param {String} classname имя css класса + * @param {Element} element DOM элемент + * + */ + function addClass(classname, element) { + var cn = element.className; + if (hasClass(classname, element)) { + return; + } + if (cn !== '') { + classname = ' ' + classname; + } + element.className = cn + classname; + } + + /** + * Удаляет css класс у элемента + * + * @param {String} classname имя css класса + * @param {Element} element DOM элемент + * + */ + function removeClass(classname, element) { + var cn = element.className, + rxp = new RegExp("\\s?\\b" + classname + "\\b", "g"); + cn = cn.replace(rxp, ''); + element.className = cn; + } + + /** + * Переключает наличие/отсутствие css класса у элемента + * + * @param {String} classname имя css класса + * @param {Element} element DOM элемент + * + * @return {Boolean} + */ + function toggleClass(classname, element) { + var hadClass = hasClass(classname, element); + if (hadClass) { + removeClass(classname, element); + } else { + addClass(classname, element); + } + return hadClass; + } + + var Table = function () { + this.id = 'eventTable'; + this.body = $(this.id).getElementsByTagName("tbody")[0]; + }, Form = function () { + this.id = 'add-form'; + }, FilterBar = function () { + this.id = 'filter-bar'; + this.filters = []; + }, SortBar = function () { + this.id = 'sort-bar'; + }; + + Table.prototype = + { + /** + * Добавляет строку в таблицу со свойствами объекта obj + * + * @param {Object} obj + * + */ + addRow : function (obj) { + var rowHTML = '', prop; + for (prop in obj) { + if (obj.hasOwnProperty(prop)) { + rowHTML += ''; + } + } + this.body.innerHTML += rowHTML + ''; + }, + /** + * Очищает таблицу + */ + clear : function () { + this.body.innerHTML = ""; + }, + /** + * Заполняет таблицу объектами objs + * + * @param {Array} objs + * + */ + fill : function (objs) { + var obj; + for (obj in objs) { + if (objs.hasOwnProperty(obj)) { + this.addRow(objs[obj].getDisplayableView()); + } + } + }, + /** + * Очищает и заполняет таблицу объектами objs + * + * @param {Array} objs + * + */ + refresh : function (objs) { + this.clear(); + this.fill(objs); + } + }; + + Form.prototype = + { + /** + * Очищает форму и возвращает ее к исходному состоянию + */ + clear : function () { + var field, fields = $(this.id).querySelectorAll('div.control-group'); + for (field in fields) { + if (fields.hasOwnProperty(field)) { + removeClass("error", fields[field]); + } + } + addClass("invisible", $("errors")); + }, + /** + * Выделяет ошибочные поля на форме + * + * @param {ValidationResult} validator объект, содержащий результаты валидации + * + */ + invalidate : function (validator) { + var error, field, summary = "Errors!
"; + for (error in validator.errors) { + if (validator.errors.hasOwnProperty(error)) { + field = $(validator.errors[error].fieldName); + addClass("error", field.parentNode.parentNode); + summary += validator.errors[error].errorText + "
"; + } + } + $("errors-summary").innerHTML = summary; + removeClass("invisible", $("errors")); + } + }; + + FilterBar.prototype = + { + /** + * Очищает фильтр и возвращает его к исходному состоянию + */ + clear : function () { + var filterLi, filterLis = $(this.id).getElementsByTagName('li'); + for (filterLi in filterLis) { + if (filterLis.hasOwnProperty(filterLi)) { + removeClass("active", filterLis[filterLi]); + } + } + this.filtered = null; + }, + /** + * Добавляет фильтр + * + * @param {String} filter название функции фильтрации коллекции + * + */ + addFilter : function (filter) { + this.filters.push(filter); + }, + /** + * Убирает фильтр + * + * @param {String} filter название функции фильтрации коллекции + * + */ + removeFilter : function (filter) { + var index = this.filters.indexOf(filter); + if (index !== -1) { + this.filters.splice(index, 1); + } + }, + /** + * Обработчик нажатия кнопки фильтр-бара + * + * @param {String} filter название функции фильтрации коллекции, id кнопки + * + */ + pushBtn : function (filter) { + var filterLi = $(filter).parentNode, wasOn = toggleClass("active", filterLi); + if (wasOn) { + this.removeFilter(filter); + } else { + this.addFilter(filter); + } + return wasOn; + }, + /** + * Вызывает функцию фильтрации коллекции + * + * @param {String} filter название функции фильтрации коллекции + * + */ + invokeInt : function (filter) { + this.filtered = this.filtered[filter](); + }, + /** + * Применяет все функции фильтрации, занесенные в фильтр, к коллекции + * + * @param {Collection} collection + * @param {String} filterFunc название функции фильтрации коллекции + * + */ + invoke : function (collection, filterFunc) { + var filter, fullRefresh = this.pushBtn(filterFunc); + if (this.filtered && !fullRefresh) { + this.invokeInt(filterFunc); + } else { + this.filtered = collection; + for (filter in this.filters) { + if (this.filters.hasOwnProperty(filter)) { + this.invokeInt(this.filters[filter]); + } + } + } + return this.filtered; + } + }; + + SortBar.prototype = + { + /** + * Очищает бар сортировки и возвращает его к исходному состоянию + */ + clear : function () { + var sortLi, sortLis = $(this.id).getElementsByTagName('li'); + for (sortLi in sortLis) { + if (sortLis.hasOwnProperty(sortLi)) { + removeClass("active", sortLis[sortLi]); + } + } + this.sortFunc = ''; + }, + /** + * Обработчик нажатия кнопки бара сортировки + * + * @param {String} sortFunc название функции сортировки коллекции, id кнопки + * + */ + pushBtn : function (sortFunc) { + var sortLi = $(sortFunc).parentNode; + this.clear(); + this.sortFunc = sortFunc; + toggleClass("active", sortLi); + }, + /** + * Применяет функцию сортировки к коллекции + * + * @param {Collection} collection + * @param {String} sortFunc название функции сортировки коллекции + * + */ + invoke : function (collection, sortFunc) { + this.pushBtn(sortFunc); + return collection[sortFunc](); + } + }; + + return { + form : new Form(), + table : new Table(), + filterBar : new FilterBar(), + sortBar : new SortBar(), + /** + * Инициализирует селект свойствами объекта obj + * + * @param {Element} element DOM элемент ', prop; - for (prop in obj) { - if (obj.hasOwnProperty(prop)) { - rowHTML += ''; - } + Table.prototype = { + /** + * Добавляет строку в таблицу со свойствами объекта obj + * + * @param {Object} obj + * + */ + addRow : function (obj) { + var rowHTML = '', prop; + for (prop in obj) { + if (obj.hasOwnProperty(prop)) { + rowHTML += ''; } - this.body.innerHTML += rowHTML + ''; - }, - /** - * Очищает таблицу - */ - clear : function () { - this.body.innerHTML = ""; - }, - /** - * Заполняет таблицу объектами objs - * - * @param {Array} objs - * - */ - fill : function (objs) { - var obj; - for (obj in objs) { - if (objs.hasOwnProperty(obj)) { - this.addRow(objs[obj].getDisplayableView()); - } + } + this.body.innerHTML += rowHTML + ''; + }, + /** + * Очищает таблицу + */ + clear : function () { + this.body.innerHTML = ""; + }, + /** + * Заполняет таблицу объектами objs + * + * @param {Array} objs + * + */ + fill : function (objs) { + var obj; + for (obj in objs) { + if (objs.hasOwnProperty(obj)) { + this.addRow(objs[obj].getDisplayableView()); } - }, - /** - * Очищает и заполняет таблицу объектами objs - * - * @param {Array} objs - * - */ - refresh : function (objs) { - this.clear(); - this.fill(objs); } - }; + }, + /** + * Очищает и заполняет таблицу объектами objs + * + * @param {Array} objs + * + */ + refresh : function (objs) { + this.clear(); + this.fill(objs); + } + }; - Form.prototype = - { - /** - * Очищает форму и возвращает ее к исходному состоянию - */ - clear : function () { - var field, fields = $(this.id).querySelectorAll('div.control-group'); - for (field in fields) { - if (fields.hasOwnProperty(field)) { - removeClass("error", fields[field]); - } + Form.prototype = { + /** + * Очищает форму и возвращает ее к исходному состоянию + */ + clear : function () { + var field, fields = $(this.id).querySelectorAll('div.control-group'); + for (field in fields) { + if (fields.hasOwnProperty(field)) { + removeClass("error", fields[field]); } - addClass("invisible", $("errors")); - }, - /** - * Выделяет ошибочные поля на форме - * - * @param {ValidationResult} validator объект, содержащий результаты валидации - * - */ - invalidate : function (validator) { - var error, field, summary = "Errors!
"; - for (error in validator.errors) { - if (validator.errors.hasOwnProperty(error)) { - field = $(validator.errors[error].fieldName); - addClass("error", field.parentNode.parentNode); - summary += validator.errors[error].errorText + "
"; - } + } + addClass("invisible", $("errors")); + }, + /** + * Выделяет ошибочные поля на форме + * + * @param {ValidationResult} validator объект, содержащий результаты валидации + * + */ + invalidate : function (validator) { + var error, field, summary = "Errors!
"; + for (error in validator.errors) { + if (validator.errors.hasOwnProperty(error)) { + field = $(validator.errors[error].fieldName); + addClass("error", field.parentNode.parentNode); + summary += validator.errors[error].errorText + "
"; } - $("errors-summary").innerHTML = summary; - removeClass("invisible", $("errors")); } - }; + $("errors-summary").innerHTML = summary; + removeClass("invisible", $("errors")); + } + }; - FilterBar.prototype = - { - /** - * Очищает фильтр и возвращает его к исходному состоянию - */ - clear : function () { - var filterLi, filterLis = $(this.id).getElementsByTagName('li'); - for (filterLi in filterLis) { - if (filterLis.hasOwnProperty(filterLi)) { - removeClass("active", filterLis[filterLi]); - } - } - this.filtered = null; - }, - /** - * Добавляет фильтр - * - * @param {String} filter название функции фильтрации коллекции - * - */ - addFilter : function (filter) { - this.filters.push(filter); - }, - /** - * Убирает фильтр - * - * @param {String} filter название функции фильтрации коллекции - * - */ - removeFilter : function (filter) { - var index = this.filters.indexOf(filter); - if (index !== -1) { - this.filters.splice(index, 1); - } - }, - /** - * Обработчик нажатия кнопки фильтр-бара - * - * @param {String} filter название функции фильтрации коллекции, id кнопки - * - */ - pushBtn : function (filter) { - var filterLi = $(filter).parentNode, wasOn = toggleClass("active", filterLi); - if (wasOn) { - this.removeFilter(filter); - } else { - this.addFilter(filter); + FilterBar.prototype = { + /** + * Очищает фильтр и возвращает его к исходному состоянию + */ + clear : function () { + var filterLi, filterLis = $(this.id).getElementsByTagName('li'); + for (filterLi in filterLis) { + if (filterLis.hasOwnProperty(filterLi)) { + removeClass("active", filterLis[filterLi]); } - return wasOn; - }, - /** - * Вызывает функцию фильтрации коллекции - * - * @param {String} filter название функции фильтрации коллекции - * - */ - invokeInt : function (filter) { - this.filtered = this.filtered[filter](); - }, - /** - * Применяет все функции фильтрации, занесенные в фильтр, к коллекции - * - * @param {Collection} collection - * @param {String} filterFunc название функции фильтрации коллекции - * - */ - invoke : function (collection, filterFunc) { - var filter, fullRefresh = this.pushBtn(filterFunc); - if (this.filtered && !fullRefresh) { - this.invokeInt(filterFunc); - } else { - this.filtered = collection; - for (filter in this.filters) { - if (this.filters.hasOwnProperty(filter)) { - this.invokeInt(this.filters[filter]); - } + } + this.filtered = null; + }, + /** + * Добавляет фильтр + * + * @param {String} filter название функции фильтрации коллекции + * + */ + addFilter : function (filter) { + this.filters.push(filter); + }, + /** + * Убирает фильтр + * + * @param {String} filter название функции фильтрации коллекции + * + */ + removeFilter : function (filter) { + var index = this.filters.indexOf(filter); + if (index !== -1) { + this.filters.splice(index, 1); + } + }, + /** + * Обработчик нажатия кнопки фильтр-бара + * + * @param {String} filter название функции фильтрации коллекции, id кнопки + * + */ + pushBtn : function (filter) { + var filterLi = $(filter).parentNode, wasOn = toggleClass("active", filterLi); + if (wasOn) { + this.removeFilter(filter); + } else { + this.addFilter(filter); + } + return wasOn; + }, + /** + * Вызывает функцию фильтрации коллекции + * + * @param {String} filter название функции фильтрации коллекции + * + */ + invokeInt : function (filter) { + this.filtered = this.filtered[filter](); + }, + /** + * Применяет все функции фильтрации, занесенные в фильтр, к коллекции + * + * @param {Collection} collection + * @param {String} filterFunc название функции фильтрации коллекции + * + */ + invoke : function (collection, filterFunc) { + var filter, fullRefresh = this.pushBtn(filterFunc); + if (this.filtered && !fullRefresh) { + this.invokeInt(filterFunc); + } else { + this.filtered = collection; + for (filter in this.filters) { + if (this.filters.hasOwnProperty(filter)) { + this.invokeInt(this.filters[filter]); } } - return this.filtered; } - }; + return this.filtered; + } + }; - SortBar.prototype = - { - /** - * Очищает бар сортировки и возвращает его к исходному состоянию - */ - clear : function () { - var sortLi, sortLis = $(this.id).getElementsByTagName('li'); - for (sortLi in sortLis) { - if (sortLis.hasOwnProperty(sortLi)) { - removeClass("active", sortLis[sortLi]); - } + SortBar.prototype = { + /** + * Очищает бар сортировки и возвращает его к исходному состоянию + */ + clear : function () { + var sortLi, sortLis = $(this.id).getElementsByTagName('li'); + for (sortLi in sortLis) { + if (sortLis.hasOwnProperty(sortLi)) { + removeClass("active", sortLis[sortLi]); } - this.sortFunc = ''; - }, - /** - * Обработчик нажатия кнопки бара сортировки - * - * @param {String} sortFunc название функции сортировки коллекции, id кнопки - * - */ - pushBtn : function (sortFunc) { - var sortLi = $(sortFunc).parentNode; - this.clear(); - this.sortFunc = sortFunc; - toggleClass("active", sortLi); - }, - /** - * Применяет функцию сортировки к коллекции - * - * @param {Collection} collection - * @param {String} sortFunc название функции сортировки коллекции - * - */ - invoke : function (collection, sortFunc) { - this.pushBtn(sortFunc); - return collection[sortFunc](); } - }; + this.sortFunc = ''; + }, + /** + * Обработчик нажатия кнопки бара сортировки + * + * @param {String} sortFunc название функции сортировки коллекции, id кнопки + * + */ + pushBtn : function (sortFunc) { + var sortLi = $(sortFunc).parentNode; + this.clear(); + this.sortFunc = sortFunc; + toggleClass("active", sortLi); + }, + /** + * Применяет функцию сортировки к коллекции + * + * @param {Collection} collection + * @param {String} sortFunc название функции сортировки коллекции + * + */ + invoke : function (collection, sortFunc) { + this.pushBtn(sortFunc); + return collection[sortFunc](); + } + }; return { form : new Form(), @@ -297,12 +296,13 @@ var Controls = (function () { * */ initSelect : function (select, obj) { - var item, index = 0; + var item, innerHTML = ''; for (item in obj) { if (obj.hasOwnProperty(item)) { - select.innerHTML += ''; + innerHTML += ''; } } + select.innerHTML = innerHTML; } }; }()); \ No newline at end of file diff --git a/event-controller.js b/event-controller.js index 7247e12..07076ce 100644 --- a/event-controller.js +++ b/event-controller.js @@ -106,4 +106,9 @@ var EventController = (function () { }); } }; -}()); \ No newline at end of file +}()); + +document.body.addEventListener('load', function () { + 'use strict'; + EventController.init(); +}, false); \ No newline at end of file diff --git a/event-dom.html b/event-dom.html index 1ec1949..5929d7c 100644 --- a/event-dom.html +++ b/event-dom.html @@ -16,7 +16,7 @@ - +
Имя
' + obj[prop] + '
' + obj[prop] + '
' + obj[prop] + '
' + obj[prop] + '
' + obj[prop] + '
' + obj[prop] + '
' + obj[prop] + '
' + obj[prop] + '