modal aside to offcanvas migration

Oksydan · Oct 8, 2023 · 800ea81 · 800ea81
1 parent 7bdde05
commit 800ea81
Show file tree

Hide file tree

Showing 10 changed files with 77 additions and 91 deletions.
diff --git a/_dev/css/dynamic/modal/_override.scss b/_dev/css/dynamic/modal/_override.scss
@@ -1,60 +1,3 @@
 .modal-content {
   background-clip: border-box;
 }
-
-.modal-fullscreen {
-  /* stylelint-disable */
-  padding: 0 !important; // override inline padding-right added from js
-  /* stylelint-enable */
-  .modal-dialog {
-    width: 100vw;
-    max-width: none;
-    height: 100%;
-    margin: 0;
-  }
-
-  .modal-content {
-    height: 100%;
-    border: 0;
-    @include border-radius(0);
-  }
-
-  .modal-body {
-    overflow-y: auto;
-  }
-}
-
-.modal .modal-dialog-aside {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  transition: transform 0.2s;
-  transform: translate(0);
-  @include media-breakpoint-up(sm) {
-    max-width: 320px;
-  }
-}
-
-.modal .modal-dialog-aside .modal-content {
-  height: inherit;
-  border: 0;
-  border-radius: 0;
-}
-
-.modal .modal-dialog-aside .modal-content .modal-body {
-  overflow-y: auto;
-}
-
-.modal.fixed-right .modal-dialog-aside {
-  margin-left: auto;
-  transform: translateX(100%);
-}
-
-.modal.fixed-left .modal-dialog-aside {
-  margin-right: auto;
-  transform: translateX(-100%);
-}
-
-.modal.show .modal-dialog-aside {
-  transform: translateX(0);
-}
diff --git a/_dev/css/dynamic/offcanvas/_index.scss b/_dev/css/dynamic/offcanvas/_index.scss
diff --git a/_dev/js/theme/components/dynamic-bootstrap-components.js b/_dev/js/theme/components/dynamic-bootstrap-components.js
@@ -15,6 +15,17 @@ $(() => {
     ],
   });
 
+  const importOffcanvas = new DynamicImportHandler({
+    jqueryPluginCover: 'offcanvas',
+    DOMEvents: 'click',
+    DOMEventsSelector: '[data-bs-toggle="offcanvas"]',
+    DOMEventsPreventDefault: true,
+    files: () => [
+      import('bootstrap/js/src/offcanvas'),
+      import('@css/dynamic/offcanvas/_index.scss'),
+    ],
+  });
+
   const importDropdown = new DynamicImportHandler({
     jqueryPluginCover: 'dropdown',
     DOMEvents: 'click',

diff --git a/templates/_partials/header.tpl b/templates/_partials/header.tpl
@@ -54,7 +54,8 @@
                                     class="header-top__link"
                                     rel="nofollow"
                                     href="#"
-                                    data-bs-toggle="modal"
+                                    role="button"
+                                    data-bs-toggle="offcanvas"
                                     data-bs-target="#mobile_top_menu_wrapper"
                             >
                                 <div class="header-top__icon-container">

diff --git a/templates/_partials/modal-filters.tpl b/templates/_partials/modal-filters.tpl
@@ -1,19 +1,18 @@
-{extends file='components/modal.tpl'}
+{extends file='components/offcanvas.tpl'}
 
-{block name='modal_extra_attribues'}id="mobile_filters" data-modal-hide-mobile{/block}
-{block name='modal_extra_class'}fixed-right{/block}
-{block name='modal_dialog_extra_class'}modal-dialog-aside{/block}
-{block name='modal_title'}{l s='Filters' d='Shop.Theme.Catalog'}{/block}
-{block name='modal_body_extra_class'}p-0{/block}
-{block name='modal_body'}
+{block name='offcanvas_extra_attribues'}id="mobile_filters"{/block}
+{block name='offcanvas_extra_class'}offcanvas-end{/block}
+{block name='offcanvas_title'}{l s='Filters' d='Shop.Theme.Catalog'}{/block}
+{block name='offcanvas_body'}
   <div id="_mobile_filters"></div>
-{/block}
-
-{block name='modal_footer'}
-  <button type="button" class="btn d-block text-center w-100 btn-primary" data-dismiss="modal" aria-label="Close">
-    {l s='Show results' d='Shop.Istheme'}
+  <button
+    type="button"
+    class="btn d-block text-center w-100 btn-primary"
+    data-bs-dismiss="offcanvas"
+    aria-label="Close"
+  >
+      {l s='Show results' d='Shop.Istheme'}
   </button>
 {/block}
 
 
-
diff --git a/templates/_partials/modal-menu.tpl b/templates/_partials/modal-menu.tpl
@@ -1,16 +1,12 @@
-{extends file='components/modal.tpl'}
+{extends file='components/offcanvas.tpl'}
 
-{block name='modal_extra_attribues'}id="mobile_top_menu_wrapper" data-modal-hide-mobile{/block}
-{block name='modal_extra_class'}fixed-left{/block}
-{block name='modal_dialog_extra_class'}modal-dialog-aside{/block}
-{block name='modal_title'}{l s='Menu' d='Shop.Theme.Catalog'}{/block}
-{block name='modal_body'}
+{block name='offcanvas_extra_attribues'}id="mobile_top_menu_wrapper"{/block}
+{block name='offcanvas_title'}{l s='Menu' d='Shop.Theme.Catalog'}{/block}
+{block name='offcanvas_body'}
   <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
   <div class="js-top-menu-bottom">
     <div id="_mobile_currency_selector" class="mb-2"></div>
     <div id="_mobile_language_selector" class="mb-2"></div>
     <div id="_mobile_contact_link" class="mb-2"></div>
   </div>
-</div>
 {/block}
-
diff --git a/templates/_partials/modal-search.tpl b/templates/_partials/modal-search.tpl
@@ -1,11 +1,10 @@
-{extends file='components/modal.tpl'}
+{extends file='components/offcanvas.tpl'}
 
-{block name='modal_extra_attribues'}id="saerchModal" data-modal-hide-mobile{/block}
-{block name='modal_extra_class'}modal-fullscreen search-modal{/block}
-{block name='modal_header'}{/block}
-{block name='modal_body'}
-  <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
-    <span aria-hidden="true">&times;</span>
+{block name='offcanvas_extra_attribues'}id="search_dialog"{/block}
+{block name='offcanvas_extra_class'}search-modal offcanvas-start{/block}
+{block name='offcanvas_header'}{/block}
+{block name='offcanvas_body'}
+  <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close">
   </button>
   <div id="_mobile_search_from">
   </div>

diff --git a/templates/catalog/_partials/products-top.tpl b/templates/catalog/_partials/products-top.tpl
@@ -37,10 +37,10 @@
 
   <div class="col-sm-auto col-12 mt-2 d-md-none ms-auto">
     {if !empty($listing.rendered_facets)}
-      <button data-bs-target="#mobile_filters" data-bs-toggle="modal" class="btn btn-secondary d-sm-inline-block d-none">
+      <button data-bs-target="#mobile_filters" data-bs-toggle="offcanvas" class="btn btn-secondary d-sm-inline-block d-none">
         {l s='Filter' d='Shop.Theme.Actions'}
       </button>
-      <button data-bs-target="#mobile_filters" data-bs-toggle="modal" class="btn btn-secondary d-block text-center w-100 d-sm-none">
+      <button data-bs-target="#mobile_filters" data-bs-toggle="offcanvas" class="btn btn-secondary d-block text-center w-100 d-sm-none">
         {l s='Filter' d='Shop.Theme.Actions'}
       </button>
     {/if}

diff --git a/templates/components/modal.tpl b/templates/components/modal.tpl
@@ -1,7 +1,12 @@
 
 {block name='modal'}
 
-<div class="modal fade {block name='modal_extra_class'}{/block}" {block name='modal_extra_attribues'}{/block} tabindex="-1" aria-hidden="true">
+<div
+  class="modal fade {block name='modal_extra_class'}{/block}"
+  {block name='modal_extra_attribues'}{/block}
+  tabindex="-1"
+  aria-hidden="true"
+>
 
   <div class="modal-dialog {block name='modal_dialog_extra_class'}{/block}">
     {block name='modal_content'}
@@ -13,8 +18,12 @@
                 <h5 class="modal-title">{$smarty.block.child}</h5>
               {/block}
               {block name='modal_close'}
-                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
-                  <span aria-hidden="true">&times;</span>
+                <button
+                  type="button"
+                  class="btn-close"
+                  data-bs-dismiss="modal"
+                  aria-label="Close"
+                >
                 </button>
               {/block}
             </div>

diff --git a/templates/components/offcanvas.tpl b/templates/components/offcanvas.tpl
@@ -0,0 +1,28 @@
+
+{block name='offcanvas'}
+  <div
+    class="offcanvas {block name='offcanvas_extra_class'}offcanvas-start{/block}"
+    tabindex="-1"
+    {block name='offcanvas_extra_attribues'}{/block}
+  >
+    {block name='offcanvas_header'}
+      <div class="offcanvas-header {block name='offcanvas_header_extra_class'}{/block}" >
+        {block name='offcanvas_title' hide}
+          <h5 class="offcanvas-title">{$smarty.block.child}</h5>
+        {/block}
+        <button
+          type="button"
+          class="btn-close"
+          data-bs-dismiss="offcanvas"
+          aria-label="Close"
+        >
+        </button>
+      </div>
+    {/block}
+    {block name='offcanvas_body' hide}
+      <div class="offcanvas-body {block name='offcanvas_body_extra_class'}{/block}">
+        {$smarty.block.child}
+      </div>
+    {/block}
+  </div>
+{/block}