제2 외국어 영역2011.04.21 20:38
이녀석은 기본 코드 일부.  
autoGrowTextArea : {
      node : undefined,
      pairTextAreaNode : undefined,
      prevText : '',
      webWorker : undefined,
      maxHeight : 0,
      rejectCount : 0,
      workingDelayTime : 0,
      waitingDelayTime : 10000,
      isKeyDownEvent : false,
      isPossible : true,
      init : function(options){
        var _self = this;
        if(Y.UA.gecko){
          _self.webWorker = new Looah.looahWebWorker.init({jsName:'/js/looah-autogrow-worker',
                                                           onmessage : function(e){
                                                             var delayTime = e.data.delayTime;
                                                             if(e.data.workType === 'working'){
                                                              if(_self.rejectCount > 150){
                                                                delayTime = _self.waitingDelayTime;
                                                              }
                                                              if(_self.rejectCount === 151){
                                                                _self.isKeyDownEvent = true;
                                                                _self.pairTextAreaNode.on('keydown',function(){
                                                                  _self.webWorker.command({workType:'working',delayTime:_self.workingDelayTime});
                                                                },_self);
                                                              }
                                                              _self.update();
                                                              if(_self.rejectCount === 0){
                                                                delayTime = _self.workingDelayTime;
                                                                if(_self.isKeyDownEvent){
                                                                  _self.isKeyDownEvent = false;
                                                                  Y.Event.purgeElement(_self.pairTextAreaNode._node, false, 'keydown');
                                                                }
                                                              }
                                                            }
                                                            _self.webWorker.command({workType:e.data.workType,delayTime:delayTime});
                                                           }
                                                        });  
        }
        _self.maxHeight = options.maxHeight;
        if (Y.UA.gecko && !_self.webWorker) {
          _self.isPossible = false;
        }else{
          _self.node = Y.one('body').appendChild('
bestofbest
').set('id',options.id); } return _self; }, getNode : function(){ return this.node; }, setPairTextAreaNode : function(taNode){ var _self = this, delayObject, updateFn = function(e,delayTime){ if(delayTime !== 0){ if(delayObject){ delayObject.cancel(); } delayObject = Y.later((e.type === 'cut'?50:100), _self, _self.update); }else{ _self.update(); } }, updateFnForGecko = function(e,options){ if(options.workType === 'working'){ _self.rejectCount = 0; _self.workingDelayTime = options.delayTime; _self.update(); } _self.webWorker.command({workType:options.workType,delayTime:options.delayTime}); }; if(!_self.isPossible){ taNode.setStyle('overflow','auto').setAttribute('rows',6); return _self; } _self.pairTextAreaNode = taNode; if(!Y.UA.gecko){ _self.pairTextAreaNode.on('focus',updateFn,null,0); _self.pairTextAreaNode.on('keyup',updateFn,null,0); _self.pairTextAreaNode.on('change',updateFn, null,0); _self.pairTextAreaNode._node.oncut = updateFn; _self.pairTextAreaNode._node.onpaste = updateFn; }else{ _self.pairTextAreaNode.on('focus',updateFnForGecko,null,{workType:'working',delayTime:100}); _self.pairTextAreaNode.on('blur', updateFnForGecko, null,{workType:'sleeping',delayTime:3600000}); } _self.node.setWidth(this.pairTextAreaNode.getWidth()); return _self; }, update : function(){ var currentText = this.pairTextAreaNode.getValue(); if(currentText === this.prevText || !this.isPossible){ this.rejectCount++; return this; } this.rejectCount = 0; this.node.set('innerHTML',currentText+'bestofbest'); if(this.node.getHeight() < this.maxHeight){ if(this.pairTextAreaNode.getStyle('overflow') === 'auto'){ this.pairTextAreaNode.setStyle('overflow','hidden'); } this.pairTextAreaNode.setHeight(this.node.getHeight()); }else{ this.pairTextAreaNode.setStyles({overflow:'auto',height:this.maxHeight}); } this.prevText = currentText; return this; }, getHeight : function(){ return this.node.getHeight(); }, destroy : function(){ if(this.webWorker){ this.webWorker.stop(); } this.node.remove(); } }, looahWebWorker : { worker : undefined, state : 'stop', init: function(options){ if (!!window.Worker) { if(this.worker){ this.worker.terminate(); } this.worker = new Worker(Looah.getJsLocation(options.jsName)); this.worker.onmessage = options.onmessage; } return this; }, command : function(msg){ this.state = msg.workType; this.worker.postMessage(msg);
return this; }, stop : function(){ this.state = 'stop'; this.worker.postMessage({workType:this.state}); this.worker.terminate();
return this; } },
아래 녀석은 웹워커 녀석. 사실 이녀석은 별거 없다. ㅋ
var timeoutObject,
    sendPostMessage = function(msg){
     postMessage(msg);
    };

onmessage = function (e) {
  if(timeoutObject){
    clearTimeout(timeoutObject);
  }
	if(e.data.workType !== 'stop'){
	  timeoutObject = setTimeout(function(){sendPostMessage(e.data);},e.data.delayTime);
	}
};

전반 적인 삽질 이야기.. 
일단 가장 삽질은.. FF때문이다.. 개발좀 해봤다는 사람들 다들 아는 사실이지만..
FF에서 한글을 칠때.. key이벤트가 한번만 실행된다;; 그래서 많은 트릭들이 나와 있고~ ;; 

이것도 뭐 비슷한 맥락이지만 그냥 웹워커를 한번 써보려고 worker를 이용해서 돌려 보았다.. 
그래서 FF에서 worker지원 안하는 버전에선.. 그냥 일반 textarea로 나온다..  

looahWebWorker 이 녀석은.. 그 머냐.. looah에서 사용하는 공통으로 사용하려고 만들어 보았는데..
사실 아직 쓰이는데는 없다.. 그냥 만들어 놓은 거구..

대충 설명 들어가면.. 일단 안보이는 맨 구석에 div하나를 숨겨 놓는다..
그리고 textarea에서 친 내용을 실시간으로 div에다가 넣어주시고 그 녀석의 height를 가지고 와서 textarea
높이를 변경해주는 것이다.. 

만들다 보면 이것저것 생각할게 많다.. ; cut&paste할때.. 마우스로 할때 .. 등등.. 자질 구리하게 신경써줘야 하는 것도 많고..
완벽하게 만들려고 한다면 과연 할 수 있을까 의문 스럽기도 하고..

그리고 css에서도 해줘야 할 게 있고.. ;;
아참 이녀석은 무한대로 자라지 않는다... 다만 maxHeight까지만 자랄 뿐.. ;;

혹시나 이런 삽질 놀이에 관심 있는 사람은 코드 컨셉만 참조 하면 될듯..
한국에서 YUI를 쓰는 사이트가 있을지 모르겠지만.. 충분히 jQuery같은걸로 컨버팅 한다던가.. 사실 js프레임웍이 중요한게 아니잖아욤!?!  아님 이녀석 뭐야 이러고 잊어 버리시면 된다.. ㅋ 그건 댁들이 알아서;; 판단하시고.. 데모나 css같은건..
http://www.looah.com  에 가서 직접 확인해보시길.. ;; 

사실 이것저것 정리해서 블로깅 하기가 귀찮으니;; 쿨럭;  아 가장 중요한건.. 
아직 배포 되지 않은 코드다.. 아마  몇일 안에 push할 것 같은데..  이런 잼있는 삽질 말고 다른 힘든 삽질한다고 ;; 
많이 바뻐서 코드 반영이 느려지고 있다 ㅡ.ㅡ; 

FF에서 최소한 리소스를 적게 써보려고 삽질해서 코드가 좀 더럽다; 다음 코드 베큠 돌릴때 다시금 정리 해야징;; 지금은 바쁘니 ㅡ.ㅡ; 아참 bestofbest라는 문구는 .. 좀더 빨리 자라도록 심어둔 영양제 같은 녀석이다.


js는 잼있다니까.. 쩝;; 
다음번엔.. jslint 검사후 YUI compressor를 이용해서 압축하는  자동화 이야기를 포스팅 해볼까 생각만 중이다..;; 

아참.. 참고로 YUI를 사용하고 있지만 난 전혀 Yahoo랑 상관없는 놈이다..;;  난 그냥 Looah개발자다;;
회사 코드 막 블로깅 하고... 이러다가 "Yoon's fired!!" ;;이러는거 아냐;; 쿨럭; 어차피 js는 초딩도 볼 수 있으니;; pass 하겠습니다;;


update ===== 2011.4.27
ie에서 좀 븅신처럼 동작한다 ㅡㅡ;
그래서 path를 했는데... ;; 다시 올리려니 귀찮네;;  
Posted by is윤군

댓글을 달아 주세요