Histórico da Página

<div id="keyWordContainerDiv"></div>


<style>
	.Keyword-Container-Wrapper{
		width: 100%;
		height: auto;
		min-height: 30px;
	}


	.Keyword-Container-Wrapper-Span{
		padding: 5px;
		background-color: #3572b0;
		color: #fff;
	}
</style>


<script>


TOTVS_Keywords = {
	Id: 'KeyWord1',
	Container: null,
	Tags: [],
	Init: function(id, nameOfContainer, tags){
		this.Id = id;
		this.Container = (typeof nameOfContainer === "string") ? document.getElementById(nameOfContainer) : nameOfContainer; 
		this.Tags = {
				Length: (tags) ? tags.length: 0,
				Items: [],
				Add: function(item){
					if(!item)
						return;
					if(!this.Exists(item)){
						this.Tags.Items[this.Tags.Length]['Value'] = item;
						this.Tags.Items[this.Tags.Length]['Index'] = this.Tags.Length;
						this.Tags.Items[item]['Value'] = item;
						this.Tags.Items[item]['Index'] = this.Tags.Length;
						this.Tags.Length += 1;
					}
				},
				AddRange: function(rangeOfItems){
					if(!rangeOfItems)
						return;
					for(var i = 0; i < rangeOfItems.length; i++){
						if(!this.Exists(rangeOfItems[i])){
							this.Tags.Items[this.Tags.Length]['Value'] = rangeOfItems[i];
							this.Tags.Items[this.Tags.Length]['Index'] = this.Tags.Length;
							this.Tags.Items[rangeOfItems[i]]['Value'] = rangeOfItems[i];
							this.Tags.Items[rangeOfItems[i]]['Index'] = this.Tags.Length;
							this.Tags.Length += 1;
						}
					}
				},
				Exists: function(item){
					if(!item)
						return false;					
					for(var att in this.Tags.Items){
						if(att == item)
							return true;
					}
					return false;
				},
				Find: function(item){
					if(!item)
						return null;		
					for(var att in this.Tags.Items){
						if(att == item)
							return this.Tags.Items[item];
					}
					return null;
				},
				IndexOf: function(item){
					if(!item)
						return null;		
					var _item = this.Find(item);
					
					if(_item != null)
						return _item.Index;
					return null;
				}
		}


		this.Tags.AddAddRange(tags);
	},
	Build: function(id, nameOfContainer, tags){
			this.Init(id, nameOfContainer, tags);
			var _keyWordContainerWrapper = document.createElement('div');		
			_keyWordContainerWrapper.id = this.Id + "_ContainerWrapper";
			_keyWordContainerWrapper.className = "Keyword-Container-Wrapper";


			var _keyWordContainerWrapperInput = document.createElement('input');		
			_keyWordContainerWrapperInput.id = _keyWordContainerWrapper.id + "_Input";
			_keyWordContainerWrapperInput.name = _keyWordContainerWrapperInput.id;
			_keyWordContainerWrapperInput.type = "text";
			_keyWordContainerWrapperInput.className = 'Keyword-Container-Wrapper-Input';
			_keyWordContainerWrapperInput.onkeypress = function(e){
				var _evt = e || window.event;
				if (event.which == 13 || event.keyCode == 13) {
        			TOTVS_Keywords.Tags.Add(this.value);
					
					var _index = TOTVS_Keywords.Tags.IndexOf(this.Value);


					var _span = document.createElement('span');
					_span.id = this.id + "_" + (_index != null) ? _index : this.value;
					_span.name = _span.id;
					_span.className = 'Keyword-Container-Wrapper-Span';
					_span.innerHTML = this.value;
					
					this.parentNode.insertBefore(_span, this);
        			return false;
    			}
			}


			_keyWordContainerWrapper.appendChild(_keyWordContainerWrapperInput);

			this.Container.appendChild(_keyWordContainerWrapper);
	}
}


TOTVS_Keywords.Build('TOTVS_KeyWord', 'keyWordContainerDiv', [])


</script>