js/dialogue.js
function applyCssPosition(dialogue) {
  var positionalEl = dialogue.options.positionTo;
  var containerPadding = 20;
  var cssSettings = {
    top: '',
    left: '',
    position: '',
    margin: '',
    marginTop: 0,
    marginRight: 0,
    marginBottom: 0,
    marginLeft: 0,
    maxWidth: dialogue.options.width
  };
  var clientFrame = {
    positionVertical: window.pageYOffset,
    height: window.innerHeight,
    width: window.innerWidth
  };

  var dialogueHeight = parseInt(dialogue.dialogue.offsetHeight);

  // position container
  dialogue.container.style.top = parsePx(clientFrame.positionVertical);

  // position to element or centrally window
  if (positionalEl) {
    var boundingRect = positionalEl.getBoundingClientRect();

    // calc top
    cssSettings.position = 'absolute';
    cssSettings.top = parseInt(boundingRect.top);
    cssSettings.left = parseInt(boundingRect.left);

    // if the right side of the dialogue is poking out of the clientFrame then
    // bring it back in plus 50px padding
    if ((cssSettings.left + cssSettings['maxWidth']) > clientFrame.width) {
      cssSettings.left = clientFrame.width - 50;
      cssSettings.left = cssSettings.left - cssSettings['maxWidth'];
    };

    // no positional element so center to window
  } else {
    cssSettings.position = 'relative';
    cssSettings.left = 'auto';
    cssSettings.marginTop = 0;
    cssSettings.marginRight = 'auto';
    cssSettings.marginBottom = 0;
    cssSettings.marginLeft = 'auto';

    // center vertically if there is room
    // otherwise send to top and then just scroll
    if (dialogueHeight < clientFrame.height) {
      cssSettings.top = parseInt(clientFrame.height / 2) - parseInt(dialogueHeight / 2) - containerPadding;
    } else {
      cssSettings.top = 'auto';
    };
  };

  dialogue.container.style.zIndex = 500 + dialoguesOpen.length;
  dialogue.dialogue.style.top = parsePx(cssSettings.top);
  dialogue.dialogue.style.left = parsePx(cssSettings.left);
  dialogue.dialogue.style.position = parsePx(cssSettings.position);
  dialogue.dialogue.style.marginTop = parsePx(cssSettings.marginTop);
  dialogue.dialogue.style.marginRight = parsePx(cssSettings.marginRight);
  dialogue.dialogue.style.marginBottom = parsePx(cssSettings.marginBottom);
  dialogue.dialogue.style.marginLeft = parsePx(cssSettings.marginLeft);
  dialogue.dialogue.style.maxWidth = parsePx(cssSettings.maxWidth);
}
function applyCssPosition(dialogue) {
  var positionalEl = dialogue.options.positionTo;
  var containerPadding = 20;
  var cssSettings = {
    top: '',
    left: '',
    position: '',
    margin: '',
    marginTop: 0,
    marginRight: 0,
    marginBottom: 0,
    marginLeft: 0,
    maxWidth: dialogue.options.width
  };
  var clientFrame = {
    positionVertical: window.pageYOffset,
    height: window.innerHeight,
    width: window.innerWidth
  };

  var dialogueHeight = parseInt(dialogue.dialogue.offsetHeight);

  // position container
  dialogue.container.style.top = parsePx(clientFrame.positionVertical);

  // position to element or centrally window
  if (positionalEl) {
    var boundingRect = positionalEl.getBoundingClientRect();

    // calc top
    cssSettings.position = 'absolute';
    cssSettings.top = parseInt(boundingRect.top);
    cssSettings.left = parseInt(boundingRect.left);

    // if the right side of the dialogue is poking out of the clientFrame then
    // bring it back in plus 50px padding
    if ((cssSettings.left + cssSettings['maxWidth']) > clientFrame.width) {
      cssSettings.left = clientFrame.width - 50;
      cssSettings.left = cssSettings.left - cssSettings['maxWidth'];
    };

    // no positional element so center to window
  } else {
    cssSettings.position = 'relative';
    cssSettings.left = 'auto';
    cssSettings.marginTop = 0;
    cssSettings.marginRight = 'auto';
    cssSettings.marginBottom = 0;
    cssSettings.marginLeft = 'auto';

    // center vertically if there is room
    // otherwise send to top and then just scroll
    if (dialogueHeight < clientFrame.height) {
      cssSettings.top = parseInt(clientFrame.height / 2) - parseInt(dialogueHeight / 2) - containerPadding;
    } else {
      cssSettings.top = 'auto';
    };
  };

  dialogue.container.style.zIndex = 500 + dialoguesOpen.length;
  dialogue.dialogue.style.top = parsePx(cssSettings.top);
  dialogue.dialogue.style.left = parsePx(cssSettings.left);
  dialogue.dialogue.style.position = parsePx(cssSettings.position);
  dialogue.dialogue.style.marginTop = parsePx(cssSettings.marginTop);
  dialogue.dialogue.style.marginRight = parsePx(cssSettings.marginRight);
  dialogue.dialogue.style.marginBottom = parsePx(cssSettings.marginBottom);
  dialogue.dialogue.style.marginLeft = parsePx(cssSettings.marginLeft);
  dialogue.dialogue.style.maxWidth = parsePx(cssSettings.maxWidth);
}
function applyCssPosition ( dialogue ) { var positionalEl = dialogue . options . positionTo ; var containerPadding = 20 ; var cssSettings = { top : '' , left : '' , position : '' , margin : '' , marginTop : 0 , marginRight : 0 , marginBottom : 0 , marginLeft : 0 , maxWidth : dialogue . options . width } ; var clientFrame = { positionVertical : window . pageYOffset , height : window . innerHeight , width : window . innerWidth } ; var dialogueHeight = parseInt ( dialogue . dialogue . offsetHeight ) ; // position container dialogue . container . style . top = parsePx ( clientFrame . positionVertical ) ; // position to element or centrally window if ( positionalEl ) { var boundingRect = positionalEl . getBoundingClientRect ( ) ; // calc top cssSettings . position = 'absolute' ; cssSettings . top = parseInt ( boundingRect . top ) ; cssSettings . left = parseInt ( boundingRect . left ) ; // if the right side of the dialogue is poking out of the clientFrame then // bring it back in plus 50px padding if ( ( cssSettings . left + cssSettings [ 'maxWidth' ] ) > clientFrame . width ) { cssSettings . left = clientFrame . width - 50 ; cssSettings . left = cssSettings . left - cssSettings [ 'maxWidth' ] ; } ; // no positional element so center to window } else { cssSettings . position = 'relative' ; cssSettings . left = 'auto' ; cssSettings . marginTop = 0 ; cssSettings . marginRight = 'auto' ; cssSettings . marginBottom = 0 ; cssSettings . marginLeft = 'auto' ; // center vertically if there is room // otherwise send to top and then just scroll if ( dialogueHeight < clientFrame . height ) { cssSettings . top = parseInt ( clientFrame . height / 2 ) - parseInt ( dialogueHeight / 2 ) - containerPadding ; } else { cssSettings . top = 'auto' ; } ; } ; dialogue . container . style . zIndex = 500 + dialoguesOpen . length ; dialogue . dialogue . style . top = parsePx ( cssSettings . top ) ; dialogue . dialogue . style . left = parsePx ( cssSettings . left ) ; dialogue . dialogue . style . position = parsePx ( cssSettings . position ) ; dialogue . dialogue . style . marginTop = parsePx ( cssSettings . marginTop ) ; dialogue . dialogue . style . marginRight = parsePx ( cssSettings . marginRight ) ; dialogue . dialogue . style . marginBottom = parsePx ( cssSettings . marginBottom ) ; dialogue . dialogue . style . marginLeft = parsePx ( cssSettings . marginLeft ) ; dialogue . dialogue . style . maxWidth = parsePx ( cssSettings . maxWidth ) ; }
apply the css to the dialogue to position correctly
apply the css to the dialogue to position correctly