// Register widgets with Elementor
add_action('elementor/widgets/widgets_registered', [$this, 'register_widgets']);
-
- // Register external scripts required by the widgets
- add_action('elementor/frontend/after_register_scripts', [$this, 'register_scripts']);
-
- // Add element category in editor panel
- //add_action('elementor/init', [$this, 'register_category']);
}
public function register_customisations() {
$elementor->widgets_manager->register_widget_type( new Widgets\BackgroundImage() );
}
- public function register_scripts() {
- Widgets\VideoGallery::register_scripts();
- }
-
-
// Override the main Elementor section element to allow custom controls to be added to the editor
// This allows us to set specific CSS classes on the section wrapper, thereby centralising control
// of necessary settings for each section layout (column width, padding etc)
* @return array Widget scripts dependencies.
*/
public function get_script_depends() {
- return [];
+
+ wp_register_script(
+ 'cube-hero',
+ \App\asset_path('scripts/hero-block.js'),
+ ['jquery'], // Dependencies
+ null, // Version
+ true // In footer?
+ );
+
+ return ['cube-hero'];
}
/**
* Register the widget controls.
],
],
'selectors' => [
- '{{WRAPPER}} .hero-block-content' => 'max-width: {{SIZE}}{{UNIT}};',
+ '{{WRAPPER}} .hero-block-content-inner' => 'max-width: {{SIZE}}{{UNIT}};',
],
]
);
echo '<div class="hero-block-inner">';
echo "<img {$this->get_render_attribute_string('image')}>";
echo '<div class="hero-block-content">';
+ echo '<div class="hero-block-content-inner">';
if (!empty($subtitle)) echo "<h3 {$this->get_render_attribute_string('subtitle')}>$subtitle</h3>";
if (!empty($title)) echo "<h2 {$this->get_render_attribute_string('title')}>$title</h2>";
if (!empty($body)) echo "<div {$this->get_render_attribute_string('body')}>$body</div>";
if (!empty($cta_text)) {
echo "<a {$this->get_render_attribute_string('cta_text')}>". \BladeSvgSage\svg_image('arrow')->toHtml() ."$cta_text</a>";
}
+ echo '</div>'; // .hero-block-content-inner
echo '</div>'; // .hero-block-content
echo '</div>'; // .hero-block-inner
echo '</div>'; // .hero-block
* @return array Widget scripts dependencies.
*/
public function get_script_depends() {
- return [];
+
+ wp_register_script(
+ 'physioassist-text-block',
+ \App\asset_path('scripts/text-block.js'),
+ ['jquery'], // Dependencies
+ null, // Version
+ true // In footer?
+ );
+
+ return ['physioassist-text-block'];
}
/**
* Register the widget controls.
return [ 'theme-elements' ];
}
-
- // Register scripts related to this widget (called by the Elementor\Setup)
- // See also get_script_depends()
- public static function register_scripts() {
- wp_register_script(
- 'cube-video-carousel',
- \App\asset_path('scripts/video-carousel.js'),
- ['jquery'], // Dependencies
- null, // Version
- true // In footer?
- );
- }
-
-
/**
* List of scripts the widget depends on.
* Used to set scripts dependencies required to run the widget.
* @return array Widget scripts dependencies.
*/
public function get_script_depends() {
+
+ wp_register_script(
+ 'cube-video-carousel',
+ \App\asset_path('scripts/video-carousel.js'),
+ ['jquery'], // Dependencies
+ null, // Version
+ true // In footer?
+ );
+
// Use script already registered by Elementor so we don't have to include another copy of Slick
return [ 'jquery-slick', 'cube-video-carousel' ];
}
"imagemin-mozjpeg": "~7.0.0",
"imagemin-webpack-plugin": "~2.0.0",
"import-glob": "~1.5",
+ "lodash.debounce": "^4.0.8",
"lost": "^8.2.0",
"node-sass": "~4.7.2",
"postcss-loader": "~2.1.0",
"./scripts/main.js",
"./styles/main.styl"
],
+ "hero-block": [
+ "./scripts/hero-block.js"
+ ],
+ "text-block": [
+ "./scripts/text-block.js"
+ ],
"video-carousel": [
"./scripts/video-carousel.js"
],
--- /dev/null
+import debounce from 'lodash.debounce';
+
+(function($) {
+
+ // ELEMENTOR Trigger
+ // Runs when element is ready on the frontend
+ $(window).on( 'elementor/frontend/init', function() {
+ // eslint-disable-next-line
+ elementorFrontend.hooks.addAction('frontend/element_ready/cube-hero.default', function ($scope) {
+ resizeHeroBlock();
+ });
+ });
+
+ // Handle resizing when window resizes
+ $(window).on('resize', debounce(resizeHeroBlock, 100));
+
+})(jQuery);
+
+
+// Resize hero block text so it fits into the available column space (50% of header image)
+// The content area has a 5vw gutter on each side plus an additional 5vw left indent
+// so hero block content width is: ((100vw - 5vw - 5vw) / 2) - 5vw = 40vw
+
+function resizeHeroBlock() {
+
+ var referenceWidth = 672, // Max-width of hero content at full size (0.4 * 1680)
+ minimumWidth = 1024, // Below this width, don't scale because layout will change (this should match CSS breakpoint!)
+ windowWidth = $(window).width(),
+ contentWidth = Math.round(0.4 * windowWidth), // 40vw (see calculation notes above)
+ stylesID = 'heroBlockStyles', // ID of the <style> tag that holds the scaling CSS
+ styles = $('#' + stylesID),
+ scale,
+ translateAmount;
+
+ // Add the style tag to the head if needed
+ if (styles.length == 0) {
+ styles = $(`<style id="${stylesID}"></style>`).appendTo('head');
+ }
+
+ if (windowWidth < minimumWidth) {
+ styles.remove();
+ return;
+ }
+
+ // Work out how much column needs to be scaled down, if at all
+ scale = Math.min(1, contentWidth / referenceWidth);
+
+ // When translating a scaled element, the translate value needs to be scaled (-50% / scale)
+ translateAmount = -50 / scale;
+
+ styles.html(`
+ .hero-block-content-inner {
+ transform: scale(${scale}) translateY(${translateAmount}%);
+ }
+ `);
+
+}
--- /dev/null
+import debounce from 'lodash.debounce';
+
+(function($) {
+
+ // ELEMENTOR Trigger
+ // Runs when element is ready on the frontend
+ $(window).on( 'elementor/frontend/init', function() {
+ // eslint-disable-next-line
+ elementorFrontend.hooks.addAction('frontend/element_ready/physioassist-text.default', function ($scope) {
+ resizeTextBlocks();
+ });
+ });
+
+ // Handle resizing when window resizes
+ $(window).on('resize', debounce(resizeTextBlocks, 100));
+
+})(jQuery);
+
+
+// Resize text blocks so they fit into the available 2 column space
+// The content area has a 5vw gutter on each side so a single column width is: (100vw - 5vw - 5vw) / 2 = 45vw
+
+function resizeTextBlocks() {
+
+ var referenceWidth = 756, // Width of text block column at full size
+ minimumWidth = 1024, // Below this width, don't scale because layout will change (this should match CSS breakpoint!)
+ windowWidth = $(window).width(),
+ columnWidth = Math.round(0.45 * windowWidth), // 45vw (see calculation notes above)
+ stylesID = 'textBlockStyles', // ID of the <style> tag that holds the scaling CSS
+ styles = $('#' + stylesID),
+ scale,
+ translateAmount;
+
+ // Add the style tag to the head if needed
+ if (styles.length == 0) {
+ styles = $(`<style id="${stylesID}"></style>`).appendTo('head');
+ }
+
+ if (windowWidth < minimumWidth) {
+ styles.remove();
+ return;
+ }
+
+ // Work out how much column needs to be scaled down, if at all
+ scale = Math.min(1, columnWidth / referenceWidth);
+
+ // When translating a scaled element, the translate value needs to be scaled (-50% / scale)
+ translateAmount = -50 / scale;
+
+ styles.html(`
+ .layout-squares .text-block {
+ transform: scale(${scale}) translateY(${translateAmount}%);
+ }
+ `);
+
+}
// Only trigger if it is a carousel type gallery
if ($scope.hasClass('video-gallery-type-carousel')) {
- console.log('CAROUSEL enabled') // eslint-disable-line
$scope.find('.video-carousel').slick(); // Note: settings come from data-attribute in HTML
}
});
padding-bottom: 1em // To give space between menu and dropdown but keep them touching
padding-top: @padding-bottom // Matches bottom padding so menu stays vertically aligned in the centre
- &:hover, &.current_page_parent, &.current_page_item
+ &:hover, &.current_page_parent, &.current_page_item, &.current-page-ancestor
a
border-color: currentColor
&-social
- //flex: 1 0 auto
+ +below($breakpoint-footer-cols-2)
+ order: 4 // Move to last position when in 2 col view
+ padding-left: 10vw // Give more space from 1st column (also applied to sitemap column)
+ +below($breakpoint-footer-cols-1)
+ padding-left: 2.5vw
&-icons
reset-list()
fill: $colors.light-blue
&-signup
+ +below($breakpoint-footer-cols-2)
+ order: 3 // 3rd position when in 2 col view
+
+
a
display: inline-block
padding: 0.5em 1.2em
text-transform: uppercase
&-sitemap
- reset-list()
+ +below($breakpoint-footer-cols-2)
+ order: 2
+ // Add some breathing room since this column is quite narrow
+ // and it looks odd so close to the info column
+ padding-left: 10vw
+ +below($breakpoint-footer-cols-1)
+ padding-left: 2.5vw
- .menu-item
- display: block
- padding: 0
- margin: 0 0 1em 0
+ &-menu
+ reset-list()
- a
- color: #fff
- border: none
+ .menu-item
+ display: block
+ padding: 0
+ margin: 0 0 1em 0
+
+ a
+ color: #fff
+ border: none
&-copyright
font-size: 11px
.elementor-row
flex-direction: row-reverse
+//---------------------------------
+
+$breakpoint-layout-squares = 1024px // When to break to 1 column view
+$layout-squares-col-width = 756px // Max width of a column
+
.layout-squares
padding: 0 !important
- // Middle align content in columns
- .elementor-column .elementor-column-wrap
- align-items: center
+ // Ensure 100% for wrapping divs so absolutely positioned content sits in the right place
+ .elementor-widget-physioassist-text, .elementor-widget-container
+ height: 100%
+ position: relative
+
// Text block overrides
.text-block
- vertical-spacing(2vw)
- max-width: 525px
- margin: 0 auto
+ // Fixed width so we can scale proportionally on smaller screens
+ width: $layout-squares-col-width
+
+ // Padding is set in absolute px values instead of vw units because
+ // the whole text-block element will be scaled, including padding.
+ // If we used vw units, the text would reflow as the screen gets
+ // narrower due to the padding reducing proportionally.
+ // This ensures we keep the same text layout as the full-width version
+ padding: round(0.02 * $content-max-width) round(0.07 * $content-max-width)
+ transform-origin: left
+
+ // Content must be absolutely positioned so that it doesn't take up any space in the
+ // normal document flow, otherwise a gap will be left when it is scaled down.
+ position: absolute
+ left: 0 // It will always cover the whole width so start from left
+ top: 50% // Middle align content (translateY is done in text-block.js)
+
+ +below($breakpoint-layout-squares)
+ width: auto
+ max-width: $layout-squares-col-width // So we don't go wider than image width
+ position: relative
+ top: 0
+ margin: 0 auto
+ padding-left: 0
+ padding-right: 0
+ .elementor-element-populated
+ +below($breakpoint-layout-squares)
+ // Since we have no padding on the text-blocks now,
+ // we don't want bg colours showing where the boundry is
+ background-color: transparent !important
+
+ .elementor-column
+ +below($breakpoint-layout-squares)
+ width: 100%
+
+
+//---------------------------------
.indent-content, // Used by blog and other non-elementor pages
.layout-indented .elementor-row
constrain(padding-left, 7.5vw)
+
+//---------------------------------
+
// Article layout (long form text - eg. Clinical page)
.layout-article
// Bottom align text (relevant for first section with image)
+$breakpoint-hero-block = 1024px // When image should disappear and layout changed. Should be synced with hero-block.js
+$header-height = 84px // How much space to leave for transparent header
+
.hero-block
font-smoothing()
background-image: linear-gradient(to right, #0b4a70 0%, #0b4a70 50%, #d3ebf6 50%, #d3ebf6 100%)
color: #fff
+ +below($breakpoint-hero-block)
+ background-image: linear-gradient(55deg, rgb(16, 81, 118) 0%, rgb(83, 155, 191) 40%, rgb(175, 218, 238) 71%, rgb(239, 249, 255) 91%, rgb(239, 249, 255) 100%)
+
&-inner
center()
position: relative
display: block
margin: 0 auto
+ +below($breakpoint-hero-block)
+ display: none
+
&-content
position: absolute
- top: 50%
- transform: translateY(-50%)
- constrain(left, 10vw)
- max-width: 50%
+ top: $header-height // Space for header so content is centred in remaining space
+ bottom: 0
+ left: 0
+ right: 0
+
+ +below($breakpoint-hero-block)
+ position: static
+ padding: s('calc(%s + 4vw) 5vw 4vw', $header-height)
+ bottom: 0
+ right: 0
+
+
+ &-inner
+ position: absolute
+ top: 50% // translateY handled by hero-block.js
+ constrain(left, 10vw)
+ width: 672px // Max width a full size (should be kept in sync with JS!)
+ transform-origin: left
+
+ +below($breakpoint-hero-block)
+ position: relative
+ width: auto
+ top: 0
+ left: 0
&-subtitle
font-smoothing()
li
margin-bottom: 0.5em
+ small
+ display: inline-block
+ line-height: 1.5
+
&-cta
display: block
margin-top: (30/14)em
@php(dynamic_sidebar('sidebar-footer-signup'))
</div>
- <div class="footer-col sitemap">
+ <div class="footer-col footer-sitemap">
<h3><?php _e('Sitemap', 'physioassist') ?></h3>
- {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'footer-sitemap', 'depth' => 1]) !!}
+ {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'footer-sitemap-menu', 'depth' => 1]) !!}
</div>
</div>
version "4.5.2"
resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
+lodash.debounce@^4.0.8:
+ version "4.0.8"
+ resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+
lodash.defaults@^3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-3.1.2.tgz#c7308b18dbf8bc9372d701a73493c61192bd2e2c"
projects / physioassist-wordpress.git / commitdiff