first commit

JoomlaLABS · Aug 21, 2020 · e1bc690 · e1bc690
1 parent ec20261
commit e1bc690
Show file tree

Hide file tree

Showing 8 changed files with 447 additions and 4 deletions.
diff --git 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., <http://fsf.org/>
  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.
 
-    <one line to give the program's name and a brief idea of what it does.>
-    Copyright (C) <year>  <name of author>
+    {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.
 
-  <signature of Ty Coon>, 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
@@ -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
@@ -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
@@ -0,0 +1,15 @@
+<?php
+/**
+ * @package    joomlalabs_imagecomparisonslider_module
+ *
+ * @author     Joomla!LABS <[email protected]>
+ * @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
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="utf-8"?>
+<extension type="module" version="3.8" client="site" method="upgrade">
+	<name>MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE</name>
+	<creationDate>19/08/20</creationDate>
+	<author>Joomla!LABS</author>
+	<authorEmail>[email protected]</authorEmail>
+	<authorUrl>https://joomlalabs.com</authorUrl>
+	<copyright>Copyright (C) 2015 - 2020 Joomla!LABS. All rights reserved.</copyright>
+	<license>GNU General Public License version 2 or later; see LICENSE.txt</license>
+	<version>1.0.0</version>
+	<description>MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_XML_DESCRIPTION</description>
+
+	<files>
+		<filename module="mod_joomlalabs_imagecomparisonslider_module">mod_joomlalabs_imagecomparisonslider_module.php</filename>
+		<folder>tmpl</folder>
+		<folder>language</folder>
+		<folder>src</folder>
+		<filename>mod_joomlalabs_imagecomparisonslider_module.xml</filename>
+	</files>
+
+	<!-- Update servers -->
+	<updateservers>
+		<server type="extension" priority="1" name="Joomla!LABS Image Comparison Slider Module Update Server">
+			https://raw.githubusercontent.com/JoomlaLABS/updateservers/master/mod_joomlalabs_imagecomparisonslider_module.xml
+		</server>
+	</updateservers>
+
+	<config>
+		<fields name="params">
+			<fieldset name="basic">
+				<field
+						name="left_image"
+						type="media"
+						label="MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_LEFT_IMAGE"
+						description="MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_LEFT_IMAGE_DESCRIPTION"
+				/>
+				<field
+						name="left_alt"
+						type="text"
+						label="MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_LEFT_IMAGE"
+						description="MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_LEFT_IMAGE_DESCRIPTION"
+						size="30"
+				/>
+				<field
+						name="left_caption"
+						type="text"
+						label="MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_LEFT_IMAGE"
+						description="MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_LEFT_IMAGE_DESCRIPTION"
+						size="30"
+				/>
+				<field
+						name="right_image"
+						type="media"
+						label="MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_RIGHT_IMAGE"
+						description="MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_RIGHT_IMAGE_DESCRIPTION"
+				/>
+				<field
+						name="right_alt"
+						type="text"
+						label="MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_RIGHT_IMAGE"
+						description="MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_RIGHT_IMAGE_DESCRIPTION"
+						size="30"
+				/>
+				<field
+						name="right_caption"
+						type="text"
+						label="MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_RIGHT_IMAGE"
+						description="MOD_JOOMLALABS_IMAGECOMPARISONSLIDER_MODULE_RIGHT_IMAGE_DESCRIPTION"
+						size="30"
+				/>
+			</fieldset>
+			<fieldset name="advanced">
+				<field
+						name="moduleclass_sfx"
+						type="text"
+						label="COM_MODULES_FIELD_MODULECLASS_SFX_LABEL"
+						description="COM_MODULES_FIELD_MODULECLASS_SFX_DESC" />
+				<field
+						name="mymodulelayout"
+						type="modulelayout"
+						label="JFIELD_ALT_LAYOUT_LABEL"
+						description="JFIELD_ALT_MODULE_LAYOUT_DESC"
+				/>
+			</fieldset>
+		</fields>
+	</config>
+</extension>
diff --git a/src/imagecomparisonslider.css 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;
+}