Leturn.Element

BUILTIN_TRANSITION_LISTConstantstatic/read-only

이 constant 속성은 고정으로 내장된 transition list에 대한 정의를 나타낸다.
이 constant 속성은 향후 추가될 수 있으며, 변경될 수도 있다. 이 builtin transition list로 처리되는 속성들은 CSS뿐만아니라 동적 속성 에뮬레이트의 모든 영역이 포함될 수 있다.
하위 클래스에서는 클래스 특성에 준하여 이 constant 속성이 재정의 될수 있다.
Leturn.Elementconstructor
( domTarget:Object )

지정된 HTMLElement 요소로 인스턴스를 생성한다. 이 값은 HTMLElement 혹은 유효한 스트링이어야 한다.
반드시 인자로 domTarget이 지정되어야 하며, 단, HTMLElement를 액세스할수 있는 유효한 id값을 가진 string은 유효하다. <div id='aa'>aa</div> <div id='bb'>bb</div> <script> function create() { var agent = new LtnEle( document.createElement('div') ); // === new Leturn.Element( document.createElement('div') ); agent.addChildTo( document.body ); var agent2 = new Leturn.Element( 'aa' ); var agent3 = new LtnEle( '#bb' ); alert( agent +'/'+ agent2+'/'+agent3 ); var agent4 = new LtnEle( 'div' ); // can not refer, throw error. fail! } </script> <button onclick='create();'>create leturnElement</button> 참조 :
- Global.LtnEle
qsMethodstatic
( selector:String, callback:Function=null, baseElement:DOMElement=null ):Leturn.Element

Leturn.Document.qs와 유사하게 처리되지만, callback 함수로 구해진 내부 참조 인자가 엘리먼트가 아닌 Leturn.Element의 인스턴스이다. <div>a</div> <div id='b'>b</div> <script> function test() { LtnEle.qs( 'div', function() { alert( this ); // object Leturn.Element alert( this.html() == 'a' ); // true alert( this.html() == this.domTarget.innerHTML ); // true. }); LtnEle.qs( 'b', function( agent ) { alert( this === agent ); // true alert( this.innerHTML ); // undefiend. alert( this.domTarget.innerHTML ); // b }); LtnEle.qs( '#b', function() { alert( this.html() ); // b }); } </script> <button onclick='test();'>test</button> 참조 :
- Leturn.Document.qs
qsaMethodstatic
( selector:String, callback:Function=null, baseElement:DOMElement=null ):Array

Leturn.Document.qsa와 유사하게 처리되지만, callback 함수로 구해진 내부 참조 인자가 엘리먼트가 아닌 Leturn.Element의 인스턴스이다. <div>a</div> <div>b</div> <div> <span>1</span> <span>2</span> <span>3</span> </div> <span>4</span> <span>5</span> <span>6</span> <script> function test() { var divs = LtnEle.qsa( 'div', function( agent, i, divs ) { alert( agent +'/'+ i ); }); // uses baseElement. LtnEle( 'span', function( agent, i, spans ) { alert( agent.html() ); // 1, 2, 3 }, divs[ divs.length-1 ].domTarget ); } </script> <button onclick='test();'>test</button> 참조 :
- Leturn.Document.qsa
createMethodstatic
( tagName:String, callback:Function=null ):Leturn.Element

지정한 tagName의 domTarget을 갖는 Leturn.Element의 인스턴스를 생성한다. <script> function test() { var agent = LtnEle.create( 'div', function() { alert( this.domTarget.tagName ); // div. }); } </script> <button onclick='test();'>test</button> 참조 :
- Leturn.Document.createElement
createAsHtmlMethodstatic
( htmlText:String, cssText:String=null, targetDocument:HTMLDocument=null ):Leturn.Element

htmlText로 domTarget을 갖는 Leturn.Element의 인스턴스를 생성한다.
htmlText는 반드시 해당 domTarget의 감싼 innerHTML과 일치해야 한다. <script> function test() { var agent = LtnEle.createAsHtml( '<div><span>my span</span></div>' ); alert( agent.html() ); // '<span>my span</span>' var agent2 = LtnEle.createAsHtml( '<div><span>my span</span></div>', 'border:1px solid #000; background-color:#f00;' ); agent2.addChildTo( document.body ); /* following html text is error. because it is not wrapped around the outer form. var agent3 = LtnEle.createAsHtml( 'aaa<div><span>my span</span></div>', 'border:1px solid #000; background-color:#f00;' ); // 'aaa' < - error */ } </script> <button onclick='test();'>test</button> 참조 :
- Leturn.Document.createAsHtml
isInDOMMethodstatic
( target:HTMLElement ):Boolean

해당 타겟이 현재 DOM tree에 존재하는지 체크한다. <script> function test() { var div = document.createElement( 'div' ); alert( LtnEle.isInDOM( div ) ); // false document.body.appendChild( div ); alert( LtnEle.isInDOM( div ) ); // true } </script> <button onclick='test();'>test</button> 참조 :
- Leturn.Element.hasShape
moveCenterMethodstatic
( target:HTMLElement, fixedPosition:Boolean=false ):void

대상 타겟의 포지션을 부모영역 기준으로 중앙으로 이동시킨다. <head> <style> html, body { height:100%; } </style> </head> <body> <script> function testMoveCenter() { for( var i = 0; i < 10; i++ ) { LtnD.createElement( 'div', function() { this.onclick = function() { LtnEle.moveCenter( this ); }; this.innerHTML = 'click me'; this.style.cssText = 'position:absolute; background-color:'+LtnU.Color.toHEX( Math.round( Math.random()*0xffffff ) )+';'; LtnEle.rebound( this, Math.random()*200, Math.random()*200, Math.random()*400, Math.random()*400 ); LtnEle.addChildTo( this, document.body ); }); } } testMoveCenter(); </script> </body>
transitionMethod
( target:HTMLElement ):Boolean

domTarget에 대한 트랜지션을 수행한다.
이 트랜지션 처리는 CSS 스타일 및 BUILT_IN_TRANSITION_LIST 등 모든 트랜지션 처리에 대한 요소가 전부 포함된다.
만약 오직 css 전용 트랜지션을 적용하려고 한다면, cssTransition을 이용할 수 있다.
하지만 cssTransition은 브라우저가 지원되지 않을경우(e.g, css3 transform ) 적용이 불가한데 반해, 이 트랜지션메소드는 그것이 가능하다.
더불어, transition은 Leturn.Element.TRANSITION 이벤트를 적용하여 매우 복잡한 커스터마이징을 수행할 수 있다. ( cssTransitoin은 불가능 ) <body> <div id='a'>A</div> <script> function test() { Leturn.methodChain( new LtnEle( 'a' ) ). style( 'background-color', '#f00' ). rebound( 0,0, 100,100 ). transition( { x:200, y:200 }, { rc:0 } ); // infinity looping. } </script> <button onclick='test();'>test</button> </body> <body> <script> function test() { for( var i = 0; i < 10; i++ ) { LtnEle.create( 'div', function() { var delay = i * 100; this.styles( { position:'absolute', width:Math.random()*200, height:Math.random()*200, backgroundColor:LtnU.Color.toHEX( Math.round( Math.random()*0xffffff ) ) } ); this.addChildTo( document.body ); this.onMouseUpOutside = function() { var bgcolor = 'rgba('+Math.round(Math.random()*255)+', '+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+','+Math.random()+')'; this.transition( { left: Math.random()*500, top:Math.random()*400, width:Math.random()*400, height:Math.random()*400, backgroundColor:bgcolor }, { es:'out', fcb: function() { this.transition( { x:0,y:0 }, { d:'2s', es:'back.inout' } ); }, delay: delay } ); }; }); } } </script> <button onclick='test();'>test</button> </body> <head> <style> #a { width:300px; height:300px; font-size:12px; color:#000; transform: rotate(0deg); background-color:#f00; } </style> </head> <body> <div id='a'>Click me!</div> <script> LtnEle.qs( 'a', function() { this.addEventListener( 'click', function() { this.transition( { left: (Math.random()*100 )+'%', top: (Math.random()*100 )+'%', 'font-size': Math.random()*50 } ); this.transition( { color: LtnU.Color.toHEX( Math.round( Math.random()*0xffffff) ), transform: 'rotate('+Math.random()*360+'deg)' }, { es:'none', d:'2s' } ); }); }); </script> </body> <head> <style> .wrap { position:relative; width:400px; height:400px; border:1px solid #333; } .wrap button { position:absolute; right:0; top:0; } .wrap button:last-child { top:auto; bottom:0; } #a { overflow:hidden; width:100%; height:100%; font:12px/18px arial; white-space:pre-wrap; } </style> </head> <body> <div class='wrap'> <div id='a'> Sicily, Italy (CNN)They come in their thousands, crammed onto barely seaworthy boats to make the treacherous journey from Libya to Italy. Before reaching the Libyan port, many have traveled over land, paying people smugglers to clear the way, dodging bullets, knives and attempts to recruit them as fighters. They've been robbed, beaten and in some cases imprisoned during their desperate attempts to escape life in their own countries. CNN spoke to three migrants who made it to Italy about why they believed all the risk was worth it. Mahmoud Shubat, construction worker from Homs, Syria <img src='http://i2.cdn.turner.com/cnnnext/dam/assets/150422022121-italy-migrants-mahmoud-shubat-quote-exlarge-169.jpg'> For Mahmoud Shubat, there was no other option but to leave his four children in Syria to seek a better life for them all in Europe. "If I stayed Syria, I would have to be part of one party or of ISIS. I'd have to take up arms and kill people. But I don't want that. I only want to take care of my children," he said. Shubat left his home in Homs 10 weeks ago, paying people smugglers as he made his way to Italy, first by car across Turkey, then by boat from Turkey to Libya. In Libya, he boarded another boat crammed with around 300 migrants determined to reach Italian waters. <img src='http://i2.cdn.turner.com/cnnnext/dam/assets/150414130759-beheading-belgium-super-169.jpg'> At each stage of the journey, Shubat said he paid people smugglers, who would then put him in touch with the next group who would demand further payment to take him on. Shubat said he had no doubt that the traffickers he dealt with in Libya were connected to political armed militias. As they were about to leave the Libyan port, he said the people traffickers in charge allowed a gang of armed men to board the boat and rob them all. "They [were] wearing masks and they had guns. They searched us one by one looking for money and gold," he said. </div> <button onclick="scroll(1);"> ↑ </button><button onclick="scroll(2);"> ↓</button> </div> <script> var agent = new LtnEle( 'a' ); function scroll( v ) { agent.transition( { scrollTop: agent.scrollTop() + ( v==2? 200: -200 ) } ); }; </script> </body> 참조 :
- Leturn.Element.cssTransition
- Leturn.Element.alterTransition
cssTransitionMethod
( properties:Object, options:Object=null ):void

"More performance for transition, Use this".
css3에서 지원하는 transition 속성을 이용하여 트랜지션 처리를 수행한다.
transition메소드와는 달리 오직 css에 종속적이다. 단, 브라우저 자체기능을 사용하기 때문에 퍼포먼스부분은 더 향상될 수 있다. <head> <style> #a { display:inline-block; overflow:hidden; font:12px/18px arial; white-space:pre-wrap; } </style> </head> <body> <div id='a'> Sicily, Italy (CNN)They come in their thousands, crammed onto barely seaworthy boats to make the treacherous journey from Libya to Italy. Before reaching the Libyan port, many have traveled over land, paying people smugglers to clear the way, dodging bullets, knives and attempts to recruit them as fighters. They've been robbed, beaten and in some cases imprisoned during their desperate attempts to escape life in their own countries. CNN spoke to three migrants who made it to Italy about why they believed all the risk was worth it. Mahmoud Shubat, construction worker from Homs, Syria <img src='http://i2.cdn.turner.com/cnnnext/dam/assets/150422022121-italy-migrants-mahmoud-shubat-quote-exlarge-169.jpg'> For Mahmoud Shubat, there was no other option but to leave his four children in Syria to seek a better life for them all in Europe. "If I stayed Syria, I would have to be part of one party or of ISIS. I'd have to take up arms and kill people. But I don't want that. I only want to take care of my children," he said. Shubat left his home in Homs 10 weeks ago, paying people smugglers as he made his way to Italy, first by car across Turkey, then by boat from Turkey to Libya. In Libya, he boarded another boat crammed with around 300 migrants determined to reach Italian waters. </div> <script> LtnEle.qs( 'a', function() { this.onRollOver = function() { this.cssTransition( { color: LtnU.Color.toHEX( Math.round( Math.random()*0xffffff) ), transform: 'scale('+Math.random()*2+') skew('+Math.random()*60+'deg)' }, { d:'0.6s', delay:'100ms' } ); this.cssTransition( { 'line-height': Math.random()*50, fontSize:Math.random()*30 }, { d:1500 } ); // d:1500 === d:'1.5s' === d: '1500ms' }; }); </script> </body> 참조 :
- Leturn.Element.transition
- Leturn.Element.alterTransition
alterTransitionMethod
( properties:Object, options:Object=null ):void

이메소드는 transition / cssTransition에 대한 자동 처리를 수행하도록 고안된 메소드이다.
브라우저 환경이 css transition을 지원하면, 우선적으로 'cssTransition' 메소드로 처리하고, 만약 css transition을 처리하지 않는다면, 'transition'메소드로 대체한다.
따라서 모든 브라우저 대응을 기본으로 하고 있다. 또 css 속성이 아닌, 특별한 트랜지션 prop이 등록된다면 ( builtin transition list... ) 이경우 자동으로 transition 메소드로 처리하도록 위임된다.
따라서 options 속성은 transition과 cssTransition 두메소드에 공통적으로 사용될 수 있는 항목과 transition에만 적용되는 항목으로 나누어진다. <head> <style> #a { overflow:hidden; width:200px; height:400px; font:12px/18px arial; white-space:pre-line; border:1px solid #000; } </style> </head> <body> <div id='a'> Sicily, Italy (CNN)They come in their thousands, crammed onto barely seaworthy boats to make the treacherous journey from Libya to Italy. Before reaching the Libyan port, many have traveled over land, paying people smugglers to clear the way, dodging bullets, knives and attempts to recruit them as fighters. They've been robbed, beaten and in some cases imprisoned during their desperate attempts to escape life in their own countries. CNN spoke to three migrants who made it to Italy about why they believed all the risk was worth it. Mahmoud Shubat, construction worker from Homs, Syria <img src='http://i2.cdn.turner.com/cnnnext/dam/assets/150422022121-italy-migrants-mahmoud-shubat-quote-exlarge-169.jpg'> For Mahmoud Shubat, there was no other option but to leave his four children in Syria to seek a better life for them all in Europe. "If I stayed Syria, I would have to be part of one party or of ISIS. I'd have to take up arms and kill people. But I don't want that. I only want to take care of my children," he said. Shubat left his home in Homs 10 weeks ago, paying people smugglers as he made his way to Italy, first by car across Turkey, then by boat from Turkey to Libya. In Libya, he boarded another boat crammed with around 300 migrants determined to reach Italian waters. </div> <script> LtnEle.qs( 'a', function() { this.onRollOver = function() { this.alterTransition( { 'background-color': LtnU.Color.toHEX( Math.round( Math.random()*0xffffff) ), scrollLeft: this.scrollWidth() // cssTransition does not support this property, therefore automatically, uses 'transition' in internal. }, { d:'0.6s', delay:'100ms' } ); this.alterTransition( { height: 700 }, { d:1500 } ); }; this.onRollOut = function() { this.alterTransition( { backgroundColor: 'white', height:400, scrollLeft:0 } ); }; }); </script> </body> 참조 :
- Leturn.Element.transition
- Leturn.Element.cssTransition
draggableMethodstatic
( target:HTMLElement, enable:Boolean, options:Object=null ):void

드래그 처리를 수행할 대상을 등록한다. 옵셔널로 제공되는 options 인자로 커스터마이징을 적용할 수 있다. <head> <style> div { width:100px; height:100px; background-color:#f00; border:1px solid #000; } </style> </head> <body> <script> for( var i=0; i<5; i++ ) { LtnD.createElement( 'div', function() { LtnEle.addChildTo( this, document.body ); switch( i ) { case 0: this.innerHTML = 'snap drag'; LtnEle.draggable( this, true, { snap:40 } ); // snap to drag. break; case 1: this.innerHTML = 'dragarea drag'; LtnEle.draggable( this, true, { dragarea: { x:0, y:0, width:200, height:200 } } ); break; case 2: this.innerHTML = 'dragarea-x drag'; LtnEle.draggable( this, true, { dragarea: { x:0, y:0, width:200, height:0 } } ); // only x-coordinate. break; case 3: this.innerHTML = 'eventset drag'; LtnEle.draggable( this, true, { cb: function(e) { if( e.type == LtnDrag.DRAG_STOP ) { this.innerHTML = 'No more impossible dragging.'; LtnEle.draggable( this, false ); // withdraw drag. } }} ); break; default: LtnEle.draggable( this, true ); this.innerHTML = 'Drag me'; break; } }); } </script> </body> 참조 :
- Leturn.Element.Drag.manager
depthTopmostMethodstatic
( target:HTMLElement, groupName:String=null, groupDepthMin:int=null, groupDepthMax:int=null ):void

지정된 타겟의 뎁스를 최상위로 내보낸다. groupDepthMin값과 groupDepthMax값은 group name에 대해 항상 값을 덮어쓴다.
만약 group 이름이 지정되지 않으면, global 뎁스가 현재 타겟에 대해 관리 대상으로 사용된다. <head> <style> div { width:100px; height:100px; background-color:#f00; border:1px solid #000; } </style> </head> <body> <script> for( var i=0; i<5; i++ ) { LtnD.createElement( 'div', function() { LtnEle.draggable( this, true, { cb: function(e) { if( e.type == LtnDrag.DRAG_START ) { LtnEle.depthTopmost( this ); } }} ); LtnEle.addChildTo( this, document.body ); }); } </script> </body> 참조 :
- Leturn.Element.DepthManager.depthTopmost
Leturn.Element.TRANSITIONEventread-only

transition 이벤트를 등록한다.
이것은 오직 transition메소드를 수행할때만 발생하며, 참고로 cssTransition 수행시는 발동되지 않는다. <head> <style> input[type=text] { width:400px; } #a { width:100px; height:100px; background-color:#f00; border:1px solid #000; } </style> </head> <body> <input type='text' /><br><input type='text' /> <div id='a'>Click me</div> <script> var tareas = LtnEle.qs( 'a', function( agent ) { // onEvent handler. this.onTransition = function(e) { document.getElementsByTagName('input')[0].value = 'type : ' +e.type + ' position: ' + e.parameters.position +' isForward: '+ e.parameters.isForward; }; // eventListener. this.addEventListener( LtnEle.TRANSITION, function(e) { document.getElementsByTagName('input')[1].value = 'type : ' +e.type + ' position: ' + e.parameters.position +' isForward: '+ e.parameters.isForward; }); this.domTarget.onclick = function() { agent.transition( { width:Math.random()*300, height:Math.random()*300 }, { rc:0, d:'1s' } ); }; }); </script> </body> 참조 :
- Leturn.Element.transition