]> _ Git - ccv-wordpress.git/commitdiff
WIP #3053
authorStephen Cameron <stephen@cubedesigners.com>
Thu, 17 Oct 2019 17:16:42 +0000 (19:16 +0200)
committerStephen Cameron <stephen@cubedesigners.com>
Thu, 17 Oct 2019 17:16:42 +0000 (19:16 +0200)
wp-content/themes/CCV/app/Composers/Header.php
wp-content/themes/CCV/app/admin.php
wp-content/themes/CCV/package.json
wp-content/themes/CCV/resources/assets/images/menu.svg [new file with mode: 0644]
wp-content/themes/CCV/resources/assets/scripts/app.js
wp-content/themes/CCV/resources/assets/scripts/menu.js [new file with mode: 0644]
wp-content/themes/CCV/resources/assets/styles/app.styl
wp-content/themes/CCV/resources/assets/styles/components/header.styl
wp-content/themes/CCV/resources/views/partials/content-single.blade.php
wp-content/themes/CCV/resources/views/partials/header.blade.php
wp-content/themes/CCV/yarn.lock

index fb03728c6ad1785e44c711fa43c9de4a73b80d49..73c999cbc3b4273d25ce8c00652edcd42d751090 100644 (file)
@@ -12,6 +12,14 @@ class Header extends Composer
 
     public function with() {
 
+        // Fetch languages from Polylang
+        $languages = [];
+
+        if (function_exists('pll_the_languages')) {
+            $languages = pll_the_languages(['raw' => true]);
+        }
+
+
         // To allow for better management of the URLs and titles when translating,
         // header buttons are stored in a separate menu location. Due to the design,
         // there should only be a maximum of 2 links so these are extracted here.
@@ -19,6 +27,6 @@ class Header extends Composer
         $button_1 = $cta_nav[0] ?? false;
         $button_2 = $cta_nav[1] ?? false;
 
-        return compact('button_1', 'button_2');
+        return compact('languages', 'button_1', 'button_2');
     }
 }
index cb694ab95a77467b30fafcc052f00d69b3fc125e..44f5d6b7f2346e4ffd2871f284e0eeaf761bc56f 100644 (file)
@@ -24,3 +24,29 @@ add_action('customize_register', function (\WP_Customize_Manager $wp_customize)
 add_action('customize_preview_init', function () {
     wp_enqueue_script('sage/customizer.js', asset('scripts/customizer.js'), ['customize-preview'], null, true);
 });
+
+
+/**
+ * Polylang - copy content and title when creating translations of posts / pages
+ * Ref: https://junaidbhura.com/make-polylang-wordpress-plugin-copy-the-content-from-the-original-post/
+ */
+add_filter('default_content', function($content) {
+    // Polylang sets the 'from_post' parameter
+    if ( isset( $_GET['from_post'] ) ) {
+        $my_post = get_post( $_GET['from_post'] );
+        if ( $my_post )
+            return $my_post->post_content;
+    }
+
+    return $content;
+});
+
+add_filter('default_title', function($title) {
+    if ( isset( $_GET['from_post'] ) ) {
+        $my_post = get_post( $_GET['from_post'] );
+        if ( $my_post )
+            return $my_post->post_title;
+    }
+
+    return $title;
+});
index 88767d754cadc7ec8ec5ae5ab86056338a3595c1..8db1f7e852fdc535977b8b6a322b919d41763c74 100644 (file)
@@ -27,6 +27,7 @@
     "laravel-mix-purgecss": "^4.1.0",
     "lost": "^8.3.1",
     "mix-tailwindcss": "^1.0.2",
+    "mmenu-light": "^2.3.1",
     "npm-run-all": "^4.1",
     "purgecss-with-wordpress": "knowler/purgecss-with-wordpress#more-wp-generated-classes",
     "rimraf": "^2.6",
diff --git a/wp-content/themes/CCV/resources/assets/images/menu.svg b/wp-content/themes/CCV/resources/assets/images/menu.svg
new file mode 100644 (file)
index 0000000..fea6efd
--- /dev/null
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="20" viewBox="0 0 30 20" xml:space="preserve">
+  <path d="M20 20H.7c-.4 0-.7-.3-.7-.8 0-.4.3-.8.7-.8H20c.4 0 .7.3.7.8.1.5-.3.8-.7.8zM29.3 10.8H.7c-.4 0-.7-.4-.7-.8s.3-.8.7-.8h28.5c.4 0 .7.3.7.8s-.2.8-.6.8zM29.3 1.5H.7c-.4 0-.7-.3-.7-.7S.3 0 .7 0h28.5c.5 0 .8.3.8.8s-.3.7-.7.7z"/>
+</svg>
index 278312f183603c1a41341da33c7b26fecf82f5b9..a28df340e06710e34f63d8faadae3bf6d4b69d04 100644 (file)
@@ -2,6 +2,7 @@
  * External Dependencies
  */
 import { router } from 'js-dom-router';
+import './menu';
 
 /**
  * DOM-based routing
diff --git a/wp-content/themes/CCV/resources/assets/scripts/menu.js b/wp-content/themes/CCV/resources/assets/scripts/menu.js
new file mode 100644 (file)
index 0000000..ea0eddd
--- /dev/null
@@ -0,0 +1,50 @@
+//=== MMenu Setup
+import MmenuLight from 'mmenu-light/bin/js/mmlight';
+import offcanvas from 'mmenu-light/bin/js/mmlight.offcanvas';
+
+MmenuLight.prototype.offcanvas = offcanvas;
+
+const menuID = 'mobile-menu';
+
+document.addEventListener(
+  'DOMContentLoaded', () => {
+
+    buildMobileMenu();
+
+    let nav = document.getElementById(menuID);
+    window.mmenu = new MmenuLight(nav, { title: '' });
+    window.menu_breakpoint = 1349; // Note: this should match the menu CSS breakpoint in setup.styl!
+
+    mmenu.enable(`(max-width: ${menu_breakpoint}px)`);
+    mmenu.offcanvas({
+      position: 'right' // Todo: switch for Arabic, based on class or text direction?
+    });
+
+    document.querySelector(`a[href="#menu"]`)
+      .addEventListener('click', (event) => {
+          mmenu.open();
+          event.preventDefault();
+          event.stopPropagation();
+
+          if (null === document.querySelector('.mm--close')) {
+
+            nav.innerHTML = '<a class="mm--close"></a>' + nav.innerHTML;
+
+            document.querySelector('.mm--close').addEventListener('click', (event) => {
+              mmenu.close();
+            });
+
+          }
+      });
+});
+
+function buildMobileMenu() {
+  const menu = document.createElement('div');
+  const menuItems = document.querySelector('.main-menu');
+
+  // Todo: copy other items into mobile menu (secondary nav buttons, language switcher etc)
+  menu.appendChild(menuItems.cloneNode(true));
+
+  menu.setAttribute('id', menuID);
+  document.body.appendChild(menu);
+}
index 49781f723a42455055cfcdceadb962fe092e3cdf..880820811bd5d48536537c13a95eb95ab875d0dc 100644 (file)
@@ -11,6 +11,9 @@
 @import 'common/spacing'
 @import 'common/animations'
 
+// MMenu base styles from NPM package
+@import '~mmenu-light/dist/mmenu-light.css'
+
 // Extracted components or custom styles that can't be done with utilities
 @import 'components/*'
 @import 'widgets/*'
index 17dfa1078a3176d2ceaa59fcb2e46ebcb137dd76..47052696c0d38755c8e7aad8f30b7d5a8246dc5b 100644 (file)
@@ -1,9 +1,14 @@
 header.site
   .header-slideshow-present &
-    +above($breakpoint-menu)
+    //+above($breakpoint-menu)
+    +above(1000px)
       position: absolute
       top: 0
       left: 0
       width: 100%
       background-color: transparent
       z-index: 20
+
+.mobile-menu-trigger
+  +above($breakpoint-menu)
+    display: none
index 1b688ac608bca5cad1174c5504ef553705c8b3c9..e1b8052d31d9ac11a618180b984dd6b9f9bbf28d 100644 (file)
@@ -1,19 +1,23 @@
-<article @php(post_class())>
-  <header>
-    <h1 class="entry-title">
-      {!! $title !!}
-    </h1>
-
-    @include('partials/entry-meta')
+<article @php(post_class('container px-2v pb-2v flex items-start'))>
+  <header class="post-featured-image" style="background-image: url({{ get_the_post_thumbnail_url() }})">
+    <div class="post-featured-image-sizer">{{-- Just here as a proportional sizer thanks to the padding --}}</div>
   </header>
 
   <div class="entry-content">
+    @include('partials/entry-meta')
+
+    <h1 class="plain my-4">
+      {!! $title !!}
+    </h1>
+
     @php(the_content())
   </div>
 
+  {{--
   <footer>
     {!! wp_link_pages(['echo' => 0, 'before' => '<nav class="page-nav"><p>' . __('Pages:', 'sage'), 'after' => '</p></nav>']) !!}
   </footer>
+  --}}
 
-  @php(comments_template())
+  {{--@php(comments_template())--}}
 </article>
index 063428981c333fb6bc32e596178c8fbabdd1356a..ec657b54763be34219858371d0d61bf60bbac38e 100644 (file)
@@ -6,18 +6,22 @@
 
     @if (has_nav_menu('primary_navigation'))
       <nav class="nav-primary self-end">
-        {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'menu-list', 'echo' => false]) !!}
+        {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'main-menu menu-list', 'echo' => false]) !!}
       </nav>
+
+      <a href="#menu" class="mobile-menu-trigger mr-1v hover:text-pink">@svg('menu', 'fill-current')</a>
     @endif
 
     <div class="nav-secondary absolute top-0 right-0 flex items-center">
 
-      {{-- TODO: Add real language switcher here --}}
       <ul class="flex mr-2">
-        <li><a href="#" class="mr-4 border-b-2 border-pink">FR</a></li>
-        <li><a href="#" class="mr-4">EN</a></li>
-        <li><a href="#" class="mr-4">AR</a></li>
-        <li><a href="#" class="mr-4">RU</a></li>
+        @foreach ($languages as $lang)
+          <li class="mr-4">
+            <a href="{{ $lang['url'] }}" @if($lang['current_lang']) class="border-b-2 border-pink"@endif>
+              {{ $lang['slug'] }}
+            </a>
+          </li>
+        @endforeach
       </ul>
 
       @if ($button_1)
index f0e34d86a4a73973158f0a64ad56090e80434426..df2ee50f363e2bf7617e9603f16e815a145273b0 100644 (file)
@@ -5171,6 +5171,11 @@ mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1, mkdirp
   dependencies:
     minimist "0.0.8"
 
+mmenu-light@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/mmenu-light/-/mmenu-light-2.3.1.tgz#c472f0b8da92528c7e1957cd5b62ab7803c445d7"
+  integrity sha512-t9rC8F/JQbP4xpjX8avEpu7cLtq1hMeKtiMt0H8wHDC61sGQy42C46ojXdXbRA9Sgz202x2kqdKwLLMow4IC2g==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"