responsivewebframework
Version:
Jalasoft Foundation Front End Framework ========================================
138 lines (134 loc) • 5.92 kB
JavaScript
frameworkObject.modal = new function () {
var Modal = function(newIdElementModal,data) {
var idElementModal = '#' + newIdElementModal;
var htmlCode = "";
var classShadow = "framework-modal-container-html-shadow";
var clickOnScreenClose = data.clickOnScreenClose || false;
var equis = data.equis || false;
var animate = data.animate || false;
var type = data.type || "";
if(type === "html") {
htmlCode = data.htmlCode || "";
}
if(type === "image") {
classShadow = "";
var img = data.urlImage || "";
var image = [
'<div class="framework-modal-container-img">',
img,
'</div>'
];
htmlCode = image.join("");
}
if(type === "standard") {
var width = data.width || 260;
if(width < 260) width = 260;
width -= 50;
var title = data.title || "";
var content = data.content || "";
if(data.button) {
if( Object.prototype.toString.call( data.button ) === '[object Array]' ) {
var button = "";
var counter=0;
data.button.forEach( function( item ) {
var onClick = 'onclick="';
if(item.close) {
if(item.close === true) {
onClick += " $(this).closest('.framework-modal-container-html').animate({ 'opacity': '0' },400,function () {$(this).closest('.framework-modal-block').remove(); });";
}
}
if(item.buttonOnClick) {
onClick += item.buttonOnClick;
}
onClick += '" ';
if(item.caption) {
var typeButton = item.typeButton || "";
if(typeButton === "white") {
button += ' <button class="framework-modal-standard-button-white" ' + onClick + ' >' + item.caption + '</button> ';
} else {
button += ' <button class="button" ' + onClick + ' >' + item.caption + '</button> ';
}
}
});
if(button.length > 5 ) {
button = "<div class='framework-modal-standart-button' >" + button + "</div>";
}
}
} else {
var button = "";
}
var templateStandard = [
'<div class="framework-modal-standard" style="width: ' + width + 'px;">',
'<div class="framework-modal-standard-title">',
title,
'</div>',
'<div class="framework-modal-standard-content">',
content,
'</div>',
button,
'</div>'
];
htmlCode = templateStandard.join("");
}
var blockScreen = [
'<div class="framework-modal-block" id="',
newIdElementModal,
'">',
'</div>'
];
blockScreen = blockScreen.join('');
$('body').prepend(blockScreen);
var templateEquis = "";
if(equis === true) {
var idEquis = newIdElementModal+"equis";
templateEquis = '<div class="icon-equis framework-modal-equis" id="' + idEquis + '"></div>';
}
var containerHtml = [
'<div class="framework-modal-container-html ',
classShadow,
'">',
templateEquis,
htmlCode,
'</div>'
];
containerHtml = containerHtml.join('');
if(animate === true) {
$(idElementModal).animate({'opacity': '1' }, 150, function () {
$(idElementModal).append(containerHtml);
if(type !== "html") {
var heightContainerHtml = 0;
heightContainerHtml = $(idElementModal).find('.framework-modal-container-html').height();
heightContainerHtml = heightContainerHtml / 2;
$(idElementModal).find('.framework-modal-container-html').css("top", "calc(45% - " + heightContainerHtml + "px )");
}
$(idElementModal).find('.framework-modal-container-html').animate({ 'opacity': '1' },150);
$('#' + idEquis).click(function () {
$(idElementModal).find('.framework-modal-container-html').animate({ 'opacity': '0' },150,function () {
$(idElementModal).remove();
});
});
});
} else {
$(idElementModal).css({"bottom": 0});
$(idElementModal).append(containerHtml);
if(type !== "html") {
var heightContainerHtml = 0;
heightContainerHtml = $(idElementModal).find('.framework-modal-container-html').height();
heightContainerHtml = heightContainerHtml / 2;
$(idElementModal).find('.framework-modal-container-html').css("top", "calc(45% - " + heightContainerHtml + "px )");
}
$(idElementModal).find('.framework-modal-container-html').css({ 'opacity': '1' });
$('#' + idEquis).click(function () {
$(idElementModal).remove();
});
}
};
var listModal = [];
var index = 0;
this.add = function(data) {
var idElementModal;
idElementModal = "frameworkidmodal" + index;
index++;
listModal[idElementModal] = new Modal(idElementModal,data);
}
};