Added extra functionality and styling -- Added some different out-of-…

…the box styling and an underlay and instantSettings option

README.md

@@ -30,13 +30,20 @@ You can use the following options.
 `cookieDays` default: 365 // Amount of days the cookie is saved before erased by the browser.  
 `classPrefix` default: "AMPEr" // If you want to use you own styling.    
 `debugMode` default: false // Change this to true if you want to open the modal every pageload.  
-`extraClass` default: "" // Put an extra class for styling on the modal
+`extraClass` default: "" // Put an extra class for styling on the modal  
+`underlay` default: false // Adds an div with id AMPEr_underlay to the document when the modal is active.  
+`instantSettings` default: false // Skips the intro and go straight to the settings.  
 `language` default: "en" // What language from the lexicon we want to use.  
 `lexicon` // see below for more information.  
 `analyticCallback` default: `function () { console.log("Consent for analytic cookies!");` // Triggers when it has consent for analytic cookies.    
 `marketingCallback` default: `function () { console.log("Consent for marketing cookies!");` // Triggers when it has consent for marketing cookies.  
 `personalizationCallback` default: `function () { console.log("Consent for personalization cookies!");` // Triggers when it has consent for personalization cookies.  
 
+## extraClass
+I added some default extra classes for a little different out of the box styling  
+We can use the following as a value for `extraClass`  
+`AMPEr--centered` This style has the modal centered in the screen, could be used with an underlay and instantSettings.  
+`AMPEr--bottom` This style has the intro modal as a bottom bar without the title, the settings are centered.  
 
 # Lexicon options
 I'm just gonna paste the default lexicon here, you can change these values to make use of other icons / text.  

dist/AMPEr/css/AMPEr.css

@@ -208,12 +208,15 @@ html.using-mouse :focus + label span:last-child {
     display: block; }
 
 /* 7. Extra styling options */
+/* 7.1 bottom bar */
 .AMPEr_modal.AMPEr--bottom {
   bottom: 0;
   left: 0;
   right: 0;
   width: 100%;
   border-radius: 0; }
+  .AMPEr_modal.AMPEr--bottom.AMPEr--settings-active {
+    padding: 0; }
   .AMPEr_modal.AMPEr--bottom #AMPEr_modal_1 {
     align-items: center;
     justify-content: space-between; }
@@ -232,11 +235,12 @@ html.using-mouse :focus + label span:last-child {
     background-color: white;
     padding: 1rem;
     border-radius: 0.625rem;
-    max-width: 700px;
+    max-width: 400px;
     position: fixed;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%); }
+    transform: translate(-50%, -50%);
+    width: 100%; }
   @media screen and (max-width: 768px) {
     .AMPEr_modal.AMPEr--bottom #AMPEr_modal_1 {
       flex-wrap: wrap; }
@@ -247,3 +251,46 @@ html.using-mouse :focus + label span:last-child {
         margin-top: 0;
         display: flex;
         justify-content: flex-end; } }
+  @media screen and (max-width: 420px) {
+    .AMPEr_modal.AMPEr--bottom #AMPEr_modal_2 {
+      width: 100%;
+      max-width: none;
+      top: unset;
+      left: unset;
+      bottom: 0;
+      transform: none;
+      border-radius: 0;
+      border-top-left-radius: 0.625rem;
+      border-top-right-radius: 0.625rem; }
+      .AMPEr_modal.AMPEr--bottom #AMPEr_modal_2 .AMPEr_modal_buttons {
+        justify-content: flex-end; } }
+
+/* 7.2 Centered (good for instant settings */
+.AMPEr_modal.AMPEr--centered {
+  left: 0;
+  right: 0;
+  margin-right: 0;
+  bottom: 0;
+  width: 100%;
+  border-radius: 0;
+  border-top-left-radius: 0.625rem;
+  border-top-right-radius: 0.625rem; }
+  @media screen and (min-width: 480px) {
+    .AMPEr_modal.AMPEr--centered {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      bottom: unset;
+      transform: translate(-50%, -50%);
+      width: 22rem;
+      border-radius: 0.625rem; } }
+
+/* 8 Underlay */
+#AMPEr_Underlay {
+  z-index: -1;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4); }

dist/AMPEr/js/AMPEr.js

@@ -39,6 +39,8 @@ var AMPEr = function () {
     extraClass: "",
     debugMode: false,
     language: "en",
+    underlay: false,
+    instantSettings: false,
     lexicon: {
       en: {
         modalTitle: "<i class='AMPEr_icon--rozekoek' aria-hidden='true'></i>Cookies!",
@@ -135,10 +137,19 @@ var AMPEr = function () {
     html += '</div>';
     html += '</div>';
     html += '</div></div>';
+
+    if (settings.underlay) {
+      html += '<div id="AMPEr_Underlay"></div>';
+    }
+
     document.body.insertAdjacentHTML('beforeend', html);
     modal = document.getElementById('AMPEr_Cookies');
     setFocus();
     addModalListeners();
+
+    if (settings.instantSettings) {
+      showSettings();
+    }
   };
   /**
    * Adds all the functions for the checkboxes, buttons and keydown's
@@ -273,6 +284,11 @@ var AMPEr = function () {
     var modal = document.getElementById("AMPEr_Cookies");
     modal.remove();
     firstFocusedElement.focus();
+
+    if (settings.underlay) {
+      var underlay = document.getElementById("AMPEr_Underlay");
+      underlay.remove();
+    }
   };
   /**
    * Shows the settings content, sets focus to it
@@ -283,8 +299,10 @@ var AMPEr = function () {
   var showSettings = function showSettings() {
     modal1 = document.getElementById("AMPEr_modal_1");
     modal2 = document.getElementById("AMPEr_modal_2");
+    var modal = document.getElementById("AMPEr_Cookies");
     modal1.classList.remove("AMPEr--active");
     modal2.classList.add("AMPEr--active");
+    modal.classList.add("AMPEr--settings-active");
     setFocusSettings();
   };
   /**

dist/js/build/main.js

@@ -4,8 +4,10 @@ function main() {
   a11yFocus();
   AMPEr.init({
     debugMode: true,
-    extraClass: "AMPEr--bottom",
-    language: "en"
+    extraClass: "AMPEr--centered",
+    language: "en",
+    underlay: true,
+    instantSettings: true
   });
 }
 

src/AMPEr/js/AMPEr.js

@@ -41,6 +41,8 @@ var AMPEr = (function () {
         extraClass: "",
         debugMode: false,
         language: "en",
+        underlay: false,
+        instantSettings: false,
         lexicon: {
             en: {
                 modalTitle: "<i class='AMPEr_icon--rozekoek' aria-hidden='true'></i>Cookies!",
@@ -100,6 +102,7 @@ var AMPEr = (function () {
     const showCookieWindow = function () {
         let html;
 
+
         html = '<div class="' + settings.classPrefix + '_modal '+ settings.extraClass + '" id="AMPEr_Cookies" role="dialog" aria-labelledby="AMPEr_title" aria-describedby="AMPEr_description">';
         html += '<div class="' + settings.classPrefix + '_modal_inner">';
         html += '<div id="AMPEr_modal_1" class="AMPEr--active">';
@@ -139,11 +142,13 @@ var AMPEr = (function () {
         html += '</div>';
         html += '</div>';
         html += '</div></div>';
+        if (settings.underlay){ html += '<div id="AMPEr_Underlay"></div>'}
 
         document.body.insertAdjacentHTML('beforeend', html);
         modal = document.getElementById('AMPEr_Cookies');
         setFocus();
         addModalListeners();
+        if (settings.instantSettings){ showSettings(); }
     };
 
     /**
@@ -235,6 +240,11 @@ var AMPEr = (function () {
         const modal = document.getElementById("AMPEr_Cookies");
         modal.remove();
         firstFocusedElement.focus();
+
+        if (settings.underlay){
+            const underlay = document.getElementById("AMPEr_Underlay");
+            underlay.remove();
+        }
     }
 
 
@@ -245,9 +255,11 @@ var AMPEr = (function () {
     const showSettings = function () {
         modal1 = document.getElementById("AMPEr_modal_1");
         modal2 = document.getElementById("AMPEr_modal_2");
+        let modal = document.getElementById("AMPEr_Cookies")
 
         modal1.classList.remove("AMPEr--active");
         modal2.classList.add("AMPEr--active");
+        modal.classList.add("AMPEr--settings-active");
 
         setFocusSettings();
     }

src/AMPEr/scss/AMPEr.scss

@@ -311,13 +311,18 @@ html.using-mouse :focus + label span:last-child {
 }
 
 /* 7. Extra styling options */
+/* 7.1 bottom bar */
 .AMPEr_modal.AMPEr--bottom {
     bottom: 0;
     left: 0;
     right: 0;
     width: 100%;
     border-radius: 0;
 
+    &.AMPEr--settings-active {
+        padding: 0;
+    }
+
     #AMPEr_modal_1 {
         &.AMPEr--active {
             display:flex;
@@ -343,11 +348,12 @@ html.using-mouse :focus + label span:last-child {
         background-color: white;
         padding: 1rem;
         border-radius: rem(10px);
-        max-width:700px;
+        max-width:400px;
         position: fixed;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
+        width: 100%;
     }
 
     @media screen and (max-width: 768px){
@@ -366,6 +372,55 @@ html.using-mouse :focus + label span:last-child {
         }
     }
 
+    @media screen and (max-width: 420px){
+        #AMPEr_modal_2 {
+            width: 100%;
+            max-width: none;
+            top: unset;
+            left: unset;
+            bottom: 0;
+            transform: none;
+            border-radius: 0;
+            border-top-left-radius: 0.625rem;
+            border-top-right-radius: 0.625rem;
+
+            .AMPEr_modal_buttons {
+                justify-content: flex-end;
+            }
+        }
+    }
+}
+
+/* 7.2 Centered (good for instant settings */
+.AMPEr_modal.AMPEr--centered {
+    left: 0;
+    right: 0;
+    margin-right: 0;
+    bottom: 0;
+    width: 100%;
+    border-radius: 0;
+    border-top-left-radius: 0.625rem;
+    border-top-right-radius: 0.625rem;
+
+    @media screen and (min-width: 480px){
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        bottom: unset;
+        transform: translate(-50%, -50%);
+        width: 22rem;
+        border-radius: 0.625rem;
 
+    }
+}
 
+/* 8 Underlay */
+#AMPEr_Underlay {
+    z-index: -1;
+    position:fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(0,0,0,0.4);
 }

src/js/main.js

@@ -4,8 +4,10 @@ function main() {
 
     AMPEr.init({
         debugMode: true,
-        extraClass: "AMPEr--bottom",
+        extraClass: "AMPEr--centered",
         language: "en",
+        underlay: true,
+        instantSettings: true,
     });
 }