iuap-design/js/ui.multilang.js

UI Framework Used For Enterprise.

u.Multilang = u.BaseComponent.extend({
		DEFAULTS : {
			dataSource:{},			
			onSelect: function() {}
		},
		init:function(){
			var self = this;			 
			var element = this.element;
			this.options = u.extend({}, this.DEFAULTS, this.options);
			this.multinfo(this.options.multinfo)			
			this.addData(this.options.multidata)
			
		}
	})		
	u.Multilang.fn = u.Multilang.prototype;
	u.Multilang.fn.addData = function(val) {
			var target = this.element , tmparray,target_div = target.parentNode;
			if(typeof(val) == "object"){
				tmparray = val					
			}else{
				tmparray = val.split(",")	
			}		
			target_div.value = tmparray				
			u.each(tmparray,function(i,node){				
				target_div.querySelectorAll(".m_context")[i].innerHTML = node						
			})
			
		};
	u.Multilang.fn.multinfo = function(sort){	
			
			var target = this.element,me= this,tmplabel = "",close_menu=true,tmpfield = "name";
			if(sort.lang_name){
				tmpfield = sort.lang_name
			}
			if (u.isArray(sort)) {											
						
				u.wrap(target,"<div class='multilang_body'><input class='lang_value' contenteditable='true'><span class='fa fa-sort-desc lang_icon'><span class='m_icon'></span></span>")
				u.css(target,"display","none")

				u.each(sort, function(i, node) {
						if(i){
							tmplabel += "<label attr='"+tmpfield+(i+1)+"'><span class='m_context'></span><span class='m_icon'>" + node + "</span></label>"
						}else{
							tmplabel += "<label attr='"+tmpfield+"'><span class='m_context'></span><span class='m_icon'>" + node + "</span></label>"	
						}
				})
				var target_div = target.parentNode
				
				target_div.insertAdjacentHTML("beforeEnd","<div class='multilang_menu '>" + tmplabel + "</div>")
				var tmpIconv=target_div.querySelector(".lang_icon"),target_menu = target_div.querySelector(".multilang_menu"),tmpvaluebox = target_div.querySelector(".lang_value");
				u.on(tmpIconv,"click",function(){
					var target_icon = this ;
					target_div.querySelector(".lang_value").focus()
					if(u.css(target_menu,"display") == "block"){
						u.css(target_menu,"display","none")
					}else{
						u.css(target_menu,"display","block")							
					}
				})
				u.on(target_menu,"mouseenter",function(){
						close_menu = false;
				})
				u.on(target_menu,"mouseleave",function(){
						close_menu = true;
				})
						
				u.on(tmpvaluebox,"blur",function(){
						//this//
						//target_box = me.fixtarget(target_input),
					//target_div = target_input.parents(".multilang_body"),
					target = this
					tmpkey = target.className.split(" ")[2],						
					tmptext = target.value;
				
					if(u.hasClass(target,"ready_change")){
						me.changeData(target_div,tmpkey,tmptext);
					}					
					if(close_menu){
						u.css(target_menu,"display","none")
					}
						
				})
				u.on(target_menu,"click","label",function(){
					var target_label = this,
						tmpfield = target_label.getAttribute("attr"),
						tmptext = target_label.querySelector(".m_context").innerHTML,
						tmpicon = target_label.querySelector(".m_icon").cloneNode(true);					
						
					tmpvaluebox.setAttribute("class","ready_change lang_value "+tmpfield)
					tmpvaluebox.value = tmptext
					tmpvaluebox.focus();
					var tmpicom = target_div.querySelector(".lang_icon"),oldicon = target_div.querySelector(".m_icon")
					u.removeClass(tmpicom,"fa-sort-desc")
					tmpicom.replaceChild(tmpicon,oldicon)
				})
				
				
				
			} else {
				console.error('Not object')
			}
		}
	u.Multilang.fn.changeData = function(target_div,field,text){
			var tmpdata  = target_div.value; 										
			    tmplabel = target_div.querySelector("label[attr='"+field+"']");
				tmpcontext = tmplabel.querySelector(".m_context");
			tmpcontext.innerHTML = text
			tmpcontext.value = text
			u.each(target_div.querySelectorAll(".m_context"),function(i,node){
				tmpdata[i] = node.innerHTML
			})
			
			u.trigger(this.element,'change.u.multilang', {newValue:text, field:field})
						
		}
	u.Multilang.fn.getData = function(){
			var target = $(multilang.target).next(".multilang_body")[0], multilang_data = target.value;
			return 	multilang_data;
		}
	if (u.compMgr)
	
	u.compMgr.regComp({
		comp: u.Multilang,
		compAsString: 'u.Multilang',
		css: 'u-multilang'
	})