git.roojs.org Git - roojs1/blob - Roo/bootstrap/Markdown.js

   1
   2 /*
   3  * - LGPL
   4  */
   5
   6 /**
   7  * @class Roo.bootstrap.Markdown
   8  * @extends Roo.bootstrap.TextArea
   9  * Bootstrap Showdown editable area
  10  * @cfg {string} content
  11  *
  12  * @constructor
  13  * Create a new Showdown
  14  */
  15
  16 Roo.bootstrap.Markdown = function(config){
  17     Roo.bootstrap.Markdown.superclass.constructor.call(this, config);
  18
  19 };
  20
  21 Roo.extend(Roo.bootstrap.Markdown, Roo.bootstrap.TextArea,  {
  22
  23     editing :false,
  24
  25     initEvents : function()
  26     {
  27
  28         Roo.bootstrap.TextArea.prototype.initEvents.call(this);
  29         this.markdownEl = this.el.createChild({
  30             cls : 'roo-markdown-area'
  31         });
  32         this.inputEl().addClass('d-none');
  33         if (this.getValue() == '') {
  34             this.markdownEl.dom.innerHTML = String.format('<span class="roo-placeholder">{0}</span>', this.placeholder || '');
  35
  36         } else {
  37             this.markdownEl.dom.innerHTML = Roo.Markdown.toHtml(Roo.util.Format.htmlEncode(this.getValue()));
  38         }
  39         this.markdownEl.on('click', this.toggleTextEdit, this);
  40         this.on('blur', this.toggleTextEdit, this);
  41         this.on('specialkey', this.resizeTextArea, this);
  42     },
  43
  44     toggleTextEdit : function()
  45     {
  46         var sh = this.markdownEl.getHeight();
  47         this.inputEl().addClass('d-none');
  48         this.markdownEl.addClass('d-none');
  49         if (!this.editing) {
  50             // show editor?
  51             this.inputEl().setHeight(Math.min(500, Math.max(sh,(this.getValue().split("\n").length+1) * 30)));
  52             this.inputEl().removeClass('d-none');
  53             this.inputEl().focus();
  54             this.editing = true;
  55             return;
  56         }
  57         // show showdown...
  58         this.updateMarkdown();
  59         this.markdownEl.removeClass('d-none');
  60         this.editing = false;
  61         return;
  62     },
  63     updateMarkdown : function()
  64     {
  65         if (this.getValue() == '') {
  66             this.markdownEl.dom.innerHTML = String.format('<span class="roo-placeholder">{0}</span>', this.placeholder || '');
  67             return;
  68         }
  69
  70         this.markdownEl.dom.innerHTML = Roo.Markdown.toHtml(Roo.util.Format.htmlEncode(this.getValue()));
  71     },
  72
  73     resizeTextArea: function () {
  74
  75         var sh = 100;
  76         Roo.log([sh, this.getValue().split("\n").length * 30]);
  77         this.inputEl().setHeight(Math.min(500, Math.max(sh, (this.getValue().split("\n").length +1) * 30)));
  78     },
  79     setValue : function(val)
  80     {
  81         Roo.bootstrap.TextArea.prototype.setValue.call(this,val);
  82         if (!this.editing) {
  83             this.updateMarkdown();
  84         }
  85
  86     },
  87     focus : function()
  88     {
  89         if (!this.editing) {
  90             this.toggleTextEdit();
  91         }
  92
  93     }
  94
  95
  96 });