From d800678e7083f05e1090b5e998f036e207482304 Mon Sep 17 00:00:00 2001 From: Matt Warman Date: Wed, 28 Jan 2015 09:41:48 -0500 Subject: [PATCH 1/4] Commented Google Analytics script to prevent unnecessary AJAX requests. --- src/main/app/index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/main/app/index.html b/src/main/app/index.html index 5723205..fdfa417 100644 --- a/src/main/app/index.html +++ b/src/main/app/index.html @@ -36,6 +36,9 @@ + + + From 47a3ff11332ac901a7c70e3ecbe4b9724d673c61 Mon Sep 17 00:00:00 2001 From: Matt Warman Date: Wed, 28 Jan 2015 17:05:12 -0500 Subject: [PATCH 2/4] Initial addition of modal dialog and feature display page for the same. --- .../coffee/modules/common/CommonViews.coffee | 46 +++++++++++++++++++ .../modules/features/FeatureController.coffee | 32 +++++++++++++ .../dialog/DialogFeatureController.coffee | 26 +++++++++++ .../features/dialog/DialogFeatureViews.coffee | 13 ++++++ src/main/app/templates/dialog.html | 29 ++++++++++++ src/main/app/templates/featuredialog.html | 36 +++++++++++++++ src/main/app/templates/header.html | 6 +++ 7 files changed, 188 insertions(+) create mode 100644 src/main/app/coffee/modules/common/CommonViews.coffee create mode 100644 src/main/app/coffee/modules/features/FeatureController.coffee create mode 100644 src/main/app/coffee/modules/features/dialog/DialogFeatureController.coffee create mode 100644 src/main/app/coffee/modules/features/dialog/DialogFeatureViews.coffee create mode 100644 src/main/app/templates/dialog.html create mode 100644 src/main/app/templates/featuredialog.html diff --git a/src/main/app/coffee/modules/common/CommonViews.coffee b/src/main/app/coffee/modules/common/CommonViews.coffee new file mode 100644 index 0000000..d443de3 --- /dev/null +++ b/src/main/app/coffee/modules/common/CommonViews.coffee @@ -0,0 +1,46 @@ +SkeletonApp.module 'Common', (Common, SkeletonApp, Backbone, Marionette, $, _) -> + + # Define the View for a Modal Dialog + class Common.DialogView extends Backbone.Marionette.ItemView + + defaultOptions = + title: 'Confirm' + body: 'Click OK to confirm.' + buttons: [ + title: 'Cancel' + triggerName: 'cancel' + dismiss: true + , + title: 'OK' + triggerName: 'ok' + class: 'btn-primary' + ] + + template: 'dialog' + + className: 'modal fade' + + ui: + dialogButton: '.js-dialog-button' + + events: + 'click @ui.dialogButton': 'onButtonClicked' + + initialize: (opts) -> + logger.debug "DialogView.initialize" + @options = _.defaults {}, opts, defaultOptions + + serializeData: -> + @options + + onShow: -> + @$el.modal 'show' + + onHide: -> + @$el.modal 'hide' + + onButtonClicked: (e) -> + logger.debug "DialogView.onButtonClicked" + e.preventDefault() + triggerName = $(e.target).attr 'data-trigger' + @triggerMethod triggerName diff --git a/src/main/app/coffee/modules/features/FeatureController.coffee b/src/main/app/coffee/modules/features/FeatureController.coffee new file mode 100644 index 0000000..d3ac154 --- /dev/null +++ b/src/main/app/coffee/modules/features/FeatureController.coffee @@ -0,0 +1,32 @@ +SkeletonApp.module 'Feature', (Feature, SkeletonApp, Backbone, Marionette, $, _) -> + + # Define the Router for the Feature module + class FeatureRouter extends Marionette.AppRouter + + appRoutes: + 'features/dialog': 'showDialogFeature' + + # Define the Controller for the Feature module + class FeatureController extends Marionette.Controller + + showDialogFeature: -> + logger.debug "FeatureController.showDialogFeature" + controller = new Feature.Dialog.Controller + controller.show() + + + # Create an instance + controller = new FeatureController + + + # When the module is initialized... + Feature.addInitializer -> + logger.debug "Content initializer" + router = new FeatureRouter + controller: controller + + + # Handle Application Messaging + SkeletonApp.commands.setHandler 'feature:dialog:show', -> + SkeletonApp.navigate 'features/dialog' + controller.showDialogFeature() diff --git a/src/main/app/coffee/modules/features/dialog/DialogFeatureController.coffee b/src/main/app/coffee/modules/features/dialog/DialogFeatureController.coffee new file mode 100644 index 0000000..bd62746 --- /dev/null +++ b/src/main/app/coffee/modules/features/dialog/DialogFeatureController.coffee @@ -0,0 +1,26 @@ +SkeletonApp.module 'Feature.Dialog', (Dialog, SkeletonApp, Backbone, Marionette, $, _) -> + + # Define the Controller for the Content module + class Dialog.Controller extends Marionette.Controller + + show: -> + logger.debug "Dialog.Controller.show" + view = new Dialog.FeatureView + + view.on 'dialog:show', -> + dialogView = new SkeletonApp.Common.DialogView + title: 'Prompt' + + dialogView.on 'ok', -> + logger.debug "Handling 'ok' dialog event" + dialogView.triggerMethod 'hide' + # Execute 'OK' logic + + dialogView.on 'cancel', -> + logger.debug "Handling 'cancel' dialog event" + dialogView.triggerMethod 'hide' + # Execute 'Cancel' logic, if any + + SkeletonApp.dialogRegion.show dialogView + + SkeletonApp.contentRegion.show view diff --git a/src/main/app/coffee/modules/features/dialog/DialogFeatureViews.coffee b/src/main/app/coffee/modules/features/dialog/DialogFeatureViews.coffee new file mode 100644 index 0000000..d145e3c --- /dev/null +++ b/src/main/app/coffee/modules/features/dialog/DialogFeatureViews.coffee @@ -0,0 +1,13 @@ +SkeletonApp.module 'Feature.Dialog', (Dialog, SkeletonApp, Backbone, Marionette, $, _) -> + + class Dialog.FeatureView extends Backbone.Marionette.ItemView + + template: 'featuredialog' + + className: 'container' + + ui: + dialogButton: '.js-dialog' + + triggers: + 'click @ui.dialogButton': 'dialog:show' diff --git a/src/main/app/templates/dialog.html b/src/main/app/templates/dialog.html new file mode 100644 index 0000000..2f9edd3 --- /dev/null +++ b/src/main/app/templates/dialog.html @@ -0,0 +1,29 @@ +
+ +
+ +
+

<%= title %>

+
+ +
+

<%= body %>

+
+ +
+ <% for (i = 0; i < buttons.length; i++) { %> + + <% } %> +
+ +
+ +
diff --git a/src/main/app/templates/featuredialog.html b/src/main/app/templates/featuredialog.html new file mode 100644 index 0000000..3601566 --- /dev/null +++ b/src/main/app/templates/featuredialog.html @@ -0,0 +1,36 @@ +
+
+
+

+ Feature: Modal Dialog +

+
+
+
+ +
+
+

+ This page illustrates the modal dialog box feature in action. + This is a Bootstrap modal dialog box that has been implemented in a + reusable Marionette view and template. +

+
+
+ +
+
+

+ The DialogView class extends a Marionette ItemView. The + class uses the supplied options hash values to render the + modal. The title, body, and buttons may be set to any desired values + without requiring one-off code. +

+

+ Click the button on the right to see this feature in action. +

+
+
+ +
+
diff --git a/src/main/app/templates/header.html b/src/main/app/templates/header.html index 1fa4bde..2cb12f5 100644 --- a/src/main/app/templates/header.html +++ b/src/main/app/templates/header.html @@ -29,6 +29,12 @@