You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@brooklyn.apache.org by sj...@apache.org on 2014/08/26 12:27:11 UTC
[5/7] git commit: jsgui: Adds generic modal and config key input views
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 <sa...@cloudsoftcorp.com>
Authored: Tue Aug 19 10:32:40 2014 +0100
Committer: Sam Corbett <sa...@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">×</button>
+ <h3><% if (title) { %><%= title %><% } else { %> <% } %></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