prep. v1.2.0, nav btn shape/border/pos, nav dots size, YAML, SCSS mixins

README.md

@@ -9,24 +9,24 @@ This project contains a Gantry Particle and is based on the default **Gantry Hel
 * Gantry Templating Framework and Theme
 
 ## Download
-Choose the correct download for your target platform. The Joomla Plugin System is supported for all Gantry themes globally or locally for the templates Helium and Hydrogen. The latest Particle version is **v1.0.5**.
+Choose the correct download for your target platform. The Joomla Plugin System is supported for all Gantry themes globally or locally for the templates Helium and Hydrogen. The latest Particle version is **v1.2.0**.
 
-**Attention:** When migrating from **v1.0.5** or below to **v1.1.0** or higher the existing settings of the Particle will be reset.
+**Attention:** When migrating from **v1.0.5** or below to **v1.2.0** or higher the existing settings of the Particle will be reset.
 ___
 **Default Particle:**
-[English](https://github.com/thexmanxyz/Owl-Carousel-Neo-Gantry/releases/download/v1.0.5/ocn.particle.only.EN.v1.0.5.zip) / [German](https://github.com/thexmanxyz/Owl-Carousel-Neo-Gantry/releases/download/v1.0.5/ocn.particle.only.DE.v1.0.5.zip)
+[English](https://github.com/thexmanxyz/Owl-Carousel-Neo-Gantry/releases/download/v1.2.0/ocn.particle.only.EN.v1.2.0.zip) / [German](https://github.com/thexmanxyz/Owl-Carousel-Neo-Gantry/releases/download/v1.2.0/ocn.particle.only.DE.v1.2.0.zip)
 
 **Legacy Particle - Gantry <5.3.2:**
-[English](https://github.com/thexmanxyz/Owl-Carousel-Neo-Gantry/releases/download/v1.0.5/ocn.particle.only.legacy.EN.v1.0.5.zip) / [German](https://github.com/thexmanxyz/Owl-Carousel-Neo-Gantry/releases/download/v1.0.5/ocn.particle.only.legacy.DE.v1.0.5.zip)
+[English](https://github.com/thexmanxyz/Owl-Carousel-Neo-Gantry/releases/download/v1.2.0/ocn.particle.only.legacy.EN.v1.2.0.zip) / [German](https://github.com/thexmanxyz/Owl-Carousel-Neo-Gantry/releases/download/v1.2.0/ocn.particle.only.legacy.DE.v1.2.0.zip)
 
 **Joomla Plugin - All Templates (Global):**
-[English](https://github.com/thexmanxyz/Owl-Carousel-Neo-Gantry/releases/download/v1.0.5/ocn.j3.global.EN.v1.0.5.zip) / [German](https://github.com/thexmanxyz/Owl-Carousel-Neo-Gantry/releases/download/v1.0.5/ocn.j3.global.DE.v1.0.5.zip)
+[English](https://github.com/thexmanxyz/Owl-Carousel-Neo-Gantry/releases/download/v1.2.0/ocn.j3.global.EN.v1.2.0.zip) / [German](https://github.com/thexmanxyz/Owl-Carousel-Neo-Gantry/releases/download/v1.2.0/ocn.j3.global.DE.v1.2.0.zip)
 
 **Joomla Plugin - Hydrogen:**
-[English](https://github.com/thexmanxyz/Owl-Carousel-Neo-Gantry/releases/download/v1.0.5/ocn.j3.hydrogen.EN.v1.0.5.zip) / [German](https://github.com/thexmanxyz/Owl-Carousel-Neo-Gantry/releases/download/v1.0.5/ocn.j3.hydrogen.DE.v1.0.5.zip)
+[English](https://github.com/thexmanxyz/Owl-Carousel-Neo-Gantry/releases/download/v1.2.0/ocn.j3.hydrogen.EN.v1.2.0.zip) / [German](https://github.com/thexmanxyz/Owl-Carousel-Neo-Gantry/releases/download/v1.2.0/ocn.j3.hydrogen.DE.v1.2.0.zip)
 
 **Joomla Plugin - Helium:**
-[English](https://github.com/thexmanxyz/Owl-Carousel-Neo-Gantry/releases/download/v1.0.5/ocn.j3.helium.EN.v1.0.5.zip) / [German](https://github.com/thexmanxyz/Owl-Carousel-Neo-Gantry/releases/download/v1.0.5/ocn.j3.helium.DE.v1.0.5.zip)
+[English](https://github.com/thexmanxyz/Owl-Carousel-Neo-Gantry/releases/download/v1.2.0/ocn.j3.helium.EN.v1.2.0.zip) / [German](https://github.com/thexmanxyz/Owl-Carousel-Neo-Gantry/releases/download/v1.2.0/ocn.j3.helium.DE.v1.2.0.zip)
 ___
 
 ## Automatic Installation (Joomla only)
@@ -68,18 +68,18 @@ Please be aware that the template folder path varies in dependence of the used C
 * Updated to latest version of [Owl Carousel 2](https://owlcarousel2.github.io/OwlCarousel2/)
 * Four new basic alignment styles for the slider
 * Two themes (black or white) for the new styles
-* Default Helium style with additional settings (dots and text)
+* Default Helium style with many additional settings (dots, navigation and text)
 * Lazy loading of images included
 * Timing of slides (annual or one-time)
-* Seven different control colors
+* Seven different control colors (independently per control type)
 * Dot navigation alignment
 * Configuration of navigation arrows
 * Full responsive configuration of all controls
 * Overlay image improvement
   * all six Helium overlays included
   * five new overlays
   * or use accent overlay of current template
-* Border radius (square or round)
+* Border radius for buttons, dots underlay and carousel (square or round)
 * Link can be applied to title and slide as well
 * Slide button can be "replaced" by the title link
 * Delay the loading of carousel controls
@@ -94,50 +94,73 @@ Please be aware that the template folder path varies in dependence of the used C
 ## Showroom
 Insight of the *Owl Carousel Neo - Gantry Particle* configuration:
 
-**Backend (1)** - *[General (1)](/screenshots/backend_general_1.png)*
+**Backend (1)** - *[General](/screenshots/backend_general_1.png)*
 
-![1](/screenshots/backend_general_1.png)
+![1](/screenshots/backend_general.png)
 
-**Backend (2)** - *[General (2)](/screenshots/backend_general_2.png)*
 
-![2](/screenshots/backend_general_2.png)
+**Backend (2)** - *[Appearance](/screenshots/backend_appearance.png)*
 
-**Backend (3)** - *[Controls](/screenshots/backend_controls.png)*
+![2](/screenshots/backend_appearance.png)
 
-![3](/screenshots/backend_controls.png)
 
-**Backend (4)** - *[Timing](/screenshots/backend_timing.png)*
+**Backend (3)** - *[Behavior](/screenshots/backend_behavior.png)*
 
-![4](/screenshots/backend_timing.png)
+![3](/screenshots/backend_behavior.png)
 
-**Backend (5)** - *[Appearance](/screenshots/backend_appearance.png)*
 
-![5](/screenshots/backend_appearance.png)
+**Backend (4)** - *[Controls](/screenshots/backend_controls.png)*
 
-**Backend (6)** - *[API](/screenshots/backend_api.png)*
+![4](/screenshots/backend_controls.png)
 
-![6](/screenshots/backend_api.png)
+**Backend (5)** - *[Slides (1)](/screenshots/backend_slides1.png)*
+
+![5](/screenshots/backend_slides1.png)
+
+**Backend (6)** - *[Slides (2)](/screenshots/backend_slides2.png)*
+
+![6](/screenshots/backend_slides2.png)
+
+**Backend (7)** - *[Timing](/screenshots/backend_timing.png)*
+
+![7](/screenshots/backend_timing.png)
+
+**Backend (8)** - *[API](/screenshots/backend_api.png)*
+
+![8](/screenshots/backend_api.png)
 ___
 
 A few example configurations which show the new design of the Particle:
 
 **Frontend (1)** - *[Demo 1 - Black Mode](/screenshots/frontend_demo1.png)*
 
-![5](/screenshots/frontend_demo1.png)
+![9](/screenshots/frontend_demo1.png)
 
 **Frontend (2)** - *[Demo 2 - Black Mode](/screenshots/frontend_demo2.png)*
 
-![6](/screenshots/frontend_demo2.png)
+![10](/screenshots/frontend_demo2.png)
 
 
 **Frontend (3)** - *[Demo 3 - White Mode](/screenshots/frontend_demo3.png)*
 
-![7](/screenshots/frontend_demo3.png)
+![11](/screenshots/frontend_demo3.png)
 
 
 **Frontend (4)** - *[Demo 4 - White Mode](/screenshots/frontend_demo4.png)*
 
-![8](/screenshots/frontend_demo4.png)
+![12](/screenshots/frontend_demo4.png)
+
+**Frontend (5)** - *[Demo 5 - Helium-based](/screenshots/frontend_demo5.png)*
+
+![13](/screenshots/frontend_demo5.png)
+
+**Frontend (6)** - *[Demo 6 - Helium-based](/screenshots/frontend_demo6.png)*
+
+![14](/screenshots/frontend_demo6.png)
+
+**Frontend (7)** - *[Demo 7 - Helium-based](/screenshots/frontend_demo6.png)*
+
+![15](/screenshots/frontend_demo6.png)
 
 ## Future Tasks
 - [ ] Include `aria` attributes for links

build/build.bat

@@ -29,7 +29,7 @@ set scr_log_files=0
 
 REM --- project variables ---
 set prj_id=ocn
-set prj_rev=v1.0.5
+set prj_rev=v1.2.0
 set prj_name=owlcarousel-neo
 set prj_fullname=Owl Carousel Neo
 set prj_title_hr=--------------------

platform/joomla/global/owlcarousel-neo.xml

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <extension type="file" method="upgrade" version="3.0">
     <name>Owl Carousel Neo - Gantry Particle (Global)</name>
-    <version>1.0.5</version>
-    <creationDate>16.01.2020</creationDate>
+    <version>1.2.0</version>
+    <creationDate>05.07.2020</creationDate>
     <author>Andreas Kar</author>
     <authorEmail>[email protected]</authorEmail>
     <authorUrl>https://gantryprojects.com</authorUrl>

platform/joomla/global/translation/de/owlcarousel-neo.xml

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <extension type="file" method="upgrade" version="3.0">
     <name>Owl Carousel Neo - Gantry Particle (Global)</name>
-    <version>1.0.5</version>
-    <creationDate>16.01.2020</creationDate>
+    <version>1.2.0</version>
+    <creationDate>05.07.2020</creationDate>
     <author>Andreas Kar</author>
     <authorEmail>[email protected]</authorEmail>
     <authorUrl>https://gantryprojects.com</authorUrl>

platform/joomla/helium/owlcarousel-neo.xml

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <extension type="file" method="upgrade" version="3.0">
     <name>Owl Carousel Neo - Gantry Particle (Helium)</name>
-    <version>1.0.5</version>
-    <creationDate>16.01.2020</creationDate>
+    <version>1.2.0</version>
+    <creationDate>05.07.2020</creationDate>
     <author>Andreas Kar</author>
     <authorEmail>[email protected]</authorEmail>
     <authorUrl>https://gantryprojects.com</authorUrl>

platform/joomla/helium/translation/de/owlcarousel-neo.xml

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <extension type="file" method="upgrade" version="3.0">
     <name>Owl Carousel Neo - Gantry Particle (Helium)</name>
-    <version>1.0.5</version>
-    <creationDate>16.01.2020</creationDate>
+    <version>1.2.0</version>
+    <creationDate>05.07.2020</creationDate>
     <author>Andreas Kar</author>
     <authorEmail>[email protected]</authorEmail>
     <authorUrl>https://gantryprojects.com</authorUrl>

platform/joomla/hydrogen/owlcarousel-neo.xml

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <extension type="file" method="upgrade" version="3.0">
     <name>Owl Carousel Neo - Gantry Particle (Hydrogen)</name>
-    <version>1.0.5</version>
-    <creationDate>16.01.2020</creationDate>
+    <version>1.2.0</version>
+    <creationDate>05.07.2020</creationDate>
     <author>Andreas Kar</author>
     <authorEmail>[email protected]</authorEmail>
     <authorUrl>https://gantryprojects.com</authorUrl>

platform/joomla/hydrogen/translation/de/owlcarousel-neo.xml

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <extension type="file" method="upgrade" version="3.0">
     <name>Owl Carousel Neo - Gantry Particle (Hydrogen)</name>
-    <version>1.0.5</version>
-    <creationDate>16.01.2020</creationDate>
+    <version>1.2.0</version>
+    <creationDate>05.07.2020</creationDate>
     <author>Andreas Kar</author>
     <authorEmail>[email protected]</authorEmail>
     <authorUrl>https://gantryprojects.com</authorUrl>

src/default/owlcarousel-neo.html.twig

@@ -49,12 +49,23 @@
         {% set heliumColor = neoTheme == 'theme-b' ? 'color-b' : 'color-w' %}
         {% set ctnClasses = ctnClasses ~ ' sh-' ~ heliumColor %}
     {% endif %}
-    {% set ctnClasses = ctnClasses ~ ' sh-' ~ helium.position|default('dots-d') %}
+    {% set ctnClasses = ctnClasses ~ ' sh-' ~ helium.dots_position|default('dots-d') %}
 
     {% set underlay = helium.underlay|default('disable') %}
     {% if underlay != 'disable' %}
         {% set ctnClasses = ctnClasses ~ ' sh-' ~ underlay %}
     {% endif %}
+
+    {% set navBorder = (helium.nav_border == 'default') ? 'nav-btn-b-def' : helium.nav_border %}
+    {% set ctnClasses = ctnClasses ~ ' sh-' ~ navBorder %}
+
+    {% if helium.nav_shape != 'default' %}
+        {% set ctnClasses = ctnClasses ~ ' sh-' ~ helium.nav_shape %}
+    {% endif %}
+
+    {% if helium.nav_position != 'default' %}
+        {% set ctnClasses = ctnClasses ~ ' sh-' ~ helium.nav_position %}
+    {% endif %}
 {% endif %}
 
 {% if all.edges and all.edges != 'square' %}
@@ -63,6 +74,11 @@
 
 {% set ctnClasses = ctnClasses ~ ' sa-' ~ all.dots_align|default('dots-c') %}
 
+{% set dotSize = all.dots_size|default('default') %}
+{% if dotSize != 'default' %}
+    {% set ctnClasses = ctnClasses ~ ' sa-' ~ dotSize %}
+{% endif %}
+
 {% if neo.style != 'helium' %}
     {% set hCtrlClass1 = (neoTheme == 'theme-b') ? 'control-d-g1' : 'control-d-g2' %}
 

src/default/owlcarousel-neo.yaml

@@ -60,7 +60,7 @@ form:
                 placeholder: 'Enter title'
 
         tab_appearance:
-            label: Styling
+            label: Appearance
             fields:
 
               neo.style:
@@ -80,27 +80,76 @@ form:
                 class: alert alert-info
                 content: The following settings only apply for <strong>Helium-based</strong> styles.
 
-              helium.position:
+              helium.nav_border:
                 type: select.select
-                label: Navigation Dots Position
-                description: Select a vertical position for the rendering of the navigation dots.
+                label: Navigation Buttons Border
+                description: Select a border type for the navigation buttons. Types denote with 'always' will always show a border, even on hovering the button.
                 default: default
                 options:
-                  dots-d: Default (12% from bottom)
-                  dots-t: Top
-                  dots-i: 12% from top
+                  default: Default
+                  nav-btn-b-def-a: Default Always
+                  nav-btn-b-fine: Fine (50% transparent)
+                  nav-btn-b-fine-a: Fine Always (50% transparent)
+                  nav-btn-b-none: None
+
+              helium.nav_shape:
+                type: select.select
+                label: Navigation Buttons Shape
+                description: Select a shape for the navigation buttons.
+                default: default
+                options:
+                  default: Default (round)
+                  nav-btn-s-square: Square
+                  nav-btn-s-round1: Rounded (2px)
+                  nav-btn-s-round2: Rounded (15px)
+                  nav-btn-s-partly1: Partly Rounded (2px)
+                  nav-btn-s-partly2: Partly Rounded (2px)
+                  nav-btn-s-partly3: Partly Rounded (15px)
+                  nav-btn-s-partly4: Partly Rounded (15px)
+
+              helium.nav_position:
+                type: select.select
+                label: Navigation Buttons Position
+                description: Select a position for the navigation buttons. Please be aware that this setting might cause an overlay with the <b>navigation dots</b> position or alignment.
+                default: default
+                options:
+                  default: Default (middle)
+                  nav-btn-p-t: Top (48px | 48px)
+                  nav-btn-p-tn: Top (16px | 16px)
+                  nav-btn-p-tn1: Top (10px | 10px)
+                  nav-btn-p-tc: Top (48px | 30%)
+                  nav-btn-p-tnc: Top (16px | 30%)
+                  nav-btn-p-tnc1: Top (10px | 30%)
+                  nav-btn-p-te: Top Edge (Corner)
+                  nav-btn-p-b: Bottom (48px | 48px)
+                  nav-btn-p-bn: Bottom (16px | 16px)
+                  nav-btn-p-bn1: Bottom (10px | 10px)
+                  nav-btn-p-bc: Bottom (48px | 30%)
+                  nav-btn-p-bnc: Bottom (16px | 30%)
+                  nav-btn-p-bnc1: Bottom (10px | 30%)
+                  nav-btn-p-be: Bottom Edge (Corner)
+
+              helium.dots_position:
+                type: select.select
+                label: Navigation Dots Position
+                description: Select a vertical position for the rendering of the navigation dots. Please be aware that this setting might cause an overlay with the <b>navigation buttons</b> position or alignment.
+                default: dots-d
+                options:
+                  dots-d: Default (Dynamic Bottom)
                   dots-b: Bottom
+                  dots-i: Dynamic Top
+                  dots-t: Top
 
               helium.underlay:
                 type: select.select
                 label: Navigation Dots Underlay
                 description: Select a styling for the navigation dots underlay.
-                default: default
+                default: disable
                 options:
                   disable: Disable
                   dots-u-square: Square
-                  dots-u-round1: Round-1
-                  dots-u-round2: Round-2
+                  dots-u-round1: Rounded (2px)
+                  dots-u-round2: Rounded (15px)
 
               _info_appearance_all:
                 type: separator.note
@@ -131,6 +180,17 @@ form:
                   long-arrow: Long Arrow
                   angle-double: Angle Double
 
+              all.dots_size:
+                type: select.select
+                label: Navigation Dots Size
+                description: Select a size for the navigation dots.
+                default: default
+                options:
+                  default: Default (15px)
+                  dots-size-s1: Small (12px)
+                  dots-size-s2: Smaller (10px)
+                  dots-size-t: Tiny (8px)
+
               all.dots_align:
                 type: select.select
                 label: Navigation Dots Align
@@ -213,7 +273,8 @@ form:
                 default: square
                 options:
                   square: Square
-                  round: Round
+                  round-1: Rounded (2px)
+                  round-2: Rounded (15px)
 
         tab_behavior:
             label: Behavior
@@ -356,7 +417,7 @@ form:
                   .linktitle:
                     type: input.text
                     label: Title Link Title
-                    description: Input the text for the item title link title attribute. If nothing is defined the title text from above will be used.
+                    description: Input the text for the item title link <code>title</code> attribute. If nothing is defined the title text from above will be used.
                   .desc:
                     type: textarea.textarea
                     label: Description
@@ -369,7 +430,7 @@ form:
                   .buttontitle:
                     type: input.text
                     label: Button Link Title
-                    description: Input the text for the button link title attribute. If nothing is defined the button text will be used.
+                    description: Input the text for the button link <code>title</code> attribute. If nothing is defined the button text will be used.
                   .buttonclass:
                     type: input.text
                     label: Button Classes