diff --git a/assets/js/modal.js b/assets/js/modal.js index e08dd1ab..073bd0a0 100644 --- a/assets/js/modal.js +++ b/assets/js/modal.js @@ -1,20 +1,29 @@ -import $ from "./helpers/jq-helpers"; -import ModalTemplate from "./templates/modal"; +import $ from './helpers/jq-helpers'; +import ModalTemplate from './templates/modal'; -$("body").append(ModalTemplate); +$('body').append(ModalTemplate); + +const setImage = (image, element) => { + if (image) { + element.removeClass('hidden'); + element[0].src = image; + } else { + element.addClass('hidden'); + } +}; setTimeout(() => { - const modal = $(".modal"); - const dialog = $(".modal .modal-dialog"); + const modal = $('.modal'); + const dialog = $('.modal .modal-dialog'); function closeDialog() { - $("body").removeClass("modal-open"); - modal.removeClass("show"); + $('body').removeClass('modal-open'); + modal.removeClass('show'); } - $('[data-dismiss="modal"]').on("click", closeDialog); + $('[data-dismiss="modal"]').on('click', closeDialog); - modal.on("click", e => { + modal.on('click', (e) => { if (!dialog[0].contains(e.target)) { closeDialog(); } @@ -23,46 +32,49 @@ setTimeout(() => { (window.syna || (window.syna = {})).showModal = function({ title, subtitle, + background, image, icon, content, labels, - size = "" + size = '', }) { - $("body").addClass("modal-open"); - modal.addClass("show"); - dialog.$(".title").html(title || ""); - dialog.$(".subtitle").html(subtitle || ""); - if (image) { - dialog.$("img").removeClass("hidden"); - dialog.$("img")[0].src = image; - } else { - dialog.$("img").addClass("hidden"); + $('body').addClass('modal-open'); + modal.addClass('show'); + dialog.$('.title').html(title || ''); + dialog.$('.subtitle').html(subtitle || ''); + + setImage(image, dialog.$('.modal-asset-image')); + setImage(background, dialog.$('.modal-background-image')); + + if (!background) { + dialog.$('.modal-asset-image').addClass('hidden'); + setImage(image, dialog.$('.modal-background-image')); } if (labels) { - dialog.$(".badge-container").removeClass("hidden"); - dialog.$(".badge-container").html(labels || ""); + dialog.$('.badge-container').removeClass('hidden'); + dialog.$('.badge-container').html(labels || ''); } else { - dialog.$(".badge-container").addClass("hidden"); + dialog.$('.badge-container').addClass('hidden'); } if (icon) { - dialog.$(".icon-container").removeClass("hidden"); - dialog.$(".icon-container").html(icon.replace(/fa-inverse/g, "")); + dialog.$('.icon-container').removeClass('hidden'); + dialog.$('.icon-container').html(icon.replace(/fa-inverse/g, '')); } else { - dialog.$(".icon-container").addClass("hidden"); + dialog.$('.icon-container').addClass('hidden'); } if (content) { - dialog.$(".modal-body .content").html(content); - dialog.$(".modal-body .content").removeClass("hidden"); + dialog.$('.modal-body .content').html(content); + dialog.$('.modal-body .content').removeClass('hidden'); } else { - dialog.$(".modal-body .content").addClass("hidden"); + dialog.$('.modal-body .content').addClass('hidden'); } dialog - .removeClass("md") - .removeClass("lg") + .removeClass('md') + .removeClass('lg') .addClass(size); }; }, 0); diff --git a/assets/js/portfolio.js b/assets/js/portfolio.js index 1067a87c..472dd986 100644 --- a/assets/js/portfolio.js +++ b/assets/js/portfolio.js @@ -8,6 +8,7 @@ portfolioItem.on("click", function() { title: (this.querySelector(".title") || _default).innerHTML, subtitle: (this.querySelector(".subtitle") || _default).innerHTML, content: (this.querySelector(".content") || _default).innerHTML, + background: (this.querySelector(".portfolio-background") || _default).src, image: (this.querySelector(".portfolio-image") || _default).src, icon: (this.querySelector(".portfolio-icon") || _default).innerHTML, labels: (this.querySelector(".badge-container") || _default).innerHTML, diff --git a/assets/js/templates/modal.js b/assets/js/templates/modal.js index 1ebfa323..42615f07 100644 --- a/assets/js/templates/modal.js +++ b/assets/js/templates/modal.js @@ -11,8 +11,11 @@ const ModalTemplate = ` - -
+