namespace Cube\Elementor\Widgets;
use Elementor\Controls_Manager;
+use Elementor\Embed;
use Elementor\Utils;
],
]
);
+
+ $this->add_control(
+ 'link',
+ [
+ 'label' => __('Lien', 'cube'),
+ 'type' => Controls_Manager::URL,
+ 'default' => [
+ 'url' => '',
+ 'is_external' => false,
+ ],
+ 'show_external' => true
+ ]
+ );
$this->end_controls_section();
$image = $this->get_settings('image');
$bg_position = $this->get_settings('background_position');
+ $link = $this->get_settings('link');
+ $tag = 'div'; // Default tag for widget - will change when we need a non-lightbox link
+ $attributes = '';
+ $class = '';
if (is_numeric($image['id'])) {
$meta = wp_get_attachment_metadata($image['id']);
$ratio = '80%';
}
- echo '<div class="bg-image" style="background-image: url('. $image['url'] .'); background-position: '. $bg_position .'"><div class="bg-image-sizer" style="padding-bottom: '. $ratio .'"></div></div>';
+ // Handle links / video
+ if (!empty( $link['url'])) {
+
+ // If the link is to a youtube video, we want this to open in a lightbox instead
+ // For now only supporting links that start with https://www.youtube.com or https://youtu.be...
+ if (strpos($link['url'], 'https://www.youtube.com') === 0 || strpos($link['url'], 'https://youtu.be') === 0) {
+
+ $attributes = "data-elementor-lightbox='". $this->lightbox($link['url'], $this->get_id()) ."'";
+ $attributes .= ' data-elementor-open-lightbox="yes"';
+ $class = 'cursor-pointer';
+
+ } else { // Normal link
+
+ $tag = 'a';
+ $attributes = 'href="'. $link['url'] .'"';
+
+ if ($link['is_external']) {
+ $attributes .= ' target="_blank"';
+ }
+
+ if ($link['nofollow']) {
+ $attributes .= ' rel="nofollow"';
+ }
+ }
+
+ }
+
+ echo '<'. $tag .' class="bg-image '. $class .'" '. $attributes .' style="background-image: url('. $image['url'] .'); background-position: '. $bg_position .'"><div class="bg-image-sizer" style="padding-bottom: '. $ratio .'"></div></'. $tag .'>';
+
+ }
+
+
+ // Generate Elementor lightbox settings
+ public static function lightbox($url, $element_ID) {
+
+ // Video settings for lightbox embed
+ $embed_params = [
+ 'rel' => 0, // Don't show related videos at the end of playback
+ 'showinfo' => 0 // Hide info
+ ];
+
+ $lightbox_options = [
+ 'type' => 'video',
+ 'url' => Embed::get_embed_url($url, $embed_params),
+ 'modalOptions' => [
+ 'id' => 'elementor-lightbox-' . $element_ID,
+ 'entranceAnimation' => 'zoomIn',
+ 'videoAspectRatio' => '169',
+ ],
+ ];
+ return wp_json_encode($lightbox_options);
}
}
parent::register_scripts();
- wp_enqueue_script(
- 'ccv-consultation',
- asset('scripts/consultation.js'),
- ['jquery'], // Dependencies
- null, // Version
- true // In footer?
- );
+ wp_enqueue_script('ccv-consultation', asset('scripts/consultation.js'), ['jquery'], null, true);
+ wp_enqueue_script('lity', asset('scripts/lity.js'), ['jquery'], null, true);
+ wp_enqueue_style('lity-css', asset('styles/lity.min.css'));
}
"flatpickr": "^4.6.3",
"laravel-mix": "^5.0.4",
"laravel-mix-purgecss": "^4.2.0",
+ "lity": "^2.4.0",
"lodash.debounce": "^4.0.8",
"lost": "^8.3.1",
"mix-tailwindcss": "^1.0.2",
// visible while editing...
ul
margin-left: 1.3em
+
+//===== Admin bar tweaks
+$breakpoint-admin-bar = 783px
+$admin-bar-height = 32px
+$admin-bar-height-mobile = 46px
+
+#wpadminbar
+ overflow: hidden
+
+#wp-toolbar
+ display: flex
+ justify-content: space-between
+
+ > *
+ display: flex
+ white-space: nowrap
+
+ // Wrap/hide extra toolbar items on the left when there's not enough space
+ #wp-admin-bar-root-default
+ flex-wrap: wrap
+
+ #wp-admin-bar-top-secondary
+ flex-shrink: 0
+
+body.admin-bar
+ +above($breakpoint-admin-bar)
+ position: relative
+
+ #mobile-menu, .lity-close
+ top: $admin-bar-height
+
+ +below($breakpoint-admin-bar)
+ #mobile-menu
+ top: $admin-bar-height-mobile
+
+ .mobile-menu-trigger
+ top: 30px + $admin-bar-height-mobile
.wrapper
@apply mx-auto
max-width: $content-max-width
+
+//-- Elementor Lightbox customisations
+.dialog-type-lightbox
+ background-color: rgba(#2E2C40, 0.8)
--- /dev/null
+//=== Lity Lightbox customisations
+.lity
+ background-color: rgba(#2E2C40, 0.8)
+
+// Prevent scrolling in background when lightbox is open
+.lity-active body
+ overflow: hidden
+ height: 100vw
.bg-image
+ display: block
background-size: cover
background-repeat: no-repeat
background-position: center
left: 0
width: 100%
height: 100%
- background-image: linear-gradient(to bottom, #fff 10%, transparent 50%)
+ //background-image: linear-gradient(to bottom, #fff 10%, transparent 50%)
+ //background-image: linear-gradient(180deg, rgba(255,255,255,1) -5%,rgba(255,255,255,0.9) 17%, transparent 55%)
z-index: 5
// Change to portrait oriented images for small screens
.text-block
.text-block-align-center &
text-align: center
+ margin-left: auto
+ margin-right: auto
> * + * // Automatic spacing between direct child elements
margin-top: 1.5em
.timeline-horizontal
+below($breakpoint-timeline-horizontal)
- @apply flex flex-row-reverse
+ @apply flex flex-row
// Scale all em children
font-size: 22px fixed
&-mobile
width: 100%
max-width: 250px !important;
- padding-right: 2em;
+ padding-left: 2em;
+above($breakpoint-timeline-horizontal)
display: none
{{ __('Vos images sont sur un CD ?', 'ccv') }}
</div>
<p>
- {{ __("Envoyez-nous l'ensemble des fichiers contenus sur votre CD en cliquant sur le lien ci-dessous :", "ccv") }}
+ {{ __("Envoyez-nous l'ensemble des fichiers contenus sur votre CD :", "ccv") }}
</p>
- <a href="javascript://" class="btn mt-6" data-update-imagery-type>{{ __('Envoyer vos fichiers', 'ccv') }}</a>
+ <a href="https://uploader.purview.net/client/scmgeneste/" target="_blank" class="btn mt-6" data-lity data-update-imagery-type>{{ __('Parcourir', 'ccv') }}</a>
</div>
</div>
{{ __('Vous remplissez cette demande depuis votre téléphone ?', 'ccv') }}
</div>
<p>
- {{ __('Prenez vos images en photo et envoyez-les directement depuis votre téléphone.', 'ccv') }}
+ {{ __('Prenez vos images en photo et envoyez-les directement depuis votre téléphone :', 'ccv') }}
</p>
<a href="javascript://" class="btn mt-6" data-update-imagery-type>{{ __('Parcourir') }}</a>
</div>
.js(src`scripts/customizer.js`, 'scripts')
.extract(['mmenu-light']); // Extract any libraries that will rarely change to a vendor.js file
+// Lity lightbox
+mix.copy('node_modules/lity/dist/lity.js', publicPath`scripts`);
+mix.copy('node_modules/lity/dist/lity.min.css', publicPath`styles`);
+
// Assets
mix.copyDirectory(src`images`, publicPath`images`)
.copyDirectory(src`fonts`, publicPath`fonts`);
resolved "https://registry.yarnpkg.com/limiter/-/limiter-1.1.4.tgz#87c9c3972d389fdb0ba67a45aadbc5d2f8413bc1"
integrity sha512-XCpr5bElgDI65vVgstP8TWjv6/QKWm9GU5UG0Pr5sLQ3QLo8NVKsioe+Jed5/3vFOe3IQuqE7DKwTvKQkjTHvg==
+lity@^2.4.0:
+ version "2.4.0"
+ resolved "https://registry.yarnpkg.com/lity/-/lity-2.4.0.tgz#af7eb0c33efe3b21c31ab22848e608eca432e819"
+ integrity sha512-6sj/IjJ6bDWdWcvo15r12erzVkVQFx8xA5dWT3WjuJxCns8o7PEkDAjfTjaoy6wbR2KDxAfxBWqY9YNnpAUWPQ==
+
load-json-file@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
projects / ccv-wordpress.git / commitdiff