Dimension API



Dimension API



이전 포스트에서 자바스크립트를 통해 DOM Dimension 수치를 가져오는 방법에 대해 설명하였습니다.



아래는 그와 관련된 함수들을 모듈화한 소스 코드입니다.


  1. var Dimension = (function(win, doc){
  2.        
  3.     return new (function(){
  4.        
  5.         function init(){
  6.                              
  7.             return this;
  8.         };
  9.  
  10.         init.prototype =
  11.         {
  12.             screen: _screen,
  13.             doc: doc,
  14.             scroll: scroll,
  15.             mouse: mouse,
  16.             elem: elem
  17.         };
  18.  
  19.  
  20.         return init;
  21.  
  22.     }());
  23.  
  24.    
  25.     function _screen(){
  26.        
  27.         return {
  28.             w: screen.width,
  29.             h: screen.height
  30.         };
  31.     };
  32.  
  33.     function doc()
  34.     {
  35.         var page = {
  36.            
  37.             w: top.window.scrollMaxX ? top.window.innerWidth + top.window.scrollMaxX : top.document.documentElement.scrollWidth || top.document.body.scrollWidth || 0,
  38.             h: top.window.scrollMaxY ? top.window.innerHeight + top.window.scrollMaxY : top.document.documentElement.scrollHeight || top.document.body.scrollHeight || 0
  39.         }
  40.          
  41.           , win = {
  42.  
  43.             w: top.window.innerWidth ? top.window.innerWidth : top.document.documentElement.clientWidth || top.document.body.clientWidth || 0,
  44.             h: top.window.innerHeight ? top.window.innerHeight : top.document.documentElement.clientHeight || top.document.body.clientHeight || 0
  45.         };
  46.  
  47.         return {
  48.             page: page,
  49.             win: win
  50.         };
  51.     };
  52.    
  53.     function scroll(){
  54.        
  55.         return {
  56.             x: top.window.scrollX || top.window.pageXOffset || top.document.documentElement.scrollLeft || top.document.body.scrollLeft || 0,
  57.             y: top.window.scrollY || top.window.pageYOffset || top.document.documentElement.scrollTop || top.document.body.scrollTop || 0
  58.         };
  59.     };
  60.  
  61.     function elem(elem){
  62.  
  63.         elem = elem || top.document.documentElement;
  64.  
  65.         var round = Math.round
  66.           , pFloat = parseFloat
  67.           , w = round(pFloat(Element.css(elem, 'width'))) || 0
  68.           , h = round(pFloat(Element.css(elem, 'height'))) || 0
  69.           , x = round(pFloat(getElementX(elem))) || 0
  70.           , y = round(pFloat(getElementY(elem))) || 0
  71.           , r = x + w || 0
  72.           , rx = round(pFloat(getParentRelativeX(elem))) || 0
  73.           , ry = round(pFloat(getParentRelativeY(elem))) || 0;
  74.  
  75.        
  76.         return {
  77.             w: w,
  78.             h: h,
  79.             x: x,
  80.             y: y,
  81.             r: r,
  82.             rx: rx,
  83.             ry: ry
  84.         };
  85.     }
  86.  
  87.  
  88.     function getElementX(elem){
  89.  
  90.         elem = elem || top.document.documentElement;
  91.         var x = 0;
  92.  
  93.         while (elem.offsetParent){
  94.            
  95.             x += elem.offsetLeft;
  96.  
  97.             elem = elem.offsetParent;
  98.         };
  99.  
  100.         return x;
  101.     };
  102.  
  103.     function getElementY(elem){
  104.    
  105.         elem = elem || top.document.documentElement;
  106.         var y = 0;
  107.  
  108.         while (elem.offsetParent){
  109.            
  110.             y += elem.offsetTop;
  111.  
  112.             elem = elem.offsetParent;
  113.         }
  114.  
  115.         return y;
  116.     };
  117.  
  118.     // 해당 엘리먼트와 직속 부모 엘리먼의 상대적인 X 위치
  119.     function getParentRelativeX(elem){
  120.    
  121.         elem = elem || top.document.documentElement;
  122.  
  123.         return elem.parentNode === elem.offsetParent ? elem.offsetLeft :
  124.  
  125.         (getElementX(elem) - getElementX(elem.parentNode));
  126.     };
  127.    
  128.  
  129.     // 해당 엘리먼트와 직속 부모 엘리먼의 상대적인 Y 위치
  130.     function getParentRelativeY(elem){
  131.    
  132.         elem = elem || top.document.documentElement;
  133.  
  134.         return elem.parentNode === elem.offsetParent ? elem.offsetTop :
  135.  
  136.         (getElementY(elem) - getElementY(elem.parentNode));
  137.     };
  138.  
  139.  
  140.    
  141.     function mouse(e){
  142.        
  143.         e = top.window.event || e;
  144.  
  145.         var scroll = this.scroll();
  146.  
  147.         // x, y: 현재 마우스 위치
  148.         // rx, ry: 이벤트가 발생한 해당 엘리먼트와 마우스의 상대적인 x, y 위치
  149.         var x = e.pageX || e.clientX + scroll.x || 0
  150.           , y = e.pageY || e.clientY + scroll.y || 0
  151.           , rx = e.layerX || e.offsetX || 0
  152.           , ry = e.layerY || e.offsetY || 0;
  153.  
  154.  
  155.         return {
  156.             x: x,
  157.             y: y,
  158.             rx: rx,
  159.             ry: ry
  160.         };
  161.     };
  162.  
  163.  
  164.  
  165.  
  166. }(window, document));