From 0dfafdbf687530061f61d928abb57d91fdee0b6c Mon Sep 17 00:00:00 2001
From: dcooperdalrymple <dcooperdalrymple@gmail.com>
Date: Mon, 24 May 2021 15:05:08 -0500
Subject: [PATCH] Added z-index setting for all alerts.

---
 assets/sass/style.scss   | 8 +++-----
 inc/settings.php         | 9 +++++++++
 templates/loop-start.php | 5 ++++-
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/assets/sass/style.scss b/assets/sass/style.scss
index b353831..e86d2a8 100644
--- a/assets/sass/style.scss
+++ b/assets/sass/style.scss
@@ -57,15 +57,13 @@ $content-line: 1.5 * $content-text;
 
 $icon-text: $content-line;
 
-// Layering
-
-$messages-index: 10001;
-
 /*******************
  * Message         *
  *******************/
 
 section.ogrealert-messages {
+    --messages-index: 10001;
+
     display: block;
     width: 100%;
     height: auto;
@@ -73,7 +71,7 @@ section.ogrealert-messages {
     padding: 0;
 
     position: relative;
-    z-index: $messages-index;
+    z-index: var(--messages-index);
 
     font-size: 0;
     line-height: 0;
diff --git a/inc/settings.php b/inc/settings.php
index e60d463..70c4d38 100644
--- a/inc/settings.php
+++ b/inc/settings.php
@@ -28,6 +28,7 @@ class Settings {
     public static $message_transition_duration;
     public static $message_transition_animation;
     public static $message_dismiss_duration;
+    public static $message_index;
 
     public static $message_high_text_color;
     public static $message_high_background_color;
@@ -46,6 +47,7 @@ class Settings {
             'message_transition_duration' => '250',
             'message_dismiss_duration' => 'day',
             'message_animation' => 'slide',
+            'message_index' => '10001',
 
             'message_high_text_color' => 'rgba(255, 255, 255, 1)',
             'message_high_background_color' => 'rgba(220, 53, 69, 1)',
@@ -255,6 +257,13 @@ class SettingsPage {
             'default' => \OgreAlert\Settings::get_default('message_dismiss_duration'),
         ));
 
+        add_settings_field('ogrealert_message_index', __('Z-Index', 'ogrealert'), array(__CLASS__, 'field_text'), 'ogrealert', 'ogrealert_section_general', array(
+            'id' => 'ogrealert_settings_message_index',
+            'description' => 'Sets the z-index value of all OgreAlert messages. Useful for ensuring your messages appear above certain elements of your site.',
+            'placeholder' => \OgreAlert\Settings::get_default('message_index'),
+            'default' => \OgreAlert\Settings::get_default('message_index'),
+        ));
+
         add_settings_section('ogrealert_section_high', __('High Priority', 'ogrealert'), array(__CLASS__, 'section'), 'ogrealert');
 
         add_settings_field('ogrealert_message_high_text_color', __('Text Color', 'ogrealert'), array(__CLASS__, 'field_color'), 'ogrealert', 'ogrealert_section_high', array(
diff --git a/templates/loop-start.php b/templates/loop-start.php
index f3fec48..471aa31 100644
--- a/templates/loop-start.php
+++ b/templates/loop-start.php
@@ -7,6 +7,9 @@
 
 if (!defined('ABSPATH')) exit;
 
+$index = \OgreAlert\Settings::get('message_index');
+if (!is_numeric($index)) $index = 10001;
+
 ?>
-<section class="ogrealert-messages ogrealert-position-<?php esc_attr_e(\OgreAlert\Settings::get('message_position')); ?>">
+<section class="ogrealert-messages ogrealert-position-<?php esc_attr_e(\OgreAlert\Settings::get('message_position')); ?>" style="--messages-index: <?php echo intval($index); ?>">
     <ul class="ogrealert-messages__list">