add showfn for jquery animations before displaying form. fix #46

Contribution by @jimlindstrom \o/
NicolasCARPi · Feb 13, 2018 · 166c9c9 · 166c9c9
1 parent 3712dac
commit 166c9c9
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 11 deletions.
diff --git a/demos/index.html b/demos/index.html
@@ -45,15 +45,23 @@ <h1>jQuery-jeditable</h1>
         <!-- FIRST ROW -->
         <div class='row'>
 
-            <!-- NORMAL TEXT -->
+            <!-- BASIC MINIMAL EXAMPLE -->
             <div class='card col-md-4'>
                 <div class='card-body'>
-                    <h4 class='card-title'>Normal text</h4>
-                    <h6 class='card-subtitle text-muted'>The most basic example</h6>
+                    <h4 class='card-title'>Basic example</h4>
+                    <h6 class='card-subtitle text-muted'>The most basic example (press enter to validate)</h6>
                 <p class="editable-text card-text">Click this text to edit it.</p>
                 </div>
             </div>
 
+            <!-- FULL EXAMPLE -->
+            <div class='card col-md-4'>
+                <div class='card-body'>
+                    <h4 class='card-title'>Complete example</h4>
+                    <h6 class='card-subtitle text-muted'>A more complete example with a bunch of options</h6>
+                <p class="editable-text-full card-text">Click this text to edit it.</p>
+                </div>
+            </div>
             <!-- NORMAL TEXTAREA -->
             <div class='card col-md-4'>
                 <div class='card-body'>
@@ -139,22 +147,35 @@ <h4 class='card-title'>Character counter</h4>
     </div>
         <script>
         $(document).ready(function() {
-            // NORMAL TEXT
-            $(".editable-text").editable("save.php", {
+            // BASIC MINIMAL EXAMPLE
+            $(".editable-text").editable("save.php");
+
+            // FULL EXAMPLE WITH PLENTY OF OPTIONS
+            $(".editable-text-full").editable("save.php", {
                 indicator : "<img src='img/indicator.gif' />",
                 type : "text",
-                label : "This is a label",
-                before : function(){console.log('Before function triggered')},
-                submit : 'OK',
-                tooltip : "Click to edit..."
+                before : function() { console.log('Before function triggered')},
+                callback : function() { console.log('Triggered after edit') },
+                cancel : 'Cancel',
+                cssclass : 'custom-class',
+                maxlength : 200,
+                label : 'This is a label',
+                onreset : function() { console.log('Triggered before reset') },
+                onsubmit : function() { console.log('Triggered before submit') },
+                showfn : function(elem) { elem.fadeIn('slow') },
+                submit : 'Save',
+                tooltip : "Click to edit...",
+                width : 160
             });
 
+
             // EXAMPLE 1 - NORMAL TEXTAREA
             $(".editable_textarea").editable("save.php", {
                 type   : 'textarea',
                 indicator : "<img src='img/indicator.gif' />",
                 select : true,
                 submit : 'OK',
+                label : "This is a label",
                 cancel : 'cancel',
                 cssclass : "editable"
             });

diff --git a/demos/main.css b/demos/main.css
@@ -20,3 +20,12 @@ body {
 .inline {
     display: inline;
 }
+
+/* for the full example */
+label {
+    margin-right: 5px;
+}
+
+.custom-class {
+    font-size: 110%;
+}
diff --git a/src/jquery.jeditable.js b/src/jquery.jeditable.js
@@ -20,13 +20,13 @@
   * @type  jQuery
   * @param String   target              (POST) URL or function to send edited content to
   * @param Hash     options             additional options
-  * @param Hash    options[ajaxoptions]  jQuery Ajax options. See https://api.jquery.com/jQuery.ajax/
+  * @param Hash    options[ajaxoptions] jQuery Ajax options. See https://api.jquery.com/jQuery.ajax/
   * @param String   options[before]     function to be executed before going into edit mode
   * @param Function options[callback]   function to run after submitting edited content
   * @param String   options[cancel]     cancel button value, empty means no button
   * @param Integer  options[cols]       number of columns if using textarea
   * @param String   options[cssclass]   CSS class to apply to input form. 'inherit' to copy from parent
-  * @param Mixed    options[data]       content given as parameter. String or function
+  * @param Mixed    options[data]       content loaded in the form. String or function
   * @param String   options[event]      jQuery event such as 'click' of 'dblclick'
   * @param Mixed    options[height]     'auto', 'none' or height in pixels
   * @param String   options[id]         POST parameter name of edited div id
@@ -46,6 +46,7 @@
   * @param String   options[placeholder] Placeholder text or html to insert when element is empty
   * @param Integer  options[rows]       number of rows if using textarea
   * @param String   options[select]     true or false, when true text is highlighted
+  * @param Function options[showfn]     function that can animate the element when switching to edit mode
   * @param String   options[size]       the size of the text field
   * @param String   options[style]      Style to apply to input form 'inherit' to copy from parent
   * @param String   options[submit]     submit button value, empty means no button
@@ -255,8 +256,17 @@
                 buttons.apply(form, [settings, self]);
 
                 /* Add created form to self. */
+                if (settings.showfn && $.isFunction(settings.showfn)) {
+                    form.hide();
+                }
+
                 $(self).append(form);
 
+                // execute the showfn
+                if (settings.showfn && $.isFunction(settings.showfn)) {
+                    settings.showfn(form);
+                }
+
                 /* Attach 3rd party plugin if requested. */
                 plugin.apply(form, [settings, self]);