$elementor->widgets_manager->register_widget_type( new Widgets\ResourceGrid() );
$elementor->widgets_manager->register_widget_type( new Widgets\VideoGallery() );
$elementor->widgets_manager->register_widget_type( new Widgets\TextCarousel() );
+ $elementor->widgets_manager->register_widget_type( new Widgets\ModalList() );
$elementor->widgets_manager->register_widget_type( new Widgets\BackgroundImage() );
}
--- /dev/null
+<?php
+
+namespace PhysioAssist\Elementor\Widgets;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+use Elementor\Scheme_Color;
+
+
+class ModalList extends Widget_Base {
+
+ protected $_has_template_content = false; // Tell Elementor that content is all rendered dynamically
+
+ // Widget name / ID
+ public function get_name() {
+ return 'cube-modal-list';
+ }
+
+ // Elementor widget title
+ public function get_title() {
+ return __( 'Modal List', 'cube' );
+ }
+
+ // Elementor interface icon
+ public function get_icon() {
+ return 'eicon-lightbox';
+ }
+
+ // Where to display the widget in the Elementor interface
+ public function get_categories() {
+ return [ 'theme-elements' ];
+ }
+
+ /**
+ * List of scripts the widget depends on.
+ * Used to set scripts dependencies required to run the widget.
+ *
+ * @since 1.0.0
+ * @access public
+ * @return array Widget scripts dependencies.
+ */
+ public function get_script_depends() {
+
+ wp_register_script(
+ 'cube-modal-list',
+ \App\asset_path('scripts/modal-list.js'),
+ ['jquery'], // Dependencies
+ null, // Version
+ true // In footer?
+ );
+
+ return ['cube-modal-list'];
+ }
+ /**
+ * Register the widget controls.
+ * Adds different input fields to allow the user to change and customize the widget settings.
+ *
+ * @since 1.0.0
+ * @access protected
+ */
+ protected function _register_controls() {
+
+ $this->start_controls_section(
+ 'section_content',
+ [
+ 'label' => __( 'Content', 'cube' ),
+ ]
+ );
+
+ $this->add_control(
+ 'items',
+ [
+ 'label' => __( 'Items', 'cube' ),
+ 'type' => Controls_Manager::REPEATER,
+ 'fields' => [
+ [
+ 'name' => 'title',
+ 'label' => __( 'Title', 'elementor' ),
+ 'type' => Controls_Manager::TEXT,
+ 'placeholder' => __( 'Enter your title', 'elementor' ),
+ 'default' => '',
+ ],
+ [
+ 'name' => 'body',
+ 'label' => __('Body', 'cube'),
+ 'type' => Controls_Manager::WYSIWYG,
+ 'default' => '',
+ ],
+ ],
+ 'title_field' => '{{{ title }}}',
+ ]
+ );
+
+ $this->end_controls_section();
+ }
+ /**
+ * Render the widget output on the frontend.
+ * Written in PHP and used to generate the final HTML.
+ *
+ * @since 1.0.0
+ * @access protected
+ */
+ protected function render() {
+
+ $ID = $this->get_id();
+ $items = $this->get_settings('items');
+
+ echo \App\template('widgets/modal-list', compact('ID', 'items'));
+ }
+
+}
"resource-carousel": [
"./scripts/resource-carousel.js"
],
+ "modal-list": [
+ "./scripts/modal-list.js"
+ ],
"customizer": [
"./scripts/customizer.js"
]
--- /dev/null
+import lity from 'lity'; // eslint-disable-line
+
+(function($) {
+
+ // ELEMENTOR Trigger
+ $(window).on( 'elementor/frontend/init', function() {
+ // eslint-disable-next-line
+ elementorFrontend.hooks.addAction('frontend/element_ready/cube-modal-list.default', function ($scope) {
+
+ // Nothing to trigger here but we need to include Lity so it can catch clicks on the lightbox links
+
+ });
+ });
+
+})(jQuery);
.vertical-spacing
vertical-spacing()
+.text-xs
+ font-size: 12px
+
//.indent-content // See sections.styl
--- /dev/null
+//=== Lity Lightbox customisations
+.lity
+ background-color: rgba($colors.dark-blue, 0.9)
+
+// Prevent scrolling in background when lightbox is open
+.lity-active body
+ overflow: hidden
+ height: 100vw
+
+:root .lity-close // :root needed because in dev mode, CSS from node_modules seems to be imported out of order, preventing overrides from working
+ position: absolute
+ top: 16px !important
+ right: 20px
+ width: 70px
+ height: @width
+ opacity: 1
+ transform: scale(1)
+ transform-origin: center
+ transition: all 0.3s ease
+ transition-delay: 0.15s // Slight delay to give content box time to grow enough
+
+ // Hide while loading and closing
+ .lity-loading &,
+ .lity-closed &
+ opacity: 0
+ transform: scale(0.8)
+
+ // When lightbox is closing there's no transition or delay
+ // because we want the button to disappear immediately so
+ // we don't get a weird overlap with shrinking content box
+ .lity-closed &
+ transition-duration: 0s
+ transition-delay: 0s
+
+ &:after
+ content: ''
+ position: absolute
+ top: 0
+ left: 0
+ width: 100%
+ height: 100%
+ background: url('../images/icons/close-rounded.svg') center no-repeat
+ background-size: contain
+ z-index: 10
/** Import everything from autoload */
// @import "autoload/**/*"
-@import '~lity/dist/lity.css'
@import 'common/reset'
@import 'common/utilities'
// @import 'common/animations'
// @import 'common/admin-bar'
+@import '~lity/dist/lity.css'
+@import 'components/lity-lightbox'
// @import 'components/svg'
@import 'components/headings'
@import 'components/buttons'
--- /dev/null
+.modal-list
+ list-style-type: none
+
+ &-item
+ position: relative
+
+ &:not(:last-child)
+ margin-bottom: 1.75em
+
+ a
+ color: $colors.headings
+
+ &:hover
+ color: $colors.blue
+
+ svg
+ position: absolute
+ top: 0.4em
+ left: -1.3em
+ height: 0.625em
+ width: auto
+
+ path
+ fill: currentColor
+
+ &-lightbox
+ padding-top: 110px
+ constrain(padding-bottom, 3vw)
+ horizontal-spacing(3vw)
+ background-color: #fff
+ width: 100vw
+ max-width: 800px
+ max-height: 90vh !important // Gives 5% top and bottom gap
+ overflow-y: auto // Scroll internally if content is too tall for screen
+
+ &-title
+ color: $colors.headings
+ font-size: 26px
+ font-weight: 600
+ margin-bottom: 1em
+
+ &-body
+ color: $colors.text
max-height: 90vh !important // Gives 5% top and bottom gap
overflow-y: auto // Scroll internally if content is too tall for screen
text-align: center
-
-
-//=== Lity Lightbox customisations
-.lity
- background-color: rgba($colors.dark-blue, 0.9)
-
-.lity-close
- position: absolute
- top: 16px !important
- right: 20px
- width: 70px
- height: @width
- opacity: 1
- transform: scale(1)
- transform-origin: center
- transition: all 0.3s ease
- transition-delay: 0.15s // Slight delay to give content box time to grow enough
-
- // Hide while loading and closing
- .lity-loading &,
- .lity-closed &
- opacity: 0
- transform: scale(0.8)
-
- // When lightbox is closing there's no transition or delay
- // because we want the button to disappear immediately so
- // we don't get a weird overlap with shrinking content box
- .lity-closed &
- transition-duration: 0s
- transition-delay: 0s
-
- &:after
- content: ''
- position: absolute
- top: 0
- left: 0
- width: 100%
- height: 100%
- background: url('../images/icons/close-rounded.svg') center no-repeat
- background-size: contain
- z-index: 10
--- /dev/null
+{{-- TEXT MODAL LIST --}}
+<ul class="modal-list">
+
+ {{--TODO: split into 2 cols? --}}
+
+ @foreach ($items as $index => $item)
+
+ @php
+ $lightbox_ID = 'lightbox_'. $ID .'_'. $index; // Unique ID for lightbox content
+ @endphp
+
+ <li class="modal-list-item">
+
+ <a href="#{{ $lightbox_ID }}" data-lity>
+
+ @svg('arrow') {{ $item['title'] }}
+
+ {{-- Lightbox Content --}}
+ <div id="{{ $lightbox_ID }}" class="lity-hide modal-list-lightbox">
+
+ <h3 class="modal-list-title">{{ $item['title'] }}</h3>
+
+ <div class="modal-list-body">
+ {!! $item['body'] !!}
+ </div>
+
+ </div>
+
+ </a> {{-- .modal-list-item --}}
+
+ </li>
+
+ @endforeach
+
+</ul>
projects / physioassist-wordpress.git / commitdiff