| /* |
| * 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. |
| */ |
| define(['require', |
| 'backbone', |
| 'hbs!tmpl/entity/EntityUserDefineItemView_tmpl' |
| |
| ], function(require, Backbone, EntityUserDefineItemView_tmpl) { |
| 'use strict'; |
| |
| return Backbone.Marionette.ItemView.extend({ |
| _viewName: 'EntityUserDefineItemView', |
| |
| template: EntityUserDefineItemView_tmpl, |
| |
| templateHelpers: function() { |
| return { |
| items: this.items, |
| allValueRemovedUpdate: this.allValueRemovedUpdate |
| }; |
| }, |
| |
| /** Layout sub regions */ |
| regions: {}, |
| |
| /** ui selector cache */ |
| ui: { |
| itemKey: "[data-type='key']", |
| itemValue: "[data-type='value']", |
| addItem: "[data-id='addItem']", |
| deleteItem: "[data-id='deleteItem']", |
| charSupportMsg: "[data-id='charSupportMsg']" |
| }, |
| /** ui events hash */ |
| events: function() { |
| var events = {}; |
| events['input ' + this.ui.itemKey] = 'onItemKeyChange'; |
| events['input ' + this.ui.itemValue] = 'onItemValueChange'; |
| events['click ' + this.ui.addItem] = 'onAddItemClick'; |
| events['click ' + this.ui.deleteItem] = 'onDeleteItemClick'; |
| return events; |
| }, |
| |
| /** |
| * intialize a new GlobalExclusionComponentView Layout |
| * @constructs |
| */ |
| initialize: function(options) { |
| if (options.items.length === 0) { |
| this.items = [{ key: "", value: "" }]; |
| } else { |
| this.items = $.extend(true, [], options.items); |
| } |
| this.updateParentButtonState = options.updateButtonState; |
| }, |
| onRender: function() {}, |
| onAddItemClick: function(e) { |
| this.allValueRemovedUpdate = false; |
| var el = e.currentTarget; |
| this.items.splice(parseInt(el.dataset.index) + 1, 0, { key: "", value: "" }); |
| this.render(); |
| }, |
| onDeleteItemClick: function(e) { |
| var el = e.currentTarget; |
| this.items.splice(el.dataset.index, 1); |
| this.allValueRemovedUpdate = false; |
| if (this.items.length === 0) { |
| var updated = this.updateParentButtonState(); |
| if (updated === false) { |
| this.allValueRemovedUpdate = true; |
| this.render(); |
| } |
| } else { |
| this.render(); |
| } |
| }, |
| onItemKeyChange: function(e) { |
| var el = e.currentTarget; |
| this.handleCharSupport(el); |
| if (!el.value.trim().includes(':')) { |
| this.items[el.dataset.index].key = _.escape(el.value.trim()); |
| } |
| }, |
| onItemValueChange: function(e) { |
| var el = e.currentTarget; |
| this.handleCharSupport(el); |
| if (!el.value.trim().includes(':')) { |
| this.items[el.dataset.index].value = el.value.trim(); |
| } |
| }, |
| handleCharSupport: function(el) { |
| if (el.value.trim().includes(':')) { |
| el.setAttribute('class', 'form-control errorClass'); |
| this.ui.charSupportMsg.html("These special character '(:)' are not supported."); |
| } else { |
| el.setAttribute('class', 'form-control'); |
| this.ui.charSupportMsg.html(""); |
| } |
| } |
| }); |
| |
| }); |