brooklyn-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From sjcorb...@apache.org
Subject [5/7] git commit: jsgui: Adds generic modal and config key input views
Date Tue, 26 Aug 2014 10:27:11 GMT
jsgui: Adds generic modal and config key input views


Project: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/commit/9de7a75d
Tree: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/tree/9de7a75d
Diff: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/diff/9de7a75d

Branch: refs/heads/master
Commit: 9de7a75d2744e3d2ef3f4304510cba13567fbefb
Parents: b947d44
Author: Sam Corbett <sam.corbett@cloudsoftcorp.com>
Authored: Tue Aug 19 10:32:40 2014 +0100
Committer: Sam Corbett <sam.corbett@cloudsoftcorp.com>
Committed: Wed Aug 20 12:26:55 2014 +0100

----------------------------------------------------------------------
 .../main/webapp/assets/js/libs/brooklyn-view.js | 125 ++++++++++++++++++-
 .../main/webapp/assets/tpl/lib/basic-modal.html |  29 +++++
 .../lib/config-key-type-value-input-pair.html   |  23 ++++
 3 files changed, 174 insertions(+), 3 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/9de7a75d/usage/jsgui/src/main/webapp/assets/js/libs/brooklyn-view.js
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/main/webapp/assets/js/libs/brooklyn-view.js b/usage/jsgui/src/main/webapp/assets/js/libs/brooklyn-view.js
index 361833e..ca6a49c 100644
--- a/usage/jsgui/src/main/webapp/assets/js/libs/brooklyn-view.js
+++ b/usage/jsgui/src/main/webapp/assets/js/libs/brooklyn-view.js
@@ -17,9 +17,12 @@
  * under the License.
 */
 define([
-    "jquery", "underscore", "backbone", "brooklyn-utils"
-], function (
-    $, _, Backbone, Util
+    "jquery", "underscore", "backbone", "brooklyn-utils",
+    "text!tpl/lib/basic-modal.html",
+    "text!tpl/lib/config-key-type-value-input-pair.html"
+    ], function (
+    $, _, Backbone, Util,
+    ModalHtml, ConfigKeyInputHtml
 ) {
 
     var module = {};
@@ -123,6 +126,122 @@ define([
 
     });
 
+    /**
+     * A view to render another view in a modal. Give another view to render as
+     * the `body' parameter.
+     */
+    module.Modal = Backbone.View.extend({
+
+        id: _.uniqueId("modal"),
+        className: "modal",
+        template: _.template(ModalHtml),
+
+        events: {
+            "hide": "close",
+            "click .modal-submit": "onSubmit"
+        },
+
+        initialize: function() {
+            if (!this.options.body) {
+                throw new Error("Modal view requires body to render");
+            }
+            _.bindAll(this);
+            if (this.options.autoOpen) {
+                this.show();
+            }
+        },
+
+        beforeClose: function() {
+            if (this.options.body) {
+                this.options.body.close();
+            }
+        },
+
+        render: function() {
+            this.$el.html(this.template({
+                title: this.options.title
+            }));
+            this.options.body.render();
+            this.$(".modal-body").html(this.options.body.$el);
+            return this;
+        },
+
+        show: function() {
+            this.render().$el.modal();
+            return this;
+        },
+
+        onSubmit: function(event) {
+            if (_.isFunction(this.options.body.onSubmit)) {
+                var submission = this.options.body.onSubmit.apply(this.options.body, [event]);
+                var self = this;
+                submission.done(function() {
+                    // Closes view via event.
+                    self.$el.modal("hide");
+                }).fail(function() {
+                    // ?
+                });
+            }
+            return false;
+        }
+
+    });
+
+    /**
+     * Presents inputs for config key names/values with  buttons to add/remove entries
+     * and a function to extract a map of name->value.
+     */
+    module.ConfigKeyInputPairList = Backbone.View.extend({
+        template: _.template(ConfigKeyInputHtml),
+        // Could listen to input change events and add 'error' class to any type inputs
+        // that duplicate values.
+        events: {
+            "click .config-key-row-remove": "rowRemove",
+            "keypress .last": "rowAdd"
+        },
+        render: function () {
+            if (this.options.configKeys) {
+                var templated = _.map(this.options.configKeys, function (value, key) {
+                    return this.templateRow(key, value);
+                }, this);
+                this.$el.html(templated.join(""));
+            }
+            this.$el.append(this.templateRow());
+            this.markLast();
+            return this;
+        },
+        rowAdd: function (event) {
+            this.$el.append(this.templateRow());
+            this.markLast();
+        },
+        rowRemove: function (event) {
+            $(event.currentTarget).parent().remove();
+            if (this.$el.children().length == 0) {
+                this.rowAdd();
+            }
+            this.markLast();
+        },
+        markLast: function () {
+            this.$(".last").removeClass("last");
+            this.$("div").last().addClass("last");
+        },
+        templateRow: function (type, value) {
+            return this.template({type: type || "", value: value || ""});
+        },
+        getConfigKeys: function () {
+            var cks = {};
+            this.$(".config-key-type").each(function (index, input) {
+                input = $(input);
+                var type = input.val() && input.val().trim();
+                var value = input.next().val() && input.next().val().trim();
+                if (type && value) {
+                    cks[type] = value;
+                }
+            });
+            return cks;
+        }
+    });
+
     return module;
 
 });

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/9de7a75d/usage/jsgui/src/main/webapp/assets/tpl/lib/basic-modal.html
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/main/webapp/assets/tpl/lib/basic-modal.html b/usage/jsgui/src/main/webapp/assets/tpl/lib/basic-modal.html
new file mode 100644
index 0000000..72c875c
--- /dev/null
+++ b/usage/jsgui/src/main/webapp/assets/tpl/lib/basic-modal.html
@@ -0,0 +1,29 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you 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-header">
+    <button type="button" class="close" data-dismiss="modal">&times;</button>
+    <h3><% if (title) { %><%= title %><% } else { %>&nbsp;<%
} %></h3>
+</div>
+
+<div class="modal-body"></div>
+
+<div class="modal-footer">
+    <a href="#" class="btn" data-dismiss="modal">Close</a>
+    <a href="#" class="btn btn-primary modal-submit">Save changes</a>
+</div>

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/9de7a75d/usage/jsgui/src/main/webapp/assets/tpl/lib/config-key-type-value-input-pair.html
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/main/webapp/assets/tpl/lib/config-key-type-value-input-pair.html
b/usage/jsgui/src/main/webapp/assets/tpl/lib/config-key-type-value-input-pair.html
new file mode 100644
index 0000000..cc6d8ee
--- /dev/null
+++ b/usage/jsgui/src/main/webapp/assets/tpl/lib/config-key-type-value-input-pair.html
@@ -0,0 +1,23 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you 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="config-key-input-pair form-inline">
+    <input type="text" class="config-key-type" placeholder="Type" value="<%= type %>"/>
+    <input type="text" class="config-key-value" placeholder="Value" value="<%= value
%>"/>
+    <button type="button" class="btn btn-info config-key-row-remove">-</button>
+</div>
\ No newline at end of file


Mime
View raw message