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

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