1.1.0

Add colored animations Move style in a media/css file Allow html code in title (href for example)
conseilgouz · Apr 23, 2024 · 268ef0f · 268ef0f
1 parent 825603b
commit 268ef0f
Show file tree

Hide file tree

Showing 10 changed files with 214 additions and 81 deletions.
diff --git a/forms/cg_skillset.xml b/forms/cg_skillset.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <form>
-	<fieldset name="cg_skillset" label="MOD_CG_SKILLSET_CREATE_LABE">
-		<field name="skillset_title" required="true" label="JGLOBAL_TITLE" description="MOD_CG_SKILLSET_TITLE_DESC" type="text" />
+	<fieldset name="cg_skillset" label="MOD_CG_SKILLSET_CREATE_LABEL">
+		<field name="skillset_title" required="true" label="JGLOBAL_TITLE" description="MOD_CG_SKILLSET_TITLE_DESC" type="text" filter="raw"/>
 		<field name="skillset_number" label="MOD_CG_SKILLSET_NUMBER_LABEL" description="MOD_CG_SKILLSET_NUMBER_DESC" type="text" />
 		<field name="skillset_enable_symbol" type="radio" label="MOD_CG_SKILLSET_ENABLE_SYMBOL_LABEL" description="MOD_CG_SKILLSET_ENABLE_SYMBOL_DESC" class="btn-group btn-group-yesno" default="1">
 			<option value="1">JYES</option>

diff --git a/language/en-GB/mod_cg_skillset.ini b/language/en-GB/mod_cg_skillset.ini
@@ -1,4 +1,4 @@
-MOD_CG_SKILLSET_XML_DESCRIPTION="CG SkillSet"
+MOD_CG_SKILLSET_XML_DESCRIPTION="<script src='../media/mod_cg_skillset/js/admin.js'></script>CG SkillSet. Define up to 4 animated skill sets."
 MOD_CG_SKILLSET_CREATE_LABEL="Add Items"
 JGLOBAL_TITLE="Title"
 MOD_CG_SKILLSET_TITLE_DESC="Enter the skill title here."
@@ -15,7 +15,7 @@ MOD_CG_SKILLSET_ICON_CLASS="Icon Class"
 MOD_CG_SKILLSET_ICON_OPTIONS_UPLAOD_LABEL="Upload Image"
 MOD_CG_SKILLSET_ICON_OPTIONS_UPLAOD_DESC="Upload an icon or image"
 MOD_CG_SKILLSET_ENTER_WEBFONT_CODE_LABEL="Enter Icon Class"
-MOD_CG_SKILLSET_ENTER_WEBFONT_CODE_DESC="Enter the icon class here. Make sure you have included the icon library like Fontawesome to your website. You can search for icons here <a href='https://fontawesome.com/icons'>https://fontawesome.com/icons</a>."
+MOD_CG_SKILLSET_ENTER_WEBFONT_CODE_DESC="Enter the icon class here. Make sure you have included the icon library like Fontawesome to your website. You can search for icons here <a href='https://fontawesome.com/icons' target='_blank'>https://fontawesome.com/icons</a>."
 MOD_CG_SKILLSET_ICON_POSITION_LABEL="Icon Position"
 MOD_CG_SKILLSET_ICON_POSITION_DESC="Select where you want to show icon i.e. Top, Right, Bottom or left"
 MOD_CG_SKILLSET_ICON_POSITION_TOP="Top"
@@ -39,7 +39,9 @@ MOD_CG_SKILLSET_TITLE_SIZE_LABEL="Title Size (Eg: 20)"
 MOD_CG_SKILLSET_NUMBER_SIZE_LABEL="Number Size (Eg: 20)"
 MOD_CG_SKILLSET_SYMBOL_SIZE_LABEL="Symbol Size (Eg: 20)"
 MOD_CG_SKILLSET_ICON_SIZE_LABEL="Icon Size (Eg: 20)"
-MOD_CG_SKILLSET_LOAD_JQUERY_LABEL="Load jQuery"
-MOD_CG_SKILLSET_LOAD_JQUERY_DESC="Select option 'No' if you had already loaded jQuery for your site."
-MOD_CG_SKILLSET_LOAD_FONT_AWESOME_LABEL="Load FontAwesome"
-MOD_CG_SKILLSET_LOAD_FONT_AWESOME_DESC="Select option 'No' if you had already loaded FontAwesome for your site."
+MOD_CG_SKILLSET_ANIMATION_FORM_LABEL="Colored animation ?"
+MOD_CG_SKILLSET_ANIMATION_ROUND_LABEL="Round"
+MOD_CG_SKILLSET_ANIMATION_RECTANGLE_LABEL="Rectangle"
+MOD_CG_SKILLSET_ANIMATION_STARTCOLOR_LABEL="Starting color ?"
+MOD_CG_SKILLSET_ANIMATION_PROGRESSCOLOR_LABEL="Progress color ?"
+MOD_CG_SKILLSET_ANIMBACK_COLOR_LABEL="Background color ?"
diff --git a/language/en-GB/mod_cg_skillset.sys.ini b/language/en-GB/mod_cg_skillset.sys.ini
@@ -1 +1 @@
-MOD_CG_SKILLSET_XML_DESCRIPTION="CG Skillset"
+MOD_CG_SKILLSET_XML_DESCRIPTION="CG SkillSet. Define up to 4 animated skill sets."
diff --git a/media/css/mod_cg_skillset.css b/media/css/mod_cg_skillset.css
@@ -11,6 +11,7 @@
 
 .counter-wrapper .counter-text-container {
 	text-align: center;
+    z-index:10;
 }
 
 .counter-sub-container .counter-wrapper .counter-text-container .counter-number {
@@ -42,11 +43,11 @@
 }
 
 .counter-sub-container .counter-wrapper .counter-text-container+.counter-icon {
-	margin-top: 20px;
+	 margin-top: 10px;
 }
 
 .counter-sub-container .counter-wrapper .counter-icon+.counter-text-container {
-	margin-top: 20px;
+	/*margin-top: 20px; */
 }
 
 .counter-sub-container .counter-wrapper .counter-icon img {
@@ -116,4 +117,17 @@
 	.counter-sub-container.jd-icon-position-right .counter-wrapper {
 		justify-content: normal;
 	}
-}
+}
+
+.circular-progress {
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin:auto;
+}
+.inner-circle {
+  position: absolute;
+  border-radius: 50%;
+  background-color: #d3d3d3;
+}
diff --git a/media/index.html b/media/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html><body></body></html>
+<!DOCTYPE html><html><body></body></html>
diff --git a/media/js/admin.js b/media/js/admin.js
@@ -0,0 +1,34 @@
+/**
+ * CG Skillset module
+ * @copyright   Copyright (C) 2024 ConseilGouz. All rights reserved.
+ * @license     GNU General Public License version 3 or later; see LICENSE
+ * From JD SkillSet 1.7
+ */
+document.addEventListener("DOMContentLoaded", function(){
+    // check CG custom classes
+    fields = document.querySelectorAll('.view-module .clear');
+    for(var i=0; i< fields.length; i++) {
+        let field = fields[i];
+        field.parentNode.parentNode.style.clear = "both";
+    }
+    fields = document.querySelectorAll('.view-module .left');
+    for(var i=0; i< fields.length; i++) {
+        let field = fields[i];
+        field.parentNode.parentNode.style.float = "left";
+    }
+    fields = document.querySelectorAll('.view-module .right');
+    for(var i=0; i< fields.length; i++) {
+        let field = fields[i];
+        field.parentNode.parentNode.style.float = "right";
+    }
+    fields = document.querySelectorAll('.view-module .half');
+    for(var i=0; i< fields.length; i++) {
+        let field = fields[i];
+        field.style.width = "50%";
+    }
+    fields = document.querySelectorAll('.view-module .gridauto');
+    for(var i=0; i< fields.length; i++) {
+        let field = fields[i];
+        field.parentNode.parentNode.style.gridColumn = "auto";
+    }
+})
diff --git a/media/js/cg_skillset.js b/media/js/cg_skillset.js
@@ -4,22 +4,100 @@
  * @license     GNU General Public License version 3 or later; see LICENSE
  * From JD SkillSet 1.7
  */
+ var options_skillset = [];
+
 document.addEventListener('DOMContentLoaded', function() {
     mains = document.querySelectorAll('.cg_skillset');
     for(var i=0; i<mains.length; i++) {
         var $this = mains[i];
         myid = $this.getAttribute("data");
+        options_skillset[myid] = Joomla.getOptions('cg_skillset_'+myid);
+        init_skill(myid);
         go_skill(myid);
     }
 })
+function init_skill(myid) {
+    let options = options_skillset[myid];
+    if (options.customstyle == "0") return;
+    for (var i=0; i< options.skillsets;i++) {
+        id = '#skillset-skillsets'+i+'-'+myid;
+        field = document.querySelector(id+' .counter-title');
+        if (field) {
+            field.style.fontSize = options.titleSize + 'px';
+            field.style.color = options.titleColor;
+        }
+        field = document.querySelector(id+' .counter-title a');
+        if (field) {
+            field.style.fontSize = options.titleSize + 'px';
+            field.style.color = options.titleColor;
+        }
+        field = document.querySelector(id+' .counter-number .count');
+        if (field) {
+            field.style.fontSize = options.numberSize + 'px';
+            field.style.color = options.numberColor;
+        }
+        field = document.querySelector(id+' .counter-number .symbol');
+        if (field) {
+            field.style.fontSize = options.symbolSize + 'px';
+            field.style.color = options.symbolColor;
+        }
+        field = document.querySelector(id+' .count-icon');
+        if (field) {
+            field.style.fontSize = options.iconSize + 'px';
+            field.style.color = options.iconColor;
+        }
+    }
+    if (options.animationShape == "0") return;
+    id = '#cg_skillset'+myid;
+    fields = document.querySelectorAll(id+" .circular-progress");
+    fields.forEach(sizes);
+    fields = document.querySelectorAll(id+" .inner-circle");
+    fields.forEach(sizesIn);
+
+    fields = document.querySelectorAll(id+" .inner-circle");
+    for (var i=0; i< fields.length;i++) {
+        fields[i].style.backgroundColor = fields[i].getAttribute("data-inner-circle-color");
+    }
+}
+const sizes = (EL) => {
+    let id = EL.getAttribute('data-id');
+    let options = options_skillset[id];
+    text_container = EL.querySelector('.counter-text-container');
+    val = Math.max(text_container.offsetWidth, text_container.offsetHeight);
+    if (options.animationShape == "round") {
+        EL.style.width=  (val + 40) + 'px';
+        EL.style.height= (val + 40) + 'px';
+    }
+    if (options.animationShape == "rect") {
+        EL.style.width=  (val + 40) + 'px';
+        EL.style.height= (val -10) + 'px';
+        EL.style.borderRadius = "30%";
+    }
+}
+const sizesIn = (EL) => {
+    let id = EL.getAttribute('data-id');
+    let options = options_skillset[id];
+    EL.style.width=  (parseInt(EL.parentNode.offsetWidth) - 20) + 'px';
+    EL.style.height= (parseInt(EL.parentNode.offsetHeight)- 20) + 'px';
+    if (options.animationShape == "rect") {
+        EL.style.borderRadius = "30%";
+    }
+}
 function go_skill(id)  {
-    window.onscroll = function() {
-        var _element = document.querySelector('#cg_skillset'+id+'.skillset-not-counted');
-        if ( _element && _element.length != 0 && elementInViewport(_element)) {
+    var _element = document.querySelector('#cg_skillset'+id+'.skillset-not-counted');
+    // Element on screen ?
+    if ( _element && _element.length != 0 && elementInViewport(_element)) {
             _element.classList.remove('skillset-not-counted');
             counts = document.querySelectorAll('#'+_element.id+" .count").forEach(counter);
-            }
-        };
+    } else { // not visible : check on scroll
+        window.onscroll = function() {
+            var _element = document.querySelector('#cg_skillset'+id+'.skillset-not-counted');
+            if ( _element && _element.length != 0 && elementInViewport(_element)) {
+                _element.classList.remove('skillset-not-counted');
+                counts = document.querySelectorAll('#'+_element.id+" .count").forEach(counter);
+                }
+            };
+    }
 }
 // from https://stackoverflow.com/questions/123999/how-can-i-tell-if-a-dom-element-is-visible-in-the-current-viewport
 var elementInViewport = function(element) {
@@ -52,14 +130,25 @@ const counter = (EL) => {
   let curr = start; // Set current at start position
 
   const timeStart = Date.now();
+  width = EL.style.width;
+  // document.documentElement.style.setProperty('--progress-bar-width', width+"px");
 
   const loop = () => {
+    progressBar = EL.parentNode.parentNode.parentNode;
+    progressColor = progressBar.getAttribute("data-progress-color");
+
     let elaps = Date.now() - timeStart;
     if (elaps > duration) elaps = duration; // Stop the loop
     const norm = ease.inOutQuad(elaps / duration); // normalised value + easing
     const step = norm * range; // Calculate the value step
     curr = start + step; // Increment or Decrement current value
     EL.textContent = Math.trunc(curr); // Apply to UI as integer
+    percent = (curr / end) * 100;
+    if (progressColor) { // progressbar exisrs
+        progressBar.style.background = `conic-gradient(${progressColor} ${
+        percent * 3.6
+        }deg,${progressBar.getAttribute("data-bg-color")} 0deg)`;
+    }
     if (elaps < duration) requestAnimationFrame(loop); // Loop
   };
 

diff --git a/mod_cg_skillset.xml b/mod_cg_skillset.xml
@@ -2,8 +2,8 @@
 <extension type="module" version="4.0" client="site" method="upgrade">
 	<name>CG SkillSet</name>
 	<author>ConseilGouz</author>
-	<creationDate>2021-04-21</creationDate>
-	<version>1.0.0</version>
+	<creationDate>2021-04-23</creationDate>
+	<version>1.1.0</version>
 	<authorEmail>pascal.leconte@conseilgouz.com</authorEmail>
 	<authorUrl>https://www.conseilgouz.com</authorUrl>
 	<description>MOD_CG_SKILLSET_XML_DESCRIPTION</description>
@@ -53,15 +53,23 @@
 					<option value="1">JYES</option>
 					<option value="0">JNO</option>
 				</field>
-				<field name="titleColor" type="color" label="MOD_CG_SKILLSET_TITLE_COLOR_LABEL" showon="customsStyle:1" default="#42495b" />
-				<field name="numberColor" type="color" label="MOD_CG_SKILLSET_NUMBER_COLOR_LABEL" showon="customsStyle:1" default="#373738" />
-				<field name="symbolColor" type="color" label="MOD_CG_SKILLSET_SYMBOL_COLOR_LABEL" showon="customsStyle:1" default="#373738" />
-				<field name="iconColor" type="color" label="MOD_CG_SKILLSET_ICON_COLOR_LABEL" showon="customsStyle:1" default="#03a9f5" />
-				<field name="titleSize" type="number" min="10" label="MOD_CG_SKILLSET_TITLE_SIZE_LABEL" hint="20" showon="customsStyle:1" default="20" />
-				<field name="numberSize" type="number" min="10" label="MOD_CG_SKILLSET_NUMBER_SIZE_LABEL" hint="32" showon="customsStyle:1" default="32" />
-				<field name="symbolSize" type="number" min="10" label="MOD_CG_SKILLSET_SYMBOL_SIZE_LABEL" hint="28" showon="customsStyle:1" default="28" />
-				<field name="iconSize" type="number" min="10" label="MOD_CG_SKILLSET_ICON_SIZE_LABEL" hint="28" showon="customsStyle:1" default="28" />
-			</fieldset>
+				<field name="titleColor" type="color" label="MOD_CG_SKILLSET_TITLE_COLOR_LABEL" showon="customsStyle:1" default="#42495b" class="half gridauto" />
+				<field name="titleSize" type="number" min="10" label="MOD_CG_SKILLSET_TITLE_SIZE_LABEL" hint="20" showon="customsStyle:1" default="20" class="half gridauto"/>
+				<field name="numberColor" type="color" label="MOD_CG_SKILLSET_NUMBER_COLOR_LABEL" showon="customsStyle:1" default="#373738" class="half gridauto"/>
+				<field name="numberSize" type="number" min="10" label="MOD_CG_SKILLSET_NUMBER_SIZE_LABEL" hint="32" showon="customsStyle:1" default="32" class="half gridauto" />
+				<field name="symbolColor" type="color" label="MOD_CG_SKILLSET_SYMBOL_COLOR_LABEL" showon="customsStyle:1" default="#373738"  class="half gridauto"/>
+				<field name="symbolSize" type="number" min="10" label="MOD_CG_SKILLSET_SYMBOL_SIZE_LABEL" hint="28" showon="customsStyle:1" default="28"  class="half gridauto"/>
+				<field name="iconColor" type="color" label="MOD_CG_SKILLSET_ICON_COLOR_LABEL" showon="customsStyle:1" default="#03a9f5"  class="half gridauto"/>
+				<field name="iconSize" type="number" min="10" label="MOD_CG_SKILLSET_ICON_SIZE_LABEL" hint="28" showon="customsStyle:1" default="28"  class="half gridauto"/>
+				<field name="animationShape" type="radio" label="MOD_CG_SKILLSET_ANIMATION_FORM_LABEL" showon="customsStyle:1" default="0" class="btn-group btn-group-yesno" >
+					<option value="0">JNO</option>
+					<option value="round">MOD_CG_SKILLSET_ANIMATION_ROUND_LABEL</option>
+					<option value="rect">MOD_CG_SKILLSET_ANIMATION_RECTANGLE_LABEL</option>
+                </field>
+				<field name="animationStartColor" type="color" label="MOD_CG_SKILLSET_ANIMATION_STARTCOLOR_LABEL" showon="customsStyle:1[AND]animationShape!:0" default="#8ee58e"  class="half gridauto"/>
+				<field name="animationProgressColor" type="color" label="MOD_CG_SKILLSET_ANIMATION_PROGRESSCOLOR_LABEL" showon="customsStyle:1[AND]animationShape!:0" default="#007eff"  class="half gridauto"/>
+                <field name="animationBackground" type="color" label="MOD_CG_SKILLSET_ANIMBACK_COLOR_LABEL" showon="customsStyle:1[AND]animationShape!:0" default="#d3d3d3" class="half gridauto"/>
+            </fieldset>
 			<fieldset name="advanced">
 				<field name="layout" type="modulelayout" label="JFIELD_ALT_LAYOUT_LABEL" description="JFIELD_ALT_MODULE_LAYOUT_DESC" default="default" />
 				<field name="moduleclass_sfx" type="textarea" label="COM_MODULES_FIELD_MODULECLASS_SFX_LABEL" description="COM_MODULES_FIELD_MODULECLASS_SFX_DESC" rows="3"/>

diff --git a/mod_cg_skillset_changelog.xml b/mod_cg_skillset_changelog.xml
@@ -1,4 +1,19 @@
 <changelogs>
+	<changelog>
+		<element>mod_cg_skillset</element>
+		<type>Module</type>
+		<version>1.1.0</version>
+        <note>
+            <item>Update : 23/04/2024</item>
+        </note>
+		<addition>
+			<item>Add colored animations</item>
+		</addition>
+        <change>
+            <item>Move style in a media/css file</item>
+            <item>Allow html code in title (href for example)</item>
+        </change>
+    </changelog>
 	<changelog>
 		<element>mod_cg_skillset</element>
 		<type>Module</type>