Skip to content

Commit

Permalink
FIXED: Component: Modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@SagnikGanguly96
SagnikGanguly96 committed Jan 2, 2023
1 parent f747ceb commit cb7c6f2
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 46 deletions.
40 changes: 40 additions & 0 deletions demos/modals.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!--
~ Copyright (c) 2022-2023 SGNetworks. All rights reserved.
~
~ The software is an exclusive copyright of "SGNetworks" and is provided as is exclusively with only "USAGE" access. "Modification", "Alteration", "Re-distribution" is completely prohibited.
~ VIOLATING THE ABOVE TERMS IS A PUNISHABLE OFFENSE WHICH MAY LEAD TO LEGAL CONSEQUENCES.
-->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modals - SGNUIKit Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="/src/js/SGNUIKit.loader.js"></script>
<script src="/src/addons/PrismJS/prism.js"></script>
<!--<script src="/dist/js/SGNUIKit.loader.js"></script>-->
</head>
<body>
<main>
<div class="sgn-container">
<div class="wrapper col-3">
<!-- MODAL (BASIC) -->
<a class="btn primary" data-sgn-modal="#sgn-modal1">Toggle Modal</a>

<div class="sgn-modal" id="sgn-modal1" sgn-snippet-title="Basic Modal">
<div class="sgn-modal-header">Modal Heading</div>
<div class="sgn-modal-body">
Some quick example text to build on the card title and make up the bulk of the card's content.
</div>
<div class="sgn-modal-footer">
<a class="btn btn-text primary sgn-modal-cancelBtn">Cancel</a>
<a class="btn primary sgn-modal-continueBtn">Continue</a>
</div>
</div>
</div>

</div>
</main>
</body>
</html>
17 changes: 12 additions & 5 deletions src/css/components/modals.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* Copyright (c) 2022 SGNetworks. All rights reserved.
* Copyright (c) 2022-2023 SGNetworks. All rights reserved.
*
* The software is an exclusive copyright of "SGNetworks" and is provided as is exclusively with only "USAGE" access. "Modification", "Alteration", "Re-distribution" is completely prohibited.
* VIOLATING THE ABOVE TERMS IS A PUNISHABLE OFFENSE WHICH MAY LEAD TO LEGAL CONSEQUENCES.
Expand Down Expand Up @@ -34,13 +34,13 @@
}

.sgn-modal > .sgn-modal-header {
display: flex;
align-items: center;
padding: var(--padding-md) var(--padding-md);
background-color: var(--sgn-accent-primary);
border-bottom: 1px solid var(--sgn-border-light);
color: var(--sgn-accent-primary-text);
display: flex;
font-family: var(--sgn-font-default-bold);
background-color: var(--sgn-accent-primary);
color: var(--sgn-text-secondary-alt);
padding: var(--padding-md) var(--padding-md);
}

.sgn-modal > .sgn-modal-body {
Expand Down Expand Up @@ -124,3 +124,10 @@
.sgn-modal-wrapper > .sgn-modal.sgn-modal-fw {
max-width: 100%;
}


@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
.sgn-modal-wrapper {
backdrop-filter: blur(5px);
}
}
102 changes: 61 additions & 41 deletions src/js/components/modals.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* Copyright (c) 2022 SGNetworks. All rights reserved.
* Copyright (c) 2022-2023 SGNetworks. All rights reserved.
*
* The software is an exclusive copyright of "SGNetworks" and is provided as is exclusively with only "USAGE" access. "Modification", "Alteration", "Re-distribution" is completely prohibited.
* VIOLATING THE ABOVE TERMS IS A PUNISHABLE OFFENSE WHICH MAY LEAD TO LEGAL CONSEQUENCES.
Expand All @@ -17,15 +17,15 @@ if(typeof jQuery === "undefined") {
const plugin = this;
let $this = $elem;

const init = function() {
const $header = $this.find('.sgn-modal-header'),
$body = $this.children('.sgn-modal-body'),
$footer = $this.find('.sgn-modal-footer');
const $cancelBtn = $this.find('.sgn-modal-cancelBtn'),
$continueBtn = $this.find('.sgn-modal-continueBtn');
const init = () => {
const $header = $this.find(".sgn-modal-header"),
$body = $this.children(".sgn-modal-body"),
$footer = $this.find(".sgn-modal-footer");
const $cancelBtn = $this.find(".sgn-modal-cancelBtn"),
$continueBtn = $this.find(".sgn-modal-continueBtn");

const cancelBtnHTML = `<a class="btn btn-text primary sgn-modal-cancelBtn">Cancel</a>`,
continueBtnHTML = `<a class="btn primary sgn-modal-continueBtn">Continue</a>`;
continueBtnHTML = `<a class="btn primary sgn-modal-continueBtn">Continue</a>`;

let createCancelBtn = false, createContinueBtn = false;

Expand Down Expand Up @@ -71,90 +71,110 @@ if(typeof jQuery === "undefined") {

plugin.elem = $this;

plugin.show = function() {
$this.parent('.sgn-modal-wrapper').show().css('display', 'flex');
$this.parent('.sgn-modal-wrapper').removeClass('hide').addClass('show');
}
plugin.show = () => {
$this.parent(".sgn-modal-wrapper").show().css("display", "flex");
setTimeout(() => $this.parent(".sgn-modal-wrapper").removeClass("hide").addClass("show"), 50);
};

plugin.hide = function() {
$this.parent('.sgn-modal-wrapper').removeClass('show').addClass('hide');
setTimeout(function() {
$this.parent('.sgn-modal-wrapper').hide();
}, 400);
}
plugin.hide = () => {
$this.parent(".sgn-modal-wrapper").removeClass("show").addClass("hide");
setTimeout(() => $this.parent(".sgn-modal-wrapper").hide(), 400);
};

plugin.remove = function() {
plugin.remove = () => {
$this.SGNModal.hide();
$this.parent('.sgn-modal-wrapper').remove();
$this.parent(".sgn-modal-wrapper").remove();

$this.removeData('SGNModal');
}
$this.removeData("SGNModal");
};

if($this.data('SGNModal') === undefined)
if($this.data("SGNModal") === undefined)
init();
}

/*
var pluginContainer = $("#divSomeContainer");
pluginContainer.MyPlugin();
pluginContainer.MyPlugin().DoSomething();
var pluginContainer = $("#divSomeContainer");
pluginContainer.MyPlugin();
pluginContainer.MyPlugin().DoSomething();
*/

/***
* Create a new <b><i>SGNModal</b></i> or reuse the old <b><i>SGNModal</b></i> instance for the specific element.
*
* @returns {jQuery.SGNModal}
* @constructor
*/
$.fn.SGNModal = function() {
const _this = this;
const $this = $(_this);

const init = function() {
new SGNModal($this);
};
const init = () => new SGNModal($this);

/***
* Show the currently selected <b><i>SGNModal</b></i>.
*
* @returns {jQuery.SGNModal}
*/
this.show = function() {
const plugin = $(this).data('SGNModal');
const plugin = $(this).data("SGNModal");
if(plugin !== undefined)
plugin.show();

return this;
};

/***
* Hide the currently selected <b><i>SGNModal</b></i>.
*
* @returns {jQuery.SGNModal}
*/
this.hide = function() {
const plugin = $(this).data('SGNModal');
const plugin = $(this).data("SGNModal");
if(plugin !== undefined)
plugin.hide();

return this;
};

/***
* Completely remove the currently selected <b><i>SGNModal</b></i>.
*
* @returns {jQuery.SGNModal}
*/
this.remove = function() {
const plugin = $(this).data('SGNModal');
const plugin = $(this).data("SGNModal");
if(plugin !== undefined)
plugin.remove();

return this;
};

if($this.data('SGNModal') === undefined)
if($this.data("SGNModal") === undefined)
init();

return this;
};

$(document).ready(function() {
const $modals = $('.sgn-modal');
const $modalToggle = $('[data-sgn-toggle="modal"], [data-toggle="modal"]');
const $modalTarget = $('[data-sgn-target="modal"], [data-target="modal"]');
const $modalTargetToggle = $('[data-sgn-modal], [data-modal]');
$(function() {
const $modals = $(".sgn-modal");
const $modalToggle = $("[data-sgn-toggle=\"modal\"], [data-toggle=\"modal\"]");
const $modalTarget = $("[data-sgn-target=\"modal\"], [data-target=\"modal\"]");
const $modalTargetToggle = $("[sgn-modal], [data-sgn-modal], [data-modal]");

if($modals.length > 0) {
$modals.each(function(i, c) {
$modals.each(function() {
const $this = $(this);
$this.SGNModal();
});

$modalTargetToggle.on('click', function(e) {
$modalTargetToggle.on("click", function(e) {
e.preventDefault();
const t = ($(this).attr('data-sgn-modal') !== undefined) ? $(this).attr('data-sgn-modal') : $(this).attr('data-modal');
const t = ($(this).attr("sgn-modal") !== undefined) ? $(this).attr("sgn-modal") : (($(this).attr("data-sgn-modal") !== undefined) ? $(this).attr("data-sgn-modal") : $(this).attr("data-modal"));
const $t = $(t);
$t.SGNModal().show();
});
}
});

return this;
}(window, document, jQuery));

0 comments on commit cb7c6f2

Please sign in to comment.