From f0ac38b8ae8a33c677d026452aa36d78dde380a5 Mon Sep 17 00:00:00 2001
From: Steve Sutton <steve@gaslightmedia.com>
Date: Thu, 18 Jan 2018 09:21:19 -0500
Subject: [PATCH] Updating the add event form

Setup to show how many characters are left for the intro field. Like it
is done in the admin side.
Also checking on the maxlength for other fields to make sure they are
set correctly.
---
 index.php                        |  6 ++---
 views/admin/events/edit.html     | 12 +++++-----
 views/front/events/frontAdd.html | 38 +++++++++++++++++++++++++++-----
 3 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/index.php b/index.php
index 84b19ef..e3a077c 100644
--- a/index.php
+++ b/index.php
@@ -4,7 +4,7 @@
  * Plugin URI: http://www.gaslightmedia.com/
  * Description: Gaslight Media Members Database.
 
- * Version: 1.6.72
+ * Version: 1.6.74
 
  * Author: Chuck Scott
  * Author URI: http://www.gaslightmedia.com/
@@ -22,7 +22,7 @@
  * @author Chuck Scott <cscott@gaslightmedia.com>
  * @license http://www.gaslightmedia.com Gaslightmedia
 
- * @version 1.6.72
+ * @version 1.6.74
 
  */
 
@@ -47,7 +47,7 @@ if (!defined('ABSPATH')) {
  *  so that we're sure the other add-ons see an up to date
  *  version from this plugin.
  */
-define('GLM_MEMBERS_EVENTS_PLUGIN_VERSION', '1.6.73');
+define('GLM_MEMBERS_EVENTS_PLUGIN_VERSION', '1.6.74');
 define('GLM_MEMBERS_EVENTS_PLUGIN_DB_VERSION', '0.1.4');
 
 // This is the minimum version of the GLM Members DB plugin require for this plugin.
diff --git a/views/admin/events/edit.html b/views/admin/events/edit.html
index 60858d5..54859d9 100644
--- a/views/admin/events/edit.html
+++ b/views/admin/events/edit.html
@@ -820,7 +820,7 @@
                 minWidth: 400,
                 dialogClass: "glm-dialog-no-close"
             });
-       
+
             // Ad a new category button action - pop-up dialog
             $('#newCategoryButton').click( function() {
                 $("#newCategoryDialog").dialog("open");
@@ -1326,14 +1326,14 @@
             $("#deniedReason").dialog({
                 autoOpen: false,
                 minWidth: 400,
-   
+
             });
-            
+
             // declined event dialog
 //            (function(){
 //                var notes = $('[name="notes"');
 //                var reason = $("#deniedText");
-//                
+//
 //                $('[name="status"]').on("change", function(){
 //                     var status = $(this).val();
 //                     if(status === '40'){
@@ -1341,9 +1341,9 @@
 //                     }
 //                });
 //                $("#deniedReasonSubmit").on("click", function(){
-//                    
+//
 //                    var reason_text = reason.val();
-//                    
+//
 //                    if(reason_text){
 //                        $("#deniedReason").dialog("close");
 //                            var content = " DENIED REASON: " + reason_text;
diff --git a/views/front/events/frontAdd.html b/views/front/events/frontAdd.html
index c2738a9..257bdef 100644
--- a/views/front/events/frontAdd.html
+++ b/views/front/events/frontAdd.html
@@ -40,7 +40,7 @@
         <div class="glm-add-event-form-item">
             <div class="glm-add-event-form-label"><label style="color: red;">Event Name: </label></div>
             <div class="glm-add-event-form-data">
-                <input type="text" name="event_name" value="" class="glm-form-text-input-medium glm-required" placeholder="Name of this event" pattern=".*\S+.*" title="This field is required"  required>
+                <input maxlength="100" type="text" name="event_name" value="" class="glm-form-text-input-medium glm-required" placeholder="Name of this event" pattern=".*\S+.*" title="This field is required"  required>
             </div>
         </div>
         {if $memberOnly && $settings.use_event_amenities}
@@ -215,13 +215,16 @@
         <div class="glm-add-event-form-item">
             <div class="glm-add-event-form-label{if $event.fieldRequired.url} glm-required{/if}"><label>Web Address (URL):</label></div>
             <div class="glm-add-event-form-data{if $event.fieldFail.url} glm-form-bad-input" data-tabid="glm-event-descr{/if}">
-                <input type="text" name="url" value="{$event.fieldData.url}" class="glm-form-text-input-medium" placeholder="ex: http://www.gaslightmedia.com">
+                <input maxlength="100" type="text" name="url" value="{$event.fieldData.url}" class="glm-form-text-input-medium" placeholder="ex: http://www.gaslightmedia.com">
             </div>
         </div>
         <div class="glm-add-event-form-item">
             <div class="glm-add-event-form-label{if $event.fieldRequired.intro} glm-required{/if}"><label style="color: red;">Intro Text:</label></div>
             <div class="glm-add-event-form-data{if $event.fieldFail.intro} glm-form-bad-input" data-tabid="glm-event-descr{/if}">
-                <textarea id="glm-intro" name="intro" class="glm-form-textarea" pattern=".*\S+.*" title="This field is required"  required>{$event.fieldData.intro}</textarea>
+                <input id="glm-intro" type="text" name="intro" class="glm-form-text-input glm-char-count" data-msgArea="intro-text-msg" value="{$event.fieldData.intro}" maxlength="165" required>
+                <span id="intro-text-msg"></span>
+                <br>
+                <br>
             </div>
         </div>
 
@@ -234,7 +237,7 @@
         <div id="cost" class="glm-add-event-form-item">
             <div class="glm-add-event-form-label{if $event.fieldRequired.cost} glm-required{/if}"><label>Cost:</label></div>
             <div class="glm-add-event-form-data{if $event.fieldFail.cost} glm-form-bad-input" data-tabid="glm-event-descr{/if}">
-                <input type="text" name="cost" value="{$event.fieldData.cost}" class="glm-form-text-input-medium">
+                <input maxlength="100" type="text" name="cost" value="{$event.fieldData.cost}" class="glm-form-text-input-medium">
             </div>
         </div>
         <div class="glm-add-event-form-item" id="glm-descr">
@@ -440,7 +443,7 @@ jQuery(document).ready(function($) {
     // Set masking for phone number fields - see http://digitalbush.com/projects/masked-input-plugin/
     $.mask.definitions['e'] = "[A-Za-z0-9: ]";
     $(".glm-phone-input").mask("999-999-9999? eeeeeeeeeee");
-    
+
     // Double check the form for valid entries before allowing it to be submitted.
     $('#frontForm').submit(function(){
         var introText = $('textarea[name=intro]').val();
@@ -457,6 +460,31 @@ jQuery(document).ready(function($) {
         }
         return true;
     });
+
+    // Count remaining characters in field
+    $('.glm-char-count').keyup( function() {
+        glmCharsRemaining($(this));
+    });
+
+    // Setup initial fields using limited character counts
+    $('.glm-char-count').each( function() {
+        glmCharsRemaining($(this));
+    });
+
+    // Display number of characters remaining in limited field
+    function glmCharsRemaining(f) {
+        var maxChar = f.attr('maxlength');
+        var len = f.val().length;
+        var rem = maxChar - len;
+        var msgArea = f.attr('data-msgArea');
+        if (rem < 0) {
+            rem = rem * -1;
+            $('#' + msgArea).html('<span class="glm-error">There are ' + rem + ' more characters than permitted</span>');
+        } else {
+            $('#' + msgArea).html('Characters remaining: ' + rem);
+        }
+    }
+
 });
 </script>
 {if $settings.use_venue_locations}
-- 
2.17.1