EntityUserDefineItemView.js 4.15 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
/*
 * 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 {
32 33
                items: this.items,
                allValueRemovedUpdate: this.allValueRemovedUpdate
34 35 36 37 38 39 40 41 42 43 44
            };
        },

        /** Layout sub regions */
        regions: {},

        /** ui selector cache */
        ui: {
            itemKey: "[data-type='key']",
            itemValue: "[data-type='value']",
            addItem: "[data-id='addItem']",
45 46
            deleteItem: "[data-id='deleteItem']",
            charSupportMsg: "[data-id='charSupportMsg']"
47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
        },
        /** 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) {
64
                this.items = [{ key: "", value: "" }];
65
            } else {
66
                this.items = $.extend(true, [], options.items);
67
            }
68
            this.updateParentButtonState = options.updateButtonState;
69
        },
70
        onRender: function() {},
71
        onAddItemClick: function(e) {
72
            this.allValueRemovedUpdate = false;
73
            var el = e.currentTarget;
74
            this.items.splice(parseInt(el.dataset.index) + 1, 0, { key: "", value: "" });
75 76 77 78 79
            this.render();
        },
        onDeleteItemClick: function(e) {
            var el = e.currentTarget;
            this.items.splice(el.dataset.index, 1);
80 81 82 83 84 85 86 87 88 89
            this.allValueRemovedUpdate = false;
            if (this.items.length === 0) {
                var updated = this.updateParentButtonState();
                if (updated === false) {
                    this.allValueRemovedUpdate = true;
                    this.render();
                }
            } else {
                this.render();
            }
90
        },
91
        onItemKeyChange: function(e) {
92
            var el = e.currentTarget;
93 94
            this.handleCharSupport(el);
            if (!el.value.trim().includes(':')) {
95
                this.items[el.dataset.index].key = _.escape(el.value.trim());
96
            }
97
        },
98
        onItemValueChange: function(e) {
99
            var el = e.currentTarget;
100 101
            this.handleCharSupport(el);
            if (!el.value.trim().includes(':')) {
102
                this.items[el.dataset.index].value = el.value.trim();
103 104 105 106 107 108 109 110 111 112
            }
        },
        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("");
            }
113 114 115
        }
    });

116
});