Permalink
Browse files

Deleting a board now works.

  • Loading branch information...
colinsullivan committed Dec 23, 2010
1 parent 56c5fc0 commit 3ad53e14f5ac8827695f5acf00f69d6348f4bb79
Binary file not shown.
@@ -10,8 +10,12 @@ if(!bingo) {
page: null,
/* This will store the models */
models: {},
+ /* This will store the widgets */
+ widgets: {},
/* This will store the page objects */
pages: {},
+ /* This will store some helpers */
+ helpers: {},
/* some init functions */
init: {},
@@ -9,7 +9,7 @@
* of the field element is used as the default text.
* @class
**/
-function AutoClearField(params) {
+bingo.helpers.AutoClearField = function(params) {
if(params) {
this.init(params);
}
@@ -20,7 +20,7 @@ function AutoClearField(params) {
* will be watching for changes.
* @constructor
**/
-AutoClearField.prototype.init = function(params) {
+bingo.helpers.AutoClearField.prototype.init = function(params) {
var inputElement = params.inputElement;
@@ -54,7 +54,7 @@ AutoClearField.prototype.init = function(params) {
/**
* This is called when the input element is focused.
**/
-AutoClearField.prototype.focus = function() {
+bingo.helpers.AutoClearField.prototype.focus = function() {
var inputElement = this.inputElement;
var defaultValue = this.defaultValue;
@@ -68,7 +68,7 @@ AutoClearField.prototype.focus = function() {
/**
* This is called when the input element is blurred.
**/
-AutoClearField.prototype.blur = function() {
+bingo.helpers.AutoClearField.prototype.blur = function() {
var inputElement = this.inputElement;
var defaultValue = this.defaultValue;
@@ -1,9 +1,13 @@
/**
* @file ConfirmModalAlert.js
- * A subclass of ModalAlert, when a confirmation is needed.
* @author Colin Sullivan <colinsul [at] gmail.com>
+ **/
+
+
+/**
+ * A subclass of ModalAlert, when a confirmation is needed.
+ * @class
**/
-
function ConfirmModalAlert(params) {
if(params) {
this.init(params);
@@ -65,9 +69,14 @@ ConfirmModalAlert.prototype.initButtons = function() {
* Same as parent's loadAndDisplay, except with a confirm button.
**/
ConfirmModalAlert.prototype.loadAndDisplayContentWithConfirm = function(params) {
- ModalAlert.prototype.loadAndDisplayContent.call(this, params);
+ params.callback = function(me, params) {
+ return function(data) {
+ params.content = data;
+ me.displayContentWithConfirm(params)
+ }
+ }(this, params);
- this.displayContentWithConfirm(params)
+ ModalAlert.prototype.loadAndDisplayContent.call(this, params);
}
@@ -98,6 +107,8 @@ ConfirmModalAlert.prototype.displayContent = function(params) {
* @param params Object {
* cancelText: The string to place in the cancel button
* confirmText: The string for the OK button.
+ * confirmCallback: The function to call when user confirms
+ * cancelCallback: the function to call when user cancels
* ...see ModalAlert.prototype.displayContent
* }
**/
@@ -1,13 +1,17 @@
/**
* @file ModalAlert.js
+ * @author Colin Sullivan <colinsul [at] gmail.com>
+ **/
+
+
+/**
* A ModalAlert object is a "window" that pops up to alert the user. Any content
* can be injected into this window. The intent is for only one of these objects
* to be instantiated ever, but I suppose you could have multiple ModalAlert objects
* if you wanted to.
*
- * @author Colin Sullivan
+ * @class
**/
-
function ModalAlert(params) {
if(params) {
this.init(params);
@@ -43,7 +47,8 @@ ModalAlert.prototype.init = function(params) {
var open = false;
this.open = open;
- /* For right now, we can only use our HTML */
+ /* For right now, we can only use our HTML, but these should really be
+ passed in to make this code flexible */
var pane = $('div#modal-overlay-pane');
this.pane = pane;
@@ -163,12 +168,15 @@ ModalAlert.prototype.displayContent = function(params) {
* }
**/
ModalAlert.prototype.loadAndDisplayContent = function(params) {
- var title = params.title;
- params.callback = function(me, title) {
- return function(data) {
- me.displayContent({content: data, title: title, });
- };
- }(this, title);
+ /* If there was no callback, we are just displaying the content */
+ if(typeof(params.callback) == 'undefined') {
+ var title = params.title;
+ params.callback = function(me, title) {
+ return function(data) {
+ me.displayContent({content: data, title: title, });
+ };
+ }(this, title);
+ }
this.loadAndExecuteCallback(params)
}
@@ -0,0 +1,104 @@
+/**
+ * @file Notifier.js
+ * @author Colin Sullivan <colinsul [at] gmail.com>
+ **/
+
+
+/**
+ * This is an object which can notify the user in a few different ways. Right now
+ * the only options that are available are modal dialogs and modal alerts. In
+ * the future, a "growl" like interface can be triggered from here. This should
+ * be a singleton object, i.e. only one should be instantiated.
+ * @class
+ **/
+function Notifier(params) {
+ if(params) {
+ this.init(params);
+ }
+}
+
+Notifier.prototype.init = function(params) {
+
+ this.modalAlertObject = new ConfirmModalAlert(params);
+}
+
+/**
+ * Use this if you just want to display words to user, and not worry about getting
+ * anything back.
+ *
+ * @param params Object {
+ * title: The title of the alert
+ * content: the content of the alert
+ * url: instead of content, the url
+ * }
+ **/
+Notifier.prototype.alert = function(params) {
+ var contentOrUrl = this.validateParams(params);
+ if(contentOrUrl == 'content') {
+ this.modalAlertObject.displayContent(params);
+ }
+ else {
+ this.modalAlertObject.loadAndDisplayContent(params);
+ }
+}
+
+/**
+ * Use this if you want to do something different if the user chooses yes or no.
+ *
+ * @param params Object {
+ * title: The title of the alert
+ * content: the content of the alert
+ * url: instead of content, the url
+ * confirmCallback: the function to
+ * execute when user confirms.
+ * cancelCallback: the function to
+ * execute when user cancels.
+ * }
+ **/
+Notifier.prototype.confirm = function(params) {
+ var contentOrUrl = this.validateParams(params);
+
+ if(contentOrUrl == 'content') {
+ this.modalAlertObject.displayContentWithConfirm(params);
+ }
+ else {
+ this.modalAlertObject.loadAndDisplayContentWithConfirm(params);
+ }
+}
+
+/**
+ * Since we need to do this for a confirm or alert. Just makes sure user sent
+ * in either content or URL parameters.
+ *
+ * @param params Object
+ **/
+Notifier.prototype.validateParams = function(params) {
+
+
+ /* If there is no cancelCallback, use empty function */
+ if(typeof(params.cancelCallback) == 'undefined') {
+ params.cancelCallback = function() {
+
+ };
+ };
+
+
+ /* Check if the user passed in content */
+ var content = params.content;
+ if(typeof(content) == 'undefined') {
+ /* Check if the user passed in a url */
+ var url = params.url;
+ if(typeof(url) == 'undefined') {
+ throw new Error('Error: params.url or params.content must be defined.');
+ }
+ else {
+ /* URL was passed in */
+ return 'url';
+ }
+ }
+ else {
+ /* Content was passed in */
+ return 'content';
+ }
+
+}
@@ -32,6 +32,8 @@ bingo.models.Board = Backbone.Model.extend({
if(name == '') {
throw new Error('Please enter a name for this Bingo object.');
}
+
+ console.log('validation ended');
},
});
@@ -52,8 +52,12 @@ bingo.pages.HomePage = bingo.pages.Page.extend({
}
this.boardRowTemplate = boardRowTemplate;
+ /* Input element for board name */
+ var addBoardNameInputElement = $('input#add_board_input');
+ this.addBoardNameInputElement = addBoardNameInputElement;
+
/* When add board button is clicked, we will be adding a bingo board */
- var addBoardButton = $('button#add_board');
+ var addBoardButton = $('button#add_board_button');
addBoardButton.bind('click', function(me){
return function() {
me.addBoard();
@@ -77,13 +81,18 @@ bingo.pages.HomePage = bingo.pages.Page.extend({
var frag = document.createDocumentFragment();
frag.appendChild(this.boardTableHeader.get(0));
-
/* Build collection table */
- this.boards.each(function(frag, template){
+ this.boards.each(function(frag, template, BingoBoardRowWidget, page){
return function(board){
- frag.appendChild(template.tmpl(board.toJSON()).get(0));
+ var widget = new BingoBoardRowWidget({
+ template: template,
+ model: board,
+ page: page,
+ }).render();
+
+ frag.appendChild(widget.el);
};
- }(frag, this.boardRowTemplate));
+ }(frag, this.boardRowTemplate, bingo.widgets.BingoBoardRowWidget, this));
this.boardTable.html(frag);
@@ -93,7 +102,7 @@ bingo.pages.HomePage = bingo.pages.Page.extend({
addBoard: function() {
console.log('addBoard');
- var name = 'something';
+ var name = this.addBoardNameInputElement.attr('value');
/* Create a new board object */
var board = new bingo.models.Board().save({
@@ -17,7 +17,7 @@ bingo.pages.Page = Backbone.View.extend({
var params = this.options;
/* Create new modal alert box object for alerting the user */
- this.notifier = new ConfirmModalAlert({});
+ this.notifier = new Notifier({});
/* A boolean in case we have lost connection to the server */
this.CONNECTION_ERROR = false;
@@ -31,7 +31,7 @@ bingo.pages.Page = Backbone.View.extend({
/* Any text fields that are class autoclear should be autocleared */
$('input.autoclear').each(function() {
- var field = new AutoClearField({
+ var field = new bingo.helpers.AutoClearField({
inputElement: $(this),
});
});
@@ -0,0 +1,59 @@
+/**
+ * @file BingoBoardRow.js
+ *
+ * @author Colin Sullivan <colinsul [at] gmail.com>
+ **/
+
+/**
+ * A row in the list of bingo boards.
+ * @class
+ * @extends bingo.widgets.Widget
+ **/
+bingo.widgets.BingoBoardRowWidget = bingo.widgets.Widget.extend({
+
+ initialize: function() {
+ bingo.widgets.Widget.prototype.initialize.call(this);
+
+ var params = this.options;
+
+
+
+ _.bindAll(this, "render");
+ },
+ render: function() {
+ bingo.widgets.Widget.prototype.render.call(this);
+
+ return this;
+ },
+ events: {
+ 'click button.delete_board': 'delete_board'
+ },
+ /**
+ * Should be called when user clicks the delete button on the UI.
+ **/
+ delete_board: function() {
+ this.page.notifier.confirm({
+ title: 'Are you sure?',
+ content: 'Are you sure you want to delete this Board?<br />It will be permanently inaccessible.',
+ confirmCallback: function(me) {
+ return function() {
+ me.really_delete_board();
+ };
+ }(this),
+ });
+ },
+ /**
+ * This will actually delete the bingo board. Should only be called after
+ * user has confirmed.
+ **/
+ really_delete_board: function() {
+ this.model.destroy({
+ success: function(me) {
+ return function(model, response) {
+ /* Delete from page's collection */
+ me.page.boards.remove(model);
+ };
+ }(this),
+ })
+ },
+});
Oops, something went wrong.

0 comments on commit 3ad53e1

Please sign in to comment.