editableGridDescription

by riaanc

HTML

<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://jsfiddle.net/riaanc/e67st5mg/7/show_js/"></script>


My editable grid description  
<br/>
<textarea class="demoDescripitionField" rows="1" style="resize: none;"></textarea>

CSS

/*No css to copy*/



/*FROM OTHER JSFIDDLE*/

.editableGridDialog-backdrop {
  display: block;
  opacity: 0.2;
  background-color: #000;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9998;
}

.editableGridDialog-dialog {
  background-color: white;
  color: rgb(51, 51, 51);
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  width: 800px;
  border-radius: 5px;
  text-align: left;
  position: fixed;
  left: 50%;
  top: 40%;
  margin-left: -400px;
  margin-top: -200px;
  overflow: hidden;
  z-index: 99999;
  display: none;
}

.editableGridDialog-header {
  padding: 8px;
  border-bottom: 1px solid #e5e5e5;
}

.editableGridDialog-header h4 {
  margin: 0;
  line-height: 1.42857143;
}

.editableGridDialog-body {
  padding: 15px;
}

JavaScript

//------------- DEMO USAGE ---------------
function RunDemo() {
  $(".demoDescripitionField").editableGridDescription({    
    dialogTitle: "Enter a dialog title here",
    onSuccess: function(userText, inputField) {
      alert("The user entered:\r\n " + userText)
    }    
  });

  
}

(function($) {RunDemo();})

//-------------------COPY FROM HERE TO END -----------------------
/* editableDescription
Run a jquery selector on a plain text input field. 
*/

(function($) {

  var dialogHtml = `
<div class="editableGridDialog-dialog">
  <div class="editableGridDialog-header">
    <h4><span class="egdesc-title"><span></h4>
  </div>
  <div class="editableGridDialog-body" style="min-height: 400px">
    <textarea class="egdesc-textarea form-control" style="resize: vertical;" rows="15"></textarea>
    <div style="text-align: right; padding-top: 8px;">
    	<button type="button" class="btn btn-primary egdesc-btnok" style="margin-right: 10px">Save</button>        	
      <button type="button" class="btn btn-default egdesc-btnclose">Cancel</button>        	
    <div>
    
</div>`;

  var dialog = $(dialogHtml);
  $(".egdesc-btnclose", dialog).click(function(){  		
  		  $(dialog).editableGridDialog('hide');
  });


  $.fn.editableGridDescription = function(aOptions) {    

    this.on("focus", function() {
      var options = aOptions;
      var targetObj = this;
      $(dialog).find(".egdesc-title").text(options.dialogTitle);

      $(".egdesc-textarea", dialog).val($(this).val());
            
      $(dialog).editableGridDialog();              
      $(".egdesc-textarea", dialog).focus();      
      
      $(".egdesc-btnok", dialog).off("click").click(function(){  		
  		  $(dialog).editableGridDialog('hide');
        var userText = $(".egdesc-textarea", dialog).val();
        $(targetObj).attr("title", userText);
        $(targetObj).val(userText);
        options.onSuccess(userText, targetObj);
  		});
      
    });

    return this;
  };
 
}(jQuery));