• OBCon JavaScript Library
• OBConObject
• Environments
• DragAndDrop
• Portlet
• PageOptions
• DataTables
• UtilsTimer
• Utils
• Device
• MouseEvent
• ScrollEvent
• OBConNotification
• Popover
• Tooltips
• Event

OBCon JavaScript Library

---

• js/obcon_2121.js

reserved

 

reserved

 

reserved

 

OBConObject

• Class : nsOBCon.class.OBConObject

 

reserved

 

reserved

 

reserved

 

Environments

• Class : nsOBCon.class.Environments

• nsOBCon.env

 

reserved

 

reserved

 

reserved

 

DragAndDrop

• Class : nsOBCon.class.DragAndDrop

• To-Do

  • this._isDragParent를 프로그램에서 자동으로 설정 되도록 한다.

 

    

        drage001
    
    

        drage002
    
    

        drage003
    
    

        drage004
    






    

        

        

    

 

const dragAndDrop = new nsOBCon.class.DragAndDrop();

 

#dragOuter001, #dragOuter002 {
    margin-bottom: 10px;
    border: 1px solid green;

    width: 500px;
    height: 200px;
}

#drage001, #drage002, #drage003, #drage004 {
    margin-bottom: 2px;
    border: 1px solid green;

    width: 100px;
    height: 30px;
    cursor: move;                       /* 커서 */
}

 

Portlet

• Class : nsOBCon.class.Portlet

 

    

        

            portlet-header
        
        

            portlet-body
        
    

 

const portlet = new nsOBCon.class.Portlet({
    id: 'portlet',
    containerId: 'portletOuter'         //--- 생략시 document가 사용됨
});

 

#portletOuter {
    margin-bottom: 10px;
    border: 1px solid green;

    width: 800px;
    height: 500px;
}

#portlet{
    margin-bottom: 10px;
    border: 1px solid green;

    position: absolute;
    width: 300px;
    height: 200px;
}

#portlet-header {
    background-color: gray;
}

 

PageOptions

• Class : nsOBCon.class.PageOptions

• nsOBCon.pageOptions

 

reserved

 

reserved

 

reserved

 

DataTables

• Class : nsOBCon.class.DataTables

• nsOBCon.dataTable

 

reserved

 

reserved

 

reserved

 

UtilsTimer

 

reserved

 

reserved

 

reserved

 

Utils

• Class : nsOBCon.class.Utils

• nsOBCon.utils

 

reserved

 

reserved

 

reserved

 

Device

• Class : nsOBCon.class.Device

 

reserved

 

reserved

 

reserved

 

MouseEvent

• Class : nsOBCon.class.MouseEvent

• nsOBCon.mouse

 

reserved

 

reserved

 

reserved

 

ScrollEvent

• Class : nsOBCon.class.ScrollEvent

• nsOBCon.scroll

reserved

 

reserved

 

reserved

 
 

OBConNotification

• nsOBCon.notification

 

reserved

 

reserved

 

reserved

 

Popover

Tooltips

Event

---

• evt.preventDefault(); //--- 이벤트에 따른 기본 동작을 실행하지 않도록 한다.

• evt.stopImmediatePropagation(); //--- 이벤트에 따른 다른 수신기가 실행되지 않도록 한다.

• evt.stopPropagation(); //--- 이벤트에 따른 기본 동작을 실행한 후 전파를 방지 한다.

//--- https://developer.mozilla.org/ko/docs/Web/Events
let events = [];

//--- pointer, mouse/wheel, touch ----------------------------------------------------------
//--- pointerdown == mousedown == touchstart
//--- pointermove == mousemove == touchmove
//--- pointerup   == mouseup   == touchend

// pointerover > pointerenter > mouseover > mouseenter
// pointermove > mousemove                                              > touchmove
// pointerout  > pointerleave > mouseout  > mouseleave

// pointerdown > mousedown
// pointerdown > mousedown > pointerup   > mouseup > click
// pointerdown > mousedown > pointerup   > mouseup > contextmenu
// pointerdown > mousedown > pointerup   > mouseup > click > pointerdown > mousedown > pointerup   > mouseup > click > dblclick

//--- https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture
// ~.setPointerCapture(e.pointerId) 함수 호출시 gotpointercapture event 발생
// ~.releasePointerCapture(e.pointerId) 함수 호출시 lostpointercapture event 발생
events = events.concat([                            //--- Pointer : Mouse, Pen, Stylus, Touch (손 가락 포함)
    'pointerover', 'pointerenter', 'pointerdown', 'pointermove', 'pointerup', 'pointercancel', 'pointerout', 'pointerleave', 
    'gotpointercapture', 'lostpointercapture',
    'pointerlockchange', 'pointerlockerror'
]);

events = events.concat([                            //--- Mouse
    'mouseover', 'mouseenter', 'mousedown', 'mousemove', 'mouseup', 'mouseout', 'mouseleave',
    'click', 'dblclick', 'contextmenu', 'auxclick',
    'wheel', 'select'
]);

events = events.concat([                            //--- Touch
    // 'touchstart', 'touchmove', 'touchcancel', 'touchend', 
]);

//--- drag and drop ------------------------------------------------------------------------
// dragstart > drag (반복) > dragend                for draggable
// dragenter > dragover (반복) > dragleave          for droppable
// dragenter > dragover (반복) > drop               for droppable
events = events.concat([                            //---  for draggable
    'dragstart', 'drag', 'dragend', 
]);
events = events.concat([                            //---  for droppable
    'dragenter', 'dragover', 'dragleave', 'drop',
]);

//--- scroll -------------------------------------------------------------------------------
events = events.concat([ 
    'scroll'
]);

//--- keyboard -----------------------------------------------------------------------------
events = events.concat([                            //--- 키보드
    'keydown', 'keypress', 'keyup'
]);
events = events.concat([                            //--- Tag 내용 편집
    'compositionstart', 'compositionupdate', 'compositionend'
]);
events = events.concat([                            //--- 클립보드
    'cut', 'copy', 'paste'
]);

//--- motion -------------------------------------------------------------------------------
events = events.concat([ 
    'devicemotion', 'deviceorientation'
]);

events.forEach(function(eventName) {
    if (eventName.startsWith('ppp') == false) {
        this._portlet.on(eventName, function(ev) { this.startEvent(eventName, ev) }.bind(this));
    }
}.bind(this));

---