Skip to content
Permalink
Browse files

Move modal html template to js asset files

  • Loading branch information
mpourismaiel committed Dec 2, 2019
1 parent 786b5aa commit a38d2e0f9a04805f77a1ece604687ebb7b8a1aca
@@ -1,33 +1,38 @@
import $ from './helpers/jq-helpers';
import ModalTemplate from './templates/modal';

const modal = $('.modal');
const dialog = $('.modal .modal-dialog');
$('body').append(ModalTemplate);

function closeDialog() {
$('body').removeClass('modal-open');
modal.removeClass('show');
}
setTimeout(() => {
const modal = $('.modal');
const dialog = $('.modal .modal-dialog');

$('[data-dismiss="modal"]').on('click', closeDialog);

modal.on('click', e => {
if (!dialog[0].contains(e.target)) {
closeDialog()
function closeDialog() {
$('body').removeClass('modal-open');
modal.removeClass('show');
}
});

(window.syna || (window.syna = {})).showModal = function({ title, subtitle, image, content, labels, size = '' }) {
$('body').addClass('modal-open');
modal.addClass('show');
dialog.$('.title').html(title || '');
dialog.$('.subtitle').html(subtitle || '');
dialog.$('.badge-container').html(labels || '');
dialog.$('img')[0].src = image;
if (content) {
dialog.$('.modal-body .content').html(content);
dialog.$('.modal-body .content').removeClass('hidden');
} else {
dialog.$('.modal-body .content').addClass('hidden');
$('[data-dismiss="modal"]').on('click', closeDialog);

modal.on('click', e => {
if (!dialog[0].contains(e.target)) {
closeDialog()
}
});

(window.syna || (window.syna = {})).showModal = function({ title, subtitle, image, content, labels, size = '' }) {
$('body').addClass('modal-open');
modal.addClass('show');
dialog.$('.title').html(title || '');
dialog.$('.subtitle').html(subtitle || '');
dialog.$('.badge-container').html(labels || '');
dialog.$('img')[0].src = image;
if (content) {
dialog.$('.modal-body .content').html(content);
dialog.$('.modal-body .content').removeClass('hidden');
} else {
dialog.$('.modal-body .content').addClass('hidden');
}
dialog.removeClass('md').removeClass('lg').addClass(size);
}
dialog.removeClass('md').removeClass('lg').addClass(size);
}
}, 0);
@@ -0,0 +1,24 @@
const ModalTemplate = `
<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header row mx-0">
<div class="modal-title col px-0">
<h5 class="title text-dark"></h5>
<h6 class="subtitle text-secondary"></h6>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<img src="" alt="" class="img-fluid">
<div class="modal-body p-3">
<div class="badge-container"></div>
<div class="content"></div>
</div>
</div>
</div>
</div>
`;

export default ModalTemplate;

Some generated files are not rendered by default. Learn more.

Large diffs are not rendered by default.

@@ -1 +1 @@
{"Target":"style.min.a3636f61285a533daad479f35324a9957d578abc7b90e33f92123377123a455b.css","MediaType":"text/css","Data":{"Integrity":"sha256-o2NvYShaUz2q1HnzUySplX1Xirx7kOM/khIzdxI6RVs="}}
{"Target":"style.min.28a500f460b90ed35764468c0ab125fe8e3b7ba3b8667bced332c152d988ea63.css","MediaType":"text/css","Data":{"Integrity":"sha256-KKUA9GC5DtNXZEaMCrEl/o47e6O4ZnvO0zLBUtmI6mM="}}
@@ -10,26 +10,6 @@
{{ partial "helpers/fragments-renderer.html" (dict "page_scratch" .Scratch) -}}

<div id="react"></div>
<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header row mx-0">
<div class="modal-title col px-0">
<h5 class="title text-dark"></h5>
<h6 class="subtitle text-secondary"></h6>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<img src="" alt="" class="img-fluid">
<div class="modal-body p-3">
<div class="badge-container"></div>
<div class="content"></div>
</div>
</div>
</div>
</div>

{{ partial "js.html" . }}
</body>

0 comments on commit a38d2e0

Please sign in to comment.
You can’t perform that action at this time.