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         var v = this.getValue();
  34         if (v === false) {
  35             v = '';
  36         }
  37         this.markdownEl.dom.innerHTML = Roo.Markdown.toHtml(Roo.util.Format.htmlEncode(v));
  38         this.markdownEl.on('click', this.toggleTextEdit, this);
  39         this.on('blur', this.toggleTextEdit, this);
  40         this.on('specialkey', this.resizeTextArea, this);
  41     },
  42
  43     toggleTextEdit : function()
  44     {
  45         var sh = this.markdownEl.getHeight();
  46         this.inputEl().addClass('d-none');
  47         this.markdownEl.addClass('d-none');
  48         if (!this.editing) {
  49             // show editor?
  50             this.inputEl().setHeight(Math.min(500, Math.max(sh,(this.getValue().split("\n").length+1) * 30)));
  51             this.inputEl().removeClass('d-none');
  52             this.inputEl().focus();
  53             this.editing = true;
  54             return;
  55         }
  56         // show showdown...
  57         this.updateMarkdown();
  58         this.markdownEl.removeClass('d-none');
  59         this.editing = false;
  60         return;
  61     },
  62     updateMarkdown : function()
  63     {
  64         if (this.getValue() == '') {
  65             this.markdownEl.dom.innerHTML = String.format('<span class="roo-placeholder">{0}</span>', this.placeholder || '');
  66             return;
  67         }
  68
  69         this.markdownEl.dom.innerHTML = Roo.Markdown.toHtml(Roo.util.Format.htmlEncode(this.getValue()));
  70     },
  71
  72     resizeTextArea: function () {
  73
  74         var sh = 100;
  75         Roo.log([sh, this.getValue().split("\n").length * 30]);
  76         this.inputEl().setHeight(Math.min(500, Math.max(sh, (this.getValue().split("\n").length +1) * 30)));
  77     },
  78     setValue : function(val)
  79     {
  80         Roo.bootstrap.TextArea.prototype.setValue.call(this,val);
  81         if (!this.editing) {
  82             this.updateMarkdown();
  83         }
  84
  85     },
  86     focus : function()
  87     {
  88         if (!this.editing) {
  89             this.toggleTextEdit();
  90         }
  91
  92     }
  93
  94
  95 });