position script for x-tag mixin

x-tag position mixin

var doc = document,
    root = doc.documentElement,
    positions = {
      'top-left': function(node, target){
        return {
          fit: node.height <= target.top && 
               target.left >= 0,
          top: target.top,
          left: target.left,
          translate: 'translate(0%, -100%)'
        };
      },
      'top-middle': function(node, target){       
        var middle = target.left + target.width / 2;
        console.log(target.top);
        return {
          fit: node.height <= target.top && 
               node.width / 2 <= middle,
          top: target.top,
          left: middle,
          translate: 'translate(-50%, -100%)'
        };
      },
      'top-right': function(node, target){         
        return {
          fit: node.height <= target.top && 
               node.width <= target.right,
          top: target.top,
          left: target.right - node.width,
          translate: 'translate(-100%, -100%)'
        };
      },
      'right-top': function(node, target){         
        return {
          fit: node.height <= root.clientHeight - target.top && 
               node.width <= root.clientWidth - target.right,
          top: target.top,
          left: target.right,
          translate: 'translate(0%, 0%)'
        };
      },
      'right-middle': function(node, target){         
        var half = target.height / 2;
        return {
          fit: node.height <= root.clientHeight - (target.top + half) && 
               node.width <= root.clientWidth - target.right,
          top: target.top + half,
          left: target.right,
          translate: 'translate(0%, -50%)'
        };
      },
      'right-bottom': function(node, target){ 
        var half = target.height / 2;
        return {
          fit: node.height <= target.bottom && 
               node.width <= root.clientWidth - target.right,
          top: target.bottom,
          left: target.right,
          translate: 'translate(0%, -100%)'
        };
      }
    };

xtag.mixins.position = {
  accessors: {
    position: {
      attribute: {},
      set: function(val){
        if (positions[val]) {
          this.setPosition(this.xtag.positionTarget || doc.body, val);
        }
      }
    },
    autoPosition: {
      attribute: {
        boolean: true,
        name: 'auto-position'
      },
      set: function(val){
        this.setPosition(this.xtag.positionTarget || doc.body, this.position);
      }
    }
  },
  methods: {
    setPosition: function(target, pos){
      var target = target.nodeName ? target : doc.querySelector(target),
          pos = pos || this.xtag.position || 'top-middle';
      
      if (positions[pos] && 
          (pos != this.xtag.position || 
           target != this.xtag.positionTarget)) {
        
        var nodeStyle = this.style.position,
            nodeRect = this.getBoundingClientRect(),
            targetRect = target.getBoundingClientRect();
        
        if (nodeStyle != 'absolute' || nodeStyle != 'fixed') {
          this.style.position = 'absolute';
        }
        
        if (doc.body.style.position == 'static') {
          doc.body.style.position = 'relative';
        }
        console.log(this);
        if (this.autoPosition) {
          
        }
        
        else {
          var coords = positions[pos](nodeRect, targetRect);
          console.log(coords);
          this.style.top = coords.top + 'px';
          this.style.left = coords.left + 'px';
          this.style.transform = this.style.webkitTransform =  coords.translate;
        }
        
      }
    }
  }
};

xtag.register('x-foo', {
  mixins: ['position']
});

setTimeout(function(){
  
document.querySelector('x-foo').setPosition(document.querySelector('button'), 'top-middle');
  
}, 1500);