270 lines
7.8 KiB
JavaScript
Executable File
270 lines
7.8 KiB
JavaScript
Executable File
/*
|
|
* CodePress - Real Time Syntax Highlighting Editor written in JavaScript - http://codepress.org/
|
|
*
|
|
* Copyright (C) 2006 Fernando M.A.d.S. <fermads@gmail.com>
|
|
*
|
|
* This program is free software; you can redistribute it and/or modify it under the terms of the
|
|
* GNU Lesser General Public License as published by the Free Software Foundation.
|
|
*
|
|
* Read the full licence: http://www.opensource.org/licenses/lgpl-license.php
|
|
*/
|
|
|
|
Ext.namespace('Ext.ux');
|
|
|
|
Ext.ux.CodePress = Ext.extend(Ext.form.Field, {
|
|
|
|
/**
|
|
* @cfg {String} sourceEl The id of the element to pull code from
|
|
*/
|
|
sourceEl : false
|
|
|
|
/**
|
|
* @cfg {String} code The code to use in the editor
|
|
*/
|
|
, code : false
|
|
|
|
/**
|
|
* @cfg {String} language The language to render the code with
|
|
*/
|
|
, language : false
|
|
|
|
, url : false
|
|
|
|
, height : false
|
|
|
|
, width : false
|
|
|
|
, autoResize : false
|
|
|
|
// private
|
|
, initialized : false
|
|
|
|
// private
|
|
, initComponent : function(){
|
|
Ext.ux.CodePress.superclass.initComponent.call(this);
|
|
|
|
// Hide the sourceEl if provided
|
|
if(this.sourceEl){
|
|
Ext.get(this.sourceEl).hide();
|
|
}
|
|
|
|
this.addEvents({
|
|
/**
|
|
* @event initialize
|
|
* Fires when the editor is fully initialized (including the iframe)
|
|
* @param {HtmlEditor} this
|
|
*/
|
|
initialize: true
|
|
|
|
/**
|
|
* @event activate
|
|
* Fires when the editor is first receives the focus. Any insertion must wait
|
|
* until after this event.
|
|
* @param {HtmlEditor} this
|
|
*/
|
|
, activate: true
|
|
|
|
});
|
|
}
|
|
|
|
// private (for BoxComponent)
|
|
, adjustSize : Ext.BoxComponent.prototype.adjustSize
|
|
|
|
, resize : function(){
|
|
//console.log('resizing: ' + this.ownerCt.body.dom.clientWidth + 'x' + this.ownerCt.body.dom.clientHeight);
|
|
var h = (this.height || this.ownerCt.body.dom.clientHeight) + 'px';
|
|
var w = (this.width || this.ownerCt.body.dom.clientWidth) + 'px';
|
|
var bodyWidth = ((this.width || this.ownerCt.body.dom.clientWidth)-50) + 'px';
|
|
this.editor.body.style.width = bodyWidth;
|
|
this.iframe.setStyle('height', h);
|
|
this.iframe.setStyle('width', w);
|
|
}
|
|
|
|
, onRender : function(ct, position){
|
|
Ext.ux.CodePress.superclass.onRender.call(this, ct, position);
|
|
|
|
if(!Ext.ux.CodePress.path){
|
|
this.getCodePath();
|
|
}
|
|
//Taken from Ext.form.HtmlEditor
|
|
this.el.dom.style.border = '0 none';
|
|
this.el.dom.setAttribute('tabIndex', -1);
|
|
this.el.addClass('x-hidden');
|
|
|
|
|
|
if(Ext.isIE){ // fix IE 1px bogus margin
|
|
this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
|
|
}
|
|
this.wrap = this.el.wrap({
|
|
//cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
|
|
});
|
|
|
|
// Create the iframe
|
|
this.iframe = Ext.get(document.createElement('iframe'));
|
|
this.iframe.src = (Ext.SSL_SECURE_URL || 'javascript:false');
|
|
|
|
// Create the textarea element if not created
|
|
if(!this.sourceEl){
|
|
this.textarea = Ext.get(document.createElement('textarea'));
|
|
}else{
|
|
this.textarea = Ext.get(this.sourceEl);
|
|
}
|
|
this.textarea.dom.disabled = true;
|
|
this.textarea.dom.style.overflow = 'hidden';
|
|
this.textarea.dom.style.overflow = 'auto';
|
|
this.iframe.dom.frameBorder = 0; // remove IE internal iframe border
|
|
this.iframe.setStyle('visibility', 'hidden');
|
|
this.iframe.setStyle('position', 'absolute');
|
|
this.options = this.textarea.dom.className;
|
|
|
|
this.wrap.dom.appendChild(this.textarea.dom);
|
|
this.textarea.dom.parentNode.insertBefore(this.iframe.dom, this.textarea.dom);
|
|
|
|
this.edit();
|
|
}
|
|
|
|
, afterRender : function(){
|
|
Ext.ux.CodePress.superclass.afterRender.call(this);
|
|
|
|
}
|
|
|
|
, focus : function(){
|
|
|
|
}
|
|
|
|
, getCodePath : function() {
|
|
s = document.getElementsByTagName('script');
|
|
for(var i=0,n=s.length;i<n;i++) {
|
|
if(s[i].src.match('Ext.ux.codepress.js')) {
|
|
Ext.ux.CodePress.path = s[i].src.replace('Ext.ux.codepress.js','');
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
, initialize : function() {
|
|
if(Ext.isIE){
|
|
this.doc = this.iframe.dom.contentWindow.document;
|
|
this.win = this.iframe.dom.contentWindow;
|
|
} else {
|
|
this.doc = this.iframe.dom.contentDocument;
|
|
this.win = this.iframe.dom.contentWindow;
|
|
}
|
|
// alert (this.win);
|
|
// for (var key in this.win){
|
|
// alert (key+"-"+this.win[key]);
|
|
// }
|
|
|
|
this.editor = this.win.CodePress;
|
|
this.editor.body = this.doc.getElementsByTagName('body')[0];
|
|
if(this.url){
|
|
Ext.Ajax.request({
|
|
url: this.url
|
|
, method:'get'
|
|
, success:function(response, options){
|
|
var code = response.responseText;
|
|
this.code = code;
|
|
this.editor.setCode(this.code);
|
|
}.createDelegate(this)
|
|
});
|
|
}else{
|
|
this.editor.setCode( this.getValue() );
|
|
// this.editor.setCode( this.code || this.textarea.dom.value );
|
|
}
|
|
this.resize();
|
|
this.setOptions();
|
|
this.editor.syntaxHighlight('init');
|
|
this.textarea.dom.style.display = 'none';
|
|
this.iframe.dom.style.position = 'static';
|
|
this.iframe.dom.style.visibility = 'visible';
|
|
this.iframe.dom.style.display = 'inline';
|
|
|
|
this.initialized = true;
|
|
//if(this.autoResize === true) this.resize();
|
|
this.fireEvent('initialize', this);
|
|
}
|
|
|
|
// obj can by a textarea id or a string (code)
|
|
, edit : function(obj,language) {
|
|
if(obj) this.textarea.dom.value = document.getElementById(obj) ? document.getElementById(obj).value : obj;
|
|
if(!this.textarea.dom.disabled) return;
|
|
this.language = language ? language : this.getLanguage();
|
|
this.iframe.dom.src = Ext.ux.CodePress.path+'codepress.html?language='+this.language+'&ts='+(new Date).getTime();
|
|
this.iframe.removeListener('load', this.initialize);
|
|
this.iframe.on('load', this.initialize, this);
|
|
}
|
|
|
|
, getLanguage : function() {
|
|
if(this.language) return this.language;
|
|
for (language in Ext.ux.CodePress.languages)
|
|
if(this.options.match('\\b'+language+'\\b'))
|
|
return Ext.ux.CodePress.languages[language] ? language : 'generic';
|
|
}
|
|
|
|
, setOptions : function() {
|
|
if(this.options.match('autocomplete-off')) this.toggleAutoComplete();
|
|
if(this.options.match('readonly-on')) this.toggleReadOnly();
|
|
if(this.options.match('linenumbers-off')) this.toggleLineNumbers();
|
|
}
|
|
|
|
, getCode : function() {
|
|
return this.textarea.dom.disabled ? this.editor.getCode() : this.textarea.dom.value;
|
|
}
|
|
|
|
, setCode : function(code) {
|
|
this.textarea.dom.disabled ? this.editor.setCode(code) : this.textarea.dom.value = code;
|
|
this.editor.syntaxHighlight();
|
|
}
|
|
|
|
, toggleAutoComplete : function() {
|
|
this.editor.autocomplete = (this.editor.autocomplete) ? false : true;
|
|
}
|
|
|
|
, toggleReadOnly : function() {
|
|
this.textarea.dom.readOnly = (this.textarea.dom.readOnly) ? false : true;
|
|
if(this.iframe.dom.style.display != 'none') // prevent exception on FF + iframe with display:none
|
|
this.editor.readOnly(this.textarea.dom.readOnly ? true : false);
|
|
}
|
|
|
|
, toggleLineNumbers : function() {
|
|
var cn = this.editor.body.className;
|
|
this.editor.body.className = (cn==''||cn=='show-line-numbers') ? 'hide-line-numbers' : 'show-line-numbers';
|
|
}
|
|
|
|
, toggleEditor : function() {
|
|
if(this.textarea.dom.disabled) {
|
|
this.textarea.dom.value = this.getCode();
|
|
this.textarea.dom.disabled = false;
|
|
this.iframe.dom.style.display = 'none';
|
|
this.textarea.dom.style.display = 'inline';
|
|
}
|
|
else {
|
|
this.textarea.dom.disabled = true;
|
|
this.setCode(this.textarea.dom.value);
|
|
this.editor.syntaxHighlight('init');
|
|
this.iframe.domstyle.display = 'inline';
|
|
this.textarea.dom.style.display = 'none';
|
|
}
|
|
}
|
|
});
|
|
|
|
Ext.reg('codepress', Ext.ux.CodePress);
|
|
|
|
|
|
|
|
Ext.ux.CodePress.languages = {
|
|
csharp : 'C#',
|
|
css : 'CSS',
|
|
generic : 'Generic',
|
|
html : 'HTML',
|
|
java : 'Java',
|
|
javascript : 'JavaScript',
|
|
perl : 'Perl',
|
|
ruby : 'Ruby',
|
|
php : 'PHP',
|
|
text : 'Text',
|
|
sql : 'SQL',
|
|
vbscript : 'VBScript'
|
|
}
|
|
|
|
Ext.ux.CodePress.path = '/js/thirdparty/codepress/'; |