TextArea has clickable links now

Erdogan Furkan
1 parent 58780dd2
Showing 6 changed files with 90 additions and 8 deletions Show diff stats
js/app/views/CatalogUI.js
js/app/views/DescriptionField.js
js/app/views/DownloadUI.js
js/app/views/PlotComponents/PlotTabContent.js
js/app/views/TimeTableUI.js
js/resources/css/amda.css
@@ -1307,7 +1307,12 @@ Ext.define(&#39;amdaUI.CatalogUI&#39;, {
                         }]
                 }]
         });
-
+        this.codeDescripton = Ext.create('amdaUI.DescriptionField',{
+            xtype: 'descriptionfield',
+            height:150,
+            align:'stretch',
+            name: 'description',
+        });
         this.formPanel = Ext.create('Ext.form.Panel', {
             region: 'center',
             me:this,
@@ -1401,11 +1406,16 @@ Ext.define(&#39;amdaUI.CatalogUI&#39;, {
                             bodyStyle: {background: '#dfe8f6',padding: '1'},
                             border:false,
                             layout:'fit',
-                            items:[{
-                                xtype: 'descriptionfield',
-                                align:'stretch',
-                                name: 'description',
-                            }],
+                            items:[
+                                this.codeDescripton
+                            ],
+                            listeners:{
+                                resize:function(a,b,height){
+                                    if(this.codeDescripton.codeMirror)
+                                        this.codeDescripton.codeMirror.setSize(null, height-20);
+                                },
+                                scope:this
+                            },
                         },
                         {
                             xtype: 'operationsTT',
@@ -4,6 +4,65 @@ Ext.define(&#39;amdaUI.DescriptionField&#39;, {
     alias: 'widget.descriptionfield',
  
     fieldLabel: 'Description',
-   
+    flex:1,
+    constructor: function() {
+        this.init();
+        this.callParent(arguments);
+    },
+    urlRegex : /(?:\b(?:https?|ftp):\/\/|www\.)(?:\S+(?::\S*)?@)?(?:\S+(?:\.\S+)+(?:[:\d]*)?)(?:\S+)?/gi,
+    amdaRegex : /amda/i,
+
+    setValue : function(value){
+        if(this.codeMirror){ 
+            this.codeMirror.getDoc().setValue(value);
+        }
+        this.callParent(arguments);
+    },
+    init : function() {
+        var me = this ;
+        CodeMirror.defineSimpleMode("amda_description", {
+            start: [
+                { regex: me.urlRegex, token: "amda_url" },
+                { regex: /\bamda\b/gi, token: "amda" }
+            ],
+            comment: [],
+            meta: {}
+        });
+
+        var myConf = {
+            listeners:
+            {
+                render:function(textArea, op){
+                    heightText = textArea.getHeight()-20;
+                    if (heightText <0) 
+                        heightText = 50;
+                    me.codeMirror = CodeMirror.fromTextArea(textArea.inputEl.dom, {
+                        lineNumbers: false,
+                        mode: 'amda_description',
+                        styleActiveLine: true,
+                        lineWrapping: true,
+
+                    });
+
+                    me.codeMirror.setSize(null, heightText);
+
+                    me.codeMirror.on('mousedown', function(cm, event) {
+                        var position = cm.coordsChar({ left: event.clientX, top: event.clientY });
+                        var token = cm.getTokenAt(position);
+                        
+                        if(token.type === 'amda_url' && token.end > position.ch && position.outside !== 1){
+                            var tokenText = token.string;
+                            window.open((tokenText.startsWith('www')) ? 'https://'+tokenText : tokenText, "_blank");
+                        }
+                    });
+                    me.codeMirror.on('change', function(a,e){ 
+                        me.setRawValue(a.getValue()); 
+                    });
+
+                }
+            }
+        };
+        Ext.apply (this , Ext.apply (arguments, myConf));
+    }
 });
  
@@ -654,6 +654,7 @@ Ext.define(&#39;amdaUI.DownloadUI&#39;, {
             layout:'fit',
             items:[{
                 xtype: 'descriptionfield',
+                height:120,
                 name: 'description',
                 emptyText:'Description',
                 fieldLabel: ''
@@ -225,7 +225,7 @@ Ext.define(&#39;amdaPlotComp.PlotTabContent&#39;, {
             bodyStyle: {background: '#dfe8f6',padding: '1', },
             border:false, 
             layout:'fit',
-            items:[{ xtype: 'descriptionfield', name: 'description', 
+            items:[{ xtype: 'descriptionfield', name: 'description', height:50,
             id:'plot_description',emptyText:'Description', fieldLabel: ''}]
         };
  
@@ -444,6 +444,7 @@ Ext.define(&#39;amdaUI.TimeTableUI&#39;, {
                 },
                 {
                     xtype: 'descriptionfield',
+                    height:180,
                     name: 'description',
                     anchor: '100% 50%'
                 },
@@ -626,3 +626,14 @@ p + p {
     font-weight: bold;
 }
  
+.cm-s-default .cm-amda_url {
+    color: #219;
+    font-weight: bold;
+    text-decoration: underline;
+    cursor:pointer;
+}
+
+.cm-s-default .cm-amda {
+    color: rgb(9, 134, 218);
+    font-weight: bold;
+}
 \ No newline at end of file