From e9cf8edf712fccebc0abd22a7b9ddc0e3974e5b0 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Mon, 7 Dec 2020 21:12:28 +0100 Subject: [PATCH] WIP #4064 @7.75 --- .gitignore | 3 + .../mu-plugins/cube/src/CPT/Realisation.php | 50 ++++++++++ web/app/mu-plugins/cube/src/Init.php | 1 + web/app/mu-plugins/typerocket/config/app.php | 4 +- web/app/themes/Usines/package.json | 1 + .../Usines/resources/assets/scripts/app.js | 1 + .../Usines/resources/assets/scripts/menu.js | 34 +++++++ .../styles/components/navigation-mobile.styl | 99 +++++++++++++++++++ .../resources/views/partials/header.blade.php | 30 ++++++ web/app/themes/Usines/yarn.lock | 9 +- 10 files changed, 229 insertions(+), 3 deletions(-) create mode 100644 web/app/mu-plugins/cube/src/CPT/Realisation.php create mode 100644 web/app/themes/Usines/resources/assets/scripts/menu.js create mode 100644 web/app/themes/Usines/resources/assets/styles/components/navigation-mobile.styl diff --git a/.gitignore b/.gitignore index 6086587..6639ba7 100644 --- a/.gitignore +++ b/.gitignore @@ -15,6 +15,9 @@ web/app/upgrade web/app/uploads/* !web/app/uploads/.gitkeep +# Translations +web/app/languages + # WordPress web/wp web/.htaccess diff --git a/web/app/mu-plugins/cube/src/CPT/Realisation.php b/web/app/mu-plugins/cube/src/CPT/Realisation.php new file mode 100644 index 0000000..a1ff3b0 --- /dev/null +++ b/web/app/mu-plugins/cube/src/CPT/Realisation.php @@ -0,0 +1,50 @@ +setId('realisation') // Set manually because accent in name isn't handled properly + ->setSlug('realisations') + ->setIcon('store') + ->setArgument('supports', ['title']) // No editor for this post type + ->setTitlePlaceholder(__('Titre de la réalisation', 'usines')) + ->setTitleForm(function() { + $form = tr_form(); + + echo $form->image('Thumbnail') + ->setLabel(__('Vignette', 'usines')) + ->setHelp(__("Utilisé sur la page d'index", 'usines')); + + echo $form->image('Hero Image') + ->setLabel(__("Image d'en-tête", 'usines')); + + echo $form->textarea('Description'); + + echo $form->repeater('Photos')->setFields([ + $form->image('Photo'), + ]); + + echo $form->textarea('Testimonial') + ->setLabel(__('Témoignage', 'usines')); + + echo $form->text('Testimonial Author') + ->setLabel(__('Auteur du témoignage', 'usines')); + }); + + // Add Realisation Category taxonomy + tr_taxonomy('Catégorie') + ->setId('realisation_category') + ->setHierarchical(true) + ->apply($realisation); + + }); + } + +} diff --git a/web/app/mu-plugins/cube/src/Init.php b/web/app/mu-plugins/cube/src/Init.php index fed9d24..f54b7db 100644 --- a/web/app/mu-plugins/cube/src/Init.php +++ b/web/app/mu-plugins/cube/src/Init.php @@ -15,6 +15,7 @@ final class Init { // Marked as final because this class should never be extende return [ Common\Setup::class, Customizer\Setup::class, + CPT\Realisation::class, Elementor\Setup::class, ]; } diff --git a/web/app/mu-plugins/typerocket/config/app.php b/web/app/mu-plugins/typerocket/config/app.php index 3603f95..c59815f 100644 --- a/web/app/mu-plugins/typerocket/config/app.php +++ b/web/app/mu-plugins/typerocket/config/app.php @@ -9,9 +9,9 @@ return [ | */ 'extensions' => [ - '\TypeRocket\Extensions\TypeRocketUI', '\TypeRocket\Extensions\PostMessages', - '\TypeRocket\Extensions\PageBuilder', + //'\TypeRocket\Extensions\TypeRocketUI', + //'\TypeRocket\Extensions\PageBuilder', ], /* diff --git a/web/app/themes/Usines/package.json b/web/app/themes/Usines/package.json index fba0fd7..8207959 100644 --- a/web/app/themes/Usines/package.json +++ b/web/app/themes/Usines/package.json @@ -46,6 +46,7 @@ "purgecss-with-wordpress": "^2.3.0", "rimraf": "^3.0.2", "rupture": "^0.7.1", + "sidr": "^2.2.1", "stylelint": "^13.6.1", "stylelint-config-standard": "^20.0.0", "stylus": "github:acidjazz/stylus#dev", diff --git a/web/app/themes/Usines/resources/assets/scripts/app.js b/web/app/themes/Usines/resources/assets/scripts/app.js index 3616f1c..0952d8a 100644 --- a/web/app/themes/Usines/resources/assets/scripts/app.js +++ b/web/app/themes/Usines/resources/assets/scripts/app.js @@ -2,6 +2,7 @@ * External Dependencies */ import 'jquery'; +import './menu'; $(document).ready(() => { // console.log('Hello world'); diff --git a/web/app/themes/Usines/resources/assets/scripts/menu.js b/web/app/themes/Usines/resources/assets/scripts/menu.js new file mode 100644 index 0000000..67bdf69 --- /dev/null +++ b/web/app/themes/Usines/resources/assets/scripts/menu.js @@ -0,0 +1,34 @@ +import sidr from 'sidr/dist/jquery.sidr'; // eslint-disable-line + +// Mobile menu setup +let menuID = 'mobile-menu'; +let menuOpenerID = `${menuID}-opener`; + +$(document).ready(() => { + + // Add menu opener icon + $(`
`).appendTo('body'); + + // Add menu overlay element + $(`
`).appendTo('body'); + + // Configure Sidr + $(`#${menuOpenerID}`).sidr({ + name: menuID, + side: 'left', + speed: 500, // Animation speed + displace: false, // Push body content when opening? + renaming: false, // Rename existing classes / IDs? + }); + + // Auto-close mobile menu when links are clicked or we click on the overlay + $(`#${menuID}-overlay, #${menuID} a`).on('click', function (event) { + $.sidr('close', menuID); // close the menu + + // Don't follow empty links (eg. close button) + if ($(this).attr('href') === '#') { + event.preventDefault(); + } + }); + +}); diff --git a/web/app/themes/Usines/resources/assets/styles/components/navigation-mobile.styl b/web/app/themes/Usines/resources/assets/styles/components/navigation-mobile.styl new file mode 100644 index 0000000..86bbcc1 --- /dev/null +++ b/web/app/themes/Usines/resources/assets/styles/components/navigation-mobile.styl @@ -0,0 +1,99 @@ +@import '~sidr/dist/stylesheets/jquery.sidr.bare.css' + +// Actual menu built by Sidr plugin +#mobile-menu + background-color: #fff + padding: 80px 30px 30px + width: 320px + z-index: 1000 + + +above($breakpoint-menu) + display: none + + // The default Sidr CSS has fixed offsets for hiding the menu so we need to fix that... + &.right + right: -100% + &.left + left: -100% + + .menu-item + padding: 0.5em 0 + border-bottom: 1px solid #D4D4D4 + + // Content overlay when menu is open + &-overlay + position: fixed + top: 0 + right: 0 + bottom: 0 + left: 0 + background: rgba(#000, 0.25) + z-index: 20 + pointer-events: none + opacity: 0 + transition: opacity 0.2s ease-out + + // Make visible once menu is opened + .sidr-open & + opacity: 1 + pointer-events: auto + + + //=== Burger menu icon + animation + &-opener + position: fixed + width: 30px + height: @width + top: @width + left: @width + padding: 5px 0 // To match size of close X inside menu + display: flex + flex-direction: column + justify-content: space-between + z-index: 2000 // Needs to sit above Sidr + pointer-events: auto // MMenu disables pointer events outside the menu when it's open + transform: translateZ(0) + transition-property: opacity + transition-duration: 0.3s + + // This icon can't be contained inside the header because it needs to sit at the + // highest stacking level so it can animate as menu opens and closes. As a result, when + // the header auto-hides, it doesn't take the icon with it so we need to handle it differently here + .header-hidden & + opacity: 0 + pointer-events: none + + // Set transition delay and duration to zero so it disappears immediately + transition-duration: 0s + transition-delay: 0s + + +above($breakpoint-menu) + display: none + + &:hover + @apply text-red !important + + &:after, &:before, div // 3 lines in burger icon + content: '' + width: 100% + background-color: currentColor + display: block + height: 2px + transition: all 0.3s ease-in-out + + &:after // Shorter bottom line + width: 50% + + // Morph to a cross when menu opens + .sidr-open & + //color: #fff // Controls colour of lines + + &:before // Top line + transform: translateY(9px) rotate(135deg) + + &:after // Bottom line + transform: translateY(-9px) rotate(-135deg) + width: 100% + + div // Middle line + transform: scale(0) diff --git a/web/app/themes/Usines/resources/views/partials/header.blade.php b/web/app/themes/Usines/resources/views/partials/header.blade.php index bf64504..b6db07b 100644 --- a/web/app/themes/Usines/resources/views/partials/header.blade.php +++ b/web/app/themes/Usines/resources/views/partials/header.blade.php @@ -49,4 +49,34 @@ + + {{-- Mobile menu --}} + + diff --git a/web/app/themes/Usines/yarn.lock b/web/app/themes/Usines/yarn.lock index b8f2609..a7546a8 100644 --- a/web/app/themes/Usines/yarn.lock +++ b/web/app/themes/Usines/yarn.lock @@ -5989,7 +5989,7 @@ jest-worker@^25.1.0: merge-stream "^2.0.0" supports-color "^7.0.0" -jquery@^3.5.1: +jquery@>=1.4.3, jquery@^3.5.1: version "3.5.1" resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.5.1.tgz#d7b4d08e1bfdb86ad2f1a3d039ea17304717abb5" integrity sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg== @@ -8909,6 +8909,13 @@ shellwords@^0.1.1: resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b" integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww== +sidr@^2.2.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/sidr/-/sidr-2.2.1.tgz#2291376575d2559f4b0c563f7d40e224dd3ecc70" + integrity sha1-IpE3ZXXSVZ9LDFY/fUDiJN0+zHA= + dependencies: + jquery ">=1.4.3" + signal-exit@^3.0.0, signal-exit@^3.0.2: version "3.0.3" resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c" -- 2.39.5