Merge pull request #802 from mpourismaiel/feat/portfolio/add-hover-bg

Add background to portfolio overlay
okkur · Jul 23, 2020 · d5d96ac · d5d96ac
2 parents 6f05bac + be246b6
commit d5d96ac
Show file tree

Hide file tree

Showing 14 changed files with 114 additions and 55 deletions.
diff --git 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
@@ -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
@@ -11,8 +11,11 @@ const ModalTemplate = `
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
-      <img src="" alt="" class="img-fluid">
-      <div class="icon-container pt-4"></div>
+      <div class="modal-background">
+        <img src="" alt="" class="img-fluid modal-background-image">
+        <img src="" alt="" class="img-fluid modal-asset-image">
+        <div class="modal-asset-icon icon-container pt-4"></div>
+      </div>
       <div class="modal-body p-3">
         <div class="badge-container"></div>
         <div class="content"></div>

diff --git a/assets/scripts/syna-graph.js b/assets/scripts/syna-graph.js
diff --git a/assets/scripts/syna-main.js b/assets/scripts/syna-main.js
diff --git a/assets/scripts/syna-portfolio.js b/assets/scripts/syna-portfolio.js
@@ -118,7 +118,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _jqHelpers = __webpack_require__(/*! ./helpers/jq-helpers */ \"./assets/js/helpers/jq-helpers.js\");\n\nvar _jqHelpers2 = _interopRequireDefault(_jqHelpers);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar portfolioItem = (0, _jqHelpers2.default)(\".portfolio-item.has-modal\");\nvar _default = { innerHTML: \"\" };\n\nportfolioItem.on(\"click\", function () {\n  window.syna.showModal({\n    title: (this.querySelector(\".title\") || _default).innerHTML,\n    subtitle: (this.querySelector(\".subtitle\") || _default).innerHTML,\n    content: (this.querySelector(\".content\") || _default).innerHTML,\n    image: (this.querySelector(\".portfolio-image\") || _default).src,\n    icon: (this.querySelector(\".portfolio-icon\") || _default).innerHTML,\n    labels: (this.querySelector(\".badge-container\") || _default).innerHTML,\n    size: \"md\"\n  });\n});\n\n//# sourceURL=webpack:///./assets/js/portfolio.js?");
+eval("\n\nvar _jqHelpers = __webpack_require__(/*! ./helpers/jq-helpers */ \"./assets/js/helpers/jq-helpers.js\");\n\nvar _jqHelpers2 = _interopRequireDefault(_jqHelpers);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar portfolioItem = (0, _jqHelpers2.default)(\".portfolio-item.has-modal\");\nvar _default = { innerHTML: \"\" };\n\nportfolioItem.on(\"click\", function () {\n  window.syna.showModal({\n    title: (this.querySelector(\".title\") || _default).innerHTML,\n    subtitle: (this.querySelector(\".subtitle\") || _default).innerHTML,\n    content: (this.querySelector(\".content\") || _default).innerHTML,\n    background: (this.querySelector(\".portfolio-background\") || _default).src,\n    image: (this.querySelector(\".portfolio-image\") || _default).src,\n    icon: (this.querySelector(\".portfolio-icon\") || _default).innerHTML,\n    labels: (this.querySelector(\".badge-container\") || _default).innerHTML,\n    size: \"md\"\n  });\n});\n\n//# sourceURL=webpack:///./assets/js/portfolio.js?");
 
 /***/ })
 

diff --git a/assets/styles/_modal.scss b/assets/styles/_modal.scss
@@ -35,11 +35,23 @@ body.modal-open {
     }
   }
 
-  .icon-container {
-    font-size: 64px;
+  .modal-background {
+    position: relative;
+    min-height: 180px;
 
-    .fa-stack-1x, .fa-stack-2x {
-      position: relative;
+    .modal-asset-image, .modal-asset-icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .icon-container {
+      font-size: 64px;
+
+      .fa-stack-1x, .fa-stack-2x {
+        position: relative;
+      }
     }
   }
 

diff --git a/assets/styles/_portfolio.scss b/assets/styles/_portfolio.scss
@@ -4,6 +4,18 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
+
+  &.has-background {
+    .portfolio {
+      &-image, &-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
 
   .badge-container {
     .badge {

diff --git a/exampleSite/content/fragments/portfolio/docs.md b/exampleSite/content/fragments/portfolio/docs.md
@@ -31,6 +31,12 @@ URL of the portfolio item. If set, then clicking the portfolio item would open t
 
 **NOTE:** This variable may be deprecated in the future and be renamed to `url`.
 
+#### background
+*type: [asset object]({{< ref "global-variables" >}}#asset)*  
+*size: 500x380*
+
+The background image that is shown on the portfolio item.
+
 #### asset
 *type: [asset object]({{< ref "global-variables" >}}#asset)*  
 *size: 500x380*

diff --git a/exampleSite/content/fragments/portfolio/portfolio/item3.md b/exampleSite/content/fragments/portfolio/portfolio/item3.md
@@ -3,6 +3,9 @@ weight = 30
 title = "Third Title"
 subtitle = "Lorem ipsum dolor sit amet, consectetur adipiscing"
 
+[background]
+  image = "cat-1.jpeg"
+
 [asset]
   icon = "fab fa-github"
 +++

diff --git a/exampleSite/content/fragments/portfolio/portfolio/item5.md b/exampleSite/content/fragments/portfolio/portfolio/item5.md
@@ -2,7 +2,7 @@
 weight = 50
 
 [asset]
-  image = "dog-2.jpeg"
+  icon = "fab fa-github"
 +++
 
 Ante in nibh mauris cursus mattis molestie a iaculis. Nisi porta lorem mollis aliquam. Eu consequat ac felis donec et odio pellentesque diam volutpat. Arcu dui vivamus arcu felis. Senectus et netus et malesuada fames ac turpis egestas sed. Orci eu lobortis elementum nibh.
diff --git a/...ite/resources/_gen/assets/scss/styles/index.scss_02bf14281ac065540fcc7ecc15ca70a4.content b/...ite/resources/_gen/assets/scss/styles/index.scss_02bf14281ac065540fcc7ecc15ca70a4.content
diff --git a/...leSite/resources/_gen/assets/scss/styles/index.scss_02bf14281ac065540fcc7ecc15ca70a4.json b/...leSite/resources/_gen/assets/scss/styles/index.scss_02bf14281ac065540fcc7ecc15ca70a4.json
@@ -1 +1 @@
-{"Target":"style.min.a709cd984b68621cce80fe80a8a0124d15470752b32021e1f311e042913a17b6.css","MediaType":"text/css","Data":{"Integrity":"sha256-pwnNmEtoYhzOgP6AqKASTRVHB1KzICHh8xHgQpE6F7Y="}}
+{"Target":"style.min.4c0c079b243e1ef5a4a1f8e1c73d678462ce0d6b5dabcf59243e7b6a96117a66.css","MediaType":"text/css","Data":{"Integrity":"sha256-TAwHmyQ+HvWkofjhxz1nhGLODWtdq89ZJD57apYRemY="}}
diff --git a/layouts/partials/fragments/portfolio.html b/layouts/partials/fragments/portfolio.html
@@ -15,6 +15,11 @@
           <div
             class="border rounded position-relative portfolio-item overflow-hidden 
               {{- if not .Params.item_url }} has-modal {{- end -}}
+              {{- with .Params.background -}}
+                {{- if .image -}}
+                  {{- print " has-background" -}}
+                {{- end -}}
+              {{- end -}}
             "
             {{- if $self.Params.height -}}
               {{- safeHTMLAttr (printf "style='min-height:%s; height:%s'" $self.Params.height $self.Params.height) -}}
@@ -23,6 +28,11 @@
               <a href="{{ .Params.item_url | relLangURL }}">
             {{- end }}
                 {{- $this := . -}}
+                {{- with .Params.background -}}
+                  {{- if .image -}}
+                    <img src="{{ partial "helpers/image.html" (dict "root" $self "this" $this "asset" . "resize" "500x380") }}" class="portfolio-background img-fluid" alt="{{ .text }}">
+                  {{- end -}}
+                {{- end -}}
                 {{- with .Params.asset -}}
                   {{- if .image -}}
                     <img src="{{ partial "helpers/image.html" (dict "root" $self "this" $this "asset" . "resize" "500x380") }}" class="portfolio-image img-fluid" alt="{{ .text }}">