dynamics-tips
Version:
Elementos dinamicos de paginas web.
238 lines (194 loc) • 7.69 kB
JavaScript
//const $ = require("jquery")
import $ from "jquery"
/**
* Clase Position
* Define la posición de los elementos
* dinámicos en la pantalla localiza el elemento
* disparador y define X Y del elemento dinámico
*/
class Position {
/**
* Retorna la posicón en X del elemento disparador
* y configura dicha magnitud en el elemento dinámico
* @param origin Elemento disparador
* @param element Elemento dinamico
* @returns Number posición X del elemento dinamico
*/
static positionX (origin, element) {
var x = $(origin).offset().left
$(element).css("left", x)
return x
}
/**
* Retorna la posicón en Y del elemento disparador
* y configura dicha magnitud en el elemento dinámico
* @param origin Elemento disparador
* @param element Elemento dinamico
* @returns Number posición Y del elemento dinamico
*/
static positionY (origin, element) {
var y = $(origin).offset().top
$(element).css("top", y)
return y
}
/**
* Verifica el limite inferior es suficientemente
* amplio como para colocar el elemento en esta posición
* si esto es cierto entonces lo coloca en esta
* posición caso contrario lo intenta hubicar arriba.
* @param origin elemento disparador del evento
* @param element elemrnto dinámico que se desea hubicar
* @returns true / false
*/
static canDown (origin, element) {
// Altura total de la ventana visible
// o tapasa por el scroll
const windowHeight = $(window).height()
// espacio tapado por el scroll
const wScrollTop = $(window).scrollTop()
// espacio entre el origen y el tope superior
const origenOffsetTop = $(origin).offset().top
// altura del elemento
const origenHeight = $(origin).outerHeight()
// altura del elemento dinámico
const tipsHeight = $(element).outerHeight()
/**
* Si el alto total del la ventana +
* lo tapado por el scroll - (espacio entre el origen y el tope superior
* + altura del origen) -> espacio debajo del origen
* si este espacio es mayor a altura del elemento + 6
* entonces puede ir debajo caso contrario no.
*/
return windowHeight + wScrollTop -
(origenOffsetTop + origenHeight)
> tipsHeight + 6
}
/**
* Verifica si el elemento puede ir arriba
* del elemento origen.
* @param origin elemento origen
* @param element elemento dinámico
* @returns true / false
*/
static canUp ( origin, element ) {
// Offset por encima del elemento origen
const offsetTopOrigen = $(origin).offset().top
// Espacio consumido por el scroll
const wScrollTop = $(window).scrollTop()
// altura del elemento dinámico
const tipsHeight = $(element).outerHeight()
/**
* Espacio por encima del origen - espacio consumido por el scroll >
* altura del elemento dinámico + 6
*/
return offsetTopOrigen - wScrollTop > tipsHeight + 6
}
/**
* Verifica si el elemento dinámico puede ir a la derecha
* de el elemto origen.
* @param {*} origin
* @param {*} element
* @returns true / false
*/
static canRight ( origin, element) {
const windowWidth = $(window).width()
const origenOffsetLeft = $(origin).offset().left
const origenWidth = $(origin).width()
const tipsWidth = $(element).width()
return windowWidth - origenOffsetLeft - origenWidth - 80 > tipsWidth + 20
}
/**
* Verifica si el elemento dinámico puede ir a la izquierda
* de el elemto origen.
* @param {*} origin
* @param {*} element
* @returns true / false
*/
static canLeft (origin, element) {
return $(origin).offset().left > $(element).width() + 20
}
/**
* Posicionar el elemento dinámico alineado con
* el elemento origen.
* @param {*} origin
* @param {*} element
* @returns Posicion en X donde se coloca el elemento
*/
static alignHorizontal (origin, element) {
// Cuando el elemento origen no tiene el mismo ancho
// Que el elemento dinámico se calcula el corrimiento
// para que ambos elementos queden el el mismo eje
var corr = ($(origin).outerWidth() ) - $(element).outerWidth()
return Position.positionX(origin,element) + Math.round(corr / 2)
}
/**
* Posicionar el elemento dinámico alineado con
* el elemento origen.
* @param {*} origin
* @param {*} element
* @returns Posicion en Y donde se coloca el elemento
*/
static alignVertical ( origin, element ){
// Cuando el elemento origen no tiene el mismo alto
// Que el elemento dinámico se calcula el corrimiento
// para que ambos elementos queden el el mismo eje
var corr = $(origin).outerHeight() - $(element).outerHeight()
return Position.positionY(origin,element) + Math.round(corr / 2)
}
static limitLeft ( element ) {
const despIzq = $(element).offset().left
return despIzq <= 0 ? despIzq*-1 : 0
}
static limitTop ( element ) {
const despArr = $(element).offset().top - $(window).scrollTop()
return despArr <= 0 ? (despArr - 6)*-1 : 0
}
static limitRight ( element ) {
const despDer = $(window).width() - $(element).offset().left - $(element).outerWidth()
return despDer <= 0 ? Math.round((despDer - 6)) : 0
}
static positionTop (origin, ele) {
$(ele).css("top", $(origin).offset().top - $(ele).outerHeight() - 5)
$(ele).css("left", Position.alignHorizontal(origin,ele))
var di = Position.limitLeft(ele)
var td = Position.limitRight(ele)
if(di !== 0) {
$(ele).css("left", Position.alignHorizontal(origin,ele) + di)
td = 0
}
if(td !== 0)
$(ele).css("left", Position.alignHorizontal(origin,ele) + td )
$(ele).css({transform: 'translateY(-10px)'})
}
static positionBottom (origen, ele) {
$(ele).css("top", $(origen).offset().top +$(origen).outerHeight() + 5)
$(ele).css("left", Position.alignHorizontal(origen,ele))
var di = Position.limitLeft(ele)
var td = Position.limitRight(ele)
if(di !== 0) {
$(ele).css("left", Position.alignHorizontal(origen,ele) + di)
td = 0
}
if(td !== 0)
$(ele).css("left", Position.alignHorizontal(origen,ele) + td )
$(ele).css({transform: 'translateY(10px)'})
}
static positionLeft (origen, ele) {
$(ele).css("left", $(origen).offset().left - $(ele).width() - 25)
$(ele).css("top", Position.alignVertical(origen,ele))
var da = Position.limitTop(ele)
if(da !== 0)
$(ele).css("top", Position.alignVertical(origen,ele) + da)
$(ele).css({transform: 'translateX(-10px)'})
}
static positionRight (origen, ele) {
$(ele).css("left", $(origen).offset().left + $(origen).outerWidth() + 6)
$(ele).css("top", Position.alignVertical(origen,ele) )
var da = Position.limitTop(ele)
if(da !== 0)
$(ele).css("top", Position.alignVertical(origen,ele) + da)
$(ele).css({transform: 'translateX(10px)'})
}
}
export default Position
//module.exports = Position