From e1bc6907316e9be4a64fb6543f4ced409363679a Mon Sep 17 00:00:00 2001 From: Luca Racchetti Date: Fri, 21 Aug 2020 20:14:36 +0200 Subject: [PATCH] first commit --- LICENSE | 8 +- ...oomlalabs_imagecomparisonslider_module.ini | 18 ++ ...alabs_imagecomparisonslider_module.sys.ini | 6 + ...oomlalabs_imagecomparisonslider_module.php | 15 ++ ...oomlalabs_imagecomparisonslider_module.xml | 87 ++++++++++ src/imagecomparisonslider.css | 156 ++++++++++++++++++ src/imagecomparisonslider.js | 122 ++++++++++++++ tmpl/default.php | 39 +++++ 8 files changed, 447 insertions(+), 4 deletions(-) create mode 100644 language/en-GB/en-GB.mod_joomlalabs_imagecomparisonslider_module.ini create mode 100644 language/en-GB/en-GB.mod_joomlalabs_imagecomparisonslider_module.sys.ini create mode 100644 mod_joomlalabs_imagecomparisonslider_module.php create mode 100644 mod_joomlalabs_imagecomparisonslider_module.xml create mode 100644 src/imagecomparisonslider.css create mode 100644 src/imagecomparisonslider.js create mode 100644 tmpl/default.php diff --git a/LICENSE b/LICENSE index d159169..23cb790 100644 --- a/LICENSE +++ b/LICENSE @@ -1,7 +1,7 @@ GNU GENERAL PUBLIC LICENSE Version 2, June 1991 - Copyright (C) 1989, 1991 Free Software Foundation, Inc., + Copyright (C) 1989, 1991 Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed. @@ -290,8 +290,8 @@ to attach them to the start of each source file to most effectively convey the exclusion of warranty; and each file should have at least the "copyright" line and a pointer to where the full notice is found. - - Copyright (C) + {description} + Copyright (C) {year} {fullname} This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by @@ -329,7 +329,7 @@ necessary. Here is a sample; alter the names: Yoyodyne, Inc., hereby disclaims all copyright interest in the program `Gnomovision' (which makes passes at compilers) written by James Hacker. - , 1 April 1989 + {signature of Ty Coon}, 1 April 1989 Ty Coon, President of Vice This General Public License does not permit incorporating your program into diff --git a/language/en-GB/en-GB.mod_joomlalabs_imagecomparisonslider_module.ini b/language/en-GB/en-GB.mod_joomlalabs_imagecomparisonslider_module.ini new file mode 100644 index 0000000..d681bbb --- /dev/null +++ b/language/en-GB/en-GB.mod_joomlalabs_imagecomparisonslider_module.ini @@ -0,0 +1,18 @@ +; +; Joomlalabs_imagecomparisonslider_module language file +; + +MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE="Image Comparison Slider" +MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_XML_DESCRIPTION="Joomla!LABS Image Comparison Slider Module" +MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_LEFT_IMAGE="Left image" +MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_LEFT_IMAGE_DESCRIPTION="Left image in the comparison slider" +MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_LEFT_IMAGE_ALT="Left image alt" +MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_LEFT_IMAGE_ALT_DESCRIPTION="Alt attribute that specified the alternate text for the left image" +MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_LEFT_IMAGE_CAPTION="Left image caption" +MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_LEFT_IMAGE_CAPTION_DESCRIPTION="Caption text for the left image" +MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_RIGHT_IMAGE="Right image" +MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_RIGHT_IMAGE_DESCRIPTION="Right image in the comparison slider" +MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_RIGHT_IMAGE_ALT="Right image alt" +MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_RIGHT_IMAGE_ALT_DESCRIPTION="Alt attribute that specified the alternate text for the right image" +MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_RIGHT_IMAGE_CAPTION="Right image caption" +MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_RIGHT_IMAGE_CAPTION_DESCRIPTION="Caption text for the right image" diff --git a/language/en-GB/en-GB.mod_joomlalabs_imagecomparisonslider_module.sys.ini b/language/en-GB/en-GB.mod_joomlalabs_imagecomparisonslider_module.sys.ini new file mode 100644 index 0000000..63af5b1 --- /dev/null +++ b/language/en-GB/en-GB.mod_joomlalabs_imagecomparisonslider_module.sys.ini @@ -0,0 +1,6 @@ +; +; Joomlalabs_imagecomparisonslider_module language file +; + +MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE="Image Comparison Slider" +MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_XML_DESCRIPTION="Joomla!LABS Image Comparison Slider Module" diff --git a/mod_joomlalabs_imagecomparisonslider_module.php b/mod_joomlalabs_imagecomparisonslider_module.php new file mode 100644 index 0000000..70f244c --- /dev/null +++ b/mod_joomlalabs_imagecomparisonslider_module.php @@ -0,0 +1,15 @@ + + * @copyright Copyright (C) 2015 - 2020 Joomla!LABS. All rights reserved. + * @license GNU General Public License version 2 or later; see LICENSE.txt + * @link https://joomlalabs.com + */ + +defined('_JEXEC') or die; + +use Joomla\CMS\Helper\ModuleHelper; + +require ModuleHelper::getLayoutPath('mod_joomlalabs_imagecomparisonslider_module', $params->get('layout', 'default')); diff --git a/mod_joomlalabs_imagecomparisonslider_module.xml b/mod_joomlalabs_imagecomparisonslider_module.xml new file mode 100644 index 0000000..135192f --- /dev/null +++ b/mod_joomlalabs_imagecomparisonslider_module.xml @@ -0,0 +1,87 @@ + + + MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE + 19/08/20 + Joomla!LABS + info@joomlalabs.com + https://joomlalabs.com + Copyright (C) 2015 - 2020 Joomla!LABS. All rights reserved. + GNU General Public License version 2 or later; see LICENSE.txt + 1.0.0 + MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_XML_DESCRIPTION + + + mod_joomlalabs_imagecomparisonslider_module.php + tmpl + language + src + mod_joomlalabs_imagecomparisonslider_module.xml + + + + + + https://raw.githubusercontent.com/JoomlaLABS/updateservers/master/mod_joomlalabs_imagecomparisonslider_module.xml + + + + + +
+ + + + + + +
+
+ + +
+ + + diff --git a/src/imagecomparisonslider.css b/src/imagecomparisonslider.css new file mode 100644 index 0000000..7cbe2dd --- /dev/null +++ b/src/imagecomparisonslider.css @@ -0,0 +1,156 @@ +/* + Code inspired from Image Comparison Slider + https://github.com/CodyHouse/image-comparison-slider + */ + +.cs-image-container { + position: relative; + margin: 0em auto; +} +.cs-image-container img { + display: block; +} + +.cs-image-label { + position: absolute; + bottom: 0; + right: 0; + color: #ffffff; + padding: 1em; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + opacity: 0; + -webkit-transform: translateY(20px); + -moz-transform: translateY(20px); + -ms-transform: translateY(20px); + -o-transform: translateY(20px); + transform: translateY(20px); + -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s; + -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s; + transition: transform 0.3s 0.7s, opacity 0.3s 0.7s; +} +.cs-image-label.is-hidden { + visibility: hidden; +} +.is-visible .cs-image-label { + opacity: 1; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -ms-transform: translateY(0); + -o-transform: translateY(0); + transform: translateY(0); +} + +.cs-resize-img { + position: absolute; + top: 0; + left: 0; + width: 0; + height: 100%; + overflow: hidden; + /* Force Hardware Acceleration in WebKit */ + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -ms-transform: translateZ(0); + -o-transform: translateZ(0); + transform: translateZ(0); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} +.cs-resize-img img { + position: absolute; + left: 0; + top: 0; + display: block; + height: 100%; + width: auto; + max-width: none; +} +.cs-resize-img .cs-image-label { + right: auto; + left: 0; +} +.is-visible .cs-resize-img { + width: 50%; + /* bounce in animation of the left image */ + -webkit-animation: cd-bounce-in 0.7s; + -moz-animation: cd-bounce-in 0.7s; + animation: cd-bounce-in 0.7s; +} + +@-webkit-keyframes cd-bounce-in { + 0% { + width: 0; + } + 60% { + width: 55%; + } + 100% { + width: 50%; + } +} +@-moz-keyframes cd-bounce-in { + 0% { + width: 0; + } + 60% { + width: 55%; + } + 100% { + width: 50%; + } +} +@keyframes cd-bounce-in { + 0% { + width: 0; + } + 60% { + width: 55%; + } + 100% { + width: 50%; + } +} +.cs-handle { + position: absolute; + height: 44px; + width: 44px; + /* center the element */ + left: 50%; + top: 50%; + margin-left: -22px; + margin-top: -22px; + border-radius: 50%; + /* background: #dc717d url("../img/cd-arrows.svg") no-repeat center center; */ + cursor: move; + box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); + opacity: 0; + -webkit-transform: translate3d(0, 0, 0) scale(0); + -moz-transform: translate3d(0, 0, 0) scale(0); + -ms-transform: translate3d(0, 0, 0) scale(0); + -o-transform: translate3d(0, 0, 0) scale(0); + transform: translate3d(0, 0, 0) scale(0); +} +.cs-handle:before { + position: absolute; + font-family: 'Font Awesome 5 Free'; + font-size: 1.5rem; + top: 6px; + left: 12px; + content: "\f337"; +} +.cs-handle.draggable { + /* change background color when element is active */ + /* background-color: #445b7c; */ +} +.is-visible .cs-handle { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0) scale(1); + -moz-transform: translate3d(0, 0, 0) scale(1); + -ms-transform: translate3d(0, 0, 0) scale(1); + -o-transform: translate3d(0, 0, 0) scale(1); + transform: translate3d(0, 0, 0) scale(1); + -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s; + -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s; + transition: transform 0.3s 0.7s, opacity 0s 0.7s; +} \ No newline at end of file diff --git a/src/imagecomparisonslider.js b/src/imagecomparisonslider.js new file mode 100644 index 0000000..851d275 --- /dev/null +++ b/src/imagecomparisonslider.js @@ -0,0 +1,122 @@ +/* + Code inspired from Image Comparison Slider + https://github.com/CodyHouse/image-comparison-slider + */ + +jQuery(document).ready(function($){ + var dragging = false, + scrolling = false, + resizing = false; + //cache jQuery objects + var imageComparisonContainers = $('.cs-image-container'); + //check if the .cs-image-container is in the viewport + //if yes, animate it + checkPosition(imageComparisonContainers); + $(window).on('scroll', function(){ + if( !scrolling) { + scrolling = true; + ( !window.requestAnimationFrame ) + ? setTimeout(function(){checkPosition(imageComparisonContainers);}, 100) + : requestAnimationFrame(function(){checkPosition(imageComparisonContainers);}); + } + }); + + //make the .cs-handle element draggable and modify .cs-resize-img width according to its position + imageComparisonContainers.each(function(){ + var actual = $(this); + drags(actual.find('.cs-handle'), actual.find('.cs-resize-img'), actual, actual.find('.cs-image-label[data-type="right"]'), actual.find('.cs-image-label[data-type="left"]')); + }); + + //upadate images label visibility + $(window).on('resize', function(){ + if( !resizing) { + resizing = true; + ( !window.requestAnimationFrame ) + ? setTimeout(function(){checkLabel(imageComparisonContainers);}, 100) + : requestAnimationFrame(function(){checkLabel(imageComparisonContainers);}); + } + }); + + function checkPosition(container) { + container.each(function(){ + var actualContainer = $(this); + if( $(window).scrollTop() + $(window).height()*0.5 > actualContainer.offset().top) { + actualContainer.addClass('is-visible'); + } + }); + + scrolling = false; + } + + function checkLabel(container) { + container.each(function(){ + var actual = $(this); + updateLabel(actual.find('.cs-image-label[data-type="left"]'), actual.find('.cs-resize-img'), 'left'); + updateLabel(actual.find('.cs-image-label[data-type="right"]'), actual.find('.cs-resize-img'), 'right'); + }); + + resizing = false; + } + + //draggable funtionality - credits to http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/ + function drags(dragElement, resizeElement, container, labelContainer, labelResizeElement) { + dragElement.on("mousedown vmousedown", function(e) { + dragElement.addClass('draggable'); + resizeElement.addClass('resizable'); + + var dragWidth = dragElement.outerWidth(), + xPosition = dragElement.offset().left + dragWidth - e.pageX, + containerOffset = container.offset().left, + containerWidth = container.outerWidth(), + minLeft = containerOffset + 10, + maxLeft = containerOffset + containerWidth - dragWidth - 10; + + dragElement.parents().on("mousemove vmousemove", function(e) { + if( !dragging) { + dragging = true; + ( !window.requestAnimationFrame ) + ? setTimeout(function(){animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);}, 100) + : requestAnimationFrame(function(){animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);}); + } + }).on("mouseup vmouseup", function(e){ + dragElement.removeClass('draggable'); + resizeElement.removeClass('resizable'); + }); + e.preventDefault(); + }).on("mouseup vmouseup", function(e) { + dragElement.removeClass('draggable'); + resizeElement.removeClass('resizable'); + }); + } + + function animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement) { + var leftValue = e.pageX + xPosition - dragWidth; + //constrain the draggable element to move inside his container + if(leftValue < minLeft ) { + leftValue = minLeft; + } else if ( leftValue > maxLeft) { + leftValue = maxLeft; + } + + var widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%'; + + $('.draggable').css('left', widthValue).on("mouseup vmouseup", function() { + $(this).removeClass('draggable'); + resizeElement.removeClass('resizable'); + }); + + $('.resizable').css('width', widthValue); + + updateLabel(labelResizeElement, resizeElement, 'left'); + updateLabel(labelContainer, resizeElement, 'right'); + dragging = false; + } + + function updateLabel(label, resizeElement, position) { + if(position == 'left') { + ( label.offset().left + label.outerWidth() < resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ; + } else { + ( label.offset().left > resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ; + } + } +}); \ No newline at end of file diff --git a/tmpl/default.php b/tmpl/default.php new file mode 100644 index 0000000..5c5eead --- /dev/null +++ b/tmpl/default.php @@ -0,0 +1,39 @@ + + * @copyright Copyright (C) 2015 - 2020 Joomla!LABS. All rights reserved. + * @license GNU General Public License version 2 or later; see LICENSE.txt + * @link https://joomlalabs.com + */ + +defined('_JEXEC') or die; + +use Joomla\CMS\Factory; + +$document = Factory::getDocument(); +$document->addStyleSheet('/modules/mod_joomlalabs_imagecomparisonslider_module/src/imagecomparisonslider.css'); +$document->addScript('/modules/mod_joomlalabs_imagecomparisonslider_module/src/imagecomparisonslider.js'); + +// Access to module parameters +$left_image = $params->get('left_image'); +$left_alt = $params->get('left_alt'); +$left_caption = $params->get('left_caption'); + +$right_image = $params->get('right_image'); +$right_alt = $params->get('right_alt'); +$right_caption = $params->get('right_caption'); +?> + +
+ <?php echo $right_alt; ?> + + +
+ <?php echo $left_alt; ?> + +
+ + +