FAQ
Repository: couchdb-fauxton
Updated Branches:
   refs/heads/master a762e7cae -> 47b2fec71


Add confirmation modal component

This ticket adds a simple confirmation modal that can be used in
place of window.confirm().

Closes COUCHDB-2445


Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/47b2fec7
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/47b2fec7
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/47b2fec7

Branch: refs/heads/master
Commit: 47b2fec719a0d047564d18bde190a80b6be96d04
Parents: a762e7c
Author: Benjamin Keen <ben.keen@gmail.com>
Authored: Thu Dec 11 13:34:46 2014 -0800
Committer: Benjamin Keen <ben.keen@gmail.com>
Committed: Fri Dec 12 11:43:05 2014 -0800

----------------------------------------------------------------------
  app/addons/fauxton/components.js | 40 +++++++++++++++++++-
  .../fauxton/templates/confirmation_modal.html | 29 ++++++++++++++
  app/constants.js | 3 +-
  3 files changed, 70 insertions(+), 2 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/47b2fec7/app/addons/fauxton/components.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/components.js b/app/addons/fauxton/components.js
index 9e2f78e..ccb4168 100644
--- a/app/addons/fauxton/components.js
+++ b/app/addons/fauxton/components.js
@@ -505,7 +505,45 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {

    });

+ // A super-simple replacement for window.confirm()
+ Components.ConfirmationModal = FauxtonAPI.View.extend({
+ template: 'addons/fauxton/templates/confirmation_modal',

+ events: {
+ 'click .js-btn-success': 'onSelectOkay'
+ },
+
+ initialize: function (options) {
+ this.options = _.extend({
+ title: 'Please confirm',
+ text: '',
+ action: null
+ }, options);
+ },
+
+ onSelectOkay: function () {
+ this.hideModal();
+ if (_.isFunction(this.options.action)) {
+ this.options.action();
+ }
+ },
+
+ showModal: function () {
+ this.$('.modal').modal();
+ $('.modal-backdrop').css('z-index', FauxtonAPI.constants.MISC.MODAL_BACKDROP_Z_INDEX);
+ },
+
+ hideModal: function () {
+ this.$('.modal').modal('hide');
+ },
+
+ serialize: function () {
+ return {
+ title: this.options.title,
+ text: this.options.text
+ };
+ }
+ });

    Components.ModalView = FauxtonAPI.View.extend({

@@ -520,7 +558,7 @@ function(app, FauxtonAPI, ace, spin, ZeroClipboard) {
        this.clear_error_msg();
        this.$('.modal').modal();
        // hack to get modal visible
- $('.modal-backdrop').css('z-index',1025);
+ $('.modal-backdrop').css('z-index', FauxtonAPI.constants.MISC.MODAL_BACKDROP_Z_INDEX);
      },

      hideModal: function () {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/47b2fec7/app/addons/fauxton/templates/confirmation_modal.html
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/templates/confirmation_modal.html b/app/addons/fauxton/templates/confirmation_modal.html
new file mode 100644
index 0000000..c556165
--- /dev/null
+++ b/app/addons/fauxton/templates/confirmation_modal.html
@@ -0,0 +1,29 @@
+<% /*
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+*/ %>
+
+<div class="modal hide fade">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+ <h3><%- title %></h3>
+ </div>
+ <div class="modal-body">
+ <p>
+ <%- text %>
+ </p>
+ </div>
+ <div class="modal-footer">
+ <button data-dismiss="modal" class="btn"><i class="icon fonticon-cancel-circled"></i> Cancel</button>
+ <button class="btn btn-success js-btn-success"><i class="fonticon-ok-circled"></i> Okay</button>
+ </div>
+</div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/47b2fec7/app/constants.js
----------------------------------------------------------------------
diff --git a/app/constants.js b/app/constants.js
index d4b4df6..bd46359 100644
--- a/app/constants.js
+++ b/app/constants.js
@@ -16,7 +16,8 @@ define([], function () {

      MISC: {
        TRAY_TOGGLE_SPEED: 250,
- DEFAULT_PAGE_SIZE: 20
+ DEFAULT_PAGE_SIZE: 20,
+ MODAL_BACKDROP_Z_INDEX: 1025
      },

      // events

Search Discussions

Related Discussions

Discussion Navigation
viewthread | post
Discussion Overview
groupcommits @
categoriescouchdb
postedDec 12, '14 at 7:43p
activeDec 12, '14 at 7:43p
posts1
users1
websitecouchdb.apache.org
irc#couchdb

1 user in discussion

Benkeen: 1 post

People

Translate

site design / logo © 2021 Grokbase